/* Hero/Landing Section */
.landing {
    position: relative;
    min-height: 100vh;
    width: 100%;
    overflow: hidden;
    margin: 0;
    background: linear-gradient(to left, 
        var(--color-primary-light) 0%,
        var(--color-primary) 96%
    );
}

.product-hero-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl) var(--spacing-lg);
}

.product-hero-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('/assets/images/product-assets/recoverix-webp/recoverix_1.webp');
    background-size: cover;
    background-position: center;
    opacity: 0.4;
    mix-blend-mode: multiply;
} 

/* Overridding hero backgrounds per subpage */
.landing--natural .product-hero-overlay::before {
    background-image: url('/assets/images/product-assets/hero-and-nav-webp/natural-medicines.webp');
}

.landing--bioavailable-vitamins .product-hero-overlay::before {
    background-image: url('/assets/images/product-assets/hero-and-nav-webp/nordaid-bento.webp');
    top: -225px;
}

.landing--supplements .product-hero-overlay::before {
    background-image: url('/assets/images/product-assets/hero-and-nav-webp/gummies-bento.webp');
}

.landing--medical-devices .product-hero-overlay::before {
    background-image: url('/assets/images/product-assets/hero-and-nav-webp/recoverix_2.webp');
}


.product-hero-content {
    position: relative;
    max-width: var(--container-xl);
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
    color: var(--color-white);
    text-align: center;
    z-index: 2;
}

.product-hero-title {
    font-size: clamp(var(--font-size-hero), 5vw, var(--font-size-xxxxl));
    line-height: var(--line-height-tight);
    margin-bottom: var(--spacing-xl);
    text-shadow: var(--shadow-sm);
    color: var(--color-white);
}

.product-hero-description {
    font-size: clamp(var(--font-size-xxxl), 2vw, var(--font-size-xxl));
    line-height: var(--line-height-normal);
    opacity: 0.95;
    max-width: 1200px;
    margin: 0 auto;
    text-shadow: var(--shadow-sm);
    width: 80%;
}





@media screen and (max-width: 1280px) {
    .product-hero-title {
        font-size: var(--font-size-xxxxl);
    }
    .product-hero-description {
        font-size: var(--font-size-xxl);
    }
    
}

@media screen and (max-width: 768px) {
    .product-hero-title {
        font-size: var(--font-size-xxxxl);
    }
    .product-hero-description {
        font-size: var(--font-size-xl);
    }
    
}