*,
*::before,
*::after {
   margin: 0;
   padding: 0;
   border: 0;
   box-sizing: border-box;
}

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

ol,
li,
ul {
   list-style: none;
}

@media (max-height: 800px) {
.page__contacts {
   max-width: 90vw;
   overflow-x: hidden;
   margin-left: 5vw;
}
}
.screen {
   word-wrap: break-word; /* Для старых браузеров */
   overflow-wrap: break-word; /* Современный стандарт */
 }


html,
body {
   scroll-behavior: smooth;
   height: 100%;
   line-height: 1;
   font-size: 16px;
   font-weight: 500;
   background: #FFFFFF;
   /*overflow: hidden;*/
}

img {
   vertical-align: top;
}

h1,
h2,
h3,
h4,
h5,
h6 {
   font-weight: inherit;
   font-size: inherit;
   color: #666666;
}

.wrapper {
   min-height: 100%;

}

._container {
   /*
   margin: 0px auto;
   max-width: 1260px;*/
   height: 100%;
   box-sizing: content-box;
   padding: 0px 0px;
}

@media (max-width:500px) {
   ._container {
      padding-top: 10px;
   }
}

.about__container {
   margin: 0px auto;
   max-width: 1260px;
}

@font-face {
   font-family: 'HelveticaNeue';
   src: url(assets/fonts/HelveticaNeue.ttf);
}

@font-face {
   font-family: 'SourceSerif4-Medium';
   src: url(assets/fonts/SourceSerif4-Medium.ttf);
}

@font-face {
   font-family: 'SourceSerif4-Regular';
   src: url(assets/fonts/SourceSerif4-Regular.ttf);
}

@font-face {
   font-family: 'SourceSerif4-Light';
   src: url(assets/fonts/SourceSerif4-Light.ttf);
}

@font-face {
   font-family: 'SourceSerif4-ExtraLight';
   src: url(assets/fonts/SourceSerif4-ExtraLight.ttf);
}

@font-face {
   font-family: 'Cat Linz';
   src: url(assets/fonts/CATLinz.ttf);
}

@font-face {
   font-family: 'Circe Rounded';
   src: url(assets/fonts/CirceRounded-Regular.ttf);
}

@font-face {
   font-family: 'Ceremonious One';
   src: url(assets/fonts/ceremoniousone.ttf);
}

:root {
   /*--main-font: 'HelveticaNeue';*/
   --font-main: 'Cat Linz';
}

h1 {
   font-family: var(--font-main);
   font-weight: 600;
   font-size: 24px;
   letter-spacing: 1px;
}

h2, .h2_text {
   font-family: var(--font-main);
   font-weight: 500;
   font-size: 22px;
   letter-spacing: 1px;

}

p {
   font-family: var(--font-main);
   font-weight: 400;
   font-size: 20px;
   color: #666666;

}

h3 {
   font-family: var(--font-main);
   font-weight: 600;
   font-size: 18px;
   letter-spacing: 1px;
}

h4 {
   font-family: var(--font-main);
   font-weight: 400;
   font-size: 16px;
   letter-spacing: 1px;
}

/*-----header---------------------------*/
.header {
   display: block;
   position: fixed;
   top: 0;
   width: 100%;
   height: 100px;
   z-index: 5;
   visibility: visible;
   opacity: 1;
   pointer-events: all;
   -webkit-transition: opacity 0.7s;
   -moz-transition: opacity 0.7s;
   -o-transition: opacity 0.7s;
   transition: opacity 0.7s;
}

@media (max-width:1150px) {
   .header {
      /*display: none;*/
      background: #FFFFFF;
      height: 60px;
   }
}

.header__container {
   display: flex;
   justify-content: space-between;
   padding: 30px 0px 0px 30px;
   align-items: center;
}

@media(max-width:1150px) {
   .header__container {
      padding: 10px 0px 0px 30px;
   }

}

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

.header__left-2 {
   display: flex;
   flex-direction: row;
}

.header__burger {
   background: none;
   border: none;
   height: 32px;
}

.header__burger path,
.header__logo path,
.order-button a {
   transition: all .4s;
}

.header.hidden {
   transform: translateY(-100px);
   opacity: 0;
   transition: all .7s .4s;
}

.header.anim {
   transform: translateY(0);
   opacity: 1;
   transition: all .7s .4s;
}


.header__burger.black path,
.header__logo.black path {
   fill: #666666;
   opacity: 0.8;
   transition: all .4s;
}

.order-button.black a {
   color: #666666;
   transition: all .4s;
}

@media (max-width:1150px) {
   .header__burger svg {
      height: 26px;
   }

   .order-button {
      display: none;
   }
}

.order-button.hidden {
   display: none;
}

.order-button a {
   font-family: var(--font-main);
   font-weight: 200;
   font-size: 12px;
   letter-spacing: 2px;
   color: #FFFFFF;
   transition: all .4s;
   display: inline-block;
   position: relative;
}

.header__logo path {
   fill: #F9F8F4;
}
.header__logo svg {
      margin-top: -10px;
   }
@media (max-width:1150px) {

   .header__burger path,
   .header__logo path {
      fill: #41261B;
   }

   .header__logo svg {
      margin-top: -10px;
   }

   .order-button a {
      color: #666666;
      transition: all .4s;
   }

}

.order-button {
   margin-top: -5px;
   padding-left: 12px;

}


.order-button a::after {
   content: '';
   position: absolute;
   width: 100%;
   transform: scaleX(0);
   height: 1px;
   bottom: 0;
   left: 0;
   background-color: #FFFFFF;
   transform-origin: bottom right;
   transition: transform 0.25s ease-out;
}

