/* ==========================================================================
   Adaptive Section Styling based on Background Class
   ========================================================================== */

/* 1. White Background (.section-white or default .section)
   -------------------------------------------------------------------------- */
   .section-white,
   .section:not(.section-lightgrey):not(.section-darkgrey):not(.section-yellow) { /* Target sections without other specific bg classes */
       background-color: var(--light) !important; /* Ensure white */
   }

   .section-white h1, .section-white h2, .section-white h3, .section-white h4, .section-white h5, .section-white h6,
   .section:not(.section-lightgrey):not(.section-darkgrey):not(.section-yellow) h1,
   .section:not(.section-lightgrey):not(.section-darkgrey):not(.section-yellow) h2,
   .section:not(.section-lightgrey):not(.section-darkgrey):not(.section-yellow) h3,
   .section:not(.section-lightgrey):not(.section-darkgrey):not(.section-yellow) h4,
   .section:not(.section-lightgrey):not(.section-darkgrey):not(.section-yellow) h5,
   .section:not(.section-lightgrey):not(.section-darkgrey):not(.section-yellow) h6,
   .section-white .text-color-dark,
   .section:not(.section-lightgrey):not(.section-darkgrey):not(.section-yellow) .text-color-dark {
       color: var(--dark) !important; /* Dark Headings */
   }

   .section-white p, .section-white li:not(.nav-item),
   .section:not(.section-lightgrey):not(.section-darkgrey):not(.section-yellow) p,
   .section:not(.section-lightgrey):not(.section-darkgrey):not(.section-yellow) li:not(.nav-item) {
       color: var(--default) !important; /* Default text color */
       opacity: 1 !important;
   }
   .section-white p strong, .section-white li strong,
   .section:not(.section-lightgrey):not(.section-darkgrey):not(.section-yellow) p strong,
   .section:not(.section-lightgrey):not(.section-darkgrey):not(.section-yellow) li strong {
       color: var(--dark) !important; /* Ensure strong tags are dark */
   }

   .section-white a:not(.btn):not(.nav-link):not(.dropdown-item),
   .section:not(.section-lightgrey):not(.section-darkgrey):not(.section-yellow) a:not(.btn):not(.nav-link):not(.dropdown-item) {
       color: var(--primary) !important; /* Primary links */
   }
   .section-white a:not(.btn):not(.nav-link):not(.dropdown-item):hover,
   .section:not(.section-lightgrey):not(.section-darkgrey):not(.section-yellow) a:not(.btn):not(.nav-link):not(.dropdown-item):hover {
       color: var(--primary-100) !important;
   }

   .section-white .list-icons.list-primary > li > i,
   .section:not(.section-lightgrey):not(.section-darkgrey):not(.section-yellow) .list-icons.list-primary > li > i {
       color: var(--primary) !important; /* Primary checkmarks */
   }

   .section-white .feature-box .feature-box-icon .icons,
   .section:not(.section-lightgrey):not(.section-darkgrey):not(.section-yellow) .feature-box .feature-box-icon .icons {
       color: var(--primary) !important; /* Primary feature icons */
   }

   .section-white .process .process-step-content .icons,
   .section:not(.section-lightgrey):not(.section-darkgrey):not(.section-yellow) .process .process-step-content .icons {
       color: var(--primary) !important; /* Primary process icons */
   }


   /* 2. Light Grey Background (.section-lightgrey)
      -------------------------------------------------------------------------- */
   .section-lightgrey {
       background-color: var(--grey-100) !important; /* Use theme's light grey */
   }

   .section-lightgrey h1, .section-lightgrey h2, .section-lightgrey h3, .section-lightgrey h4, .section-lightgrey h5, .section-lightgrey h6,
   .section-lightgrey .text-color-dark {
       color: var(--dark) !important; /* Dark Headings */
   }

   .section-lightgrey p,
   .section-lightgrey li:not(.nav-item),
   .section-lightgrey .text-color-light { /* Paragraphs/lists become slightly darker grey */
       color: var(--dark) !important;
       opacity: 1 !important;
   }
   .section-lightgrey p strong,
   .section-lightgrey li strong {
       color: var(--dark) !important; /* Darker strong tags */
   }

   .section-lightgrey a:not(.btn):not(.nav-link):not(.dropdown-item) {
       color: var(--primary) !important; /* Primary links */
   }
   .section-lightgrey a:not(.btn):not(.nav-link):not(.dropdown-item):hover {
       color: var(--primary-100) !important;
   }

   .section-lightgrey .list-icons.list-primary > li > i {
       color: var(--primary) !important; /* Primary checkmarks */
   }

   .section-lightgrey .feature-box .feature-box-icon .icons {
       color: var(--dark) !important; /* Dark feature icons */
       opacity: 0.7 !important;
   }

   .section-lightgrey .process .process-step-content .icons {
       color: var(--dark) !important; /* Dark process icons */
       opacity: 0.7 !important;
   }


   /* 3. Dark Grey Background (.section-darkgrey)
      -------------------------------------------------------------------------- */
   .section-darkgrey {
       background-color: var(--dark) !important;
   }

   .section-darkgrey h1, .section-darkgrey h2, .section-darkgrey h3, .section-darkgrey h4, .section-darkgrey h5, .section-darkgrey h6,
   .section-darkgrey .text-color-light {
       color: var(--light) !important; /* Light Headings */
   }

   .section-darkgrey p,
   .section-darkgrey li:not(.nav-item),
   .section-darkgrey .text-color-dark {
       color: var(--light) !important; /* Light text */
       opacity: 0.8 !important;
   }
   .section-darkgrey p strong,
   .section-darkgrey li strong {
       color: var(--light) !important;
       opacity: 1 !important;
   }

   .section-darkgrey a:not(.btn):not(.nav-link):not(.dropdown-item) {
       color: var(--primary) !important; /* Primary links (yellow) */
   }
   .section-darkgrey a:not(.btn):not(.nav-link):not(.dropdown-item):hover {
       color: var(--primary-100) !important;
   }

   .section-darkgrey .list-icons.list-primary > li > i {
       color: var(--primary) !important; /* Primary checkmarks (yellow) */
   }

   .section-darkgrey .feature-box .feature-box-icon .icons {
       color: var(--light) !important; /* Light feature icons */
       opacity: 0.8 !important;
   }

   .section-darkgrey .process .process-step-content .icons {
       color: var(--light) !important; /* Light process icons */
       opacity: 0.8 !important;
   }

   /* Reset card content inside dark sections */
   .section-darkgrey .card,
   .section-darkgrey .card p,
   .section-darkgrey .card li,
   .section-darkgrey .card h1, .section-darkgrey .card h2, .section-darkgrey .card h3, .section-darkgrey .card h4, .section-darkgrey .card h5, .section-darkgrey .card h6,
   .section-darkgrey .card .text-color-dark, .section-darkgrey .card .text-color-light {
       color: var(--default) !important;
       opacity: 1 !important;
   }
   .section-darkgrey .card a:not(.btn):not(.nav-link):not(.dropdown-item) {
       color: var(--primary) !important;
   }
   .section-darkgrey .card .list-icons.list-primary > li > i {
       color: var(--primary) !important;
       opacity: 1 !important;
   }


   /* 4. Yellow Background (.section-yellow)
      -------------------------------------------------------------------------- */
  /* .section-yellow {
       background-color: var(--primary) !important;
   }

   .section-yellow h1, .section-yellow h2, .section-yellow h3, .section-yellow h4, .section-yellow h5, .section-yellow h6,
   .section-yellow .text-color-light,
   .section-yellow .text-color-dark {
       color: var(--primary-inverse) !important;
   }

   .section-yellow p,
   .section-yellow li:not(.nav-item) {
       color: var(--primary-inverse) !important;
       opacity: 0.8 !important;
   }
   .section-yellow p strong,
   .section-yellow li strong {
       color: var(--primary-inverse) !important;
       opacity: 1 !important;
   }

   .section-yellow a:not(.btn):not(.nav-link):not(.dropdown-item) {
       color: var(--primary-inverse) !important;
       text-decoration: underline !important;
   }
   .section-yellow a:not(.btn):not(.nav-link):not(.dropdown-item):hover {
       color: var(--primary-inverse) !important;
       opacity: 0.9 !important;
       text-decoration: underline !important;
   }

   .section-yellow .list-icons.list-primary > li > i {
       color: var(--primary-inverse) !important;
       opacity: 0.8 !important;
   }

   .section-yellow .feature-box .feature-box-icon .icons {
       color: var(--primary-inverse) !important;
       opacity: 0.8 !important;
   }

   .section-yellow .process .process-step-content .icons {
       color: var(--primary-inverse) !important;
       opacity: 0.8 !important;
   }

   .section-yellow .btn-primary {
       background-color: var(--primary-inverse) !important;
       border-color: var(--primary-inverse) !important;
       color: var(--primary) !important;
   }
   .section-yellow .btn-primary img.svg-fill-color-light {
      filter: invert(75%) sepia(98%) saturate(1488%) hue-rotate(359deg) brightness(102%) contrast(102%);
   }
   .section-yellow .btn-primary:hover {
       background-color: rgba(255, 255, 255, 0.9) !important;
       border-color: rgba(255, 255, 255, 0.9) !important;
       color: var(--primary) !important;
   }

   .section-yellow .card,
   .section-yellow .card p,
   .section-yellow .card li,
   .section-yellow .card h1, .section-yellow .card h2, .section-yellow .card h3, .section-yellow .card h4, .section-yellow .card h5, .section-yellow .card h6,
   .section-yellow .card .text-color-dark, .section-yellow .card .text-color-light {
       color: var(--default) !important;
       opacity: 1 !important;
   }
   .section-yellow .card a:not(.btn):not(.nav-link):not(.dropdown-item) {
       color: var(--primary) !important;
       text-decoration: none !important;
   }
   .section-yellow .card .list-icons.list-primary > li > i {
       color: var(--primary) !important;
       opacity: 1 !important;
   }*/

