/* Custom CSS overrides for Nairo Creative */

/* =========================================
   HEADER VERTICAL ALIGNMENT FIX
   Critical: Perfect vertical centering for all header elements
   ========================================= */

/* Logo - Remove all vertical offsets and use flexbox centering */
.header-area .main-nav .logo {
    display: flex !important;
    align-items: center !important;
    height: 100px !important;
    line-height: normal !important; /* Override line-height: 100px */
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important; /* Protect logo from shrinking */
}

.header-area .main-nav .logo img.site-logo {
    height: 115px !important;
    width: auto !important;
    position: static !important; /* Remove relative positioning */
    top: auto !important; /* Remove top offset */
    transform: none !important; /* Remove any transforms */
    margin: 0 !important;
    vertical-align: middle !important;
}

/* Global CTA Visibility - High specificity to override flex rules */
.header-area .main-nav .nav li.mobile-only-cta {
    display: none !important;
}

/* Header CTA Group Protection */
.header-area .main-nav .header-cta {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    padding-left: 20px !important; /* Reduced from 30px */
    overflow: visible !important;
    min-width: max-content !important;
}

/* On sticky scroll */
.background-header .main-nav .logo {
    height: 80px !important;
    line-height: normal !important;
}

.background-header .main-nav .logo img.site-logo {
    height: 90px !important;
}

/* Make header sticky to top when scrolling */
.header-area {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background-color: transparent !important;
    background: transparent !important;
}

/* Semi-transparent white background for sticky header on scroll */
.background-header {
    background-color: rgba(255, 255, 255, 0.95) !important;
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.05) !important;
    backdrop-filter: blur(
        10px
    ); /* Add a subtle blur effect for a modern glassy feel */
}

/* Mobile Menu Transparency */
@media (max-width: 767px) {
    .header-area .main-nav .nav li {
        background: rgba(
            255,
            255,
            255,
            0.9
        ) !important; /* Slightly semi-transparent white for readability on mobile */
    }

    .header-area .main-nav .nav li a {
        background: transparent !important;
    }
}

/* Add padding to body to prevent content from hiding under fixed header */
/* Remove padding-top from body to allow header to overlap the banner */
body {
    padding-top: 0px;
}

/* Carousel Slider Styles */

.main-banner {
    padding-top: 300px; /* Substantially increased to push content lower */
    margin: 0;
    background-image: url("../images/showcase-bg.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    min-height: 800px; /* Adjust based on content */
    display: flex;
    align-items: center;
    justify-content: center; /* Center content horizontally */
    position: relative;
}

/* Hide decorative shapes */
.main-banner::before,
.main-banner::after {
    display: none !important;
}

#bannerCarousel {
    width: 100%;
    margin: 0;
    display: block;
}

.carousel-inner {
    height: auto;
    min-height: 600px;
    width: 100%;
    position: relative;
    background: transparent;
    overflow: hidden; /* Ensure only one slide is visible */
}

