/* Mobile-Only Overrides for EMS Nigeria
 * Do NOT affect desktop/tablet (≥1024px) layouts
 * All styles are scoped to mobile breakpoints only.
 */

@media (max-width: 768px) {
    /* Certifications Title Override - Mobile only */
    .certifications-text h2 {
        font-size: 0.9rem !important;
        font-weight: 700 !important;
        color: white !important;
        font-style: normal !important;
        margin: 0 !important;
        padding-top: 0.5rem !important;
        padding-bottom: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) !important;
        line-height: 1.2 !important;
        background: none !important;
        border-radius: 0 !important;
        display: block !important;
        width: auto !important;
        max-width: none !important;
    }

    /* Align carousel to top of container */
    .certifications-content {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    .certification-carousel {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    .certifications-text h2 {
        font-size: 1rem !important;
    }
}

/* Portrait-only: ensure the span wrapper creates a taller rectangle behind wrapped lines */
@media (max-width: 768px) and (orientation: portrait) {
    .hero-title .hero-title-bg {
        display: inline-block; /* allow padding and background to wrap correctly */
        width: auto !important;
        max-width: calc(100% - 28px) !important;
    /* reduce bottom padding so there's less space under the text */
    padding: 0.45rem 1.0rem 0.3rem !important; /* top, sides, bottom */
        background: rgba(10,75,120,0.82) !important;
        color: #fff !important;
        border-radius: 12px !important;
        box-sizing: border-box !important;
        line-height: 1.36 !important;
        position: relative !important;
        z-index: 100000 !important;
    /* pull the H1 further upward so it clears the video in mobile portrait */
    transform: translateY(-30px) !important;
        will-change: transform;
        box-shadow: 0 8px 20px rgba(0,0,0,0.28) !important;
    }

    /* ensure no ancestor clipping and keep title above background layers */
    .hero, .hero-slider-container, .hero-slider, .hero-center-wrapper, .hero-center-wrapper.flow-on-mobile {
        overflow: visible !important;
        z-index: 2 !important;
    }

    /* Push the hero's subsequent content (videos/start) slightly downward so H1 sits higher */
    .hero-center-wrapper .free-cards,
    .hero .free-cards,
    .free-cards.desktop-portrait-videos {
        margin-top: 2rem !important; /* modest spacing so videos sit slightly lower */
    }

    /* Move the floating Explore button further down on small portrait devices */
    .floating-explore-button {
        top: 95vh !important;
        transform: translateX(-50%) !important;
    }
\n\n    /* Push stats section slightly further down to clear H1/video */\n    .statistics, .statistics-container {\n        margin-top: 1.6rem !important;\n        padding-top: 0.25rem !important;\n    }\n}\n\n/* Mobile-only overrides - desktop layouts should not be affected */

/* URGENT FIX: Force mobile landscape videos to display in 3 columns */
@media screen and (orientation: landscape) and (min-width: 375px) and (max-width: 1279px) {
    /* Force landscape container to show */
    .hero-landscape-container {
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 9999 !important;
    }
    
    /* Force video container to show on right side */
    .hero-landscape-container .hero-videos-container {
        display: flex !important;
        width: 65% !important;
        flex-direction: column !important;
    }
    
    /* Force 3-column video layout */
    .hero-landscape-container .hero-videos-container .free-cards {
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        gap: 0.5rem !important;
    }
    
    /* Force each video card to display */
    .hero-landscape-container .free-card {
        display: flex !important;
        flex: 1 !important;
        width: 33.333% !important;
        flex-direction: column !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Force video elements to show */
    .hero-landscape-container .free-card-video-container,
    .hero-landscape-container .free-card-video,
    .hero-landscape-container .video-stats {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Force stats to show below videos */
    .hero-landscape-container .video-stats {
        display: flex !important;
        flex-direction: column !important;
        text-align: center !important;
        margin-top: 0.5rem !important;
    }
}

/* Hide landscape container by default - only show in mobile landscape */
.hero-landscape-container {
    display: none;
}

/* Force show landscape container in mobile landscape mode */
@media screen and (orientation: landscape) and (min-width: 375px) and (max-width: 1279px) {
    /* CRITICAL: Force landscape container to show with maximum specificity */
    html body .hero .hero-landscape-container,
    html body .hero-landscape-container,
    .hero .hero-landscape-container,
    .hero-landscape-container {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 1000 !important;
    }
    
    /* Also ensure portrait elements are hidden in landscape */
    .desktop-portrait-title,
    .desktop-portrait-videos {
        display: none !important;
    }
}

/* Mobile Portrait Styles (≤768px) - Portrait orientation only */
@media (max-width: 768px) and (orientation: portrait) {
    
    /* CRITICAL: Hide the desktop contact container on mobile */
    .hero-left-content {
        display: none !important;
    }

    /* Hide the colored title on mobile portrait */
    .hero-colored-title {
        display: none !important;
    }
    
    /* Hide landscape-specific containers on mobile portrait only */
    .hero-landscape-container {
        display: none !important;
    }
    
    /* Show the original layout for portrait */
    .desktop-portrait-title,
    .desktop-portrait-videos {
        display: block !important;
    }
    
    /* Mobile Navigation */
    .navbar-container {
        padding: 1rem;
    }
    
    .navbar-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
    }
    
    .navbar-logo {
        flex-shrink: 0;
    }
    
    .navbar-logo img {
        height: 32px;
        width: auto;
    }
    
    .global-operations {
        font-size: 0.875rem;
        margin-top: 0.25rem;
    }
    
    /* Hide desktop navigation, show hamburger */
    .navbar-links {
        display: none;
    }
    
    /* Mobile hamburger menu */
    nav .mobile-nav-toggle {
        display: block !important;
        background: transparent !important;
        border: none !important;
        color: #fff !important;
        font-size: 1.2rem !important;
        font-weight: 300 !important;
        font-family: Arial, sans-serif !important;
        cursor: pointer !important;
        padding: 0.3rem !important;
        z-index: 1000 !important;
        position: absolute !important;
        top: 50% !important;
        right: 1rem !important;
        transform: translateY(-50%) !important;
        visibility: visible !important;
        opacity: 1 !important;
        line-height: 1 !important;
        letter-spacing: -0.5px !important;
    }
    
    .mobile-nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        height: 100vh;
        background: rgba(10, 75, 120, 0.95);
        backdrop-filter: blur(10px);
        padding: 5rem 2rem 2rem;
        transition: right 0.3s ease;
        z-index: 999;
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }
    
    .mobile-nav-menu.active {
        right: 0;
    }
    
    .mobile-nav-close {
        position: absolute;
        top: 1rem;
        right: 1rem;
        background: none;
        border: none;
        color: white;
        font-size: 1.5rem;
        cursor: pointer;
        padding: 0.5rem;
    }
    
    .mobile-nav-link {
        color: white;
        text-decoration: none;
        padding: 1rem 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        display: flex;
        align-items: center;
        gap: 0.75rem;
        font-size: 1.125rem;
    }
    
    .mobile-nav-link:last-child {
        border-bottom: none;
    }
    
    /* Mobile Hero Section */
    .hero {
        /* increase top spacing so nav doesn't cover H1 */
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        padding-top: 5rem; /* Reduced padding */
        background: url('assets/images/mobile/mobilePortraitBackground1.jpg');
        background-size: cover;
        background-position: center;
        background-attachment: scroll;
    }
    
    .hero-center-wrapper {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: center !important;
        z-index: 2 !important;
        padding: 1.5rem 1rem;
        padding-top: 0; /* Removed top padding */
        text-align: center;
    }
    
    .hero-title {
        margin-top: 0 !important; /* Removed top margin */
        margin-bottom: 0.5rem !important;
        font-size: 1.8rem !important; /* Reduced font size */
        line-height: 1.2 !important;
        text-shadow: 0 2px 12px rgba(0,0,0,0.8), 0 1px 0 #000 !important;
        background: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
        padding: 0.5rem 1rem; /* Added padding */
        border-radius: 10px; /* Rounded corners */
        display: block !important; /* Ensure block so background covers wrapped lines */
        width: fit-content !important; /* Shrink to content width */
        margin-left: auto !important; /* Center horizontally */
        margin-right: auto !important; /* Center horizontally */
    }
    
    /* Adjust hero title for very small screens to accommodate "- NIGERIA" */
    @media (max-width: 360px) and (orientation: portrait) {
        .hero-title {
            font-size: 1.75rem !important;
            line-height: 1.15 !important;
        }
    }
    
    /* Mobile Video Carousel tweaks */
    .free-cards {
        display: block !important;
        width: 100%;
        max-width: 350px;
        margin: 0 auto 2rem;
        gap: 0 !important;
        flex-wrap: nowrap !important;
    }
    
    .mobile-carousel-container {
        position: relative;
        width: 300px; /* Slightly smaller to ensure videos fit better */
        height: auto; /* let inner video container control height */
        overflow: hidden; /* Hide adjacent videos completely */
        border-radius: 12px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
        margin: 1.25rem auto; /* Center horizontally and tighten vertical spacing */
    }
    
    .mobile-carousel-track {
        display: flex;
        width: 300%; /* 3 videos at 100% container width each */
        height: 100%;
        transition: transform 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
        transform: translateX(0%); /* Start with first video visible */
        will-change: transform; /* Optimize for transforms */
    }
    
    /* Each video card should take exactly 1/3 of track width (= 100% of container width) */
    .mobile-carousel-track .free-card {
        flex: 0 0 33.333333%; /* Exactly 1/3 of track width */
        width: 33.333333%; /* Exactly 1/3 of track width */
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        visibility: visible !important;
        opacity: 1 !important;
        box-sizing: border-box !important;
    }
    
    .mobile-carousel-track .free-card-video-container {
        width: 100% !important; /* Use full width of the card */
        height: 220px !important; /* reduced height for mobile portrait */
        border-radius: 12px;
        overflow: hidden;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .free-card-video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    
    /* Use the new mobile portrait background image as video poster */
    .free-card-video {
        background-image: url('assets/images/mobile/mobilePortraitBackground1.jpg');
        background-size: cover;
        background-position: center;
    }
    
    .free-card-title-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
        color: white;
        padding: 1rem;
        font-weight: 600;
        font-size: 1.125rem;
    }
    
    /* Carousel navigation dots */
    .mobile-carousel-dots {
        display: flex;
        justify-content: center;
        gap: 0.5rem;
        margin-top: 1rem;
    }
    
    .mobile-carousel-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.5);
        border: none;
        cursor: pointer;
        transition: background 0.3s ease;
    }
    
    .mobile-carousel-dot.active {
        background: white;
    }
    
    /* Primary CTA button - Match landscape style */
    .primary-button {
        max-width: 280px !important;
        width: auto !important;
        padding: 1rem 1.5rem !important;
        font-size: 1rem !important;
        margin-top: 2rem !important;
        background: linear-gradient(135deg, #00bcd4, #0097a7) !important;
        color: white !important;
        border: none !important;
        border-radius: 25px !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        text-decoration: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        position: relative !important;
        z-index: 1100 !important; /* Much higher than seabed tile */
    }
    
    .primary-button:hover {
        background: linear-gradient(135deg, #0097a7, #00838f) !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 4px 12px rgba(0, 188, 212, 0.3) !important;
    }
    
    /* Cross Ports Experience section header - move closer to top */
    .statistics-header {
        margin-top: 0 !important;
        padding-top: 0.5rem !important;
        margin-bottom: 1rem !important;
    }
    
    .statistics-header h2 {
        margin-top: 0 !important;
        padding-top: 0 !important;
        margin-bottom: 0.5rem !important;
    }
    
    .statistics-container {
        padding-top: 0.5rem !important;
    }
}

/* Full-width statistics section with marine background pattern */
    .statistics {
        width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        position: relative !important;
    }
    
    .statistics-container {
        max-width: 100% !important;
        padding: 2rem 1rem !important;
        margin: 0 auto !important;
        position: relative !important;
        z-index: 2 !important;
    }
    
    .statistics-overlay {
        position: absolute !important;
        inset: 0 !important;
        background: rgba(10, 75, 120, 0.425) !important; /* Marine blue overlay */
        z-index: 1 !important;
    }
    
    /* Local Maritime Partner section - Electric blue icons and headers */
    .heading-icon {
        color: #00bcd4 !important; /* Electric blue for main heading icon */
    }
    
    .local-presence-text h2 {
        color: #00bcd4 !important; /* Electric blue for main heading text */
    }
    
    .highlight-icon {
        background: #00bcd4 !important; /* Electric blue background for highlight icons */
        color: white !important;
    }
    
    .highlight-content h3 {
        color: #00bcd4 !important; /* Electric blue for highlight headers */
    }
    
    /* Mobile Certifications - Horizontal Scroll */
    .certifications-logos {
        display: flex !important;
        gap: 1rem !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        padding: 1rem 0 !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
    
    .certifications-logos::-webkit-scrollbar {
        display: none !important;
    }
    
    .certification-item {
        flex: 0 0 120px !important;
        scroll-snap-align: center !important;
    }
    
    .certification-logo {
        width: 120px !important;
        height: 80px !important;
        background: white !important;
        border-radius: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
        font-size: 0.875rem !important;
        font-weight: 600 !important;
        color: #0a4b78 !important;
    }
    
    .certification-logo img {
        max-width: 90% !important;
        max-height: 90% !important;
        object-fit: contain !important;
        filter: none !important; /* No filter for mobile since background is white */
    }
    
    /* Mobile Cross-Ports Experience - Vertical Stack */
    .statistics-content {
        display: flex !important;
        flex-direction: column !important;
        gap: 2rem !important;
        align-items: center !important;
    }
    
    .stat-item {
        text-align: center !important;
        max-width: 300px !important;
    }
    
    .stat-number {
        font-size: 2.5rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .stat-label {
        font-size: 1.125rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .stat-description {
        font-size: 0.875rem !important;
        opacity: 0.8 !important;
    }
    
    /* Mobile Local Presence - Vertical List */
    .local-presence-content {
        display: flex !important;
        flex-direction: column !important;
        gap: 2rem !important;
    }
    
    .local-presence-text {
        width: 100% !important;
    }
    
    .presence-highlights {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.5rem !important;
    }
    
    .highlight-item {
        display: flex !important;
        gap: 1rem !important;
        align-items: flex-start !important;
    }
    
    .highlight-icon {
        flex-shrink: 0 !important;
        width: 44px !important;
        height: 44px !important;
        background: #00bcd4 !important; /* Electric blue background */
        border-radius: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: white !important;
    }
    
    .highlight-content h3 {
        font-size: 1.125rem !important;
        margin-bottom: 0.5rem !important;
        color: #00bcd4 !important; /* Electric blue text */
    }
    
    .highlight-content p {
        font-size: 0.875rem !important;
        line-height: 1.5 !important;
        margin: 0 !important;
    }
    
    .local-presence-map {
        width: 100% !important;
        height: 300px !important;
        margin-top: 1rem !important;
    }
    
    .map-container {
        width: 100% !important;
        height: 100% !important;
        border-radius: 12px !important;
        overflow: hidden !important;
    }
    
    /* Mobile Specialized Services - Single Column with Background Images */
    .services-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
    }

    .service-card {
        position: relative !important;
        width: 100% !important;
        padding: 1.5rem !important;
        border-radius: 12px !important;
        background: white !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
        background-size: cover !important;
        background-position: center !important;
        overflow: hidden !important;
        color: white !important;
    }

    /* Semi-transparent overlay for better text readability */
    .service-card::before {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        background: rgba(19, 45, 78, 0.4) !important; /* Lighter: reduced from 0.7 to 0.4 */
        z-index: 1 !important;
        pointer-events: none !important;
    }

    .service-card-content {
        position: relative !important;
        z-index: 2 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
        align-items: center !important;
        text-align: center !important;
    }

    .service-icon-container {
        width: 60px !important;
        height: 60px !important;
        border-radius: 12px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        background: #00bcd4 !important; /* Electric blue background for icons */
        color: white !important;
    }

    .service-card h3 {
        font-size: 1.25rem !important;
        margin: 0 !important;
        color: white !important; /* White heading font */
        font-weight: 600 !important;
        text-align: center !important;
    }

    .service-card p {
        font-size: 0.875rem !important;
        line-height: 1.5 !important;
        margin: 0 !important;
        color: white !important;
        text-align: center !important;
    }

    /* Background images for each service card */
    .service-card--hull {
        background-image: url('assets/images/service-cards/cartwork.JPG') !important;
    }
    .service-card--propeller {
        background-image: url('assets/images/service-cards/Propeller\ Polish.png') !important;
    }
    .service-card--survey {
        background-image: url('assets/images/service-cards/inspection.jpg') !important;
    }
    .service-card--eco {
        background-image: url('assets/images/service-cards/Cart\ June\ 2023\ Estate\ Blue.png') !important;
    }
    .service-card--repairs {
        background-image: url('assets/images/service-cards/plugging.jpeg') !important;
    }
    .service-card--technicalexpertise {
        background-image: url('assets/images/service-cards/services.jpg') !important;
    }

    .service-link {
        position: relative !important;
        z-index: 2 !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
        color: white !important;
        text-decoration: none !important;
        font-weight: 600 !important;
        font-size: 0.875rem !important;
        margin-top: auto !important;
    }    /* Mobile CTA - Stacked */
    .cta-container {
        text-align: center !important;
        padding: 3rem 1rem !important;
    }
    
    .cta-container h2 {
        font-size: 1.75rem !important;
        line-height: 1.3 !important;
        margin-bottom: 1rem !important;
    }
    
    .cta-container p {
        font-size: 1rem !important;
        margin-bottom: 2rem !important;
        opacity: 0.9 !important;
    }
    
    .cta-buttons {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
        align-items: center !important;
    }
    
    .cta-buttons .primary-button,
    .cta-buttons .secondary-button {
        width: 100% !important;
        max-width: 280px !important;
        padding: 1rem 2rem !important;
        font-size: 1.125rem !important;
        min-height: 48px !important;
    }
    
    /* Mobile Footer - Accordion */
    .footer-grid {
        display: none !important;
    }
    
    .mobile-footer-accordion {
        display: block !important;
    }
    
    .footer-accordion-item {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    
    .footer-accordion-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 1rem 0 !important;
        background: none !important;
        border: none !important;
        color: white !important;
        font-size: 1.125rem !important;
        font-weight: 600 !important;
        width: 100% !important;
        text-align: left !important;
        cursor: pointer !important;
    }
    
    .footer-accordion-content {
        max-height: 0 !important;
        overflow: hidden !important;
        transition: max-height 0.3s ease !important;
        padding: 0 !important;
    }
    
    .footer-accordion-content.active {
        max-height: 500px !important;
        padding-bottom: 1rem !important;
    }
    
    .footer-accordion-content ul {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .footer-accordion-content li {
        margin-bottom: 0.75rem !important;
    }
    
    .footer-accordion-content a {
        color: rgba(255, 255, 255, 0.8) !important;
        text-decoration: none !important;
        font-size: 0.875rem !important;
    }
    
    .footer-bottom {
        margin-top: 2rem !important;
        padding-top: 2rem !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
        text-align: center !important;
    }
    
    .footer-legal {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.5rem !important;
        margin-top: 1rem !important;
    }
    
    .social-links {
        justify-content: center !important;
        margin-top: 1rem !important;
    }
    
    /* Services section background for mobile portrait */
    .services {
        background: url('assets/images/marinebackground.png') center center repeat !important;
        background-size: 280px 280px !important; /* Standardized to match credentials section */
    }
    
    /* Services header font color white for mobile portrait */
    .services-content h2 {
        color: white !important;
        text-align: left !important;
        justify-content: flex-start !important;
        padding-left: 0 !important; /* Remove padding since no icon */
    }
    
    /* Hide the heading icon completely */
    .services-content h2 .heading-icon {
        display: none !important;
    }
    
    /* Video stats styling for mobile portrait */
    .video-stats {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        text-align: center !important;
        margin-top: 0.5rem !important;
        background: rgba(0, 0, 0, 0.6) !important; /* Semitransparent black background */
        border-radius: 8px !important;
        padding: 0.75rem 0.5rem !important; /* Adequate padding for mobile */
        backdrop-filter: blur(5px) !important; /* Blur effect */
    }
    
    .video-stat-number {
        color: #ffff00 !important; /* Yellow for visibility */
        font-size: 1.4rem !important; /* Larger for mobile readability */
        font-weight: 700 !important;
        font-family: 'Josefin Sans', 'Inter', Arial, sans-serif !important;
        text-shadow: 0 2px 4px rgba(0,0,0,0.8) !important;
        line-height: 1 !important;
        margin-bottom: 0.25rem !important;
    }

    .video-stat-label {
        color: #00bcd4 !important; /* Electric blue */
        font-size: 0.9rem !important; /* Good size for mobile reading */
        font-weight: 600 !important;
        font-family: 'Josefin Sans', 'Inter', Arial, sans-serif !important;
        text-shadow: 0 2px 4px rgba(0,0,0,0.8) !important;
        line-height: 1.1 !important;
    }


/* Mobile landscape fixes: ensure proper layout and spacing in landscape mode
   Scoped to 375px ≤ width ≤ 1280px, orientation:landscape to include all mobile devices */
@media screen and (orientation: landscape) and (min-width: 375px) and (max-width: 1279px) {
    
    /* Hide desktop/portrait layout elements AND regular hero title */
    .desktop-portrait-title,
    .desktop-portrait-videos,
    .hero-center-wrapper > .hero-title,
    .hero-center-wrapper > h1 {
        display: none !important;
    }
    
    /* CRITICAL: Hide the regular desktop video layout and title in mobile landscape */
    .hero-center-wrapper .free-cards:not(.hero-landscape-container .free-cards),
    .hero .free-cards:not(.hero-landscape-container .free-cards),
    section .free-cards:not(.hero-landscape-container .free-cards) {
        display: none !important;
    }
    
    /* Hide the regular hero-center-wrapper entirely */
    .hero-center-wrapper {
        display: none !important;
    }
    
    /* Adjust hero section for mobile landscape to reduce top spacing */
    .hero {
        padding-top: 0 !important;
        margin-top: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: center !important;
    }
    
    /* Remove any background overlays on hero section */
    .hero::before,
    .hero::after,
    .hero-slider::before,
    .hero-slider::after,
    .hero-slide::before,
    .hero-slide::after {
        display: none !important;
        content: none !important;
        background: none !important;
        opacity: 0 !important;
    }
    
    /* Ensure clean background without overlays */
    .hero,
    .hero-slider,
    .hero-slide,
    .hero-center-wrapper {
        background-color: transparent !important;
        box-shadow: none !important;
    }
    
    /* Remove any dark overlays or gradients */
    .hero .overlay,
    .hero-overlay,
    .hero-background-overlay,
    .statistics-overlay,
    .overlay,
    [class*="overlay"] {
        display: none !important;
        opacity: 0 !important;
        background: none !important;
        background-color: transparent !important;
        background-image: none !important;
    }
    
    /* Force remove any background gradients or filters */
    .hero,
    .hero *,
    .hero-landscape-container,
    .hero-landscape-container * {
        backdrop-filter: none !important;
        filter: none !important;
        background-blend-mode: normal !important;
    }
    
    /* Remove any overlay on the background image itself */
    .hero {
        background-color: transparent !important;
        background-image: none !important; /* Force no overlay background */
    }
    
    /* Remove overlay from any child elements that might have it */
    .hero *::before,
    .hero *::after {
        background: none !important;
        background-color: transparent !important;
        background-image: none !important;
        opacity: 0 !important;
        display: none !important;
        content: none !important;
    }
    
    /* Force remove any possible gradient overlays */
    .hero-slide {
        background-color: transparent !important;
    }
    
    .hero-slide::before,
    .hero-slide::after {
        background: none !important;
        background-color: transparent !important;
        background-image: none !important;
        opacity: 0 !important;
        display: none !important;
        content: none !important;
    }
    
    /* Remove any possible container overlays */
    .hero-landscape-container::before,
    .hero-landscape-container::after {
        background: none !important;
        background-color: transparent !important;
        background-image: none !important;
        opacity: 0 !important;
        display: none !important;
        content: none !important;
    }
    
    /* FORCE SHOW landscape container with maximum priority */
    .hero-landscape-container,
    html .hero-landscape-container,
    body .hero-landscape-container,
    html body .hero .hero-landscape-container,
    html body .hero-landscape-container {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 1000 !important;
        flex-direction: row !important;
        width: 100% !important;
        height: auto !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        gap: 2rem !important;
        margin: 0 !important;
        padding: 1rem !important;
        padding-top: 0.25rem !important; /* Reduced even more - very close to navbar */
    }
    
    /* Also force it with higher specificity */
    html body .hero .hero-landscape-container,
    html body .hero-landscape-container {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* LEFT SIDE: H1 Title (35% width) - MOVED UP */
    .hero-landscape-container .hero-titles-container {
        flex: 0 0 35% !important;
        width: 35% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important; /* Start from top */
        align-items: flex-start !important;
        padding-right: 1rem !important;
        text-align: left !important;
        height: auto !important;
        margin-top: 0 !important; /* No top margin */
        padding-top: 0 !important; /* No top padding */
    }
    
    .hero-landscape-container .hero-titles-container .hero-title {
        font-size: 1.6rem !important;
        margin-bottom: 0.5rem !important;
        margin-top: 0 !important; /* No top margin */
        line-height: 1.3 !important; /* Adjusted for better background fit */
        text-align: left !important;
        font-family: 'Josefin Sans', 'Inter', Arial, sans-serif !important;
        color: white !important;
        text-shadow: 0 2px 12px rgba(0,0,0,0.8), 0 1px 0 #000 !important;
        /* Square/rectangular background for multi-line text */
        padding: 0.8rem 1.4rem !important; /* More vertical padding for multi-line */
        border-radius: 15px !important; /* Rounded corners instead of pill shape */
        width: auto !important; /* Let it size to content */
        display: block !important; /* Block display for proper multi-line handling */
        /* Override the table-cell display for mobile landscape */
        height: auto !important; /* Auto height for multi-line text */
    }
    
    /* H2 Subtitle styling */
    .hero-landscape-container .hero-titles-container .hero-subtitle {
        font-size: 0.9rem !important;
        font-weight: 600 !important;
        margin: 0 !important;
        margin-bottom: 0 !important;
        text-shadow: 0 2px 8px rgba(0,0,0,0.8) !important;
        letter-spacing: 0.5px !important;
        text-align: left !important;
        font-family: 'Josefin Sans', 'Inter', Arial, sans-serif !important;
        color: white !important;
        line-height: 1.2 !important;
    }
    
    /* RIGHT SIDE: Videos container (65% width) - ALIGNED WITH TITLE */
    .hero-landscape-container .hero-videos-container {
        flex: 0 0 65% !important;
        width: 65% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important; /* Align to top like the title */
        padding: 0 1rem 0 0 !important; /* Add right padding for edge spacing */
        margin: 0 !important;
        height: auto !important;
        margin-top: 0 !important; /* Remove any top margin to align with title */
    }
    
    /* 3 VIDEOS CONTAINER: Horizontal row - MOVED UP */
    .hero-landscape-container .hero-videos-container .free-cards {
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        gap: 0.75rem !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
        margin: 0 !important;
        padding: 0 !important;
        flex-wrap: nowrap !important;
        overflow: visible !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 50 !important;
        margin-top: 0 !important; /* Ensure no top margin pushes videos down */
    }
    
    /* EACH VIDEO CARD: Equal width, video on top, stats below */
    .hero-landscape-container .hero-videos-container .free-cards .free-card {
        flex: 1 !important;
        width: calc(33.333% - 0.5rem) !important;
        max-width: calc(33.333% - 0.5rem) !important;
        min-width: calc(33.333% - 0.5rem) !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        position: relative !important;
        height: auto !important;
        overflow: visible !important;
        transform: none !important;
        transition: none !important;
        z-index: 10 !important;
    }
    
    /* VIDEO CONTAINER: Top part of each card - ORDER 1 - TALLER */
    .hero-landscape-container .hero-videos-container .free-cards .free-card .free-card-video-container {
        order: 1 !important;
        position: relative !important;
        width: 100% !important;
        height: 160px !important; /* 1/3 taller: 120px × 1.33 = 160px */
        border-radius: 8px !important;
        overflow: hidden !important;
        background: #000 !important;
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3) !important;
        margin-bottom: 0.5rem !important;
        z-index: 5 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* VIDEO ELEMENT: Fill container */
    .hero-landscape-container .hero-videos-container .free-cards .free-card .free-card-video-container .free-card-video {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
        border-radius: 8px !important;
        visibility: visible !important;
        opacity: 1 !important;
        background: #000 !important;
    }
    
    /* STATS CONTAINER: Bottom part of each card - ORDER 2 */
    .hero-landscape-container .hero-videos-container .free-cards .free-card .video-stats {
        order: 2 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        text-align: center !important;
        margin-top: 0 !important;
        background: rgba(0, 0, 0, 0.7) !important;
        border-radius: 6px !important;
        padding: 0.3rem 0.2rem !important;
        backdrop-filter: blur(5px) !important;
        z-index: 3 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* STATS TEXT */
    .hero-landscape-container .hero-videos-container .free-cards .free-card .video-stats .video-stat-number {
        color: #ffff00 !important;
        font-size: 0.8rem !important;
        font-weight: 700 !important;
        font-family: 'Josefin Sans', 'Inter', Arial, sans-serif !important;
        text-shadow: 0 2px 4px rgba(0,0,0,0.8) !important;
        line-height: 1 !important;
        margin-bottom: 0.1rem !important;
    }
    
    .hero-landscape-container .hero-videos-container .free-cards .free-card .video-stats .video-stat-label {
        color: #00bcd4 !important;
        font-size: 0.5rem !important;
        font-weight: 600 !important;
        font-family: 'Josefin Sans', 'Inter', Arial, sans-serif !important;
        text-shadow: 0 2px 4px rgba(0,0,0,0.8) !important;
        line-height: 1.1 !important;
    }
    
    /* FORCE ALL 3 CARDS TO BE VISIBLE */
    .hero-landscape-container .hero-videos-container .free-cards .free-card:nth-child(1),
    .hero-landscape-container .hero-videos-container .free-cards .free-card:nth-child(2),
    .hero-landscape-container .hero-videos-container .free-cards .free-card:nth-child(3) {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* HIDE MOBILE CAROUSEL - not needed in landscape */
    .mobile-carousel-container {
        display: none !important;
    }
    
    /* Hide desktop/portrait layout elements */
    .desktop-portrait-title,
    .desktop-portrait-videos {
        display: none !important;
    }
    
    /* CRITICAL: Hide the regular desktop video layout in mobile landscape */
    .hero-center-wrapper .free-cards:not(.hero-landscape-container .free-cards),
    .hero .free-cards:not(.hero-landscape-container .free-cards),
    section .free-cards:not(.hero-landscape-container .free-cards) {
        display: none !important;
    }
    
    /* Mobile Landscape Navigation */
    .navbar-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .navbar-links {
        display: flex !important;
        gap: 1rem !important;
    }
    
    /* Services section heading - keep on single line */
    .services-content h2 {
        font-size: 1.75rem !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: unset !important;
        line-height: 1.2 !important;
    }
    
    .navbar-links .nav-link {
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
        padding: 0.5rem !important;
        min-height: 44px !important;
    }
    
    .navbar-links .hide-mobile {
        display: none !important;
    }
    
    /* Hide mobile hamburger in landscape */
    nav .mobile-nav-toggle {
        display: none !important;
    }
    
    /* Ensure hero center wrapper contains the landscape container properly */
    .hero-center-wrapper {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: center !important;
        z-index: 2 !important;
        padding: 0.5rem 2rem 2rem 2rem !important;
        padding-top: 20px !important;
        text-align: center !important;
    }

    /* Hero with static helmet background */
    .hero {
        height: 100vh;
        background: url('assets/images/mobile/helmet.jpg') !important;
        background-size: cover !important;
        background-position: center !important;
        background-attachment: fixed !important;
    }    /* Hide desktop hero slider */
    .hero-slider-container,
    .hero-slider-arrow {
        display: none !important;
    }
    
    .hero-center-wrapper {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: center !important;
        z-index: 2 !important;
        padding: 0.5rem 2rem 2rem 2rem !important; /* Further reduced top padding */
        padding-top: 20px !important; /* Further reduced from 35px to 20px to move content much closer to navbar */
        text-align: center !important;
    }
    
    /* Left side titles container - 1/3 of screen */
    .hero-titles-container {
        flex: 0 0 30% !important; /* Slightly reduced from 33.333% to give more space for videos */
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important; /* Changed from center to flex-start */
        align-items: flex-start !important;
        padding-right: 1rem !important;
        text-align: left !important;
    }
    
    .hero-titles-container .hero-title {
        font-size: 1.8rem !important; /* Reduced from 2.25rem to make room for videos */
        margin-bottom: 0.25rem !important; /* Reduced margin */
        line-height: 1.1 !important; /* Tighter line height */
        text-align: left !important;
        font-family: 'Josefin Sans', 'Inter', Arial, sans-serif !important;
        color: white !important;
        text-shadow: 0 2px 12px rgba(0,0,0,0.8), 0 1px 0 #000 !important;
    }
    
    /* Add "UNDERWATER SERVICES" subtitle */
    .hero-subtitle {
        color: white !important;
        font-size: 0.95rem !important; /* Slightly reduced */
        font-weight: 600 !important;
        margin-bottom: 0 !important;
        text-shadow: 0 2px 8px rgba(0,0,0,0.8) !important;
        letter-spacing: 0.5px !important;
        text-align: left !important;
        font-family: 'Josefin Sans', 'Inter', Arial, sans-serif !important;
    }
    
    /* Right side videos container - 2/3 of screen */
    .hero-videos-container {
        flex: 0 0 70% !important; /* Increased from 66.666% to use the space from titles */
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important; /* Changed from center to flex-start */
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Mobile CTA button on left side */
    .mobile-cta-button {
        background: linear-gradient(135deg, #00bcd4, #0097a7) !important;
        color: white !important;
        border: none !important;
        padding: 12px 24px !important;
        border-radius: 25px !important;
        font-size: 0.9rem !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin-top: 2rem !important;
        width: auto !important;
        max-width: 200px !important;
        text-decoration: none !important;
    }
    
    .mobile-cta-button:hover {
        background: linear-gradient(135deg, #0097a7, #00838f) !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 4px 12px rgba(0, 188, 212, 0.3) !important;
    }
    
    .mobile-cta-button .icon {
        width: 18px !important;
        height: 18px !important;
    }
    
    /* Three videos side-by-side on the right 2/3 - ALREADY HANDLED ABOVE */
    /* Hide mobile carousel container completely in landscape */
    .mobile-carousel-container {
        display: none !important;
    }
    
    
    /* VIDEO CONTAINER: Top part of each card */
    .hero-landscape-container .free-card-video-container {
        position: relative !important;
        width: 100% !important;
        height: 120px !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        background: #000 !important;
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3) !important;
        margin-bottom: 0.5rem !important;
        order: 1 !important;
        z-index: 2 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .hero-landscape-container .free-card-video {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
        border-radius: 8px !important;
        visibility: visible !important;
        opacity: 1 !important;
        background: #000 !important;
    }
    
    .hero-landscape-container .free-card-title-overlay {
        position: absolute !important;
        bottom: 4px !important;
        left: 4px !important;
        right: 4px !important;
        background: rgba(0, 0, 0, 0.8) !important;
        color: white !important;
        padding: 0.2rem 0.3rem !important;
        font-weight: 600 !important;
        font-size: 0.6rem !important;
        text-align: center !important;
        border-radius: 4px !important;
        font-family: 'Josefin Sans', 'Inter', Arial, sans-serif !important;
        line-height: 1.2 !important;
        z-index: 3 !important;
    }
    
    /* STATS CONTAINER: Bottom part of each card - ALWAYS BELOW VIDEO */
    .hero-landscape-container .video-stats {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        text-align: center !important;
        margin-top: 0 !important;
        background: rgba(0, 0, 0, 0.7) !important;
        border-radius: 6px !important;
        padding: 0.3rem 0.2rem !important;
        backdrop-filter: blur(5px) !important;
        order: 2 !important;
        z-index: 1 !important;
    }
    
    .hero-landscape-container .video-stat-number {
        color: #ffff00 !important;
        font-size: 0.8rem !important;
        font-weight: 700 !important;
        font-family: 'Josefin Sans', 'Inter', Arial, sans-serif !important;
        text-shadow: 0 2px 4px rgba(0,0,0,0.8) !important;
        line-height: 1 !important;
        margin-bottom: 0.1rem !important;
    }
    
    .hero-landscape-container .video-stat-label {
        color: #00bcd4 !important;
        font-size: 0.5rem !important;
        font-weight: 600 !important;
        font-family: 'Josefin Sans', 'Inter', Arial, sans-serif !important;
        text-shadow: 0 2px 4px rgba(0,0,0,0.8) !important;
        line-height: 1.1 !important;
    }
    
    /* No navigation arrows needed - showing all 3 videos */
    .mobile-carousel-nav {
        display: none !important;
    }
    
    /* Primary CTA - positioned below the landscape container */
    .primary-button {
        max-width: 240px !important;
        width: auto !important;
        align-self: center !important;
        margin: 0.5rem auto 0 !important; /* Reduced top margin */
        padding: 0.8rem 1.4rem !important; /* Slightly smaller for landscape */
        font-size: 0.95rem !important; /* Slightly smaller font */
        font-family: 'Josefin Sans', 'Inter', Arial, sans-serif !important;
        background: linear-gradient(135deg, #00bcd4, #0097a7) !important; /* Electric blue */
        border-radius: 25px !important;
        color: white !important;
        border: none !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
    }
    
    /* Remove any arrows/icons from primary button */
    .primary-button .icon,
    .primary-button svg,
    .primary-button::after,
    .primary-button::before {
        display: none !important;
    }
    
    /* Hide the duplicate statistics section with black background */
    .statistics {
        display: none !important;
    }
    
    /* Ensure proper stacking order and positioning */
    .hero {
        position: relative !important;
        z-index: 1 !important;
    }
    
    .hero-center-wrapper {
        position: relative !important;
        z-index: 2 !important;
        display: flex !important;
        flex-direction: column !important;
        order: 1 !important; /* Ensure it comes first */
    }
    
    /* Keep video stats within their containers and in proper order */
    .video-stats {
        position: relative !important;
        z-index: 3 !important;
        margin-top: 0.25rem !important;
        /* Remove order property to keep stats within their free-card containers */
    }
    
    /* Force sections to appear in correct order after hero */
    .services,
    .certifications {
        position: relative !important;
        z-index: auto !important;
        margin-top: 0 !important;
        clear: both !important;
        order: 3 !important; /* Ensure sections come after hero content */
    }
    
    /* Certifications - All in one row */
    .certifications-logos {
        display: flex !important;
        justify-content: center !important;
        gap: 2rem !important;
        flex-wrap: wrap !important;
        overflow: visible !important;
    }
    
    .certification-item {
        flex: 0 0 auto !important;
    }
    
    /* Reduce section separator height after certifications to 1/3 */
    .section-separator {
        height: 7px !important; /* Reduced from 20px to ~7px (1/3 height) */
    }
    
    .separator-blue {
        height: 7px !important; /* Reduced from 20px to ~7px (1/3 height) */
    }
    
    /* Cross-ports - Horizontal stats */
    .statistics-content {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-around !important;
        gap: 2rem !important;
    }
    
    .stat-item {
        flex: 1 !important;
        text-align: center !important;
    }
    
    /* Local Presence - Side by side */
    .local-presence-content {
        display: flex !important;
        flex-direction: row !important;
        gap: 3rem !important;
        align-items: flex-start !important;
    }
    
    .local-presence-text {
        flex: 1 !important;
    }
    
    .local-presence-map {
        flex: 1 !important;
        height: 400px !important;
    }
    
    /* Services - Two column grid */
    .services-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 1.5rem !important;
    }
    
    /* CTA - Side by side */
    .cta-container {
        display: flex !important;
        align-items: center !important;
        gap: 3rem !important;
        text-align: left !important;
        padding: 1.5rem 2rem !important; /* Reduced from 3rem to 1.5rem (half height) */
    }
    
    .cta-text {
        flex: 1 !important;
    }
    
    .cta-text h2 {
        font-size: 1.75rem !important;
        margin-bottom: 1rem !important;
    }
    
    .cta-text p {
        font-size: 1rem !important;
        margin-bottom: 0 !important;
    }
    
    .cta-buttons {
        display: flex !important;
        flex-direction: row !important;
        gap: 1rem !important;
        flex-shrink: 0 !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .cta-buttons .primary-button,
    .cta-buttons .secondary-button {
        width: auto !important;
        white-space: nowrap !important;
        padding: 1rem 1.5rem !important;
        font-size: 1rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 50px !important;
        min-width: 140px !important;
    }
    
    /* Footer - Compact columns */
    .footer-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 2rem !important;
        margin-bottom: 2rem !important;
    }
    
    .mobile-footer-accordion {
        display: none !important;
    }
    
    .footer-column h3 {
        font-size: 1rem !important;
        margin-bottom: 1rem !important;
    }
    
    .footer-links li {
        margin-bottom: 0.5rem !important;
    }
    
    .footer-links a,
    .contact-info .contact-item {
        font-size: 0.875rem !important;
    }
}

/* Small screen adjustments for mobile landscape titles with "- NIGERIA" */
@media (max-width: 667px) and (orientation: landscape) {
    .hero-titles-container .hero-title {
        font-size: 1.6rem !important; /* Slightly smaller for very small landscape screens */
        line-height: 1.05 !important;
    }
    
    .hero-subtitle {
        font-size: 0.85rem !important;
    }
}

/* Mobile portrait fixes: ensure hero content sits below the fixed nav ball,
   reduce video height, and prevent background-attachment:fixed issues.
   Scoped to max-width:768px and portrait orientation so desktop/tablet are untouched. */
@media (max-width: 768px) and (orientation: portrait) {
  :root {
    --mobile-hero-nav-offset: 140px; /* adjustable if nav is taller/shorter */
  }

  /* Push the entire hero down to clear the fixed nav (nav ball) */
  .hero {
    height: auto !important;
    min-height: auto !important;
    padding-top: var(--mobile-hero-nav-offset) !important;
    background-attachment: scroll !important; /* ensure background scrolls on mobile portrait */
    background-position: center top !important;
    overflow: visible !important;
  }

  /* Put the center wrapper into normal flow so it follows the .hero padding */
  .hero-center-wrapper {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    transform: none !important;
    display: block !important;
    padding: 0 1rem !important;
    margin: 0 auto !important;
    z-index: 3 !important;
    -webkit-transform: none !important;
  }

  /* Title spacing and stacking so the nav doesn't overlap */
  .hero-title {
    margin-top: 0 !important;
    margin-bottom: 0.5rem !important;
    padding-top: 0 !important;
    line-height: 1.15 !important;
    z-index: 4 !important;
  }

  /* Lower the video cards and reduce their height on small phones */
  .free-cards {
    display: flex !important;
    gap: 0.5rem !important;
    margin-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    overflow: visible !important;
  }

  .free-card {
    flex: 0 0 100% !important; /* stack vertically on very small screens */
  }

  .free-card-video-container {
    height: 200px !important; /* shorter video height on mobile */
    max-height: 220px !important;
    margin: 0 auto !important;
  }

  .free-card-video {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
  }

  /* Ensure overlay text sits near the bottom of the video and is visible */
  .free-card-title-overlay {
    position: absolute !important;
    bottom: 10px !important;
    left: 12px !important;
    right: auto !important;
    color: #ffffff !important;
    background: rgba(0,0,0,0.25) !important;
    padding: 0.25rem 0.5rem !important;
    border-radius: 4px !important;
    z-index: 5 !important;
  }

  /* Keep CTA visible below cards - electric blue styling */
  .hero-center-wrapper .primary-button,
  .primary-button {
    display: inline-flex !important;
    margin-top: 1.25rem !important;
    z-index: 4 !important;
    background: linear-gradient(90deg, #00bcd4, #0097a7) !important; /* Electric blue gradient */
    color: white !important;
    border: none !important;
    padding: 0.85rem 1rem !important;
    border-radius: 8px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    box-shadow: 0 6px 18px rgba(0, 188, 212, 0.3) !important;
    width: 100% !important;
    max-width: 320px !important;
    font-family: 'Josefin Sans', 'Inter', Arial, sans-serif !important;
  }

  /* Make sure background slider elements don't use fixed attachment on mobile */
  .hero-slider, .hero-slide, .hero-slider-container {
    background-attachment: scroll !important;
    background-position: center top !important;
  }

  /* Optional: if nav appears larger on some phones, user can reduce overlap by increasing offset */
  /* Example: override --mobile-hero-nav-offset in-device via a script or media query for very small heights */
}

@media (max-width: 768px) and (orientation: portrait) {
  /* Show the hero CTA button with electric blue styling - smaller and more rounded */
  .hero-center-wrapper .primary-button {
    display: inline-flex !important;
    background: linear-gradient(90deg, #00bcd4, #0097a7) !important; /* Electric blue gradient */
    color: white !important;
    border: none !important;
    padding: 0.6rem 1.2rem !important; /* Reduced padding for smaller button */
    border-radius: 25px !important; /* More rounded corners */
    font-size: 0.9rem !important; /* Smaller font size */
    font-weight: 600 !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    box-shadow: 0 4px 12px rgba(0, 188, 212, 0.3) !important;
    width: auto !important; /* Auto width instead of full width */
    min-width: 200px !important; /* Minimum width */
    max-width: 250px !important; /* Smaller max width */
    font-family: 'Josefin Sans', 'Inter', Arial, sans-serif !important;
    margin-top: 0.75rem !important; /* Adjusted spacing */
    margin-bottom: 1.5rem !important; /* Add space underneath within hero section */
    z-index: 4 !important;
    align-self: center !important; /* Center the button */
  }
  
  .hero-center-wrapper .primary-button .icon {
    display: none !important;
  }

  /* Hide mobile CTA container (the misplaced button near footer) */
  .mobile-cta-container {
    display: none !important;
  }

  .mobile-cta-inner {
    display: none !important;
  }

  .mobile-cta-below-stats {
    display: none !important;
  }
}

/* Ensure video overlay titles are white on small portrait screens */
@media (max-width: 768px) and (orientation: portrait) {
  .free-card-title-overlay {
    color: #ffffff !important;
    /* keep a subtle dark translucent background for contrast */
    background: rgba(0,0,0,0.28) !important;
  }
}

/* Prevent horizontal overflow from centering containers and ensure full-bleed hero */
html, body {
  overflow-x: hidden !important;
  width: 100% !important;
}

/* Full-bleed hero for portrait mode only */
@media (max-width: 768px) and (orientation: portrait) {
  .hero {
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important; /* cancels centered container gutters */
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
    /* Use a single static background image on mobile portrait. Replace this with your supplied image. */
    background-image: url('assets/images/mobile/mobilePortraitBackground1.jpg') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }
}

/* Hide the slider and arrows on mobile portrait so background is static */
.hero-slider-container,
.hero-slider,
.hero-slide,
.hero-slider-arrow {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
}

/* Make hero center wrapper flow normally and sit above the background */
.hero-center-wrapper.flow-on-mobile {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: 100% !important;
  height: auto !important;
  display: block !important;
  padding: 0 1rem !important;
  margin: 0 auto !important;
  transform: none !important;
}

/* Tighten nav for mobile portrait: scale down logo and hide extra text to reduce the 'nav ball' footprint */
nav {
  padding: 0.35rem 0.6rem !important;
  background: transparent !important;
  height: auto !important;
  box-shadow: none !important;
}

nav .navbar-container {
  padding: 0 !important;
}

nav .navbar-logo img {
  width: 140px !important; /* smaller logo on mobile */
  height: auto !important;
  display: block !important;
}

/* Hide non-essential nav text on mobile to keep the nav ball compact */
nav .global-operations,
nav .navbar-links .hide-mobile {
  display: none !important;
}

nav .navbar-links a.nav-link {
  padding: 0.25rem !important;
}

/* If there's a floating nav 'ball' element with high z-index, make it smaller via a broad selector (safe on mobile only) */
.nav-ball, .nav-toggle, .floating-nav {
  transform: scale(0.86) !important;
  width: auto !important;
  height: auto !important;
}

/* Slightly increase the hero padding-top to make sure title clears the nav ball */
.hero {
  padding-top: calc(var(--mobile-hero-nav-offset, 140px) + 6px) !important;
}

/* Tablet Portrait and Landscape Responsive Design - Bridge the gap */
@media (min-width: 481px) and (max-width: 1023px) {
  /* Hide mobile-specific containers */
  .hero-landscape-container {
    display: none !important;
  }
  
  .mobile-carousel-container {
    display: none !important;
  }
  
  /* Show desktop layout but with tablet sizing */
  .desktop-portrait-title,
  .desktop-portrait-videos {
    display: block !important;
  }
  
  /* Hero section adjustments for tablet */
  .hero {
    padding-top: 120px !important; /* Less padding than mobile */
    background: linear-gradient(rgba(10, 75, 120, 0.3), rgba(0, 0, 0, 0.5)), url('assets/images/BackgroundDiver3.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
  }
  
  .hero-center-wrapper {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    padding: 1.5rem !important;
  }
  
  /* Navigation adjustments for tablet */
  .mobile-nav {
    display: none !important;
  }
  
  /* Services grid for tablet */
  .services-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
  }
  
  /* Statistics adjustments for tablet */
  .statistics-content {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap:    1.5rem !important;
  }
  
  /* CTA section for tablet */
  .cta-buttons {
    flex-direction: row !important;
    gap: 1rem !important;
  }
  
  /* Footer adjustments for tablet */
  .footer-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 2rem !important;
  }
}

/* Safety desktop-targeted overrides: ensure CTA is clean when mobile overrides are loaded */
@media (min-width: 1024px) {
  /* Hide landscape-specific containers on desktop */
  .hero-landscape-container {
    display: none !important;
  }
  
  /* Show the original layout for desktop */
  .desktop-portrait-title,
  .desktop-portrait-videos {
    display: block !important;
  }
  
  .hero-center-wrapper .primary-button {
    transform: none !important;
    display: inline-flex !important;
  }
  
  /* Ensure mobile carousel is never shown on desktop */
  .mobile-carousel-container {
    display: none !important;
  }
}

/* Surface Pro specific fixes - these devices have high resolution but tablet form factor */

/* Surface Pro Portrait Mode: ~1824x2736 (width x height) */
@media (min-width: 1800px) and (max-width: 1900px) and (orientation: portrait) {
  /* Drastically reduce hero height */
  .hero {
    height: 50vh !important; /* Much shorter - half viewport height */
    min-height: 50vh !important;
    max-height: 50vh !important;
    overflow: hidden !important;
  }
  
  /* Force desktop layout and disable mobile behaviors */
  .hero-landscape-container {
    display: none !important;
  }
  
  .desktop-portrait-title,
  .desktop-portrait-videos {
    display: block !important;
  }
  
  .mobile-carousel-container {
    display: none !important;
  }
  
  /* Compact video layout for Surface Pro portrait */
  .free-cards {
    gap: 1rem !important; /* Tighter spacing */
    max-width: 800px !important; /* Smaller container */
    justify-content: center !important;
    grid-template-columns: repeat(3, 240px) !important; /* Smaller videos */
  }
  
  .free-card {
    width: 240px !important;
  }
  
  .free-card-video-container {
    width:  240px !important;
    height: 280px !important; /* Much smaller video height */
  }
  
  /* Properly formatted video stats with strong background */
  .video-stats {
    width: 100% !important;
    margin-top: 0.25rem !important; /* Minimal spacing */
    padding: 0.6rem 0.4rem !important; /* More padding for better visibility */
    background: rgba(0, 0, 0, 0.9) !important; /* Even stronger background */
    border-radius: 8px !important; /* Slightly larger radius */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important; /* Subtle border for definition */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important; /* Drop shadow for depth */
  }
  
  .video-stat-number {
    font-size: 1.2rem !important; /* Slightly larger for better visibility */
    color: #ffff00 !important; /* Yellow numbers */
    font-weight: 700 !important;
    margin-bottom: 0.1rem !important;
    line-height: 1 !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.9) !important; /* Stronger shadow */
  }
  
  .video-stat-label {
    font-size: 0.8rem !important; /* Slightly larger label */
    color: #00bcd4 !important; /* Electric blue */
    font-weight: 600 !important;
    line-height: 1.1 !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.9) !important; /* Stronger shadow */
  }
  
  /* Compact hero content layout */
  .hero-center-wrapper {
    justify-content: flex-start !important; /* Start from top */
    align-items: center !important;
    padding: 1rem !important; /* Minimal padding */
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important; /* Controlled spacing */
  }
  
  .hero-title {
    font-size: 2.2rem !important; /* Smaller title for compact layout */
    margin-bottom: 0.5rem !important; /* Minimal margin */
    text-align: center !important;
    line-height: 1.1 !important;
  }
  
  /* Center the button properly */
  .hero-center-wrapper .primary-button,
  .primary-button {
    display: block !important; /* Block display for better centering */
    width: fit-content !important; /* Only as wide as content */
    margin: 0.5rem auto 0 auto !important; /* Center horizontally */
    padding: 0.8rem 1.4rem !important; /* Compact padding */
    font-size: 1rem !important;
    text-align: center !important; /* Center text */
    align-self: center !important; /* Flex child alignment */
  }
}

/* Surface Pro Landscape Mode: ~2736x1824 (width x height) */
@media (min-width: 2700px) and (max-width: 2800px) and (orientation: landscape) {
  /* Ensure proper desktop layout */
  .hero-landscape-container {
    display: none !important;
  }
  
  .desktop-portrait-title,
  .desktop-portrait-videos {
    display: block !important;
  }
  
  .mobile-carousel-container {
    display: none !important;
  }
  
  /* Optimize for very wide landscape display */
  .free-cards {
    gap: 2rem !important;
    max-width: 1200px !important;
    justify-content: center !important;
  }
  
  .free-card {
    width: 320px !important;
  }
  
  .free-card-video-container {
    width: 320px !important;
    height: 400px !important;
  }
  
  /* Larger video stats for high resolution */
  .video-stats {
    margin-top: 1rem !important;
    padding: 1rem 0.75rem !important;
    background: rgba(0, 0, 0, 0.7) !important;
    border-radius: 10px !important;
  }
  
  .video-stat-number {
    font-size: 1.6rem !important;
    color: #ffff00 !important;
    font-weight: 700 !important;
    margin-bottom: 0.3rem !important;
  }
  
  .video-stat-label {
    font-size: 1rem !important;
    color: #00bcd4 !important;
    font-weight: 600 !important;
  }
  
  /* Optimize hero layout for ultra-wide */
  .hero-center-wrapper {
    padding-top: 120px !important;
  }
  
  .hero-title {
    font-size: 4rem !important;
    margin-bottom: 2.5rem !important;
  }
  
  /* Ensure CTA button is properly styled */
  .hero-center-wrapper .primary-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    padding: 1rem 1.8rem !important;
    border-radius: 28px !important;
    margin: 2rem auto 0 auto !important;
    background: linear-gradient(135deg, #00bcd4, #0097a7) !important; /* electric blue */
    color: white !important;
    font-size: 1.125rem !important;
    font-family: 'Josefin Sans', 'Inter', Arial, sans-serif !important; /* Josefin Sans font */
  }
  
  .hero-center-wrapper .primary-button:hover {
    background: linear-gradient(135deg, #0097a7, #00838f) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 188, 212, 0.3) !important;
  }
}

/* Hide mobile CTA since we now have floating button */
.mobile-cta-container,
.mobile-cta-below-stats {
    display: none !important;
}

/* Final mobile-portrait overrides (high specificity, appended last to avoid parse/ordering issues)
     - Hide desktop contact container and colored title in portrait
     - Force hero H1 to render as a fit-content box with a semi-transparent background that wraps
     - Nudge the title up slightly so it sits beneath the nav on small phones
*/
@media (max-width: 768px) and (orientation: portrait) {
    /* Ensure contact container is hidden on very small portrait screens */
    .hero-left-content {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Hide colored title variant if present */
    .hero-colored-title {
        display: none !important;
    }

    /* Ensure hero containers do not clip the title background */
    .hero,
    .hero-slider-container,
    .hero-slider,
    .hero-center-wrapper,
    .hero-center-wrapper.flow-on-mobile {
        overflow: visible !important;
        z-index: 2 !important;
    }

    /* Remove the old background/padding on the outer H1 so only the inner span provides the rectangle.
       This avoids two overlapping semi-transparent rectangles (the previous buggy one and the new one). */
    .hero-title {
        display: block !important;
        width: auto !important;
        max-width: calc(100% - 24px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        /* Neutralize legacy background and heavy padding so only .hero-title-bg shows the rectangle */
        background: none !important;
        padding: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        min-height: 0 !important;
        color: inherit !important; /* let inner span control color */
        position: relative !important;
        z-index: 9999 !important; /* keep it above slider but below the span which has higher z-index */
    }

    /* Nudge the wrapper up a touch so the title sits closer to the nav area */
    .hero-center-wrapper.flow-on-mobile {
        padding-top: 0.6rem !important;
        justify-content: flex-start !important; /* start near top of hero */
    }

    /* Force a controlled font-size and line-height on portrait so padding matches text height */
    .hero-title {
        font-size: 1.6rem !important;
        line-height: 1.36 !important;
    }

    /* Ensure the hero section fills the full viewport height on small portrait devices */
    .hero,
    .hero-slider-container,
    .hero-slider,
    .hero-center-wrapper,
    .hero-center-wrapper.flow-on-mobile {
        height: 100vh !important;
        min-height: 100vh !important;
        max-height: 100vh !important;
        /* keep centering behavior but allow slight vertical nudges via padding */
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        padding-top: 0 !important; /* remove legacy top padding so the hero matches viewport exactly */
        box-sizing: border-box !important;
        overflow: hidden !important; /* avoid accidental scroll inside hero */
    }
    /* Ensure the flow-on-mobile wrapper starts from the top so title sits above videos (override centering) */
    .hero-center-wrapper.flow-on-mobile {
        justify-content: center !important; /* restore centering behavior */
        padding-top: 0.6rem !important; /* gentle nudge down from nav */
        align-items: center !important;
    }
}

/* Small append: ensure hero takes full viewport height in mobile portrait and keep separators hidden */
@media (max-width: 768px) and (orientation: portrait) {
    /* Make hero full viewport height so H1 sits in the intended area */
    .hero {
        min-height: 100vh !important;
        box-sizing: border-box !important;
    }

    /* Make sure hero-center-wrapper sits below the nav but above videos */
    .hero-center-wrapper {
        padding-top: 0.5rem !important;
    }

    /* Double-check separators are hidden on portrait to avoid flicker */
    .section-separator,
    .section-separator .separator-blue,
    .separator-blue {
        display: none !important;
        height: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

/* Ensure hamburger icon is visible on mobile portrait above video/hero */
@media screen and (max-width: 1024px) and (orientation: portrait) {
    nav .mobile-nav-toggle {
        display: block !important;
        color: #ffffff !important;
        background: transparent !important;
        padding: 0.3rem !important;
        border-radius: 4px !important;
        z-index: 3000 !important;
        font-size: 1.2rem !important;
        font-weight: 300 !important;
        font-family: Arial, sans-serif !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: absolute !important;
        top: 50% !important;
        right: 1rem !important;
        transform: translateY(-50%) !important;
        line-height: 1 !important;
        letter-spacing: -0.5px !important;
    }

    /* make sure the hamburger uses a readable font-size */
    .mobile-nav-toggle {
        font-size: 1.6rem !important;
        line-height: 1 !important;
    }
}

/* Ensure .hero-left-content is completely hidden in mobile landscape views */
@media screen and (orientation: landscape) and (min-width: 375px) and (max-width: 1279px) {
    .hero-left-content {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        pointer-events: none !important;
    }
}