/* Individual section backgrounds - each section has its own background */

/* Certifications section bottom separator using actual div element */
.certifications {
    position: relative;
    overflow: visible;
    padding-bottom: 0; /* No space below separator */
    padding-top: 0; /* Remove padding to eliminate white space */
    margin-top: 0 !important; /* Ensure no top margin */
    background-image: url('assets/images/marinebackground.png') !important;
    background-size: 280px 280px !important;
    background-position: top left !important;
    background-repeat: repeat !important; /* Tile the image */
    min-height: 150px; /* Reduced by half: 300px / 2 = 150px */
    border: none !important; /* Ensure no borders */
    outline: none !important; /* Ensure no outlines */
    /* Force hardware acceleration to prevent rendering issues */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: transform;
}

.certifications-bottom-separator {
    width: 100vw;
    height: 100px; /* Restored to original height */
    background: 
        url('assets/images/service-cards/divSeperator.png'),
        url('assets/images/marinebackground.png');
    background-repeat: repeat-x, repeat; /* Separator tiles horizontally, marine background tiles both ways */
    background-size: 200px 100px, 280px 280px; /* Restored separator size, marine background tiles */
    background-position: left center, top left;
    position: absolute;
    bottom: -20px; /* Moved up from -100px to -20px */
    left: 0; /* Changed from 50% to start from left edge */
    transform: none; /* Removed translateX since we start from left */
    margin: 0;
    padding: 0;
    z-index: 1000;
    /* Remove any yellow elements that might appear */
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Statistics section bottom separator using same styling */
.statistics {
    position: relative;
    overflow: visible;
    padding-bottom: 0; /* No space below separator */
    padding-top: 4rem; /* Reduced from 8rem to 4rem */
    background: url('assets/images/Barge.jpg') center center/cover no-repeat;
    background-attachment: fixed;
}

/* Add extra top margin to statistics section heading to avoid overlap with separator */
.statistics .statistics-header h2 {
    margin-top: 2rem; /* Reduced from 4rem to 2rem */
}

/* Local presence section bottom separator using same styling */
.local-presence {
    position: relative;
    overflow: visible; /* Ensure separator can be seen */
    padding-bottom: 100px; /* Add space for separator */
    padding-top: 8rem; /* Increased from 6rem to 8rem to account for larger separators */
    background: url('assets/images/marinebackground.png') center center/280px 280px repeat;
}

/* Add extra top margin to local presence section heading to avoid overlap with separator */
.local-presence h2 {
    margin-top: 4rem; /* Additional space above heading to avoid separator overlap */
}

.local-presence-bottom-separator {
    width: 100vw;
    height: 150px;
    background-image: url('assets/images/divSeperator.png') !important;
    background-repeat: repeat-x !important;
    background-position: center center !important;
    background-size: auto 150px !important;
    position: relative !important;
    margin: -75px 0 0 0 !important;
    padding: 0;
    z-index: 9999 !important;
    display: block !important;
    visibility: visible !important;
}
    box-shadow: none !important; /* Remove any box shadow */
}

/* Ensure section headings are visible - overriding gradient text effects */
.statistics-header h2,
.local-presence h2,
.local-presence-text h2 {
    margin: 6rem auto 2rem auto !important; /* Consistent margins */
    padding: 0.3rem 0.8rem !important; /* Padding */
    width: fit-content !important; /* Make width fit the content exactly */
    max-width: none !important; /* Remove max-width constraint */
    display: inline-block !important; /* Consistent display for better text fitting */
    color: #ffffff !important; /* Force white text */
    background: rgba(0, 0, 0, 0.7) !important; /* Semi-transparent background - matching stats background */
    border-radius: 25px !important; /* Rounded corners */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important; /* Strong text shadow for visibility */
    font-weight: 700 !important; /* Make text bold */
    opacity: 1 !important; /* Ensure full opacity */
    -webkit-text-fill-color: #ffffff !important; /* Override gradient text fill */
    -webkit-background-clip: initial !important; /* Remove gradient clipping */
    background-clip: initial !important; /* Remove gradient clipping */
}

/* Services heading - lighter semi-transparent background */
.services-content h2 {
    color: #ffffff !important; /* Force white text */
    background: rgba(0, 0, 0, 0.3) !important; /* Much lighter semi-transparent background */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important; /* Strong text shadow for visibility */
    font-weight: 700 !important; /* Make text bold */
    padding: 0.5rem 1.5rem !important; /* More padding for full text coverage */
    border-radius: 15px !important; /* Softer rounded corners */
    width: auto !important; /* Auto width to fit all text */
    max-width: fit-content !important; /* Fit content width */
    margin: 3rem auto 2rem auto !important; /* Increased top margin from 1rem to 3rem for more space */
    display: inline-block !important;
    white-space: nowrap !important; /* Prevent text wrapping */
}

/* Certification Carousel Styles */
.certification-carousel {
    background-color: transparent; /* Remove background, keep only individual badge backgrounds */
    padding: 0.2rem 0 1rem 0;
    margin-top: 0.5rem;
    overflow: hidden;
    border-radius: 8px;
    position: relative;
    /* Force hardware acceleration to prevent color rendering issues during scroll */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.carousel-track {
    display: flex;
    width: calc(200% + 2rem); /* Double width for seamless loop + spacing */
    animation: scroll-left 30s linear infinite;
    gap: 1rem;
}

.carousel-badge {
    background-color: transparent; /* Remove white background */
    color: white; /* White text instead of dark blue */
    padding: 0.75rem 1.5rem;
    border: none; /* Remove border completely */
    border-radius: 6px;
    white-space: nowrap;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
    min-height: 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: border-color 0.3s ease;
    gap: 0.25rem;
}

.badge-icon {
    font-size: 1.6rem; /* Bigger icon size */
    display: block;
    margin-bottom: 0.2rem;
    color: #00bcd4 !important; /* Electric blue color - same as local maritime partner */
    font-weight: bold;
}

.carousel-image {
    max-width: 180px;
    max-height: 90px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: brightness(1.2) contrast(1.1);
}

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

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

/* Responsive adjustments for carousel */
@media screen and (max-width: 768px) {
    .carousel-badge {
        font-size: 0.8rem;
        padding: 0.6rem 1.2rem;
        min-height: 2.2rem;
    }
    
    .carousel-track {
        animation-duration: 25s; /* Slightly faster on mobile */
    }
}

/* Certification Separator Styles */
.certification-separator.section-separator {
    width: 100%;
    min-height: 0;
    height: 32px;
    background: none; /* Remove duplicate - use marine background container instead */
    margin: 0;
    padding: 0;
    position: relative;
}
.certification-separator.separator-blue::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('assets/images/service-cards/divSeperator.png') repeat-x;
    background-size: auto 100%;
    z-index: 2;
    pointer-events: none;
}
/* Hero Image Slider Styles */
.hero-slider-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    overflow: hidden;
}
.hero-slider {
    width: 100%;
    height: 100%;
    position: relative;
}
.hero-slide {
    position: absolute;
    top: 0;
    left: 100vw;
    width: 100vw;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 1;
    z-index: 1;
    transition: left 1.2s cubic-bezier(.25,.46,.45,.94);
    pointer-events: none;
    will-change: left;
}
.hero-slide.active {
    left: 0;
    z-index: 2;
    opacity: 1;
}
.hero-slide.prev {
    left: -100vw;
    z-index: 1;
    opacity: 1;
}
/* Ensure smooth continuous loop */
.hero-slide:not(.active):not(.prev) {
    left: 100vw;
    opacity: 1;
    transition: none;
}
.hero-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(10, 75, 120, 0.85);
    border: none;
    color: #fff;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
    box-shadow: 0 4px 16px rgba(10,75,120,0.18);
    padding: 0;
    outline: none;
}
.hero-slider-arrow-left {
    left: 2rem;
}
.hero-slider-arrow-right {
    right: 2rem;
}
.hero-slider-arrow:hover {
    background: #fff;
    box-shadow: 0 6px 20px rgba(10,75,120,0.25);
    transform: scale(1.08);
}

.hero-slider-arrow svg {
    display: block;
    width: 32px;
    height: 32px;
}
.hero-slider-arrow polygon {
    transition: fill 0.2s, stroke 0.2s;
}
.hero-slider-arrow:hover polygon,
.hero-slider-arrow:focus polygon {
    fill: #0a4b78;
    stroke: #fff;
}
/* Free Cards Styles */

.free-cards {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    align-items: center;
    margin-top: 0;
    margin-bottom: 2rem;
    flex-wrap: nowrap;
    width: 100%;
    pointer-events: auto;
}

/* Ensure desktop layout is preserved - force horizontal row layout - but only for large screens */
@media (min-width: 769px) {
    .free-cards {
        display: flex !important;
        flex-direction: row !important; /* Explicitly force row direction */
        gap: 1.5rem !important;
        justify-content: center !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        max-width: none !important;
    }
    
    .free-card {
        flex: 0 0 auto !important;
        max-width: 640px !important; /* Double size: 320px × 2 = 640px */
        width: 640px !important; /* Double size: 320px × 2 = 640px */
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        margin: 0 !important;
    }
}

/* Intermediate desktop sizing - removed to maintain consistent layout across all larger screens */

/* Additional override for larger screens to ensure horizontal layout */
@media screen and (min-width: 769px) {
    .hero .free-cards,
    .hero-center-wrapper .free-cards,
    section .free-cards {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 1.5rem !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        max-width: none !important;
    }
    
    .hero .free-card,
    .hero-center-wrapper .free-card,
    section .free-card {
        flex: 0 0 640px !important; /* Double size: 320px × 2 = 640px */
        width: 640px !important; /* Double size: 320px × 2 = 640px */
        max-width: 640px !important; /* Double size: 320px × 2 = 640px */
        display: flex !important;
        flex-direction: column !important;
        margin: 0 !important;
    }
}

/* Apply desktop layout to all screens larger than mobile */
@media screen and (min-width: 769px) {
    .hero .free-cards,
    .hero-center-wrapper .free-cards,
    section .free-cards {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 1.5rem !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        max-width: 900px !important;
        margin: 0 auto !important;
    }
    
    .hero .free-card,
    .hero-center-wrapper .free-card,
    section .free-card {
        flex: 0 0 220px !important; /* Smaller size for intermediate desktop */
        width: 220px !important;
        max-width: 220px !important;
        display: flex !important;
        flex-direction: column !important;
        margin: 0 !important;
    }
}