.carousel-item {
    height: auto;
    min-height: 600px;
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Fix carousel fade transition to prevent double slides and shapes */
.carousel-fade .carousel-item {
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
    position: absolute; /* Default to absolute for non-active */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

/* Active slide must be relative to give container height */
.carousel-fade .carousel-item.active {
    position: relative !important;
    opacity: 1;
    z-index: 2;
    transform: none !important;
}

/* Incoming/Outgoing slides must be absolute and have no transform */
.carousel-fade .carousel-item-next.carousel-item-start,
.carousel-fade .carousel-item-prev.carousel-item-end {
    position: absolute !important;
    top: 0;
    left: 0;
    opacity: 1;
    z-index: 2;
    transform: none !important;
}

.carousel-fade .active.carousel-item-start,
.carousel-fade .active.carousel-item-end {
    position: absolute !important;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 1;
    transform: none !important;
}

/* Ensure no other transform interferes */
.carousel-fade .carousel-item-next,
.carousel-fade .carousel-item-prev {
    position: absolute !important;
    transform: none !important;
}

.carousel-slide-bg {
    background: transparent !important;
    height: auto;
    min-height: 600px;
    width: 100%;
    position: relative;
    display: block;
}

.carousel-overlay {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.carousel-content {
    text-align: center;
    color: #2a2a2a; /* Darker text for light background */
    width: 100%;
    padding: 40px;
    opacity: 1;
}

.carousel-content {
    text-align: center;
    color: #2a2a2a;
    width: 100%;
    max-width: 1200px; /* Limit max width for better centering */
    padding: 80px 40px 40px 40px; /* Increased top padding from 40px to 80px */
    opacity: 1;
    margin: 0 auto; /* Ensure horizontal centering */
}

/* Remove all shadows from hero text */
.carousel-content h2,
.carousel-content p,
.carousel-content h6,
.see-through-text {
    text-shadow: none !important;
}

.carousel-content .tagline {
    font-size: 24px;
    font-weight: 300; /* Light text */
    color: #2a2a2a;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.carousel-content .main-title {
    font-size: 85px;
    color: #4562ed;
    line-height: 0.8; /* Further reduced to bring lines even closer */
    margin-bottom: 30px;
    max-width: 100%; /* Ensure it doesn't overflow container */
}

.carousel-content .main-title .title-line1 {
    display: block;
    font-weight: 300 !important; /* Light weight for first line */
    line-height: 0.8; /* Further reduced line height */
    white-space: nowrap; /* Prevent line breaking within title */
}

.carousel-content .main-title .title-line2 {
    display: block;
    font-weight: 600 !important; /* Black/Full Bold */
    line-height: 0.8; /* Further reduced line height */
    white-space: nowrap; /* Prevent line breaking within subtitle */
    margin-top: -25px; /* Increased negative margin to pull subtitle much closer */
}

.carousel-content .description {
    font-size: 20px;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto 30px auto;
    color: #4562ed; /* Same blue color as title */
    font-weight: 400;
    text-align: center;
    opacity: 0.9;
}

.see-through-text {
    /* If this was intended for a specific effect, we keep it but ensure it's readable */
    color: #4562ed !important;
    -webkit-text-fill-color: #4562ed !important;
}

/* Custom button style to match mockup "Let's Connect" */
.carousel-content .main-blue-button a {
    background-color: #52d7fc; /* Lighter blue from mockup */
    color: #fff;
    padding: 15px 40px;
    font-size: 18px;
    font-weight: 600;
    border-radius: 30px;
    box-shadow: 0 4px 15px rgba(82, 215, 252, 0.3);
}

.carousel-content .main-blue-button a:hover {
    background-color: #4562ed;
    box-shadow: 0 6px 20px rgba(69, 98, 237, 0.4);
}

/* =========================================
   Font Size Increases (New Additions)
   ========================================= */

/* General Body Text */
body,
p {
    font-size: 18px !important; /* Increased from default 15px */
    line-height: 1.8;
}

/* Section Headings */
.section-heading h2 {
    font-size: 42px !important; /* Increased from 30px */
    line-height: 1.4;
}

/* Navigation Menu */
.header-area .main-nav .nav li a {
    font-size: 20px !important; /* Increased from 18px */
}

/* Service Item Titles */
.service-item h4 {
    font-size: 24px !important; /* Increased from default usually 20px */
}

.service-item p {
    font-size: 17px !important;
}

/* Work Item Titles */
.work-item .work-content h4 {
    font-size: 26px !important; /* Increased */
}

.work-item .work-content span.category {
    font-size: 16px !important; /* Increased */
}

/* Footer Headings */
.footer-widget h4 {
    font-size: 24px !important; /* Increased */
    margin-bottom: 25px !important;
}

/* Footer Links and Text */
footer .footer-widget p {
    font-size: 17px !important; /* Increased */
    line-height: 1.8 !important;
    color: #fff !important;
}

.last-row p {
    font-size: 16px !important;
    color: #fff !important;
}

/* Responsive Overrides for Mobile */
@media (max-width: 768px) {
    .carousel-inner,
    .carousel-item,
    .carousel-slide-bg {
        height: auto !important;
        min-height: 300px !important; /* Reduced from 400px to fix "too much space" */
    }

    .main-banner {
        min-height: 450px !important; /* Slightly increased min-height to accommodate more padding */
        padding-top: 200px !important; /* Substantially increased for mobile */
        padding-bottom: 50px !important;
    }

    .carousel-content {
        padding: 20px !important;
    }

    .carousel-content .main-title {
        font-size: 40px !important; /* Adjusted for mobile */
        max-width: 95% !important; /* Allow some margin on mobile */
        margin: 0 auto 20px auto !important; /* Center the title */
    }

    .carousel-content .description {
        font-size: 16px !important;
        margin: 0 auto 20px auto !important;
        max-width: 90% !important;
    }

    .carousel-content p {
        font-size: 16px !important;
    }

    .carousel-content h6 {
        font-size: 16px !important;
    }

    .section-heading h2 {
        font-size: 32px !important;
    }

    /* Reduce title effect size on mobile */
    .our-portfolio .section-heading::before {
        font-size: 50px !important;
    }

    .services-title {
        font-size: 32px !important; /* Scaled down for mobile */
    }

    /* Reduce top margin/padding on mobile */
    .section,
    .our-services,
    .our-portfolio,
    .our-work {
        margin-top: 30px !important; /* Reduced from 60px */
        padding-top: 0 !important;
    }

    /* Ensure subpage sections still clear the fixed header on mobile */
    .subpage .section {
        padding-top: 120px !important;
    }

    /* Specific fix for the user's "150px margin-top" request - Reduced to 0 for tighter mobile spacing */
    #services {
        margin-top: 0px !important;
    }

    /* Center the Read More button in About section on mobile */
    #services .main-blue-button {
        text-align: center !important;
        display: flex;
        justify-content: center;
        width: 100%;
    }

    /* Remove white space between clients and footer */
    .our-clients {
        padding-bottom: 0px !important;
        margin-bottom: 0px !important;
    }

    footer {
        margin-top: 0px !important;
    }
}

/* Subpages padding to clear fixed transparent header */
.subpage .about-story,
.subpage .contact-header-section,
.subpage .our-portfolio.section,
.subpage .portfolio-section.section,
.subpage .service-journey-section,
.subpage .about-us.section {
    padding-top: 150px !important;
}

/* Background Text Effect for Our Services */
.our-portfolio .section-heading {
    position: relative;
    z-index: 1;
}

/* Background Text Effect Removal - CLEAN LOOK GLOBAL */
.our-portfolio .section-heading::before,
.approach-heading::before,
.our-work .section-heading::before,
.our-clients .section-heading::before,
.about-us .section-heading::before {
    display: none !important;
}

/* Global Section Background Removal (Specifically for header sections) */
.about-us,
.our-services,
.our-portfolio,
.our-work,
.our-clients {
    background: transparent !important;
    background-color: transparent !important;
}

/* Remove excessive spacing and shadows from our-services section */
.our-services {
    padding-top: 40px !important; /* Reduced from 80px */
    margin-top: 0 !important;
    box-shadow: none !important;
}

/* Reduce spacing for homepage Services and Works sections */
.our-portfolio.section {
    padding-top: 20px !important; /* Reduced from 40px */
    margin-top: 0 !important;
}

.our-work {
    padding-top: 60px !important;
    padding-bottom: 80px !important; /* Added space below the button */
}

.our-work .section-heading {
    margin-bottom: 40px !important;
}

/* Responsive Section Grid Margins (Replaced inline styles) */
.services-grid-margin {
    margin-top: -90px !important;
}

.works-grid-margin,
.clients-grid-margin {
    margin-top: -20px !important;
}

/* Adjust margins for laptop/mobile where negative margin is too much */
@media (max-width: 1280px) {
    .services-grid-margin {
        margin-top: -40px !important; /* Less aggressive on laptops */
    }
}

@media (max-width: 768px) {
    .services-grid-margin,
    .works-grid-margin,
    .clients-grid-margin {
        margin-top: 0 !important; /* Remove negative margins on mobile */
    }
}

/* Ensure no shadows on containers */
.our-services .container,
.our-services .row,
.section {
    box-shadow: none !important;
    margin-top: 0 !important;
}

/* New Underline Style for Services Heading */
.services-title {
    text-transform: uppercase !important;
    color: #4562ed !important;
    font-size: 85px !important; /* Increased from 65px for high impact */
    display: inline-block;
}

.services-title .our-text {
    font-weight: 700 !important; /* Reduced boldness */
    margin-right: 15px; /* Added spacing between title segments */
}

.services-title .services-text {
    font-weight: 700 !important; /* Slightly bolder */
    font-size: 0.85em; /* Slightly smaller than OUR */
}

/* Reduce gap between heading and images */
#services .section-heading {
    margin-bottom: 30px !important;
}

