/* ============================================================================
   Black Friday 2025 page (Views/Home/BlackFriday2025.cshtml).
   Hero with overlay, gold buttons, subscribe form, fade-in animation.
   ============================================================================ */

.HeroSection {
    position: relative;
    height: 500px;
    color: white;
    background-image: url('https://cdn.bqwatches.com/images/ebca16df-f4f7-4607-b882-dfb71a6c5ec2.png');
    background-position: center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

    .HeroSection::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.55);
        z-index: 1;
    }

    .HeroSection .content {
        position: relative;
        z-index: 2;
        max-width: 850px;
        padding: 1.5rem;
        padding-top: 250px; /* 👈 added top padding */
        padding-bottom: 100px;
    }

    .HeroSection h1 {
        font-size: 3.25rem;
        letter-spacing: 1px;
        font-weight: 700;
        margin-bottom: 1rem;
    }

    .HeroSection p {
        font-size: 1.25rem;
        margin-bottom: 2rem;
        color: #f5f5f5;
    }

    .HeroSection .btn-primary {
        background-color: #d4af37;
        border: none;
        color: black;
        padding: 0.75rem 2rem;
        border-radius: 50px;
        font-weight: 600;
        text-transform: uppercase;
        transition: all 0.3s ease;
    }

        .HeroSection .btn-primary:hover {
            background-color: #f5c94f;
            transform: translateY(-2px);
        }              

/* Layout Sections */
.white-section {
    padding: 3rem 0;
}

.intro-text {
    text-align: center; 
    font-size: 1.1rem;
    color: #555;
}

/* Subscription Form */
#subscribeForm input {
    border-radius: 8px;
    border: 1px solid #ccc;
    padding: 0.5rem 1rem;
}

#subscribeForm .btn-primary {
    background-color: #d4af37;
    border: none;
    color: black;
    font-weight: 600;
}

    #subscribeForm .btn-primary:hover {
        background-color: #f5c94f;
    }

#subscribeMessage .alert {
    animation: fadeIn 0.4s ease-in-out;
}
@keyframes fadeIn {
    from

{
    opacity: 0;
    transform: translateY(5px);
}

to {
    opacity: 1;
    transform: translateY(0);
}

}