/* Hero Section */
.hero {
    margin-top: -10vh;
    height: 103vh;
    width: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5)),
                url(../img/home/heroBG.jpg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
}

.hero-content {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1.5s  0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;

    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    padding: 0 12.5% 0 55%;
}

.hero-content h1 {
    width: 100%;
    font-size: clamp(4rem, 2.393rem + 4.286vw, 6.25rem);
    margin-bottom: 1rem;
    letter-spacing: 0.2em;
    text-transform: capitalize;
    color: white;

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

.subtitle {
    font-size: clamp(1.2rem, 0.629rem + 1.524vw, 2rem);
    letter-spacing: 0.3em;
    margin-top: 1.5rem;
    text-transform: uppercase;
    color: white;
}

/* ---------------- PHILOSOPHY ----------------- */
.philosophy {
    padding: 10rem 12.5%;
    background-color: var(--background-primary);

    font-size: clamp(0.9rem, 0.686rem + 0.571vw, 1.2rem);
}

.philosophy-title {
    font-size: clamp(1.9rem, 1.471rem + 1.143vw, 2.5rem);
    letter-spacing: .3em;
    font-family: AzoSans-Thin;
}

.philosophy-subtitle {
    margin-top: 1rem;
}

.philosophy-content {
    margin-top: 2rem;

    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    gap: 2rem;

    /* position: relative; */
}

.philosophy-text-container {
    flex: 1;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    margin-right: auto;
    gap: 2rem;
}

.philosophy-text-container p {
    max-width: 510px;
    width: 100%;
}


.philosophy-images {
    flex: 2;
    /* position: relative; */
    height: 700px;


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

.philosophy-pattern {
    height: 625px;
    aspect-ratio: 1 / 1;

    background: url(../img/home/pattern-philosophy-1.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    object-fit: cover;

    position: relative;
    z-index: 9;

}

.philosophy-dish {
    height: 600px;
    aspect-ratio: 1 / 1;

    background: url(../img/home/philosophy-img.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    object-fit: cover;

    position: absolute;
    z-index: 99;
    top: 2.5%;
    right: 2.5%;
}


/* ------------------ STORY ------------------ */
.story {
    padding: 10rem 12.5%;
    width: 100%;
}

.story-title {
    font-size: clamp(1.9rem, 1.471rem + 1.143vw, 2.5rem);
    letter-spacing: .3em;
    font-family: AzoSans-Thin;
}

.story-content {
    margin-top: 3rem;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: stretch;

    gap: 2rem;
}

.story-chef {
    flex: 1;
    width: 100%;

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

.story-chef-img {
    flex: 1;
    min-width: 300px;
    background-image: url(../img/home/chef2.jpeg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    object-fit: cover;

    max-width: 60%;
    aspect-ratio: 5 / 7 ;
}

.story-text-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
}

.story-text-top h3 {
    text-transform: capitalize;
    font-size: clamp(1.2rem, 0.629rem + 1.524vw, 2rem);
    font-family: Azosans-Thin;
}

.story-text-top p {
    margin-top: 1rem;
    margin-bottom: .5rem;
    font-size: clamp(0.9rem, 0.686rem + 0.571vw, 1.2rem);
    max-width: 550px;
    font-style: italic;
}

.story-text-top-by {
    font-family: Azosans-Light;
    color: var(--primary-color);
}

.story-text-bottom {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    gap: 2rem;
}

.story-text-bottom p {
    max-width: 640px;
}


/* ------------------ STORY EXPERIENCE DIVIDER ------------------ */

.story-exp-divider {
    width: 100%;
    height: 569px;
}

.story-exp-divider-img {
    height: 100%;

    background-image: url(../img/home/Betterimage.ai_1731467271994.jpeg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}


/* ------------------ EXPERIENCE ------------------ */
.experience {
    padding: 10rem 12.5%;
    background-color: var(--background-primary);
}

.experience-container {
    width: 100%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
}

.experience-container h2 {
    font-size: clamp(1.9rem, 1.471rem + 1.143vw, 2.5rem);
    letter-spacing: .3em;
    font-family: AzoSans-Thin;
    text-align: center;
}

.experience-content {
    margin-top: 5rem;
    width: 100%;

    display: flex;
    flex-flow: row nowrap;
    justify-content: space-evenly;
    align-items: center;
    gap: 4rem;

}

.experience-item {
    min-width: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 2rem;
}


.experience-item-deco {
    width: 40px;
    height: 2px;
    background-color: var(--primary-color);
}

.experience-item h3 {
    text-transform: capitalize;
    color: var(--font-color-primary);
}

.experience-item p {
    max-width: 290px;
}

.item1 .experience-item-image {
    aspect-ratio: 6 / 5;
    height: 269px;

    background-image: url(../img/home/caviar.jpg);
    background-size: cover;
    background-position: center 0;
    background-repeat: no-repeat;
}

.item2 .experience-item-image {
    height: 269px;
    aspect-ratio: 6 / 5;

    background-image: url(../img/home/shushi-box.jpg);
    background-size: cover;
    background-position: center 100%;
    background-repeat: no-repeat;
}

.item3 .experience-item-image {
    height: 269px;
    aspect-ratio: 6 / 5;

    background-image: url(../img/home/sushi-maker.jpg);
    background-size: cover;
    background-position: center 30%;
    background-repeat: no-repeat;
}


/* ------------------ RECOGNITION ------------------ */
.recognition {
    padding: 10rem 12.5%;
    animation: fadeIn 1s ease-in-out;
}

.recognition-container h2 {
    font-size: clamp(1.9rem, 1.471rem + 1.143vw, 2.5rem);
    letter-spacing: .3em;
    font-family: AzoSans-Thin;
    text-align: center;
}

.awards-list {
    width: 100%;
    margin-top: 3rem;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    align-items: stretch;
    gap: 2rem;
}

.award {
    padding: 3rem 5rem;
    min-width: 333px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;

    box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 12px;
    transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}

.award:hover {
    transform: translateY(-10px);
}

.fa-mitten, .fa-trophy {
    font-size: 32px;
}

.award .year {
    font-size: 1.2rem;
    font-family: Azosans-Light;
    color: var(--primary-color);
}

.award p {
    text-align: center;
}

.svg-michelin {
    padding-top: 1rem;
}

/* ------------------ ANIMATIONS ------------------ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}




/* ------------------ MEDIA QUERIES ------------------ */

@media screen and (max-width: 1460px) {
    .experience-content {
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }
}


@media screen and (max-width: 1336px) {
    /* section {
        background-color: rgb(68, 208, 13);
    } */

    .philosophy-content {
        flex-direction: column;
        gap: 2rem;
    }

    .philosophy-text-container {
        width: 100%;
        align-items: center;
    }

    .philosophy-images {
        width: 100%;
    }
}

@media screen and (max-width: 1154px) {
    /* body {
        background-color: red
    } */
    .philosophy-pattern {
        height: 475px;
    }

    .philosophy-dish {
        height: 450px;
    }


    .philosophy {
        padding: 6rem 6.25%;
    }

    .story {
        padding: 6rem 6.25%;
    }

    .experience {
        padding: 6rem 6.25%;
    }

    .recognition {
        padding: 6rem 6.25%;
    }

    .awards-list {
        flex-wrap: wrap;
    }

    .award {
        width: 48%;
    }
}

@media screen and (max-width: 673px) {
    /* body {
        background-color: green
    } */

    .philosophy-pattern {
        height: 350px;
    }

    .philosophy-dish {
        height: 325px;
        right: 3.7%;
        top: 3.5%;
    }

    .story-content {
        flex-direction: column;
        gap: 2rem;
    }
}


@media screen and (max-width: 788px) {
    /* body {
        background-color: green
    } */

    .award {
        width: 100%;
    }
}