.order-button.black a::after {
   background-color: #666666;
}

.order-button a:hover::after {
   transform: scaleX(1);
   transform-origin: bottom left;
}





.order-button__dark {
   color: #666666;
   transition: all 1s ease-in;
}

.m__header {
   display: none;
}


@media (max-width:800px) {
   .m__header {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      height: 90px;
      width: 100vw;
      background: #FFFFFF;
      z-index: 50;
   }

   .mob__header__container {
      padding-top: 15px;
      justify-content: space-between;
      width: 100%;
   }
}

/*--------------------------------------------------------------------*/
.page {
   position: fixed;
   width: 100%;
   height: 100%;
   min-height: 600px;
   top: 0;
   left: 0;
   /*overflow: hidden;*/
}

/*@media (max-width:800px) {
   .page {
      overflow: scroll;
   }
}*/

.team__container {
   padding-bottom: 5px;
}

.page__wrapper {
   display: flex;
   flex-direction: column;
   width: 100%;
   height: 100%;
   overflow-y: scroll;
   overflow-x: hidden;
}

.screen {
   /*flex: 1 0 100%;*/
   flex: 1 0 auto;
   position: relative;

}



.page__scroll {
   position: absolute;
   top: 0;
   right: 0;
   margin-right: 2px;
   width: 8px;
   height: 100%;
   background-color: none;
}

@media (max-width:800px) {
   .page__scroll {
      display: none;
   }
}

.page__drag-scroll {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.8);
   cursor: pointer;
   border-radius: 10px;
}


/*-----main-------------------------------------------------------------------------*/
.main-block {
   z-index: 1;
   /*overflow: hidden;*/
}




.slider_item {
   width: 100%;
   height: 100vh;
}

.slider__cover {
   position: absolute;
   z-index: 2;
   width: 100%;
   height: 100vh;
   top: 0;
   background: rgba(0, 0, 0, 0.3);
}

.swiper-button-prev,
.swiper-button-next {
   --swiper-theme-color: #ffffff;
}

.swiper-horizontal>.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
   bottom: var(--swiper-pagination-bottom, 50px);
}

@media(max-height:1000px) {
   .swiper-horizontal>.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
   bottom: var(--swiper-pagination-bottom, 20px);
}

}

.swiper-pagination {

   --swiper-pagination-color: #FFFFF0;
   --swiper-pagination-bullet-inactive-color: #FFFFF0;
}

.swiper-pagination-bullet {
   background: #FFFFF0;
}

.swiper-pagination-bullet-active {
   background: #FFFFF0;
}

.swiper-pagination-bullet {
   width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 12px));
   height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 12px));
}

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
   margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 8px)
}

.swiper-button-next:after,
.swiper-button-prev:after {
   font-size: 60px;
}

/*--------about----------------------------------------------------------------*/


/*------------------------------------------------------------------------------*/
.left__menu {
   display: none;
   z-index: -10;
   pointer-events: none;
   opacity: 0;
   background: rgba(0, 0, 0, 0.5);
   position: fixed;
   top: 0;
   width: 100%;
   height: 100vh;
   transition: all 1s;
}

.left__menu.active {
   display: block;
   z-index: 10;
   pointer-events: all;
   opacity: 1;
   transition: all 1s;
}


.menu__wrapper {
   display: flex;
   flex-direction: column;
   width: 400px;
   left: 0;
   min-height: 100vh;
   background: #FFFFFF;
   opacity: 0;
   transform: translateX(-100px);
   transition: all 1s ease-in;
}

@media (max-width:500px) {
   .menu__wrapper {
      width: 100%;
   }
}

.menu__wrapper.active {
   opacity: 1;
   transform: translateX(0px);
   transition: all 1s .2s ease-in;
}

.menu__logo {
   margin-bottom: 50px;
}

@media (max-width:500px) {
   .menu__logo {
      margin: 20px 0;

   }

   .menu__logo img {
      width: 120px;
   }
}

.menu__content {
   margin: auto 0;
   padding-left: 50px;
}


@media (max-width:500px) {
   .menu__content {
      margin: 0;
   }
}

.menu__item {
   font-family: var(--font-main);
   font-weight: 400;
   margin-top: 30px;
   font-size: 20px;
   color: #666666;
}

@media (max-width:500px) {
   .menu__item {
      font-size: 16px;
      margin-top: 20px;
   }
}

.menu__item__inner {
   margin-left: 50px;
   margin-top: 30px;
   font-size: 20px;
}

@media (max-width:500px) {
   .menu__item__inner {
      margin-top: 16px;
      font-size: 16px;
   }
}

/*-----О нас-----------------------------------------------------------------*/

.about {
   height: 100%;
}

@media (max-width:800px) {
   .about {
      display: flex;
      flex-direction: column-reverse;
      margin-top: 20px;
   }
}


.about__ouner {
   background: #FFFFFF;
   min-height: 400px;
   max-height: 70vh;
   margin-bottom: 30px;
}

@media (max-width:800px) {
   .about__ouner {
      height: 100%;
   }
}

.about-footer {
   position: relative;
   background-image: url(assets/images/new_restaurant.jpg);
   background-repeat: no-repeat;
   background-position: 0 60%;
   background-size: cover;
   height: 30vh;
}

.about__content {
   padding: 0px 50px 0px 50px;
   height: 100%;
   /*margin-left: 260px;*/
}