/* Desktop video height override - for all larger screens */
@media (min-width: 769px) {
    /* Force split hero layout with higher specificity - override inline styles */
    .hero .hero-center-wrapper,
    section.hero .hero-center-wrapper,
    .hero-center-wrapper {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important; /* Align to left instead of space-between */
        max-width: 1400px !important;
        margin: 0 auto !important;
        padding: 3rem 2rem !important;
        gap: 4rem !important; /* Larger gap to separate left and right */
        min-height: 80vh !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 2 !important;
        position: relative !important;
    }
    
    /* Left column - hero title and welcome text */
    .hero .hero-content,
    section.hero .hero-content,
    .hero-center-wrapper .hero-content {
        flex: 1 !important;
        max-width: 45% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        padding: 2rem 0 !important;
        position: relative !important;
        z-index: 10 !important;
    }
    
    /* Show the colored heading on desktop */
    @media (min-width: 769px) {
        .hero-colored-title {
            display: block !important;
        }
    }
    
    /* Left column text content */
    .hero-left-content {
        position: absolute !important;
        left: 0 !important;
        top: 43% !important;
        transform: translateY(-50%) !important;
        width: 40% !important;
        max-width: 500px;
        display: flex !important;
        align-items: center !important;
        padding: 1.5rem 1.2rem 0.8rem 1.2rem !important;
        background: #1a3650 !important;
        border-radius: 0 15px 15px 0 !important;
        z-index: 25 !important;
        box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3) !important;
        visibility: visible !important; /* Ensure it is visible */
        opacity: 1 !important; /* Ensure it is fully opaque */
    }
    
    .hero-left-inner {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
    }
    
    .hero-contact-title {
        font-family: 'Josefin Sans', 'Inter', Arial, sans-serif !important;
        font-size: 1.8rem !important;
        font-weight: 700 !important;
        margin: 0 !important;
        color: #ffffff !important;
        text-align: right !important; /* Changed from center to right */
        line-height: 1.2 !important;
        margin-bottom: 1rem !important;
    }
    
    .hero-contact-info {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.8rem !important;
        margin-bottom: 1rem !important;
    }
    
    .hero-contact-item {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important; /* Align items to the right */
        gap: 0.8rem !important;
    }
    
    .hero-contact-icon {
        color: #fbbf24 !important; /* Yellow color for icons */
        flex-shrink: 0 !important;
    }
    
    .hero-contact-link {
        font-family: 'Inter', Arial, sans-serif !important;
        font-size: 1rem !important;
        font-weight: 500 !important;
        color: #ffffff !important;
        text-decoration: none !important;
        transition: color 0.3s ease !important;
    }
    
    .hero-contact-link:hover {
        color: #fbbf24 !important; /* Yellow on hover */
    }
    
    .hero-contact-cta {
        text-align: right !important; /* Changed from center to right */
    }
    
    .hero-contact-message {
        font-family: 'Inter', Arial, sans-serif !important;
        font-size: 0.9rem !important;
        font-weight: 400 !important;
        color: #e2e8f0 !important; /* Light gray */
        margin: 0 !important;
        line-height: 1.4 !important;
        font-style: italic !important;
    }
    
    /* Hide on mobile and tablet - only show on desktop */
    @media (max-width: 768px) {
        .hero-left-content {
            display: none !important;
        }
    }
    
    /* Right column - force videos to right side in 3 columns - ensure all 3 videos show */
    .hero .free-cards,
    .hero-center-wrapper .free-cards,
    section.hero .free-cards,
    .desktop-portrait-videos,
    .free-cards {
        flex: 0 0 50% !important; /* Fixed width for right side */
        max-width: 50% !important;
        display: flex !important;
        flex-direction: row !important;
        gap: 1rem !important;
        align-items: flex-start !important;
        justify-content: space-evenly !important;
        padding: 1rem 0 !important;
        position: absolute !important;
        right: -8% !important;
        top: 40% !important;
        transform: translateY(-50%) !important;
        width: 55% !important;
        height: auto !important;
        z-index: 20 !important;
        flex-wrap: nowrap !important;
    }
    
    /* Add H1 heading above videos using pseudo-element - Josefin Sans font like Cross Ports Experience */
    .hero .free-cards::before,
    .hero-center-wrapper .free-cards::before,
    section.hero .free-cards::before {
        display: none !important; /* Hide the pseudo-element */
    }
    
    /* Remove the after pseudo-element */
    .hero .free-cards::after,
    .hero-center-wrapper .free-cards::after,
    section.hero .free-cards::after {
        display: none !important; /* Hide the after pseudo-element */
    }
    
    /* Style the new colored heading */
    .hero-colored-title {
        position: absolute !important;
        top: 8% !important; /* Position much higher above the videos which are at 40% */
        right: -8% !important; /* Align with the videos horizontally */
        width: 55% !important; /* Match the width of the video container */
        transform: translateY(-50%) !important; /* Center vertically at the 8% position */
        text-align: center !important;
        font-size: 2rem !important;
        font-weight: 700 !important;
        z-index: 26 !important;
        background: rgba(0, 0, 0, 0.4) !important;
        padding: 0.75rem 1.5rem !important;
        border-radius: 25px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        display: block !important;
        font-family: 'Josefin Sans', 'Inter', Arial, sans-serif !important;
        margin: 0 !important;
    }
    
    /* Yellow text for "Underwater Hull Services" */
    .hero-colored-title .yellow-text {
        color: #FFD700 !important; /* Gold/Yellow */
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important;
    }
    
    /* Electric blue text for "Nigeria" */
    .hero-colored-title .blue-text {
        color: #00BFFF !important; /* Electric blue */
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important;
    }
    
    /* Hide on mobile - show on all larger screens */
    @media (max-width: 768px) {
        .hero-colored-title {
            display: none !important;
        }
    }
    
    /* Force all 3 video cards to display in 3 columns */
    .hero .free-card,
    .hero-center-wrapper .free-card,
    section.hero .free-card,
    .free-cards .free-card {
        width: 30% !important;
        max-width: none !important;
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        margin-bottom: 0 !important;
        position: relative !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Ensure video containers are visible */
    .hero .free-card-video-container,
    .hero-center-wrapper .free-card-video-container,
    section.hero .free-card-video-container,
    .free-cards .free-card-video-container {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Video container styling for 3-column layout - twice as high */
    .hero .free-card-video-container,
    .hero-center-wrapper .free-card-video-container,
    section.hero .free-card-video-container,
    .free-card-video-container {
        width: 100% !important;
        height: 360px !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
    }
    
    /* Hide original H1 heading since we're using pseudo-element above videos */
    .hero .hero-content h1,
    section.hero .hero-content h1,
    .hero-center-wrapper .hero-content h1,
    .hero-title.desktop-portrait-title {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* Add welcome message placeholder */
    .hero-content::after {
        content: "Welcome to our marine services. Professional underwater solutions for your vessel. Expert diving services, hull cleaning, and marine maintenance." !important;
        display: block !important;
        font-size: 1.2rem !important;
        line-height: 1.6 !important;
        color: #ffffff !important;
        background: rgba(0, 0, 0, 0.4) !important;
        padding: 1.5rem !important;
        border-radius: 12px !important;
        margin-top: 1rem !important;
        text-shadow: 0 2px 4px rgba(0,0,0,0.8) !important;
        border-left: 4px solid #00bcd4 !important;
    }
    
    /* Show and style video stats for 3-column layout */
    .hero .video-stats,
    .hero-center-wrapper .video-stats,
    section.hero .video-stats,
    .free-cards .video-stats {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        margin-top: 0.5rem !important;
        background: rgba(0, 0, 0, 0.7) !important;
        border-radius: 6px !important;
        padding: 0.5rem !important;
        width: 100% !important;
        max-width: none !important;
        backdrop-filter: blur(5px) !important;
    }
    
    .video-stat-number {
        color: #ffff00 !important;
        font-size: 1.4rem !important;
        font-weight: 700 !important;
        margin-bottom: 0.3rem !important;
        text-shadow: 0 2px 4px rgba(0,0,0,0.8) !important;
    }
    
    .video-stat-label {
        color: #00bcd4 !important;
        font-size: 0.9rem !important;
        font-weight: 600 !important;
        text-shadow: 0 2px 4px rgba(0,0,0,0.8) !important;
    }
    
    /* Hide the horizontal statistics bar on desktop */
    .free-cards > div[style*="width: 100vw"],
    .free-cards > div[style*="background: rgba(0, 0, 0, 0.4)"],
    .desktop-portrait-videos > div[style*="width: 100vw"] {
        display: none !important;
    }
    
    /* Keep explore services button in left column */
    .hero-content .cta-button,
    .hero-content .explore-services-btn {
        margin-top: 2rem !important;
    }
}

/* Intermediate Desktop Range - optimized for tablets and smaller laptops */
@media (min-width: 768px) and (max-width: 1279px) {
    .free-card-video-container {
        width: 220px !important;
        height: 330px !important; /* Better proportion for tablets - not too stretched */
    }

    /* Higher specificity overrides to ensure these rules take precedence */
    .hero .free-card-video-container,
    .hero-center-wrapper .free-card-video-container,
    section .free-card-video-container {
        width: 220px !important;
        height: 330px !important; /* Better proportion for tablets */
        max-width: 220px !important;
    }
    
    /* Override any grid or flex sizing */
    .hero .free-cards,
    .hero-center-wrapper .free-cards,
    section .free-cards,
    .free-cards {
        display: flex !important;
        flex-direction: row !important;
        gap: 1rem !important; /* Reduced gap for iPad */
        justify-content: center !important;
        max-width: 720px !important; /* Constrain for iPad portrait */
        margin: 0 auto !important;
        flex-wrap: nowrap !important;
        padding-bottom: 2rem !important; /* Add bottom padding to prevent content cutoff */
    }
    
    .hero .free-card,
    .hero-center-wrapper .free-card,
    section .free-card,
    .free-card {
        width: 280px !important;
        max-width: 280px !important;
        flex: 0 0 280px !important;
    }
    
    /* Ensure videos maintain proper aspect ratio */
    .free-card-video {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    
    /* Fix video stats */
    .video-stats {
        width: 100% !important;
        margin-top: 0.5rem !important;
        padding: 0.5rem !important;
        background: rgba(0, 0, 0, 0.8) !important;
        border-radius: 6px !important;
        text-align: center !important;
    }
    
    .video-stat-number {
        font-size: 1.2rem !important;
        color: #ffff00 !important;
        font-weight: 700 !important;
    }
    
    .video-stat-label {
        font-size: 0.8rem !important;
        color: #00bcd4 !important;
        font-weight: 600 !important;
    }
}

/* Standard laptop screens (14-20 inch) - consistent display across all common laptop sizes */
@media screen and (min-width: 768px) and (max-width: 2560px) {
    /* Pull hero content up closer to navbar for normal size screens */
    .hero-center-wrapper {
        justify-content: flex-start !important; /* Override inline center to move content up */
        padding-top: 60px !important; /* Reduced from 95px to 60px to move content higher */
        padding-bottom: 2rem !important; /* Add bottom padding to prevent overlap */
    }
    
    /* Hide video stats on desktop - they should only show on mobile */
    .video-stats {
        display: none !important;
    }
    
    /* Adjust hero background position for all laptop sizes */
    .hero,
    section.hero {
        background: url('assets/images/BackgroundDiver3.jpg') center center / cover no-repeat !important; /* Use cover for proper stretching */
        background-size: cover !important;
        background-position: center center !important; /* Center the background */
        background-repeat: no-repeat !important;
        position: relative !important; /* Ensure hero section is positioned relatively for absolute children */
    }
    
    .hero-slide {
        background-position: center center !important; /* Center the background */
        background-size: cover !important; /* Use cover for proper stretching */
        background-repeat: no-repeat !important;
    }
    
    .hero .free-cards,
    .hero-center-wrapper .free-cards,
    section .free-cards,
    .free-cards {
        display: flex !important; /* Use flexbox instead of grid for better spacing */
        flex-direction: row !important;
        gap: 3rem !important; /* Increased gap for better spacing */
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 1300px !important; /* Increased container width for better spacing */
        margin: 0 auto !important; /* Center the container */
        padding: 0 2rem !important; /* Container padding */
        flex-wrap: nowrap !important;
    }
    
    .hero .free-card,
    .hero-center-wrapper .free-card,
    section .free-card,
    .free-card {
        width: 265px !important; /* Reduced by 1/3: 398px - 133px = 265px */
        max-width: 265px !important; /* Set max-width to prevent overflow */
        margin: 0 !important; /* Remove auto margin */
        border: 2px solid transparent !important; /* Add visual separation */
        border-radius: 16px !important; /* Slightly smaller border radius for smaller cards */
        flex: 0 0 265px !important; /* Prevent flex grow/shrink */
    }
    
    /* Enhanced video stats for desktop */
    .video-stats {
        width: 100% !important;
        margin-top: 0.5rem !important;
        padding: 0.8rem 0.5rem !important;
        background: rgba(0, 0, 0, 0.85) !important; /* Strong background */
        border-radius: 8px !important;
        text-align: center !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    }
    
    .video-stat-number {
        font-size: 1.4rem !important;
        color: #ffff00 !important;
        font-weight: 700 !important;
        margin-bottom: 0.2rem !important;
        text-shadow: 0 2px 4px rgba(0,0,0,0.8) !important;
    }
    
    .video-stat-label {
        font-size: 0.9rem !important;
        color: #00bcd4 !important;
        font-weight: 600 !important;
        text-shadow: 0 2px 4px rgba(0,0,0,0.8) !important;
    }
    
    .hero .free-card-video-container,
    .hero-center-wrapper .free-card-video-container,
    section .free-card-video-container,
    .free-card-video-container {
        width: 265px !important; /* Reduced by 1/3: 398px - 133px = 265px */
        max-width: none !important; /* Remove max-width constraint */
        height: 333px !important; /* Reduced by 1/3: 500px - 167px = 333px */
    }
}

/* Larger screens (15+ inches) - refined 90% scale for better proportions */
@media screen and (min-width: 768px) and (max-width: 2560px) {
    .hero .free-cards,
    .hero-center-wrapper .free-cards,
    section .free-cards,
    .free-cards {
        display: flex !important; /* Use flexbox for consistent spacing */
        flex-direction: row !important;
        gap: 3rem !important; /* Consistent with other desktop ranges */
        justify-content: center !important;
        align-items: center !important;
        max-width: 1200px !important; /* Moderate container size */
        margin: 0 auto !important;
        flex-wrap: nowrap !important;
    }
    
    .hero .free-card,
    .hero-center-wrapper .free-card,
    section .free-card,
    .free-card {
        width: 240px !important; /* 10% smaller for refined look */
        max-width: 240px !important;
        border-radius: 14px !important; /* Proportionally smaller */
        flex: 0 0 240px !important; /* Prevent flex grow/shrink */
    }
    
    .hero .free-card-video-container,
    .hero-center-wrapper .free-card-video-container,
    section .free-card-video-container,
    .free-card-video-container {
        width: 240px !important; /* 10% smaller */
        height: 300px !important; /* 10% smaller: 333px × 0.9 = 300px */
    }
    
    /* Refined video stats for larger screens */
    .video-stats {
        width: 100% !important;
        margin-top: 0.4rem !important; /* Slightly reduced margin */
        padding: 0.65rem 0.45rem !important; /* Slightly reduced padding */
        background: rgba(0, 0, 0, 0.85) !important; /* Strong background */
        border-radius: 8px !important;
        text-align: center !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    
    .video-stat-number {
        font-size: 1.2rem !important; /* Slightly smaller: 1.3rem × 0.9 ≈ 1.2rem */
        margin-bottom: 0.15rem !important;
        color: #ffff00 !important; /* Yellow for visibility */
        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;
    }
    
    .video-stat-label {
        font-size: 0.75rem !important; /* Slightly smaller: 0.8rem × 0.9 ≈ 0.75rem */
        color: #00bcd4 !important; /* Electric blue */
        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;
    }
    
    /* Adjust hero title size for better proportions */
    .hero-title {
        font-size: 2.8rem !important; /* Slightly smaller for refined look */
        margin-bottom: 1.3rem !important;
    }
    
    /* Refined CTA button */
    .hero-center-wrapper .primary-button {
        padding: 0.9rem 1.6rem !important; /* Slightly smaller padding */
        font-size: 1rem !important; /* Slightly smaller font */
        margin-top: 2.2rem !important; /* Adjusted spacing */
    }
}

/* Surface Pro specific adjustments to ensure proper video alignment */
/* iPad Portrait Mode (768px) - constrain content width to prevent overflow */
@media screen and (min-width: 768px) and (max-width: 768px) and (orientation: portrait) {
    .hero-center-wrapper {
        max-width: 720px !important; /* Constrain to fit within 768px viewport with padding */
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .free-cards {
        max-width: 720px !important; /* Match hero-center-wrapper constraint */
        gap: 1rem !important; /* Reduce gap for better fit */
    }

    .free-card {
        width: 220px !important; /* Smaller cards for iPad portrait */
        max-width: 220px !important;
        flex: 0 0 220px !important;
    }

    .free-card-video-container {
        width: 220px !important;
        height: 400px !important; /* Shorter videos for portrait mode */
        max-width: 220px !important;
    }

    .hero-content h1 {
        font-size: 2.5rem !important; /* Slightly smaller for iPad portrait */
    }

    .hero-content p {
        max-width: 680px !important; /* Constrain text width to fit within 720px container */
        font-size: 1.1rem !important; /* Slightly smaller text */
    }
}

/* Surface Pro Portrait: 1824x2736 */
@media screen and (min-width: 768px) and (max-width: 1900px) and (orientation: portrait) {
    /* Drastically reduce hero section height */
    .hero {
        height: 70vh !important; /* Increased from 50vh to 70vh for better content fit */
        min-height: 70vh !important;
        max-height: 70vh !important;
        overflow: hidden !important;
        margin-bottom: 0 !important; /* Remove margin to eliminate white space */
    }
    
    .hero-center-wrapper {
        padding: 1rem !important; /* Minimal padding */
        padding-top: 80px !important; /* Add top padding to position content higher */
        justify-content: flex-start !important; /* Start from top instead of center */
        align-items: center !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important; /* Controlled spacing between elements */
    }
    
    .hero-title {
        font-size: 2.2rem !important; /* Smaller title for compact layout */
        margin-bottom: 0.5rem !important; /* Minimal margin */
        line-height: 1.1 !important;
        text-align: center !important;
    }
    
    .free-cards {
        display: grid !important;
        grid-template-columns: repeat(3, 240px) !important; /* Smaller videos */
        gap: 1rem !important; /* Tighter gap */
        justify-content: center !important;
        align-items: start !important;
        margin: 0 auto !important;
        max-width: 800px !important; /* Smaller container */
    }
    
    .free-card {
        width: 240px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    
    .free-card-video-container {
        width: 240px !important;
        height: 280px !important; /* Much smaller video height */
    }
    
    /* Properly formatted video stats */
    .video-stats {
        width: 100% !important;
        margin-top: 0.25rem !important; /* Minimal spacing */
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        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 */
        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 */
        font-weight: 700 !important;
        color: #ffff00 !important; /* Yellow numbers */
        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 */
        font-weight: 600 !important;
        color: #00bcd4 !important; /* Electric blue */
        line-height: 1.1 !important;
        text-shadow: 0 2px 4px rgba(0,0,0,0.9) !important; /* Stronger shadow */
    }
    
    /* Center the Explore Services 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;
        border-radius: 25px !important;
        background: linear-gradient(135deg, #00bcd4, #0097a7) !important;
        color: white !important;
        text-decoration: none !important;
        text-align: center !important; /* Center text */
        position: relative !important;
        z-index: 1100 !important; /* Much higher than seabed tile */
        align-self: center !important; /* Flex child alignment */
    }
}

/* Surface Pro Landscape: 2736x1824 */
@media screen and (min-width: 768px) and (max-width: 2800px) and (orientation: landscape) {
    .hero-center-wrapper {
        padding-top: 100px !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    .free-cards {
        display: grid !important;
        grid-template-columns: repeat(3, 350px) !important;
        gap: 2.5rem !important;
        justify-content: center !important;
        align-items: start !important;
        margin: 0 auto !important;
        max-width: 1400px !important;
    }
    
    .free-card {
        width: 350px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    
    .free-card-video-container {
        width: 350px !important;
        height: 450px !important;
    }
    
    .video-stats {
        width: 100% !important;
        margin-top: 1rem !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .hero-title {
        font-size: 4.5rem !important;
        margin-bottom: 2.5rem !important;
    }
}

.free-card {
    background: transparent;
    box-shadow: none;
    padding: 0;
    max-width: 320px; /* Increased from 240px to 320px for wider videos */
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.free-card-video-container {
    position: relative;
    width: 100%;
    height: 380px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
    border-radius: 24px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}

.free-card-video-container img,
.free-card-video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 24px;
    display: block;
    background: #e5e7eb;
}
.free-card-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 24px;
    display: block;
}
.free-card-title-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(0deg, rgba(0,0,0,0.7) 60%, rgba(0,0,0,0.1) 100%, transparent 100%);
    color: #ffffff !important;
    font-size: 1.25rem;
    font-weight: 600;
    padding: 1.1rem 1rem 0.8rem 1rem;
    text-align: center;
    letter-spacing: 0.5px;
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
    pointer-events: none;
}

/* Video overlay typography: use Josefin Sans for titles over videos */
.free-card-title-overlay,
.free-card .free-card-title-overlay {
  font-family: 'Josefin Sans', 'Inter', Arial, sans-serif !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  letter-spacing: 0.2px !important;
  text-transform: none !important;
}

/* Left align text in services section */
.services-container h2,
.services-grid,
.services-card-content,
.services-card-footer {
    text-align: left !important;
}
/* Base Styles */
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap');

:root {
    --marine-primary: #0a4b78;
    --marine-secondary: #1a6ea8;
    --marine-light: #d0e8f2;
    --steel-grey: #64748b;
    --navy-blue: #183a65;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --alkaline: #7ED957; /* alkaline green for video overlay text */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    color: var(--gray-800);
    background-color: #ffffff;
    line-height: 1.5;
    margin: 0 !important;
    padding: 0 !important;
}

main {
    margin: 0 !important;
    padding: 0 !important;
}

nav {
    margin: 0 !important;
    padding: 0 !important;
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease-in-out;
}

button {
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

img {
    max-width: 100%;
    height: auto;
}

/* Navigation */
nav {
    position: fixed;
    top: 1.5rem;
    left: 0;
    right: 0;
    z-index: 50;
    padding: 0 1rem;
}

@media (min-width: 768px) {
    nav {
        padding: 0 3rem;
    }
}

.navbar-container {
    max-width: 1280px;
    margin: 0 auto;
    background-color: rgba(24, 58, 101, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 2rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.navbar-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1.5rem;
}

.navbar-logo {
    display: flex;
    align-items: center;
}

.global-operations {
    display: none;
    align-items: center;
    margin-left: 1.5rem;
    font-size: 0.875rem;
    color: white;
}

.global-operations img {
    margin-right: 0.5rem;
    border-radius: 0.125rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

@media (min-width: 768px) {
    .global-operations {
        display: flex;
    }
}

.navbar-links {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.nav-link {
    display: flex;
    align-items: center;
    color: white;
}

.nav-link:hover {
    color: rgba(229, 231, 235, 1);
}

/* Phone number specific styling */
.nav-link[href^="tel:"] {
    color: #ffff00 !important;
    font-weight: bold;
}

.nav-link[href^="tel:"]:hover {
    color: #ffff66 !important;
}

/* Email address specific styling */
.nav-link[href^="mailto:"] {
    color: #ffff00 !important;
    font-weight: bold;
}

.nav-link[href^="mailto:"]:hover {
    color: #ffff66 !important;
}

/* WhatsApp link specific styling */
.whatsapp-link {
    color: #25d366 !important; /* WhatsApp green */
    font-weight: bold;
}

.whatsapp-link:hover {
    color: #128c7e !important; /* Darker WhatsApp green on hover */
}

.whatsapp-icon {
    color: #25d366 !important; /* WhatsApp green for icon */
}

.whatsapp-text {
    display: inline-block !important; /* Always show WhatsApp text, never hide */
}

/* Floating WhatsApp Icon */
.floating-whatsapp {
    position: fixed;
    bottom: 30px;
    left: 30px;
    z-index: 9999; /* Much higher z-index to ensure it's always on top */
    transition: transform 0.3s ease;
    animation: blinkWhatsApp 2s infinite; /* Add blinking animation back */
}

/* Blinking animation for WhatsApp icon */
@keyframes blinkWhatsApp {
    0%, 50% {
        opacity: 1;
    }
    51%, 100% {
        opacity: 0.3;
    }
}

.floating-whatsapp a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 135px; /* Tripled size: 45px × 3 = 135px */
    height: 135px; /* Tripled size: 45px × 3 = 135px */
    background-color: rgba(37, 211, 102, 0.1); /* Semi-transparent WhatsApp green background */
    border-radius: 50%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); /* Subtle shadow for depth */
    transition: all 0.3s ease;
    text-decoration: none;
}

.floating-whatsapp img {
    width: 144px; /* Keep width the same */
    height: 96px; /* Reduced height by 1/3: 144px - 48px = 96px */
    border-radius: 50%; /* Make it circular like a typical WhatsApp button */
}

/* Mobile adjustments for floating WhatsApp */
@media (max-width: 768px) {
    .floating-whatsapp {
        bottom: 15px; /* Move down from 30px to 15px on mobile */
    }
    
    .floating-whatsapp a {
        width: 67.5px !important; /* Half size: 135px ÷ 2 = 67.5px */
        height: 67.5px !important; /* Half size: 135px ÷ 2 = 67.5px */
    }
    
    .floating-whatsapp img {
        width: 72px !important; /* Keep width the same */
        height: 48px !important; /* Reduced height by 1/3: 72px - 24px = 48px */
    }
}

.icon {
    width: 1rem;
    height: 1rem;
    margin-right: 0.5rem;
}

.hide-mobile {
    display: none;
}

@media (min-width: 768px) {
    .hide-mobile {
        display: inline-block;
    }
}

/* Hero Section */
.hero {
    position: relative;
    min-height: 600px;
    height: 100vh;
    overflow: hidden;
    z-index: 1; /* Back to original value */
    margin-top: 0 !important;
    margin-bottom: 0 !important; /* Ensure no bottom margin */
    padding-top: 0 !important;
    padding-bottom: 0; /* No padding at bottom */
    background: url('assets/images/BackgroundDiver3.jpg') center center / cover no-repeat !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    border: none !important; /* Remove any border */
    outline: none !important; /* Remove any outline */
    box-shadow: none !important; /* Remove any box shadow */
}

/* Hero section bottom separator */
.hero-bottom-separator {
    width: 100vw;
    height: 200px; /* Increased height to match the enlarged pattern */
    background-image: url('assets/images/divSeperatorDarkBlue.png');
    background-repeat: repeat-x;
    background-size: auto 200px; /* Doubled from 100px to 200px */
    background-position: left center;
    background-position: left center;
    position: absolute;
    bottom: 0; /* At the very bottom of hero section */
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    padding: 0;
    z-index: 20; /* Higher than wavy shapes */
}

/* Ensure hero content appears above other elements */
.hero-center-wrapper {
    position: relative;
    z-index: 1100; /* Above sea floor tile and hero section */
}

.hero-content {
    z-index: 10; /* Above sea floor tile */
}

/* Reduce hero height on desktop to show certifications banner */
@media (min-width: 768px) {
    .hero {
        height: 85vh !important; /* Reduced from 100vh to 85vh to show certifications */
        min-height: 500px !important;
        margin-bottom: 0 !important; /* Remove margin to eliminate white space */
    }
}

/* Tablet and Small Desktop Responsive Design - Fill the gap between mobile and desktop */
@media (min-width: 481px) and (max-width: 767px) {
    .hero {
        height: 85vh !important;
        min-height: 400px !important;
    }
    
    .hero-center-wrapper {
        padding: 1.5rem 1rem !important;
    }
    
    .hero-title {
        font-size: 2.2rem !important;
        margin-bottom: 1.2rem !important;
    }
    
    .free-cards {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 1rem !important;
        max-width: 600px !important;
        margin: 0 auto !important;
    }
    
    .free-card {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    
    .free-card-video-container {
        width: 120px !important;
        height: 150px !important;
    }
    
    .free-card-video {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    
    .video-stats {
        width: 100% !important;
        margin-top: 0.3rem !important;
        padding: 0.3rem !important;
        background: rgba(0, 0, 0, 0.8) !important;
        border-radius: 4px !important;
        text-align: center !important;
    }
    
    .video-stat-number {
        font-size: 1rem !important;
        color: #ffff00 !important;
        font-weight: 700 !important;
    }
    
    .video-stat-label {
        font-size: 0.7rem !important;
        color: #00bcd4 !important;
        font-weight: 600 !important;
    }
    
    .primary-button {
        padding: 0.9rem 1.8rem !important;
        font-size: 1rem !important;
        margin-top: 1.5rem !important;
    }
}

/* Medium Tablet to Small Desktop */
@media (min-width: 769px) and (max-width: 1023px) {
    .hero {
        height: 90vh !important;
        min-height: 450px !important;
    }
    
    .hero-center-wrapper {
        padding: 2rem 1rem !important;
    }
    
    .hero-title {
        font-size: 2.5rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    .free-cards {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 1.5rem !important;
        max-width: 750px !important;
        margin: 0 auto !important;
    }
    
    .free-card {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    
    .free-card-video-container {
        width: 160px !important;
        height: 200px !important;
    }
    
    .free-card-video {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    
    .video-stats {
        width: 100% !important;
        margin-top: 0.5rem !important;
        padding: 0.5rem !important;
        background: rgba(0, 0, 0, 0.8) !important;
        border-radius: 6px !important;
        text-align: center !important;
    }
    
    .video-stat-number {
        font-size: 1.1rem !important;
        color: #ffff00 !important;
        font-weight: 700 !important;
    }
    
    .video-stat-label {
        font-size: 0.8rem !important;
        color: #00bcd4 !important;
        font-weight: 600 !important;
    }
    
    .primary-button {
        padding: 1rem 2rem !important;
        font-size: 1.1rem !important;
        margin-top: 2rem !important;
    }
}

/* Common styling for all tablet sizes */
@media (min-width: 481px) and (max-width: 1023px) {
    /* Navigation adjustments for tablet */
    .navbar-container {
        padding: 0 2rem !important;
    }
    
    /* Statistics section for tablet */
    .statistics-content {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 2rem !important;
    }
    
    /* Services section for tablet */
    .services-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 2rem !important;
    }
    
    /* Certifications for tablet */
    .certifications-logos {
        justify-content: center !important;
        gap: 2rem !important;
    }
    
    .certification-logo {
        width: 110px !important;
        height: 70px !important;
    }
}


.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    color: #fff;
    text-shadow: 0 2px 12px rgba(0,0,0,0.8), 0 1px 0 #000;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    pointer-events: none;
}

.hero-content h1 {
    font-size: 3rem;
    font-weight: 700;
    color: white;
    margin-bottom: 1.5rem;
    margin-top: 0;
    line-height: 1.2;
    font-family: 'Inter', Arial, sans-serif;
    pointer-events: auto;
}

.hero-content p {
    font-size: 1.25rem;
    color: white;
    max-width: 42rem;
    margin-bottom: 1rem;
}



.primary-button {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #00bcd4, #0097a7);
    color: white;
    font-weight: 600;
    padding: 1rem 1.5rem;
    border-radius: 25px;
    border: none;
    transition: all 0.3s ease;
    margin-top: 0;
    pointer-events: auto;
    gap: 8px;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    z-index: 1000 !important; /* Much higher z-index to ensure it's above seabed tile */
}

/* Ensure button is always visible on desktop */
@media (min-width: 769px) {
    .hero-center-wrapper .primary-button {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 1100 !important; /* Much higher than seabed tile */
        margin-top: 2.5rem !important;
        align-self: center !important;
    }
}

.primary-button:hover {
    background: linear-gradient(135deg, #0097a7, #00838f);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 188, 212, 0.3);
}

.primary-button .icon {
    margin-left: 0.5rem;
}

/* Statistics Section */
.statistics {
    padding: 2rem 0 4rem 0;
    background: url('assets/images/Barge.jpg') center center/cover no-repeat;
    background-attachment: fixed;
    position: relative;
    z-index: 1;
}

/* .statistics-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 75, 120, 0.425);
    z-index: 1;
    pointer-events: none;
} */

.statistics-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 2;
}

.statistics-header {
    text-align: center;
    margin-bottom: 3rem;
    padding-top: 0.5rem; /* Reduced padding to move heading closer to top */
    position: relative;
}

.statistics-header h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    position: relative;
    z-index: 1;
}

/* Heading Icons */
.heading-icon {
    color: #4FC3F7 !important;
    background: linear-gradient(135deg, #4FC3F7, #29B6F6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    flex-shrink: 0;
}

.statistics-content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    flex-wrap: wrap;
    position: relative;
    padding: 2rem;
}

/* For larger screens (14 inches and above) - FORCE horizontal layout */
@media (min-width: 768px) {
    /* Force barge background instead of marine background */
    .statistics {
        background: url('assets/images/Barge.jpg') center center/cover no-repeat !important;
        background-attachment: fixed !important;
    }
    
    /* Force the container to be horizontal */
    .statistics .statistics-content {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-evenly !important;
        align-items: stretch !important;
        gap: 2rem !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        max-width: none !important;
    }
    
    /* Force each stat item to take 1/3 width */
    .statistics .statistics-content .stat-item {
        flex: 0 0 calc(33.333% - 1.5rem) !important;
        width: calc(33.333% - 1.5rem) !important;
        max-width: calc(33.333% - 1.5rem) !important;
        min-width: auto !important;
        padding: 2rem 1rem !important;
        background: rgba(0, 0, 0, 0.8) !important;
        border-radius: 12px !important;
        border: 2px solid rgba(255, 255, 255, 0.1) !important;
        display: block !important;
        text-align: center !important;
        margin: 0 !important;
    }
    
    /* Remove the background overlay that might interfere */
    .statistics .statistics-content::before {
        display: none !important;
    }
}

/* Semi-transparent background behind all statistics */
.statistics-content::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 15px;
    z-index: -1;
}

.stat-item {
    text-align: center;
    color: white;
    flex: 1;
    min-width: 200px;
    max-width: 300px;
}

.stat-number {
    font-size: 4rem;
    font-weight: 700;
    color: #ffff00;
    margin-bottom: 0.5rem;
    font-family: 'Inter', Arial, sans-serif;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.stat-label {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stat-description {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.5;
    max-width: 300px;
    margin: 0 auto;
}

/* Mobile responsive for statistics */
@media (max-width: 768px) {
    .statistics {
        padding: 3rem 0;
    }
    
    .statistics-container {
        padding: 0 1rem;
    }
    
    .statistics-header {
        margin-bottom: 2rem;
    }
    
    .statistics-header h2 {
        font-size: 1.8rem;
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .heading-icon {
        width: 24px !important;
        height: 24px !important;
    }
    
    .statistics-content {
        flex-direction: column;
        gap: 2.5rem;
    }
    
    .stat-item {
        min-width: auto;
        max-width: 100%;
    }
    
    .stat-number {
        font-size: 3rem;
    }
    
    .stat-label {
        font-size: 1.25rem;
    }
    
    .stat-description {
        font-size: 0.95rem;
    }
}

/* Service Menu */
.service-menu {
    position: relative;
    z-index: 1; /* Same as statistics section */
    margin-top: -2rem;
    padding: 4rem 0; /* Same padding as statistics section */
    display: flex;
    justify-content: center;
    background: none; /* Use marine background container instead */
    overflow: visible;
}

/* .service-menu-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 75, 120, 0.425);
    z-index: 1;
    pointer-events: none;
} */
.service-menu > * {
    position: relative;
    z-index: 2;
}

.service-menu-container {
    max-width: 80rem;
    margin: -2rem auto 0 auto; /* Negative top margin moves it up */
    padding: 0 1rem;
    background: transparent; /* Keep transparent so .service-menu background shows */
    position: relative;
    z-index: 51; /* Higher than .service-menu and hero */
    
}

.service-menu-items {
    background: #ebebeb;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    padding: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    border-radius: 1.2rem; /* Add this for rounded corners */
    /* Remove or comment out the clip-path line below */
    /* clip-path: polygon(8% 0, 92% 0, 100% 25%, 100% 75%, 92% 100%, 8% 100%, 0 75%, 0 25%); */
}

.service-menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem;
    cursor: pointer;
    transition: background-color 0.3s;
}

.service-menu-item:hover {
    background-color: var(--gray-50);
}

.service-icon-container {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
}

.marine-bg {
    background-color: var(--marine-light);
}

.gray-bg {
    background-color: var(--gray-200);
}

.service-icon {
    width: 1.75rem;
    height: 1.75rem;
}

.marine-bg .service-icon {
    color: var(--marine-primary);
}

.gray-bg .service-icon {
    color: var(--gray-600);
}

.service-menu-item span {
    font-size: 0.875rem;
    font-weight: 700; /* Change font-weight to bold */
    color: var(--gray-800);
}

/* Services Section */
.services {
    padding: 2rem 0 100px 0; /* Reduced top padding from 8rem to 2rem to bring content closer to top */
    background-image: url('assets/images/marinebackground.png') !important;
    background-size: 280px 280px !important;
    background-position: top left !important;
    background-repeat: repeat !important; /* Tile the image like other sections */
    position: relative;
    overflow: hidden; /* Contain separator within section */
}

/* Add extra top margin to services section heading to avoid overlap with separator */
.services h2 {
    margin-top: 6rem; /* Increased from 4rem to 6rem for more space above heading */
}

/* Services section bottom separator - floating tile at bottom */
.services-bottom-separator {
    width: 100vw;
    height: 100px; /* Reduced by half: 200px / 2 = 100px */
    background: 
        url('assets/images/service-cards/divSeperator.png'),
        url('assets/images/marinebackground.png');
    background-repeat: repeat-x, repeat; /* Separator tiles horizontally, marine background tiles both ways */
    background-size: auto 100px, 280px 280px; /* Separator size, marine background tiles */
    background-position: left center, center center; /* Separator centered, marine background continues seamlessly */
    position: absolute;
    bottom: 0; /* Float at the very bottom inside services section */
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    padding: 0;
    z-index: 10;
}

.services-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
 
}

.services-content {
    width: 60%;              /* Match grid width */
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 0.5rem; /* Reduced from 3rem to 0.5rem to bring heading closer to top */
}

.services-content h2 {
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-size: 2.5rem; /* Increased from 1.6rem to match local-presence heading size */
    color: #ffffff; /* White text */
    text-align: center;
    margin-bottom: 2rem;
    font-weight: 700;
    width: 100%;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    letter-spacing: 0.01em;
    white-space: nowrap; /* Prevent line breaks */
}

.services-container h2 {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2rem;
    color: #ffffff; /* White text for marine background */
    width: 60%;
    max-width: 60%;
    display: block;
    position: relative;
    left: 0;
}

.services-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, auto);
    gap: 2rem;
    width: 60%;
    margin-left: auto;
    margin-right: auto;
}

/* Force 2-column grid layout on larger screens - STRONGEST OVERRIDE */
@media (min-width: 768px) {
    .services .services-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: repeat(3, auto) !important;
        gap: 2rem !important;
        flex-direction: unset !important;
        width: 60% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* Additional override for desktop and laptop screens */
@media (min-width: 769px) {
    .services .services-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        flex-direction: row !important;
        flex-wrap: unset !important;
    }
}

/* Ultra specific override to force grid layout */
@media (min-width: 900px) {
    .services-container .services-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        grid-template-rows: auto auto auto !important;
        gap: 2rem !important;
        align-items: start !important;
    }
}

@media (max-width: 900px) {
    .services-content,
    .services-grid {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    .services-content h2 {
        font-size: 2.2rem; /* Increased from 2rem to maintain larger size on tablets */
        white-space: nowrap; /* Prevent line breaks on tablets */
    }
    .services-grid {
        width: 100%;
        grid-template-columns: 1fr;
        grid-template-rows: none;
    }
    .services-container h2 {
        grid-column: 1 / -1;
        width: 100%;
        text-align: center;
    }
}

.service-card {
    position: relative;
    color: #fff; /* Make text white */
}

.service-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(19, 45, 78, 0.728); /* Semi-dark overlay for text readability */
    z-index: 1;
    pointer-events: none;
}

.service-card-content,
.service-card-footer {
    position: relative;
    z-index: 2;
    color: #fff; /* Ensure text is white */
}

.service-card h3,
.service-card p,
.service-link {
    color: #fff;
}

.service-card {
    background-color: rgba(255, 255, 255, 0.85); /* Restore proper opacity for readability */
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    transition: box-shadow 0.3s;
    background-size: cover;
    background-position: center;
}

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

.service-card:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.service-card-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.service-card-content .service-icon-container {
    margin-bottom: 1rem;
}

.service-card h3 {
    font-size: 1.25rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 0.75rem;
    color: white
}

.service-card p {
    text-align: center;
    color:white
}

.service-card-footer {
    padding: 0.75rem 1.5rem;
    background-color: transparent;
    display: flex;
    justify-content: center;
}

.service-link {
    color: #fff !important;
    font-weight: 500;
    display: flex;
    align-items: center;
}

.service-link:hover {
    color: var(--marine-secondary);
}

.icon-small {
    width: 1rem;
    height: 1rem;
    margin-left: 0.25rem;
}

/* CTA Section */
.cta {
    position: relative;
    padding: 4rem 2rem 4rem 2rem; /* Removed top padding to eliminate gap after services separator */
    margin-top: 0; /* Remove top margin to eliminate white space */
    margin-bottom: 0; /* Remove white space margin */
    background:
        url('assets/images/propeller.png'),
        linear-gradient(
            to bottom,
            rgb(140,252,255) 0%,
            rgb(83,220,254) 50%,
            rgb(48,166,230) 100%
        );
    background-size: auto 100%, 100% 100%;
    background-repeat: no-repeat, no-repeat;
    background-position: left top, center center; /* Moved propeller to top of section */
}

.cta::before,
.cta::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 2rem; /* Adjust height for the tile space */
    background: none; /* Remove duplicate marine background */
    z-index: 1;
}

.cta::before {
    top: -2rem; /* Position above the CTA section */
}

.cta::after {
    bottom: -2rem; /* Position below the CTA section */
}

.cta-container {
    background: url('assets/images/marinebackground.png');
    background-size: 280px 280px;
    background-repeat: repeat;
    background-position: center center;
    border-radius: 3rem; /* Pill shape */
    padding: 2.5rem 2rem;
    color: #fff;
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
    box-shadow: 0 8px 32px rgba(24, 58, 101, 0.15);
}

.cta-container h2,
.cta-container p,
.cta-container .cta-buttons {
    color: #fff;
    padding-bottom: 2rem;
}

.cta-container h2 {
    margin-bottom: 1.5rem;
}

.cta-buttons {
     display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    align-items: center;
}

.cta-buttons button {
 background-color: rgb(255, 255, 255);
    border-radius: 2rem;
    color: var(--navy-blue);
}

@media (min-width: 640px) {
    .cta-buttons {
        flex-direction: row;
    }
}

.secondary-button {
    background-color: white;
    color: var(--marine-primary);
    border: 1px solid var(--marine-primary);
    font-weight: 500;
    padding: 0.75rem 1.5rem;
    border-radius: 0.375rem;
    transition: background-color 0.3s;
}

.secondary-button:hover {
    background-color: rgba(255, 255, 255, 0.5);
}

.cta-white {
    background-color: #fff !important;
    color: var(--marine-primary) !important;
    border: 1px solid var(--marine-primary);
}

.cta-white:hover {
    background-color: rgba(75, 180, 255, 0.5) !important;
}

.cta-request-quote {
    background-color: #fff; /* White background */
    color: var(--marine-primary); /* Marine blue text */
    border: 1px solid var(--marine-primary);
}

.cta-request-quote:hover {
    background-color: rgb(231, 255, 75); /* Light blue hover effect */
    color: var(--marine-primary); /* Keep text color consistent */
    border: 1px solid var(--marine-primary); /* Keep border consistent */
}

/* Footer */
footer {
    background: url('assets/images/marinebackground.png') repeat !important; /* Restore marine background */
    background-size: 280px 280px !important;
    color: white;
    padding-top: 3rem;
    padding-bottom: 1.5rem;
    position: relative;
}

/* footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1;
} */

.footer-container {
    max-width: none; /* Remove max-width to allow full width */
    width: 100%; /* Full width to touch edges */
    margin: 0; /* Remove auto margins */
    padding: 2rem 0; /* Remove horizontal padding to touch edges */
    position: relative; /* Back to relative positioning */
    z-index: 2; /* Above the overlay */
    background: rgba(0, 0, 0, 0.4); /* Lighter semi-transparent background (40% opacity) */
    border-radius: 0; /* Remove rounded corners to touch edges */
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin: 0 auto 2rem auto; /* Center the content */
    max-width: 1280px; /* Limit content width while background is full width */
    padding: 0 1rem; /* Add horizontal padding for content spacing */
}

/* Center all footer content within the full-width background */
.footer-container > * {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
}

/* Force footer to display properly on larger screens - Override mobile styles */
@media (min-width: 768px) {
    footer .footer-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        display: grid !important; /* Force footer grid to show on tablet+ */
    }
    
    /* Ensure all footer elements are visible on tablet+ */
    footer .footer-column {
        display: block !important;
    }
    
    footer .footer-links {
        display: block !important;
    }
    
    footer .contact-info {
        display: block !important;
    }
    
    footer .social-links {
        display: flex !important;
    }
    
    /* Hide mobile accordion on tablet+ */
    footer .mobile-footer-accordion {
        display: none !important;
    }
}

@media (min-width: 768px) {
    footer .footer-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        display: grid !important; /* Force footer grid to show on desktop */
    }
    
    /* Force all footer content to be visible on desktop */
    footer .footer-column {
        display: block !important;
    }
    
    footer .footer-logo {
        display: block !important;
    }
    
    footer .footer-links {
        display: block !important;
        list-style: none !important;
    }
    
    footer .contact-info {
        display: block !important;
        list-style: none !important;
    }
    
    footer .social-links {
        display: flex !important;
        gap: 1rem !important;
    }
    
    footer .footer-bottom {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        flex-wrap: wrap !important;
    }
    
    footer .footer-legal {
        display: flex !important;
        flex-direction: row !important;
        gap: 1.5rem !important;
        align-items: center !important;
    }
    
    footer .copyright {
        margin-bottom: 0 !important;
    }
}

.footer-logo {
    margin-bottom: 1rem;
}

.footer-column p {
    color: var(--gray-300);
    margin-bottom: 1rem;
}

.social-links {
    display: flex;
    gap: 1rem;
}

.social-link {
    color: var(--gray-300);
}

.social-link:hover {
    color: white;
}

.social-icon {
    width: 1.25rem;
    height: 1.25rem;
}

.footer-column h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.footer-links {
    list-style: none;
}

.footer-links li {
    margin-bottom: 0.5rem;
}

.footer-links a {
    color: var(--gray-300);
}

.footer-links a:hover {
    color: white;
}

.contact-info {
    list-style: none;
}

.contact-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.contact-icon {
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    margin-top: 0.25rem;
    color: var(--marine-secondary);
}

.contact-item span {
    color: var(--gray-300);
}

.footer-bottom {
    border-top: 1px solid var(--gray-700);
    padding-top: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

@media (min-width: 768px) {
    .footer-bottom {
        flex-direction: row;
    }
}

.copyright {
    font-size: 0.875rem;
    color: var(--gray-400);
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .copyright {
        margin-bottom: 0;
    }
}

.footer-legal {
    display: flex;
    gap: 1.5rem;
}

.footer-legal a {
    font-size: 0.875rem;
    color: var(--gray-400);
}

.footer-legal a:hover {
    color: white;
}

/* Mobile Responsive Design */
@media (max-width: 768px) {
    /* Hero section adjustments for mobile */
    .hero {
        min-height: 100vh;
        height: 100vh;
    }
    
    .hero-slide {
        background-position: left center; /* Show left side of image instead of center */
        background-size: cover;
    }
    
    /* Nav adjustments for mobile */
    nav {
        top: 0.5rem;
    }
    
    .navbar-content {
        padding: 0.5rem 1rem;
    }
    
    .navbar-logo img {
        width: 140px;
        height: auto;
    }
    
    .global-operations {
        display: none;
    }
    
    .hide-mobile {
        display: none !important;
    }
    
    /* Hero content mobile layout */
    .hero-center-wrapper {
        padding: 0 1rem !important;
    }
    
    .hero-title {
        font-size: 2rem !important;
        margin-bottom: 1rem !important;
        line-height: 1.3 !important;
    }
    
    /* Mobile: Show only one video card (hull cleaning) */
    .free-cards {
        flex-direction: column;
        gap: 0;
        margin-bottom: 1.5rem;
    }
    
    .free-card:not(:first-child) {
        display: none; /* Hide all cards except the first one (hull cleaning) */
    }
    
    .free-card {
        max-width: 280px;
        width: 90%;
    }
    
    .free-card-video-container {
        height: 320px;
    }
    
    /* Button adjustments */
    .primary-button {
        padding: 0.75rem 1.25rem;
        font-size: 0.95rem;
        margin-top: 1.5rem !important;
    }
    
    /* Slider arrows for mobile */
    .hero-slider-arrow {
        width: 48px;
        height: 48px;
        z-index: 25;
    }
    
    .hero-slider-arrow-left {
        left: 1rem;
    }
    
    .hero-slider-arrow-right {
        right: 1rem;
    }
    
    .hero-slider-arrow svg {
        width: 24px;
        height: 24px;
    }
    
    /* Services section mobile */
    .services {
        padding: 2rem 0;
    }
    
    .services-content h2 {
        font-size: 2rem; /* Increased from 1.8rem to maintain larger size on mobile */
        margin-bottom: 1.5rem;
        padding: 0 1rem;
        white-space: nowrap; /* Prevent line breaks on mobile */
    }
    
    .services-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 0 1rem;
    }
    
    /* Service menu mobile */
    .service-menu-container {
        margin: -1.5rem auto 0 auto;
        padding: 0 0.5rem;
    }
    
    .service-menu-items {
        padding: 0.5rem;
        gap: 0.5rem;
        justify-content: space-around;
    }
    
    .service-menu-item {
        padding: 0.25rem;
        flex: 1;
        min-width: 0;
    }
    
    .service-menu-item span {
        font-size: 0.75rem;
        text-align: center;
    }
    
    .service-icon-container {
        width: 2.5rem;
        height: 2.5rem;
    }
    
    .service-icon {
        width: 1.25rem;
        height: 1.25rem;
    }
    
    /* CTA section mobile */
    .cta {
        padding: 2rem 1rem;
    }
    
    .cta-container {
        padding: 2rem 1.5rem;
        max-width: 100%;
    }
    
    .cta-container h2 {
        font-size: 1.5rem;
    }
    
    .cta-buttons {
        flex-direction: column;
        gap: 1rem;
    }
    
    /* Footer mobile */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }

    /* Certifications section mobile */
    .certifications {
        padding-top: 2rem; /* Reduced by half: 4rem / 2 = 2rem */
    }

    .certifications-container {
        padding: 0 1rem;
    }

    .certifications-text {
        text-align: center;
        margin-bottom: 1.5rem;
    }

    .certification-carousel {
        margin-top: 1rem;
        padding: 0.8rem 0;
    }

    .carousel-badge {
        font-size: 0.75rem;
        padding: 0.4rem 0.8rem;
        min-height: 2rem;
    }

    /* Statistics section mobile */
    .statistics {
        padding-top: 4rem; /* Reduced from 8rem */
    }

    .statistics-container {
        padding: 0 1rem;
    }

    .statistics-content {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }

    .stat-item {
        margin-bottom: 2rem;
    }

    .stat-number {
        font-size: 2.5rem;
    }

    .stat-label {
        font-size: 1rem;
    }

    .stat-description {
        font-size: 0.9rem;
    }

    /* Local presence section mobile */
    .local-presence {
        padding-top: 4rem; /* Reduced from 8rem */
        background-size: 280px 280px; /* Standardized marine background tiles */
    }

    .local-presence-container {
        padding: 0 1rem;
    }

    .local-presence-content {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }

    .presence-highlights {
        margin-top: 1.5rem;
    }

    .highlight-item {
        flex-direction: column;
        text-align: center;
        margin-bottom: 1.5rem;
    }

    .highlight-icon {
        margin-bottom: 0.75rem;
    }

    /* Section headings mobile */
    .statistics-header h2,
    .local-presence h2,
    .local-presence-text h2,
    .services-content h2 {
        font-size: 1.8rem !important;
        margin: 1.5rem auto 1.5rem auto !important; /* Reduced top margin from 3rem to 1.5rem */
        padding: 0.25rem 0.75rem !important;
        text-align: center !important;
        white-space: normal !important; /* Allow line breaks on mobile if needed */
    }

    /* Division separators mobile - smaller on mobile */
    .certifications-bottom-separator,
    .local-presence-bottom-separator,
    .services-bottom-separator {
        height: 90px; /* 1.5x larger than original mobile height */
        background-size: auto 90px, 280px 280px; /* 1.5x separator size, standardized marine background tiles */
        bottom: -90px;
    }

    /* Marine background container mobile */
    .marine-background-container {
        background-size: 280px 280px; /* Standardized tiling size */
    }

    /* Prevent horizontal overflow on mobile */
    body {
        overflow-x: hidden;
    }

    /* Ensure all containers stay within viewport */
    .hero-content,
    .services-container,
    .cta-content,
    .footer-container,
    .certifications-container,
    .statistics-container,
    .local-presence-container {
        max-width: 100vw;
        overflow-x: hidden;
    }

    /* Make images responsive */
    img {
        max-width: 100%;
        height: auto;
    }

    /* Responsive text sizing */
    h1, h2, h3, h4, h5, h6 {
        word-wrap: break-word;
        hyphens: auto;
    }
}

/* Tablet Responsive Rules (769px - 1023px) */
@media (min-width: 769px) and (max-width: 1023px) {
    .hero-content {
        padding: 4rem 3rem;
    }

    .hero-content h1 {
        font-size: 3rem;
    }

    .nav-links {
        gap: 1.5rem;
    }

    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .statistics-content {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }

    .local-presence-main-content {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
        max-width: 1200px; /* Tablet-specific max-width */
        margin: 0 auto;
    }

    .local-presence-content {
        flex-direction: column;
        align-items: center;
        max-width: 1200px;
        margin: 0 auto;
    }

    .local-presence-container {
        padding: 0 30px; /* Better tablet padding */
    }

    .local-presence-map {
        height: 960px; /* Doubled tablet height to match content proportionally */
        margin: 0;
    }

    .certification-carousel {
        margin-top: 1.5rem;
    }

    .carousel-badge {
        font-size: 0.85rem;
        padding: 0.5rem 1rem;
    }

    /* Section headings tablet */
    .statistics-header h2,
    .local-presence h2,
    .local-presence-text h2 {
        font-size: 2.2rem !important;
        margin: 2rem auto 2rem auto !important; /* Reduced top margin from 4rem to 2rem */
        padding: 0.4rem 1.5rem !important; /* Better tablet padding */
        max-width: 85% !important; /* Better tablet width constraint */
    }

    /* Division separators tablet */
    .certifications-bottom-separator,
    .local-presence-bottom-separator,
    .services-bottom-separator {
        height: 120px; /* 1.5x larger than original tablet height */
        background-size: auto 120px, 250px 250px; /* 1.5x separator size, tablet marine background tiles */
        bottom: -120px;
    }

    /* Local presence background tablet */
    .local-presence {
        background-size: 280px 280px; /* Standardized marine background tiles */
    }

    /* Marine background container tablet */
    .marine-background-container {
        background-size: 250px 250px;
    }
}

.scrolled-nav {
    background-color: rgba(24, 58, 101, 0.65) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 2rem !important;
}

button.primary-button.cta-white {
    background-color: #fff !important;
    color: var(--marine-primary) !important;
    border: 1px solid var(--marine-primary);
}

button.primary-button.cta-white:hover {
    background-color: rgba(10, 75, 120, 0.05) !important;
}

/* Bubble styles */
.bubble {
    position: absolute;
    bottom: -60px; /* Start below the screen */
    background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 60%, rgba(255, 255, 255, 0.1) 100%);
    border-radius: 50%;
    animation: bubble-rise 6s ease-in infinite; /* Rise animation */
    z-index: 100; /* Ensure bubbles appear above other elements */
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); /* Shiny edge effect */
}

/* Bubble rise animation */
@keyframes bubble-rise {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(-100vh); /* Move upward off the screen */
        opacity: 0; /* Fade out */
    }
}

