/* ============================================
   MOBILE RESPONSIVE STYLES FOR INDEX.PHP
   Add this to a new file: css/mobile-responsive.css
   ============================================ */

/* ============================================
   MOBILE MENU DROPDOWN FIX - LEFT ALIGNMENT
   This overrides corporate.css and other theme styles
   ============================================ */
@media (max-width: 991px) {
    /* Force LEFT alignment for ALL dropdown menus on mobile - MAXIMUM SPECIFICITY */
    html body #header #navbarNav .dropdown-menu,
    html body #header .dropdown-with-icon-style02 .dropdown-menu,
    html body .navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu,
    html body .box-layout #header .dropdown-menu,
    html body .box-layout .navbar .navbar-nav .dropdown .dropdown-menu {
        text-align: left !important;
        background: #f9f9f9 !important;
        width: 100% !important;
        margin: 0 !important;
        margin-left: 0 !important;
        padding: 0 !important;
        position: static !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }
    
    html body #header #navbarNav .dropdown-menu li,
    html body #header .dropdown-with-icon-style02 .dropdown-menu li,
    html body .navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li,
    html body .box-layout .navbar .navbar-nav .dropdown .dropdown-menu li {
        text-align: left !important;
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
    }
    
    html body #header #navbarNav .dropdown-menu li a,
    html body #header .dropdown-with-icon-style02 .dropdown-menu li a,
    html body .navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li a,
    html body .box-layout .navbar .navbar-nav .dropdown .dropdown-menu li a {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        text-align: left !important;
        padding: 12px 15px 12px 30px !important;
        padding-left: 30px !important;
        padding-right: 15px !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        color: #333 !important;
        background: transparent !important;
        border-bottom: 1px solid #eee !important;
        gap: 12px !important;
        width: 100% !important;
        margin: 0 !important;
        float: none !important;
    }
    
    html body #header #navbarNav .dropdown-menu li a i,
    html body #header .dropdown-with-icon-style02 .dropdown-menu li a i,
    html body .navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li a i,
    html body .box-layout .navbar .navbar-nav .dropdown .dropdown-menu li a i {
        font-size: 18px !important;
        color: #888 !important;
        width: 22px !important;
        min-width: 22px !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        order: 0 !important;
        flex-shrink: 0 !important;
        text-align: center !important;
    }
    
    html body #header #navbarNav .dropdown-menu li a:hover,
    html body #header .dropdown-with-icon-style02 .dropdown-menu li a:hover,
    html body .navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li a:hover {
        background: #f0f0f0 !important;
        color: #ff6b1a !important;
    }
    
    /* OPTIMIZE SECTION - Full width and centered */
    .optimize-section {
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0 !important;
    }
    
    .optimize-section .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        margin: 0 auto !important;
    }
    
    .optimize-section .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }
    
    .optimize-section .col-lg-6 {
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .optimize-content {
        text-align: center !important;
        padding: 0 15px !important;
    }
    
    /* CORPORATE SERVICES SECTION - Full width and centered */
    .corporate-services-section,
    section[class*="corporate"] {
        width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        margin: 0 !important;
    }
    
    .corporate-services-section .container,
    .corporate-services-block .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0 auto !important;
    }
    
    .corporate-services-section .row,
    .corporate-services-block .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }
    
    .corporate-services-section [class*="col-"],
    .corporate-services-block [class*="col-"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* WAY TO PROCESS EXCELLENCE SECTION - Full width and centered */
    .process-step-style-05,
    section.bg-gradient-very-light-gray {
        width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        margin: 0 !important;
    }
    
    .process-step-style-05 .container,
    section.bg-gradient-very-light-gray .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0 auto !important;
    }
    
    .process-step-style-05 .row,
    section.bg-gradient-very-light-gray .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }
    
    .process-step-style-05 [class*="col-"],
    section.bg-gradient-very-light-gray [class*="col-"] {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
    
    /* Process steps heading center */
    .col-xxl-4.col-lg-5 {
        text-align: center !important;
        padding: 0 10px !important;
    }
    
    .col-xxl-4.col-lg-5 h5 {
        text-align: center !important;
    }
    
    /* TESTIMONIALS SECTION - Full width and centered */
    #testimonials-section,
    .testimonial-section {
        width: 100% !important;
        max-width: 100% !important;
        padding: 35px 15px !important;
        margin: 0 !important;
    }
    
    #testimonials-section .container,
    .testimonial-section .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 auto !important;
    }
    
    #testimonials-section .row,
    .testimonial-section .row {
        width: 96% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    #testimonials-section [class*="col-"],
    .testimonial-section [class*="col-"] {
        padding: 0 !important;
        width: 100% !important;
    }
    
    #testimonials-section h3,
    .testimonial-section h3 {
        font-size: 22px !important;
        text-align: center !important;
        padding: 0 5px !important;
    }
    
    /* Partners slider centering */
    .partners-slider-wrapper {
        width: 100% !important;
        padding: 0 10px !important;
        margin: 0 auto !important;
    }
    
    .partners-slider-viewport {
        width: 100% !important;
    }
    
    .partner-slide {
        min-width: 150px !important;
        flex: 0 0 150px !important;
    }
    
    /* Swiper testimonials */
    .swiper.testimonials-style-06 {
        width: 100% !important;
        padding: 0 !important;
    }
    
    .col-12.position-relative.ps-8.pe-8 {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
}

/* Reset and Base Styles */


/* ============================================
   HERO SECTION / SLIDER
   ============================================ */
@media (max-width: 991px) {
    /* Hero Video Container */
    .fullscreen-container {
        height: 100vh !important;
        min-height: 600px !important;
    }
    
    #heroVideo {
        width: auto !important;
        height: 100% !important;
        min-width: 100% !important;
    }
    
    /* Hero Content */
    .fullscreen-container > div[style*="position: absolute"] {
        padding: 0 20px !important;
        max-width: 90% !important;
    }
    
    /* Hero Title */
    .fullscreen-container h1 {
        font-size: 48px !important;
        line-height: 1.2 !important;
        margin-bottom: 20px !important;
        letter-spacing: -1px !important;
    }
    
    /* Hero Subtitle */
    .fullscreen-container div[style*="font-size: 13px"] {
        font-size: 12px !important;
        margin-bottom: 15px !important;
    }
    
    /* Hero Description */
    .fullscreen-container p {
        font-size: 16px !important;
        line-height: 1.6 !important;
        margin-bottom: 25px !important;
        max-width: 100% !important;
    }
    
    /* Hide animated shapes on mobile */
    .fullscreen-container div[style*="border-radius: 50%"] {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .fullscreen-container h1 {
        font-size: 36px !important;
    }
    
    .fullscreen-container p {
        font-size: 15px !important;
    }
}

@media (max-width: 480px) {
    .fullscreen-container h1 {
        font-size: 28px !important;
        margin-bottom: 15px !important;
    }
    
    .fullscreen-container p {
        font-size: 14px !important;
        margin-bottom: 20px !important;
    }
}

/* ============================================
   STATS SECTION (99.99%, 5.0, 100%)
   ============================================ */
@media (max-width: 991px) {
    .border-bottom.border-color-extra-medium-gray .row {
        padding: 20px 0 !important;
    }
    
    .border-bottom.border-color-extra-medium-gray .col {
        border-right: none !important;
        border-bottom: 1px solid #e5e5e5 !important;
        padding: 25px 15px !important;
    }
    
    .border-bottom.border-color-extra-medium-gray .col:last-child {
        border-bottom: none !important;
    }
    
    .border-bottom.border-color-extra-medium-gray h2 {
        font-size: 36px !important;
    }
    
    .border-bottom.border-color-extra-medium-gray sup {
        font-size: 20px !important;
    }
}

/* ============================================
   ABOUT SECTION (12+ Technologies)
   ============================================ */
@media (max-width: 991px) {
    section .container[style*="padding-top: 60px"] {
        padding-top: 40px !important;
    }
    
    /* Counter Section */
    .absolute-middle-center {
        position: relative !important;
        transform: none !important;
        margin-bottom: 30px !important;
    }
    
    .absolute-middle-center .fs-160 {
        font-size: 80px !important;
    }
    
    .absolute-middle-center sub {
        font-size: 50px !important;
    }
    
    .absolute-middle-center .fs-20 {
        font-size: 16px !important;
        width: 100% !important;
    }
    
    /* Images */
    .position-absolute[data-bottom-top] {
        display: none !important;
    }
    
    /* Text Content */
    section .col-lg-6.ps-6 {
        padding: 0 15px !important;
        margin-top: 30px !important;
    }
    
    section .w-80 {
        width: 100% !important;
    }
    
    /* Button */
    .btn-large {
        padding: 12px 28px !important;
        font-size: 14px !important;
        margin-bottom: 20px !important;
    }
}

/* ============================================
   STATS CARDS (Months in Business, etc.)
   ============================================ */
@media (max-width: 991px) {
    .stats-section {
        padding: 40px 20px !important;
    }
    
    .stats-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        align-items: center !important;
    }
    
    .stat-card {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        padding: 30px 20px !important;
    }
    
    .stat-number {
        font-size: 2rem !important;
        padding-left: 0 !important;
    }
    
    .stat-label {
        font-size: 16px !important;
        padding-left: 0 !important;
    }
    
    .stat-icon i {
        margin-top: 0 !important;
        padding-bottom: 5px !important;
    }
}