@media (max-width:800px) {
   .about__content {
      margin-left: 0;
      height: 100%;
      
      padding: 0px 15px 0px 10px;
   }
}


.about__title {
   margin-bottom: 30px;
   margin-top: 20px;
}

@media(max-width:550px) {
   .about__title {
      margin-bottom: 20px;
      font-size: 18px;

   }
}

.about__text {
   padding-right: 30px;
   height: 90%;
   max-height: 60vh;
   overflow-y: auto;
   scroll-behavior: smooth;
}

/*@media (max-width:800px) {
   .about__text {
      height: 100%;
      overflow: auto;
      margin-bottom: 30px;
   }
}*/

.about__text::-webkit-scrollbar {
   -webkit-appearance: none;
}

.about__text::-webkit-scrollbar:vertical {
   width: 6px;
}

.about__text::-webkit-scrollbar-thumb {
   background-color: rgba(0, 0, 0, .5);
   border-radius: 10px;
}

.about__text::-webkit-scrollbar-track {
   border-radius: 10px;
   background-color: #d5d5d5;
}

.about__text p {
   font-size: 20px;
   line-height: 150%;
   margin-bottom: 30px;
   letter-spacing: 1px;
   font-family: var(--font-main);
   font-weight: 400;
}

@media(max-width:1150px) {
   .about__text p {
      font-size: 16px;
   }
}

@media(max-width:550px) {
   .about__text p {
      font-size: 14px;
   }
}

/*------------------------------------------------------------------------------*/
/*.page__team {
   height: 100%;
   padding-top: 60px;
}*/

.team-title h1 {
   text-transform: uppercase;

}

.team__content {
   display: flex;
   max-height: 70vh;
   flex-direction: row;
}

.left_col {
   width: 50%;
   /*padding-top: 100px;*/
}

.left_col .blur-overlay {
   width: 50%;
}

.left_col, .menu_left_col {
   padding-top: 50px;
   padding-right: 10px;
   padding-left: 15px;
   padding-bottom: 50px;
}

@media (max-width:800px) {
   .left_col, .menu_left_col {
      width: 100%;
      padding-top: 10px;
      padding-bottom: 0;
   }
   .left_col .blur-overlay {
      width: 100%;
   }
}

.team__list {
   margin: 30px 0;
}

.team__items {
   display: flex;
   flex-direction: row;
}

.team__item {
   margin-right: 20px;
}

@media (max-width:720px) {
   .team__item h2 {
      font-size: 18px;
   }
}


.team__description {
   height: 100%;
   max-height: 70vh;
   overflow-y: auto;
}
/*
@media (max-width:800px) {
   .team__description {
      height: fit-content;
      overflow: unset;
      max-height: unset;
      margin-right: 0;
      padding-right: 0;
   }
}*/

.team__description::-webkit-scrollbar {
   -webkit-appearance: none;
}

.team__description::-webkit-scrollbar:vertical {
   width: 6px;
}

.team__description::-webkit-scrollbar-thumb {
   background-color: rgba(0, 0, 0, .5);
   border-radius: 10px;
}

.team__description::-webkit-scrollbar-track {
   border-radius: 10px;
   background-color: #d5d5d5;
}

.team__description p {
   font-size: 18px;
   margin-bottom: 30px;
   line-height: 150%;
}

@media (max-width:720px) {
   .team__description p {
      font-size: 14px;
   }
}

.chief-name {
   font-size: 22px;
   margin-bottom: 10px;
   letter-spacing: 2px;
   text-transform: uppercase;
}

@media (max-width:720px) {
   .chief-name {
      font-size: 18px;
   }
}

.chief-status {
   margin-bottom: 20px;
   line-height: 120%;
}

.cheif-quote {
   font-style: italic;
   text-align: left;
   letter-spacing: 3px;
   /*color: #be3300;*/
}

.right_col {
   display: flex;
   z-index: 3;
   position: absolute;
   height: 100%;
   width: 50%;
   right: 0;


}

@media (max-width:800px) {
   .right_col {
      display: none;
   }
}

.team_photo_container {
   width: 100%;
   height: 100%;
}

.team_photo {
   width: 100%;
   height: 100%;
}

.mob__team__photo {
   display: none;

}

@media (max-width:800px) {
   .mob__team__photo {
      display: flex;
      height: 400px;
   }
}

/*------------------------------------------------------------------------------*/

.menu__container {
   display: flex;
   flex-direction: row;
}

@media (max-width:1000px) {
   .menu__container {
      flex-direction: column-reverse;
   }
   .booking_container {
   max-height: 65vh;
    overflow-x: hidden;
    overflow-y: scroll;
}}

.menu__block__left__col {
   /*padding-top: 120px;*/
   padding-right: 5px;
   width: 50%;
   height: 100%;
   overflow: hidden;
}

@media (max-width:1000px) {
   .menu__block__left__col {
      width: 100%;
      /*padding-top: 30px;*/
   }
}

/*@media(min-width:1000px) {
   .menu__block__left__col {
      height: 70vh
   }
}*/



.menu_left_col {
   display: flex;
   flex-direction: column;
   padding-left: 10px;
}

.menu_sections_titles_block {
   padding-top: 10px;
}

.menu_sections_titles {
   display: flex;
   flex-direction: row;
   justify-content: center;
   flex-wrap: wrap;
}

.menu_sections_titles li {
   margin-right: 20px;
   font-family: var(--font-main);
   letter-spacing: 1px;
   font-weight: 200;
   font-size: 18px;
   color: #666666;
   margin-bottom: 10px;
   cursor: default;
   word-wrap: none;
   display: inline-block;
   position: relative;
}