/* About Section Image Alignment and Shadow Fix */
#services .left-image {
    margin-top: 0 !important;
    padding-top: 5px; /* Fine-tune to align with the cap-height of the title */
}

#services .left-image img {
    box-shadow: none !important;
    filter: none !important;
    border-radius: 0 !important; /* Ensure no border radius if it's creating a shadow effect */
}

.cyan-underline {
    position: relative;
    display: inline-block;
}

.cyan-underline::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 100%;
    height: 4px;
    background-color: #52d7fc; /* Cyan color from mockup */
    border-radius: 2px;
}

/* =========================================
   Works Section Redesign
   ========================================= */

/* Ghost Text for Our Works */
.our-work .section-heading {
    position: relative;
    z-index: 1;
}

/* Ghost Text for Our Works - REMOVED for clean look */
.our-work .section-heading::before {
    display: none !important;
}

@media (max-width: 768px) {
    .our-work .section-heading::before {
        font-size: 50px !important;
    }
}

/* Enhanced Work Item Design */
.work-item {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* Premium shadow */
    transition: all 0.4s ease;
    margin-bottom: 30px;
    background: #fff; /* Ensure it has a bg */
}

.work-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.work-item img {
    width: 100%;
    height: auto;
    transition: transform 0.5s ease;
}

