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

@font-face {
    font-family: Inter;
    src: url("assets/fonts/Inter-VariableFont_slnt\,wght.ttf");
}

html {
    scroll-behavior: smooth;
    max-width: 100vw;
}

body {    
    margin: 0;
    padding: 0;
    max-width: 100%;
}

.container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    min-height: 100vh;
    margin: 0 auto;
    padding: 0;
    background-color: #E1D4C9;
}

.main {
    display: flex;
    flex-direction: column;
    align-items:center;
    padding: 0 40px;
}

.header,
.main,
.footer {
    width: 100%;
    max-width: 1440px;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px 0 40px;
    margin-top: 20px;
    
}

.nav-list {
    display: flex;
    justify-content: center;
    gap: 40px;
}

.nav-link {
    position: relative;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%;
    text-decoration: none;
    color: #403F3D;
}

.nav-link::after,
.footer-number-info::after {
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 100%;
    height: 2px;
    background-color: #403F3D;
    content: '';
    opacity: 0;
    transform: scaleX(0);
    transition: 0.6s;
}

.nav-item {
    list-style-type: none;
}

.menu {
    position: relative;
    display: flex;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    text-decoration: none;
    color: #403F3D;
    font-weight: 600;
    line-height: 150%;
    gap: 8px;
    margin-bottom: 10px;
}

.menu1 {
    position: relative;
    display: flex;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    color: #403F3D;
    font-weight: 600;
    line-height: 150%;
    gap: 8px;
    margin-bottom: 10px;
}

.menu1::after {
    position: absolute;
    left: 0;
    bottom: -4px;
    content: '';
    width: 100%;
    height: 2px;
    background-color: #403F3D;
}

.menu::after {
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 100%;
    height: 2px;
    background-color: #403F3D;
    content: '';
    opacity: 0;
    transform: scaleX(0);
    transition: 0.6s;
}

.nav {
    margin-right: 40px;
    margin-bottom: 10px;
}

.section-enjoy {
    background-position: center;
    background-image: url(assets/img/foto_enjoy.jpg);
    border-radius: 40px;
    width: 1360px;
    height: 644px;
    background-size: cover;
    background-repeat: no-repeat;
    margin-top: 15px;
}

.enjoy {
    display: flex;
    max-width: 1360px;
    padding: 100px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 40px;
    width: 730px;
}

.text-big {
    font-family: Inter;
    font-size: 60px;
    font-style: normal;
    font-weight: 600;
    line-height: 125%;
    color: #403F3D;
}

.enjoy-title {
    width: 530px;
} 

.enjoy-title .text-big {
    font-size: 72px;
    color: #E1D4C9;
    line-height: 105%;
}

.specific {
    font-family: Inter;
    font-size: 60px;
    font-style: italic;
    font-weight: 600;
    line-height: 125%;
    color:  #B0907A;
}

#section-favorite {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-top: 100px;
}

.favorite-position {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 40px;
}

.right-arrow,
.left-arrow {
    cursor: pointer;
    transition: 0.3s;
}

.right-arrow rect,
.left-arrow rect {
    transition: 0.3s;
}

.right-arrow path,
.left-arrow path {
    transition: 0.3s;
}

.enjoy-title .specific {
    font-size: 72px;
    line-height: 105%;
}

.enjoy-text {
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    color: #E1D4C9;
    width: 100%;
}

.button-menu {
    position: relative;
    justify-content: center;
    align-items: center;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%;
    text-align: center;
    color: #403F3D;
    text-decoration: none;
    display: flex;
    cursor: pointer;
    width: 200px;
    height: 64px;
    transition: 0.5s;
    
    gap: 8px;
    border-radius: 100px;
    background-color: #E1D4C9;
}

.button-menu svg {
    position: absolute;
    margin-left: 30px;
}

.button-menu svg {
    opacity: 0;
}

.button-menu svg {
    opacity: 0;
    transition: 0.5s;
}

.button-menu .menu-button-svg {
    transition: 0.5s;
}