.menu_sections_titles li::after {
   content: '';
   position: absolute;
   width: 100%;
   transform: scaleX(0);
   height: 1px;
   bottom: 0;
   left: 0;
   background-color: #666666;
   transform-origin: bottom right;
   transition: transform 0.25s ease-out;
   border-bottom: unset;
}

.menu_sections_titles li:hover::after {
   transform: scaleX(1);
   transform-origin: bottom left;
}

@media (max-width:600px) {
   .menu_sections_titles li {
      font-size: 14px;
   }
}

.menu_sections_titles .active {
   padding-bottom: 4px;
   border-bottom: 1px solid #666666;
}

.kitchen-category-title,
.bar-category-title,
.dessert-category-title {
   border-bottom: unset;
}



.kitchen-category {
   display: unset;
   pointer-events: all;
   opacity: 1;

}

.kitchen-category.active {
   display: none;
   pointer-events: none;
   opacity: 0;

}

.bar-category {
   display: none;
   pointer-events: none;
   opacity: 0;
}

.bar-category.active {
   display: unset;
   pointer-events: all;
   opacity: 1;

}

.norender {
   display: none;
}

.menu__list {
   margin-top: 30px;
   max-height: 520px;
   overflow-y: auto;
}

@media(max-width:1000px) {

   .menu__list,
   .team__description {
      max-height: 55vh;
   }
   .menu__list {
      margin-top: 10px;
   }
}

.menu__list::-webkit-scrollbar {
   -webkit-appearance: none;
}

.menu__list::-webkit-scrollbar:vertical {
   width: 6px;
}

.menu__list::-webkit-scrollbar-thumb {
   background-color: rgba(0, 0, 0, .5);
   border-radius: 10px;
}

.menu__list::-webkit-scrollbar-track {
   border-radius: 10px;
   background-color: #d5d5d5;
}

.menu__block__item,
.menu__block__item__nocenter {
   display: flex;
   width: 100%;
   padding-right: 15px;
   flex-direction: row;
   justify-content: space-between;
   margin-bottom: 30px;
   letter-spacing: 1px;
}

.menu__block__item__norow {
   flex-direction: column;
}

.desert__coment {
   display: flex;
   flex-direction: row;
   margin-left: 30px;
}

@media (max-width:770px) {
   .desert__coment {
      display: flex;
      flex-direction: row;
      margin-left: 10px;
   }
}

.desert__coment h4 {
   margin-top: 5px;
   margin-right: 40px;
   font-size: 14px;
   white-space: nowrap;
}

@media (max-width:770px) {
   .desert__coment h4 {
      margin-right: 0;
      font-size: 10px;
   }

   .desert__coment .menu__item__price {
      margin-left: 10px;
   }
}


.menu__block__item div {
   display: flex;
   flex-direction: row;
   vertical-align: middle;
}


.menu__item__title {
   max-width: 430px;
   line-height: 140%;
}

@media (max-width:600px) {
   .menu__item__title {
      max-width: 300px;
      font-size: 12px;
   }
}

.menu__item__price {
   font-family: var(--font-main);
   font-weight: 400;
   font-size: 16px;
   margin-top: 3px;
   margin-left: 20px;
   vertical-align: middle;
}

@media (max-width:600px) {
   .menu__item__price {
      font-size: 14px;
   }
}

.bar-cat {
   color: #be3300;
   line-height: 120%;
   margin-bottom: 20px;
}

@media (max-width:600px) {

   .bar-cat,
   .bar-sub-cat,
   .bar_item_vol {
      font-size: 14px;
      margin-bottom: 10px;
   }
}

.bar_item_vol {
   margin-bottom: 20px;
}

.bar-sub-cat {
   line-height: 120%;
   margin-bottom: 10px;
}

.menu__item__vol {
   margin-right: 30px;
   text-align: right;
}

.menu_right_col {
   display: block;
   position: absolute;
   right: 0;
   width: 50%;
   height: 100%;
   background: url(assets/images/menu1.JPG);
   background-position: 50% 50%;
   background-size: cover;
}

.page__main-block {
   /*width: 100vw;*/
   height: calc(300px + 20vh);
}
@media(max-width:1150px) {
   .page__main-block {
      margin-top: 60px;
   }
}
@media (max-width:1000px) {
   .menu_right_col {
      position: static;
      width: 100%;
      height: calc(200px + 10vh);
      background-position: 50% 50%;
   }
}



/*------------------------------------------------------------------------------*/

/*------------------------------------------------------------------------------*/

@media(min-height: 1000px) {
   .contacts {
      padding-bottom: 100px;
      margin-bottom: 100px;
   }
}


.contacts__block__content {
   display: flex;
}

@media (max-width:1000px) {
   .contacts__block__content {
      flex-direction: column;
      /*padding-top: 0px;*/
   }
   
}

.contacts__title {
   align-self: center;
}

.booking {
   display: flex;
   flex-direction: column;
   width: 50%;
   height: 100%;
   padding-left: 10px;
   margin-right: 50px;
   padding-right: 50px;
   margin-bottom: 10px;
}

@media (max-width:1000px) {
   .booking {
      width: 100%;
      margin-right: 0;
      padding-right: 10px;
   }
}

@media (max-width:800px) {
   .booking {
      height: 100%;
      overflow-y: unset;
   }
}

.booking__form {
   display: flex;
   flex-direction: column;
   margin-top: 23px;
   width: 100%;
   min-width: 400px;
}

