/* =========================================
   BELLA VISTA ITALIAN KITCHEN
   PREMIUM RESTAURANT WEBSITE
========================================= */


/* =========================================
   GOOGLE FONT IMPORT
========================================= */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap');


/* =========================================
   ROOT VARIABLES
========================================= */

:root {

    --cream: #f8f3eb;
    --cream-light: #fcfaf6;
    --white: #ffffff;

    --espresso: #2b211c;
    --espresso-light: #51443c;

    --terracotta: #b75c3c;
    --terracotta-dark: #93472f;

    --gold: #b8955b;

    --border: #e8ded2;

    --shadow-soft:
        0 15px 40px rgba(43, 33, 28, 0.08);

    --shadow-card:
        0 12px 30px rgba(43, 33, 28, 0.10);

    --heading:
        "Playfair Display",
        Georgia,
        serif;

    --body:
        "DM Sans",
        Arial,
        sans-serif;

}


/* =========================================
   RESET
========================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    font-family: var(--body);

    background: var(--cream-light);

    color: var(--espresso);

    line-height: 1.7;

    overflow-x: hidden;

}


img {

    width: 100%;

    display: block;

}


button,
input,
select,
textarea {

    font: inherit;

}


button {

    cursor: pointer;

}


a {

    text-decoration: none;

    color: inherit;

}


/* =========================================
   CONTAINER
========================================= */

.nav-container,
.quick-info-container,
.story-container,
.contact-container,
.about-container,
.reservation-container {

    width: min(1180px, 92%);

    margin: 0 auto;

}


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

.navbar {

    position: sticky;

    top: 0;

    z-index: 1000;

    background:
        rgba(252, 250, 246, 0.94);

    backdrop-filter: blur(14px);

    border-bottom:
        1px solid rgba(232, 222, 210, 0.8);

}


.nav-container {

    min-height: 82px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

}


/* LOGO */

.logo {

    display: flex;

    flex-direction: column;

    line-height: 1;

}


.logo-main {

    font-family: var(--heading);

    font-size: 25px;

    font-weight: 700;

    letter-spacing: -0.5px;

}


.logo-sub {

    margin-top: 6px;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 3px;

    color: var(--terracotta);

}


/* NAV LINKS */

.nav-links {

    display: flex;

    align-items: center;

    gap: 25px;

}


.nav-links a {

    font-size: 13px;

    font-weight: 600;

    color: var(--espresso-light);

    transition:
        color 0.25s ease;

}


.nav-links a:hover {

    color: var(--terracotta);

}


.nav-links .nav-reserve {

    padding:
        11px 18px;

    border-radius: 30px;

    color: var(--white);

    background:
        var(--espresso);

    transition:
        transform 0.25s ease,
        background 0.25s ease;

}


.nav-links .nav-reserve:hover {

    color: var(--white);

    background:
        var(--terracotta);

    transform:
        translateY(-2px);

}


/* MOBILE MENU BUTTON */

.menu-toggle {

    display: none;

    border: 0;

    background: transparent;

    font-size: 28px;

    color: var(--espresso);

}


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

.hero {

    width: min(1180px, 92%);

    min-height: 680px;

    margin: 0 auto;

    padding:
        85px 0 75px;

    display: grid;

    grid-template-columns:
        1.05fr
        0.95fr;

    align-items: center;

    gap: 70px;

}


/* HERO CONTENT */

.hero-content {

    max-width: 600px;

}


.hero-label {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 22px;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 3px;

    color: var(--terracotta);

}


.hero-label::before {

    content: "";

    width: 32px;

    height: 1px;

    background:
        var(--terracotta);

}


.hero h1 {

    font-family: var(--heading);

    font-size:
        clamp(58px, 7vw, 92px);

    line-height: 0.98;

    font-weight: 700;

    letter-spacing: -3px;

}


.hero h1 span {

    display: block;

    color: var(--terracotta);

    font-style: italic;

}


.hero p {

    max-width: 550px;

    margin:
        30px 0;

    color: var(--espresso-light);

    font-size: 16px;

    line-height: 1.9;

}


/* HERO BUTTONS */

.hero-buttons {

    display: flex;

    align-items: center;

    gap: 14px;

    flex-wrap: wrap;

}


.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 50px;

    padding:
        0 23px;

    border-radius: 4px;

    font-size: 13px;

    font-weight: 700;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;

}