.work-item:hover img {
    transform: scale(1.05);
}

.work-item .work-content {
    padding: 25px;
    background: white; /* Changed from overlay to card style for better readability if preferred, or keep overlay */
    /* Let's keep the user's overlay preference but make it nicer? */
    /* Re-reading request: "make it eye catcher... like portfolio" */
    /* Let's stick to a clean card design or a premium overlay. */
    /* The original CSS had a gradient overlay. Let's make it more distinct. */
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.9) 0%,
        rgba(0, 0, 0, 0.6) 60%,
        transparent 100%
    );
    z-index: 2;
    transition: all 0.3s;
    text-align: center; /* Center align like services */
}

.work-item h4 {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #fff;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.work-item .category {
    font-size: 16px !important;
    color: #52d7fc;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* =========================================
   Service Item Redesign (Huge Images & Titles & Spacing)
   ========================================= */

/* Ensure columns have space between them vertically */
#portfolio .col-lg-4,
#portfolio .col-sm-6 {
    margin-bottom: 30px; /* Vertical spacing between rows */
}

/* Make the anchor tag filling the height of the column for equal height cards */
#portfolio a {
    display: block;
    height: 100%;
    text-decoration: none;
}

.service-item {
    text-align: center; /* Ensure centering */
    padding: 40px 30px; /* More padding for larger items */
    border-radius: 20px;
    background-color: #fff;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease-in-out;
    height: 100%; /* Uniform height */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.service-item:hover {
    transform: translateY(-5px);
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.15);
}

/* Override existing .icon styles to remove the small circle */
.service-item .icon {
    width: auto !important;
    height: auto !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    line-height: normal !important;
    margin-bottom: 25px !important;
    display: block;
}

/* Make image huge and responsive */
.service-item .icon img {
    width: 100%;
    max-width: 220px; /* Control max size so it's not absurdly huge but definitely "huge" compared to icon */
    height: auto;
    object-fit: contain;
    margin: 0 auto;
    transition: transform 0.3s ease;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.1));
}

.service-item:hover .icon img {
    transform: scale(1.05); /* Subtle pop effect */
}

