@font-face {
   font-family: AngryBirds;
   src: url(../FUTU.TTF)
}

@font-face {
   font-family: FUTU;
   src: url(../15669.ttf)
}

@font-face {
   font-family: FUTU-one;
   src: url(../17720.ttf)
}

@font-face {
   font-family: FUTU-two;
   src: url(../ofont.ru_VAG\ World.ttf)
}

@font-face {
   font-family: FUTU-three;
   src: url(../Montserrat-Italic.otf)
}

html {
   scroll-behavior: smooth;
}

body {
    margin: 0;
    background-color: #1c1c1c;
    font-family: "Roboto", sans-serif;
    color: #fff;
}

a {
    color: #fff;
    text-decoration: none;
 }

 

 h1,h2,h3,h4,h5,h6 {
   font-weight: 500;
   margin: 0;
 }

 .img {
   max-width: 100%;
 }

 p {
   margin: 0;
 }

 hr {
   border: none;
   height: 1px;
   background-color: #9c8256;
   width: 100%;
 }

 

 ol {
   list-style-type: decimal;
   padding-left: 40px;
 }



 p + p {
   margin-top: 15px;
 }

 /*ГОЛОВА*/

 

 .container {
   box-sizing: border-box;

   max-width: 1400px;
   margin: 0 auto;
   padding: 0 15px;
 }

 .btn {
   display: flex;
   align-items: center;
   justify-content: center;

width: 175px;
height: 50px;

font-weight: 500;
font-size: 16px;

background: #f6762c;
border-radius: 8px;

transition: opacity 0.3s;
} 

.btn:hover {
   opacity: 0.8;
}

.btn--small {
   width: 140px;
   height: 40px;
   font-size: 12px;
}



.header-wrapper {
   position: relative;
   height: 100%;
}

.header-bg {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   z-index: 1;
}

.header {
   position: fixed;
   height: 86px;
   top: 0;
   left: 0;
   width: 100%;
   background-color: rgba(12, 12, 11, 0.7);
   z-index: 1000;
}



.header .container {
   padding-left: 50px;
   display: flex;
justify-content: space-between;
align-items: center;
}

.head-logo {
   width: 85px;
   height: 85px;
}

.header-logo {
   width: 80px;
   height: auto;
   transition: all 0.2s ease;
}

.header-logo:hover {
   width: 83px;
}

.header_list {
display: flex;
gap: 30px;
}

ul.header_list {
   list-style: none;
}

.header_nav a {
font-size: 14px;
opacity: 0.7;
transition: opacity 0.3s;
}

.header_nav a:hover {
opacity: 0.9;
}

.header_nav a.catalog {
font-size: 14px;
opacity: 1;
}

.vozvrat {
   
   position: absolute;
   top: 100px;
   left: 100px;
   width: "20px";
   height: 20px;
   border-radius: 5px;
   cursor: pointer;
   z-index: 10;

   transition: 0.1s;
   opacity: 0.7;
}

.vozvrat:hover {
   top: 98px;
   left: 98px;
   opacity: 1;
}





.food-list {
   display: block;
   position: relative;
margin-top: 85px;

}

.food_text {
   position: relative;
   text-align: center;
   font-size: 30px;
   margin: 90px 10px 0 10px;
   padding: 20px 10px 20px 10px;
   background-color: #2f2d2d;
    
    
    font-family: 'AngryBirds', sans-serif;
}

.food-list .container {
   position: relative;
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
   flex-wrap: wrap;
  gap: 15px;
padding: 25px 50px 0 50px;
}

.container_gallery {
   position: relative;
width: 765px;
height: 370px;
margin-top: 50px;
overflow: hidden;
text-align: center;
border-radius: 10px;
background: #2d2c2c;
padding: 15px 0 15px 0;
box-shadow: 0 0 15px #000000;

}

.navigation {
   position: absolute;
   bottom: 16px;
   left: 50%;
   transform: translateX(-50%);
   display: flex;
}

.bar {
   height: 8px;
   width: 30px;
   margin: 6px;
   cursor: pointer;
   background-color: #b7b7b7;
   opacity: 0.5;
   border-radius: 10px;
   transition: all 0.4s ease;
}

.bar:hover {
opacity: 0.8;
transform: scale(1.2);
}

input[name="r"] {
   position: absolute;
   visibility: hidden;
}

.slides {
   width: 400%;
   height: 100%;
   display: flex;
transition: margin-left 0.6s ease;
}

.slide {
   width: 25%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.6s ease;
}