.btn:hover {

    transform:
        translateY(-3px);

}


.btn-primary {

    background:
        var(--espresso);

    color:
        var(--white);

    box-shadow:
        0 10px 25px
        rgba(43, 33, 28, 0.16);

}


.btn-primary:hover {

    background:
        var(--terracotta);

}


.btn-outline {

    border:
        1px solid var(--espresso);

    color:
        var(--espresso);

    background:
        transparent;

}


.btn-outline:hover {

    background:
        var(--espresso);

    color:
        var(--white);

}


/* HERO NOTE */

.hero-note {

    display: flex;

    align-items: center;

    gap: 9px;

    margin-top: 27px;

    font-size: 12px;

    color: #766960;

}


.hero-note span {

    color:
        var(--gold);

}


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

.hero-image {

    position: relative;

    max-width: 460px;

    justify-self: end;

    padding:
        18px 18px 65px 18px;

}


.hero-image-frame {

    position: relative;

    overflow: hidden;

    border-radius:
        190px 190px 18px 18px;

    box-shadow:
        0 25px 55px
        rgba(43, 33, 28, 0.17);

    animation:
        heroFloat 5s ease-in-out infinite;

}


.hero-image-frame::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(43, 33, 28, 0.10),
            transparent 45%
        );

}


.hero-image-frame img {

    aspect-ratio: 0.78;

    object-fit: cover;

    transition:
        transform 0.7s ease;

}


.hero-image-frame:hover img {

    transform:
        scale(1.04);

}


/* DECORATIVE FRAME */

.hero-image::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 92%;

    border:
        1px solid rgba(184, 149, 91, 0.55);

    border-radius:
        190px 190px 18px 18px;

    transform:
        translate(-7px, 7px);

    z-index: -1;

}


/* HERO CAPTION */

.hero-image-caption {

    position: absolute;

    bottom: 0;

    left: 0;

    display: flex;

    flex-direction: column;

    gap: 2px;

    padding:
        17px 22px;

    background:
        var(--white);

    border-radius: 8px;

    box-shadow:
        var(--shadow-card);

    min-width: 205px;

}


.hero-image-caption strong {

    font-family:
        var(--heading);

    font-size: 17px;

}


.hero-image-caption span {

    font-size: 11px;

    color:
        #796c64;

}


/* HERO FLOAT */

@keyframes heroFloat {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-10px);

    }

}


/* =========================================
   QUICK INFO
========================================= */

.quick-info {

    background:
        var(--espresso);

    color:
        var(--white);

}


.quick-info-container {

    display: grid;

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

}


.quick-item {

    display: flex;

    align-items: center;

    gap: 16px;

    padding:
        25px 30px;

    border-right:
        1px solid rgba(255, 255, 255, 0.12);

}


.quick-item:last-child {

    border-right: 0;

}


.quick-icon {

    width: 43px;

    height: 43px;

    display: grid;

    place-items: center;

    border-radius: 50%;

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

    font-size: 17px;

}


.quick-item div:last-child {

    display: flex;

    flex-direction: column;

}


.quick-item span {

    font-size: 9px;

    letter-spacing: 2px;

    color:
        #bcb0a8;

}


.quick-item strong {

    margin-top: 2px;

    font-size: 13px;

}


/* =========================================
   GENERAL SECTION HEADING
========================================= */

.section-heading {

    max-width: 700px;

    margin:
        0 auto 50px;

    text-align: center;

}


.eyebrow {

    margin-bottom: 13px;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 3px;

    color:
        var(--terracotta);

}


.section-heading h2,
.story-content h2,
.about-content h2,
.reservation-heading h2,
.contact-heading h2 {

    font-family:
        var(--heading);

    font-size:
        clamp(38px, 5vw, 58px);

    line-height: 1.1;

    letter-spacing: -1.5px;

}


.section-heading h2 span,
.story-content h2 span,
.about-content h2 span,
.reservation-heading h2 span,
.contact-heading h2 span {

    color:
        var(--terracotta);

    font-style: italic;

}


.section-heading p {

    max-width: 570px;

    margin:
        20px auto 0;

    color:
        #74675f;

    font-size: 14px;

}


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

.menu-section {

    padding:
        110px 0;

    background:
        var(--cream-light);

}


/* MENU FILTERS */

.menu-filters {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 9px;

    margin-bottom: 42px;

}


