@import url('https://fonts.googleapis.com/css2?family=Comic+Relief:wght@400;700&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root{
  --color-body: #000;
  --color-main: #fd0119;
  --color-secondary: #405C85;
  --color-border: #f2f6fc;
  --color-button: #333;
  --color-contrast: #777;
  --color-nuance: rgb(116, 172, 150);
}

body{ margin: 0; font-size: 16px; padding: 0; background: var(--color-body); color: #fff; font-family: "Roboto", sans-serif;font-optical-sizing: auto;font-weight: 300;font-style: normal;font-variation-settings: "wdth" 100;}
#footer{overflow: hidden; width: 100%;}
#index input, #index textarea{padding: 10px; width: 100%; border-radius: 10px; box-sizing: border-box; border: 1px solid var(--color-button)}
.hexagon, .product-file{ aspect-ratio: 1/1; clip-path: polygon(45% 1.33975%, 46.5798% 0.60307%, 48.26352% 0.15192%, 50% 0%, 51.73648% 0.15192%, 53.4202% 0.60307%, 55% 1.33975%, 89.64102% 21.33975%, 91.06889% 22.33956%, 92.30146% 23.57212%, 93.30127% 25%, 94.03794% 26.5798%, 94.48909% 28.26352%, 94.64102% 30%, 94.64102% 70%, 94.48909% 71.73648%, 94.03794% 73.4202%, 93.30127% 75%, 92.30146% 76.42788%, 91.06889% 77.66044%, 89.64102% 78.66025%, 55% 98.66025%, 53.4202% 99.39693%, 51.73648% 99.84808%, 50% 100%, 48.26352% 99.84808%, 46.5798% 99.39693%, 45% 98.66025%, 10.35898% 78.66025%, 8.93111% 77.66044%, 7.69854% 76.42788%, 6.69873% 75%, 5.96206% 73.4202%, 5.51091% 71.73648%, 5.35898% 70%, 5.35898% 30%, 5.51091% 28.26352%, 5.96206% 26.5798%, 6.69873% 25%, 7.69854% 23.57212%, 8.93111% 22.33956%, 10.35898% 21.33975%);}
.font-handwrite{font-family: "Comic Relief", system-ui; font-weight: 400; font-style: normal;}
.page-description{font-size: 40px;;}
.line-after, .line-both, .line-before{color: var(--color-main); font-size: 28px; margin-top: 10px;}

.button, .pay-button, .manage-button{ position: relative; cursor: pointer; border: none; display: inline-flex; align-items: center; vertical-align: middle; border: 1px solid #484848; -webkit-appearance: none; appearance: none; outline: none !important; font-weight: 400; font-size: 15px; text-transform: uppercase; letter-spacing: 1.6px; padding: 17px 30px 17px 30px; background: linear-gradient(90deg, #fd0119 0%, #000000 100%); border-radius: 10px; -o-transition: all .4s ease-in-out; -webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out; overflow: hidden; gap: 10px; z-index: 1; color: #fff; }
.button:after, .pay-button:after{content: "";  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); width: 150%; height: 150%; border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; background: linear-gradient(90deg, #000 0%, #fd0119 100%); transition-duration: 700ms; transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); z-index: -1;}
.button:hover::after, .pay-button:hover::after {bottom: -50%;}
.button-border{background: transparent; border: 1px solid var(--color-contrast); color: var(--color-border)}
.logger a{background: transparent; border: 1px solid #777; color: #fff; padding: 5px 10px; border-radius: 8px; margin: 0 5px; transition: 0.5s;  display: inline-block;}
.logger a:hover{background: #fff; color: #000;}

.music-note{position: absolute; top: 50%; left: 50%; opacity: 0; height: 70px; width: 70px;}
#big-note-0{animation: big-note-0 infinite 3s linear;}
@keyframes big-note-0{0%{opacity: 0; left:30%; top: 30%;} 80%{opacity: 1; left: 15%; top: 15%;} 100%{opacity: 0; left: 10%; top: 10%;}}
#big-note-1{animation: big-note-1 infinite 2.5s linear; animation-delay: 0.2s;}
@keyframes big-note-1{0%{opacity: 0; left:70%; top: 60%;} 80%{opacity: 1; left: 85%; top: 75%;} 100%{opacity: 0; left: 87%; top: 77%;}}
#big-note-2{animation: big-note-2 infinite 3.5s linear; animation-delay: 0.4s;}
@keyframes big-note-2{0%{opacity: 0; left:65%; top: 30%;} 80%{opacity: 1; left: 85%; top: 30%;} 100%{opacity: 0; left: 88%; top: 30%;}}
#big-note-3{animation: big-note-3 infinite 4s linear; animation-delay: 0.6s;}
@keyframes big-note-3{0%{opacity: 0; left:30%; top: 60%;} 80%{opacity: 1; left: 20%; top: 70%;} 100%{opacity: 0; left: 15%; top: 75%;}}
#big-note-4{animation: big-note-4 infinite 4.2s linear; animation-delay: 0.8s;}
@keyframes big-note-4{0%{opacity: 0; left:45%; top: 30%;} 80%{opacity: 1; left: 40%; top: 10%;} 100%{opacity: 0; left: 38%; top: 5%;}}

#small-note-0{animation: small-note-0 infinite 3s linear;}
@keyframes small-note-0{0%{opacity: 0; left:20%; top: 45%;} 60%{opacity: 1; left: 5%; top: 30%;} 100%{opacity: 0; left: 3%; top: 28%;}}
#small-note-1{animation: small-note-1 infinite 3s linear; animation-delay: 0.2s;}
@keyframes small-note-1{0%{opacity: 0; left:80%; top: 45%;} 75%{opacity: 1; left: 95%; top: 50%;} 100%{opacity: 0; left: 100%; top: 52%;}}
#small-note-2{animation: small-note-2 infinite 3s linear; animation-delay: 0.4s;}
@keyframes small-note-2{0%{opacity: 0; left:70%; top: 25%;} 80%{opacity: 1; left: 85%; top: 22%;} 100%{opacity: 0; left: 87%; top: 20%;}}
#small-note-3{animation: small-note-3 infinite 3s linear; animation-delay: 0.6s;}
@keyframes small-note-3{0%{opacity: 0; left:20%; top: 50%;} 80%{opacity: 1; left: 3%; top: 55%;} 100%{opacity: 0; left: 0%; top: 57%;}}
#small-note-4{animation: small-note-4 infinite 3s linear; animation-delay: 0.8s;}
@keyframes small-note-4{0%{opacity: 0; left:45%; top: 70%;} 80%{opacity: 1; left: 40%; top: 83%;} 100%{opacity: 0; left: 38%; top: 85%;}}

.small-banner{box-shadow: 0 0 33px #c9c9c9; border-radius: 20px; padding: 10px; line-height: 1.3rem;}
.border-radius-10{border-radius: 10px; overflow: hidden;}
.border-radius-20{border-radius: 20px; overflow: hidden;}
.video-play-button{color: var(--color-main)}
.languages{gap: 5px; display: flex; margin: 5px;}
#search svg{fill: #fff;}
.swiper, .swiper-wrapper{height: 100%;}
.swiper-button-next, .swiper-button-prev{color: var(--color-main);}
/* HEADER */
.top-header-bar{border-top: 1px solid var(--color-border);}
.desktop .top-menu{display: flex; justify-content: center; margin: 0;}
.top-menu a{padding: 4px 20px; display: block;}
#header .top-menu .menu-item:after{content: ""; position: absolute; top: 90%; left: 20px; height: 2px; width: 0; transition: 0.5s; background-color: var(--color-main);}
#header .top-menu .menu-item:hover:after, #header .top-menu .menu-item.active:after{width: calc(100% - 40px);}
.title{font-size: 48px; margin: 10px 0;}
.admin{margin: 10px auto;}

#menu-contacts-header .menu-contact-item{padding: 5px 0;}
#menu-contacts-header .contact-file{color: #fff; background: linear-gradient(90deg, #fd0119 0%, #000000 100%); border-radius: 100%; padding: 7px; box-sizing: border-box; width: 40px; height: 40px;}
#header .top-menu .menu-item{position: relative;}

/* #index{overflow: hidden;} */

.mobile-menu-active{overflow: hidden;}
#mobile-menu{width: 100%; height: 100%; top: 0; left: -100%; position: fixed; transition: 0.5s; z-index: 4;}
.mobile-menu-active #mobile-menu{left: 0;}
#mobile-menu .top-menu a{font-size: 1.3rem;}
.mobile-menu-opener{position: fixed; top: 20px; right: 20px; z-index: 5;}
.mobile-menu-opener > span{display: block; width: 40px; height: 2px; background-color: var(--color-main); margin: 8px 0; transition: 0.5s;}
.mobile-menu-active .mobile-menu-opener > span:nth-child(1){transform: rotate(45deg) translate(5px, 10px);}
.mobile-menu-active .mobile-menu-opener > span:nth-child(2){display: none;}
.mobile-menu-active .mobile-menu-opener > span:nth-child(3){transform: rotate(-45deg) translate(-3px, -2px);}
#menu-contacts-header{display: flex; gap: 10px;}

.rotate-effect{animation: rotate-effect infinite 5s linear;}
@keyframes rotate-effect{
  0% {
    transform: scale(1);
  } 
  25% {
    transform: scale(1.1);

  }
  50% {
    transform: scale(1);

  }
  75% {
    transform: scale(0.9);

  }
}

.move-effect{animation: move-effect infinite 7s linear;}
@keyframes move-effect{
  0% {
    transform: translate(0px, 0px);
  } 
  25% {
    transform: translate(30px, 0px);

  }
  50% {
    transform: translate(0px, 0px);

  }
  75% {
    transform: translate(-30px, 0px);

  }
}

.scale-effect{animation: scale-effect infinite 7s linear;}
@keyframes scale-effect{
  0% {
    transform: scale(1);
  } 
  25% {
    transform: scale(1.1);

  }
  50% {
    transform: scale(1);

  }
  75% {
    transform: scale(0.9);

  }
}

.scale-rotate-effect{animation: scale-rotate-effect infinite 7s linear;}
@keyframes scale-rotate-effect{
  0% {
    transform: translate(0px, 0px);
  } 
  25% {
    transform: translate(30px, 0px);

  }
  50% {
    transform: translate(0px, 0px);

  }
  75% {
    transform: translate(-30px, 0px);

  }
}

/* FOOTER */
.manager-info{border-radius: 10px;}

/* CONTACT FORM */
#contact-form > div{margin-top: 20px;}
#contact-form .flex{gap: 10px;}
#contact-form span{display: block; padding-bottom: 5px;}


.color-background{background: linear-gradient(90deg, #fd0119 0%, #000 100%); color: #fff;}
.color-main{color: var(--color-main); fill: var(--color-main);}
.color-main-bg{background-color: var(--color-main);}
.color-secondary{color: var(--color-secondary);}
.color-button{color: var(--color-button);}
.color-button-bg{background-color: var(--color-button);}
.congress-price{color: #fff;}

/* HOME */
#layout-33 .image{filter: brightness(0.5) opacity(0.6);}
.home-groups, .layout-content .swiper{overflow: hidden;}
.home-instructors .home-instructor-content{border: 1px solid var(--color-button); border-radius: 20px; box-sizing: border-box;}
.home-instructors .home-instructor-content .instructor-image{height: 300px; width: 100%; border-radius: 20px; overflow: hidden;}
.home-groups .home-group-content{ border-radius: 20px; box-sizing: border-box;}
.home-groups .home-group-content .groups-image{height: 520px; width: 100%; border-radius: 20px; overflow: hidden;}
#layout-115 .video-play-button{width: 50%; height: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%);}
#layout-182, #layout-801{ position: absolute; top: -500px; width: 100%; opacity: 0.5;}
.dance-with-us-icons-background{width: 140%; height: 140%; top: -20%; left: -20%;}
.dance-with-us-icons-background .image{object-fit: contain; animation: rotate-balkan-icons 7s linear infinite;}
#home-swiper{width: 1200px; aspect-ratio: 16/8; margin: 0 auto; overflow: visible; height: auto;}
.price-palm{position: absolute; top: 20px; right: 20px;}

.photo-gallery{column-count: 3; column-gap: 0;}
.photo-gallery .image{padding: 10px; border-radius: 20px; overflow: hidden; box-sizing: border-box;}
#layout-368 .image{border-radius: 15px;}

@keyframes rotate-balkan-icons {
  from{transform: rotate(0);} to {transform: rotate(360deg);}
}

@media screen and (max-width: 1080px) {
  h1{font-size: 2.4rem;}
  #home-swiper{width: 100%; aspect-ratio: 16/12; padding: 10px 0;}
  .home-groups .home-group-content .groups-image{height: 350px;}
  .mobile-menu-container{overflow: auto;}
  #header .top-menu .menu-item{width: fit-content;}
  .frame{padding: 0 10px;}
  .sticky{position: relative;}
  .photo-gallery{column-count: 2;}
  #layout-182, #layout-801{top: -200px;}

}

@media screen and (max-width: 768px) {
  #home-swiper{ height: 360px;}
  #home-swiper .swiper-slide-active{ transform: scale(1.3, 1) !important;}
  #home-swiper .swiper-button-prev, #home-swiper .swiper-button-next{transform: translateY(300px);}
  .photo-gallery{column-count: 1;}
  .home-groups .home-group-content .groups-image{height: 400px;}
  .photo-gallery{column-count: 1;}
  #layout-182, #layout-801{top: 0;}
}