.slide img {
   max-width: 100%;
   max-height: 100%;
   object-fit: contain;
   object-position: center center;
   display: block;

}

#r1:checked ~ .slides {
   margin-left: 0;
}

#r2:checked ~ .slides {
   margin-left: -100%;
}

#r3:checked ~ .slides {
   margin-left: -200%;
}

#r4:checked ~ .slides {
   margin-left: -300%;
}

input#r1:checked ~ .navigation label[for="r1"],
input#r2:checked ~ .navigation label[for="r2"],
input#r3:checked ~ .navigation label[for="r3"],
input#r4:checked ~ .navigation label[for="r4"] {
opacity: 1;
background-color: #fff;
}


.food-list__card {
flex: 1 1 300px;
max-width: 520px;
min-width: 300px;
height: 370px;
margin-left: auto;
margin-top: 50px;
text-align: center;
border-radius: 10px;
background: #2d2c2c;
padding: 15px 0 15px 0;
box-shadow: 0 0 15px #000000;
}

.food-list__opuis {
  flex: 1 1 0;
   min-width: 735px;
   max-width: 865px;
   margin-bottom: 50px;
overflow: hidden;

border-radius: 10px;
background: #2d2c2c;
padding: 20px 15px 20px 15px;
box-shadow: 0 0 15px #000000;
}




.food-list__dostavka {
   flex: 1 1 0;
   min-width: 270px;
   max-width: 420px;
margin-bottom: 50px;
   align-items: stretch;
margin-left: auto;
text-align: center;
border-radius: 10px;
background: #2d2c2c;
 padding: 20px 15px 20px 15px;
box-shadow: 0 0 15px #000000;
}





.btn-prom {
   display: flex;
   align-items: center;
   justify-content: center;
 position: relative;
height: 50px;
margin-top: 40px;
font-weight: 500;
font-size: 16px;
background: #940fd6ce;
border-radius: 8px;
transition: opacity 0.3s;
}

.btn-prom:hover {
   opacity: 0.8;
}




.food-list__text-wrapper {
  padding: 10px 20px;
}

.food-list_price {
   padding: 0px 0px 20px 0px;
   color: #f6762c;
   margin-top: 30px;
}

.food-list__title {
font-size: 30px;
font-family: 'FUTU', sans-serif;
}

.opuis__desc {
   line-height: 1.6;
   font-family: 'FUTU-three', sans-serif;
   opacity: 0.8;
}

.opuis__title {
   font-family: 'FUTU', sans-serif;
}

.opuis-twoo__title {
   margin-top: 15px;
   font-family: 'FUTU', sans-serif;
   font-size: 22px;
}

.opuis-list {
   opacity: 0.8;
}

 .opuis-list li {
   margin-top: 10px;
 }

.last {
   display: block;
   font-size: 18px;
   margin-top: 15px;
   font-family: 'FUTU', sans-serif;
   color: #f6762c;
}

.slider-h {
   display: flex;
   justify-content: center;
   font-family: 'FUTU', sans-serif;
   opacity: 0.8;
}

.food-list__oplata {
   font-family: 'FUTU', sans-serif;
}


.novaposhta {
margin-top: 3px;
 margin-right: 10px;
}


.food-list__spol {
   line-height: 0.5;
   letter-spacing: 0.1;
   font-family: 'FUTU-one', sans-serif;
   color: #ffffff92;
}

.food-list__desc {
font-size: 14px;
opacity: 0.9;
margin-top: 50px;
}

.novaposhta__desc {
   font-size: 16px;
opacity: 0.9;
margin-top: 10px;
}



.oplata-span {
   display: flex;
   justify-content: center;
   font-size: 14px;
   margin-top: 50px;
   font-family: 'FUTU', sans-serif;
}

.img-span {
 margin-top: 3px;
 margin-right: 10px;
}

.img-span_one {
   margin-top: 23px;
 margin-right: 10px; 
}

.span {
   font-size: 16px;
opacity: 0.9;
margin-top: 10px;
}

.span-span{
   font-size: 16px;
opacity: 0.9;
margin-top: 30px;
margin-right: 30px;
}

.oplata-span_one {
    display: block;
    font-size: 13px;
   font-family: 'FUTU-three', sans-serif;
   opacity: 0.8;
}

.oplata-span_twoo {
   display: block;
   font-size: 16px;
   margin-top: 10px;
   opacity: 0.8;
   font-family: 'FUTU', sans-serif;
}

.oplata-span_three {
   margin-top: 5px;
   font-family: 'FUTU-three', sans-serif;
   font-size: 13px;
   opacity: 0.8;
}