@media (max-width:500px) {
   .booking__form {
      min-width: unset;
      width: 100%;
   }
}

.booking__form input {
   font-family: var(--font-main);
   border: 1px solid #666666;
   border-radius: 0;
   color: #666666;
   background: #FFFFFF;
   width: 100%;
   height: 40px;
   font-size: 14px;
   padding-left: 10px;
   margin-bottom: 23px;
}



.booking__form label {
   font-size: 18px;
   font-family: var(--font-main);
   margin-bottom: 10px;
   color: #666666;
}


@media (min-width:1150px) {
   .booking__btn:hover {
      border-radius: 0;
      background: #666666;
      color: #FFFFFF;
   }
}

.booking__btn {
   margin-bottom: 0;
}

.booking__btn._active {
   color: #fff;
   background: green;
   transition: all .35s
}






.date__time__group,
.guest__group,
.contacts__row {
   display: flex;
   flex-direction: row;
   margin-left: -15px;
   margin-right: -15px;
}
/*
@media (max-width:800px) {

   .date__time__group,
   .guest__group,
   .contacts__row {
      flex-direction: column;
   }
}*/

.date__time__group div,
.guest__group div,
.contacts__column {
   width: 50%;
   display: flex;
   flex-direction: column;
   min-height: 15px;
   padding-left: 15px;
   padding-right: 15px;
}

@media (max-width: 800px) {

   .date__time__group div,
   .guest__group div,
   .contacts__column {
      width: 100%;
   }
}





.contacts__list {
   display: flex;
   flex-direction: column;
   text-align: center;
}

.booking__content {
   text-align: center;
}

.contacts__content {
   margin-top: 15px;
}


.adress__title {
   margin-bottom: 10px;
}

.adress__text {
   margin-bottom: 20px;
}

.phone__block {
   display: flex;
   flex-direction: column;
   margin-bottom: 20px;
}

.phone__title {
   margin-bottom: 10px;
}

.phone {
   margin-bottom: 6px;
   font-family: var(--font-main);
}

.messengers {
   display: flex;
   flex-direction: row;
   vertical-align: middle;
   margin-bottom: 10px;
   height: 100%;
}

.whatsapp,
.telegram {
   margin-right: 3px;
}

.whatsapp img,
.telegram img {
   width: 36px;
   height: 36px;

   margin: 50% 0;
}


.email__title {
   margin-bottom: 10px;
}

.email {
   margin-bottom: 10px;
   font-family: var(--font-main);

}

.map__block {
   margin-top: 17px;
}

.contacts__right__col {
   display: block;
   position: absolute;
   width: 50%;
   top: 0;
   right: 0;
   height: calc(100% - 100px);
}

@media (max-width:1000px) {
   .contacts__right__col {
      display: none;
   }
}

.disclaimer {
   padding-top: 15px;
}

.disclaimer h4 {
   font-size: 14px;
}

@media (max-width:800px) {
   .disclaimer h4 {
      font-size: 12px;
   }
}

/*------------------------------------------------------------------------------*/
.footer {
   width: 100%;
   background: #FFFFFF;
   bottom: 0;
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
   z-index: 8;
   transform: translateY(100px);
}

.footer._active {
   pointer-events: all;
   opacity: 1;
   visibility: visible;
   position: fixed;
   transform: translateY(0px);
   transition: all .6s .3s;
}

@media (max-width:800px) {
   .footer {
      display: none;
   }
}

.footer-items {
   height: 40px;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
}

.footer-item h4 {
   margin-bottom: unset;
}

.footer-item-wrapper {
   display: flex;
   flex-direction: row;
}

.footer-item-wrapper .phone {
   margin-bottom: 0;

}

@media (max-width:1000px) {
   .footer-item a.email {
      display: none;
   }
}

.footer-item-wrapper .phone {
   margin-left: 20px;
}

.footer-item-wrapper img {
   width: 28px;
   height: 28px;
   margin-left: 2px;
}

/* afisha */

.afisha_block_container {
   display: flex;
   width: 100%;
   gap: 10px;
   flex-direction: column;
}

.afisha_container {
   width: 100%;
   display: flex;
   gap: 20px;
   overflow: hidden;
   box-sizing: content-box;
}

.afisha_container * {
   box-sizing: content-box;
}

.afisha_card {
   display: flex;
   flex-direction: column;
   gap: 10px;
   padding: 5px;
   padding-bottom: 20px;
   align-items: center;
   max-width: 500px;
   min-width: 120px;
   width: 50%;
}

.afisha_card img {
   width: 100%;
   
}

.afisha_card h3 {
   word-break: break-word;
   word-wrap: break-word;
}

@media(max-width:800px) {
   .afisha_card {
      max-width: 60vw;
      width: 60vw;
   }
}

/* modal */

.modal-button {
   padding: 10px 20px;
   background-color: #007BFF;
   color: white;
   border: none;
   border-radius: 5px;
   cursor: pointer;
   font-size: 16px;
}

.modal {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.5);
   justify-content: center;
   align-items: center;
   z-index: 999;
}

.modal * {
   box-sizing: content-box;
}

.modal-content {
   background-color: white;
   padding: 20px;
   border-radius: 8px;
   width: 300px;
   position: relative;
   text-align: left;
   display: flex;
   flex-direction: column;
   gap: 20px;
}

.modal-content img {
   max-width: 50vw;
   min-width: 300px;
}

.close {
   position: absolute;
   top: 10px;
   right: 10px;
   font-size: 20px;
   cursor: pointer;
   color: #333;
}