.favorite-coffee {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    gap: 16px;
}

.favorite-information-slides {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 5px;
}

.favorite-title {
    text-align: center;
}

.name-coffee {
    font-family: Inter;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 125%;
    text-align: center;
    color: #403F3D;
}

.slider-coffee-text {
    font-family: Inter;
    font-size: 24px;
    font-style: normal;
    text-align: center;
    font-weight: 600;
    line-height: 125%;
    font-weight: 400;
    font-weight: bold;
    color:  #403F3D;
    width: 480px;
}

.coffee-text {
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    text-align: center;
    font-weight: 400;
    line-height: 150%;
    width: 480px;
}

.price {
    font-family: Inter;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 125%;
    text-align: center;
    color: #403F3D;
}

.favorite-lines {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 40px;
}

.favorite-lines1 {
    width: 40px;
    height: 4px;
    border-radius: 100px;
    background: #665F55;
}

.favorite-lines2 {
    width: 40px;
    height: 4px;
    border-radius: 100px;
    background:  #C1B6AD;
}

.favorite-lines3 {
    width: 40px;
    height: 4px;
    border-radius: 100px;
    background:  #C1B6AD;
}

#about {
    justify-content: center;
    margin-top: 100px;
}

.photos-left {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.photos-right {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.clients-photos {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
}

.client-photo-one {
    width: 660px;
    height: 590px;
    background-position: center;
    background-image: url(assets/img/photo-left1.jpg);
    background-size: 110%;
    border-radius: 20px
}

.client-photo-two {
    width: 660px;
    height: 430px;
    background-position: center;
    background-image: url(assets/img/photo-left2.jpg);
    background-size: 110%;
    border-radius: 20px
}

.client-photo-three {
    width: 660px;
    height: 430px;
    background-position: center;
    background-image: url(assets/img/photo-right3.jpg);
    background-size: 110%;
    border-radius: 20px
}

.client-photo-four {
    width: 660px;
    height: 590px;
    background-position: center;
    background-image: url(assets/img/photo-right4.jpg);
    background-size: 110%;
    border-radius: 20px
}

.client-photo-one, 
.client-photo-two, 
.client-photo-three, 
.client-photo-four {
    background-repeat: no-repeat;
    background-size: 110%;
    background-position: center;
    border-radius: 20px;
    transition: 1s;
}

#mobile-app-section {
    display: flex;
    justify-content: space-between;
    margin-top: 100px;
}

.mobile-app-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 40px;
}

.mobile-app-text {
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    text-align: start;
    font-weight: 400;
    line-height: 150%;
    width: 630px;
}

.button-app-wrapper {
    display: flex;
    gap: 20px;
}

.button-app-wrapper {
    display: flex;
    gap: 20px;
}

.app-button {
    display: flex;
    align-items: center;
    border-radius: 100px;
    border: 1px solid #665F55;
    cursor: pointer;
    transition: 0.5s;
    width: 200px;
    height: 64px;
    gap: 8px;
    padding: 12px 20px;
}

.app-svg path,
.app-text-block * {
    transition: 0.5s;
}

.app-text-block {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.app-text-block :nth-child(1) {
    font-family: Inter;
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%;
    color: #403F3D;
}

.app-text-block :nth-child(2) {
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%;
    color: #403F3D;
}

#footer {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 100px;
    margin-bottom: 40px;
}

.footer-container-one {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 40px;
    width: 100%;
}

.footer-container-two {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 40px;
    background-color: #665F55;
    max-width: 1360px;
    height: 450px;
    padding: 100px;
    width: 100%;
}

.footer-one {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: max-content;
    gap: 40px;
}

.footer-smile-time {
    font-family: Inter;
    font-size: 60px;
    font-style: normal;
    font-weight: 600;
    line-height: 125%;
    color:  #E1D4C9;
    width:  530px;
}

.coffee-time {
    font-family: Inter;
    font-size: 60px;
    font-style: italic;
    font-weight: 600;
    line-height: 125%;
    color: #B0907A;
}

