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

.footer {
    width:
        100%;

    background:
        #03231a;

    color:
        #F8F3E8;

    position:
        relative;
}


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

.footer-container {
    width: min(1200px, 90%);
    margin: 0 auto;
    padding: 8px 0 3px;

    display: grid;
    grid-template-columns: 1.5fr 0.8fr 0.9fr 1fr;
    column-gap: 55px;

    /* Move all footer content upward without increasing footer height */
    transform: translateY(-12px);
}

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

.footer-column {
    min-width:
        0;
}


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

.footer-logo {
    width: 125px;
    height: auto;
    display: block;
    margin-bottom: 5px;
}

.footer-brand h3 {
    margin:
         0px 0 0;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        20px;

    font-weight:
        500;

    color:
        #F8F3E8;
}

.footer-location {
    margin:
        2px 0 7px;

    color:
        #C89B45;

    font-size:
        10px;

    letter-spacing:
        2px;

    text-transform:
        uppercase;
}

.footer-description {
    max-width:
        330px;

    margin:
        0;

    color:
        rgba(
            248,
            243,
            232,
            0.70
        );

    font-size:
        12px;

    line-height:
        1.45;
}


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

.footer-socials {
    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    margin-top:
        8px;
}

.footer-social {
    width:
        30px;

    height:
        30px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(
            200,
            155,
            69,
            0.45
        );

    border-radius:
        50%;

    color:
        #F8F3E8;

    text-decoration:
        none;

    font-size:
        12px;

    transition:
        color 0.3s ease,
        border-color 0.3s ease,
        background 0.3s ease,
        transform 0.3s ease;
}

.footer-social:hover {
    color:
        #E4C77A;

    border-color:
        #C89B45;

    background:
        rgba(
            200,
            155,
            69,
            0.08
        );

    transform:
        translateY(-2px);
}


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

.footer-heading {
    margin:
        22px 0 10px;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        17px;

    font-weight:
        500;

    color:
        #C89B45;
}


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

.footer-links {
    display:
        flex;

    flex-direction:
        column;

    gap:
        6px;
}

.footer-links a {
    width:
        fit-content;

    color:
        rgba(
            248,
            243,
            232,
            0.70
        );

    font-size:
        12px;

    text-decoration:
        none;

    transition:
        color 0.3s ease,
        transform 0.3s ease;
}

.footer-links a:hover {
    color:
        #E4C77A;

    transform:
        translateX(3px);
}


/* =========================================================
   OPENING HOURS
========================================================= */

.footer-hours p {
    margin:
        0;

    display:
        flex;

    flex-direction:
        column;

    gap:
        5px;
}

.footer-hours span {
    color:
        rgba(
            248,
            243,
            232,
            0.70
        );

    font-size:
        12px;
}

.footer-hours strong {
    color:
        #F8F3E8;

    font-size:
        13px;

    font-weight:
        500;
}


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

.footer-contact {
    display:
        flex;

    flex-direction:
        column;

    gap:
        9px;
}

.contact-item {
    display:
        flex;

    align-items:
        flex-start;

    gap:
        10px;

    color:
        rgba(
            248,
            243,
            232,
            0.70
        );

    font-size:
        11px;

    line-height:
        1.4;

    text-decoration:
        none;

    transition:
        color 0.3s ease;
}

.contact-item:hover {
    color:
        #E4C77A;
}

.contact-icon {
    flex-shrink:
        0;

    width:
        18px;

    color:
        #C89B45;

    font-size:
        15px;

    line-height:
        1.5;
}

.contact-item strong {
    display:
        block;

    margin-bottom:
        1px;

    color:
        #F8F3E8;

    font-size:
        9px;

    font-weight:
        600;

    letter-spacing:
        1px;

    text-transform:
        uppercase;
}


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

.footer-divider {
    width:
        min(
            1200px,
            90%
        );

    height:
        1px;

    margin:
        0 auto;

    background:
        rgba(
            248,
            243,
            232,
            0.12
        );
}


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

.footer-bottom {
    width:
        min(
            1200px,
            90%
        );

    margin:
        0 auto;

    min-height:
        32px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;
}

.footer-bottom p {
    margin:
        0;

    color:
        rgba(
            248,
            243,
            232,
            0.55
        );

    font-size:
        10px;
}

.footer-legal {
    display:
        flex;

    align-items:
        center;

    gap:
        10px;
}

.footer-legal a {
    color:
        rgba(
            248,
            243,
            232,
            0.55
        );

    font-size:
        10px;

    text-decoration:
        none;

    transition:
        color 0.3s ease;
}

.footer-legal a:hover {
    color:
        #E4C77A;
}

.footer-legal span {
    color:
        rgba(
            248,
            243,
            232,
            0.25
        );
}



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

@media (max-width: 1000px) {

    .footer-container {
        grid-template-columns:
            1fr
            1fr;

        row-gap:
            20px;

        column-gap:
            40px;
    }

        .footer-description,
    .footer-links a,
    .footer-hours span,
    .footer-bottom p,
    .footer-legal a {
        font-size: 13px;
    }
}


@media (max-width: 650px) {

    .footer-container {
        width:
            88%;

        grid-template-columns:
            1fr;

        row-gap:
            20px;

        padding:
            25px 0 20px;
    }

    .footer-brand {
        text-align:
            left;
    }

    .footer-logo {
        margin-left:
            0;

        margin-right:
            0;
    }

    .footer-description {
        margin-left:
            0;

        margin-right:
            0;
    }

    .footer-socials {
        justify-content:
            flex-start;
    }

    .footer-column:not(.footer-brand) {
        text-align:
            left;
    }

    .footer-heading {
        margin-bottom:
            10px;
    }

    .footer-links {
        align-items:
            flex-start;
    }

    .footer-links a:hover {
        transform:
            none;
    }

    .footer-hours p {
        align-items:
            flex-start;
    }

    .footer-contact {
        align-items:
            flex-start;
    }

    .contact-item {
        justify-content:
            flex-start;
    }

    .footer-bottom {
        width: 88%;
        min-height: auto;
        padding: 12px 0 15px;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        text-align: left;
        gap: 6px;
    }

    .footer-legal {
        justify-content:
            flex-start;
    }

        .footer-description,
    .footer-links a,
    .footer-hours span {
        font-size: 14px;
    }

    .footer-hours strong {
        font-size: 15px;
    }

    .contact-item {
        font-size: 13px;
    }

    .footer-heading {
        font-size: 18px;
    }

    .footer-bottom p,
    .footer-legal a {
        font-size: 12px;
    }

}

/* =========================================================
   FLOATING WHATSAPP
========================================================= */

.whatsapp-button {
    position: fixed;
    right: 25px;
    bottom: 25px;

    width: 58px;
    height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #25D366;
    color: #ffffff;

    border-radius: 50%;
    text-decoration: none;

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

    z-index: 9999;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.whatsapp-button svg {
    width: 28px;
    height: 28px;
    fill: currentColor;
    display: block;
}

.whatsapp-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
}
/* =========================================================
   WHATSAPP RESPONSIVE
========================================================= */

@media (max-width: 650px) {

    .whatsapp-button {
        right:
            15px;

        bottom:
            15px;

        width:
            50px;

        height:
            50px;
    }

    .whatsapp-button svg {
        width:
            24px;

        height:
            24px;
    }
}