.close:hover {
   color: red;
}

.header__burger_menu {
   position: absolute;
   width: 300px;
   display: none;
   height: 500px;
   z-index: 10000;
   background-color: rgb(234 234 234 / 66%);
   margin-top: 10px;
   padding-left: 30px;
}

/* Кнопка открытия модального окна */
#openModalBtn {
   padding: 10px 20px;
   font-size: 16px;
   background-color: #333;
   color: white;
   border: none;
   cursor: pointer;
   margin: 20px;
 }
 
 #openModalBtn:hover {
   background-color: #555;
 }
 
 /* Модальное окно */
 .modal {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.8);
   justify-content: center;
   align-items: center;
 }
 
 .modal-content {
   background-color: white;
   padding: 20px;
   border-radius: 8px;
   width: 90%;
   max-width: 1200px;
   position: relative;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
 }
 
 .close {
   position: absolute;
   top: 10px;
   right: 10px;
   font-size: 24px;
   cursor: pointer;
   color: #333;
 }
 
 .close:hover {
   color: #000;
 }
 
 /* Карусель */
 .carousel {
   position: relative;
   overflow: hidden;
   border-radius: 8px;
 }
 
 .carousel-inner {
   display: flex;
   transition: transform 0.5s ease;
 }
 
 .carousel-item {
   min-width: 100%;
   box-sizing: border-box;
   padding: 20px;
   text-align: center;
   display: flex;
   flex-direction: column;
   align-items: center;
 }
 
 .carousel-item img {
   width: 100%;
   max-height: 400px;
   object-fit: cover;
   border-radius: 8px;
   margin-bottom: 20px;
 }
 
 .carousel-item h3 {
   font-size: 24px;
   margin: 10px 0;
   color: #333;
 }
 
 .carousel-item p {
   font-size: 16px;
   color: #666;
 }
 
 .carousel-control {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   background-color: rgba(0, 0, 0, 0.5);
   color: white;
   border: none;
   padding: 15px;
   cursor: pointer;
   font-size: 24px;
   border-radius: 50%;
   transition: background-color 0.3s ease;
 }
 
 .carousel-control:hover {
   background-color: rgba(0, 0, 0, 0.8);
 }
 
 .carousel-control.prev {
   left: 10px;
 }
 
 .carousel-control.next {
   right: 10px;
 }
 /* Стиль для модального окна */
.modal {
   font-family: "Rubik", sans-serif;
   display: flex;
   /* Скрываем модальное окно по умолчанию */
   position: fixed;
   /* Фиксируем модальное окно */
   z-index: 1000;
   /* Чтобы окно было поверх всех элементов */
   left: 0;
   top: 0;
   width: 100%;
   /* Покрываем весь экран */
   height: 100%;
   /* Покрываем весь экран */
   background-color: rgba(0, 0, 0, 0.5);
   /* Затемняем фон */
   justify-content: center;
   /* Выравниваем по центру */
   align-items: center;
   /* Выравниваем по вертикали */
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Стиль для содержимого модального окна */
.modal__container {
   position: relative;
   height: 95%;
   width: 90%;
   overflow: hidden;
   color: #666666;
   position: relative;
   border-radius: 20px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
   text-align: center;
   transform: translateY(-100%);
   transition: transform 0.5s ease;
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.8);
   background-color: white;
   
   overflow-y: auto;
  
   position: relative;
   padding: 20px;
}

.modal__scroll {
   display: flex;
   flex-direction: column;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   overflow: auto;
   padding: 30px 30px;
   gap: 18px;
}

.modal__custom-scrollbar {
   position: absolute;
   top: 5%;
   /* Делаем область прокрутки меньше (уменьшаем сверху и снизу) */
   right: 0;
   width: 10px;
   height: 90%;
   /* Ограничиваем область прокрутки 50% от высоты контейнера */
   background: #726c6c;
   border-radius: 10px;
   z-index: 1000;
}

.modal__custom-scrollbar-thumb {
   position: absolute;
   top: 0;
   width: 100%;
   height: 30px;
   background-color: #ada6a6;
   border-radius: 10px;
   cursor: pointer;
}
.modal__close-img {
   position: absolute;
   top: 10px;
   right:10px;
   cursor: pointer;
 }

 .carousel-item {
   margin-bottom: 20px;
 }

 .carousel-item img {
   width: 100%;
   height: auto;
 }
 .swiper {
   width: 100%;
   height: 100%;
 }

 .swiper-slide {
   text-align: center;
   display: flex;
   flex-direction: column;
   align-items: center;
 }

 .swiper-slide img {
   width: 100%;
   height: auto;
   max-height: 300px;
   object-fit: cover;
 }
 .carousel {
   position: center;
   width: 100%;
   overflow: hidden;
 }

 .carousel__slides {
   display: flex;
   transition: transform 0.5s ease-in-out;
   
 }

 .carousel__slide {
   min-width: 100%;
   box-sizing: border-box;
   text-align: center;
   display: flex;
   flex-direction: column;
   gap: 10px;
 }

 .carousel__slide img {
   width: 100%;
   height: auto;
   max-height: 600px;
   object-fit:cover;
   object-position: center;
 }

 .carousel__button {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   background-color: rgba(112, 112, 112, 0.5);
   color: white;
   border: none;
   padding: 10px;
   cursor: pointer;
 }

 .carousel__button--prev {
   left: 10px;
 }

 .carousel__button--next {
   right: 10px;
 }
.modal.show {
   opacity: 1;
   visibility: visible;
}

.modal__container.show {
   transform: translateY(0);
}