.footer-social {
    display: flex;
    width: 530px;
    gap: 12px;
}

.twitter-ins-fec {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    color:  #C1B6AD;
    border: 1px solid;
    cursor: pointer;
    transition: 0.5s;
    width: 60px;
    height: 60px;
}

.social,
path {
    transition: 0.5s;
}

.footer-two {
    display: flex;
    flex-direction: column;
    width: 530px;
    gap: 40px;
    margin-bottom: 5px;
}

.footer-contact-us {
    display: flex;
    flex-direction: column;
    font-family: Inter;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 125%;
    color:  #E1D4C9;
}

.footer-information {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 110px;
}

.footer-number-info {
    position: relative;
    display: flex;
    align-items: center;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    text-decoration: none;
    color:  #E1D4C9;
    gap: 8px;
    width: max-content;
}

/* menu */

.offer {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 1440px;
    gap: 40px;
}

.text-h1 {
    text-align: center;
    width: 800px;
    margin-top: 15px;
}

.button-tab-item {
    display: flex;
    justify-content: center;
    gap: 16px;
}

.button-coffee {
    width: 115px;
    height: 46px;
}

.circle {
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.6s;
    border-radius: 100px;
    background-color: #C1B6AD;
    padding: 3px 7px;
    width: 30px;
    height: 30px;
}

.button-text {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%;
    color: #403F3D;
    transition: 0.6s;
}

.button-tea {
    width: 90px;
    height: 46px;
}

.buttons-food {
    display: flex;
    justify-content: center;
    background-color: transparent;
    border: 1px solid #C1B6AD;
    border-radius: 100px;
    padding: 8px 16px 8px 8px;
    gap: 8px; 
    transition: 0.6s;
    cursor: pointer;
}

.button-dessert {
    width: 124px;
    height: 46px;
}

.active-button-food {
    background-color: #665F55;
    cursor: default;
}

.active-button-food .circle {
    background-color: #E1D4C9;
}

.active-button-food .button-text {
    color: #E1D4C9;
}

.menu-price-block {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 40px;
}

.info-food1 {
    display: flex;
    flex-direction: column;
    border-radius: 40px;
    width: 310px;
    height: 506px;
    border: 1px solid #C1B6AD;
    cursor: pointer;
}

.photo-food1 {
    display: flex;
    flex-direction: column;
    background-position: center;
    border-radius: 40px;
    background-image: url(assets/img/coffee-drink1.jpg);
    width: 310px;
    height: 310px;
}

.photo-food2 {
    display: flex;
    flex-direction: column;
    background-position: center;
    border-radius: 40px;
    background-image: url(assets/img/coffee-drink2.jpg);
    width: 310px;
    height: 310px;
}

.photo-food3 {
    display: flex;
    flex-direction: column;
    background-position: center;
    border-radius: 40px;
    background-image: url(assets/img/coffee-drink3.jpg);
    width: 310px;
    height: 310px;
}

.photo-food4 {
    display: flex;
    flex-direction: column;
    background-position: center;
    border-radius: 40px;
    background-image: url(assets/img/coffee-drink4.jpg);
    width: 310px;
    height: 310px;
}

.photo-food5 {
    display: flex;
    flex-direction: column;
    background-position: center;
    border-radius: 40px;
    background-image: url(assets/img/coffee-drink5.jpg);
    width: 310px;
    height: 310px;
}

.photo-food6 {
    display: flex;
    flex-direction: column;
    background-position: center;
    border-radius: 40px;
    background-image: url(assets/img/coffee-drink6.jpg);
    width: 310px;
    height: 310px;
}

.photo-food7 {
    display: flex;
    flex-direction: column;
    background-position: center;
    border-radius: 40px;
    background-image: url(assets/img/coffee-drink7.jpg);
    width: 310px;
    height: 310px;
}

.photo-food8 {
    display: flex;
    flex-direction: column;
    background-position: center;
    border-radius: 40px;
    background-image: url(assets/img/coffee-drink8.jpg);
    width: 310px;
    height: 310px;
}