.termin {
   font-size: 13px;
   font-family: 'FUTU-three', sans-serif;
   opacity: 0.8;
}

.span-span_one {
   display: block;
  margin-top: 10px;
   font-size: 13px;
   font-family: 'FUTU-three', sans-serif;
   opacity: 0.8;
}

.my-list {
   opacity: 0.8;
}

.my-list li {
   margin-top: 10px;
}

.product__price {
   font-size: 20px;
font-weight: 500;
letter-spacing: 0.1em;
color: #f6762c;
font-family: 'AngryBirds', sans-serif;
}

.product__price + .product__price {
   margin-left: 5px;
}

.product__price--old {
   opacity: 0.5;
text-decoration-line: line-through;
color: #fff;
margin-top: 5px;
font-size: 17px;
}

/*СЛАЙДЕР КАРТОЧЕК*/

.slider-container {
   background: #2d2c2c;
   height: 300px;
  
   border-radius: 10px;
   padding: 20px;
   text-align: center;
  
   overflow: auto;
   scroll-snap-type: x mandatory;
   display: flex;
   gap: 10px;
   scroll-behavior: smooth;
}

.card {
   flex: 0 0 200px;
   background: #2f2d2d;
   border-radius: 10px;
   scroll-snap-align: center;
    box-shadow: 0px 2px 10px  rgba(0, 0, 0, 0.9);
   transition: transform 0.3s;
}

.card:hover {
   transform: scale(1.03);
}

.card img {
   width: 100%;
   height: 150px;
   object-fit: cover;
   border-radius: 12px 12px 0 0;
}

.card-content {
   padding: 12px;
   text-align: center;
}

.card-content h3 {
   margin: 0;
   font-size: 18px;
   opacity: 0.9;
   font-family: 'FUTU', sans-serif;
}

.card-content p {
   margin-top: 30px;
   font-size: 20px;
   letter-spacing: 0.1em;
color: #f6762c;
font-family: 'AngryBirds', sans-serif;
}

.slider-container::-webkit-scrollbar {
   display: none;
}




/*САМЫЙ НИЗ*/

.footer {
padding: 80px 100px 70px 100px;
background-color: #2d2d2d;

 box-shadow: inset 0 1px 20px  rgba(7, 181, 255, 0.7)
}

.footer a {
   font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  transition: color 0.3s;
}

.footer a:hover {
   color: rgb(142, 185, 235);
}

.foot-logo {
   height: 84px;
   width: 84px;
   padding-bottom: 20px;
}

.footer-logo {
   width: 80px;
   height: auto;
    transition: all 0.2s ease;
}

.footer-logo:hover {
width: 83px;
}

.footer__link {
   display: flex;
   align-items: center;
 gap: 10px;
}

.footer__link-img {
 display: flex;
 display: inline-block;
 align-items: center;
 padding-right: 10px;
 opacity: 0.7;

}

.footer .footer__title {
   display: inline-block;
margin-bottom: 15px;
font-weight: 500;
font-size: 16px;
color: #fff;
}

.footer .conteiner {
display: grid;
grid-template-columns: 1fr 3fr 1fr;

}

.footer__list {
display: grid;
grid-template-columns: repeat(3, 1fr);
}

.footer__contects {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-top: -47px;
}

.footer__contects a {
   padding-left: 25px;
}



.footer__link + .footer__link {
margin-top: 10px;
}



.footer__inner-list {
margin: 0;
padding: 0;
list-style-type: none;
}

li.footer__list-title {
   list-style-type: none;
}

.footer__socials-link {
   display: inline-block;
   text-transform: 0.3s;
}

.footer__socials-link:hover {
transform: scale(1.1);
}

.footer__socials-link + .footer__socials-link{
  margin-left: 10px;

}

.footer__list-item + .footer__list-item {
margin-top: 15px;
}

.footer__socials {
unicode-bidi: normal;
margin-top: 16px;
}




/*АДАПТАЦИЯ*/


@media (max-width: 1245px) {
    .food-list_price {
        margin-top: 20px;
    }

    .food-list__desc {
        margin-top: 30px;
    }
    }

@media (max-width: 1195px) {
   .container_gallery {
      width: 680px;
   }

   .food-list__opuis {
      max-width: 650px;
      min-width: 600px;
   }
}

@media (max-width: 1110px) {
    .container_gallery {
      width: 660px;
   }
}

@media (max-width: 1095px) {
   .container_gallery {
      width: 600px;
   }

   .slide img {
      max-width: 550px;
   }
}