.menu-filter {

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

    background:
        var(--white);

    color:
        var(--espresso-light);

    padding:
        9px 17px;

    border-radius: 30px;

    font-size: 11px;

    font-weight: 700;

    transition:
        all 0.25s ease;

}


.menu-filter:hover {

    border-color:
        var(--terracotta);

    color:
        var(--terracotta);

}


.menu-filter.active {

    background:
        var(--espresso);

    color:
        var(--white);

    border-color:
        var(--espresso);

}


/* MENU GRID */

.menu-grid {

    width: min(1120px, 92%);

    margin: 0 auto;

    display: grid;

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

    gap: 22px;

}


/* MENU CARD */

.menu-card {

    overflow: hidden;

    background:
        var(--white);

    border:
        1px solid #eee5dc;

    border-radius: 12px;

    box-shadow:
        0 5px 20px
        rgba(43, 33, 28, 0.04);

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

}


.menu-card:hover {

    transform:
        translateY(-8px);

    box-shadow:
        var(--shadow-card);

}


/* MENU IMAGE */

.menu-image {

    position: relative;

    overflow: hidden;

}


.menu-image img {

    height: 225px;

    object-fit: cover;

    transition:
        transform 0.6s ease;

}


.menu-card:hover
.menu-image img {

    transform:
        scale(1.06);

}


/* MENU TAG */

.menu-tag {

    position: absolute;

    top: 13px;

    left: 13px;

    padding:
        6px 10px;

    background:
        var(--white);

    border-radius: 20px;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.3px;

    color:
        var(--terracotta);

    box-shadow:
        0 5px 15px
        rgba(43, 33, 28, 0.10);

}


/* MENU CONTENT */

.menu-card-content {

    padding:
        20px;

}


.menu-card-title {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 10px;

}


.menu-card-title h3 {

    font-family:
        var(--heading);

    font-size: 19px;

    line-height: 1.2;

}


.menu-card-title span {

    flex-shrink: 0;

    font-size: 15px;

    font-weight: 700;

    color:
        var(--terracotta);

}


.menu-card-content p {

    margin-top: 9px;

    font-size: 11px;

    line-height: 1.7;

    color:
        #796c64;

}


/* =========================================
   STORY SECTION
========================================= */

.story-section {

    padding:
        115px 0;

    background:
        var(--white);

}


.story-container {

    display: grid;

    grid-template-columns:
        0.9fr 1.1fr;

    align-items: center;

    gap: 80px;

}


/* STORY IMAGE */

.story-image {

    position: relative;

    padding:
        15px;

}


.story-image::before {

    content: "";

    position: absolute;

    inset: 0;

    border:
        1px solid var(--gold);

    border-radius:
        10px;

    transform:
        translate(-9px, 9px);

    opacity: 0.6;

}


.story-image img {

    position: relative;

    z-index: 1;

    height: 540px;

    object-fit: cover;

    border-radius:
        10px;

    box-shadow:
        var(--shadow-soft);

}


/* STORY BADGE */

.story-image-badge {

    position: absolute;

    right: -12px;

    bottom: 25px;

    z-index: 3;

    width: 135px;

    height: 135px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    background:
        var(--terracotta);

    color:
        var(--white);

    border-radius: 50%;

    box-shadow:
        0 15px 35px
        rgba(43, 33, 28, 0.18);

}


.story-image-badge strong {

    font-family:
        var(--heading);

    font-size: 32px;

    line-height: 1;

}


.story-image-badge span {

    width: 90px;

    margin-top: 5px;

    font-size: 9px;

    line-height: 1.4;

}


/* STORY CONTENT */

.story-content {

    max-width: 540px;

}


.story-content h2 {

    margin-bottom:
        24px;

}


.story-content > p {

    margin-bottom:
        17px;

    color:
        #74675f;

    font-size: 14px;

    line-height: 1.9;

}


/* STORY DETAILS */

.story-details {

    display: grid;

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

    gap: 20px;

    margin-top: 30px;

    padding-top: 25px;

    border-top:
        1px solid var(--border);

}


.story-details div {

    display: flex;

    flex-direction: column;

}


.story-details strong {

    font-size: 12px;

}


.story-details span {

    margin-top: 4px;

    font-size: 10px;

    color:
        #897a70;

}


/* =========================================
   INTERIOR
========================================= */

.interior-section {

    padding:
        110px 0;

    background:
        var(--cream);

}