/* ============================================
   SERVICES SLIDER SECTION
   ============================================ */
@media (max-width: 991px) {
    .overflow-hidden.position-relative[style*="background: linear-gradient"] {
        padding: 40px 0 !important;
    }
    
    .overflow-hidden.position-relative .container {
        padding: 0 15px !important;
    }
    
    /* Header Section */
    .overflow-hidden.position-relative .row.align-items-center .col-lg-5 {
        padding-top: 0 !important;
        margin-bottom: 15px !important;
    }
    
    .overflow-hidden.position-relative h3 {
        font-size: 28px !important;
        margin-bottom: 10px !important;
    }
    
    .overflow-hidden.position-relative .col-lg-5 p {
        padding-top: 0 !important;
        font-size: 15px !important;
    }
    
    /* Navigation Buttons */
    .nav-btn-slider {
        width: 40px !important;
        height: 40px !important;
        font-size: 14px !important;
    }
    
    /* Slider Track */
    .slider-wrapper-custom {
        margin: 0 -15px !important;
        padding: 0 15px !important;
    }
    
    .slider-track-custom {
        padding: 15px 0 !important;
    }
    
    /* Service Cards */
    .service-slide-custom {
        min-width: 300px !important;
        flex: 0 0 300px !important;
    }
    
    .service-slide-custom h4 {
        font-size: 20px !important;
    }
    
    .service-slide-custom p {
        font-size: 13px !important;
    }
}

