/* ================================================
   MOBILE RESPONSIVE ENHANCEMENTS FOR HOME PAGE
   ================================================ */

/* -------------------- HEADER / NAVIGATION SECTION -------------------- */
@media only screen and (max-width: 993px) {
    /* Fix header container to prevent overflow */
    #header {
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100%;
        overflow-x: hidden;
        position: relative;
        z-index: 1050;
    }
    
    #header .navbar {
        margin-left: 1rem !important;
        margin-right: 1rem !important;
        padding-block: 1rem;
        position: relative;
    }
    
    #header .container-fluid {
        padding: 0.5rem 1rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        width: 100%;
        position: relative;
    }
    
    /* Logo container - stays on left */
    #header .logo-container {
        margin-right: 0 !important;
        padding: 0 !important;
        max-width: 160px;
        flex-shrink: 1;
        order: 1;
    }
    
    #header .logo-container img {
        max-width: 160px !important;
        height: auto;
    }
    
    /* Hamburger button - stays on right */
    #header .navbar-toggler {
        margin-left: auto;
        padding: 0.5rem;
        border: none;
        background: transparent;
        flex-shrink: 0;
        order: 2;
        z-index: 1051;
    }
    
    #header .navbar-toggler i {
        font-size: 24px;
        color: var(--green);
    }
    
    #header .navbar-toggler:focus {
        box-shadow: none;
        outline: none;
    }
    
    /* Collapsible menu - FIXED FOR VISIBILITY */
    #header .navbar-collapse {
        width: 100%;
        margin-top: 1rem;
        order: 3;
        flex-basis: 100%;
        background: white !important;
        padding: 1rem;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out, padding 0.3s ease-in-out;
    }
    
    /* When menu is open/expanded */
    #header .navbar-collapse.show,
    #header .navbar-collapse.collapsing {
        max-height: 80vh !important;
        overflow-y: auto !important;
        opacity: 1 !important;
        padding: 1rem !important;
    }
    
    /* Navbar list styling */
    #header .navbar-nav {
        width: 100%;
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }
    
    /* Mobile arrow - only visible on mobile */
    .mobile-arrow {
        display: inline-block !important;
        font-size: 12px !important;
        transition: transform 0.3s ease;
    }
    
    /* Rotate arrow when dropdown is open */
    .nav-item.dropdown.show .mobile-arrow {
        transform: rotate(180deg);
    }
    
    /* Nav links in mobile */
    #header .nav-link {
        padding: 0.75rem 1rem !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        color: var(--black) !important;
        text-align: left !important;
        border-bottom: 1px solid #f0f0f0;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    
    #header .nav-item:last-child .nav-link {
        border-bottom: none;
    }
    
    #header .nav-link:hover,
    #header .nav-link:focus {
        color: var(--green) !important;
        background-color: #f8f9fa;
    }
    
    /* Dropdown menu styling for mobile */
    #header .dropdown-menu {
        position: static !important;
        transform: none !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        width: 100% !important;
        float: none !important;
        display: none;
    }
    
    /* Show dropdown when parent is clicked */
    #header .nav-item.dropdown.show .dropdown-menu {
        display: block !important;
    }
    
    #header .dropdown-item {
        padding: 0.75rem 1.5rem !important;
        font-size: 15px !important;
        color: var(--grey) !important;
        border-bottom: 1px solid #f0f0f0;
        background: #f8f9fa !important;
        text-align: left !important;
    }
    
    #header .dropdown-item:last-child {
        border-bottom: none;
    }
    
    #header .dropdown-item:hover,
    #header .dropdown-item:focus {
        background-color: #e9ecef !important;
        color: var(--green) !important;
    }
    
    #header .dropdown-item.active {
        background-color: var(--green) !important;
        color: white !important;
    }
}

/* Hide mobile arrow on desktop */
@media only screen and (min-width: 994px) {
    .mobile-arrow {
        display: none !important;
    }
}