.photo-food1,
.photo-food2,
.photo-food3,
.photo-food4,
.photo-food5,
.photo-food6,
.photo-food7,
.photo-food8 {
    width: 310px;
    height: 310px;
    border-radius: 40px;
    background-repeat: no-repeat;
    background-size: 110%;
    background-position: center;
    transition: 0.6s;
}

.photo-food-info {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: start;
    height: 196px;
    padding: 20px;
    gap: 12px;
}

.food-name-price {
    font-family: Inter;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 125%;
    text-align: start;
    color: #403F3D;
    width: 270px;
}

.food-price {
    position: absolute;
    bottom: 20px;
    font-family: Inter;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 125%;
    text-align: start;
    color: #403F3D;
    width: 270px;
}

.food-description {
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    text-align: start;
    color:  #403F3D;
    width: 270px;
}

.footer-information :nth-child(3)::after {
    display: none;
}

.burger-button {
    display: none;
}

.offer svg {
    display: none;
}

@media screen and (max-width: 1440px) {
    .section-enjoy {
        width: 100%;
    }

    #about h2 {
        width: 100%;
    }

    #mobile-app-section {
        width: 100%;
    }

    #mobile-app-section h2 {
        width: 100%;
    }

    .width {
        width: 630px;
    }
}

@media screen and (max-width: 1410px) {
    .client-photo-one,
    .client-photo-four {
        width: 560px;
        height: 590px;
    }

    .client-photo-two,
    .client-photo-three {
        width: 560px;
        height: 430px;
    }
}

@media screen and (max-width: 1210px) {
    .client-photo-one,
    .client-photo-four {
        width: 460px;
        height: 490px;
    }

    .client-photo-two,
    .client-photo-three {
        width: 460px;
        height: 430px;
    }
}

@media screen and (max-width: 1010px) {
    .client-photo-one,
    .client-photo-four {
        width: 360px;
        height: 390px;
    }

    .client-photo-two,
    .client-photo-three {
        width: 360px;
        height: 230px;
    }
}

@media screen and (max-width: 1320px) {
    #mobile-app-section {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .mobile-app-text {
        width: 100%;
    }

    .specific h2
    .text-big {
        width: 102%;
    }

    .mobile-app-photo {
        margin-top: 100px;
    }
}

@media screen and (max-width: 1020px) {
    .footer-container-two {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        height: 736px;
        padding: 0;
        padding: 100px 60px;
    }

    .mobile-app-photo {
        margin-top: 100px;
    }
}

@media screen and (max-width: 800px) {
    .nav-list {
        gap: 25px;
    }

    .text-h1 {
        width: 90%;
    }
}

@media screen and (max-width: 768px) {
    .client-photo-two,
    .client-photo-three {
        display: none;
    }

    .clients-photos {
        display: flex;
        flex-direction: column;
        gap: 40px 0;
    }

    .client-photo-one,
    .client-photo-four {
        width: 690px;
        height: 590px;
        background-size: auto;
    }

    .enjoy {
        padding: 100px 60px;
        width: 100%;
    }

    .nav-list {
        display: none;
    }

    .button-menu svg {
        margin: 0;
        opacity: 1;
    }

    .button-menu {
        margin-right: 92px;
    }

    .menu-button-svg {
        display: flex;
        align-items: center;
        margin-left: 10px;
    }

    .button-menu svg {
        margin-left: 52px;
    }

    .menu-button-svg {
        margin-right: 38px;
    }

    .menu, .menu1 {
        display: none;
    }

    .burger-button {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 44px;
        height: 44px;
        border-radius: 100px;
        border: 1px solid #665F55;
        gap: 6px;
        margin-bottom: 5px;
    }

    .burger-button * {
        width: 18px;
        height: 2px;
        border: 1px solid  #403F3D;
    }

    .in123 {
        display: none;
    }

    .offer svg {
        display: flex;
    }

    .width {
        width: 100%;
    }
}