@media (max-width: 767px) {
    .service-slide-custom {
        min-width: 280px !important;
        flex: 0 0 280px !important;
    }
}

@media (max-width: 480px) {
    .service-slide-custom {
        min-width: 260px !important;
        flex: 0 0 260px !important;
    }
}

/* ============================================
   PROCESS SECTION (Way to Process Excellence)
   ============================================ */
@media (max-width: 991px) {
    /* Process Steps */
    .process-step-style-05 {
        margin-bottom: 20px !important;
    }
    
    .process-step-style-05 .process-step-icon {
        width: 50px !important;
        height: 50px !important;
    }
    
    .process-step-style-05 .process-content {
        padding-left: 20px !important;
    }
    
    .process-step-style-05 span[style*="width: 300px"] {
        width: 100% !important;
        font-size: 16px !important;
    }
    
    .process-step-style-05 p {
        font-size: 15px !important;
        line-height: 1.6 !important;
    }
    
    /* Process Images */
    .col-lg-7.position-relative img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    .col-lg-7.position-relative .position-absolute {
        display: none !important;
    }
}

/* ============================================
   TESTIMONIALS SECTION
   ============================================ */
@media (max-width: 991px) {
    .testimonial-section {
        padding: 40px 0 30px !important;
    }
    
    .testimonial-section h3 {
        font-size: 28px !important;
        margin-top: 10px !important;
    }
    
    /* Testimonial Swiper */
    .swiper.testimonials-style-06 {
        padding: 0 40px !important;
    }
    
    .swiper-slide .row {
        flex-direction: column !important;
    }
    
    .swiper-slide .col-md-4 {
        margin-bottom: 20px !important;
    }
    
    .swiper-slide .col-md-4 img {
        max-width: 200px !important;
        height: auto !important;
    }
    
    .swiper-slide .col-lg-5 {
        padding: 0 20px !important;
    }
    
    .swiper-slide .fs-18 {
        font-size: 16px !important;
        line-height: 1.6 !important;
    }
    
    .swiper-slide .fs-15 {
        font-size: 13px !important;
    }
    
    /* Swiper Navigation */
    .swiper-button-previous-nav,
    .swiper-button-next-nav {
        width: 35px !important;
        height: 35px !important;
    }
    
    .swiper-button-previous-nav i,
    .swiper-button-next-nav i {
        font-size: 18px !important;
    }
}

@media (max-width: 767px) {
    .swiper.testimonials-style-06 {
        padding: 0 15px !important;
    }
    
    .swiper-button-previous-nav {
        left: 0 !important;
    }
    
    .swiper-button-next-nav {
        right: 0 !important;
    }
}

/* ============================================
   CLIENT LOGOS
   ============================================ */
@media (max-width: 991px) {
    .row.row-cols-md-3 .col {
        margin-bottom: 20px !important;
    }
    
    .row.row-cols-md-3 .col:last-child {
        margin-bottom: 0 !important;
    }
    
    .row.row-cols-md-3 img {
        height: 80px !important;
    }
}

/* ============================================
   BLOG SECTION
   ============================================ */
