/* HERO BANNER OVERLAY - Premium blue gradient, darker at bottom, lighter at top */
.opacityLayer {
    background: linear-gradient(
        to top,
        rgba(0, 20, 50, 0.90) 0%,
        rgba(0, 22, 54, 0.84) 25%,
        rgba(0, 24, 58, 0.78) 50%,
        rgba(0, 26, 62, 0.72) 75%,
        rgba(0, 28, 66, 0.66) 100%
    ) !important;
    pointer-events: none !important;
}

/* FIT GUARANTEE: the hero grows with its content instead of clipping.
   min-height keeps the original 700px banner look when copy is short. */
#mainBanner {
    height: auto !important;
    min-height: 700px !important;
}

.mainBannerContent {
    padding-top: 48px;
    padding-bottom: 48px;
}
/* HERO BANNER TEXT - Clean Premium Typography */
.mainBannerRight {
    width: 100% !important;
    max-width: 880px !important;
}

.mainBannerTitle {
    font-family: 'Inter', 'DM Sans', system-ui, -apple-system, sans-serif !important;
    font-size: clamp(32px, 4vw, 44px) !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    line-height: 1.22 !important;
    letter-spacing: 0.3px !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6) !important;
    width: 100% !important;
    max-width: none !important;
    margin-bottom: 12px !important;
}

.mainBannerDescription {
    font-family: 'Inter', 'DM Sans', system-ui, -apple-system, sans-serif !important;
    font-size: clamp(17px, 1.9vw, 21px) !important;
    font-weight: 400 !important;
    color: #ffffff !important;
    opacity: 0.95 !important;
    line-height: 1.7 !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) !important;
    width: 100% !important;
    max-width: 850px !important;
    display: block !important;
}

.mainBannerDescription strong,
.mainBannerDescription .pleasant-weight {
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: 700 !important;
    color: inherit !important;
    letter-spacing: inherit !important;
    line-height: inherit !important;
}

/* Laptop 14-15 inch */
@media (max-width: 1366px) {
    .mainBannerTitle {
        font-size: clamp(28px, 3.8vw, 38px) !important;
    }
    
    .mainBannerDescription {
        font-size: clamp(15px, 1.8vw, 18px) !important;
    }
}

/* Tablet landscape */
@media (max-width: 1024px) {
    .mainBannerTitle {
        font-size: clamp(28px, 3.5vw, 34px) !important;
        line-height: 1.3 !important;
    }
    
    .mainBannerDescription {
        font-size: clamp(15px, 1.7vw, 17px) !important;
        line-height: 1.6 !important;
    }
}

