@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
body{
          margin: 0;
          font-family: "Roboto", sans-serif;
          background-color: #1c1b1b;
          color: #fff;
}
a {
          color: #fff;
          text-decoration: none;
}
p {
          margin: 0;
}
p + p {
          margin-top: 15px;
}
ul {
          list-style: none;
          padding: 0;
          margin: 0;
}
h1, h2 ,h3 ,h4 ,h5 ,h6 {
          font-weight: 500;
          margin: 0;
}
img {
          max-width: 100%;
}
.container{
          box-sizing: border-box;
          max-width: 1170px;
          margin-left: auto;
          margin-right: auto;
          padding: 0 15px;
}
.btn{
          display: flex;
          align-items: center;
          justify-content: center;

          width: 165px;
          height: 50px;

          font-weight: 500;
          font-size: 16px;
          text-transform: uppercase;

          background-color: #f6762c;
          border-radius: 5px;

          text-align: center;
          transition: opacity 0.3s;
}
.btn:hover {
          opacity: 0.8;
}
.btn-small {
          width: 14;
          height: 40px;
          font-size: 12px;
}
.header {
          padding: 25px 0;
          position: relative;
          z-index: 10;
}
.header .container{
          display: flex;
          justify-content: space-between;
          align-items: center;
}
.header__list{
          display: flex;
          gap: 30px;
}
.header__nav a {
          font-size: 14px;
          opacity: 0.7;
          transition: opacity 0.3s;
}
.header__nav a.active {
          opacity: 1;
}
.header__nav a:hover{
          opacity: 0.9;        
}

.welcome {
          box-sizing: border-box;
          min-height: 100vh;
          
          margin-top: -100px;
          padding: 240px 0;
          background-image: url("./img/welcome-bg.jpg");
          background-repeat: no-repeat;
          background-size: cover;
          background-position: center;
}
.welcome__text{
          width: 550px;
}
.welcome__subtitle {
          margin-bottom: 7px;
          font-size: 14px;
          letter-spacing: 0.1em;
}
.welcome__title {
          font-size: 58px;
}
.welcome__desc{
          margin: 40px 0;
          font-size: 18px;
          opacity: 0.7;
}
.welcome .btn{
          margin-top: 20px;
}
.food-list {
          padding: 100px 0;
}
.food-list .container {
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          gap: 40px 10px;
}
.food-list__card{
          width: 260px;
          overflow: hidden;
          text-align: center;
          transition: 0.3s;
          background: #312F30;
          border-radius: 10px;
}
.food-list__card:hover{
          transform: scale(1.2);
}
.food-list__img {
          width: 100%;
          height: 175px;
          object-fit: cover;
}
.food-list__text-wrapper {
          padding: 30px 20px;
}
.food-list__title {
          margin-bottom: 15px;
          font-size: 20px;
}
.food-list__desc{
          font-size: 16px;
          opacity: 0.7;
}
.order {
          background-color: #312F30;
          padding: 60px 0;
}
.order .container {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding-right: 90px;
}
 .order_img {
          max-width: 470px;
 }
 .order_text {
          max-width: 360px;
 }
.order_title {
          margin-bottom: 25px;
          font-size: 44px;
}
.order_desc {
          margin-bottom: 15px;
          opacity: 0.7;
}
.order_price {
          font-weight: 500;
          font-size: 20px;
          letter-spacing: 0.1em;
          color: #f6762c;
}
.order_price-old {
          font-size: 16px;
          text-decoration: line-through;
          opacity: 0.5;
}
.order_price + .order_price {
          margin-left: 3px;
}
.order .btn {
          margin-top: 10px;
}
.product {
          padding: 150px 0;
}
.product .container {
          display: flex;
          flex-wrap: wrap;
          gap: 30px;
          justify-content: center;
}
.product_card {
          box-sizing: border-box;
          width: 555px;
          min-height: 300px;
          padding: 60px 30px 60px 290px;
          background-size: cover;
          background-repeat: no-repeat;
          background-position: center;
}
.product_card:nth-child(even) {
          padding-left: 30px;
          padding-right: 290px;
}
.product_title {
          margin-bottom: 20px;
          font-size: 30px;
}
.product_desc {
          margin-bottom: 10px;
          opacity: 0.7;
}
.product_price {
          font-weight: 500;
          letter-spacing: 0.1em;
          color: #f6762c;
}
.product_price + .product_price {
          margin-left: 5px;
}
.product_price-old {
          text-decoration-line: line-through;
          opacity: 0.5;
}
.product .btn {
          margin-top: 10px;
}
.card-gueen {
          background-image: url(./img/product-1.jpg);   
}
.card-hut {
          background-image: url(./img/product-2.jpg);  
}
.card-king {
          background-image: url(./img/product-3.jpg); 
}
.card-papa {
          background-image: url(./img/product-4.jpg);
}
.feedback {
          padding-bottom: 200px;
}
.feedback .container{
          display: flex;
          align-items: center;
          justify-content: space-between;
          max-width: 880px;
}

.feedback_text {
          margin: 0;
          text-align: center;
          width: 370px;
}
.feedback_text::before {
          content: url(./img/icons/quote.svg);
}
.feedback_desc {  
          opacity: 0.7;
          margin: 30px 0;
}
.feedback_author {
          font-weight: 500;
          font-style: normal;
          font-size: 24px;
}
.feedback_subauthor {
          font-weight: 500;
          font-size: 12px;
          opacity: 0.7;
          display: block;
}














.download {
          padding: 60px 0;
          background-color: #312F30;

}

.download .container {
          display: flex;
          justify-content:space-around;
}