@media (max-width: 991px) {
    .bg-gradient-quartz-white {
        padding-top: 40px !important;
    }
    
    .bg-gradient-quartz-white h3 {
        font-size: 28px !important;
    }
    
    /* Blog Grid */
    .blog-grid {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
    
    .blog-grid .grid-item {
        margin-bottom: 0 !important;
    }
    
    /* Blog Card */
    .blog-image {
        height: 220px !important;
    }
    
    .card-body {
        padding: 20px !important;
    }
    
    .card-title {
        font-size: 18px !important;
        width: 100% !important;
    }
    
    .card-body p {
        font-size: 15px !important;
    }
    
    /* View More Button */
    .text-center .btn {
        font-size: 16px !important;
        padding: 12px 30px !important;
    }
}

/* ============================================
   GENERAL UTILITIES
   ============================================ */
@media (max-width: 991px) {
    /* Padding Adjustments */
    .pt-6, .pt-10 {
        padding-top: 40px !important;
    }
    
    .pb-6, .pb-10 {
        padding-bottom: 40px !important;
    }
    
    .mb-6, .mb-7 {
        margin-bottom: 30px !important;
    }
    
    /* Typography */
    h1, .h1 {
        font-size: 32px !important;
    }
    
    h2, .h2 {
        font-size: 28px !important;
    }
    
    h3, .h3 {
        font-size: 24px !important;
    }
    
    h4, .h4 {
        font-size: 20px !important;
    }
    
    h5, .h5 {
        font-size: 18px !important;
    }
    
    /* Buttons */
    .btn-large {
        padding: 12px 28px !important;
        font-size: 15px !important;
    }
    
    /* Spacing */
    .ps-25px, .pe-25px {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* Background Images */
    .background-no-repeat {
        background-size: cover !important;
        background-position: center !important;
    }
}

/* ============================================
   SCROLL PROGRESS
   ============================================ */
@media (max-width: 991px) {
    .scroll-progress {
        display: none !important;
    }
}

/* ============================================
   ANIMATIONS - Disable on Mobile
   ============================================ */
@media (max-width: 991px) {
    [data-anime],
    [data-bottom-top],
    [data-top-bottom] {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ============================================
   FIX HORIZONTAL SCROLL ISSUES
   ============================================ */
@media (max-width: 991px) {
    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .row > * {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    img {
        max-width: 100% !important;
        height: auto !important;
    }
}

/* ============================================
   EXTRA SMALL DEVICES
   ============================================ */
@media (max-width: 480px) {
    body, p, span, a, li {
        font-size: 14px !important;
    }
    
    .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* Reduce all headings further */
    h1, .h1 { font-size: 26px !important; }
    h2, .h2 { font-size: 24px !important; }
    h3, .h3 { font-size: 22px !important; }
    h4, .h4 { font-size: 18px !important; }
    h5, .h5 { font-size: 16px !important; }
    
    /* Buttons */
    .btn {
        padding: 10px 20px !important;
        font-size: 14px !important;
    }
}

/* ============================================
   SERVICE PAGES - COMPREHENSIVE MOBILE FIXES
   ============================================ */

/* Hero Banner - All Service Pages */
@media (max-width: 768px) {
    .hero-banner {
        height: 70vh !important;
        min-height: 450px !important;
    }
    
    .hero-banner h1 {
        font-size: 1.8rem !important;
        line-height: 1.3 !important;
        padding: 0 15px !important;
    }
    
    .hero-banner .lead {
        font-size: 1rem !important;
        padding: 0 15px !important;
    }
    
    .hero-banner p {
        font-size: 0.95rem !important;
        padding: 0 15px !important;
    }
    
    .hero-banner .display-3 {
        font-size: 2rem !important;
    }
}

@media (max-width: 480px) {
    .hero-banner {
        height: 60vh !important;
        min-height: 400px !important;
    }
    
    .hero-banner h1,
    .hero-banner .display-3 {
        font-size: 1.5rem !important;
    }
    
    .hero-banner .lead {
        font-size: 0.9rem !important;
    }
}

/* Section Headings - All Service Pages */
@media (max-width: 768px) {
    div[style*="font-size: 48px"],
    div[style*="font-size: 42px"],
    h2[style*="font-size: 48px"],
    h2[style*="font-size: 42px"] {
        font-size: 28px !important;
    }
    
    div[style*="font-size: 36px"],
    h2[style*="font-size: 36px"],
    h3[style*="font-size: 28px"] {
        font-size: 24px !important;
    }
}

@media (max-width: 480px) {
    div[style*="font-size: 48px"],
    div[style*="font-size: 42px"],
    h2[style*="font-size: 48px"],
    h2[style*="font-size: 42px"] {
        font-size: 24px !important;
    }
    
    div[style*="font-size: 36px"],
    h2[style*="font-size: 36px"],
    h3[style*="font-size: 28px"] {
        font-size: 22px !important;
    }
}

/* Grid Layouts - Force Single Column on Mobile */
@media (max-width: 768px) {
    div[style*="grid-template-columns: repeat(2"],
    div[style*="grid-template-columns: repeat(3"],
    div[style*="grid-template-columns: repeat(4"] {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    /* Flex layouts to column */
    div[style*="display: flex"][style*="gap: 40px"],
    div[style*="display: flex"][style*="gap: 60px"] {
        flex-direction: column !important;
        gap: 25px !important;
    }
}

/* Cards and Boxes - Mobile Padding */
@media (max-width: 768px) {
    div[style*="padding: 40px"],
    div[style*="padding: 45px"],
    div[style*="padding: 50px"] {
        padding: 25px !important;
    }
    
    div[style*="padding: 30px"] {
        padding: 20px !important;
    }
}

/* Timeline and Process Sections */
@media (max-width: 768px) {
    .philosophy-timeline,
    .journey-timeline,
    div[style*="display: flex"][style*="justify-content: space-between"] {
        flex-direction: column !important;
        gap: 25px !important;
    }
    
    /* Hide connecting lines */
    .timeline-line,
    div[style*="position: absolute"][style*="height: 3px"],
    svg.journey-path {
        display: none !important;
    }
}

/* Stats and Numbers */
@media (max-width: 768px) {
    div[style*="font-size: 32px"],
    div[style*="font-size: 28px"] {
        font-size: 24px !important;
    }
    
    .stats-row {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* CTA Sections */
@media (max-width: 768px) {
    section[style*="padding: 60px"],
    section[style*="padding: 80px"],
    section[style*="padding: 90px"] {
        padding: 40px 15px !important;
    }
    
    .cta-section,
    section[style*="background: #fdf5f3"] {
        padding: 40px 15px !important;
    }
    
    .cta-content h2,
    section[style*="background: #fdf5f3"] h2 {
        font-size: 26px !important;
    }
}

/* Footer Spacer */
@media (max-width: 768px) {
    #footer-spacer {
        height: 350px !important;
    }
}

@media (max-width: 480px) {
    #footer-spacer {
        height: 300px !important;
    }
}


/* ============================================
   HAMBURGER MENU FIX - MUST BE AT END TO OVERRIDE ALL
   ============================================ */

/* Hide hamburger on desktop */
.navbar-toggler {
    display: none !important;
}

/* Show hamburger on mobile/tablet */
@media (max-width: 991px) {
    .navbar-toggler {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 99999 !important;
        width: 30px !important;
        height: 24px !important;
        padding: 0 !important;
        margin-right: 10px !important;
        background: transparent !important;
        border: none !important;
    }
    
    .navbar-toggler span {
        display: block !important;
        width: 26px !important;
        height: 2px !important;
        background: #000 !important;
        margin: 5px 0 !important;
        border-radius: 2px !important;
    }
}

/* ============================================
   LOGO VISIBILITY FIX - MOBILE
   Ensures logo is always visible on mobile (no white filter)
   ============================================ */
@media (max-width: 991px) {
    #header .navbar .navbar-brand img,
    #header .navbar .navbar-brand img.default-logo,
    .navbar-brand img {
        filter: none !important;
    }
    
    #header .navbar:not(.scrolled) .navbar-brand img {
        filter: none !important;
    }
    
    /* Ensure hamburger lines are dark on mobile */
    #header .navbar .hamburger-line {
        background: #000 !important;
    }
}


/* ============================================
   MOBILE MENU - FORCE DARK TEXT COLORS
   ============================================ */
@media (max-width: 991px) {
    /* When mobile menu is active, force all nav text to be dark */
    body.mobile-menu-active #header {
        background: #ffffff !important;
    }
    
    body.mobile-menu-active #header .navbar {
        background: #ffffff !important;
    }
    
    body.mobile-menu-active #navbarNav {
        background: #ffffff !important;
    }
    
    body.mobile-menu-active #navbarNav .nav-link,
    body.mobile-menu-active #navbarNav .navbar-nav .nav-link,
    body.mobile-menu-active .navbar .nav-link,
    #navbarNav.show .nav-link,
    #navbarNav.show .navbar-nav .nav-link {
        color: #1a1a1a !important;
        font-size: 20px !important;
        font-weight: 600 !important;
        padding: 12px 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        text-align: left !important;
    }
    
    body.mobile-menu-active #navbarNav .dropdown-toggle,
    body.mobile-menu-active #navbarNav .nav-link i,
    body.mobile-menu-active #navbarNav i.fa-chevron-down,
    #navbarNav.show .dropdown-toggle,
    #navbarNav.show i {
        color: #1a1a1a !important;
        margin-left: auto !important;
    }
    
    /* Dropdown items with arrow */
    body.mobile-menu-active #navbarNav .nav-item.dropdown .nav-link,
    #navbarNav.show .nav-item.dropdown .nav-link {
        display: flex !important;
        justify-content: space-between !important;
        width: 100% !important;
    }
    
    body.mobile-menu-active #navbarNav .dropdown-menu a,
    #navbarNav.show .dropdown-menu a {
        color: #333333 !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        display: block !important;
        padding: 8px 0 !important;
        text-align: left !important;
    }
    
    /* Ensure hamburger lines are dark */
    body.mobile-menu-active .hamburger-line,
    body.mobile-menu-active .navbar-toggler span {
        background: #1a1a1a !important;
    }
    
    /* Make sure navbar-nav is visible and LEFT ALIGNED */
    #navbarNav.show .navbar-nav {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        align-items: flex-start !important;
        text-align: left !important;
    }
    
    #navbarNav.show .nav-item {
        display: block !important;
        margin: 10px 0 !important;
        width: 100% !important;
        text-align: left !important;
    }
}