.interior-grid {

    width: min(1120px, 92%);

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        1.5fr 0.75fr 0.75fr;

    grid-template-rows:
        400px;

    gap: 18px;

}


.interior-main,
.interior-small {

    position: relative;

    overflow: hidden;

    border-radius:
        12px;

}


.interior-main img,
.interior-small img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:
        transform 0.7s ease;

}


.interior-main:hover img,
.interior-small:hover img {

    transform:
        scale(1.05);

}


/* INTERIOR OVERLAY */

.interior-overlay {

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    padding:
        70px 30px 28px;

    color:
        var(--white);

    background:
        linear-gradient(
            transparent,
            rgba(43, 33, 28, 0.85)
        );

}


.interior-overlay span {

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 2px;

}


.interior-overlay h3 {

    margin-top: 5px;

    font-family:
        var(--heading);

    font-size: 27px;

}


/* SMALL IMAGE LABEL */

.interior-small-label {

    position: absolute;

    left: 15px;

    bottom: 15px;

    padding:
        8px 12px;

    border-radius: 20px;

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

    font-size: 10px;

    font-weight: 700;

}


/* =========================================
   GALLERY
========================================= */

.gallery-section {

    padding:
        110px 0;

    background:
        var(--white);

}


.gallery-grid {

    width: min(1120px, 92%);

    margin: 0 auto;

    display: grid;

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

    grid-auto-rows:
        220px;

    gap: 15px;

}


.gallery-item {

    overflow: hidden;

    border-radius:
        10px;

}


.gallery-item img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:
        transform 0.7s ease;

}


.gallery-item:hover img {

    transform:
        scale(1.06);

}


.gallery-tall {

    grid-row:
        span 2;

}


/* =========================================
   ABOUT
========================================= */

.about-section {

    padding:
        115px 0;

    background:
        var(--cream);

}


.about-container {

    display: grid;

    grid-template-columns:
        1fr 0.9fr;

    align-items: center;

    gap: 80px;

}


.about-content {

    max-width: 560px;

}


.about-content h2 {

    margin-bottom:
        25px;

}


.about-content p {

    margin-bottom:
        16px;

    color:
        #74675f;

    font-size: 14px;

    line-height: 1.9;

}


.about-signature {

    margin-top:
        30px;

    font-family:
        var(--heading);

    font-size:
        28px;

    font-style: italic;

    color:
        var(--terracotta);

}


.about-image {

    overflow: hidden;

    border-radius:
        12px;

    box-shadow:
        var(--shadow-soft);

}


.about-image img {

    height: 470px;

    object-fit: cover;

    transition:
        transform 0.7s ease;

}


.about-image:hover img {

    transform:
        scale(1.04);

}


/* =========================================
   REVIEWS
========================================= */

.reviews-section {

    padding:
        110px 0;

    background:
        var(--white);

}


.reviews-grid {

    width: min(1050px, 92%);

    margin: 0 auto;

    display: grid;

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

    gap: 22px;

}


.review-card {

    padding:
        30px;

    background:
        var(--cream-light);

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

    border-radius:
        10px;

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

}


.review-card:hover {

    transform:
        translateY(-6px);

    box-shadow:
        var(--shadow-soft);

}


.review-stars {

    margin-bottom:
        15px;

    letter-spacing:
        3px;

    color:
        var(--gold);

    font-size:
        13px;

}


.review-card p {

    margin-bottom:
        22px;

    color:
        #63564e;

    font-family:
        var(--heading);

    font-size:
        16px;

    line-height:
        1.65;

    font-style:
        italic;

}


.review-card strong {

    display: block;

    font-size:
        12px;

}


.review-card > span {

    display: block;

    margin-top:
        2px;

    font-size:
        10px;

    color:
        #95877e;

}


/* =========================================
   RESERVATION
========================================= */

.reservation-section {

    padding:
        115px 0;

    background:
        var(--espresso);

    color:
        var(--white);

}


.reservation-container {

    max-width:
        900px;

}


.reservation-heading {

    max-width:
        650px;

    margin:
        0 auto 45px;

    text-align:
        center;

}


.reservation-heading .eyebrow {

    color:
        #d5a875;

}


.reservation-heading h2 {

    color:
        var(--white);

}


.reservation-heading h2 span {

    color:
        #d99876;

}


.reservation-heading p {

    margin-top:
        18px;

    color:
        #c5b9b1;

    font-size:
        13px;

}