/* Local Presence Section */
.local-presence {
    padding: 100px 0; /* Increased from 80px for more breathing room */
    background: url('assets/images/marinebackground.png') center center/280px 280px repeat; /* Marine background */
    position: relative;
    color: #333; /* Changed from white to dark color for visibility */
}

/* .local-presence::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(10, 75, 120, 0.5);
    z-index: 1;
    pointer-events: none;
} */

.local-presence-container {
    max-width: 1400px; /* Increased from 1200px for more breathing room */
    margin: 0 auto;
    padding: 0 40px; /* Increased from 20px for better spacing */
    position: relative;
    z-index: 2;
}

.local-presence-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
}

.local-presence-text h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 2rem auto 3rem auto !important; /* Center at top with space below */
    padding: 0.5rem 1.5rem !important;
    width: fit-content !important;
    max-width: 90% !important;
    display: block !important;
    text-align: center !important;
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border-radius: 25px !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #ffffff !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    line-height: 1.2;
    gap: 1rem;
}

.local-presence-main-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
    width: 100%;
}

.presence-highlights {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.highlight-item {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.1);
    padding: 25px;
    border-radius: 15px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

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

.highlight-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #4FC3F7, #29B6F6);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.highlight-content h3 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: #ffffff;
}

.highlight-content p {
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}