.modal__close-img {
   position: absolute;
   top: 10px;
   right: 10px;
   cursor: pointer;
   width: 30px;
}

.modal__heading {
   margin-top: 10px;
   margin-bottom: 30px;
   font-weight: 700;
   font-size: 26px;
   color: #666666;
}

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

.modal__form-label {
   text-align: left;
   margin-bottom: 12px;
   font-weight: 700;
   font-size: 13px;
   color: #666666;
}

.modal__form-input {
   background-color: #efefef;
   border: none;
   border-radius: 13px;
   height: 50px;
   padding: 0 20px;
   font-weight: 700;
   font-size: 14px;
   margin-bottom: 30px;
   transition: outline 0.2s ease;
}

.more-button, .login_button, .register_button, .logout_button {
   border-radius: 10px;
   --tw-bg-opacity: 1;
   background-color: #666666;
   padding-left: 15px;
   padding-right: 15px;
   padding-top: 12px;
   padding-bottom: 12px;
   font-size: 17px;
   font-weight: 700;
   --tw-text-opacity: 1;
   color: #efefef;
}

.register_button {
   color: #777777;
   background-color: #dfdfdf;
}

.modal__form-input:hover {
   outline: 2px #fff solid;
}

.modal__form-input:focus {
   outline: 2px #fff solid;
}


.modal__form-input[type="password"] {
   font-size: 24px;
   /* Увеличиваем размер точек */
   letter-spacing: 3px;
   /* Устанавливаем отступ между точками */
}

.modal__input-container {
   display: flex;
   gap: 30px;
   margin-bottom: 30px;
}

.modal__form-phone-container {
   display: flex;
   flex-direction: column;
   margin-bottom: 30px;
}

.modal__input-phone-container {
   display: flex;
   gap: 20px;
   align-items: center;
}

.modal__birthdate-container {
   display: flex;
   flex-direction: column;
   margin-bottom: 30px;
}

.modal__birthdate-container .modal__form-input {
   margin-bottom: 0;
}

.modal__input-phone-container .modal__form-input {
   margin-bottom: 0;
}