/* FORM */

.reservation-form {

    padding:
        38px;

    background:
        #352a24;

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

    border-radius:
        12px;

    box-shadow:
        0 25px 60px
        rgba(0,0,0,0.18);

}


.form-row {

    display:
        grid;

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

    gap:
        20px;

}


.form-group {

    display:
        flex;

    flex-direction:
        column;

    margin-bottom:
        20px;

}


.form-group label {

    margin-bottom:
        8px;

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        1.2px;

    color:
        #d5cbc5;

}


.form-group input,
.form-group select,
.form-group textarea {

    width:
        100%;

    padding:
        13px 14px;

    border:
        1px solid rgba(255,255,255,0.13);

    border-radius:
        6px;

    outline:
        none;

    background:
        #2c231f;

    color:
        var(--white);

    font-size:
        12px;

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease;

}


.form-group input::placeholder,
.form-group textarea::placeholder {

    color:
        #847871;

}


.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {

    border-color:
        #c77b5b;

    box-shadow:
        0 0 0 3px
        rgba(199,123,91,0.10);

}


.form-group textarea {

    resize:
        vertical;

    min-height:
        100px;

}


/* RESERVATION BUTTON */

.reservation-submit {

    width:
        100%;

    border:
        0;

    border-radius:
        6px;

    padding:
        15px;

    background:
        var(--terracotta);

    color:
        var(--white);

    font-size:
        12px;

    font-weight:
        700;

    transition:
        transform 0.25s ease,
        background 0.25s ease;

}


.reservation-submit:hover {

    background:
        #c96d49;

    transform:
        translateY(-2px);

}


/* FORM MESSAGE */

.form-message {

    margin-top:
        15px;

    text-align:
        center;

    color:
        #d8a77f;

    font-size:
        12px;

}


/* EDIT BUTTON */

.edit-reservation {

    display:
        block;

    margin:
        12px auto 0;

    padding:
        9px 18px;

    border:
        1px solid rgba(255,255,255,0.2);

    border-radius:
        30px;

    background:
        transparent;

    color:
        #e0d6cf;

    font-size:
        11px;

    transition:
        all 0.25s ease;

}


.edit-reservation:hover {

    background:
        var(--white);

    color:
        var(--espresso);

}


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

.contact-section {

    padding:
        110px 0;

    background:
        var(--cream-light);

}


.contact-heading {

    text-align:
        center;

    margin-bottom:
        55px;

}


.contact-heading p {

    margin-top:
        15px;

    color:
        #756960;

    font-size:
        14px;

}


.contact-content {

    display:
        grid;

    grid-template-columns:
        0.85fr 1.15fr;

    gap:
        55px;

    align-items:
        stretch;

}


/* CONTACT DETAILS */

.contact-details {

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    gap:
        25px;

}


.contact-detail {

    display:
        grid;

    grid-template-columns:
        48px 1fr;

    align-items:
        start;

    gap:
        15px;

    padding-bottom:
        22px;

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

}


.contact-detail:last-child {

    border-bottom:
        0;

}


.contact-icon {

    width:
        48px;

    height:
        48px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    background:
        #f0e5d9;

    font-size:
        17px;

}


.contact-detail div:last-child {

    display:
        flex;

    flex-direction:
        column;

}


.contact-detail span {

    margin-bottom:
        3px;

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        2px;

    color:
        var(--terracotta);

}


.contact-detail strong {

    font-size:
        13px;

}


.contact-detail p {

    margin-top:
        2px;

    font-size:
        11px;

    color:
        #7e7169;

}


/* MAP */

.map-container {

    position:
        relative;

    min-height:
        450px;

    overflow:
        hidden;

    border-radius:
        12px;

    box-shadow:
        var(--shadow-soft);

}


.map-container iframe {

    width:
        100%;

    height:
        100%;

    min-height:
        450px;

    border:
        0;

    display:
        block;

}


.map-label {

    position:
        absolute;

    top:
        18px;

    left:
        18px;

    padding:
        10px 14px;

    border-radius:
        6px;

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

    box-shadow:
        0 5px 20px
        rgba(43,33,28,0.12);

    font-size:
        11px;

    font-weight:
        700;

}


/* =========================================
   BELLA AI BUTTON
========================================= */