.local-presence-map {
    height: 1100px; /* Doubled height to match 4 highlight items in first column */
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    border: 3px solid rgba(255, 255, 255, 0.2);
    margin: 0; /* Remove margin since it's in a grid now */
    display: block;
}

.map-container {
    width: 100%;
    height: 100%;
    position: relative;
}

.map-container iframe {
    border-radius: 17px;
}

/* Mobile Responsive for Local Presence */
@media (max-width: 768px) {
    .local-presence {
        padding: 80px 0; /* Increased from 60px */
    }

    .local-presence-container {
        padding: 0 20px; /* Maintain padding on mobile */
    }

    .local-presence-content {
        flex-direction: column;
        align-items: center;
        max-width: 100%; /* Full width on mobile */
    }

    .local-presence-main-content {
        grid-template-columns: 1fr; /* Stack columns on mobile */
        gap: 40px; /* Gap between content and map */
        width: 100%;
    }

    .local-presence-text h2 {
        font-size: 2rem;
        margin: 1rem auto 2rem auto !important; /* Better mobile spacing */
        padding: 0.4rem 1rem !important;
        max-width: 95% !important; /* Allow more space on mobile */
        text-align: center !important;
    }

    .presence-highlights {
        gap: 25px; /* Increased from 20px */
    }

    .highlight-item {
        padding: 20px;
        gap: 15px;
    }

    .highlight-icon {
        width: 40px;
        height: 40px;
    }

    .highlight-content h3 {
        font-size: 1.1rem;
    }

    .highlight-content p {
        font-size: 0.9rem;
    }

    .local-presence-map {
        height: 700px; /* Doubled height for mobile */
        border-radius: 15px;
        margin: 0; /* Remove margin on mobile */
    }

    .map-container iframe {
        border-radius: 12px;
    }
}

