@font-face {
  font-family: "CraftworkGrotesk-Bold";
  font-style: normal;
  font-weight: 500;
  /* Браузер сначала попробует найти шрифт локально */
  src: local("Craftworks"),
       /* Если не получилось, загрузит woff2 */
       url("../fonts/CraftworkGrotesk-Bold.ttf") format("truetype");
       /* Если браузер не поддерживает woff2, загрузит woff */

}

@font-face {
  font-family: "GothamPro-Regular";
  font-style: normal;
  font-weight: 200;
  /* Браузер сначала попробует найти шрифт локально */
  src: local("GothamPro"),
       /* Если не получилось, загрузит woff2 */
       url("../fonts/GothaProReg.woff") format("woff"),
       url("../fonts/GothaProReg.otf") format("opentype");
       
       /* Если браузер не поддерживает woff2, загрузит woff */

}


@font-face {
  font-family: "GothamPro-Bold";
  font-style: normal;
  font-weight: 500;
  /* Браузер сначала попробует найти шрифт локально */
  src: local("GothamPro"),
       /* Если не получилось, загрузит woff2 */
       url("../fonts/GothaProBol.woff") format("woff"),
       url("../fonts/GothaProBol.otf") format("opentype");
       
       /* Если браузер не поддерживает woff2, загрузит woff */

}

 a,
   button,
   input,
   select,
   h1,
   h2,
   h3,
   h4,
   h5,
   * {
       box-sizing: border-box;
       margin: 0;
       padding: 0;
       border: none;
       text-decoration: none;
       background: none;
   
   }
   
   menu, ol, ul {
       list-style-type: none;
       margin: 0;
       padding: 0;
   }

   div, p, a{
    color: #131d45;
  text-align: left;
  font-family: "GothamPro-Regular", sans-serif;
  font-size: 24px;
  line-height: 120%;
  font-weight: 400;
   }

  h1{
    text-align: left;
    font-family: "CraftworkGrotesk-Bold", sans-serif;
    font-size: 64px;
    line-height: 140%;
    font-weight: 700;
  }

body{
  background-color: #FFE7D0;
}

.main-wrapper{
  padding: 15px 272px 20px 272px;
  background-color: #FFE7D0;
  max-width: 1920px;
}

.main-start-photo{
  border-radius: 10px 0px 0px 10px;
  width: 1165px;
  height: 1000px;
  position: absolute;
  left: 740px;
  top: 0px;
  object-fit: cover;
}

header{
  max-width: 1360px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 1;
}

header menu.header-menu{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 30px;
}

header menu.header-menu a{
  color: #131d45;
  text-align: left;
  font-family: "GothamPro-Regular", sans-serif;
  font-size: 20px;
  font-weight: 400;
}

.header-menu-link:hover{
  font-family: "GothamPro-Regular", sans-serif;
  font-weight: 700;
}

