/* ====================================================================
   Megaverse — Global Theme Override v2
   Gradient: linear-gradient(135deg, #582d3f, #9a355f)
   — Zero pink (#bd4174 fully removed)
   — No layout, spacing, or structure changes
   ==================================================================== */

/* ===================================================================
   0. ROOT VARIABLE OVERRIDES
      custom.css defines --theme-gradient-light with #bd4174 (bright pink).
      Overriding here ensures every var(--theme-gradient-light) usage site-
      wide automatically uses the brand palette instead.
   =================================================================== */
:root {
    --theme-gradient:       linear-gradient(135deg, #582d3f, #9a355f) !important;
    --theme-gradient-light: linear-gradient(135deg, #6e3550, #9a355f) !important;
}

/* ===================================================================
   1. SECTION SUB-TITLE PILL — Restore visibility
      enhancements.css applied background-clip:text which made the pill
      badge invisible. This block fully restores the original pill look.
   =================================================================== */

.section-title .section-sub-title {
    background: var(--secondary-color) !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
    color: var(--primary-color) !important;
}

.bg-section .section-title .section-sub-title {
    background: var(--bg-color) !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
    color: var(--primary-color) !important;
}

/* Dark sections — white text, semi-transparent pill */
.dark-section .section-title .section-sub-title {
    background: rgba(255, 255, 255, 0.12) !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
    color: var(--white-color) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

/* Gradient dot accent (::before) inside pill */
.section-title .section-sub-title::before {
    background: linear-gradient(135deg, #582d3f, #9a355f) !important;
}

/* ===================================================================
   2. BUTTONS — Gradient base, white text & icon on hover
   =================================================================== */

/* All primary buttons use the gradient base */
.btn-default {
    background: linear-gradient(135deg, #582d3f, #9a355f) !important;
    color: #ffffff !important;
}

/* Hover: slightly lighter gradient, keep text white */
/* Match all chained selectors from custom.css line 10328 to beat specificity */
.btn-default:hover,
.header-btn .btn-default:hover,
.hero-btn-prime .btn-default:hover,
.hero-content-prime .btn-default:hover,
.section-btn .btn-default:hover,
.footer-newsletter-form .newsletter-btn:hover,
.footer-newsletter-form-prime .newsletter-btn:hover {
    background: linear-gradient(135deg, #6e3550, #9a355f) !important;
    color: #ffffff !important;
}

/* Arrow icon stays white on hover */
.btn-default:hover::before {
    filter: brightness(0) invert(1) !important;
}

/* Slide-in overlay keeps gradient theme */
.btn-default::after {
    background: linear-gradient(135deg, #6e3550, #9a355f) !important;
}

.btn-default:hover::after {
    background: linear-gradient(135deg, #6e3550, #9a355f) !important;
}

/* Highlighted variant — white bg, brand text, gradient on hover */
.btn-default.btn-highlighted {
    background: #ffffff !important;
    color: #582d3f !important;
}

.btn-default.btn-highlighted::before {
    background-image: url('../icons/arrow-primary.svg') !important;
    filter: none !important;
}

.btn-default.btn-highlighted:hover {
    background: linear-gradient(135deg, #582d3f, #9a355f) !important;
    color: #ffffff !important;
}

.btn-default.btn-highlighted:hover::before {
    filter: brightness(0) invert(1) !important;
}

/* Transparent variant — white border, gradient fill on hover */
.btn-default.btn-transparent {
    background: transparent !important;
    border: 2px solid rgba(255, 255, 255, 0.45) !important;
    color: #ffffff !important;
}

.btn-default.btn-transparent::after {
    display: none !important;
}

.btn-default.btn-transparent:hover {
    background: linear-gradient(135deg, #582d3f, #9a355f) !important;
    border-color: transparent !important;
    color: #ffffff !important;
}

.btn-default.btn-transparent:hover::before {
    filter: brightness(0) invert(1) !important;
}

/* Read-more text buttons */
.readmore-btn:hover {
    color: #9a355f !important;
}

.dark-section .readmore-btn {
    color: var(--white-color);
}

.dark-section .readmore-btn:hover {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* ===================================================================
   3. ICON BOXES — Gradient background (replaces flat #582d3f fill)
   =================================================================== */

.service-item-body .icon-box,
.service-item-prime .icon-box,
.commitment-item-header .icon-box,
.service-approach-item-header .icon-box,
.approach-item .icon-box,
.cta-box-item .icon-box,
.our-fact-item .icon-box,
.our-fact-item-prime .icon-box,
.fact-counter-item .icon-box,
.benefit-body-item .icon-box,
.benefit-body-item-prime .icon-box,
.about-us-body-item-prime .icon-box,
.why-choose-header .icon-box,
.why-choose-item .icon-box,
.why-choose-us-item .icon-box,
.about-us-contact-box .icon-box {
    background: linear-gradient(135deg, #582d3f, #9a355f) !important;
}

/* Icon hover fills — gradient, no pink overshoot */
.service-item-body .icon-box::before,
.commitment-item-header .icon-box::before,
.service-approach-item-header .icon-box::before,
.about-us-contact-box .icon-box::before {
    background: linear-gradient(135deg, #9a355f, #582d3f) !important;
}

/* Approach item hover — gradient shift instead of flat colour */
.approach-item:hover .icon-box {
    background: linear-gradient(135deg, #9a355f, #582d3f) !important;
}

/* Service card prime — gradient hover fill (replaces dark navy ::before slide-up) */
.service-item-prime::before {
    background: linear-gradient(135deg, #582d3f, #9a355f) !important;
}

/* Service card prime — icon box becomes transparent on hover (white ::before fills it) */
.service-item-prime.active .icon-box,
.service-item-prime:hover .icon-box {
    background: transparent !important;
}

/* Service card prime arrow button — gradient fill circle on hover */
.service-item-btn-prime a::before {
    background: linear-gradient(135deg, #582d3f, #9a355f) !important;
}

/* Phone/satisfy-client circle — gradient instead of standalone accent-secondary */
.satisfy-client-image.add-more {
    background: linear-gradient(135deg, #582d3f, #9a355f) !important;
}

/* FIX: service-approach icon was turning BLACK on hover */
.service-approach-item:hover .service-approach-item-header .icon-box img {
    filter: brightness(0) invert(1) !important;
}

/* ===================================================================
   4. SERVICE CARD HOVER — Gradient image overlay (replaces black)
   =================================================================== */

.service-item-image::after {
    background: linear-gradient(135deg, rgba(88, 45, 63, 0.82), rgba(154, 53, 95, 0.62)) !important;
    opacity: 1 !important;
}

/* ===================================================================
   5. FAQ ACCORDION — Gradient active state (removes black background)
   =================================================================== */

/* Expanded/active accordion button — gradient, white text */
.faq-accordion .accordion-header .accordion-button,
.faq-accordion .accordion-item .accordion-button:not(.collapsed) {
    background: linear-gradient(135deg, #582d3f, #9a355f) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

/* Collapsed state — transparent, dark text (readable) */
.faq-accordion .accordion-item .accordion-button.collapsed {
    background: transparent !important;
    color: var(--primary-color) !important;
}

/* Accordion body — light tinted bg, dark readable text */
.faq-accordion .accordion-item .accordion-body {
    background: rgba(88, 45, 63, 0.04) !important;
    border-top: 1px solid rgba(88, 45, 63, 0.12) !important;
}

.faq-accordion .accordion-item .accordion-body p {
    color: var(--primary-color) !important;
}

.faq-accordion .accordion-item .accordion-body ul li {
    color: var(--primary-color) !important;
}

/* Accordion toggle icons */
.faq-accordion .accordion-item .accordion-button::after,
.faq-accordion .accordion-item .accordion-button.collapsed::after {
    color: var(--primary-color) !important;
}

.faq-accordion .accordion-button:not(.collapsed)::after {
    color: #ffffff !important;
}

/* Focus ring */
.faq-accordion .accordion-button:focus,
.accordion-item .accordion-button:focus {
    box-shadow: 0 0 0 3px rgba(154, 53, 95, 0.18) !important;
}

/* ===================================================================
   6. TEAM CARDS — Gradient hover (replaces dark navy)
   =================================================================== */

.team-item:hover {
    background: linear-gradient(135deg, #582d3f, #9a355f) !important;
}

.team-social-list ul li:hover a {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    color: #ffffff !important;
}

/* ===================================================================
   7. SOCIAL LINKS — Gradient hover, white icon
   =================================================================== */

.footer-social-links ul li a:hover {
    background: linear-gradient(135deg, #582d3f, #9a355f) !important;
}

.footer-social-links ul li a:hover i {
    color: #ffffff !important;
}

.contact-us-social-list ul li a {
    border-color: #582d3f !important;
    color: #582d3f !important;
}

.contact-us-social-list ul li a:hover {
    background: linear-gradient(135deg, #582d3f, #9a355f) !important;
    border-color: transparent !important;
    color: #ffffff !important;
}

/* ===================================================================
   8. POST & BLOG — Gradient tags, white text on hover
   =================================================================== */

.post-tags .tag-links a {
    background: linear-gradient(135deg, #582d3f, #9a355f) !important;
    color: #ffffff !important;
}

.post-tags .tag-links a:hover {
    background: linear-gradient(135deg, #9a355f, #582d3f) !important;
    color: #ffffff !important;
}

.post-social-sharing ul li:hover a {
    background: linear-gradient(135deg, #582d3f, #9a355f) !important;
    color: #ffffff !important;
}

/* ===================================================================
   9. PAGINATION — Gradient active and hover
   =================================================================== */

.page-pagination ul li.active a,
.page-pagination ul li a:hover {
    background: linear-gradient(135deg, #582d3f, #9a355f) !important;
    border-color: transparent !important;
    color: #ffffff !important;
}

/* ===================================================================
   10. NAVIGATION HOVER — Brand gradient accent
   =================================================================== */

.main-menu ul li a:hover,
.main-menu ul li a:focus,
.main-menu ul li a.active {
    color: #9a355f !important;
}

.main-menu ul ul li a:hover,
.main-menu ul ul li a:focus {
    color: #9a355f !important;
    background: rgba(88, 45, 63, 0.06) !important;
}

/* Who-we-are tab nav underline */
.who-we-nav ul li .nav-link::before {
    background: linear-gradient(135deg, #582d3f, #9a355f) !important;
}

/* Mobile slicknav hover */
.slicknav_nav a:hover,
.slicknav_nav a:focus,
.slicknav_nav .slicknav_row:hover {
    background: rgba(88, 45, 63, 0.08) !important;
    color: #9a355f !important;
    border-radius: 6px;
}

/* ===================================================================
   11. FORM FOCUS STATES — Theme-coloured ring
   =================================================================== */

.contact-form .form-control:focus {
    border-color: #9a355f !important;
    box-shadow: 0 0 0 3px rgba(154, 53, 95, 0.12) !important;
    background: #ffffff !important;
}

/* ===================================================================
   12. NEWSLETTER BUTTON — Gradient, no pink
   =================================================================== */

.footer-newsletter-form .newsletter-btn,
.footer-newsletter-form-prime .newsletter-btn {
    background: linear-gradient(135deg, #582d3f, #9a355f) !important;
    color: #ffffff !important;
}

.footer-newsletter-form .newsletter-btn:hover,
.footer-newsletter-form-prime .newsletter-btn:hover {
    background: linear-gradient(135deg, #9a355f, #582d3f) !important;
    color: #ffffff !important;
}

/* ===================================================================
   13. SWIPER DOTS & MISC ACCENTS
   =================================================================== */

.swiper-pagination-bullet-active {
    background: linear-gradient(135deg, #582d3f, #9a355f) !important;
}

/* Gallery hover overlay */
.gallery-item .gallery-item-overlay,
.image-gallery-item .gallery-item-overlay {
    background: linear-gradient(135deg, rgba(88, 45, 63, 0.88), rgba(154, 53, 95, 0.72)) !important;
}

/* ===================================================================
   14. MOBILE NAV (SlickNav) — Gradient theme, remove black background
   =================================================================== */

/* Hamburger / close button — gradient */
.slicknav_btn {
    background: linear-gradient(135deg, #582d3f, #9a355f) !important;
}

/* Nav panel background — gradient (replaces #040618 black) */
.slicknav_menu {
    background: linear-gradient(160deg, #3d1e2b 0%, #582d3f 45%, #9a355f 100%) !important;
}

/* Nav items — white text on dark gradient */
.slicknav_nav .slicknav_row,
.slicknav_nav li a {
    color: #ffffff !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Hover/focus — subtle white highlight row */
.slicknav_nav a:hover,
.slicknav_nav a:focus,
.slicknav_nav .slicknav_row:hover {
    background-color: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    border-radius: 6px;
}

/* Dropdown arrow — white */
.slicknav_arrow:after,
.slicknav_open > a .slicknav_arrow:after {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Sub-menu items — slightly translucent white text */
.slicknav_menu ul ul li a {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Hamburger icon bars — white so visible on gradient */
.slicknav_icon .slicknav_icon-bar {
    background-color: #ffffff !important;
}