@media (max-width: 480px) {
    .local-presence {
        padding: 40px 0;
    }

    .local-presence-container {
        padding: 0 15px;
    }

    .local-presence-text h2 {
        font-size: 1.7rem;
    }

    .highlight-item {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }

    .highlight-icon {
        align-self: center;
    }

    .local-presence-map {
        height: 500px; /* Doubled height for small mobile */
    }
}

/* Section Separators */
.section-separator {
    width: 100%;
    min-height: 0;
    height: auto;
    display: flex;
    flex-direction: column;
    position: relative;
    background: none; /* Remove duplicate marine background */
    margin: 0;
    padding: 0;
}

.separator-blue {
    width: 100%;
    min-height: 0;
    height: auto;
    background: none;
    position: relative;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.section-separator::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Separator image removed to prevent flicker across viewports */
    display: none !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

/* Certifications Section */
.certifications {
    padding: 0.75rem 0; /* Reduced by half: 1.5rem / 2 = 0.75rem */
    background: none; /* Use marine background container instead */
    position: relative;
    color: white;
}

/* Add tiled sea floor positioned above certifications section - REMOVED */
/* .certifications::before {
    content: "";
    position: absolute;
    top: -90px;
    left: 0;
    width: 100%;
    height: 120px;
    background: url('assets/images/heroImages/SeafloorTile.png') repeat-x center;
    background-size: auto 120px;
    z-index: 100;
    pointer-events: none;
} */

/* Marine blue overlay for certifications background - REMOVED */
/* .certifications::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(10, 75, 120, 0.425);
    z-index: 1;
    pointer-events: none;
} */

.certifications-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem; /* Reset to normal padding */
    padding-top: 0 !important; /* Remove any top padding */
    position: relative;
    z-index: 3; /* Above certifications overlay */
}