@media (max-width: 1062px) {
   .food-list__opuis {
      max-width: 580px;
      min-width: 200px;
   }
}

@media (max-width: 1045px) {
   .food-list__opuis {
      max-width: 600px;
      min-width: 320px;
   }

   .termin {
      margin-bottom: 50px;
   }

   .margin {
      margin-bottom: 50px;
   }

   .footer {
      padding: 20px 100px 10px 100px;
   }

   .footer .conteiner {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      grid-template-areas: "nav nav"
                           "contects socials";
      justify-items: center;
      gap: 40px 150px;
   }

   .footer__contects {
     grid-area: contects;
     justify-self: end;
   }

   .footer__nav {
     grid-area: nav;
     gap: 20px;
     padding-bottom: 20px;
   }

   .footer__socials {
     grid-area: socials;
     align-self: center;
     justify-self: start;
   }

   .footer__list {
      gap: 50px;
   }
}

@media (max-width: 1030px) {
.container_gallery {
      max-width: 520px;
   }
   .slide img {
      max-width: 100%;
   }
}

@media (max-width: 1015px) {
   

   .food-list__opuis {
      max-width: 100%;
      min-width: 100px;
      margin-bottom: 50px;
   }

   .food-list__dostavka {
      max-width: 100%;
      min-width: 100px;
   }
}

@media (max-width: 965px) {
   .food-list__card {
      flex: 1 1 100%;
      max-width: 100%;
      min-width: 100px;
      height: auto;
      margin-top: -15px;
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;
      border-top-left-radius: 0;
      border-top-right-radius: 0;
   }

   .container_gallery {
      flex: 1 1 100%;
      max-width: 100%;
      min-width: 200px;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      box-shadow: none;
   }

      .slide img {
      width: 100%;
      height: auto;
   }

   .food-list__opuis {
      flex: 1 1 100%;
      margin-bottom: 0;
   }

   .food-list__text-wrapper {
      padding: 0 20px;
   }

   .food-list_price {
      margin-top: 0;
   }

   .food-list__desc {
      margin-top: 10px;
   }

   .btn-prom {
      margin-top: 15px;
   }

   .termin {
      margin-bottom: 10px;
   }

   .margin {
      margin-bottom: 10px;
   }

   .oplata-span {
      margin-top: 20px;
   }
}

@media (max-width: 760px) {
   .header .btn {
      display: none;
   }

   .header .container {
      padding: 0 100px 0 100px;
   }
}

@media (max-width: 690px) {
   
   .footer .conteiner{
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 70px;
      padding-bottom: 30px;
      text-align: center;
   }

.foot-logo {
   width: auto;
}

   .footer__list {
      padding-left: 5px;
   }

   .footer__contects{
      align-items: center;
   }
}

@media (max-width: 665px) {
   .food-list .container {
      padding: 10px;
   }

   .container_gallery {
       width: 100%;
       min-width: 100px;
      max-height: 300px;
      min-height: 100px;
   }

      .header .container{
      gap: 10px;
      padding: 0;
      margin: 0 50px 0 50px;
   }

   .vozvrat {
      left: 35px;
   }

   .vozvrat:hover {
      left: 32px;
      bottom: 2px;
   }
}

@media (max-width: 570px) {
   nav.href__li {
      display: none;
   }
}

@media (max-width: 475px) {
   .header {
      position: static;
      height: auto;
    }

 .header .container{
      flex-direction: column;
      gap: 10px;
      margin: 0 10px 0 0;
   }

   .head-logo {
      display: none;
   }

   img .header-logo {
      display: none;
   }

   .vozvrat {
      top: 65px;
      left: 15px;
   }

   .vozvrat:hover {
      top: 63px;
      left: 13px;
   }

   .container_gallery {
      margin-top: -40px;
   }
}

@media (max-width: 410px) {
.food-list__title {
   font-size: 26px;
}

.opuis__title {
   font-size: 20px;
}

   .opuis__desc {
      font-size: 15px;
   }
}

@media (max-width: 400px) {
   .card {
      max-width: 150px;
      max-height: 280px;
   }
}

@media (max-width: 380px) {
   .food-list__dostavka {
      margin-bottom: 0;
   }
}

@media (max-width: 380px) {
   .footer {
    padding: 0;
}

.footer .conteiner {
   margin-top: 0;
}

   .footer__list{
      display: flex;
      flex-direction: column;
}

.food-list .container {
   padding: 0 10px 150px 10px;
}
   }