.download_title {
          font-weight: 500;
          font-size: 40px;
}


.footer {
          padding: 120px 0;
        }
        
        .footer a {
          font-size: 12px;
          color: rgba(255, 255, 255, 0.8);
          transition: color 0.3s;
        }
        
        .footer a:hover {
          color: rgba(255, 255, 255, 0.9);
        }
        
        .footer .footer__title {
          display: inline-block;
          margin-bottom: 15px;
          font-weight: 500;
          font-size: 16px;
          color: #fff;
        }
        
        .footer .container {
          display: grid;
          grid-template-columns: 1fr 3fr 1fr;
        }
        .footer__contacts {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
        }
        .footer__logo {
          width: 70px;
          margin-bottom: 20px;
        }
        .footer__link {
          display: flex;
          align-items: center;
          gap: 5px;
        }
        .footer__link + .footer__link {
          margin-top: 10px;
        }
        .footer__link::before {
          width: 12px;
          height: 12px;
        }
        
        .footer__link-mail::before {
          content: url("./img/icons/mail.svg");
        }
        .footer__link-web::before {
          content: url("./img/icons/global.svg");
        }
        
        .footer__list {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
        }
        
        
        .footer__list-item + .footer__list-item {
          margin-top: 15px;
        }
        
        
        
        
        .footer__socials-link + .footer__socials-link {
          margin-left: 7px;
        }
        @media (max-width: 1100px) {
          .welcome__desc {
            opacity: 1;
          }
        }
        
        @media (max-width: 950px) {
          .order .container {
            flex-direction: column;
            padding-right: 15px;
          }
        
          .order__text {
            text-align: center;
          }
        
          .order .btn {
            margin-left: auto;
            margin-right: auto;
          }
        }
        
        @media (max-width: 850px) {
          .food-list .container {
            justify-content: space-evenly;
          }
        
          .footer .container {
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr;
            grid-template-areas:  "nav nav"
                                  "contacts socials";
            justify-items: center;
            gap: 40px 150px;
          }
        
          .footer__contacts {
            grid-area: contacts;
            justify-self: end;
          }
        
          .footer__nav {
            grid-area: nav;
          }
        
          .footer__socials {
            grid-area: socials;
            align-self: center;
            justify-self: start;
        
          }
        
          .footer__list {
            gap: 80px;
          }
        
          .feedback {
            padding-bottom: 100px;
          }
        
          .footer {
            padding: 60px 0;
          }
        
          .welcome {
            position: relative;
          }
        
          .welcome .container {
            position: relative;
            z-index: 10;
          }
        
          .welcome::before {
            content: "";
            background-color: rgba(0, 0, 0, 0.3);
            width: 100%;
            height: 100%;
        
            position: absolute;
            left: 0;
            top: 0;
          }
        }
        
        @media (max-width: 650px) {
          .header .btn {
            display: none;
          }
        
          .feedback__img {
            width: 200px;
          }
        
          .download__title {
            font-size: 24px;
          }
        
          .welcome {
            padding: 150px 0 100px;
            min-height: auto;
          }
          .welcome__text {
            width: 100%;
          }
          .welcome__title {
            font-size: 40px;
          }
          .welcome__desc {
            margin: 20px 0;
          }
        
          .product {
            padding: 60px 0 100px;
          }
        
          .product__card {
            width: 100%;
            padding-left: 50%;
          }
        
          .product__card:nth-child(even) {
            padding-right: 50%;
          }
        
        
        
        }
        
        @media (max-width: 500px) {
          .header .container {
            flex-direction: column;
            gap: 10px;
          }
          .header__list {
            flex-direction: column;
            text-align: center;
            gap: 10px;
          }
        
          .welcome {
            margin-top: -240px;
            padding-top: 280px;
            padding-bottom: 80px;
          }
        
        
          
        
          .welcome__title {
            font-size: 30px;
          }
        
          .welcome__desc {
            font-size: 12px;
          }
        
          .food-list {
            padding: 60px 0;
          }
        
          .order__title {
            font-size: 24px;
            margin-bottom: 10px;
          }
          .order__img {
            width: 100%;
          }
        
          .feedback .container {
            flex-direction: column;
          }
        
          .feedback, .product {
            padding-bottom: 60px;
          }
          .download .container {
            flex-direction: column;
            gap: 20px;
          }
        
          .footer .container {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
          }
        
          .footer__contacts {
            align-items: center;
          }
        
          .footer__socials-icons {
            display: flex;
            justify-content: center;
          }
        
          .footer__list {
            display: flex;
            flex-direction: column;
            gap: 20px;
          }
        
          .footer .footer__title {
            margin-bottom: 10px;
          }
        
          .footer__list-item + .footer__list-item {
            margin-top: 7px;
          }
        
          .footer__logo {
            margin-bottom: 10px;
          }
        
          .feedback__author {
            font-size: 18px;
          }
          .feedback__desc {
            margin: 20px 0;
            font-size: 14px;
          }
        
          .product__card {
            padding-left: 30px;
          }
        
          .product__card:nth-child(even) {
            padding-right: 30px;
          }
          .product__desc {
            opacity: 1;
          }
        
          .product__card {
            position: relative;
        
            text-align: center;
          }
        
          .product .btn {
            margin-left: auto;
            margin-right: auto;
          }
        
          .product__card > * {
            position: relative;
            z-index: 10;
          }
        
          .product__card::before {
            content: "";
            background-color: rgba(0, 0, 0, 0.5);
            width: 100%;
            height: 100%;
        
            position: absolute;
            left: 0;
            top: 0;
          }
        
        
        }