/* 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;
}

/* Banner photo brightness normalized to match the fleet reference */
#mainBanner .warehouse {
    filter: brightness(0.85);
}

/* 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;
    }
}