/* ============================================
   INDEX.PHP - CONSOLIDATED MOBILE STYLES
   Properly ordered: 991px → 768px → 576px → 480px → 430px → 390px
   ============================================ */

/* ============================================
   TABLETS (≤991px)
   ============================================ */
@media (max-width: 991px) {
    html, body, .box-layout {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
    .box-layout, .box-layout > * {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    /* Stats section */
    .stats-header h2 {
        font-size: 36px !important;
    }
    .stats-container {
        gap: 20px !important;
    }
    .stat-card {
        flex: 1 1 200px !important;
        max-width: 240px !important;
    }
    /* Process section */
    .process-step-style-05 .process-content span {
        font-size: 16px !important;
    }
    .process-step-style-05 .process-content p {
        font-size: 14px !important;
    }
}

/* ============================================
   MOBILE & SMALL TABLETS (≤768px)
   ============================================ */
@media (max-width: 768px) {
    html, body, .box-layout {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .box-layout, .box-layout > * {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }
    section {
        padding: 40px 15px !important;
    }
    .container {
        padding: 0 15px !important;
    }
    /* Stats section */
    .stats-section {
        padding: 40px 15px !important;
    }
    .stats-header {
        margin-bottom: 40px !important;
    }
    .stats-header h2 {
        font-size: 28px !important;
    }
    .stats-header p {
        font-size: 15px !important;
    }
    .stats-container {
        flex-direction: column !important;
        align-items: center !important;
        gap: 20px !important;
    }
    .stat-card {
        width: 100% !important;
        max-width: 100% !important;
        min-height: auto !important;
        padding: 25px 20px !important;
    }
    .stat-number {
        font-size: 2rem !important;
    }
    .stat-label {
        font-size: 14px !important;
    }
    /* Process section - hide image */
    .col-lg-7.offset-xxl-1 {
        display: none !important;
    }
    .process-step-style-05 {
        width: 100% !important;
    }
    .process-step-style-05 .process-content span {
        font-size: 15px !important;
        width: 100% !important;
    }
    .process-step-style-05 .process-content p {
        font-size: 13px !important;
        width: 100% !important;
    }
    /* Corporate services */
    .corporate-services-block .row {
        flex-direction: column !important;
        text-align: center !important;
    }
    .corporate-services-block h3 {
        font-size: 24px !important;
    }
    .corporate-services-block p {
        font-size: 14px !important;
    }
}

/* ============================================
   SMALL MOBILE (≤576px)
   ============================================ */
@media (max-width: 576px) {
    section {
        padding: 35px 12px !important;
    }
    .container {
        padding: 0 12px !important;
    }
    .stats-header h2 {
        font-size: 24px !important;
    }
    .stats-header p {
        font-size: 14px !important;
    }
    .stat-card {
        padding: 20px 15px !important;
    }
    .stat-number {
        font-size: 1.8rem !important;
    }
    .stat-label {
        font-size: 13px !important;
    }
    .process-step-style-05 .process-content span {
        font-size: 14px !important;
    }
    .process-step-style-05 .process-content p {
        font-size: 12px !important;
        line-height: 1.5 !important;
    }
}

/* ============================================
   EXTRA SMALL MOBILE (≤480px)
   ============================================ */
@media (max-width: 480px) {
    html, body, .box-layout {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .box-layout {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    section {
        padding: 30px 10px !important;
    }
    .container {
        padding: 0 10px !important;
    }
    .row {
        margin: 0 !important;
    }
    [class*="col-"] {
        padding: 0 8px !important;
    }
    /* Stats */
    .stats-section {
        padding: 30px 10px !important;
    }
    .stats-header {
        margin-bottom: 30px !important;
    }
    .stats-header h2 {
        font-size: 22px !important;
    }
    .stats-header p {
        font-size: 13px !important;
    }
    .stat-card {
        padding: 18px 12px !important;
    }
    .stat-number {
        font-size: 1.6rem !important;
    }
    .stat-label {
        font-size: 12px !important;
    }
    /* Process section */
    .process-step-style-05 .process-step-icon-wrap {
        width: 40px !important;
        flex-shrink: 0 !important;
    }
    .process-step-style-05 .process-content {
        padding-left: 22px !important;
    }
    .process-step-style-05 .process-content span {
        font-size: 14px !important;
        font-weight: 600 !important;
    }
    .process-step-style-05 .process-content p {
        font-size: 12px !important;
        line-height: 1.4 !important;
    }
    /* Corporate services */
    .corporate-services-block h3 {
        font-size: 20px !important;
    }
    .corporate-services-block p {
        font-size: 13px !important;
    }
}

/* ============================================
   iPhone 14 Pro Max (≤430px)
   ============================================ */
@media (max-width: 430px) {
    * {
        box-sizing: border-box !important;
    }
    html, body {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
    }
    .box-layout {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        margin: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 !important;
        background: #fff !important;
    }
    .box-layout > * {
        width: 100% !important;
        max-width: 100vw !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    /* Header - FIXED LAYOUT: Logo LEFT, Menu RIGHT */
    #header {
        width: 100% !important;
    }
    #header .navbar {
        width: 100% !important;
        padding: 12px 15px !important;
        min-height: 55px !important;
    }
    #header .navbar .container-fluid,
    #header .navbar .contain-fluid {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0 !important;
        width: 100% !important;
    }
    /* Logo column - force to LEFT */
    #header .navbar .col-auto.col-xl-2,
    #header .navbar .col-auto.col-lg-2 {
        flex: 0 0 auto !important;
        width: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        margin-right: auto !important;
    }
    /* Menu column - force to RIGHT */
    #header .navbar .col-auto.col-lg-10 {
        flex: 0 0 auto !important;
        width: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        margin-left: auto !important;
    }
    #header .navbar-brand {
        margin: 0 !important;
        padding: 0 !important;
    }
    #header .navbar-brand img {
        height: 28px !important;
    }
    /* Sections - reduced padding */
    section {
        width: 100% !important;
        max-width: 100vw !important;
        margin: 0 !important;
        padding: 15px 3px !important;
        overflow-x: hidden !important;
    }
    .container, .container-fluid {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 3px !important;
        margin: 0 !important;
    }
    .row {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    [class*="col-"] {
        padding: 0 3px !important;
        width: 100% !important;
    }
    /* Typography - INCREASED font sizes */
    h1, .h1 { font-size: 26px !important; line-height: 1.2 !important; }
    h2, .h2 { font-size: 24px !important; line-height: 1.25 !important; }
    h3, .h3 { font-size: 22px !important; line-height: 1.3 !important; }
    h4, .h4 { font-size: 20px !important; }
    h5, .h5 { font-size: 18px !important; }
    p, span, li, a { font-size: 15px !important; line-height: 1.5 !important; }
    
    /* Stats section - IMPROVED */
    .stats-section {
        padding: 15px 3px !important;
    }
    .stats-header {
        margin-bottom: 15px !important;
        padding: 0 5px !important;
    }
    .stats-header .badge {
        font-size: 11px !important;
        padding: 6px 12px !important;
    }
    .stats-header h2 {
        font-size: 24px !important;
        margin-bottom: 8px !important;
        font-weight: 700 !important;
    }
    .stats-header p {
        font-size: 14px !important;
    }
    .stats-container {
        gap: 10px !important;
        padding: 0 3px !important;
    }
    .stat-card {
        padding: 15px 12px !important;
        min-height: auto !important;
        width: 100% !important;
    }
    .stat-number {
        font-size: 1.8rem !important;
        font-weight: 700 !important;
        display: block !important;
    }
    .stat-label {
        font-size: 14px !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: #333 !important;
    }
    .stat-icon {
        display: block !important;
    }
    .stat-icon i {
        font-size: 24px !important;
        display: block !important;
    }
    
    /* Process section - Way to Process Excellence - IMPROVED */
    .process-step-style-05 {
        width: 100% !important;
        padding: 0 3px !important;
    }
    .process-step-style-05 .process-step-item {
        width: 100% !important;
        margin-bottom: 15px !important;
    }
    .process-step-style-05 .process-step-icon-wrap {
        width: 40px !important;
        height: 45px !important;
        flex-shrink: 0 !important;
    }
    .process-step-style-05 .process-content {
        width: calc(100% - 50px) !important;
        padding-left: 10px !important;
    }
    .process-step-style-05 .process-content span,
    .process-step-style-05 .process-content span.d-block {
        font-size: 17px !important;
        font-weight: 600 !important;
        width: 100% !important;
        display: block !important;
        color: #1a1a1a !important;
    }
    .process-step-style-05 .process-content p {
        font-size: 14px !important;
        line-height: 1.5 !important;
        width: 100% !important;
        margin: 5px 0 0 0 !important;
        color: #555 !important;
    }
    /* Hide image column */
    .col-lg-7.offset-xxl-1 {
        display: none !important;
    }
    
    /* Service slides */
    .service-slide-custom {
        min-width: 280px !important;
        flex: 0 0 280px !important;
    }
    .service-slide-custom h4 {
        font-size: 18px !important;
    }
    .service-slide-custom p {
        font-size: 14px !important;
    }
    .slider-wrapper-custom {
        padding: 0 3px !important;
    }
    
    /* Corporate services - IMPROVED */
    .corporate-services-block {
        padding: 0 3px !important;
    }
    .corporate-services-block h3 {
        font-size: 22px !important;
        line-height: 1.3 !important;
        font-weight: 700 !important;
    }
    .corporate-services-block p {
        font-size: 15px !important;
        line-height: 1.5 !important;
    }
    .corporate-services-block .nav-btn-slider {
        width: 38px !important;
        height: 38px !important;
        font-size: 14px !important;
    }
    
    /* About section - 12+ Technologies */
    .absolute-middle-center .fs-160 {
        font-size: 70px !important;
    }
    .absolute-middle-center sub {
        font-size: 40px !important;
    }
    .absolute-middle-center .fs-20 {
        font-size: 15px !important;
    }
    
    /* Blog section */
    .bg-gradient-quartz-white h3 {
        font-size: 22px !important;
    }
    .card-title {
        font-size: 17px !important;
    }
    .card-body p {
        font-size: 14px !important;
    }
    
    /* Testimonials */
    .testimonial-section h3 {
        font-size: 22px !important;
    }
    .swiper-slide .fs-18 {
        font-size: 15px !important;
    }
    
    /* Buttons */
    .btn, .btn-large {
        padding: 12px 25px !important;
        font-size: 15px !important;
    }
}

