/* ==================================================
   SAVORA KITCHEN
   MAIN DESIGN SYSTEM
================================================== */

:root {

    --savora-dark: #17120e;

    --savora-cream: #f5eee4;

    --savora-warm: #c8753d;

    --savora-text: #33271f;

    --savora-muted: #786b60;

    --savora-light-card: #eee4d7;

}


/* ==================================================
   GENERAL
================================================== */

html {

    scroll-behavior: smooth;

}

body {

    margin: 0;

    background: var(--savora-cream);

    color: var(--savora-text);

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

}

img {

    max-width: 100%;

}

a {

    transition: 0.25s ease;

}


/* ==================================================
   NAVIGATION
================================================== */

.savora-navbar {

    min-height: 82px;

    background: var(--savora-dark);

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.08);

}

.savora-logo {

    color:
        var(--savora-cream) !important;

    font-family:
        Georgia,
        serif;

    font-size: 24px;

    font-weight: 600;

    letter-spacing: 2px;

}

.savora-logo span {

    color:
        var(--savora-warm);

}

.savora-navbar .nav-link {

    color:
        rgba(245, 238, 228, 0.75);

    font-size: 14px;

}

.savora-navbar .nav-link:hover {

    color:
        var(--savora-cream);

}

.savora-nav-button {

    background:
        var(--savora-warm);

    color: white !important;

    padding:
        11px 20px;

    border-radius: 0;

    font-size: 13px;

}

.savora-nav-button:hover {

    background: #b86531;

    color: white !important;

}


/* Bootstrap mobile menu button */

.savora-navbar .navbar-toggler {

    border:
        1px solid
        rgba(245, 238, 228, 0.3);

}

.savora-navbar .navbar-toggler:focus {

    box-shadow: none;

}

.savora-navbar .navbar-toggler-icon {

    filter:
        brightness(0)
        invert(1);

}


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

.savora-hero {

    background:
        var(--savora-dark);

    color:
        var(--savora-cream);

    padding:
        100px 0 110px;

}

.savora-eyebrow {

    margin-bottom: 20px;

    color:
        var(--savora-warm);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2.5px;

}

.savora-hero-title {

    max-width: 620px;

    margin-bottom: 25px;

    font-family:
        Georgia,
        serif;

    font-size:
        clamp(45px, 6vw, 78px);

    font-weight: 400;

    line-height: 0.98;

    letter-spacing: -2px;

}

.savora-hero-title span {

    display: block;

    color:
        var(--savora-warm);

}

.savora-hero-text {

    max-width: 480px;

    margin-bottom: 35px;

    color:
        rgba(245, 238, 228, 0.68);

    font-size: 16px;

    line-height: 1.7;

}


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

.savora-primary-button,
.savora-secondary-button {

    padding:
        14px 24px;

    border-radius: 0;

    font-size: 13px;

}

.savora-primary-button {

    background:
        var(--savora-warm);

    color: white;

    border:
        1px solid
        var(--savora-warm);

}

.savora-primary-button:hover {

    background: #b86531;

    border-color: #b86531;

    color: white;

}

.savora-secondary-button {

    border:
        1px solid
        rgba(245, 238, 228, 0.35);

    color:
        var(--savora-cream);

}

.savora-secondary-button:hover {

    background:
        var(--savora-cream);

    color:
        var(--savora-dark);

}


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

.savora-hero-image {

    position: relative;

    min-height: 570px;

    background-image:
        url("https://images.unsplash.com/photo-1544025162-d76694265947?auto=format&fit=crop&w=1200&q=85");

    background-size: cover;

    background-position: center;

}

.savora-hero-label {

    position: absolute;

    left: 22px;

    bottom: 22px;

    padding:
        15px 18px;

    background:
        rgba(23, 18, 14, 0.9);

}

.savora-hero-label small {

    display: block;

    margin-bottom: 5px;

    color:
        var(--savora-warm);

    font-size: 10px;

    letter-spacing: 1.5px;

}

.savora-hero-label strong {

    display: block;

    color:
        var(--savora-cream);

    font-family:
        Georgia,
        serif;

    font-size: 16px;

}


/* ==================================================
   MENU
================================================== */

.savora-menu {

    padding:
        110px 0 120px;

    background:
        var(--savora-cream);

}

.menu-heading {

    max-width: 650px;

}

.menu-heading h2 {

    margin-bottom: 20px;

    font-family:
        Georgia,
        serif;

    font-size:
        clamp(42px, 5vw, 64px);

    font-weight: 400;

    line-height: 1;

}

