@charset "utf-8";
/* CSS Document */

    @font-face {
    font-family: 'Evolventa';
    src: url('./fonts/Evolventa-Regular.woff2') format('woff2'),
        url('./fonts/Evolventa-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    }

    @font-face {
    font-family: 'Bebas Neue Cyrillic';
    src: url('./fonts/BebasNeueCyrillic.woff2') format('woff2'),
        url('./fonts/BebasNeueCyrillic.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    }  


    html.zoomed {zoom: 0.75;}
    
    html, body {margin: 0;padding: 0;height: 100%;}
    
    html { scroll-behavior: smooth; }
    
    body {  border:0px; font-family: "Evolventa";  font-size:16px; background-color: #f1eee8; overflow-x: hidden;}
    .site_body { margin: 0 auto; max-width: 1600px; height:100%;}
    .page_body {display: flex;  align-items: center; height: 100%;}
    
    #header { width: 100%; position: fixed; z-index: 9999; background-color: rgba(241, 238, 232, 0.95);}
    #header_table {margin: 0 auto; padding-top: 20px;  max-width: 1600px; text-align: center;}
    .header-shadow {box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.06); transition: box-shadow 0.3s ease;}

    
    .menu {
      list-style: none;
      display: flex;
      gap: 50px;
      padding: 0;
      margin: 0;
      margin-left: 40px;     
    }

    .menu li a {
      position: relative;
      text-decoration: none;
      color: #1c1c1c;
      padding-bottom: 4px;
      font-size: 30px;
      font-weight: bold;  
    }

    .menu li a::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -3px;
      width: 0;
      height: 2px;
      background-color: #e22674;
      border-radius: 2px;
      transition: width 0.3s ease-in-out;
    }

    .menu li a:hover::after {
      width: 100%;
    }
    
    .button {display: inline-block; padding:30px 40px 30px 40px; border-radius: 40px;  color:#ffffff; font-size: 28px; font-weight: bold; border:0px; text-decoration: none; font-family: "Evolventa"; position: relative; z-index:10;}
    #button_online_registration { background-color: #e22674; cursor: pointer;} 
    #button_online_registration:hover {background-color: #c91d64;}
    
    #button_online_registration2 { background-color: #73cbe7; cursor: pointer;} 
    #button_online_registration2:hover {background-color: #5bb5d4;}
    
    
    .index_text {color:#2a307a; font-size:133px; font-family: 'Bebas Neue Cyrillic'; position: relative; z-index:5;}

    #spiral1 {
      background-image: url("./images/spiral1.webp");
      background-repeat: no-repeat;
      background-size: contain;
      width: 50vw;
      aspect-ratio: 1000 / 974;
      position: absolute;
      right: 0;
      bottom: 0;
      z-index: 2;
    }
 
    #about_us {width: 100%; min-height: 100vh; background-color: #2a307a; display: flex; justify-content: center; align-items: center;}
    .about_us_texts {margin-left: 70px;}
    .about_us_text1 {font-family: 'Bebas Neue Cyrillic'; font-size:36px; color: #ffffff;}
    .about_us_text2 {font-family: 'Bebas Neue Cyrillic'; font-size:82px; color: #73cbe7; margin-top: 30px;}
    .about_us_text3 {font-family: "Evolventa"; font-size:30px; color: #ffffff; margin-top: 30px;}
  
    .about_us_tab td:first-child {width: 500px;} /*td галереї*/

    
.slider-wrapper {
  position: relative;
  width: 500px;
  height: 650px;
  max-width: 100%;
  margin: 0 auto;
  border-radius: 10px;
  overflow: visible;
}

.slider {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 70px;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
  position: relative;
  z-index: 2;
  background: white;
}

.slides {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease-in-out;
}

.slide {
  width: 100%;
  height: 100%;
  object-fit: cover;
  flex-shrink: 0;
  object-position: top;
}

.dots {
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 3;
}

.dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #ffffff;
  cursor: pointer;
}

.dot.active {
  background-color: #73cbe7;
}
    



#services {width: 100%; height:100%; background-image: url("./images/bg_services.webp"); position: relative;}    

#spiral2 {
  background-image: url("./images/spiral2.webp");
  background-repeat: no-repeat;
  background-size: contain;
  width: 50vw;
  aspect-ratio: 1000 / 683;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 4;
}




.services_body {width:100%; min-height:80%; background-color:#f1eee8;border-radius:70px; position: relative;} 
.services_body h1 { text-align: center; font-size: 82px; font-family: 'Bebas Neue Cyrillic'; color: #e22674;}    
    
#services_prices {font-family: "Evolventa"; font-size:35px; color: #000000; margin: 0 auto;  min-width: 900px; position:relative; z-index: 5; }
#services_prices td {padding-bottom: 25px;}
#services_prices .price {text-align: right; color: #2a307a;}
    
    
    .salons_body {width:100%;}
    .salons_body h2 { font-size: 50px; font-family: 'Bebas Neue Cyrillic'; color: #ffffff; text-align: center; margin-top:20px; margin-bottom: 20px; }
    #salons {width: 100%; min-height: 100vh; display: flex; justify-content: center; align-items: center; background-color:#73cbe7; position: relative;} 
    #salons_tab {width: 100%; text-align: center; font-family: "Evolventa"; table-layout: fixed;}
    #salons_tab img { height:300px; border-radius: 70px;}
    .salons_city {color: #ffffff; font-family: "Evolventa"; font-size:30px; font-weight:bold; margin-top: 10px;}
    .salons_complex {color: #e22674; font-family: "Evolventa"; font-size:30px; font-weight:bold; margin-top: 10px;}
    .salons_address {color: #2a307a; font-family: "Evolventa"; font-size:30px; margin-top: 30px;}
    
    
    #franchise {width: 100%; min-height: 100vh; display: flex; justify-content: center; align-items: center; position: relative;}
    .franchise_body {position: relative; z-index: 3;}
    .franchise_body h2 { font-size: 36px; font-family: 'Bebas Neue Cyrillic'; }

    #spiral3 {
  background-image: url("./images/spiral3.webp");
  background-repeat: no-repeat;
  background-size: contain;
  width: 50vw;
  aspect-ratio: 1000 / 504;
  position: absolute;
  z-index: 2;
  right: 0;
  top: 0;
  }

    .franchise_text1 {font-family: 'Bebas Neue Cyrillic'; font-size:82px; color: #73cbe7; margin-top: 30px;}
    .franchise_text2 {font-family: 'Evolventa'; font-size:30px; margin-top: 30px; line-height: 1.5;}
    
    .jobs_body {width: 100%;}
    .jobs_body h2 { font-size: 36px; font-family: 'Bebas Neue Cyrillic'; color: #2a307a; text-align: center;}
    #jobs {width: 100%; min-height: 100vh; display: flex; justify-content: center; align-items: center; position: relative; }   
    .jobs_text1 {font-family: 'Bebas Neue Cyrillic'; font-size:82px; color: #e22674; margin-top: 30px; text-align: center;}
    .jobs_text2 {font-family: 'Evolventa'; font-size:30px; line-height: 1.5; text-align: center; width: 80%;  margin: 0 auto; margin-top: 30px; }
    .bg_job {
      position: relative;
      left: 50%;
      right: 50%;
      margin-left: -50vw;
      margin-right: -50vw;
      width: 100vw;
      aspect-ratio: 1920 / 272;
      background-image: url("./images/bg_job3.webp");
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
      margin-top: 30px;
    }

    
    #write_us {width: 100%; min-height: 100vh; display: flex; justify-content: center; align-items: center;  background-color: #2a307a; position: relative; } 

    #spiral4 {
      background-image: url("./images/spiral4.webp");
      background-repeat: no-repeat;
      background-size: contain;
      width: 30vw;
      aspect-ratio: 500 / 348;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 2;
     }

    .write_us_body h2 {font-size: 36px; font-weight: bold; font-family: 'Bebas Neue Cyrillic'; text-align: center; margin: 0 auto; margin-top: 40px; margin-bottom: 40px; }
    
#write_us_tab {
  width: 100%;
  height: auto;
  border: 0;
  padding: 0;
  margin: 0 auto;
  table-layout: fixed;
  border-collapse: collapse;
    margint-top:30px;
}

.bg_write_us_boy {
  background-image: url("./images/write_us_boy.webp");
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  width: 50%;
  min-height: 100vh;
}


.form_write_us {
  width: 50%;
  background: white;
  vertical-align: top;
  padding: 0px;
}


.form_write_us input[type="text"] {height: 80px;}
.form_write_us textarea {resize: none;}    
    
.form_write_us input,
.form_write_us textarea {
  font-family: "Evolventa";
  width: calc(100% - 80px);
  padding: 15px;
  margin-bottom: 20px;
  font-size: 24px;
  border: 1px solid #ececec;
  border-radius: 4px;
  box-sizing: border-box;
  margin-left: 40px;  
}
    
.form_write_us input:focus,
.form_write_us textarea:focus {
  outline: none;
  border: 1px solid #c9c9c9;
}    
    

.success_message {
  background: black;
  color: white;
  padding: 15px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 4px;
  margin-bottom: 20px;
}

.success_message .green {
  color: limegreen;
  margin-right: 10px;
  font-weight: bold;
}

.btn_send {
  background: linear-gradient(to right, #f06595, #f78ca0);
  color: white;
  font-weight: bold;
  border: none;
  height: 60px;
  cursor: pointer;
  text-transform: uppercase;
  width:100%;
  margin-top: 40px;
  font-size:24px;      
}

.btn_send:hover {
  opacity: 0.9;
}
 
    #send_message_result {margin-left: 40px;}    
    
.input-error-message {
  color: #fb6fae;
  font-size: 14px;
  margin-left: 40px;
  margin-bottom: 4px;
  font-weight: bold;
}

.input-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 0px;
}
    
    
#footer {width: 100%; background-color: #2a307a;  display: flex; justify-content: center; align-items: end; position: relative; }       
#footer_tab {width:100%; height:100%; color: #FFFFFF; font-size: 30px; font-family: 'Evolventa'; font-weight: bold; margin-top:70px;}  
#footer_tab hr {margin-top: 40px; margin-bottom: 40px;} 
    #footer_tab a {text-decoration: none; color:#ffffff;}    
.footer_row {display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;} 
.footer_social a{margin-right: 30px;}   
  
    #privacy_policy:hover {text-decoration: underline;} 
    
    #buttons_right {position: fixed; z-index: 9999; bottom: 0; right: 0;  margin-right: 50px; margin-bottom: 50px;}
    #buttons_right img {width: 100px;margin-bottom: 30px; border-radius: 50%; box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);}

   
/*Mobile*/

    .mobile_site_body { margin: 0 auto; max-width: 100%; min-height:100%;  }
    .mobile_page_body {padding: 50px 20px 50px 20px;}
    
    .mobile_header_button { display: inline-block; padding:20px 20px 20px 20px; border-radius: 40px;  color:#ffffff; font-size: 18px; font-weight: bold; border:0px; text-decoration: none; font-family: "Evolventa"; position: relative; z-index:5;}
    
    #mobile_header_table {margin: 0 auto; padding-top: 20px;  width: 100%; text-align: center; table-layout: auto}
    #mobile_header_table td {white-space: nowrap;}
    #mobile_header_table #logo {margin-left: 15px; margin-right: 15px;}
    #mobile_header_table #button_online_registration {margin-right: 15px;}
    
    #mobile_menu {cursor: pointer; margin-left: 15px;}
    .mobile_button {display: inline-block; padding:20px 30px 20px 30px; border-radius: 30px;  color:#ffffff; font-size: 18px; font-weight: bold; border:0px; text-decoration: none; font-family: "Evolventa"; position: relative; z-index:5;}
    
    #mobile_buttons_right {position: fixed; z-index: 9999; bottom: 0; right: 0;  margin-right: 10px; margin-bottom: 20px;}
    #mobile_buttons_right img {width: 80px;margin-bottom: 30px; border-radius: 50%; box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);}

    .mobile_index_text {color:#2a307a; font-size:65px; font-family: 'Bebas Neue Cyrillic';}
    
    #mobile_spiral1 img {width: 100%; position: relative; z-index: 1; margin-top: -100px; display: block;}
    
    
    .mobile_about_us_text1 {font-family: 'Bebas Neue Cyrillic'; font-size:28px; color: #ffffff;}
    .mobile_about_us_text2 {font-family: 'Bebas Neue Cyrillic'; font-size:50px; color: #73cbe7; margin-top: 30px;}
    .mobile_about_us_text3 {font-family: "Evolventa"; font-size:20px; color: #ffffff; margin-top: 80px;}
    
    .mobile_slider {margin-top: 30px;}
    
    
    .mobile_services_body {width:100%; height:100%; background-color:#f1eee8;border-radius:70px; padding-top:30px; padding-bottom: 30px;} 
    .mobile_services_body h1 { text-align: center; font-size: 45px; font-family: 'Bebas Neue Cyrillic'; color: #e22674;}    
    
    #mobile_services_prices {font-family: "Evolventa"; font-size:20px; color: #000000; margin: 0 auto; width:calc(100% - 40px); margin-left: 20px; margin-right: 20px; position: relative; z-index: 4;}
    #mobile_services_prices td {padding-bottom: 25px;}
    #mobile_services_prices .price {text-align: right; color: #2a307a; min-width: 100px;}
    
    #mobile_spiral2 {position: relative; z-index: 3; margin-top: -264px;} 
    #mobile_spiral2 img {width: 100%; display: block;}
    
    .mobile_salons_body {width:100%;}
    .mobile_salons_body h2 { font-size: 28px; font-family: 'Bebas Neue Cyrillic'; color: #ffffff; text-align: center; }
    
    #mobile_salons_tab {width: 100%; text-align: center; font-family: "Evolventa"; margin-top: 30px; }
    #mobile_salons_tab img { width:100%; border-radius: 50px;}
    #mobile_salons_tab td {padding-bottom: 30px;}
    
    .mobile_salons_city {color: #ffffff; font-family: "Evolventa"; font-size:18px; font-weight:bold; }
    .mobile_salons_complex {color: #e22674; font-family: "Evolventa"; font-size:18px; font-weight:bold; margin-top: 10px;}
    .mobile_salons_address {color: #2a307a; font-family: "Evolventa"; font-size:18px; margin-top: 10px;}
    
    #mobile_spiral3 {position: relative; z-index: 3; margin-top: 0px;} 
    #mobile_spiral3 img {width: 100%; display: block;}
    
    .mobile_franchise_body {margin-top: -120px;}
    .mobile_franchise_text1 {font-family: 'Bebas Neue Cyrillic'; font-size:50px; color: #73cbe7; margin-top: 30px;}
    .mobile_franchise_text2 {font-family: 'Evolventa'; font-size:20px; margin-top: 30px; line-height: 1.5;}
    .mobile_franchise_body h2 {font-size: 28px; font-family: 'Bebas Neue Cyrillic'; }
    
    .mobile_jobs_body h2 { font-size: 28px; font-family: 'Bebas Neue Cyrillic';}
    .mobile_jobs_text1 {font-family: 'Bebas Neue Cyrillic'; font-size:50px; color: #e22674; margin-top: 30px; }
    .mobile_jobs_text2 {font-family: 'Evolventa'; font-size:20px; line-height: 1.5;  margin: 0 auto; margin-top: 30px; }
    
    .mobile_button2 { display: inline-block; padding:20px 50px 20px 50px; border-radius: 50px;  color:#ffffff; font-size: 18px; font-weight: bold; border:0px; text-decoration: none; font-family: "Evolventa"; position: relative; z-index:5;}
    
    
    #mobile_spiral4 {position: relative; z-index: 3; margin-top: 0px;} 
    #mobile_spiral4 img {width: 100%; display: block;}
    
    .mobile_write_us_body {margin-top: -160px; position: relative; z-index: 5;}
    .mobile_write_us_body h2 {font-size: 28px; font-weight: bold; font-family: 'Bebas Neue Cyrillic'; text-align: center; margin: 0 auto; margin-top: 40px; margin-bottom: 40px; }
    
    #mobile_footer_tab {width:100%; height:100%; color: #FFFFFF; font-size: 20px; font-family: 'Evolventa'; font-weight: bold;}  
    #mobile_footer_tab hr {margin-top: 40px; margin-bottom: 40px;} 
    #mobile_footer_tab a {text-decoration: none; color:#ffffff;} 
    .mobile_footer_social {margin-top: 30px;}
    .mobile_footer_social a {margin-right: 12px;}
    .mobile_footer_social img {width:32px; height:32px;}
    
    
    #mobile_menu_body {
      width: 100%;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: fixed;
      z-index: 99999;
      background-image: url("./images/bg_menu.webp");
      background-size: cover;
      background-position: center;
    }
    
    #mobile_menu_logo {display: block;margin: 0 auto;}
    #mobile_menu_items { list-style: none; padding: 0; margin: 50px 0 0 0; }
    #mobile_menu_items li { display: block; margin-bottom: 20px;}
    #mobile_menu_items li a {color: #FFFFFF; font-size: 32px; font-weight: bold; text-decoration: none;}

    .cf-turnstile {display: none;}