/* Make Title Bigger and Bold */
.service-item h4 {
    font-size: 28px !important;
    font-weight: 800 !important;
    margin-top: 15px !important;
    margin-bottom: 10px !important;
    text-transform: capitalize;
    letter-spacing: 0.5px;
    color: #2a2a2a;
}

/* =========================================
   Our Clients Section
   ========================================= */

.our-clients {
    padding: 80px 0 0 0; /* Reduced top, removed bottom padding */
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    overflow: hidden;
    margin-top: 30px !important; /* Consistent top margin to prevent merging */
}

/* Eliminate gap before footer */
footer {
    margin-top: 0 !important;
    padding-top: 60px !important; /* Slightly reduced top padding */
}

/* Add space between Our Clients section and footer */
.our-clients {
    padding-bottom: 40px !important;
    margin-bottom: 0px !important;
}

/* Ghost Text for Our Clients */
.our-clients .section-heading {
    position: relative;
    z-index: 1;
    margin-bottom: 60px;
    text-align: center;
}

/* Ghost Text for Our Clients - REMOVED for clean look */
.our-clients .section-heading::before {
    display: none !important;
}

@media (max-width: 768px) {
    .our-clients .section-heading::before {
        font-size: 50px !important;
    }

    .our-clients {
        padding: 60px 0;
        margin-top: 40px;
    }
}

/* Clients Carousel Styles */
.clients-carousel-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 20px 0;
}

/* Edge overlays removed as requested */
/* Ensure no shadow effects anywhere */
.clients-carousel-wrapper::before,
.clients-carousel-wrapper::after {
    display: none !important;
}

.clients-carousel {
    width: 100%;
    overflow: hidden;
}

.clients-track {
    display: flex;
    gap: 100px; /* Reduced from 250px for more density */
    justify-content: center;
    width: 100%;
}

.clients-track.has-animation {
    animation: scroll-clients 40s linear infinite; /* Adjusted speed for higher density */
    width: max-content;
}

.clients-track:hover {
    animation-play-state: paused;
}

@keyframes scroll-clients {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.client-logo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    transition: all 0.4s ease;
    min-height: auto;
}

.client-logo:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: none;
}

.client-logo img {
    max-width: 350px; /* Increased from 200px */
    max-height: 180px; /* Increased from 100px */
    width: auto;
    height: auto;
    object-fit: contain;
    transition: all 0.4s ease;
}

.client-logo:hover img {
    transform: scale(1.1); /* Keep a subtle scale on hover */
}

/* Mobile Responsive */
/* =========================================
   LAPTOP & DESKTOP RESPONSIVENESS (>= 992px)
   ========================================= */

/* Ensure main-nav is flex for ALL desktop/laptop sizes */
@media (min-width: 992px) {
    .header-area .main-nav {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        min-height: 100px !important;
    }
}

/* Specific adjustments for laptop screens (992px - 1280px) */
@media (min-width: 992px) and (max-width: 1280px) {
    /* Tighten menu spacing to prevent wrapping */
    .header-area .main-nav .nav {
        gap: 5px !important;
        padding: 0 10px !important;
    }

    .header-area .main-nav .nav li a {
        font-size: 15px !important; /* Scaled down from 20px */
        padding: 5px 8px !important;
    }

    .header-area .main-nav .header-cta {
        padding-left: 10px !important;
    }

    .main-red-button a {
        padding: 10px 18px !important;
        font-size: 14px !important;
    }

    /* scale down large homepage elements for better fit */
    .services-title {
        font-size: 48px !important; /* Scale down from 85px */
    }
    
    /* Further reduce only the homepage About section heading on laptops */
    #services .services-title {
        font-size: 40px !important;
    }

    .carousel-content .main-title {
        font-size: 55px !important; /* Scale down from 85px */
    }

    .carousel-content .description {
        font-size: 16px !important;
        max-width: 600px !important;
    }

    .service-item .icon img {
        max-width: 140px !important; /* Scaled down from 220px */
    }

    .main-banner {
        padding-top: 200px !important; /* Reduced from 300px */
        min-height: 550px !important;
    }

    .carousel-content {
        padding: 40px 20px !important;
    }
}

