.jjs{
   
}

.bods{
     background-image: url(./IMG_5610.png) ;
   
    border-radius: 44px;
background-color: #2c2c2c;
    display: block; 
    margin-left: auto; 
    margin-right: auto;
max-width: 100%;
height: auto; 
margin-left: auto; 
margin-right: auto;

}
#language {
    position: fixed; /* Фіксує елемент у верхньому правому куті */
    top: 10px;
    right: 10px;
    z-index: 1000; /* Завжди над іншими елементами */
    padding: 5px;
    border: none; /* Видалено межі для прозорості */
    background-color: rgba(255, 255, 255, 0.1); /* Світліший прозорий фон */
    color: rgba(0, 0, 0, 0.644); /* Білі літери */
    font-size: 14px;
    border-radius: 5px; /* Згладжені кути */
    outline: none; /* Забирає рамку при фокусуванні */
    cursor: pointer; /* Зміна курсору для зручності */
    border: none; /* Видалити рамку, якщо вона є */
}
#language:hover {
    background-color: rgba(255, 255, 255, 0.1); /* Світліший прозорий фон */
  }
.header2{
    max-width: 100%;
    height: auto; 
    padding-top: 40px;
padding-bottom: 40px;
margin-left: auto; 
margin-right: auto;
background-size: cover; background-repeat: no-repeat;
      


background-size: cover; background-repeat: no-repeat;
margin-bottom: 50px;
}
.header{
    background-size: cover; background-repeat: no-repeat;

max-width: 100%;
height: auto;       

padding-top: 40px;
padding-bottom: 40px;
background-image: url(./photo_2024-12-11_13-53-01.jpg) ;
display: block; 
margin-left: auto; 
margin-right: auto;
display: flex; justify-content: center; /* ./photo_2024-12-11_13-53-13\ 1.png Горизонтальне вирівнювання  ./photo_2024-12-11_13-53-00 (2).jpg */ align-items: center;
}
.h1{
    color: #FFF;
    text-align: center;
    font-family: "Playfair Display";
   font-size: 30px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    margin-top: 0px;
margin-bottom: 0px;
}
.menu{
    color: #FFF;
font-family: "Playfair Display";
font-size: 24px;
font-style: normal;
font-weight: 800;
line-height: normal;
text-decoration: none; 
position: relative;
}
svg{
   fill: rgb(255, 255, 255);
}
.caes:hover{
    fill: #FBBB3C;

 }
.menu::after 
{ content: '';
     position: absolute; 
     width: 100%;
      transform: scaleX(0);
       height: 2px;
        bottom: 0;
         left: 0;
          background-color: rgb(255, 255, 255);
           transform-origin: bottom right;
            transition: transform 0.25s ease-out;
}
.menu:hover::after,
 .menu:focus::after { transform: scaleX(1);
     transform-origin: bottom left; 
    }
ul{
    list-style: none;
    list-style-type: none;
    text-decoration: none;
gap: 110px;
    text-decoration: none;
    margin-left: -40px;
}
li{
    list-style: none;
    list-style: none;
    list-style-type: none;
    text-decoration: none;
 
}
nav{
    list-style: none;
    list-style: none;
    list-style-type: none;
    text-decoration: none;

}
a{
    text-decoration: none;
}
.list{
    display: flex;
    max-width: 100%;
    align-items: center;
    justify-content: center;
margin-top: 0px;
margin-bottom: 0px;
}
.aea{
    padding: 0;
    max-width: 100%;
    margin-top: 40px;
    margin-bottom: 335px;
}
.aer{
        padding: 0;
        max-width: 100%;
        margin-top: 40px;
}
body{
    background-color: #1E1E1E;
    margin: 0px;
}

.vector{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
}




.maiin{
    padding-top: 75px;
    padding-bottom: 75px;
    padding-left: 60px;
    padding-right: 60px;
}
h2{
    color: #FFF;
text-align: center;
text-align: center;
font-family: "Playfair Display";
font-size: 25px;
font-style: normal;
font-weight: 800;
line-height: normal;
}
.text{
    color: #FFF;
    text-align: center;
font-family: "Playfair Display";
font-size: 18px;
font-style: normal;
font-weight: 800;
line-height: normal;
}
.hert1{
    color: #FFF;
font-family: "Playfair Display";
font-size: 23px;
font-style: normal;
font-weight: 800;
line-height: normal;
margin-bottom: 30px;
margin-top: -5px;
}
.hert{
    color: #FFF;
font-family: "Playfair Display";
font-size: 23px;
font-style: normal;
font-weight: 800;
line-height: normal;
}

