@import url('https://fonts.googleapis.com/css2?family=Anton+SC&family=Mulish:ital,wght@0,200..1000;1,200..1000&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
body{margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; background-color: #000;font-family: "Anton SC", sans-serif; font-weight: 400; font-style: normal; letter-spacing: 2px; color: #fff;}

.button, .pay-button{ position: relative; border: none; cursor: pointer; display: inline-flex; align-items: center; vertical-align: middle; -webkit-appearance: none; appearance: none; outline: none !important; font-weight: 400; font-size: 15px; text-transform: uppercase; letter-spacing: 1.6px; padding: 17px 70px 17px 30px; background: linear-gradient(90deg, #3fff00 0%, #00a5ff 100%); border-radius: 30px; -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: #000; }
.button::before, .pay-button:before{content: ""; display: block; position: absolute; background: url('/web/file/previous-arrow-icon.svg') no-repeat center / 20px 20px; right: 30px; bottom: 16px; width: 20px; height: 20px;}
.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, #00a5ff 0%, #3fff00 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%;}
.offer-button{padding: 4px 8px; background-color: #00a5ff; border-radius: 15px; display: inline-block; cursor: pointer; transition: 0.5s;}
.offer-button:hover{background-color: #91d8ff; }
.pass-full{transition: 0.5s;}
.pass-full:hover{color: #00a5ff; text-shadow: 2px 1px #000; scale: 1.05;}
.pass-dance{transition: 0.5s;}
.pass-dance:hover{color: #00ff63; text-shadow: 2px 1px #000; scale: 1.05;}
.font-size-30{font-size: 30px;}
.color-1{color: #00a5ff;}
.color-1-bg{background-color: #00a5ff;}
.color-2{color: #00ff63;}
.color-2-bg{background-color: #00ff63;}
.color-3{color: #222;}
.color-3-bg{background-color: #222;}
.color-4{color: #004a76;}
.paradise, .color-4-bg{background-color: #004a76;}
.color-background{background: linear-gradient(90deg, #00a5ff 0%, #3fff00 100%); color: #000;}
.logger a{display: block;}
.word-break{word-break: break-word;}

#header{z-index: 2; position: relative;}
#header ul{list-style-type: none;}
#menu-navigation{transform: translateY(-40px); transition: 0.5s;}
#menu-navigation > .absolute{border-top-right-radius: 10px; border-bottom-right-radius: 10px;}
#menu-navigation .header-navigation > ul{display: flex; list-style-type: none; gap: 30px; position: relative;}
#menu-navigation .header-navigation .sub-item a, #menu-navigation .header-navigation .menu-item a{position: relative; transition: 0.5s;}
#menu-navigation .header-navigation .sub-item > .sub-menu{max-height: 0; overflow: hidden; opacity: 0; position: absolute; top: 0%; left: -20px; padding: 20px; background-color: #fff; border-radius: 10px;}
#menu-navigation .header-navigation .sub-item > a:after, #menu-navigation .header-navigation .menu-item > a:after{content: ""; display: block; position: absolute; bottom: -10px; left: 0; height: 2px; width: 0; background: linear-gradient(90deg, #00a5ff 0%, #3fff00 100%); color: #000; transition: 0.5s;}
#menu-navigation .header-navigation .sub-item.active > a, #menu-navigation .header-navigation > .sub-menu > .sub-item:hover > a, #menu-navigation .header-navigation .menu-item.active > a, #menu-navigation .header-navigation > .top-menu > .menu-item:hover > a{color: #00a5ff;}
#menu-navigation .header-navigation .sub-item.active > a:after, #menu-navigation .header-navigation > .sub-menu > .sub-item:hover > a:after, #menu-navigation .header-navigation .menu-item.active > a:after, #menu-navigation .header-navigation > .top-menu > .menu-item:hover > a:after{width: 30px;}
#menu-navigation .header-navigation .with-sub{position: relative;}
#menu-navigation .header-navigation .with-sub:after{content: ""; display: block; background: url('/web/file/bottom-icon.svg') no-repeat center/10px 10px; width: 10px; height: 10px; background-size: contain; position: absolute; left: 105%; top: 50%; transform: translateY(-50%);}
#menu-navigation .header-navigation .with-sub.active:after, #menu-navigation .header-navigation > .sub-menu > .with-sub:hover:after{background-image: url('/web/file/bottom-icon-active.svg');}
#menu-navigation .header-navigation .sub-item:hover > .sub-menu{max-height: 400px; opacity: 1; transition: 0.5s; top: 100%; width: 200px; z-index: 3;}
#menu-navigation .header-navigation .sub-item > .sub-menu a{padding: 5px 0; display: inline-block; transition: 0.5s;}
#menu-navigation .header-navigation .sub-item > .sub-menu .sub-item:hover a{padding-left: 15px;}
#menu-navigation .header-navigation .sub-item > .sub-menu .sub-item{display: flex; align-items: center; padding: 0 10px;}
#menu-navigation .header-navigation .sub-item > .sub-menu .sub-item:hover{background-color: #3fff00; border-radius: 10px;}
#menu-navigation .header-navigation .sub-item > .sub-menu .sub-item:hover:before{content: "//"; display: inline-block;}
#googleMaps{ width: 100%; height: 600px; position: relative;}
#hotelsMap{ width: 100%;	height: 600px;}
.hotels-list > .flex{flex-direction: column-reverse;}
.hotels-list > .flex > div{ width: 100% !important;}
.hotels-list > .flex .middle{ height: 750px;}
.hotels-list > .flex .milddle .image{object-position: bottom;}

.offer-design{background-color: #fff; color: #000; padding: 30px; border-radius: 10px;}
.offer-design ul {list-style: none; /* remove default bullets */padding-left: 0;}
.offer-design ul li::before { content: "✔"; /* or "✓", "✅" */ color: green;  /* optional */ font-weight: bold; /* optional */ margin-right: 8px;/* space between checkmark and text */}

.offer-design ol {list-style: none; /* remove default bullets */padding-left: 0;}
.offer-design ol li::before { content: "X"; color: red;  /* optional */ font-weight: bold; /* optional */ margin-right: 8px;/* space between checkmark and text */}

/* .fixed-header #menu-navigation{position: fixed; left: 0; top: -15px; transform: scale(0.8 ); transform-origin: left;}
.fixed-header #menu-palms{transform: scale(0.65); transform-origin: bottom;} */
.reserver-header-button{padding: 7px 10px; border-radius: 10px; margin: 2px 0;}
.reserver-header-button:before{display: none;}
.manager-info{border-radius: 10px;}

#home-swiper, #bottom-footer{overflow: hidden;}
#home-swiper{width: 1200px; aspect-ratio: 16/8; margin: 0 auto; overflow: visible; height: auto;}
.home-swiper-item{border-radius: 10px; overflow: hidden;}
#menu-palms{transform: translateY(-5px); height: 150px;}
#menu-palms .background{height: 80px; top: 80px;}

.country-banner, .artist-info{background: linear-gradient(90deg, #3fff00 0%, #00a5ff 100%); color: #000; text-align: center; padding: 30px 0;}
.artist-info h4{font-weight: normal;}
#index .country-banner{text-shadow: unset;}
.artist{width: 25%; box-sizing: border-box; aspect-ratio: 1/1.2; padding: 30px; display: flex; align-items: flex-end;}
.artist .background .image{border-radius: 20px; overflow: hidden;}
.balkan .artist .background{background: url('/web/file/balkan-artist-frame.png') no-repeat 50% 50%/cover; transform: scale(1.2);}
.balkan .artist .background .image{border-radius: 20px; overflow: hidden; width: 68%; height: 70%; left: 50%; top: 50%; position: relative; transform: translate(-50%, -50%); z-index: -1;}
.national .artist .background{background: url('/web/file/national-artist-frame.png') no-repeat 50% 50%/cover; transform: scale(1.1);}
.zeibekiko .artist .background{background: url('/web/file/zebekiko-ramkaartists.png') no-repeat 50% 50%/contain;}
.national .artist .background .image, .zeibekiko .artist .background .image{border-radius: 20px; overflow: hidden; width: 68%; height: 70%; left: 50%; top: 50%; position: relative; transform: translate(-50%, -50%); z-index: -1;}
.zeibekiko .artist .background .image{height: 85%;}
.artist .artist-info{border-radius: 20px;}
.photo-gallery{column-count: 3;}
.photo-gallery .File{padding: 10px; box-sizing: border-box;}
.font-1 {font-family: "Anton SC", sans-serif;font-weight: 400;font-style: normal;}

#index, #footer{overflow: hidden;}
.timetable{overflow: auto;}
.timetable th, .timetable td{padding: 0px 10px; border-radius: 9px; height: 44px;}
.price-palm{position: absolute; top: -20px; right: 0; width: 100px;}
.price-stars{position: absolute; top: -10px; right: 0; width: 130px;}
.balkan .price-palm{width: 130px;}

/* HOME */
.full-pass-ticket-text, .text-shadow{text-shadow: 1px 1px #000;}
#index h2, #index h3, .h-text-shadow{text-shadow: 2px 2px #000;}
#index .manage-index h2, #index .manage-index h3, #index .manage-index .h-text-shadow{text-shadow: none;}
.opening-animation{margin-bottom: 300px;}
/* .opening-background .image{object-position: bottom;} */
.opening-text{transform: translateX(50%); opacity: 0; transition: 0.2s;}
.opening-banner{transform: translateX(-30%); transition: 0.2s; height: fit-content;}

.opening-left-element{position: absolute; left: 0; height: 100%; bottom: 0;}
.opening-right-element{position: absolute; right: 0; top: 0; height: 100%;}

.price-board{width: 327px; border-radius: 15px; overflow: hidden; padding: 20px; background-color: #fff;}
.national .price-board{background-color: #131313; color: #fff;}
.national .price-board svg path{fill: #fff;}
.national .row-delimeter{border-color: #555;}
.price-header{width: 170px; border-top-right-radius: 30px; border-bottom-right-radius: 30px; margin-top: 20px; margin-bottom: 20px; padding-top: 10px; padding-bottom: 10px; padding-left: 30px; padding-right: 30px; transform: translate(-20px, 0px);}
.room-price-header{border-top-right-radius: 20px; border-bottom-right-radius: 20px; padding: 6px; transform: translate(-20px, 0px); font-size: 13px;}
.room-type-title{font-size: 30px;}
.price-separator{display: inline-block; margin: 0 5px;}
.row-delimeter{border-bottom: 1px solid #000;}
.price-date{font-size: 14px; text-align: center;}
.price-label{gap: 5px; font-size: 23px;}

/* timetable */
.timetable-cocktails{position: fixed; left: -450px; top: calc(50% - 150px); height: 700px; width: 700px; transform-origin: center center;}
.comptetiotion-cups{animation: complex-bounce 3s infinite cubic-bezier(0.7, 0.5, 0.1, 0.5);}

.congress-price-dates{padding-left: 98px; font-size: 20px;}
.congress-price-dates > .congress-price-date{padding: 0 12px;}
.paradise .congress-price-dates{padding-left: 92px;}
.paradise .congress-price-dates > .congress-price-date{padding: 0 11px;}


/* PARADISE */
.paradise .price-separator, .price-separator{width: 2px; height: 40px; background: linear-gradient(180deg, #00a5ff 0%, #3fff00 100%);}

/* SUNNY */
.sunny{background-color: #03032b;}
.sunny .button, .sunny .color-background, .sunny .country-banner, .sunny .artist-info,
.sunny #menu-navigation .header-navigation .sub-item > a:after,.sunny  #menu-navigation .header-navigation .menu-item > a:after
{background: linear-gradient(90deg, #ff8100 0%, #ffd600 100%);}
.sunny .button:after{background: linear-gradient(90deg, #ffd600 0%, #ff8100 100%);}
.sunny .artist .background{border-radius: 40%;}
.sunny .color-1{color: #ff6c00;}
.sunny .color-1-bg{background-color: #ff6c00;}
.sunny .color-2, .sunny .swiper-button-next,.sunny .swiper-button-prev{color: #ebbb00;}
.sunny .color-2-bg{background-color: #ebbb00;}
.sunny #menu-navigation .header-navigation .sub-item.active > a,.sunny #menu-navigation .header-navigation > .sub-menu > .sub-item:hover > a,.sunny #menu-navigation .header-navigation .menu-item.active > a,.sunny #menu-navigation .header-navigation > .top-menu > .menu-item:hover > a{color: #ff6c00;}
.sunny #layout-2117 > div{border-color: #ff6c00;}
.sunny .price-separator, .price-separator{width: 2px; height: 40px; background: linear-gradient(180deg, #ff8100 0%, #ffd600 100%);}

/* BALKAN */
.balkan{background-color: #000;}
.balkan .button, .balkan .color-background, .balkan .country-banner, .balkan .artist-info,
.balkan #menu-navigation .header-navigation .sub-item > a:after,.balkan  #menu-navigation .header-navigation .menu-item > a:after
{background: linear-gradient(90deg, #000 0%, #3fff00 100%); color: #fff;}
.balkan .button:after{background: linear-gradient(90deg, #3fff00 0%, #000 100%);}
.balkan #menu-navigation .header-navigation .sub-item.active > a,.balkan #menu-navigation .header-navigation > .sub-menu > .sub-item:hover > a,.balkan #menu-navigation .header-navigation .menu-item.active > a,.balkan #menu-navigation .header-navigation > .top-menu > .menu-item:hover > a, .balkan .color-1{color: #3BF401;}
.balkan-icons-background{width: 140%; height: 140%; top: -20%; left: -20%;}
.home-counter .balkan-icons-background, .national .balkan-icons-background{width: 120%; height: 120%; top: -10%; left: -10%;}
.home-counter h3{font-size: 34px;}
.balkan-icons-background{z-index: -1;}
.balkan-icons-background .image{object-fit: contain; animation: rotate-balkan-icons 24s linear infinite;}
.balkan #menu-palms .background{height: 150px; width: 120px; top: 10px; left: 57px;}
.balkan.mobile-menu #mobile-menu-logo{filter: none;}
.balkan .mobile #menu-palms .background{width: 80px; height: 90px; left: 3px; top: 15px;}
.balkan #mobile-menu-content #menu-navigation{color: #000;}
.balkan #desktop-header-logo{filter: none;}
.balkan #File-966{transform: scale(1.55);}
#layout-4429 .image{transform: scale(1.5);}
#layout-4329 h4 .Text{ color: #045800;}
.balkan .price-separator, .price-separator{width: 2px; height: 40px; background: linear-gradient(180deg, #3fff00 0%, #000 100%);}

/* INTERNATIONAL */
.national{background-color: #000;}
.national .button, .national .color-background, .national .country-banner, .national .artist-info,
.national #menu-navigation .header-navigation .sub-item > a:after,.national  #menu-navigation .header-navigation .menu-item > a:after
{background: linear-gradient(90deg, #Ad3001 0%, #E8be0b 100%);}
.national .button:after{background: linear-gradient(90deg, #E8be0b 0%, #Ad3001 100%);}
.national .artist .background{border-radius: 40%;}
.national .color-1, .national .color-4{color: #Ad3001;}
.national .color-1-bg{background-color: #Ad3001;}
.national .color-2, .national .swiper-button-next,.national .swiper-button-prev{color: #E8be0b;}
.national .color-2-bg{background-color: #E8be0b;}
.national #menu-navigation .header-navigation .sub-item.active > a,.national #menu-navigation .header-navigation > .sub-menu > .sub-item:hover > a,.national #menu-navigation .header-navigation .menu-item.active > a,.national #menu-navigation .header-navigation > .top-menu > .menu-item:hover > a{color: #Ad3001;}
.national #layout-2117 > div{border-color: #Ad3001;}
.national #menu-navigation > .white-bg{background-color: #131313;}
.national #menu-navigation a{color: #fff;}
.national .prices .white-bg{background-color: #131313; color: #fff;}
.national .prices .ticket-checkmark{filter: invert(1);}
.national #menu-palms .background{height: 100px; top: 57px; left: 10px; }
.national .price-separator, .price-separator{width: 2px; height: 40px; background: linear-gradient(180deg, #E8be0b 0%, #Ad3001 100%);}

/* ZEIBEKIKO */
.zeibekiko{background-color: #021c48;}
.zeibekiko .button, .zeibekiko .color-background, .zeibekiko .country-banner, .zeibekiko .artist-info,
.zeibekiko #menu-navigation .header-navigation .sub-item > a:after,.zeibekiko  #menu-navigation .header-navigation .menu-item > a:after
{background: linear-gradient(90deg, #68c3ff 0%, #e8e8e8 100%);}
.zeibekiko .button:after{background: linear-gradient(90deg, #e8e8e8 0%, #021c48 100%);}
.zeibekiko .artist .background{border-radius: 0%;}
.zeibekiko .color-1, .zeibekiko .color-4{color: #021c48;}
.zeibekiko .color-1-bg{background-color: #021c48;}
.zeibekiko .color-2, .zeibekiko .swiper-button-next,.zeibekiko .swiper-button-prev{color: #b59a00;}
.zeibekiko .color-2-bg{background-color: #b59a00;}
.zeibekiko #menu-navigation .header-navigation .sub-item.active > a,.zeibekiko #menu-navigation .header-navigation > .sub-menu > .sub-item:hover > a,.zeibekiko #menu-navigation .header-navigation .menu-item.active > a,.zeibekiko #menu-navigation .header-navigation > .top-menu > .menu-item:hover > a{color: #021c48;}
.zeibekiko #layout-2117 > div{border-color: #021c48;}
.zeibekiko #menu-navigation > .white-bg{background-color: #fff;}
.zeibekiko #menu-navigation a{color: #000;}
.zeibekiko .prices .white-bg{background-color: #fff;}
.zeibekiko .prices .ticket-checkmark{filter: invert(1);}
.zeibekiko #menu-palms{height: 130px; }
.zeibekiko .price-separator, .price-separator{width: 2px; height: 40px; background: linear-gradient(180deg, #e8e8e8 0%, #021c48 100%);}

.button.blank{background: transparent; border: 1px solid #fff; color: #fff;}
.button.blank:before{filter: invert(1);}
@keyframes rotate-balkan-icons {
  from{transform: rotate(0);} to {transform: rotate(360deg);}
}

@keyframes complex-bounce {
  0%, 30% {
    transform: translateY(0) scale(1);
  }
  10% {
    transform: translateY(-30px) scale(1.3);
  }
  15% {
    transform: translateY(0) scale(0.9);
  }
  20% {
    transform: translateY(-15px) scale(1.2);
  }
}
/* copetition */

@media screen and (min-width: 1920px) {
  #index h2{font-size: 72px;}
  #index h3{font-size: 56px;}
  #index .home-counter h3{font-size: 34px;}
}

@media screen and (max-width: 1920px) {
  .artist{width: 33.3333%;}
}

@media screen and (max-width: 1600px) {
  .frame{max-width: 1000px;}
  #menu-palms{width: fit-content;}
  .balkan #menu-palms{width: 250px;}
  #layout-1266{z-index: -1;}
  .hotels-list > .flex > div:nth-child(2){ height: 600px;}
}

@media screen and (max-width: 1080px) {
    .frame{max-width: 90%;}
    #home-swiper{width: 100%; aspect-ratio: 16/12; padding: 10px 0;}
    #congress-text h2{margin: 10px 0;}
    .button{padding: 10px 40px 10px 10px; font-size: 13px;}
    .button::before{right: 15px; bottom: 9px;}
    .artist{width: 33.3333%;}
    .artist{padding: 10px;}
    .artist-info{padding: 10px 0;}
    .artist > .padding-30{padding: 10px;}
    .artist-info h4{font-size: 16px; font-weight: normal;}

    .mobile-menu{overflow: hidden;}
    #mobile-menu-open li{width: 55px; height: 2px; background-color: #fff; margin: 10px 0; transition: 0.5s;}
    #mobile-menu-open{ position: relative; z-index: 4;}
    .mobile-menu #mobile-menu-logo{filter: invert(1);}
    #mobile-menu-logo .image{width: auto;}
    .mobile-menu #mobile-menu-open li:nth-child(1){transform: rotate(45deg) translate(15px, 5px); background-color: #000;}
    .mobile-menu #mobile-menu-open li:nth-child(2){width: 0; transition: 0s;}
    .mobile-menu #mobile-menu-open li:nth-child(3){transform: rotate(-45deg) translate(11px, -2px); background-color: #000;}

    #header{z-index: 3; position: relative;}
    #mobile-menu-content{position: fixed; width: 100%; height: 100%; left: -100%; top: 0; overflow: auto; transition: 0.5s;  z-index: 3;}
    .mobile-menu #mobile-menu-content{left: 0;}
    .mobile #menu-navigation{transform: translateY(0);}
    .mobile #menu-palms{height: 100px;}
    .mobile #menu-palms .background{height: 60px; top: 46px;}
    .national .mobile #menu-palms .background{height: 72px; top: 34px; left: 0;}
    #mobile-orders-button{transform: translate(50px, 10px);}
    #mobile-menus ul{margin: 0;}
    #mobile-menus .menu-item, #mobile-menus .sub-item{margin: 10px 0;}
    .reserver-header-button{padding: 7px 10px; transform: translateX(0px);}
    #mobile-reserve-navigation .absolute{border-top-left-radius: 10px; border-bottom-left-radius: 10px;}
    .national #mobile-reserve-navigation .white-bg{background-color: #131313;}

    .opening-right-element{height: 190px; z-index: -1;}
    .opening-right-element .image{width: auto;}
    .opening-left-element{bottom: -100px; height: 230px;z-index: 1;}
    .opening-left-element .image{width: auto;}
    .opening-animation{margin-bottom: 0;}
    .opening-text{transform: unset; opacity: 1;}
    .opening-banner{transform: unset;}
    
    #footer #congress-text-buttons > div{text-align: center; margin: 10px 0;}
    .photo-gallery{column-count: 1;}
    .info-tab .background{height: 300px; position: relative;}
    .transport-airplanes > div{margin-bottom: 20px;}
    #layout-2277, #layout-3283{top: -25px; left: -80px; z-index: -1; height: 170px;}
    .congress-home-banner{height: auto!important; padding-top: 50px!important; padding-bottom: 50px!important;}
    .congress-home-banner h2{font-size: 36px;}
    .congress-home-banner > .background{position: relative; margin-top: 40px;}
    .national .congress-home-banner > .background{height: 0;}
    .event-highlights > div{height: 65px!important; width: 65px!important; margin-bottom: 20px;}
    .event-highlights {font-size: 9px;}
    .event-highlights h3{font-size: 24px;}
    .balkan #menu-palms{width: 100px;}
    .balkan #File-966{transform: scale(1.35) translateY(5px);}
    #layout-1266{z-index: 2;}

    .offer-design{padding: 10px;}
    .offer-design table{width: 100%!important;}
    .offer-design table td{padding: 0px!important;}
    .offer-design table td *{font-size: 10px!important;}
  }


@media screen and (max-width: 768px) {
  .artist{width: 50%;}
  .timetable th, .timetable td, .timetable font{font-size: 15px!important; padding: 4px;}
  #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);}
  #congress-text h2{font-size: 26px;}
  #congress-text h3{font-size: 18px;}
  .info-tab > div{flex-direction: column-reverse;}
  #layout-2167{font-size: 12px;}
  .balkan .artist .background .image{border-radius: 10px;}
  .artist-info h4{font-size: 12px;}
}

@media screen and (max-height: 568px) {
  .congress-home-banner{height: auto!important; padding: 100px 0;}
}