.ai-button {

    position:
        fixed;

    right:
        25px;

    bottom:
        25px;

    z-index:
        1200;

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    padding:
        13px 18px;

    border:
        0;

    border-radius:
        30px;

    background:
        var(--espresso);

    color:
        var(--white);

    box-shadow:
        0 12px 30px
        rgba(43,33,28,0.25);

    font-size:
        12px;

    font-weight:
        700;

    transition:
        transform 0.25s ease,
        background 0.25s ease;

}


.ai-button:hover {

    background:
        var(--terracotta);

    transform:
        translateY(-3px);

}


.ai-button span {

    color:
        #e0b779;

}


/* =========================================
   BELLA AI CHAT
========================================= */

.ai-chat {

    position:
        fixed;

    right:
        25px;

    bottom:
        82px;

    z-index:
        1199;

    width:
        350px;

    max-width:
        calc(100vw - 30px);

    overflow:
        hidden;

    background:
        var(--white);

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

    border-radius:
        15px;

    box-shadow:
        0 25px 70px
        rgba(43,33,28,0.20);

    opacity:
        0;

    visibility:
        hidden;

    transform:
        translateY(15px)
        scale(0.97);

    transition:
        all 0.3s ease;

}


.ai-chat.active {

    opacity:
        1;

    visibility:
        visible;

    transform:
        translateY(0)
        scale(1);

}


/* AI HEADER */

.ai-header {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    padding:
        17px 18px;

    background:
        var(--espresso);

    color:
        var(--white);

}


.ai-header div {

    display:
        flex;

    flex-direction:
        column;

}


.ai-header strong {

    font-family:
        var(--heading);

    font-size:
        18px;

}


.ai-header span {

    font-size:
        9px;

    color:
        #cbbdb5;

}


.ai-header button {

    width:
        30px;

    height:
        30px;

    border:
        0;

    border-radius:
        50%;

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

    color:
        var(--white);

}


/* AI MESSAGES */

.ai-messages {

    height:
        280px;

    padding:
        16px;

    overflow-y:
        auto;

    background:
        #fcfaf7;

}


.ai-message {

    max-width:
        85%;

    margin-bottom:
        10px;

    padding:
        10px 12px;

    border-radius:
        10px;

    font-size:
        11px;

    line-height:
        1.6;

}


.ai-message.bot {

    background:
        #f0e5d9;

    color:
        var(--espresso);

}


.ai-message.user {

    margin-left:
        auto;

    background:
        var(--espresso);

    color:
        var(--white);

}


/* AI SUGGESTIONS */

.ai-suggestions {

    display:
        flex;

    gap:
        7px;

    padding:
        10px;

    overflow-x:
        auto;

    border-top:
        1px solid var(--border);

}


.ai-suggestion {

    flex-shrink:
        0;

    padding:
        7px 10px;

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

    border-radius:
        20px;

    background:
        var(--white);

    color:
        var(--espresso-light);

    font-size:
        9px;

}


.ai-suggestion:hover {

    border-color:
        var(--terracotta);

    color:
        var(--terracotta);

}


/* AI FORM */

.ai-form {

    display:
        flex;

    padding:
        10px;

    gap:
        7px;

    border-top:
        1px solid var(--border);

}


.ai-form input {

    flex:
        1;

    min-width:
        0;

    padding:
        10px 12px;

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

    border-radius:
        7px;

    outline:
        none;

    font-size:
        11px;

}


.ai-form input:focus {

    border-color:
        var(--terracotta);

}


.ai-form button {

    width:
        38px;

    border:
        0;

    border-radius:
        7px;

    background:
        var(--terracotta);

    color:
        var(--white);

}


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

.whatsapp-button {

    position:
        fixed;

    left:
        25px;

    bottom:
        25px;

    z-index:
        1100;

    width:
        50px;

    height:
        50px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    background:
        #25d366;

    color:
        white;

    font-size:
        21px;

    box-shadow:
        0 10px 25px
        rgba(0,0,0,0.18);

    transition:
        transform 0.25s ease;

}


.whatsapp-button:hover {

    transform:
        translateY(-4px)
        scale(1.05);

}


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

.footer {

    padding:
        65px 0 25px;

    background:
        #211914;

    color:
        var(--white);

}


.footer-container {

    width:
        min(1120px, 92%);

    margin:
        0 auto;

    display:
        grid;

    grid-template-columns:
        1.5fr 0.7fr 0.7fr;

    gap:
        50px;

    padding-bottom:
        45px;

}