/* -------------------- HERO/BANNER SECTION -------------------- */
@media only screen and (max-width: 768px) {
    /* Optimized header spacing - reduced from 140px */
    main {
        padding-top: 20px !important;
    }

    /* Hero Section - Compact & Conversion-Focused */
    .section.pt-5.position-relative {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
        min-height: auto !important;
        overflow: visible !important;
        background: transparent !important;
        background-image: none !important;
    }

    .section.pt-5.position-relative .mx-auto {
        max-width: 100% !important;
        padding: 0 0.5rem;
        display: none !important;
    }

    /* Hide hero image container completely on mobile */
    .section.pt-5.position-relative > div:first-child {
        display: none !important;
    }

    .section.pt-5.position-relative img.img-fluid {
        display: none !important;
    }

    .section.pt-5.position-relative .position-absolute {
        position: relative !important;
        padding: 0 !important;
        margin-top: 0 !important;
        z-index: 10;
    }

    .section.pt-5.position-relative .mx-xl-5 {
        margin: 0 !important;
    }

    .section.pt-5.position-relative .d-flex.flex-xl-row {
        flex-direction: column !important;
        gap: 1rem !important;
        padding-bottom: 1rem !important;
    }

    /* Hero Title - BLACK TEXT, NO TEXT-SHADOW, WHITE BACKGROUND */
    .section.pt-5.position-relative h1 {
        font-size: 22px !important;
        line-height: 1.3;
        text-align: center !important;
        color: #000000 !important;
        font-weight: 600 !important;
        text-shadow: none !important;
    }

    .section.pt-5.position-relative h1.accent-primary {
        color: #000000 !important;
        text-shadow: none !important;
    }

    .section.pt-5.position-relative .py-5 {
        padding: 1.25rem !important;
        background-color: #FFFFFF !important;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }

    .section.pt-5.position-relative .bg-accent-primary {
        padding: 1.25rem !important;
        border-radius: 12px !important;
        background-color: #FFFFFF !important;
        box-shadow: 0 2px 12px rgba(0,0,0,0.1);
    }

    .section.pt-5.position-relative .bg-accent-primary p {
        color: #545353 !important;
        font-size: 14px !important;
        line-height: 1.5;
        margin-bottom: 1rem !important;
    }

    .section.pt-5.position-relative .d-flex.flex-xl-row.gap-5 {
        flex-direction: column !important;
        gap: 1rem !important;
        align-items: center !important;
    }

    /* CTA Button - Make it pop */
    .section.pt-5.position-relative .btn-accent {
        width: 100% !important;
        padding: 14px 24px !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        box-shadow: 0 4px 12px rgba(16, 87, 66, 0.3);
    }

    /* Customer Container */
    .customer-container {
        justify-content: center;
        margin-top: 0.5rem;
    }

    .customer-item {
        width: 45px !important;
        height: 45px !important;
        margin-left: -8px;
        border-width: 2px;
    }

    .testimonial-name {
        color: #545353 !important;
        font-size: 13px !important;
    }

    /* Stars */
    .section.pt-5.position-relative i.fa-star {
        font-size: 14px !important;
    }
}

/* Tablet view fixes (769px - 1024px) */
@media only screen and (min-width: 769px) and (max-width: 1024px) {
    .section.pt-5.position-relative {
        padding-top: 2rem !important;
    }

    .section.pt-5.position-relative h1 {
        font-size: 28px !important;
        color: #000000 !important;
        text-shadow: none !important;
    }

    .section.pt-5.position-relative h1.accent-primary {
        color: #000000 !important;
        text-shadow: none !important;
    }

    .section.pt-5.position-relative .py-5 {
        background-color: #FFFFFF !important;
    }

    .section.pt-5.position-relative .bg-accent-primary {
        background-color: #FFFFFF !important;
    }

    .section.pt-5.position-relative .bg-accent-primary p {
        color: #545353 !important;
    }
}

/* -------------------- ABOUT PAGE HERO -------------------- */
@media only screen and (max-width: 768px) {
    /* Compact hero banner on about page */
    .section.mt-5.position-relative.overflow-hidden {
        height: 15vh !important;
        min-height: 150px !important;
        margin-top: 1rem !important;
        padding: 1rem !important;
    }
    
    .section.mt-5.position-relative h2 {
        font-size: 24px !important;
    }
    
    .breadcrumb {
        font-size: 13px !important;
    }
    
    .breadcrumb-item {
        font-size: 13px !important;
    }
}

/* -------------------- ABOUT SECTION -------------------- */
@media only screen and (max-width: 768px) {
    .section .row.row-cols-xl-2 {
        gap: 1.5rem;
    }

    /* Reduce spacing in content */
    .section .d-flex.flex-column.gap-3 {
        gap: 1rem !important;
    }

    .section .d-flex.flex-column.gap-4 {
        gap: 1.25rem !important;
    }

    .custom-border {
        border-width: 0 0 10px 10px;
        border-radius: 0 0 0 30%;
    }

    .request-loader {
        width: 80px;
        height: 80px;
        font-size: 20px;
    }

    .icon-box {
        font-size: 28px;
        padding: 15px;
        width: 60px;
        height: 60px;
    }

    .sub-heading {
        padding: 10px 15px;
        font-size: 12px;
    }

    .sub-heading h6 {
        font-size: 12px !important;
        color: #105742 !important;
    }

    /* Ensure all text is visible */
    .section h2,
    .section h3,
    .section h4,
    .section h5 {
        color: #161D1B !important;
    }

    .section p {
        color: #545353 !important;
    }

    .green {
        color: #105742 !important;
    }
}

/* -------------------- MARQUEE SECTION -------------------- */
@media only screen and (max-width: 768px) {
    .section.p-0 {
        padding: 2rem 0 !important;
    }

    .marquee-container {
        transform: rotate(2deg) !important;
    }

    .marquee-container.reverse {
        transform: rotate(-2deg) !important;
    }

    .marquee-item h3 {
        font-size: 20px !important;
    }

    .marquee-item i {
        font-size: 30px !important;
    }

    .marquee-item {
        padding-inline: 1rem !important;
    }
}

/* -------------------- SERVICES CARDS SECTION -------------------- */
@media only screen and (max-width: 768px) {
    /* Fix for green background sections - ensure white text */
    .bg-gradient-footer,
    .section.bg-gradient-footer {
        background: linear-gradient(180deg, #0C342C 46.04%, #076653 84.68%, #E3EF26 130.31%) !important;
    }
    
    .bg-gradient-footer h1,
    .bg-gradient-footer h2,
    .bg-gradient-footer h3,
    .bg-gradient-footer h4,
    .bg-gradient-footer h5,
    .bg-gradient-footer h6,
    .bg-gradient-footer p,
    .bg-gradient-footer span,
    .bg-gradient-footer li,
    .section.bg-gradient-footer h1,
    .section.bg-gradient-footer h2,
    .section.bg-gradient-footer h3,
    .section.bg-gradient-footer h4,
    .section.bg-gradient-footer h5,
    .section.bg-gradient-footer h6,
    .section.bg-gradient-footer p,
    .section.bg-gradient-footer span,
    .section.bg-gradient-footer li {
        color: #FFFFFF !important;
    }
    
    /* Cards inside green sections - WHITE background with DARK text */
    .bg-gradient-footer .card-pricing,
    .section.bg-gradient-footer .card-pricing {
        background-color: #FFFFFF !important;
    }
    
    .bg-gradient-footer .card-pricing h1,
    .bg-gradient-footer .card-pricing h2,
    .bg-gradient-footer .card-pricing h3,
    .bg-gradient-footer .card-pricing h4,
    .bg-gradient-footer .card-pricing h5,
    .bg-gradient-footer .card-pricing h6,
    .bg-gradient-footer .card-pricing p,
    .bg-gradient-footer .card-pricing span,
    .section.bg-gradient-footer .card-pricing h1,
    .section.bg-gradient-footer .card-pricing h2,
    .section.bg-gradient-footer .card-pricing h3,
    .section.bg-gradient-footer .card-pricing h4,
    .section.bg-gradient-footer .card-pricing h5,
    .section.bg-gradient-footer .card-pricing h6,
    .section.bg-gradient-footer .card-pricing p,
    .section.bg-gradient-footer .card-pricing span {
        color: #161D1B !important;
    }
    
    /* Green accent text should remain green */
    .bg-gradient-footer .green,
    .section.bg-gradient-footer .green,
    .bg-gradient-footer .card-pricing .green,
    .section.bg-gradient-footer .card-pricing .green {
        color: #105742 !important;
    }
    
    /* HOVER STATE: White text when card is hovered (green background) */
    .bg-gradient-footer .card-pricing:hover h1,
    .bg-gradient-footer .card-pricing:hover h2,
    .bg-gradient-footer .card-pricing:hover h3,
    .bg-gradient-footer .card-pricing:hover h4,
    .bg-gradient-footer .card-pricing:hover h5,
    .bg-gradient-footer .card-pricing:hover h6,
    .bg-gradient-footer .card-pricing:hover p,
    .bg-gradient-footer .card-pricing:hover span,
    .section.bg-gradient-footer .card-pricing:hover h1,
    .section.bg-gradient-footer .card-pricing:hover h2,
    .section.bg-gradient-footer .card-pricing:hover h3,
    .section.bg-gradient-footer .card-pricing:hover h4,
    .section.bg-gradient-footer .card-pricing:hover h5,
    .section.bg-gradient-footer .card-pricing:hover h6,
    .section.bg-gradient-footer .card-pricing:hover p,
    .section.bg-gradient-footer .card-pricing:hover span {
        color: #FFFFFF !important;
    }
    
    /* White cards/sections within green backgrounds */
    .bg-gradient-footer .p-3.bg-white,
    .bg-gradient-footer .p-4.bg-white,
    .section.bg-gradient-footer .p-3.bg-white,
    .section.bg-gradient-footer .p-4.bg-white {
        background-color: #FFFFFF !important;
    }
    
    .bg-gradient-footer .p-3.bg-white *,
    .bg-gradient-footer .p-4.bg-white *,
    .section.bg-gradient-footer .p-3.bg-white *,
    .section.bg-gradient-footer .p-4.bg-white * {
        color: #161D1B !important;
    }
    
    /* Card-service inside green sections - WHITE background with DARK text */
    .bg-gradient-footer .card-service,
    .section.bg-gradient-footer .card-service {
        background-color: #FFFFFF !important;
    }
    
    .bg-gradient-footer .card-service *,
    .section.bg-gradient-footer .card-service * {
        color: #161D1B !important;
    }
    
    .bg-gradient-footer .card-service .badge,
    .section.bg-gradient-footer .card-service .badge {
        color: var(--accent-primary) !important;
    }
    
    .bg-gradient-footer .card-service h3,
    .bg-gradient-footer .card-service h4,
    .section.bg-gradient-footer .card-service h3,
    .section.bg-gradient-footer .card-service h4 {
        color: #161D1B !important;
    }
    
    /* Card-service with gradient backgrounds (Proven Track Record) - WHITE text */
    .card-service[style*="linear-gradient"],
    .card-service[style*="background: linear-gradient"] {
        background: linear-gradient(135deg, #0C342C 0%, #076653 100%) !important;
    }
    
    .card-service[style*="linear-gradient"] *,
    .card-service[style*="background: linear-gradient"] * {
        color: #FFFFFF !important;
    }
    
    .card-service[style*="linear-gradient"] .badge,
    .card-service[style*="background: linear-gradient"] .badge {
        background: var(--accent-primary) !important;
        color: #0C342C !important;
    }
    
    /* EXCEPTION: Keep table section WHITE (bg-accent-primary section) */
    .bg-gradient-footer .bg-accent-primary,
    .section.bg-gradient-footer .bg-accent-primary {
        background-color: #FFFFFF !important;
    }
    
    .bg-gradient-footer .bg-accent-primary h1,
    .bg-gradient-footer .bg-accent-primary h2,
    .bg-gradient-footer .bg-accent-primary h3,
    .bg-gradient-footer .bg-accent-primary h4,
    .bg-gradient-footer .bg-accent-primary h5,
    .bg-gradient-footer .bg-accent-primary h6,
    .bg-gradient-footer .bg-accent-primary p,
    .bg-gradient-footer .bg-accent-primary span,
    .section.bg-gradient-footer .bg-accent-primary h1,
    .section.bg-gradient-footer .bg-accent-primary h2,
    .section.bg-gradient-footer .bg-accent-primary h3,
    .section.bg-gradient-footer .bg-accent-primary h4,
    .section.bg-gradient-footer .bg-accent-primary h5,
    .section.bg-gradient-footer .bg-accent-primary h6,
    .section.bg-gradient-footer .bg-accent-primary p,
    .section.bg-gradient-footer .bg-accent-primary span {
        color: #1a1a1a !important;
    }
    
    .bg-gradient-footer .table,
    .section.bg-gradient-footer .table,
    .bg-gradient-footer .table *,
    .section.bg-gradient-footer .table * {
        color: inherit !important;
    }

    .card-pricing {
        margin-top: 3rem !important;
        padding: 1.5rem !important;
        border-radius: 20px !important;
    }

    .card-pricing > div {
        margin-top: -60px !important;
    }

    .bg-accent-color-2.custom-border-3 {
        font-size: 40px !important;
        padding: 20px !important;
        border-width: 3px;
    }

    .card-pricing h4 {
        font-size: 20px !important;
    }

    .card-pricing .custom-border-4 {
        margin: 1rem 0;
    }

    .row.row-cols-xl-3 {
        margin-top: 30px !important;
    }
}

/* -------------------- COMPARISON TABLE -------------------- */
@media only screen and (max-width: 768px) {
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table-responsive table {
        min-width: 600px;
        font-size: 12px !important;
    }

    .table thead th {
        padding: 0.75rem !important;
        font-size: 14px !important;
    }

    .table tbody td {
        padding: 0.75rem !important;
    }

    .table tbody td p {
        font-size: 10px !important;
        margin-top: 0.25rem !important;
    }

    .table i {
        font-size: 1.2rem !important;
    }

    .bg-accent-primary.p-4.p-xl-5 {
        padding: 1.5rem !important;
    }

    .bg-accent-primary h3 {
        font-size: 20px !important;
        margin-bottom: 1rem !important;
    }
}

/* -------------------- SWIPER SERVICES -------------------- */
@media only screen and (max-width: 768px) {
    .swiperService {
        padding-top: 2rem !important;
    }

    .card-service {
        padding: 1.5rem !important;
        border-radius: 15px !important;
    }

    .card-service h5 {
        font-size: 18px !important;
    }

    .card-service p {
        font-size: 14px !important;
    }

    .custom-border-2 {
        border-width: 10px 0 0 10px;
        border-radius: 40% 0 0 0;
    }

    .swiper-pagination {
        margin-top: 1.5rem;
    }
}

/* -------------------- DIGITAL MARKETING SERVICES -------------------- */
@media only screen and (max-width: 768px) {
    .row.row-cols-1.row-cols-md-2.row-cols-lg-3 {
        gap: 1rem;
    }

    .card-service {
        min-height: auto !important;
    }

    .card-service h5 {
        font-size: 18px !important;
        line-height: 1.4;
    }
}

/* -------------------- GROWTH IMPACT SECTION -------------------- */
@media only screen and (max-width: 768px) {
    /* Compact Growth Impact section */
    .section .row.row-cols-1.row-cols-xl-2.align-items-center {
        gap: 1rem !important;
    }
    
    .stat-card {
        padding: 1rem !important;
    }

    .stat-card h3 {
        font-size: 28px !important;
        margin-bottom: 0.25rem !important;
    }

    .stat-card span,
    .stat-card p {
        font-size: 11px !important;
        margin-bottom: 0 !important;
    }
    
    .stat-card span {
        display: block;
        margin-bottom: 0.25rem !important;
    }

    .row.row-cols-2.g-3 {
        gap: 0.5rem !important;
        margin-bottom: 1rem !important;
    }
    
    /* Reduce spacing in Growth Impact section */
    .section .row.g-5 {
        gap: 1.5rem !important;
    }
    
    /* Compact info boxes */
    .section .p-4.rounded-4.border {
        padding: 1rem !important;
    }
    
    .section .p-4.rounded-4.border h6 {
        margin-bottom: 0.5rem !important;
        font-size: 13px !important;
    }
    
    .section .p-4.rounded-4.border ul {
        margin: 0 !important;
    }
    
    .section .p-4.rounded-4.border li {
        font-size: 13px !important;
        margin-bottom: 0.5rem !important;
    }
    
    .section .p-4.rounded-4.border li:last-child {
        margin-bottom: 0 !important;
    }
    
    /* Compact background boxes */
    .section .p-3.rounded-3 {
        padding: 0.75rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    .section .p-3.rounded-3 h6 {
        font-size: 13px !important;
        margin-bottom: 0.25rem !important;
    }
    
    .section .p-3.rounded-3 p {
        font-size: 13px !important;
        margin-bottom: 0 !important;
    }
}

/* -------------------- CASE STUDIES -------------------- */
@media only screen and (max-width: 768px) {
    .case-card {
        padding: 1.5rem !important;
    }

    .case-card h4 {
        font-size: 20px !important;
    }

    .case-card .badge {
        font-size: 11px !important;
        padding: 0.35rem 0.75rem;
    }

    .read-more {
        font-size: 14px !important;
    }
    
    /* Case Study Section with dark gradient (Service Pages) */
    .case-study-section[style*="background: linear-gradient(135deg, #0C342C"],
    section[style*="background: linear-gradient(135deg, #0C342C 0%, #041f1a 100%)"] {
        padding: 2rem 1rem !important;
    }
    
    .case-study-section h2,
    section[style*="background: linear-gradient(135deg, #0C342C 0%, #041f1a 100%)"] h2 {
        color: #FFFFFF !important;
        font-size: 24px !important;
    }
    
    /* Revenue cards - WHITE text on gradient */
    .revenue-card {
        padding: 1.5rem 1rem !important;
    }
    
    .revenue-card p,
    .revenue-card span {
        color: #FFFFFF !important;
    }
    
    /* Content boxes with white text */
    .case-study-section div[style*="background: rgba(255, 255, 255, 0.08)"] p,
    .case-study-section div[style*="background: rgba(255, 255, 255, 0.08)"] strong,
    section[style*="background: linear-gradient(135deg, #0C342C 0%, #041f1a 100%)"] div[style*="background: rgba(255, 255, 255, 0.08)"] p,
    section[style*="background: linear-gradient(135deg, #0C342C 0%, #041f1a 100%)"] div[style*="background: rgba(255, 255, 255, 0.08)"] strong {
        color: #FFFFFF !important;
    }
    
    /* Badges in case study */
    .case-study-section .badge,
    section[style*="background: linear-gradient(135deg, #0C342C 0%, #041f1a 100%)"] .badge {
        color: #FFFFFF !important;
        font-size: 11px !important;
    }
    
    /* Flex layout adjustments for mobile */
    .case-study-section .d-flex.flex-wrap {
        flex-direction: column !important;
    }
    
    .case-study-section div[style*="flex: 0 0 calc(30%"],
    .case-study-section div[style*="flex: 0 0 calc(70%"] {
        flex: 1 1 100% !important;
        min-width: 100% !important;
    }
}

/* -------------------- PROCESS SECTION -------------------- */
@media only screen and (max-width: 768px) {
    .row.row-cols-xl-5 {
        row-gap: 4rem !important;
    }

    .card-pricing > div {
        align-items: center !important;
    }

    .card-pricing .d-flex.flex-column.gap-2 {
        align-items: flex-start !important;
        width: 100%;
    }
    
    /* Add spacing above the final process text */
    .bg-gradient-footer .text-center.mt-4 {
        margin-top: 3rem !important;
    }
    
    .bg-gradient-footer .text-center.mt-4 p {
        margin-top: 1.5rem !important;
    }
}

/* -------------------- TABBED SECTION (SERVICES PAGE) -------------------- */
@media only screen and (max-width: 768px) {
    /* Fix tabs navigation */
    #regionalTabs {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        border-bottom: 2px solid rgba(227, 239, 38, 0.3) !important;
        margin-bottom: 1.5rem !important;
    }
    
    #regionalTabs .nav-item {
        flex-shrink: 0 !important;
    }
    
    #regionalTabs .nav-link {
        padding: 0.75rem 1rem !important;
        font-size: 13px !important;
        white-space: nowrap !important;
    }
    
    /* Tab content */
    .tab-content {
        transform: none !important;
    }
    
    .tab-pane .p-5 {
        padding: 1.5rem !important;
    }
    
    /* White background boxes inside tabs - DARK TEXT */
    .tab-pane .p-5.rounded-4[style*="background: rgba(255, 255, 255"] h3,
    .tab-pane .p-5.rounded-4[style*="background: rgba(255, 255, 255"] p,
    .tab-pane [style*="background: rgba(255, 255, 255"] h3,
    .tab-pane [style*="background: rgba(255, 255, 255"] p {
        color: #161D1B !important;
    }
    
    .tab-pane h3 {
        font-size: 20px !important;
        margin-bottom: 1rem !important;
    }
    
    .tab-pane p {
        font-size: 14px !important;
        margin-bottom: 1rem !important;
    }
}

/* -------------------- CTA SECTIONS (Service Pages) -------------------- */
@media only screen and (max-width: 768px) {
    /* Ready to Scale sections - Ensure white text visibility */
    div[style*="background: linear-gradient(135deg, #0C342C"],
    div[style*="background: linear-gradient(135deg, #0C342C 0%, #076653 100%)"] {
        padding: 2rem 1.5rem !important;
    }
    
    div[style*="background: linear-gradient(135deg, #0C342C"] h3,
    div[style*="background: linear-gradient(135deg, #0C342C"] h4,
    div[style*="background: linear-gradient(135deg, #0C342C"] p,
    div[style*="background: linear-gradient(135deg, #0C342C 0%, #076653 100%)"] h3,
    div[style*="background: linear-gradient(135deg, #0C342C 0%, #076653 100%)"] h4,
    div[style*="background: linear-gradient(135deg, #0C342C 0%, #076653 100%)"] p {
        color: #FFFFFF !important;
    }
    
    div[style*="background: linear-gradient(135deg, #0C342C"] .fa-rocket,
    div[style*="background: linear-gradient(135deg, #0C342C 0%, #076653 100%)"] .fa-rocket {
        font-size: 2.5rem !important;
        color: var(--accent-primary) !important;
    }
    
    /* Why Choose section - Card pricing in light green section */
    div[style*="background: #EFF8F3"] .card-pricing,
    section[style*="background: #EFF8F3"] .card-pricing {
        background-color: #FFFFFF !important;
        margin-top: 2rem !important;
    }
    
    div[style*="background: #EFF8F3"] .card-pricing h4,
    div[style*="background: #EFF8F3"] .card-pricing p,
    section[style*="background: #EFF8F3"] .card-pricing h4,
    section[style*="background: #EFF8F3"] .card-pricing p {
        color: #161D1B !important;
    }
    
    div[style*="background: #EFF8F3"] .card-pricing .green,
    section[style*="background: #EFF8F3"] .card-pricing .green {
        color: #105742 !important;
    }
    
    /* Hover state - WHITE text on green background */
    div[style*="background: #EFF8F3"] .card-pricing:hover h4,
    div[style*="background: #EFF8F3"] .card-pricing:hover p,
    section[style*="background: #EFF8F3"] .card-pricing:hover h4,
    section[style*="background: #EFF8F3"] .card-pricing:hover p {
        color: #FFFFFF !important;
    }
}

/* -------------------- FAQ SECTION -------------------- */
@media only screen and (max-width: 768px) {
    .accordion-button {
        font-size: 16px !important;
        padding: 1rem !important;
        text-align: left;
    }

    .accordion-body {
        padding: 1.5rem !important;
        font-size: 14px !important;
    }

    .accordion-body h5,
    .accordion-body h6 {
        font-size: 15px !important;
    }

    .accordion-body p {
        font-size: 14px !important;
    }

    .accordion-body ul li {
        font-size: 14px !important;
    }

    .accordion-body .row.g-3 {
        gap: 0.75rem !important;
    }

    .accordion-body .col-md-6 {
        width: 100%;
    }

    .accordion-body .p-3 {
        padding: 1rem !important;
    }

    .accordion-body .p-3 h6 {
        font-size: 14px !important;
    }

    .accordion-body .p-3 p {
        font-size: 12px !important;
    }
    
    /* FAQ Section with dark gradient background (Service Pages) */
    section[style*="background: linear-gradient(180deg, #0C342C"] {
        padding: 2.5rem 1rem !important;
    }
    
    section[style*="background: linear-gradient(180deg, #0C342C"] h2,
    div[style*="background: linear-gradient(180deg, #0C342C"] h2 {
        color: #FFFFFF !important;
        font-size: 24px !important;
    }
    
    /* FAQ items - White text on dark gradient */
    .faq-item {
        margin-bottom: 0.75rem !important;
    }
    
    .faq-question {
        padding: 1rem !important;
        background: rgba(255,255,255,0.05) !important;
    }
    
    .faq-question h2,
    .faq-question h3,
    .faq-question h4 {
        color: #FFFFFF !important;
        font-size: 15px !important;
    }
    
    .faq-answer {
        padding: 0.75rem 1rem 1rem 1rem !important;
    }
    
    .faq-answer p,
    .faq-answer ul,
    .faq-answer li {
        color: #FFFFFF !important;
        font-size: 14px !important;
        line-height: 1.7 !important;
    }
    
    .faq-question i {
        color: var(--accent-primary) !important;
    }
}

/* -------------------- BLOG SECTION -------------------- */
@media only screen and (max-width: 768px) {
    .card.d-flex.flex-column.gap-3 h4 {
        font-size: 20px !important;
        line-height: 1.4;
    }

    .read-more.d-flex.flex-row span {
        font-size: 14px !important;
    }
}

/* -------------------- GENERAL MOBILE OPTIMIZATIONS -------------------- */
@media only screen and (max-width: 768px) {
    /* Section Padding - REDUCED FOR BETTER FLOW */
    .section {
        padding: 2rem 1rem !important;
    }

    /* First section after hero - less top padding */
    .section:nth-of-type(2) {
        padding-top: 1.5rem !important;
    }

    /* Container */
    .r-container {
        padding: 0 0.5rem;
    }

    /* Typography */
    h1 {
        font-size: 28px !important;
        line-height: 1.3;
    }

    h2 {
        font-size: 28px !important;
        line-height: 1.3;
    }

    h3 {
        font-size: 24px !important;
        line-height: 1.3;
    }

    h4 {
        font-size: 20px !important;
        line-height: 1.4;
    }

    h5 {
        font-size: 18px !important;
    }

    h6 {
        font-size: 14px !important;
    }

    p {
        font-size: 15px !important;
        line-height: 1.6;
    }

    /* Buttons */
    .btn-accent {
        padding: 10px 20px !important;
        font-size: 14px !important;
        width: 100%;
        justify-content: center;
    }

    .w-max-content {
        width: 100% !important;
    }

    /* Gap adjustments */
    .d-flex.flex-column.gap-3 {
        gap: 1.5rem !important;
    }

    .d-flex.flex-column.gap-5 {
        gap: 2rem !important;
    }

    /* Grid adjustments */
    .row.g-4 {
        gap: 1.5rem !important;
    }

    .row.g-5 {
        gap: 2rem !important;
    }
}

/* -------------------- EXTRA SMALL DEVICES -------------------- */
@media only screen and (max-width: 480px) {
    /* Hero Section */
    .section.pt-5.position-relative h1 {
        font-size: 20px !important;
    }

    .section.pt-5.position-relative img.img-fluid {
        height: 40vh !important;
        min-height: 300px;
    }

    /* Reduced padding */
    .section {
        padding: 2rem 1rem !important;
    }

    /* Cards */
    .card-pricing {
        padding: 1rem !important;
    }

    .card-service {
        padding: 1rem !important;
    }

    /* Stats */
    .stat-card {
        padding: 1rem !important;
    }

    .stat-card h3 {
        font-size: 24px !important;
    }

    /* Typography */
    h1 {
        font-size: 24px !important;
    }

    h2 {
        font-size: 24px !important;
    }

    h3 {
        font-size: 20px !important;
    }

    h4 {
        font-size: 18px !important;
    }

    /* Buttons */
    .btn-accent {
        padding: 8px 16px !important;
        font-size: 13px !important;
    }

    /* Icons */
    .icon-box {
        font-size: 24px;
        padding: 12px;
        width: 50px;
        height: 50px;
    }

    /* Table */
    .table-responsive table {
        min-width: 500px;
        font-size: 10px !important;
    }

    .table thead th {
        padding: 0.5rem !important;
        font-size: 12px !important;
    }

    .table tbody td {
        padding: 0.5rem !important;
    }
}

/* -------------------- LANDSCAPE MOBILE -------------------- */
@media only screen and (max-width: 768px) and (orientation: landscape) {
    .section.pt-5.position-relative img.img-fluid {
        height: 70vh !important;
    }

    .section {
        padding: 2rem 1.5rem !important;
    }
}

/* -------------------- UTILITY CLASSES -------------------- */
@media only screen and (max-width: 768px) {
    .text-xl-start {
        text-align: center !important;
    }

    .text-xl-end {
        text-align: center !important;
    }

    .align-items-xl-start {
        align-items: center !important;
    }

    .mb-xl-0 {
        margin-bottom: 1rem !important;
    }

    .ps-xl-4 {
        padding-left: 0 !important;
    }

    .pe-xl-4 {
        padding-right: 0 !important;
    }

    /* Hide scrollbar for cleaner mobile experience */
    .table-responsive::-webkit-scrollbar {
        height: 4px;
    }

    .table-responsive::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    .table-responsive::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 4px;
    }

    .table-responsive::-webkit-scrollbar-thumb:hover {
        background: #555;
    }
}

/* -------------------- TOUCH OPTIMIZATIONS -------------------- */
@media (hover: none) and (pointer: coarse) {
    /* Increase touch targets */
    .btn-accent,
    .read-more,
    .nav-link,
    .social-item {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Remove hover effects on touch devices */
    .card-pricing:hover,
    .card-service:hover {
        transform: none;
    }

    /* Better tap feedback */
    .btn-accent:active,
    .read-more:active {
        opacity: 0.7;
        transform: scale(0.98);
    }
}

/* -------------------- PERFORMANCE OPTIMIZATIONS -------------------- */
@media only screen and (max-width: 768px) {
    /* Reduce animations on mobile for better performance */
    .scrollanimation,
    .animated {
        animation: none !important;
    }

    /* Simplify transforms */
    .card:hover {
        transform: none;
    }

    /* Optimize images */
    img {
        image-rendering: -webkit-optimize-contrast;
    }
}