.menu-heading h2 span {

    display: block;

    color:
        var(--savora-warm);

}

.menu-heading > p:last-child {

    color:
        var(--savora-muted);

    line-height: 1.7;

}


/* ==================================================
   FOOD CARDS
================================================== */

.savora-food-card {

    height: 100%;

    background:
        var(--savora-light-card);

    overflow: hidden;

}

.food-photo {

    position: relative;

    height: 390px;

    overflow: hidden;

}

.food-photo img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    transition:
        transform 0.5s ease;

}

.savora-food-card:hover
.food-photo img {

    transform:
        scale(1.03);

}

.food-tag {

    position: absolute;

    left: 18px;

    top: 18px;

    padding:
        8px 11px;

    background:
        var(--savora-dark);

    color:
        var(--savora-cream);

    font-size: 9px;

    letter-spacing: 1.5px;

}

.food-content {

    padding: 25px;

}

.food-content h3 {

    margin: 0;

    font-family:
        Georgia,
        serif;

    font-size: 24px;

    font-weight: 400;

}

.food-content strong {

    color:
        var(--savora-warm);

    white-space: nowrap;

}

.food-content p {

    max-width: 500px;

    margin:
        15px 0 20px;

    color:
        var(--savora-muted);

    font-size: 14px;

    line-height: 1.7;

}

.savora-add-button {

    padding:
        12px 18px;

    border:
        1px solid
        var(--savora-dark);

    background:
        var(--savora-dark);

    color:
        var(--savora-cream);

    font-size: 12px;

    cursor: pointer;

    transition:
        0.25s ease;

}

.savora-add-button:hover {

    background:
        transparent;

    color:
        var(--savora-dark);

}


/* ==================================================
   OUR STORY
================================================== */

.savora-story {

    padding:
        120px 0;

    background:
        var(--savora-dark);

    color:
        var(--savora-cream);

}

.savora-story-image {

    height: 560px;

    overflow: hidden;

}

.savora-story-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}

.savora-story-content {

    max-width: 520px;

    padding-left: 30px;

}

.savora-story-content h2 {

    margin-bottom: 30px;

    font-family:
        Georgia,
        serif;

    font-size:
        clamp(42px, 5vw, 64px);

    font-weight: 400;

    line-height: 1;

}

.savora-story-content h2 span {

    display: block;

    color:
        var(--savora-warm);

}

.savora-story-content > p {

    margin-bottom: 20px;

    color:
        rgba(245, 238, 228, 0.68);

    font-size: 15px;

    line-height: 1.8;

}

.savora-story-line {

    width: 55px;

    height: 1px;

    margin:
        30px 0 20px;

    background:
        var(--savora-warm);

}

.savora-story-note {

    color:
        var(--savora-cream) !important;

    font-family:
        Georgia,
        serif;

    font-size: 18px !important;

}


/* ==================================================
   EXPERIENCE
================================================== */

.savora-experience {

    padding:
        120px 0;

    background:
        var(--savora-cream);

    color:
        var(--savora-text);

}

.savora-experience-content {

    max-width: 500px;

}

.savora-experience-content h2 {

    margin-bottom: 30px;

    font-family:
        Georgia,
        serif;

    font-size:
        clamp(42px, 5vw, 64px);

    font-weight: 400;

    line-height: 1;

}

.savora-experience-content h2 span {

    display: block;

    color:
        var(--savora-warm);

}

.savora-experience-content > p {

    margin-bottom: 18px;

    color:
        var(--savora-muted);

    font-size: 15px;

    line-height: 1.8;

}

.savora-experience-link {

    display: inline-block;

    margin-top: 15px;

    padding-bottom: 7px;

    border-bottom:
        1px solid
        var(--savora-warm);

    color:
        var(--savora-text);

    font-size: 13px;

    text-decoration: none;

}

.savora-experience-link:hover {

    color:
        var(--savora-warm);

}

.savora-experience-image {

    position: relative;

    height: 520px;

    overflow: hidden;

}

.savora-experience-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}

.savora-experience-label {

    position: absolute;

    right: 22px;

    bottom: 22px;

    padding:
        16px 20px;

    background:
        rgba(23, 18, 14, 0.9);

}

.savora-experience-label small {

    display: block;

    margin-bottom: 5px;

    color:
        var(--savora-warm);

    font-size: 9px;

    letter-spacing: 1.5px;

}