.hert2{
    color: #FFF;
font-family: "Playfair Display";
font-size: 23px;
font-style: normal;
font-weight: 800;
line-height: normal;
padding-left: 60px;
margin-right: 65px;

}
.hert3{
    color: #FFF;
font-family: "Playfair Display";
font-size: 23px;
font-style: normal;
font-weight: 800;
line-height: normal;
padding-left: 60px;
margin-right: 65px;
padding-top: 5pxpx ;
}
.faer{
    padding-top: 95px ;
}
.pogo{
    border-radius: 44px;
    flex-shrink: 0;
    height: 490px;
opacity: 85%;
}
.mone{
    display: flex;
    flex-wrap: wrap;
    
}
.klei{
    display: flex;
    
}
.klei1{
    display: flex;
    
}
.infa{
    display: block;
    margin-left: 65px;
    padding-right:60px;
}
.piwo{
    border-radius: 44px;
    height: 430px;
    opacity: 85%;
    top: -110px;
    position: relative;
}



.kop3{
    margin-left: auto; 
    margin-right: auto;
}

.kop{
    background-size: cover; background-repeat: no-repeat;
max-width: 100%;
height: auto;
background-color: #2c2c2c;
border-radius: 44px;
background-image: url(./IMG_60635.jpg) ;
margin-left: auto; 
margin-right: auto;
margin-top: 90px;
}
footer{
    padding-left: 60px;
padding-right: 60px;
padding-top: 40px;
padding-bottom: 40px;
}
.lpow{
    color: #FFF;
    font-family: "Playfair Display";

font-size: 28px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.aber{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 100px;
}
.kinec{
    color: #FFF;
font-family: "Abhaya Libre ExtraBold";
font-size: 18px;
font-style: normal;
font-weight: 800;
line-height: normal;
}
.toi{

margin-top: 50px;
}
.meny{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;

}
.strawy{
    color: #FFF;
    font-family: "Abhaya Libre ExtraBold";
    font-size: 18px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    position: relative;
}
.strawy::after 
{ content: '';
     position: absolute; 
     width: 100%;
      transform: scaleX(0);
       height: 2px;
        bottom: 0;
         left: 0;
          background-color: #ffffff;
           transform-origin: bottom right;
            transition: transform 0.25s ease-out;
}
.strawy:hover::after,
 .strawy:focus::after { transform: scaleX(1);
     transform-origin: bottom left; 
    }
.Pierogi{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin-bottom: 70px;
    
}
.Pierogi1{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin-bottom: 70px;
}
.Pierogi3{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    
}
.Salatki{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin-bottom: 70px;
}
.Zupa{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin-bottom: 70px;
}
.Salatki1{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
.Zupa1{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
.Pelmeni{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.boxx{
  padding-bottom: 25px;
    border-radius: 44px;
    background-color: transparent; /* робить фон повністю прозорим */
border: 0.2px solid #949494af;
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 transition: box-shadow 0.5s ease, transform 0.5s ease;
padding-left: 22px;
padding-right: 22px;
padding-top: 15px;
}
.boxx:hover{
     box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
      transform: scale(1.03);
}
.boxx:focus{
     box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
      transform: scale(1.03);
}
.boxx9:hover{
     box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
      transform: scale(1.03);
}
.boxx9:focus{
     box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
      transform: scale(1.03);
}
.boxx5:hover{
     box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
      transform: scale(1.03);
}
.boxx5:focus{
     box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
      transform: scale(1.03);
}
.boxx3:hover{
     box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
      transform: scale(1.03);
}
.boxx3:focus{
     box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
      transform: scale(1.03);
}
.boxx1:hover{
     box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
      transform: scale(1.03);
}
.boxx1:focus{
     box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
      transform: scale(1.03);
}
.boxx9{
    padding-bottom: 25px;
    border-radius: 44px;

padding-left: 22px;
padding-right: 22px;
padding-top: 15px;
border: 0.2px solid #949494af;
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 transition: box-shadow 0.5s ease, transform 0.5s ease;
height: 392px;
}
.boxx5{
border: 0.2px solid #949494af;
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 transition: box-shadow 0.5s ease, transform 0.5s ease;
      border-radius: 44px;
 
 width: 260px;
 height: 190px;
  
  }
.boxx3{
 
      border-radius: 44px;
border: 0.2px solid #949494af;
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 transition: box-shadow 0.5s ease, transform 0.5s ease;
display: flex;
flex-direction: column;
    justify-content: center;
  height: 391px;
  width: 340px;
  }
.pierogi{
    color: #FFF;
text-align: center;
font-family: "Abhaya Libre ExtraBold";
font-size: 20px;
font-style: normal;
font-weight: 800;

}
.rozmir1{
    width: 295px;
   height: 215px;
}
.rozmir2{
   width: 215px;
    height: 215px;
}
.boxx1{
    padding-bottom: 25px;
    border-radius: 44px;
border: 1px solid #7a7979;
background:  transparent;
padding-left: 60px;
padding-right: 60px;
padding-top: 15px;
}
.zasta{
    border-radius: 44px;
    max-width: 100%;
height: auto; 
margin-left: auto; 
margin-right: auto;
background-image: url(./IMG_52493.png) ;
padding-top: 85px;
padding-left: 60px;
padding-right: 60px;
padding-bottom: 35px;
}
.textr{
    color: #FFF;
    font-family: "Abhaya Libre ExtraBold";
    font-size: 18px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    margin-bottom: 105px;
    width: 550px;
    height: 124px;
}
.textr1{
    color: #FFF;
    font-family: "Abhaya Libre ExtraBold";
    font-size: 18px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    width: 550px;
    margin-bottom: 90px ;
    height: 145px;
}
.weww{
   display: flex;
justify-content: flex-end;
}
.wewv{
    display: flex;
 justify-content: flex-start;
 }
.odin{
fill: #FFF;
color: #FFF;
margin-left: 12px;
cursor: pointer;
 }
 .odi{
    fill: #FFF;
    color: #FFF;
    margin-right: 12px;
    cursor: pointer;
     }
 .fotka{
  display: flex;
  align-items: center;
  justify-content: center;
 }
 .dosta{
    color: #FFF;
font-family: "Abhaya Libre ExtraBold";
font-size: 24px;
font-style: normal;
font-weight: 400;
line-height: normal;
text-align: center;
margin-top: auto;
margin-bottom: 40px;
 }
 .qeq{
    color: #FFF;
font-family: "Abhaya Libre ExtraBold";
font-size: 16px;
font-style: normal;

line-height: normal;
margin-top: auto;
margin-bottom: auto;
 }
 .qet{
    color: #FFF;
font-family: "Abhaya Libre ExtraBold";
font-size: 18px;
font-style: normal;
font-weight: 800;
line-height: normal;
margin-top: auto;
margin-bottom: auto;
margin-bottom: 10px;
 }
 .wolt{
    margin-bottom: 40px;
    text-align: center;
 }
 .uber{
    text-align: center;
 }
 .dost{
    margin-left: auto;
    margin-right: auto ;
    padding-left: 60px;
padding-right: 60px;
padding-top: 65px;
padding-bottom: 65px;
 }
 .goscie{
    color: #FFF;
font-family: "Abhaya Libre ExtraBold";
font-size: 24px;
font-style: normal;
font-weight: 400;
line-height: normal;
line-height: normal;
text-align: center;
margin-top: auto;
margin-bottom: 40px;
 }
 .star{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
 }
 .nazwi{
    color: #FFF;
font-family: "Abhaya Libre ExtraBold";
font-size: 18px;
font-style: normal;
font-weight: 800;
line-height: normal;
text-align: center;
margin-top: 25px;
margin-bottom: 25px;
 }
 .otzuw{
    color: #FFF;
text-align: center;
font-family: "Abhaya Libre ExtraBold";
font-size: 16px;
font-style: normal;
font-weight: 800;
line-height: normal;
margin-top: 0px;
margin-bottom: 0px;
height: 90px;
 }
 .osoby{
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
 }
 .osobi{
    padding-left: 60px;
    padding-right: 60px;
 }
 .active {
    fill: #ee9363;
}
 .osoba1{
    
    width: 460px;
 }
 .osoba2{
    width: 460px;
 }
 .elips{
    cursor: pointer;
    .active {
        fill: #ee9363;
    }

 }
 .elips2{
    fill: #D9D9D9;
    cursor: pointer;

 }

 .elips3{
    fill: #D9D9D9;
    cursor: pointer;

 }

 .elips4{
    fill: #D9D9D9;
    cursor: pointer;

 }

 .ellips{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    margin-bottom: 40px;
 }
.prac{
    color: #FFF;
    text-align: center;
    font-family: "Abhaya Libre ExtraBold";
    font-size: 16px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    margin-top: 0px;
    margin-bottom: 0px;
}
.chas{
    display: flex ;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.gozina{
    margin-bottom: 50px;
}