/* =========================================
   FULL-WIDTH HEADER FIX FOR LARGE DESKTOPS
   Critical: Remove container max-width constraints + Perfect vertical alignment + Intelligent space distribution + Premium visual composition
   ========================================= */

/* Force full-width header container on all desktop/laptop screens */
@media (min-width: 1200px) {
    /* Override Bootstrap container max-width constraint */
    .header-area .container,
    .header-area .container-fluid {
        max-width: none !important;
        width: 100% !important;
        padding-left: 30px !important;
        padding-right: 30px !important;
    }

    /* Ensure row and column don't add constraints */
    .header-area .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }

    .header-area .col-12 {
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100% !important;
    }

    /* Main nav flexbox layout - 3-GROUP ARCHITECTURE */
    .header-area .main-nav {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        min-height: 100px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .background-header .main-nav {
        min-height: 80px !important;
    }

    /* Prevent text wrapping for all header links */
    .header-area .main-nav .nav li a,
    .main-red-button a {
        white-space: nowrap !important;
    }

    /* Group 1: Logo & Group 3: CTA - FIXED SIZE PROTECTION */
    .header-area .main-nav .logo,
    .header-area .main-nav .header-cta {
        flex: 0 0 auto !important;
        display: flex !important;
        align-items: center !important;
    }

    .header-area .main-nav .logo {
        height: 100px !important;
        margin-right: 20px !important; /* Reduced from 40px */
    }

    .background-header .main-nav .logo {
        height: 80px !important;
    }

    /* Group 2: Navigation - FLEXIBLE MIDDLE */
    .header-area .main-nav .nav {
        flex: 1 1 auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-wrap: nowrap !important;
        margin: 0 !important;
        padding: 0 15px !important; /* Reduced from 30px */
        overflow: visible !important;
        gap: 10px !important; /* Reduced from 15px */
        height: auto !important;
    }

    .background-header .main-nav .nav {
        margin: 0 !important; /* Remove margin-top: 20px */
    }

    /* Menu items - prevent wrapping, normalize height */
    .header-area .main-nav .nav li {
        flex: 0 0 auto !important; /* Don't grow, don't shrink */
        white-space: nowrap !important;
        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        display: flex !important;
        align-items: center !important;
    }

    .header-area .main-nav .nav li a {
        white-space: nowrap !important;
        display: flex !important;
        align-items: center !important;
        height: auto !important;
        line-height: normal !important;
        margin: 0 !important;
        padding: 10px 15px !important;
    }

    /* Let's Connect button - ALWAYS fully visible, never clip */
    .header-area .main-nav .nav li:last-child {
        flex: 0 0 auto !important; /* CRITICAL: Never shrink or grow */
        display: flex !important;
        align-items: center !important;
        padding-left: 30px !important; /* Reduced from 40px for better fit */
        margin-left: 0 !important; /* Remove auto margin for better control */
    }

    .main-red-button {
        flex: 0 0 auto !important; /* CRITICAL: Never shrink */
        display: flex !important;
        align-items: center !important;
        margin: 0 !important;
    }

    .main-red-button a {
        white-space: nowrap !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: auto !important;
        line-height: normal !important;
        margin: 0 !important;
    }
}

/* Specific adjustments for laptop screens (1200px - 1366px) */
/* IMPORTANT: Intelligent space distribution - looks like desktop but fits perfectly */
@media (min-width: 1200px) and (max-width: 1366px) {
    /* Reduce gap between menu items for better fit */
    .header-area .main-nav .nav {
        gap: 8px !important; /* Reduced from 15px */
    }

    /* Slightly reduce horizontal padding on menu items */
    .header-area .main-nav .nav li a {
        font-size: 16px !important;
        padding: 10px 10px !important; /* Reduced horizontal padding from 15px to 10px */
    }

    /* Optimize CTA button spacing */
    .header-area .main-nav .nav li:last-child {
        padding-left: 20px !important; /* Reduced from 30px */
    }

    .main-red-button a {
        padding: 12px 22px !important; /* Slightly reduced from 25px */
        font-size: 15px !important;
    }

    /* Slightly smaller logo for better balance */
    .header-area .main-nav .logo {
        height: 100px !important;
        margin-right: 15px !important; /* Reduced from 20px */
    }

    .header-area .main-nav .logo img.site-logo {
        height: 90px !important; /* Reduced from 95px for better fit */
    }

    .background-header .main-nav .logo {
        height: 80px !important;
    }

    .background-header .main-nav .logo img.site-logo {
        height: 72px !important; /* Proportionally reduced */
    }
}