/* Tablet portrait */
@media (max-width: 768px) {
    .opacityLayer {
        background: linear-gradient(
            to top,
            rgba(0, 20, 50, 0.91) 0%,
            rgba(0, 22, 54, 0.85) 25%,
            rgba(0, 24, 58, 0.79) 50%,
            rgba(0, 26, 62, 0.73) 75%,
            rgba(0, 28, 66, 0.67) 100%
        ) !important;
    }
    
    .mainBannerRight {
        max-width: 95% !important;
        padding: 0 20px;
        box-sizing: border-box !important;
    }
    
    .mainBannerTitle {
        font-size: clamp(28px, 5.5vw, 32px) !important;
        line-height: 1.28 !important;
    }
    
    .mainBannerDescription {
        font-size: clamp(16px, 3.5vw, 18px) !important;
        line-height: 1.65 !important;
    }
}
                    /* H1 Heading Reset */
                    .mainBannerHeading {
                        margin: 0;
                        padding: 0;
                        font-weight: 700;
                    }
                    /* Base visibility: show desktop, hide mobile variant */
                    .mainBannerTitleDesktop { 
                        display: block; 
                        color: #ffffff;
                        font-family: 'Inter', 'DM Sans', system-ui, -apple-system, sans-serif;
                        font-size: clamp(32px, 4vw, 44px);
                        font-weight: 700;
                        line-height: 1.22;
                        letter-spacing: 0.3px;
                        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
                        width: 100%;
                        max-width: none;
                    }
                    .mainBannerTitleMobile { display: none; color: #ffffff; }
                    /* Description text enhancements */
                    .mainBannerDescription p {
                        font-family: 'Inter', 'DM Sans', system-ui, -apple-system, sans-serif;
                        font-size: clamp(17px, 1.9vw, 21px);
                        font-weight: 400;
                        color: #ffffff;
                        opacity: 0.95;
                        line-height: 1.7;
                        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
                        letter-spacing: 0.025em;
                    }
                    /* Pleasant semi-bold weight for subtle emphasis */
                    .pleasant-weight { font-family: inherit !important; font-size: inherit !important; font-weight: 700 !important; color: inherit !important; letter-spacing: inherit !important; }
                    
                    /* Laptop 14-15 inch */
                    @media (max-width: 1366px) {
                        .mainBannerTitleDesktop {
                            font-size: clamp(28px, 3.8vw, 38px);
                        }
                        .mainBannerDescription p {
                            font-size: clamp(16px, 1.8vw, 18px);
                        }
                    }
                    
                    /* Tablet landscape */
                    @media (max-width: 1024px) {
                        .mainBannerTitleDesktop {
                            font-size: clamp(28px, 3.5vw, 34px);
                            line-height: 1.3;
                        }
                        .mainBannerDescription p {
                            font-size: clamp(16px, 1.7vw, 17px);
                            line-height: 1.6;
                        }
                    }
                    
                    /* Tablet portrait */
                    @media (max-width: 768px) {
                        .mainBannerTitleDesktop {
                            font-size: clamp(28px, 5.5vw, 32px);
                            line-height: 1.28;
                        }
                        .mainBannerDescription p {
                            font-size: clamp(16px, 3.5vw, 18px);
                            line-height: 1.65;
                        }
                    }
                    
                    /* Mobile adjustments */
                    @media (max-width: 520px) {
                        .heroCtaLink { display: flex; width: 100%; justify-content: center; }
                        .videoButton { margin: 22px auto 0 !important; display: inline-flex; justify-content: center; align-items: center; text-align: center; width: auto; max-width: calc(100% - 32px); height: auto; min-height: 44px; padding: 10px 28px; letter-spacing: 0.5px; }
                        .videoButton span { display: block; font-size: clamp(15px, 4.5vw, 17px) !important; line-height: 1.2; font-weight: 700; letter-spacing: 0.5px; }
                        .videoButton .icon { display: none !important; }
                        .mainBannerTitleDesktop { display: none !important; }
                        .mainBannerHeading { margin: 0 auto 12px !important; width: 100% !important; }
                        /* Mobile banner title: full width, balanced wrapping, no overflow, white color */
                        .mainBannerTitleMobile { display: block !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box; margin: 0 !important; padding: 0 20px !important; font-size: clamp(28px, 7.5vw, 42px) !important; line-height: 1.22; letter-spacing: 0.3px; color: #ffffff !important; text-align: center; text-wrap: balance; white-space: normal !important; overflow-wrap: break-word; word-break: normal; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3); }
                        /* Center banner description on mobile */
                        .mainBannerDescription { width: 100% !important; max-width: 100% !important; box-sizing: border-box; margin: 0 auto !important; padding: 0 20px !important; text-align: center; display: flex; justify-content: center; }
                        .mainBannerDescription p { font-size: 20px !important; line-height: 1.55; letter-spacing: 0.02em; text-align: center; margin: 0 auto; }
                        /* Center the entire banner content */
                        .mainBannerContent { width: 100% !important; padding: 0 !important; margin: 0 auto !important; display: flex; flex-direction: column; align-items: center; justify-content: center; }
                        .mainBannerRight { width: 100% !important; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
                    }