/* 4. Yellow Background (.section-yellow) - UPDATED for Grey Elements
   -------------------------------------------------------------------------- */
   .section-yellow {
    background-color: var(--primary) !important; /* Yellow BG */
}

/* Headings2*/
.section-yellow h1, .section-yellow h2, .section-yellow h3, .section-yellow h4, .section-yellow h5, .section-yellow h6,
.section-yellow .text-color-light, /* Treat text-color-light as needing contrast */
.section-yellow .text-color-dark { /* Treat text-color-dark as needing contrast */
	color: var(--primary-inverse) !important; /* Use the darkest grey/black */
}

/* Paragraphs & Lists */
.section-yellow p,
.section-yellow li:not(.nav-item) {
	color: var(--dark) !important; /* Use the default text grey */
	opacity: 1 !important; /* Ensure full opacity */
}
/* Strong Tags*/
.section-yellow p strong,
.section-yellow li strong {
    color: var(--primary-inverse) !important; /* Darker for emphasis */
    opacity: 1 !important;
}

/* Links -> Dark Grey, maybe keep underline */
.section-yellow a:not(.btn):not(.nav-link):not(.dropdown-item) {
	color: var(--dark) !important;
    text-decoration: underline !important; /* Optional: keep underline */
    opacity: 0.9 !important; /* Slightly less prominent */
}
.section-yellow a:not(.btn):not(.nav-link):not(.dropdown-item):hover {
	color: var(--dark) !important;
    opacity: 1 !important;
    text-decoration: underline !important;
}