/* Tighter laptop screens (1200px - 1280px) - Extra optimization */
@media (min-width: 1200px) and (max-width: 1280px) {
    /* Even tighter spacing for smallest laptop screens */
    .header-area .main-nav .nav {
        gap: 5px !important; /* Further reduced */
    }

    .header-area .main-nav .nav li a {
        padding: 10px 8px !important; /* Minimal horizontal padding */
    }

    .header-area .main-nav .nav li:last-child {
        padding-left: 15px !important;
    }

    .main-red-button a {
        padding: 12px 20px !important;
    }

    .header-area .main-nav .logo {
        margin-right: 10px !important;
    }

    .header-area .main-nav .logo img.site-logo {
        height: 85px !important; /* Slightly smaller for tightest screens */
    }

    .background-header .main-nav .logo img.site-logo {
        height: 68px !important;
    }
}

/* Standard desktop screens (1367px - 1599px) - Balanced composition */
@media (min-width: 1367px) and (max-width: 1599px) {
    .header-area .main-nav .nav {
        gap: 20px !important; /* Desktop spacing */
        justify-content: flex-end !important; /* Keep right-aligned */
    }

    .header-area .main-nav .nav li a {
        font-size: 18px !important;
        padding: 10px 15px !important;
    }

    /* Group 3: CTA - FIXED SIZE PROTECTION */
    .header-area .main-nav .header-cta {
        padding-left: 40px !important; /* Desktop spacing */
    }

    .main-red-button a {
        padding: 12px 30px !important;
        font-size: 15px !important;
    }

    .header-area .main-nav .logo {
        margin-right: 40px !important;
    }
}

/* Large desktop screens (1600px+) - Premium center-weighted composition */
/* CRITICAL: Visual balance fix - navigation grouped and center-weighted */
@media (min-width: 1600px) {
    /* Main nav: Use centered composition instead of space-between */
    .header-area .main-nav {
        justify-content: flex-start !important; /* Start from left, not space-between */
        gap: 0 !important; /* Remove gap, we'll control spacing manually */
    }

    /* Logo: Fixed on left */
    .header-area .main-nav .logo {
        flex: 0 0 auto !important;
        margin-right: auto !important; /* Push nav to center-right */
    }

    /* Navigation: Grouped container, center-weighted */
    .header-area .main-nav .nav {
        flex: 1 1 auto !important; /* Allow growing to take space */
        justify-content: center !important; /* Center items within nav */
        gap: 25px !important; /* Generous spacing between menu items */
        margin-right: 40px !important; /* Space before CTA button */
        max-width: none !important; /* Remove constraint that causes "collapsing" */
    }

    .header-area .main-nav .nav li a {
        font-size: 18px !important;
        padding: 10px 18px !important;
    }

    /* Group 3: CTA - Fixed on right */
    .header-area .main-nav .header-cta {
        padding-left: 0 !important;
        margin-left: 0 !important; /* Spacing controlled by nav margin-right */
    }

    .main-red-button a {
        padding: 12px 35px !important; /* Slightly larger for premium feel */
        font-size: 15px !important;
    }
}

/* Extra large desktop screens (1920px+) - Maximum premium composition */
@media (min-width: 1920px) {
    /* Even more center-weighted for ultra-wide screens */
    .header-area .main-nav .nav {
        gap: 30px !important; /* Maximum spacing between items */
        margin-right: 80px !important; /* More space before CTA */
        max-width: 800px !important; /* Slightly wider for ultra-wide screens */
    }

    .header-area .main-nav .nav li a {
        padding: 10px 20px !important;
    }

    .main-red-button a {
        padding: 12px 30px !important; /* Premium but not "extra large" */
    }
}