.footer-brand {

    max-width:
        360px;

}


.footer .logo-main {

    color:
        var(--white);

}


.footer .logo-sub {

    color:
        #c58a6e;

}


.footer-brand p {

    margin-top:
        17px;

    color:
        #a99c94;

    font-size:
        11px;

    line-height:
        1.8;

}


.footer-links {

    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;

}


.footer-links a {

    color:
        #c3b7b0;

    font-size:
        11px;

    transition:
        color 0.25s ease;

}


.footer-links a:hover {

    color:
        var(--white);

}


.footer-social {

    display:
        flex;

    flex-direction:
        column;

    gap:
        12px;

}


.footer-social > span {

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        1.5px;

}


.footer-social div {

    display:
        flex;

    flex-direction:
        column;

    gap:
        8px;

}


.footer-social a {

    color:
        #c3b7b0;

    font-size:
        11px;

}


.footer-social a:hover {

    color:
        var(--white);

}


/* FOOTER BOTTOM */

.footer-bottom {

    width:
        min(1120px, 92%);

    margin:
        0 auto;

    padding-top:
        22px;

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

    display:
        flex;

    justify-content:
        space-between;

    gap:
        20px;

    color:
        #81756e;

    font-size:
        9px;

}


.footer-bottom strong {

    color:
        #c58a6e;

}


/* =========================================
   SCROLL REVEAL ANIMATION
========================================= */

.reveal,
.reveal-left,
.reveal-right {

    opacity:
        0;

    transition:
        opacity 0.8s ease,
        transform 0.8s ease;

}


.reveal {

    transform:
        translateY(30px);

}


.reveal-left {

    transform:
        translateX(-35px);

}


.reveal-right {

    transform:
        translateX(35px);

}


.reveal.show,
.reveal-left.show,
.reveal-right.show {

    opacity:
        1;

    transform:
        translate(0);

}


/* =========================================
   SELECTION
========================================= */

::selection {

    background:
        var(--terracotta);

    color:
        var(--white);

}


/* =========================================
   SCROLLBAR
========================================= */

::-webkit-scrollbar {

    width:
        8px;

}


::-webkit-scrollbar-track {

    background:
        var(--cream);

}


::-webkit-scrollbar-thumb {

    background:
        #b8a99d;

    border-radius:
        20px;

}


::-webkit-scrollbar-thumb:hover {

    background:
        var(--terracotta);

}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1050px) {

    .nav-links {

        gap:
            16px;

    }


    .nav-links a {

        font-size:
            11px;

    }


    .hero {

        gap:
            40px;

    }


    .menu-grid {

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

    }


    .interior-grid {

        grid-template-columns:
            1fr 1fr;

        grid-template-rows:
            330px 220px;

    }


    .interior-main {

        grid-column:
            1 / -1;

    }


    .contact-content {

        gap:
            35px;

    }

}


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