.savora-experience-label strong {

    display: block;

    color:
        var(--savora-cream);

    font-family:
        Georgia,
        serif;

    font-size: 16px;

    font-weight: 400;

}


/* ==================================================
   WHY SAVORA
================================================== */

.savora-why {

    padding:
        110px 0 120px;

    background:
        var(--savora-dark);

    color:
        var(--savora-cream);

}

.savora-why-heading {

    max-width: 600px;

}

.savora-why-heading h2 {

    margin: 0;

    font-family:
        Georgia,
        serif;

    font-size:
        clamp(42px, 5vw, 64px);

    font-weight: 400;

    line-height: 1;

}

.savora-why-heading h2 span {

    display: block;

    color:
        var(--savora-warm);

}

.savora-why-item {

    height: 100%;

    padding:
        28px 24px;

    border-top:
        1px solid
        rgba(245, 238, 228, 0.18);

}

.savora-why-number {

    display: block;

    margin-bottom: 35px;

    color:
        var(--savora-warm);

    font-size: 11px;

    letter-spacing: 2px;

}

.savora-why-item h3 {

    margin-bottom: 12px;

    font-family:
        Georgia,
        serif;

    font-size: 22px;

    font-weight: 400;

}

.savora-why-item p {

    margin: 0;

    color:
        rgba(245, 238, 228, 0.62);

    font-size: 14px;

    line-height: 1.7;

}

.savora-why-quote {

    margin-top: 80px;

    padding-top: 35px;

    border-top:
        1px solid
        rgba(245, 238, 228, 0.12);

}

.savora-why-quote p {

    margin-bottom: 10px;

    font-family:
        Georgia,
        serif;

    font-size: 24px;

    font-style: italic;

}

.savora-why-quote span {

    color:
        var(--savora-warm);

    font-size: 10px;

    letter-spacing: 2px;

}


/* ==================================================
   VISIT SAVORA
================================================== */

.savora-visit {

    padding:
        120px 0;

    background:
        var(--savora-cream);

    color:
        var(--savora-text);

}

.savora-visit-content {

    max-width: 520px;

}

.savora-visit-content h2 {

    margin-bottom: 25px;

    font-family:
        Georgia,
        serif;

    font-size:
        clamp(42px, 5vw, 64px);

    font-weight: 400;

    line-height: 1;

}

.savora-visit-content h2 span {

    display: block;

    color:
        var(--savora-warm);

}

.savora-visit-intro {

    max-width: 430px;

    margin-bottom: 40px;

    color:
        var(--savora-muted);

    font-size: 15px;

    line-height: 1.8;

}

.savora-visit-details {

    margin-bottom: 35px;

}

.savora-detail {

    padding:
        20px 0;

    border-top:
        1px solid
        rgba(51, 39, 31, 0.15);

}

.savora-detail:last-child {

    border-bottom:
        1px solid
        rgba(51, 39, 31, 0.15);

}

.savora-detail small {

    display: block;

    margin-bottom: 8px;

    color:
        var(--savora-warm);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.8px;

}

.savora-detail p {

    margin:
        0 0 7px;

    color:
        var(--savora-text);

    font-size: 14px;

    line-height: 1.6;

}

.savora-detail p:last-child {

    margin-bottom: 0;

}


/* ==================================================
   VISIT IMAGE
================================================== */

.savora-visit-map {

    position: relative;

    min-height: 620px;

    background-image:
        linear-gradient(
            rgba(23, 18, 14, 0.25),
            rgba(23, 18, 14, 0.25)
        ),
        url("https://images.unsplash.com/photo-1519167758481-83f550bb49b3?auto=format&fit=crop&w=1200&q=85");

    background-size: cover;

    background-position: center;

}

.savora-map-overlay {

    position: absolute;

    right: 25px;

    bottom: 25px;

    padding:
        18px 20px;

    background:
        rgba(23, 18, 14, 0.92);

}

.savora-map-overlay span {

    display: block;

    margin-bottom: 5px;

    color:
        var(--savora-warm);

    font-size: 9px;

    letter-spacing: 1.5px;

}

.savora-map-overlay strong {

    color:
        var(--savora-cream);

    font-family:
        Georgia,
        serif;

    font-size: 17px;

    font-weight: 400;

}


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

.savora-footer {

    padding:
        80px 0 25px;

    background:
        var(--savora-dark);

    color:
        var(--savora-cream);

}

