/* =========================
   GLOBAL
========================= */

* {
    box-sizing:
        border-box;
}


html {
    scroll-behavior:
        smooth;
}


body {
    margin:
        0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color:
        #211b18;

    background:
        #fffaf6;
}


a {
    color:
        inherit;

    text-decoration:
        none;
}


/* =========================
   HEADER
========================= */

.surprise-header {
    position:
        absolute;

    z-index:
        20;

    top:
        0;

    left:
        0;

    width:
        100%;

    padding:
        25px
        6%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;
}


.header-logo {
    width:
        88px;

    height:
        88px;

    object-fit:
        cover;

    border-radius:
        20px;

    box-shadow:
        0
        8px
        25px
        rgba(0, 0, 0, 0.13);
}


.home-link {
    padding:
        12px
        20px;

    border-radius:
        14px;

    background:
        rgba(255, 255, 255, 0.9);

    font-size:
        15px;

    font-weight:
        700;

    box-shadow:
        0
        5px
        18px
        rgba(0, 0, 0, 0.08);
}


/* =========================
   HERO
========================= */

.surprise-hero {
    min-height:
        760px;

    padding:
        155px
        7%
        80px;

    background-image:
        linear-gradient(
            rgba(255, 245, 241, 0.72),
            rgba(255, 245, 241, 0.90)
        ),
        url("../images/hero-hamper.png");

    background-size:
        cover;

    background-position:
        center;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}


.hero-content {
    width:
        min(900px, 100%);

    text-align:
        center;
}


.hero-label {
    margin:
        0
        0
        15px;

    font-size:
        13px;

    font-weight:
        800;

    letter-spacing:
        2.5px;
}


.hero-content h1 {
    max-width:
        800px;

    margin:
        0
        auto;

    font-size:
        clamp(
            42px,
            6vw,
            72px
        );

    line-height:
        1;

    letter-spacing:
        -1.5px;
}


.hero-intro {
    max-width:
        680px;

    margin:
        24px
        auto
        20px;

    font-size:
        19px;

    line-height:
        1.7;

    color:
        #4f4540;
}


.location-pill {
    width:
        fit-content;

    margin:
        0
        auto
        38px;

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    padding:
        9px
        15px;

    border-radius:
        999px;

    background:
        #f8e5e3;

    border:
        1px solid
        #e6bfbb;

    color:
        #7c3036;

    font-size:
        13px;

    font-weight:
        700;
}


/* =========================
   PLAN BOX
========================= */

.plan-box {
    max-width:
        680px;

    margin:
        0
        auto;

    padding:
        35px;

    border-radius:
        26px;

    background:
        rgba(255, 255, 255, 0.91);

    box-shadow:
        0
        20px
        55px
        rgba(0, 0, 0, 0.10);
}


.plan-label {
    margin:
        0
        0
        8px;

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        2px;

    color:
        #8d585d;
}


.plan-box h2 {
    margin:
        0;

    font-size:
        36px;

    line-height:
        1.1;
}


.plan-description {
    max-width:
        520px;

    margin:
        15px
        auto
        25px;

    font-size:
        16px;

    line-height:
        1.6;

    color:
        #5d514c;
}


/* =========================
   CONTACT BUTTONS
========================= */

.contact-buttons {
    display:
        flex;

    justify-content:
        center;

    gap:
        14px;

    flex-wrap:
        wrap;
}


.contact-button {
    min-width:
        160px;

    padding:
        14px
        20px;

    border-radius:
        14px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    font-size:
        15px;

    font-weight:
        700;

    transition:
        transform 0.2s,
        box-shadow 0.2s;
}


.contact-button:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0
        10px
        22px
        rgba(0, 0, 0, 0.12);
}


.whatsapp-button {
    background:
        #1f6c4b;

    color:
        white;
}


.instagram-button {
    background:
        #26201e;

    color:
        white;
}


.contact-icon {
    font-size:
        18px;
}


/* =========================
   OCCASION SECTION
========================= */

.occasion-section {
    padding:
        85px
        7%
        100px;
}


.occasion-heading {
    max-width:
        700px;

    margin:
        0
        auto
        45px;

    text-align:
        center;
}


.section-label {
    margin:
        0
        0
        12px;

    font-size:
        12px;

    font-weight:
        800;

    letter-spacing:
        2.3px;

    color:
        #9c676b;
}


.occasion-heading h2 {
    margin:
        0;

    font-size:
        clamp(
            36px,
            4vw,
            52px
        );

    line-height:
        1.05;
}