@media (max-width: 768px) {


    /* NAV */

    .nav-container {

        min-height:
            72px;

    }


    .menu-toggle {

        display:
            block;

    }


    .nav-links {

        position:
            absolute;

        top:
            72px;

        left:
            0;

        right:
            0;

        display:
            flex;

        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            0;

        padding:
            10px 5% 20px;

        background:
            rgba(252,250,246,0.98);

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

        box-shadow:
            0 15px 25px
            rgba(43,33,28,0.08);

        opacity:
            0;

        visibility:
            hidden;

        transform:
            translateY(-10px);

        transition:
            all 0.25s ease;

    }


    .nav-links.active {

        opacity:
            1;

        visibility:
            visible;

        transform:
            translateY(0);

    }


    .nav-links a {

        padding:
            12px 0;

        font-size:
            13px;

        border-bottom:
            1px solid #eee6de;

    }


    .nav-links .nav-reserve {

        margin-top:
            10px;

        text-align:
            center;

        border:
            0;

    }


    /* HERO */

    .hero {

        min-height:
            auto;

        padding:
            65px 0 70px;

        grid-template-columns:
            1fr;

        gap:
            45px;

    }


    .hero-content {

        max-width:
            100%;

        text-align:
            center;

    }


    .hero-label {

        justify-content:
            center;

    }


    .hero h1 {

        font-size:
            clamp(52px, 15vw, 72px);

    }


    .hero p {

        margin:
            25px auto;

        max-width:
            500px;

        font-size:
            14px;

    }


    .hero-buttons {

        justify-content:
            center;

    }


    .hero-note {

        justify-content:
            center;

    }


    .hero-image {

        width:
            min(430px, 90%);

        margin:
            0 auto;

        justify-self:
            center;

    }


    /* QUICK INFO */

    .quick-info-container {

        grid-template-columns:
            1fr;

    }


    .quick-item {

        justify-content:
            center;

        border-right:
            0;

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

    }


    .quick-item:last-child {

        border-bottom:
            0;

    }


    /* SECTIONS */

    .menu-section,
    .story-section,
    .interior-section,
    .gallery-section,
    .about-section,
    .reviews-section,
    .reservation-section,
    .contact-section {

        padding:
            80px 0;

    }


    .section-heading {

        margin-bottom:
            38px;

    }


    .section-heading h2,
    .story-content h2,
    .about-content h2,
    .reservation-heading h2,
    .contact-heading h2 {

        font-size:
            40px;

    }


    /* MENU */

    .menu-grid {

        grid-template-columns:
            1fr;

        width:
            min(430px, 92%);

    }


    .menu-image img {

        height:
            245px;

    }


    /* STORY */

    .story-container {

        grid-template-columns:
            1fr;

        gap:
            55px;

    }


    .story-content {

        max-width:
            100%;

        text-align:
            center;

    }


    .story-image img {

        height:
            450px;

    }


    .story-details {

        text-align:
            left;

    }


    /* INTERIOR */

    .interior-grid {

        grid-template-columns:
            1fr;

        grid-template-rows:
            320px 220px 220px;

    }


    .interior-main {

        grid-column:
            auto;

    }


    /* GALLERY */

    .gallery-grid {

        grid-template-columns:
            1fr 1fr;

        grid-auto-rows:
            190px;

    }


    .gallery-tall {

        grid-row:
            span 1;

    }


    /* ABOUT */

    .about-container {

        grid-template-columns:
            1fr;

        gap:
            45px;

    }


    .about-content {

        text-align:
            center;

        max-width:
            100%;

    }


    .about-image img {

        height:
            390px;

    }


    /* REVIEWS */

    .reviews-grid {

        grid-template-columns:
            1fr;

        width:
            min(430px, 92%);

    }


    /* RESERVATION */

    .reservation-form {

        padding:
            25px 20px;

    }


    .form-row {

        grid-template-columns:
            1fr;

        gap:
            0;

    }


    /* CONTACT */

    .contact-content {

        grid-template-columns:
            1fr;

    }


    .map-container,
    .map-container iframe {

        min-height:
            350px;

    }


    /* FOOTER */

    .footer-container {

        grid-template-columns:
            1fr;

        gap:
            35px;

        text-align:
            center;

    }


    .footer-brand {

        margin:
            0 auto;

    }


    .footer-links,
    .footer-social {

        align-items:
            center;

    }


    .footer-bottom {

        flex-direction:
            column;

        text-align:
            center;

    }


    /* FLOATING BUTTONS */

    .ai-button {

        right:
            15px;

        bottom:
            15px;

        padding:
            12px 15px;

    }


    .whatsapp-button {

        left:
            15px;

        bottom:
            15px;

    }


    .ai-chat {

        right:
            15px;

        bottom:
            75px;

    }

}


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

@media (max-width: 450px) {

    .logo-main {

        font-size:
            21px;

    }


    .logo-sub {

        font-size:
            7px;

        letter-spacing:
            2px;

    }


    .hero {

        padding-top:
            50px;

    }


    .hero h1 {

        font-size:
            50px;

        letter-spacing:
            -2px;

    }


    .hero-buttons {

        flex-direction:
            column;

        width:
            100%;

    }


    .btn {

        width:
            100%;

    }


    .hero-image {

        width:
            94%;

    }


    .hero-image-caption {

        min-width:
            175px;

        padding:
            13px 16px;

    }


    .hero-image-caption strong {

        font-size:
            14px;

    }


    .story-details {

        grid-template-columns:
            1fr;

    }


    .gallery-grid {

        grid-template-columns:
            1fr;

        grid-auto-rows:
            230px;

    }


    .reservation-heading h2,
    .contact-heading h2,
    .section-heading h2,
    .story-content h2,
    .about-content h2 {

        font-size:
            36px;

    }


    .ai-chat {

        width:
            calc(100vw - 30px);

    }

}