@media screen and (max-width: 690px) {
    .main {
        padding: 0 16px;
    }

    .footer-one,
    .footer-smile-time {
        width: 100%;
    }

    .enjoy {
        padding: 60px 16px;
    }

    .enjoy-title,
    .specific,
    .text-big {
        width: 100%;
    }

    .enjoy-title .text-big,
    .enjoy-title .specific {
        font-size: 42px;
    }

    .header {
        padding: 0 16px;
    }

    .text-big,
    .specific {
        font-size: 32px;
    }

    .footer-smile-time,
    .coffee-time {
        font-size: 32px;
    }

    .client-photo-one,
    .client-photo-four {
        width: 100%;
        background-size: 590px;
    }

    .mobile-app-photo {
        width: 100%;
    }

    .left-arrow,
    .right-arrow {
        display: none;
    }

    .favorite-position {
        justify-content: center;
        align-items: center;
    }

    .smores-frappuccino {
        width: 100%;
    }

    .slider-coffee-text,
    .coffee-text,
    .price {
        width: 100%;
    }

    .coffee-text {
        width: 100%;
    }

    .footer-container-one {
        padding: 0 20px;
    }

    .footer-two,
    .footer-contact-us,
    .footer-information,
    .footer-social {
        width: 100%;
    }

    .section-enjoy {
        height: 100%;
    }
}

@media screen and (max-width: 450px) {

    .button-app-wrapper {
        flex-direction: column;
    }
}

@media screen and (max-width: 450px) {
    .mobile-app-photo {
        margin-top: 40px;
    }

    .footer-container-two {
        height: 526px;
        width: 348px;
        padding: 60px 16px;
    }

    .client-photo-one,
    .client-photo-four {
        background-size: auto;
    }

    .section-enjoy {
        height: 552px;
    }
    .enjoy {
        gap: 0;
        justify-content: space-between;
        height: 100%;
    }

    .button-tab-item {
        padding: 0 16px;
        gap: 8px;
    }
}

@media screen and (max-width: 1020px) {
    .enjoy-title {
        line-height: 158%;
    }
}

@media (hover: hover) {
.nav-link:hover::after,
.footer-number-info:hover::after {
    transform: scaleX(1);
    opacity: 1;
}

.footer-number-info:hover::after {
    transform: scaleX(1);
    opacity: 1;
    background-color: #E1D4C9;
}

.menu:hover::after {
    transform: scaleX(1);
    opacity: 1;
}

.right-arrow:hover,
.left-arrow:hover {
    fill: #665F55;
}

.right-arrow:hover rect,
.left-arrow:hover rect {
    stroke: #E1D4C9;
}

.right-arrow:hover path,
.left-arrow:hover path {
    stroke: #E1D4C9;
}

.button-menu:hover svg {
    opacity: 1;
}

.button-menu:hover .menu-button-svg {
    margin-right: 40px;
}

.client-photo-one:hover, 
.client-photo-two:hover,
.client-photo-three:hover, 
.client-photo-four:hover {
    background-size: 100%;
}

.app-button:hover {
    background-color: #665F55;
}

.app-button:hover .app-svg path {
    fill: #E1D4C9;
}

.app-button:hover .app-text-block * {
    color: #E1D4C9;
}

.twitter-ins-fec:hover {
    background-color: #E1D4C9;
}

.twitter-ins-fec:hover .social path {
    stroke: #403F3D;
}

.buttons-food:hover .circle {
    background-color: #E1D4C9;
}

.buttons-food:hover {
    background-color: #665F55;
}

.buttons-food:hover .button-text {
    color: #E1D4C9;
}

.info-food1:hover .photo-food1,
.info-food1:hover .photo-food2,
.info-food1:hover .photo-food3,
.info-food1:hover .photo-food4,
.info-food1:hover .photo-food5,
.info-food1:hover .photo-food6,
.info-food1:hover .photo-food7,
.info-food1:hover .photo-food8 {
    background-size: 100%;
}
}