@media (max-width: 991px) {
    /* Tablet/iPad Fixes: Force Mobile Hamburger Menu */
    .background-header .main-nav .nav {
        margin-top: 80px !important;
    }

    .header-area .main-nav .logo {
        color: #1e1e1e;
    }

    .header-area.header-sticky .nav li a:hover,
    .header-area.header-sticky .nav li a.active {
        color: #4562ed !important;
        opacity: 1;
    }

    .header-area {
        background-color: #f7f7f7;
        padding: 0px 15px;
        height: 100px;
        box-shadow: none;
        text-align: center;
    }

    .header-area .container {
        padding: 0px;
    }

    .header-area .logo {
        margin-left: 30px;
    }

    .header-area .menu-trigger {
        display: block !important;
    }

    .header-area .main-nav {
        overflow: hidden;
    }

    .header-area .main-nav .header-cta {
        display: none !important;
    }
    .header-area .main-nav .nav {
        float: none;
        width: 100%;
        display: none;
        -webkit-transition: all 0s ease 0s;
        -moz-transition: all 0s ease 0s;
        -o-transition: all 0s ease 0s;
        transition: all 0s ease 0s;
        margin-left: 0px;
    }

    .header-area .main-nav .nav li.mobile-only-cta {
        display: block !important;
        text-align: center;
        padding: 10px 0 !important;
    }
    /* Mobile Styles End here, wait, need to wrap the rest */

    .background-header .nav {
        margin-top: 80px;
    }

    .header-area .main-nav .nav li:first-child {
        border-top: 1px solid #eee;
    }

    .header-area.header-sticky .nav {
        margin-top: 100px;
    }

    .header-area .main-nav .nav li {
        width: 100%;
        background: #fff;
        border-bottom: 1px solid #e7e7e7;
        padding-left: 0px !important;
        padding-right: 0px !important;
        display: block !important; /* Force display block */
    }

    .header-area .main-nav .nav li a {
        height: 50px !important;
        line-height: 50px !important;
        padding: 0px !important;
        border: none !important;
        background: #f7f7f7 !important;
        color: #191a20 !important;
        font-size: 16px !important; /* Readable on tablet */
    }

    .header-area .main-nav .nav li a:hover {
        background: #eee !important;
        color: #4562ed !important;
    }

    /* Ensure the mobile menu background is visible */
    .header-area .main-nav .nav li.submenu ul {
        background-color: #fff;
    }
}

/* Consolidation of Laptop Tightening (1200px - 1366px) */
@media (min-width: 1200px) and (max-width: 1366px) {
    .header-area .main-nav .nav li a {
        font-size: 14px !important; /* Slightly smaller for tight laptops */
        padding: 0 5px !important;
    }

    .header-area .main-nav .logo img.site-logo {
        height: 75px !important; /* Smaller logo for more space */
    }

    .main-red-button a {
        padding: 10px 20px !important; /* Smaller button */
        font-size: 13px !important;
    }
}

@media (max-width: 768px) {
    /* Reduce gap between "Our Approach" heading and journey items on mobile */
    .service-journey-section .col-lg-12.text-center.mb-5 {
        margin-bottom: 1rem !important;
    }

    .service-journey-section .journey-container {
        padding-top: 10px !important;
    }

    .clients-track {
        gap: 50px; /* Reduced gap for mobile */
    }

    .client-logo img {
        max-width: 150px; /* Smaller logos for mobile */
        max-height: 80px;
    }
}

/* Floating WhatsApp Button */
.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    right: 40px;
    background-color: #25d366;
    color: #fff;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 3px #999;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.whatsapp-float:hover {
    background-color: #128c7e;
    color: #fff;
    transform: scale(1.1);
}

.whatsapp-float i {
    margin-top: 2px; /* Slight adjustment for better visual centering */
}

@media (max-width: 768px) {
    .whatsapp-float {
        width: 50px;
        height: 50px;
        bottom: 20px;
        right: 20px;
        font-size: 25px;
    }
}