/* Checkmarks -> Default Grey */
.section-yellow .list-icons.list-primary > li > i {
	color: var(--primary-inverse) !important;
    opacity: 1 !important;
}

/* Feature box icons -> Default Grey */
.section-yellow .feature-box .feature-box-icon .icons {
	color: var(--primary-inverse) !important;
    opacity: 1 !important;
}

/* Process steps icons -> Default Grey */
.section-yellow .process .process-step-content .icons {
    color: var(--dark) !important;
    opacity: 1 !important;
}

/* Style primary buttons -> Dark BG, White Text */
.section-yellow .btn-primary {
    background-color: var(--dark) !important; /* Dark BG */
    border-color: var(--dark) !important; /* Dark Border */
    color: var(--primary-inverse) !important; /* White Text */
}
/* Adjust icon color inside the button -> White */
.section-yellow .btn-primary img[data-icon] {
   filter: brightness(0) invert(1); /* Make icon white */
}
/* Hover state for button */
.section-yellow .btn-primary:hover {
    background-color: var(--dark-200) !important; /* Slightly lighter dark BG on hover */
    border-color: var(--dark-200) !important;
    color: var(--primary-inverse) !important; /* Keep text white */
}

/* Reset card content inside yellow sections (remains the same) */
.section-yellow .card,
.section-yellow .card p,
.section-yellow .card li,
.section-yellow .card h1, .section-yellow .card h2, .section-yellow .card h3, .section-yellow .card h4, .section-yellow .card h5, .section-yellow .card h6,
.section-yellow .card .text-color-dark, .section-yellow .card .text-color-light {
    color: var(--dark) !important;
    opacity: 1 !important;
}
.section-yellow .card a:not(.btn):not(.nav-link):not(.dropdown-item) {
    color: var(--dark) !important;
    text-decoration: none !important;
}
.section-yellow .card .list-icons.list-primary > li > i {
    color: var(--dark) !important;
    opacity: 1 !important;
}


   /* ==========================================================================
      Your existing custom styles below (from custom_.css)
      ========================================================================== */
   /* Custom styles for responsive text */
   .responsive-text {
       font-size: 1em !important; /* Base size */
       letter-spacing: 3px !important; /* Slightly reduced from the original 5px */
       white-space: normal !important; /* Allow text to break to new line */
       display: inline-block !important; /* Ensure line breaks work properly */
       line-height: 1 !important; /* Tighter line height for better appearance */
   }

   /* Override the theme's custom-big-text-style-1 class */
   h1.custom-big-text-style-1 {
       font-size: 8.6rem !important; /* Match the theme's default size */
   }

   /* Force the text to be small regardless of parent element */
   .custom-big-text-style-1 .responsive-text {
       font-size: 0.8em !important;
   }

   /* Medium devices (tablets) */
   @media (max-width: 991px) {
       .responsive-text {
           font-size: 0.7em !important;
           letter-spacing: 2px !important;
       }

       h1.custom-big-text-style-1 {
           font-size: 7rem !important;
       }
   }

   /* Small devices (landscape phones) */
   @media (max-width: 767px) {
       .responsive-text {
           font-size: 0.5em !important;
           letter-spacing: 1px !important;
       }

       h1.custom-big-text-style-1 {
           font-size: 5rem !important;
       }
   }

   /* Extra small devices (portrait phones) */
   @media (max-width: 575px) {
       .responsive-text {
           font-size: 0.2em !important; /* Much smaller on mobile */
           letter-spacing: 0px !important; /* Remove letter spacing on very small screens */
       }

       /* Override the parent h1 styles for better mobile display */
       h1.custom-big-text-style-1 {
           font-size: 2.5rem !important;
       }

       /* Special class for mobile text */
       .mobile-text-smaller {
           font-size: 1.5rem !important;
       }

       h1.custom-big-text-style-1 .responsive-text {
           font-size: 0.2em !important; /* Even smaller to ensure it fits */
           line-height: 1 !important;
       }

       /* Center text on mobile */
       h1.custom-big-text-style-1.text-lg-end {
           text-align: center !important;
       }
   }

   /* Very small devices */
   @media (max-width: 400px) {
       .responsive-text {
           font-size: 0.15em !important; /* Extremely small for very small screens */
           letter-spacing: -1px !important; /* Negative letter spacing to compress text */
           transform: scale(0.8, 1) !important; /* Horizontal compression */
       }

       h1.custom-big-text-style-1 {
           font-size: 1.5rem !important;
       }

       .mobile-text-smaller {
           font-size: 1rem !important;
       }

       h1.custom-big-text-style-1 .responsive-text {
           font-size: 0.1em !important;
       }
   }

   /* Extra small devices (iPhone SE and similar) */
   @media (max-width: 320px) {
       .responsive-text {
           font-size: 0.08em !important; /* Even smaller for the smallest screens */
           letter-spacing: -1.5px !important;
           transform: scale(0.7, 1) !important;
       }

       h1.custom-big-text-style-1 {
           font-size: 1rem !important;
       }

       .mobile-text-smaller {
           font-size: 0.8rem !important;
       }

       h1.custom-big-text-style-1 .responsive-text {
           font-size: 0.08em !important;
       }
   }

   /* Logo adjustments for all screen sizes */
   html #header .header-logo {
       position: relative;
   }

   /* Reduce the overall header height */
   html #header .header-container {
       height: 70px !important; /* Reduced from default 120px */
       min-height: 70px !important;
   }

   html.sticky-header-active #header .header-container {
       height: 60px !important; /* Reduced from default 90px */
       min-height: 60px !important;
   }

   /* Remove the yellow block completely */
   html #header .header-logo:before {
       content: none !important;
   }

   /* Ensure the yellow logo is visible and properly sized on all devices */
   html #header .header-logo .logo {
       display: block !important;
       opacity: 1 !important;
       visibility: visible !important;
       max-height: 50px !important; /* Increased from 33px */
       width: auto !important;
       margin-top: 5px !important; /* Reduced from 10px to make header less tall */
       margin-bottom: 5px !important; /* Added to make header less tall */
   }

   /* Hide the sticky logo by default */
   html #header .header-logo .sticky-logo-link {
       display: none !important;
       position: absolute !important;
       top: 0 !important;
       left: 0 !important;
   }

   html #header .header-logo .logo-sticky {
       opacity: 0 !important;
       visibility: hidden !important;
       display: none !important;
       position: absolute !important;
   }

   /* Sticky logo settings - only show when scrolling */
   html.sticky-header-active #header .header-logo .logo {
       opacity: 0 !important;
       visibility: hidden !important;
       display: none !important;
   }

   html.sticky-header-active #header .header-logo .sticky-logo-link {
       display: block !important;
       position: relative !important;
   }

   html.sticky-header-active #header .header-logo .logo-sticky {
       opacity: 1 !important;
       visibility: visible !important;
       display: block !important;
       position: relative !important;
       transform: none !important;
       max-height: 50px !important; /* Increased from 33px */
       width: auto !important;
       margin-top: 5px !important; /* Reduced from 10px */
       margin-bottom: 5px !important; /* Added to make header less tall */
   }

   /* Responsive styles for the outline text */
   .custom-outline-text-style-1 {
       /* Default size adjustment */
       font-size: 0.9em !important;
   }

   /* Adjust positioning of outline text elements */
   @media (max-width: 991px) {
       .custom-outline-text-style-1 {
           font-size: 0.8em !important;
       }

       /* Adjust top and bottom outline text positioning */
       .position-absolute.bottom-100 {
           bottom: 95% !important;
       }

       .position-absolute.top-100 {
           top: 95% !important;
       }
   }

   /* Small devices (landscape phones) */
   @media (max-width: 767px) {
       .custom-outline-text-style-1 {
           font-size: 0.7em !important;
       }

       /* Adjust top and bottom outline text positioning */
       .position-absolute.bottom-100 {
           bottom: 90% !important;
       }

       .position-absolute.top-100 {
           top: 90% !important;
       }
   }

   /* Extra small devices (portrait phones) */
   @media (max-width: 575px) {
       .custom-outline-text-style-1 {
           font-size: 0.6em !important;
       }

       /* Adjust top and bottom outline text positioning */
       .position-absolute.bottom-100 {
           bottom: 85% !important;
       }

       .position-absolute.top-100 {
           top: 85% !important;
       }
   }

   /* Very small devices */
   @media (max-width: 400px) {
       .custom-outline-text-style-1 {
           font-size: 0.5em !important;
           letter-spacing: 0px !important;
       }

       /* Adjust top and bottom outline text positioning */
       .position-absolute.bottom-100 {
           bottom: 80% !important;
       }

       .position-absolute.top-100 {
           top: 80% !important;
       }
   }