.header-phone-container{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.header-phone{
  text-align: left;
  font-family: "CraftworkGrotesk-Bold", sans-serif;
  font-size: 24px;
  line-height: 120%;
  font-weight: 700;

}

.header-phone-schedule{
  font-size: 20px;
}

footer{
  margin-top: 60px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

footer p{
  font-size: 20px;
}

.footer-social{
  width: 208px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.footer-icons{
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: #A8DAE3;
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer-icons:hover{
  background-color: #FF9639;
}

.footer-icons:hover path{
  fill: #FFE7D0;
}

.footer-social-title{
  font-size: 20px;
  text-align: center;
}

.footer-social-icons{

  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.footer-contact-us{
  width: 208px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.footer-contact-title{
  text-align: center;
}

.footer-contact-icons{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.footer-adress{
  width: 265px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.footer-adress-title{
  text-align: center;
}

footer .header-phone-container{
  justify-content: space-between;
}

.start-screen{
  height: 888px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 40px;
  position: relative;
  z-index: 1;
}

.start-screen-text-wrapper{
  width: fit-content;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 40px;
  margin-bottom: 20px;
}

.start-screen-h{
  width: 672px;
  text-align: left;
  font-family: "CraftworkGrotesk-Bold", sans-serif;
  font-size: 64px;
  line-height: 140%;
  font-weight: 700;
}

.start-screen-paragraph {
  width: 672px
}

.start-screen-button {
  width: 267px;
  height: 49px;
  background: #ff9639;
  border-radius: 40px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: center;

  text-align: left;
  font-family: "GothamPro-Bold", sans-serif;
  font-size: 24px;
  line-height: 120%;
  font-weight: 700;

  align-self: center;
  margin-left: 60px;
}

.start-screen-button:hover{
  background-color: #3860FF;
  color: #FFE7D0;
}

.start-screen-button:active{
  background-color: #A8DAE3;
  color: #131D45;
}

.expectation{
  margin-top: 60px;
  margin-bottom: 60px;
}

.expectation-header{
  text-align: center;
}

.expectation-advantages-wrapper{
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.expectation-advantages-line{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 10px;
}

.expectation-advantages-element{
  color: #FFE7D0;
  font-family: "CraftworkGrotesk-Bold", sans-serif;
  font-size: 64px;
  line-height: 140%;
  font-weight: 700;
  text-align: left;

  height: 120px;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}


.expectation-advantages-element.blue{
  background-color: #3860FF;
}

.expectation-advantages-element.orange{
  background-color: #FF9639;
}

.expectation-advantages-element.exp-zal{
  width: 327px;
}

.expectation-advantages-element.exp-event {
  width: 442px;
}

.expectation-advantages-element.exp-ps {
  width: 555px;
}

.expectation-advantages-element.exp-nastolki {
  width: 551px;
}

.expectation-advantages-element.exp-coffee {
  width: 326px;
}

.expectation-advantages-element.exp-tea {
  width: 441px;
}

.expectation-advantages-element.exp-cinema {
  width: 325px;
}

.expectation-advantages-element.exp-comics {
  width: 690px;
}

.expectation-advantages-element.exp-manga {
  width: 322px;
}

.main-hall {
  margin-bottom: 60px;
}

.main-hall-container-wrapper{
  margin-top: 40px;
  padding-left: 115px;
  padding-right: 115px;
  height: 700px;
  width: 1360px;
  background-color: #FFBC41;
  border-radius: 10px;
  position: relative;
}

.main-hall-container{
  
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.main-hall-container-header{
  padding-top: 40px;
}

.main-hall-container-content{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 20px;
}

.main-hall-container-gallery{
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.main-hall-gallery-big img{
  width: 440px;
  height: 330px;
  border-radius: 10px;
}

.main-hall-gallery-small{
  width: 440px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.main-hall-gallery-small img{
  width: 95px;
  height: 80px;
  border-radius: 10px;
}

.main-hall-container-text{
  display: flex;
  flex-direction: column;
  gap: 40px;
  justify-content: center;
  padding-bottom: 80px;
}

.main-hall-arrow {
  position: absolute;
  top: 350px;
}

.main-hall-arrow:hover{
  fill: #131D45;
}

.main-hall-arrow:hover .main-hall-arrow-path{
  fill: #FFBC41;
}

.main-hall-arrow.inzone:hover .main-hall-arrow-path{
  fill: #A8DAE3;
}

.main-hall-arrow.midzone:hover .main-hall-arrow-path{
  fill: #FF9639;
}

.main-hall-arrow.left{
  left: 0px;
}

.main-hall-arrow.right{
  right: 0px;
}

.main-hall-link{
  text-align: right;
  padding-right: 32px;
  text-decoration: underline;
}

.main-hall-link:hover{
  font-family: "GothamPro-Bold", sans-serif;
  font-weight: 700;
}

.main-hall-container-wrapper.inzone{
  display: none;
  background-color: #A8DAE3;
}

.main-hall-container-wrapper.midzone{
  display: none;
  background-color: #FF9639;
}


.main-events-header-wrap{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 40px;
  align-items: center;
}

.main-events-link {
  text-decoration-line: underline;
}

.main-events-link:hover{
  font-family: "GothamPro-Bold", sans-serif;
  font-weight: 700;
}

.main-events-content{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.main-events-big{
  width: 900px;
  height: 546px;
  border-radius: 10px;
  background-image: url("../img/main-event.png");
  padding-left: 115px;
  padding-top: 50px;
  position: relative;
}

.main-events-date{
  color: #FFE7D0;
  font-family: "CraftworkGrotesk-Bold", sans-serif;
  font-size: 64px;
  line-height: 140%;
  font-weight: 700;
  text-align: left;
}

.main-events-name{
    color: #ffe7d0;
    text-align: left;
    font-family: "CraftworkGrotesk-Bold", sans-serif;
    font-size: 76px;
    line-height: 140%;
    font-weight: 700;

    margin-top: 150px;
    margin-bottom: 20px;
}

.main-events-time{
  color: #ffe7d0;
  margin-bottom: 20px;
}

.main-events-condition{
  color: #ffe7d0;
}

.main-events-zone{
  width: 178px;
  height: 50px;
  background-color: #FF9639;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px 0px 0px 20px;
  position: absolute;
  right: 0;
  top: 65px;
}

.main-events-zone-name{
  color: #ffe7d0;
  font-family: "GothamPro-Bold", sans-serif;
  font-size: 24px;
  line-height: 120%;
  font-weight: 700;
}

.main-events-small{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.main-events-small-plashka{
  width: 440px;
  height: 159px;
  background-color: #FFBC41;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;

}

.main-events-small-name{
  text-align: left;
  font-family: "CraftworkGrotesk-Bold", sans-serif;
  font-size: 64px;
  line-height: 140%;
  font-weight: 700;
}

.main-events-small-plashka.lightblue{
  background-color: #A8DAE3;
}

.main-cost{
  margin-top: 60px;
}

.main-cost-header{
  line-height: 90%;
}

.main-cost-content{
  display: flex;
  gap: 20px;
}

.main-cost-title{
  padding-top: 50px;
}

.main-cost-title-tarif{
  display: flex;
  flex-direction: column;
  gap: 49px;
}

.main-cost-tarif{
  width: 900px;
  height: 350px;
  background-color: #A8DAE3;
  border-radius: 10px;
  padding-left: 115px;
  padding-top: 25px;
}

.main-cost-tarif-title{
  font-family: "GothamPro-Bold", sans-serif;
  font-size: 24px;
  line-height: 120%;
  font-weight: 700;
}

.main-cost-tarif-line{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-right: 450px;
}

.main-cost-tarif-line p{
  margin-top: 30px;
}

.main-cost-link{
  position: relative;
  left: 350px;
  top: 20px;
  text-decoration: underline;
}

.main-cost-link:hover{
  font-family: "GothamPro-Bold", sans-serif;
  font-weight: 700;
}

.main-cost-free{
  width: 440px;
  height: 507px;
  background-color: #FFBC41;
  border-radius: 10px;
  padding: 55px 68px;
  padding-bottom: 35px;
}

.main-cost-free-line{
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}


.main-rules{
  margin-top: 60px;
}

.main-rules-container{
  display: flex;
  flex-direction: row;
  margin-top: 40px;
  justify-content: space-between;
  padding-left: 115px;
  padding-right: 115px;
}

.main-rule-element{
  width: 555px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.main-rules-left{
  display: flex;
  flex-direction: column; 
}

.main-rule-title{
  display: flex;
  flex-direction: row;
  align-items: center;
}

.main-rule-number{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #A8DAE3;
  display: flex;
  justify-content: center;
  align-items: center;

  font-family: "GothamPro-Bold", sans-serif;
  font-size: 24px;
  line-height: 120%;
  font-weight: 700;
}

.main-rule-title-name{
  font-family: "GothamPro-Bold", sans-serif;
  font-size: 24px;
  line-height: 120%;
  font-weight: 700;
}

.main-rules-right{
  display: flex;
  flex-direction: column;
  gap: 141px;
  padding-top: 257px;
}

.main-rules-right p{
  text-align: right;
}

.main-rules-right .main-rule-title{
  justify-content: right;
}

.main-rule-element.rule-1{
  margin-bottom: 229px;
}

.main-rule-element.rule-3{
  margin-bottom: 175px;
}

.main-rules-right .main-rule-number{
  background-color: #FFBC41;
  position: relative;
  right: -15px;
}

.main-rules-left .main-rule-number{
  position: relative;
  left: -15px;
}


.main-booked{
  margin-top: 60px;
}

.main-booked-header{
  margin-bottom: 40px;
}

.main-booked-description{
  max-width: 1005px;
  margin-bottom: 40px;
}

.main-booked-description span{
  text-decoration: underline;
}

.main-booked-link{
  position: relative;
  left: 920px;
  text-decoration: underline;
}

.main-booked-link:hover{
  font-family: "GothamPro-Bold", sans-serif;
  font-weight: 700;
}




/* ТАРИФЫ */


.tarif-header{
  display: grid;
  grid-template-columns: 141px 683px 240px;
  margin-bottom: 100px;
}

.tarif-footer{
  max-width: 1366px;
  display: grid;
  grid-template-columns: auto auto auto auto auto;
}

.tarif-content-header{
  margin-bottom: 40px;
}

.tarif-blocks-container{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-gap: 20px;
}

.tarif-block{
  min-height: 399px;
  border-radius: 10px;
  padding-left: 39px;
  padding-top: 41px;
  padding-bottom: 44px;
}

.tarif-block.basic{
  background-color: #A8DAE3;
}

.tarif-block.stud{
  background-color: #FFBC41;
}

.tarif-block.night{
  background-color: #FF9639;
}

.tarif-cost-tarif-title{
  font-family: "GothamPro-Bold", sans-serif;
  font-weight: 700;
}

.tarif-block{
  display: grid;
  grid-template-rows: repeat(6, 1fr);
}

.tarif-cost-tarif-line{
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.tarif-cost-tarif-price{
  justify-self: center;
}

.tarif-free{
  margin-top: 60px;
}

.tarif-free h1{
  margin-bottom: 40px;
}

.tarif-free-description{
  margin-bottom: 40px;
}

.tarif-free-icon{
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background-color: #A8DAE3;
  display: grid;
  justify-content: center;
  align-content: center;
}

.tarif-block-container{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: 40px;
}

.tarif-free-block{
  display: grid;
  grid-template-columns: 1fr 4fr 1fr;
  height: 127px;
  align-items: center;
}

.tarif-free-text{
  display: grid;
  grid-template-rows: 1fr 2fr;
  gap: 20px;
}

.tarif-free-title{
  font-family: "GothamPro-Bold", sans-serif;
  font-weight: 700;
}

.tarif-disconts{
  margin-top: 60px;
  margin-bottom: 80px;
}

.tarif-discont-header{
  margin-bottom: 40px;
}

.tarif-discont-description{
  margin-bottom: 40px;
}

.tarif-discont-container{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 20px;
}

.tarif-discont-count{
  text-align: center;
  font-family: "CraftworkGrotesk-Bold", sans-serif;
  font-size: 64px;
  line-height: 140%;
  font-weight: 700;
}

.tarif-discont-details{
  text-align: center;
}


/* Booking*/


@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1360px;
    }
}

.booking-header{
  display: block;
  color: #131d45;
  
}

.nav-link{
  color: #131d45;
  text-align: left;
  font-family: "GothamPro-Regular", sans-serif;
  font-size: 20px;
  font-weight: 400;
}

.nav-link:hover{
  font-family: "GothamPro-Regular", sans-serif;
  font-weight: 700;
  color: #131D45;
}


.container{
  max-width: 1360px;
  padding-left: 0px;
  padding-right: 0px;
}

.row.header-phone{

}

.row.header-phone-schedule{
 
}

.row.booking-header-row{
  justify-content: space-between;
  align-items: center;
}

.col-4.booking-header-contact{
  width: 18%;
  align-content: space-between;
}

header .col-6{
  width: 65%;
}

header .col-2{
  width: 12%;
}

.booking-content-header{
  margin-top: 80px;
}

.booking-content-description{
  margin-top: 40px;
}

.booking-form-container{
  row-gap: 40px;
}


.form-time-from{
  display: inline;
}

.form-time-from.firstline{
  padding-left: 13px;
}

label{
  padding-bottom: 20px;
  padding-left: 13px;
}

.form-control,
.form-select{
  width: 325px;
  height: 49px;
  border-radius: 20px;
  border-color: #A8DAE3;
  color: #3860FF;
  font-family: "GothamPro-Regular", sans-serif;
  font-size: 24px;
  line-height: 120%;
  font-weight: 400;
}

.form-select.time-form{
  display: inline-block;
  width: 93px;
}

.form-control::placeholder,
.form-select::placeholder{
  color: #A8DAE3;
  font-family: "GothamPro-Regular", sans-serif;
  font-size: 24px;
  line-height: 120%;
  font-weight: 400;

}

.form-control:focus,
.form-select:focus{
  border-color: #3860FF;
  color: #3860FF;
  box-shadow: 0 0 0 0;
}

option{
  color: #A8DAE3;
}

select.form-select {
  --bs-form-select-bg-img: url("../img/select-arrow.svg");
  background-image: url("../img/select-arrow.svg");
}


.booking-form-btn{
  width: 325px;
    height: 49px;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #FF9639;
    color: #131D45;
    font-family: "GothamPro-Bold", sans-serif;
    font-size: 24px;
    line-height: 120%;
    font-weight: 700;
}

.btn:first-child:active{
  background-color: #A8DAE3;
  color: #131D45;
}

.booking-content .container{
  margin-top: 40px;
}

.booking-content{
  margin-bottom: 180px;
}

.applied-content{
  padding-left: 149px;
  padding-right: 149px;
  padding-top: 358px;
  padding-bottom: 342px;
}

.applied-header{
  text-align: center;
}

.applied-text{
  text-align: center;
  margin-top: 58px;
}