.modal__select-btn {
   width: fit-content;
   align-self: center;
   padding: 15px 100px;
   border-radius: 12px;
   border: none;
   font-weight: 800;
   font-size: 16px;
   text-align: center;
   color: #3c075e;
   margin-top: 20px;
   margin-bottom: 30px;
   cursor: pointer;
   transition: outline 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.header_logo_container {
   display: flex;flex-direction: column; padding-left: 20px; height: 40px; overflow: hidden;
}

/*@media(max-width: 600px) {
   .header__logo, .header_logo_container {
      display: none;
   }
}
*/
.modal__select-btn:focus {
   outline: 2px #fff solid;
}

.modal__select-btn:hover {
   background-color: #aeaeae;
}

.modal__select-btn:active {
   background-color: #612289;
   outline: 4px solid #efefef;
   color: #efefef;
}

.modal__forgot-password {
   font-weight: 800;
   font-size: 18px;
   text-align: center;
   color: #fff;
   text-decoration: none;
   margin-bottom: 15px;
}

.modal__other-ways-container {
   margin-top: auto;
   bottom: -40px;
   background-color: #3c075e;
   width: calc(100% + 80px);
   margin-left: -40px;
   margin-right: -10px;
   margin-bottom: -30px;
   border-radius: 0 0 20px 20px;
   padding: 30px 0;
   padding-bottom: 40px;
   z-index: 1000;
}

.modal__other-ways-icons-container {
   display: flex;
   gap: 10px;
   align-items: center;
   justify-content: center;
   margin-bottom: 20px;
}

.modal__other-ways-icon-img {
   transition: width 0.2s ease, padding 0.2s ease;
   width: 40px;
   padding: 10px;
}

.modal__other-ways-icon-img:hover {
   width: 53px;
   padding: 0;
}

.modal__other-ways-heading {
   margin: 0;
}

.modal__custom-dropdown {
   position: relative;
   width: fit-content;
   cursor: pointer;
}

.modal__selected {
   background-color: #dfdfdf;
   padding: 15px 20px;
   width: fit-content;
   border-radius: 13px;
   transition: outline 0.2s ease;
}

.modal__selected:hover {
   outline: 2px #fff solid;
}

.modal__options-list {
   border-radius: 13px;
   list-style: none;
   padding: 0;
   margin: 0;
   background-color: #3c075e;
   border: 2px solid #ccc;
   max-height: 200px;
   overflow-y: auto;
   position: absolute;
   width: 100%;
   display: none;
   z-index: 2000;
}

.modal__options-list li {
   padding: 10px;
   border-bottom: 1px solid #ddd;
}

.modal__options-list li:hover {
   background-color: #e0e0e0;
}

/*.modal__options-list.show {
   display: block;
}*/

.modal__error-message {
   text-align: left;
   font-weight: 700;
   font-size: 14px;
   color: #ff3e3e;
   margin: 0;
   padding-left: 30px;
   padding-top: 5px;
   padding-bottom: 5px;
   background-image: url(/img/error.svg);
   background-repeat: no-repeat;
   background-position: 0;
   background-size: 20px;
}

.modal__hints-container {
   display: flex;
   flex-direction: column;
   text-align: left;
   margin-bottom: 20px;
}

.modal__hint {
   padding-left: 25px;
   background-repeat: no-repeat;
   font-weight: 400;
   font-size: 16px;
   color: #ff3e3e;
}

.modal__container .games__list-container {
   width: 100%;
   padding: 0;
   background-color: unset;
}

.smaller_modal_container {
   width: 75%;
   height: 90%;
}
.booking_modal_container {
   width: 75%;
   height: 90%;
}
@media (max-width:600px) {
   .smaller_modal_container, .modal__container, .booking_modal_container {
      width: 100%;
   }

   .modal__scroll {
      padding: 0px;
   }
}


.swiper-afisha-container {
   width: 100%;
   height: 100%;
   overflow: hidden;
}

.swiper-slide {
   display: flex;
   justify-content: center;
   align-items: center;
}

.afisha_card {
   width: 100%;
   max-width: 400px;
   margin: 0 auto;
}

.afisha_image {
   height:90%;
   margin-left:auto;
   margin-right: auto
}

.swiper-button-next,
.swiper-button-prev {
   color: #000; /* Цвет стрелок */
   top: 50%;
   transform: translateY(-50%);
}

.swiper-button-next {
   right: 10px;
}

.swiper-button-prev {
   left: 10px;
}

/* Личный кабинет */

.my_ticket {
   max-width: 400px;
   max-height: 200px;
   text-align: left;
   border-radius: 10px;
   background-color: #efefef;
   padding: 10px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.my_tickets_container {
   /*display: flex;*/
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
   word-wrap: normal;
   gap: 10px;
   margin-top: 10px;
   margin-bottom: 10px;
}

.my_info, .section_div, .profile_container {
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.smallest_modal_container {
   padding-top: 30px;
   width: fit-content;
   height: fit-content;
}

.deposit_summ_container {
   margin-bottom: 0px;
}

/* Переопределяем нативные стили для date и time inputs */
.booking__form input[type="date"],
.booking__form input[type="time"] {
   /* Отключаем стандартный внешний вид элементов форм для WebKit (Safari, Chrome) */
   -webkit-appearance: none;
   /* Отключаем стандартный внешний вид для других браузеров */
   appearance: none;

   /* Центрируем текст внутри поля ввода */
   text-align: center;

   /* Важно: если вы хотите центрировать текст, вам нужно убрать или скорректировать padding-left.
      В вашем общем правиле .booking__form input есть padding-left: 10px;,
      который будет толкать текст вправо. Для центрирования его нужно убрать или сделать симметричным. */
   padding-left: 0;
   padding-right: 0; /* Возможно, вам захочется добавить симметричный padding */

   /* Для Safari на iOS могут быть также внутренние псевдоэлементы, которые мешают центрированию.
      Их тоже нужно сбросить или скрыть. */
   &::-webkit-inner-spin-button, /* Скрывает стрелочки для чисел */
   &::-webkit-calendar-picker-indicator { /* Скрывает иконку календаря */
      display: none;
      -webkit-appearance: none;
   }
   /* Для type="time" */
   &::-webkit-clear-button { /* Скрывает кнопку очистки */
      display: none;
      -webkit-appearance: none;
   }
   /* Если вы хотите добавить иконку календаря/часов самостоятельно с помощью background-image,
      убедитесь, что она не конфликтует с text-align. */
}

/* Возможно, для лучшего выравнивания самой группы элементов */
.date__time__group {
   display: flex;
   /* Если вы хотите, чтобы вся группа центрировалась внутри booking__form,
      убедитесь, что у нее есть определенная ширина или используйте justify-content. */
   justify-content: space-between; /* Если нужно раскидать по краям */
   /* Или: */
   /* justify-content: center; */ /* Если хотите, чтобы оба поля центрировались как группа */
   /* gap: 10px; */ /* Добавляет отступы между дочерними элементами flex */
}

.date__time__group > div {
   flex: 1; /* Чтобы div'ы занимали равное пространство */
   margin-right: 10px; /* Отступ между полем даты и полем времени */
}

.date__time__group > div:last-child {
   margin-right: 0; /* Убираем отступ у последнего элемента */
}

    .booking__form input[type="date"],
    .booking__form input[type="time"],
    #booking_date,
    #booking_time {
        /* ...другие стили... */
        text-align: center !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        /* Или просто padding: 0 !important; */
    }

.element-with-bottom-blur {
    position: relative; /* Важно для позиционирования overlay */
    width: 400px;
    height: 350px; /* Высота элемента, чтобы было видно эффект */
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    padding: 20px;
    overflow: hidden; /* Важно, чтобы блюр не выходил за границы */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Чтобы контент растянулся по высоте */
}

.element-with-bottom-blur h2 {
    margin-top: 0;
    color: #333;
}

.element-with-bottom-blur p {
    margin-bottom: 10px;
    color: #555;
}

.element-with-bottom-blur .example-image {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 10px 0;
}


.blur-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;;
    height: 240px; /* Высота зоны, где будет проявляться блюр */
    backdrop-filter: blur(8px); /* Основной эффект блюра */
    -webkit-backdrop-filter: blur(8px); /* Для старых версий Safari */

    /* Создаем градиентную маску, чтобы блюр появлялся постепенно.
       'transparent' сверху (блюра нет), 'black' снизу (блюр полный). */
    mask-image: linear-gradient(to top, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 100%);
    -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 100%);

    /* Можно добавить небольшой фон, чтобы блюр был более заметным,
       особенно если фоновый цвет элемента похож на цвет контента. */
    background: linear-gradient(to top, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
    display: flex;
   text-align: center;
    justify-content: center;
}

.read-later { 
    position: absolute;
    text-align: center;
    align-self: center;
    margin-bottom: 60px;
    cursor: pointer;
    bottom: 0;
}