/* ==========================================================================
   Dropdown Styling
   ========================================================================== */

/* Global dropdown hover styles for all navigation dropdowns */
.header-nav .dropdown-item:hover,
.header-nav .dropdown-item:focus {
    background-color: #ffecc1 !important; /* Light yellow color */
    color: #333 !important; /* Keep text dark for contrast */
}

/* Add transition for smoother hover effect */
.header-nav .dropdown-item {
    transition: background-color 0.3s ease !important;
}

/* Fix for language dropdown on non-mobile */
@media (min-width: 992px) {
    /* Add margin-top for non-mobile view */
    .header-nav-feature .dropdown-menu.show {
        margin-top: 8px !important; /* Small gap between flag and dropdown on desktop */
    }

    /* Change hover color to yellow for non-mobile */
    .header-nav-feature .dropdown-item:hover,
    .header-nav-feature .dropdown-item:focus {
        background-color: #ffecc1 !important; /* Yellow color */
        color: #333 !important; /* Keep text dark for contrast */
    }
}

/* Fix for language dropdown on mobile */
@media (max-width: 991px) {
    /* Fix for the header-nav-features container */
    .header-nav-features {
        position: relative !important; /* Position relative to allow absolute positioning of children */
        z-index: 100000 !important; /* Ensure it's above other elements */
    }

    /* Fix for the dropdown container */
    .header-nav-feature.dropdown {
        position: relative !important; /* Position relative for proper dropdown positioning */
    }

    /* Ensure dropdown is visible when shown */
    .header-nav-feature .dropdown-menu.show {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        position: absolute !important; /* Absolute position relative to the header */
        top: 100% !important; /* Position below the flag */
        right: 0 !important;
        left: auto !important;
        z-index: 100000 !important; /* Extremely high z-index */
        transform: none !important;
        min-width: 120px !important;
        background: white !important;
        border: 1px solid rgba(0,0,0,0.15) !important;
        box-shadow: 0 6px 12px rgba(0,0,0,0.175) !important;
        max-width: 200px !important;
        margin-top: 0px !important; /* No gap on mobile */
    }

    /* Fix flag alignment */
    .header-nav-feature .flag {
        vertical-align: middle !important;
    }

    /* Fix flag size in dropdown */
    .header-nav-feature .dropdown-menu .flag {
        width: 24px !important;
        height: 14px !important;
        margin-right: 8px !important;
    }

    /* Fix dropdown item styling */
    .header-nav-feature .dropdown-item {
        display: flex !important;
        align-items: center !important;
        padding: 0.5rem 1rem !important;
        color: #333 !important; /* Ensure text is visible */
        transition: background-color 0.3s ease !important;
    }

    /* Change hover color to yellow */
    .header-nav-feature .dropdown-item:hover,
    .header-nav-feature .dropdown-item:focus {
        background-color: #ffecc1 !important; /* Light yellow color */
        color: #333 !important; /* Keep text dark for contrast */
    }

    /* Override any theme styles that might be hiding the dropdown */
    .owl-carousel {
        overflow: visible !important; /* Prevent the carousel from hiding overflow */
    }

    /* Ensure the dropdown toggle is clickable and visible */
    .header-nav-features-toggle {
        position: relative !important;
        z-index: 1000 !important;
        display: inline-block !important;
        padding: 5px !important;
        background-color: rgba(255, 255, 255, 0.8) !important; /* Semi-transparent background */
        border-radius: 4px !important;
    }

    /* Fix for header container */
    #header .header-container {
        overflow: visible !important; /* Ensure dropdowns can extend outside */
    }

    /* Fix for header body */
    #header .header-body {
        overflow: visible !important; /* Ensure dropdowns can extend outside */
    }

    /* Fix for header row */
    #header .header-row {
        overflow: visible !important; /* Ensure dropdowns can extend outside */
    }

    /* Fix for main container */
    .main {
        overflow: visible !important; /* Ensure dropdowns can extend outside */
    }

    /* Fix for body container */
    .body {
        overflow: visible !important; /* Ensure dropdowns can extend outside */
    }

    /* Fix for background image wrapper */
    .background-image-wrapper {
        z-index: 0 !important; /* Ensure it's below the dropdown */
    }
}