.occasion-heading > p:last-child {
    margin:
        18px
        auto
        0;

    font-size:
        17px;

    line-height:
        1.6;

    color:
        #5d514c;
}


/* =========================
   OCCASION GRID
========================= */

.occasion-grid {
    max-width:
        1150px;

    margin:
        0
        auto;

    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        24px;
}


/* =========================
   OCCASION CARDS
========================= */

.occasion-card {
    min-height:
        340px;

    padding:
        35px
        30px;

    border-radius:
        24px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    justify-content:
        flex-end;

    box-shadow:
        0
        14px
        35px
        rgba(0, 0, 0, 0.08);

    transition:
        transform 0.25s,
        box-shadow 0.25s;
}


.occasion-card:hover {
    transform:
        translateY(-6px);

    box-shadow:
        0
        20px
        45px
        rgba(0, 0, 0, 0.13);
}


.birthday-card {
    background:
        linear-gradient(
            145deg,
            #fff3e5,
            #f8d9bd
        );
}


.anniversary-card {
    background:
        linear-gradient(
            145deg,
            #fff0f1,
            #eecfd5
        );
}


.valentine-card {
    background:
        linear-gradient(
            145deg,
            #fde9ec,
            #e8bfc7
        );
}


.occasion-icon {
    margin-bottom:
        auto;

    font-size:
        52px;
}


.occasion-card h3 {
    margin:
        20px
        0
        10px;

    font-size:
        30px;
}


.occasion-card p {
    margin:
        0
        0
        22px;

    font-size:
        15px;

    line-height:
        1.6;

    color:
        #554945;
}


.occasion-link {
    font-size:
        14px;

    font-weight:
        800;
}


/* =========================
   FOOTER
========================= */

.surprise-footer {
    padding:
        45px
        20px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    background:
        #181412;

    color:
        white;

    text-align:
        center;
}


.footer-logo {
    width:
        72px;

    height:
        72px;

    margin-bottom:
        15px;

    border-radius:
        16px;
}


.surprise-footer p {
    margin:
        0;

    font-size:
        13px;

    letter-spacing:
        0.5px;

    opacity:
        0.8;
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 650px) {


    .surprise-header {
        padding:
            14px
            16px;
    }


    .header-logo {
        width:
            62px;

        height:
            62px;

        border-radius:
            14px;
    }


    .home-link {
        padding:
            9px
            13px;

        font-size:
            12px;

        border-radius:
            11px;
    }


    .surprise-hero {
        min-height:
            auto;

        padding:
            105px
            18px
            45px;

        background-image:
            linear-gradient(
                rgba(255, 245, 241, 0.70),
                rgba(255, 245, 241, 0.93)
            ),
            url("../images/hero-hamper-mobile.png");

        background-size:
            cover;

        background-position:
            center
            top;
    }


    .hero-label {
        font-size:
            10px;

        margin-bottom:
            10px;
    }


    .hero-content h1 {
        font-size:
            38px;

        line-height:
            1;
    }


    .hero-intro {
        margin-top:
            17px;

        font-size:
            14px;

        line-height:
            1.55;
    }


    .location-pill {
        margin-bottom:
            25px;

        padding:
            7px
            10px;

        font-size:
            10px;
    }


    .plan-box {
        padding:
            24px
            18px;

        border-radius:
            20px;
    }


    .plan-box h2 {
        font-size:
            28px;
    }


    .plan-description {
        font-size:
            13px;

        margin:
            12px
            auto
            19px;
    }


    .contact-buttons {
        display:
            grid;

        grid-template-columns:
            1fr
            1fr;

        gap:
            9px;
    }


    .contact-button {
        min-width:
            0;

        padding:
            12px
            8px;

        font-size:
            13px;
    }


    /* =========================
       MOBILE OCCASIONS
    ========================= */

    .occasion-section {
        padding:
            50px
            18px
            65px;
    }


    .occasion-heading {
        margin-bottom:
            28px;
    }


    .occasion-heading h2 {
        font-size:
            33px;
    }


    .occasion-heading > p:last-child {
        font-size:
            14px;
    }


    .occasion-grid {
        grid-template-columns:
            1fr;

        gap:
            15px;
    }


    .occasion-card {
        min-height:
            220px;

        padding:
            25px;

        border-radius:
            20px;
    }


    .occasion-icon {
        font-size:
            40px;
    }


    .occasion-card h3 {
        font-size:
            27px;
    }


    .occasion-card p {
        font-size:
            13px;

        margin-bottom:
            17px;
    }


    .occasion-link {
        font-size:
            13px;
    }


    .surprise-footer {
        padding:
            35px
            20px;
    }

}