.certifications-content {
    text-align: center;
}

.certifications-text {
    margin-bottom: 0;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.certifications-text p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
    font-style: italic;
    margin: 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.certifications-text h2 {
    font-size: 1.8rem !important;
    color: rgba(255, 255, 255, 0.95) !important;
    font-style: normal !important;
    font-weight: 700 !important;
    margin: 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;
    padding: 0 !important;
    display: block !important;
    width: auto !important;
    max-width: none !important;
}

.certifications-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.certification-item {
    display: flex;
    justify-content: center;
    align-items: center;
}

.certification-logo {
    width: 100px;
    height: 60px;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.certification-logo:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.certification-logo span {
    font-weight: 600;
    font-size: 0.75rem;
    color: #ffffff;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.certification-logo img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    filter: brightness(0) invert(1);
    transition: all 0.3s ease;
}

.certification-logo:hover img {
    filter: brightness(0) invert(1) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* Mobile responsive for certifications */
@media (max-width: 768px) {
    .certifications {
        padding: 0.25rem 0; /* Reduced by half: 0.5rem / 2 = 0.25rem */
    }
    
    .certifications-container {
        padding: 0 1rem;
    }
    
    .certifications-text {
        margin-bottom: 0;
    }
    
    .certifications-text p {
        font-size: 0.9rem;
    }
    
    .certifications-text h2 {
        font-size: 2rem !important;
    }
    
    .certifications-logos {
        gap: 1.5rem;
    }
    
    .certification-logo {
        width: 85px;
        height: 50px;
    }
    
    .certification-logo span {
        font-size: 0.65rem;
    }
}

/* Ensure three video cards are laid out in a single centered row on large screens */
@media (min-width: 768px) {
  .free-cards {
    display: flex !important;
    flex-direction: row !important;
    gap: 1.5rem !important;
    justify-content: center !important;
    align-items: flex-start !important;
    width: auto !important;
    max-width: 1200px !important;
    margin: 0 auto 2rem !important;
    flex-wrap: nowrap !important;
  }

  /* Reduced sizes by ~10% for large screens */
  .free-card {
    flex: 0 0 27% !important; /* ~10% narrower than 30% */
    max-width: 342px !important; /* ~10% smaller than 380px */
    display: block !important;
    margin: 0 !important;
  }

  .free-card-video-container {
    height: 504px !important; /* reduced from 560px by ~10% */
    max-height: 648px !important;
  }

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

  /* Ensure the hero CTA sits centered below the row of videos */
  .hero-center-wrapper .primary-button,
  .hero-center-wrapper .primary-button .icon {
    display: inline-flex !important;
    justify-content: center !important;
    margin-top: 2.5rem !important;
    width: auto !important;
    align-self: center !important;
  }

  /* Slightly increase spacing between cards on large screens */
  .free-cards {
    gap: 2rem !important;
  }
}

/* Desktop: larger/taller video cards and centered CTA under videos */
@media (min-width: 768px) {
  /* Make video containers taller (~1.75x previous 320px -> 560px) */
  .free-card-video-container {
    height: 560px !important;
    max-height: 720px !important; /* cap to avoid extreme heights on ultra-tall displays */
  }

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

  /* Ensure the hero CTA sits centered below the row of videos */
  .hero-center-wrapper .primary-button,
  .hero-center-wrapper .primary-button .icon {
    display: inline-flex !important;
    justify-content: center !important;
    margin-top: 2.5rem !important;
    width: auto !important;
    align-self: center !important;
  }

  /* Slightly increase spacing between cards on large screens */
  .free-cards {
    gap: 2rem !important;
  }
}

/* Force hero center wrapper to center contents and CTA under videos on large screens */
@media (min-width: 769px) {
  .hero-center-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* center children horizontally */
    justify-content: flex-start !important;
    text-align: center !important;
  }

  /* Make the CTA a block with auto margins so it sits centered under the videos */
  .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;
    width: auto !important;
    text-align: center !important;
    transform: none !important;
    line-height: 1.2 !important;
    font-size: 1.125rem !important; /* slightly bigger font */
    font-weight: 600 !important;
    font-family: 'Josefin Sans', 'Inter', Arial, sans-serif !important; /* Josefin Sans font */
    background: linear-gradient(135deg, #00bcd4, #0097a7) !important; /* electric blue */
    color: white !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
  }

  /* Hover state for the electric blue button */
  .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;
  }
}

/* Ultrawide and Large Screens (34" monitors, etc.) - Reduce video size */
@media (min-width: 1440px) {
  .free-card {
    max-width: 213px !important; /* 2/3 of 320px = 213px */
    width: 213px !important;
  }
  
  .hero .free-card,
  .hero-center-wrapper .free-card,
  section .free-card {
    flex: 0 0 213px !important; /* 2/3 of 320px = 213px */
    width: 213px !important;
    max-width: 213px !important;
  }
  
  .free-card-video-container {
    height: 253px !important; /* 2/3 of 380px = 253px */
  }
  
  /* Adjust gap between videos for better spacing */
  .free-cards {
    gap: 1rem !important; /* Slightly reduced gap for better proportions */
  }
}

/* Floating Explore Our Services Button */
.floating-explore-button {
    position: fixed !important;
    top: 70vh !important; /* Start at the final position instead of 0 */
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 2000 !important; /* Higher than seabed tile and everything else */
    
    /* Button styling - electric blue like other primary buttons */
    background: linear-gradient(135deg, #00bcd4 0%, #0097a7 100%) !important;
    color: white !important;
    border: none !important;
    border-radius: 50px !important;
    
    /* Initial large size */
    padding: 1rem 2rem !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    font-family: 'Josefin Sans', 'Inter', Arial, sans-serif !important;
    
    /* Smooth transitions for all changes */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    
    /* Visual effects */
    box-shadow: 0 8px 32px rgba(0, 188, 212, 0.4), 0 4px 16px rgba(0, 0, 0, 0.2) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    
    cursor: pointer !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    
    /* Ensure it's always visible */
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Scrolled state - smaller (half size) and moved to right */
.floating-explore-button.scrolled {
    position: fixed !important;
    top: auto !important;
    bottom: 1.5rem !important;
    left: auto !important;
    right: 1.5rem !important;
    transform: translateX(0) !important;
    
    /* Half the original size */
    padding: 0.5rem 1rem !important; /* Half of 1rem 2rem */
    font-size: 0.55rem !important; /* Half of 1.1rem */
    
    /* Slightly different shadow */
    box-shadow: 0 6px 24px rgba(0, 188, 212, 0.3), 0 3px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Hover effects */
.floating-explore-button:hover {
    background: linear-gradient(135deg, #00acc1 0%, #00838f 100%) !important;
    transform: translateX(-50%) translateY(-2px) !important;
    box-shadow: 0 12px 40px rgba(0, 188, 212, 0.5), 0 6px 20px rgba(0, 0, 0, 0.25) !important;
}

.floating-explore-button.scrolled:hover {
    transform: translateX(0) translateY(-2px) !important;
}

/* Mobile responsive adjustments */
@media screen and (max-width: 768px) {
    .floating-explore-button {
        padding: 0.8rem 1.6rem !important;
        font-size: 1rem !important;
    }
    
    .floating-explore-button.scrolled {
        padding: 0.4rem 0.8rem !important; /* Half of mobile size */
        font-size: 0.5rem !important; /* Half of mobile size */
        bottom: 1rem !important;
        right: 1rem !important;
    }
}

/* Mobile landscape specific adjustments */
@media screen and (orientation: landscape) and (min-width: 375px) and (max-width: 1279px) {
    .floating-explore-button {
        /* 3/4 size for mobile landscape */
        padding: 0.75rem 1.5rem !important; /* 3/4 of 1rem 2rem */
        font-size: 0.825rem !important; /* 3/4 of 1.1rem */
        top: 85vh !important; /* Mobile landscape positioning */
    }
    
    .floating-explore-button.scrolled {
        /* Half of the 3/4 size when scrolled */
        padding: 0.375rem 0.75rem !important; 
        font-size: 0.4125rem !important;
        bottom: 1rem !important;
        right: 1rem !important;
    }
}

/* Header typography: use Josefin Sans for all headings */

h1, h2, h3, h4, h5, h6, .hero-title {
  font-family: 'Josefin Sans', 'Inter', Arial, sans-serif !important;
}

/* Add semi-transparent background to all hero titles across all views */
.hero-title {
  background: rgba(24, 58, 101, 0.5) !important; /* Same as navbar background */
  padding: 0.3rem 1.2rem 0 1.2rem !important; /* Add top padding to push background up */
  border-radius: 50px !important;
  backdrop-filter: blur(8px) !important; /* Same as navbar blur */
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
  display: table-cell !important; /* Use table-cell for perfect centering */
  vertical-align: middle !important; /* Perfect vertical centering */
  text-align: center !important; /* Ensure text is centered */
  width: auto !important; /* Auto width to fit content */
  height: 3.5rem !important; /* Fixed height for consistent container */
  margin: 0 auto !important; /* Center the background container itself */
  line-height: 1.2 !important; /* Normal line height */
  /* Override all margin issues that affect vertical centering */
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  /* Force proper box sizing for consistent padding */
  box-sizing: border-box !important;
  /* Font-specific fixes for Josefin Sans */
  font-feature-settings: "kern" 1, "liga" 1 !important; /* Control font features */
  text-rendering: optimizeLegibility !important; /* Better text rendering */
  /* Remove any default text baseline issues */
  vertical-align: middle !important;
}

/* Add semi-transparent background with rounded edges to hero title - DESKTOP ONLY */
@media (min-width: 1280px) {
  .desktop-portrait-title.hero-title {
    background: rgba(24, 58, 101, 0.5) !important; /* Same as navbar background */
    padding: 0.6rem 1.2rem !important;
    border-radius: 50px !important;
    backdrop-filter: blur(8px) !important; /* Same as navbar blur */
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: fit-content !important;
    margin: 0 auto 2rem auto !important;
    white-space: nowrap !important;
    line-height: 1 !important;
  }
}

/* Ultra-Wide Desktop Responsive Rules (1920px+) */
@media (min-width: 1920px) {
    .hero-content {
        padding: 8rem 6rem;
    }

    .hero-content h1 {
        font-size: 5rem;
    }

    .services-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 3rem;
    }

    .statistics-content,
    .local-presence-content {
        grid-template-columns: repeat(3, 1fr);
        gap: 3rem;
    }

    .certification-carousel {
        margin-top: 3rem;
    }

    .carousel-badge {
        font-size: 1.1rem;
        padding: 0.75rem 1.5rem;
    }

    /* Section headings ultra-wide */
    .statistics-header h2,
    .local-presence h2,
    .local-presence-text h2 {
        font-size: 3.5rem !important;
        margin: 4rem auto 3rem auto !important; /* Reduced top margin from 8rem to 4rem */
        padding: 0.75rem 2rem !important;
    }

    /* Division separators ultra-wide */
    .certifications-bottom-separator,
    .local-presence-bottom-separator,
    .services-bottom-separator {
        height: 180px; /* 1.5x larger than original ultra-wide height */
        background-size: auto 180px, 400px 400px; /* 1.5x separator size, ultra-wide marine background tiles */
        bottom: -180px;
    }

    /* Local presence background ultra-wide */
    .local-presence {
        background-size: 280px 280px; /* Standardized marine background tiles */
    }

    /* Marine background container ultra-wide */
    .marine-background-container {
        background-size: 400px 400px;
    }
}