/* ============================================
   Very Small Mobile (≤400px) - WIDTH FIX FOR ALL SECTIONS
   ============================================ */
@media (max-width: 400px) {
    /* GLOBAL WIDTH FIX */
    *, *::before, *::after {
        box-sizing: border-box !important;
    }
    html {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    body {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .box-layout {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
        margin: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 !important;
    }
    .box-layout > * {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* ALL SECTIONS WIDTH FIX */
    section,
    .section,
    div[class*="section"],
    .stats-section,
    .testimonial-section,
    .bg-gradient-quartz-white,
    .overflow-hidden,
    .position-relative {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
        overflow-x: hidden !important;
    }
    
    /* CONTAINER WIDTH FIX */
    .container,
    .container-fluid,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
        margin: 0 auto !important;
    }
    
    /* ROW WIDTH FIX */
    .row {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 !important;
    }
    
    /* COLUMN WIDTH FIX */
    [class*="col-"],
    .col,
    .col-auto {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
        flex: 0 0 100% !important;
    }
    
    /* HEADER WIDTH FIX */
    #header,
    #header .navbar,
    #header .navbar .container-fluid,
    header,
    nav {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
    
    /* HERO/SLIDER WIDTH FIX */
    .fullscreen-container,
    .fullscreen-container > * {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    
    /* STATS SECTION WIDTH FIX */
    .stats-section,
    .stats-header,
    .stats-container,
    .stat-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* PROCESS SECTION WIDTH FIX */
    .process-step-style-05,
    .process-step-style-05 > *,
    .process-step-item,
    .process-content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    
    /* SERVICES SLIDER WIDTH FIX */
    .slider-wrapper-custom,
    .slider-track-custom {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* TESTIMONIALS WIDTH FIX */
    .swiper,
    .swiper-wrapper,
    .swiper-slide {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    
    /* BLOG SECTION WIDTH FIX */
    .blog-grid,
    .grid-item,
    .card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    
    /* CORPORATE SERVICES WIDTH FIX */
    .corporate-services-block,
    .corporate-services-block > * {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    
    /* IMAGES WIDTH FIX */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* INLINE STYLE OVERRIDES */
    [style*="width: 1200px"],
    [style*="width: 1100px"],
    [style*="width: 1000px"],
    [style*="max-width: 1200px"],
    [style*="max-width: 1100px"],
    [style*="max-width: 1000px"],
    [style*="min-width"] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    
    /* Typography */
    h1, .h1 { font-size: 24px !important; }
    h2, .h2 { font-size: 22px !important; }
    h3, .h3 { font-size: 20px !important; }
    p, span, li, a { font-size: 14px !important; }
    
    /* Stats */
    .stats-header h2 {
        font-size: 22px !important;
    }
    .stats-header p {
        font-size: 13px !important;
    }
    .stat-card {
        padding: 12px 10px !important;
    }
    .stat-number {
        font-size: 1.6rem !important;
        display: block !important;
    }
    .stat-label {
        font-size: 13px !important;
        display: block !important;
    }
    /* Process */
    .process-step-style-05 .process-content span {
        font-size: 16px !important;
    }
    .process-step-style-05 .process-content p {
        font-size: 13px !important;
    }
    /* Corporate services */
    .corporate-services-block h3 {
        font-size: 20px !important;
    }
    .corporate-services-block p {
        font-size: 14px !important;
    }
    /* Service slides */
    .service-slide-custom {
        min-width: 260px !important;
        flex: 0 0 260px !important;
    }
}


/* ============================================
   iPhone SE (375px) - FIX CONTENT CUTTING OFF
   ============================================ */
@media (max-width: 375px) {
    /* Prevent horizontal overflow */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
    }
    
    /* Container fixes */
    .container,
    .container-fluid,
    .contain-fluid {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        margin: 0 auto !important;
        overflow-x: hidden !important;
    }
    
    /* Row fixes */
    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }
    
    .row > * {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    /* Hero section */
    .fullscreen-container,
    .hero-section,
    section:first-of-type {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
    
    /* Hero content */
    .hero-content,
    .fullscreen-container > div {
        padding: 0 10px !important;
        max-width: 100% !important;
    }
    
    /* Badge/pill */
    .badge-pill,
    div[style*="border-radius: 50px"],
    div[style*="AWS PARTNER"] {
        font-size: 11px !important;
        padding: 8px 15px !important;
        max-width: 95% !important;
    }
    
    /* Hero title */
    .hero-title,
    .fullscreen-container h1,
    h1 {
        font-size: 22px !important;
        line-height: 1.3 !important;
        padding: 0 5px !important;
    }
    
    /* Hero description */
    .hero-description,
    .fullscreen-container p {
        font-size: 13px !important;
        line-height: 1.5 !important;
        padding: 0 5px !important;
    }
    
    /* Stats section */
    .stats-section {
        padding: 30px 10px !important;
        width: 100% !important;
        max-width: 100vw !important;
    }
    
    .stats-container {
        width: 100% !important;
        padding: 0 !important;
    }
    
    .stat-card {
        width: 100% !important;
        max-width: 100% !important;
        padding: 15px 10px !important;
    }
    
    /* All sections */
    section {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    /* Images */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Fix any absolute positioned elements */
    .position-absolute {
        max-width: 100% !important;
    }
    
    /* Service cards */
    .service-slide-custom {
        min-width: 240px !important;
        flex: 0 0 240px !important;
    }
    
    /* Typography */
    h1 { font-size: 22px !important; }
    h2 { font-size: 20px !important; }
    h3 { font-size: 18px !important; }
    h4 { font-size: 16px !important; }
    h5 { font-size: 14px !important; }
    p, span, li { font-size: 13px !important; }
    
    /* Buttons */
    .btn, button {
        padding: 10px 18px !important;
        font-size: 13px !important;
    }
    
    /* Cards */
    .card,
    div[style*="border-radius"][style*="padding"] {
        padding: 15px !important;
        margin: 0 5px !important;
    }
}


/* ============================================
   HERO BUTTONS FIX - Below 390px
   ============================================ */
@media (max-width: 390px) {
    /* Hero CTA buttons container */
    .hero-cta-group {
        flex-direction: column !important;
        width: 100% !important;
        gap: 12px !important;
        padding: 0 10px !important;
    }
    
    /* Hero buttons */
    .hero-btn,
    .hero-btn-primary,
    .hero-btn-secondary {
        width: 100% !important;
        max-width: 100% !important;
        padding: 12px 18px !important;
        font-size: 13px !important;
        justify-content: center !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }
    
    .hero-btn i {
        font-size: 12px !important;
    }
}

@media (max-width: 375px) {
    /* Hero CTA buttons - even smaller */
    .hero-cta-group {
        padding: 0 8px !important;
        gap: 10px !important;
    }
    
    .hero-btn,
    .hero-btn-primary,
    .hero-btn-secondary {
        padding: 11px 15px !important;
        font-size: 12px !important;
    }
    
    .hero-btn i {
        font-size: 11px !important;
        margin-left: 6px !important;
    }
}


/* ============================================
   FIX: Hero buttons visibility and spacing
   ============================================ */
@media (max-width: 390px) {
    /* Ensure buttons are visible */
    .hero-cta-group {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 12px !important;
        padding: 0 15px !important;
        margin-bottom: 40px !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .hero-btn,
    .hero-btn-primary,
    .hero-btn-secondary {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        padding: 14px 20px !important;
        font-size: 14px !important;
    }
    
    /* Add gap between hero section and stats */
    .hero-section,
    .hero-content-wrapper,
    .hero-text-content {
        padding-bottom: 30px !important;
    }
    
    /* Stats section spacing */
    .stats-section,
    .hero-stats-bar {
        margin-top: 30px !important;
    }
}

@media (max-width: 375px) {
    /* Force buttons to be visible on 375px */
    .hero-cta-group {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 10px !important;
        padding: 0 12px !important;
        margin-bottom: 35px !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 10 !important;
    }
    
    .hero-btn,
    .hero-btn-primary,
    .hero-btn-secondary,
    a.hero-btn,
    a.hero-btn-primary,
    a.hero-btn-secondary {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 12px 16px !important;
        font-size: 13px !important;
        justify-content: center !important;
        align-items: center !important;
        box-sizing: border-box !important;
        position: relative !important;
        z-index: 10 !important;
    }
    
    /* Ensure hero content doesn't hide buttons */
    .hero-text-content {
        overflow: visible !important;
        padding-bottom: 25px !important;
    }
    
    /* Stats section spacing from buttons */
    .stats-section,
    .hero-stats-bar {
        margin-top: 25px !important;
    }
}