.savora-footer-logo {

    display: inline-block;

    margin-bottom: 20px;

    color:
        var(--savora-cream);

    font-family:
        Georgia,
        serif;

    font-size: 25px;

    font-weight: 600;

    letter-spacing: 2px;

    text-decoration: none;

}

.savora-footer-logo span {

    color:
        var(--savora-warm);

}

.savora-footer-logo:hover {

    color:
        var(--savora-cream);

}

.savora-footer-text {

    max-width: 350px;

    margin: 0;

    color:
        rgba(245, 238, 228, 0.58);

    font-size: 14px;

    line-height: 1.8;

}

.savora-footer h3 {

    margin-bottom: 20px;

    color:
        var(--savora-warm);

    font-size: 10px;

    letter-spacing: 1.8px;

    text-transform: uppercase;

}

.savora-footer a:not(.savora-footer-logo) {

    display: block;

    margin-bottom: 11px;

    color:
        rgba(245, 238, 228, 0.65);

    font-size: 13px;

    text-decoration: none;

}

.savora-footer a:not(.savora-footer-logo):hover {

    color:
        var(--savora-cream);

}

.savora-footer-bottom {

    display: flex;

    justify-content: space-between;

    gap: 20px;

    margin-top: 70px;

    padding-top: 22px;

    border-top:
        1px solid
        rgba(245, 238, 228, 0.12);

    color:
        rgba(245, 238, 228, 0.4);

    font-size: 11px;

}


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

@media (max-width: 767px) {


    /* Navigation */

    .savora-navbar {

        min-height: 72px;

    }


    /* Hero */

    .savora-hero {

        padding:
            75px 0 80px;

    }

    .savora-hero-title {

        font-size: 46px;

        letter-spacing: -1.5px;

    }

    .savora-hero-text {

        font-size: 15px;

    }

    .savora-hero-image {

        min-height: 390px;

    }


    /* Menu */

    .savora-menu {

        padding:
            80px 0 90px;

    }

    .food-photo {

        height: 300px;

    }

    .food-content {

        padding: 22px;

    }

    .food-content h3 {

        font-size: 21px;

    }


    /* Story */

    .savora-story {

        padding:
            80px 0 90px;

    }

    .savora-story-image {

        height: 380px;

    }

    .savora-story-content {

        padding-left: 0;

    }

    .savora-story-content h2 {

        font-size: 44px;

    }


    /* Experience */

    .savora-experience {

        padding:
            80px 0 90px;

    }

    .savora-experience-content h2 {

        font-size: 44px;

    }

    .savora-experience-image {

        height: 380px;

    }


    /* Why Savora */

    .savora-why {

        padding:
            80px 0 90px;

    }

    .savora-why-heading h2 {

        font-size: 44px;

    }

    .savora-why-item {

        padding:
            24px 20px;

    }

    .savora-why-number {

        margin-bottom: 22px;

    }

    .savora-why-quote {

        margin-top: 55px;

    }

    .savora-why-quote p {

        font-size: 21px;

    }


    /* Visit */

    .savora-visit {

        padding:
            80px 0 90px;

    }

    .savora-visit-content h2 {

        font-size: 44px;

    }

    .savora-visit-map {

        min-height: 380px;

    }


    /* Footer */

    .savora-footer {

        padding:
            65px 0 25px;

    }

    .savora-footer-bottom {

        flex-direction: column;

        gap: 8px;

        margin-top: 50px;

    }

}
/* ==================================================
   ORDER MESSAGE
================================================== */

.savora-order-message {

    position: fixed;

    left: 50%;

    bottom: 25px;

    transform:
        translate(-50%, 120px);

    display: flex;

    align-items: center;

    gap: 20px;

    padding: 14px 18px;

    background:
        var(--savora-dark);

    color:
        var(--savora-cream);

    box-shadow:
        0 10px 35px
        rgba(0, 0, 0, 0.25);

    z-index: 9999;

    opacity: 0;

    transition:
        0.35s ease;

}

.savora-order-message.show {

    transform:
        translate(-50%, 0);

    opacity: 1;

}

.savora-order-message span {

    font-size: 13px;

}

.savora-order-message button {

    padding:
        9px 14px;

    border: none;

    background:
        var(--savora-warm);

    color: white;

    font-size: 12px;

    cursor: pointer;

}

.savora-order-message button:hover {

    background: #b86531;

}


@media (max-width: 576px) {

    .savora-order-message {

        width: calc(100% - 30px);

        justify-content: space-between;

        gap: 10px;

        bottom: 15px;

    }

}