:root { --panel:#0f0f0f; --radius:28px; }

html, body { width: 100%; overflow-x: hidden; }
* { box-sizing: border-box; }


html {
  scroll-behavior: smooth;
}
#BestMAIN{
  scroll-margin-top: 300px; 
}

#speakers{
  scroll-margin-top: 100px;
}

#org{
  scroll-margin-top: 75px;
} 
#organithators{
  scroll-margin-top: 0px;
} 
#reviews{
  scroll-margin-top: 150px;
} 
#galery {
  scroll-margin-top: 150px;
}
body{
  background: rgba(58, 25, 114, 1);
  margin: 0;
  font-family: 'Gilroy', sans-serif;
}
p{
  font-family: 'Gilroy', sans-serif;
}
a{
  font-family:  'Gilroy', sans-serif;
}
h1,h2,h3{
  font-family:  'Gilroy', sans-serif;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(22, 11, 40, 0.72);
  z-index: 1000;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.burger {
  font-size: 26px;
  cursor: pointer;
  display: none;
  position: absolute;
  top: 30%;
  right: 10px;
}

@media (max-width:650px){
  .burger{
    display:block;
    position:absolute; 
    right:10px; 
    top:50%; 
    transform:translateY(-50%);
    font-size:28px; 
    color:#fff; 
    cursor:pointer; 
    z-index:1100;
  }
  .menu{
    display:none !important;          
    position:absolute; 
    top:100%; 
    right: 0px; 
    background:linear-gradient(180deg, rgba(58,25,114,1), rgba(145,50,138,1));
    flex-direction:column; 
    padding:16px; 
    width:220px;  
    border-radius:12px 0 0 12px;
  }
 

  .menu.active{ display:flex !important; }
  @media (max-width: 450px) {
    .menu{width: 140px;top: 90%;}
  }
  
}
.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 15px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo-block {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-img {
  width: 50px;
  height: auto;
}
 
.BTW-text-header {
  font-size: 20px;
  font-weight: 500;
  width: 25px;
  color: #fff;
  letter-spacing: 1px;
  text-align: left;
  cursor: default;
  text-decoration: none;
  font-style: italic;    
  font-family: 'Gilroy', sans-serif;  
}

  
@font-face {
  font-family: 'Gilroy';
  src: url('/resources/fonts/Gilroy-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Gilroy';
  src: url('/resources/fonts/Gilroy-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Gilroy';
  src: url('/resources/fonts/Gilroy-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
}



.menu {
  display: flex;
  gap: 25px;
}

.menu a {
  text-decoration: none;
  color: #fff;
  font-weight: 500;
  font-size: 16px;
  transition: color 0.3s;
  text-align: center;
  font-family: 'Gilroy', sans-serif;
}

.menu a:hover {
  color: #d718ca;
}
/* КІНЕЦЬ ХЕДЕРУ*/


main {
  width: 600px;
  margin: 0 auto;   
  background: lightgray;
}




.photo_graphiti,
.mobile_photo_graphiti{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; 
}

.photo_graphiti{ 
  z-index: 1; 
  display: block; }
.mobile_photo_graphiti{ 
  z-index: 2; 
  display: none; }

@media (max-width:650px){
  .photo_graphiti{ display: none; }
  .mobile_photo_graphiti{ display: block; }
  
}

.section1{
  position: relative;          /* контейнер для абсолютних дітей */
  min-height: clamp(720px, 100vh, 1080px); /* реальна висота hero-блоку */
  overflow: visible;            /* щоб фон не вилазив за краї */
  padding-top: 80px;
  background: url("/resources/graphiti_Main.png") center/cover no-repeat;
  z-index: 10;
}

.Btw-text-main {
  position: absolute;
  top: 45%;
  left: 5%;              /* трохи відступаємо від краю */
  transform: translateY(-50%); /* вирівнюємо лише по вертикалі */

  text-align: left;      /* текст вирівняний зліва */
  width: 50%;            /* щоб не вилізав */
  max-width: 600px;

  font-family: Gilroy;
  font-weight: 800;
  font-size: clamp(55px, 14vw, 160px); /* адаптивний шрифт */
  line-height: 1.1;
  color: white;
  
  z-index: 15;
}

@media (min-width:1440px){
  .telegram_button{transform: translateX(40%);}
  .when-and-where{transform: translateX(40%);}

}




.info-block {
  position: absolute;
  bottom: clamp(24px, 12vh, 190px);
  left: 10%;
  top: 550px;
  display: flex;
  align-items: center;   /* вирівнює по вертикалі */
  gap: 140px;             /* відстань між кнопкою та текстом */
  z-index: 55;
}

/* кнопка */
.telegram_button {
  width: 250px;
  height: 56px;
  z-index: 55;
  border-radius: 25px;
  background: #f9f9f9;
  display: flex;
  align-items: center;
  justify-content: center;
  
}
.telegram_button a {
  color: #EC1274;
  font-weight: 600;
}

/* текст справа */
.when-and-where {
  display: grid;
  gap: 8px;
  color: #f9f9f9;
  font-weight: 500;
  z-index: 25;
}
.when-and-where a {
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: inherit;
}

/* іконки */
.when-and-where_img {
  width: 18px;
  height: auto;
}
@media (max-width: 2565px) {
  .info-block{
    top: 600px; 
    gap: 100px;
    left: 2%; 
  }
@media (max-width: 2000px) {
  .info-block{
    top: 550px;  
    gap: 100px;
    left: 2%; 
  }
  @media (max-width: 1500px) {

    .info-block{
      top: 555px;  
      gap: 100px;
      left: 2%; 
    }

    @media (max-width: 1440px) {
      .info-block{
        top: 550px; 
        gap: 200px; 
        left: 2%; 
      }
      @media (max-width: 650px) {
        .info-block{
        top: 550px;
        gap: 50px;
        left: 5%; 
      }
        @media (max-width: 500px) {
        .info-block{
          top: 475px;
          flex-direction: column;  
          align-items: flex-start;  
          gap: 22px;
          left: 5%;}
    
        }
      }
  }}
}
}  
/* SECTION 3*/
@media (min-width:1440px){}
 
/*
.section2{
   background:  url("./resources/Gradient_infp_Pc.png") center/cover repeat-x,
  rgba(22, 11, 40, 1);
  top: 0px;
  position: relative;
  padding: 550px;
}
 
*/

.section3{
  position: relative;

  /* 1 елемент = 2 шари фону */
  background:
    url("/resources/Union_big.png") top center / auto 1700px repeat-x,
    linear-gradient(180deg, rgba(22, 11, 40, 1) 0%, #8031AD 55%, #A13ED1 100%);      
  background-repeat: repeat-x, no-repeat;
  padding: 120px 0 160px;
  z-index: 10;      /* якщо накладається з попередньою секцією */
}

/* Якщо треба іншу висоту «хмаринки» або інший арт під мобайл */
@media (max-width: 650px){
  .section3{
    background:
    url("/resources/Union_big.png") top center / auto 2200px repeat-x,
    linear-gradient(180deg, rgba(22, 11, 40, 1) 0%, #8031AD 55%, #A13ED1 100%);
    
    
  }
}


/*.section3 img.bg-image { 
  position: absolute;
  inset: 0;           
  width: 100%;
  height: 100%;
  object-fit: cover;     
  z-index: 52;   
        /
}*/
.poles{
  color:#f9f9f9;
  max-width:1100px;
  margin: 120px auto 80px;     /* було 120px auto 80px і margin-top:720px */
  padding:0 16px;
  display:grid;
  gap:28px;
  z-index: 30;
  position:relative;
  background:transparent;
}

.pole {
  position: relative;
  display: grid;
  grid-template-columns: 420px 1fr;
  align-items: center;
  gap: 24px;
  
  z-index: 15;
  padding: 28px 32px;
  border: 2px solid rgba(255, 255, 255, 0.75);
  border-radius: 28px;
  background: transparent;   
}

.pole-title {
  margin: 0;
  font-weight: 800;
  font-size: clamp(28px, 4.5vw, 64px);
  line-height: 1.05;
  letter-spacing: .5px;
}

.pole-text {
  margin: 0;
  font-size: clamp(14px, 1.5vw, 18px);
  line-height: 1.7;
  background: transparent;
}


@media (max-width: 860px) {
  .pole {
    grid-template-columns: 1fr;
    padding: 22px;

  }
  .pole-title {
    font-size: clamp(26px, 7vw, 44px);
  }
  .pole-text {
    font-size: 16px;
  }
}

.photo_graphiti,
.mobile_photo_graphiti{
  position: absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;
}
.photo_graphiti{ z-index:1; display:block; }
.mobile_photo_graphiti{ z-index:2; display:none; }

@media (min-width: 2560px){
  .photo_graphiti{ object-position: 20% 85%; }  /* тонке підлаштування */
}

@media (max-width:650px){
  .photo_graphiti{ display:none; }
  .mobile_photo_graphiti{ display:block; }
}

.tg-section{
    max-width: 1100px;
    margin: 120px auto 80px;
    padding: 0 16px;
    display: grid;
    padding: 0 16px;
    left: 1%;
    position: relative;
    z-index: 35;
    top: -1400px;
    font-family: 'Gilroy', sans-serif;
  }

  

  .tg-title{
    font-family: Gilroy, system-ui, sans-serif;
    font-weight: 800;
    font-size: clamp(28px, 4vw, 48px);
    color: #ffffff;
    text-align: center;          
    margin: 0 0 16px 0;
    font-family: 'Gilroy', sans-serif; 
  }
  
 
  .tg-card{
    background: #ffffff;
    border-radius: 32px;
    padding: 32px 32px;
    display: grid;
    grid-template-columns: 1fr 220px; 
    gap: 24px;
    align-items: center;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
  }
  
  .tg-text{
    font-family: 'Gilroy', sans-serif;
    font-weight: 500;            
    font-size: 18px;
    line-height: 1.6;            
    color: #2F0F63;
    margin: 0;
    text-decoration: none;
  }
  

  .tg-icon-wrap{
    display: grid;
    place-items: center;
  }
  
  .tg-icon{
    width: 136px;
    height: auto;
    z-index: 10;
  }
  @media (max-width: 768px){
    .purple-background1{height: 1920; }
  }
  .tg-icon-wrap{
    background-color: rgba(236, 18, 116, 1);
    border-radius: 50%; 
    width: 125px;
    height: 125px;
    z-index: 1;
  }
  .photoIcon{
    z-index: 102;
    width: 50%;
    height: 50%;
  }
  
  @media (max-width: 768px) {
    .tg-card {
      grid-template-columns: 1fr; /* одна колонка */
      text-align: center;
      padding: 24px;
    }
    .tg-icon-wrap {
      margin-top: 16px; /* відступ зверху */
      margin-left: auto;
      margin-right: auto; /* центрувати іконку */
      width: 90px;        /* можна зменшити */
      height: 90px;
    }


    
  } 
  .tg-card:hover{
    transition: background-color 0.3s ease;
    background-color: rgba(236, 18, 116, 1);
    transform: scale(1.01);
  }
  .tg-icon-wrap:hover{
    transition: background-color 0.3s ease;
    background-color: rgba(249, 249, 249, 1);
    
  }
  .tg-card:hover .photoIcon{
    content: url("/resources/purple_press.svg");
  }
  .tg-card:hover .tg-icon-wrap{
    background-color: rgba(249, 249, 249, 1);
  }

  .pole,
  .tg-section,
  .phitp,
  .wrap {
    top: 0 !important;
  }













.section4{ 
  position: relative;
  z-index: 5;
  background: url("/resources/phine.png") center/cover no-repeat;
  padding: clamp(40px, 4vw, 60px) 20px;
}

.phitp{
  inset: 0;
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;   
  align-items: center; 
  display:none;
}

.wrap{ 
  position:relative; 
  z-index: 30;
  margin: 0 auto; 
  max-width: 1400px;
}
.spikertitle{  
  text-align:center;
  position: relative;
  font-weight:900; 
  margin: 0 0 12px;
  font-size:clamp(32px,5vw,65px);
  color:#fff; 
}

.carousel{ 
  position: relative; 
  overflow: hidden; 
  border-radius:16px; 
  background:#111 ;
  width: 90%; 
  margin: 0 auto;
  margin-top: 0;
}
.track{ display:flex; 
  transition: transform .45s ease; 
  will-change: transform 
}
.slide{ 
  flex: 0 0 100%;
  box-sizing: border-box;
  
  display:grid; 
  margin-top: 0;
  grid-template-columns:260px 1fr; 
  gap:20px; 
  align-items:center 
}
.slide img{ 
  width:250px; 
  height:350px; 
  object-fit:cover; 
  border-radius:14px;
  border: 4px solid #111;
  object-fit: cover;
}
@media (max-width:800px){ 
  .slide{ 
    grid-template-columns:1fr } 
  .slide img{ 
    width:100%; 
    height:300px; 
    border: 4px solid #111;
    object-fit: cover; 
    max-width: 350px; 
    margin: 0 auto; } 
  
}
.slide-media{ 
  display:flex; 
  flex-direction:column;
  align-items:center; 
  gap:12px; }
.infoSpikers{ color:#fff; 
  display:grid;
  grid-template-columns:1fr 280px;
  grid-template-areas:'title title' 'subtitle subtitle' 'talk meta';
  gap: 30px 22px;
  align-items: start;
}
.NameSpiker{ 
  grid-area:title;
   margin:0; 
   font-weight:800; 
   font-size:clamp(22px,4vw,31px); 
   line-height:1.1 ;
   position: relative;
 
  }
.positionOfSpiker{ 
  grid-area:subtitle; 
  margin:0; 
  color:rgba(255,255,255,.85); 
  font-size:clamp(16px,2.2vw,20px); 
  
}
@media (max-width: 860px){
  .positionOfSpiker{
    text-align: center;     /* центрування */
    font-size: 14px;        /* трохи менший текст */
    max-width: 80%;         /* щоб не розтягувався */
    margin: 0 auto;

             /* вирівнює блок по центру */
  }
  .NameSpiker{
    white-space: nowrap;
    font-size: clamp(14px, 5vw, 22px); 
    
    text-align: center;
  }
  .slide:nth-child(1) .infoSpikers { 
    margin-top: -30px;    /* або padding-top: 0 */
  }

  .slide:nth-child(2) .infoSpikers { 
    margin-top: -90px;    /* або padding-top: 0 */
  }

  .slide:nth-child(3) .infoSpikers { 
    margin-top: -20px;   /* або padding-top: 0 */
  } 

  .slide:nth-child(4) .infoSpikers { 
    margin-top: -75px;   /* або padding-top: 0 */
  } 
  .slide:nth-child(5) .infoSpikers {
    margin-top: -10px;  /* або padding-top: 0 */
  } 
}
.talk-card{ 
  grid-area:talk; 
  background:#fff; 
  color:#111; 
  border-radius:22px; 
  margin-bottom: 20px;
  padding:18px 20px; 
  box-shadow:0 12px 30px rgba(0,0,0,.25); 
}
.talk-card h3{ 
  margin:0 0 6px; 
  font-size:clamp(18px,2.4vw,26px) }
.talk-card p{ 
  margin:0; 
  color:#555; 
  line-height:1.45 
}
.meta-card{ 
  grid-area:meta;
  background:#fff; 
  color:#111; 
  border-radius:18px; 
  padding: 14px 26px; 
  box-shadow:0 12px 30px rgba(0,0,0,.25); 
  display: flex; 
  align-items: center; 
  gap:12px; 
  align-content:start; 
  max-width:220px ;
  text-align: center;
  border-radius: 28px; 
  
}

.meta-item{ 
  display: block; 
  align-items:center; 
  gap:10px 
}
.meta-item span{ display:block; }
.meta-card .meta-item:first-child span{
  font-weight: 900;
  font-size: 32px;
  line-height: 1.05;
  letter-spacing: .2px;
}
.meta-card .meta-item:last-child span{
  font-weight: 600;
  font-size: 18px;
  line-height: 1.25;
}
.meta-item .icon{ 
  width:28px; 
  height:28px; 
  border-radius:10px; 
  display:grid; 
  place-items:center; 
  background:#111; 
  color:#fff; 
  font-size:14px 
}


@media (max-width:860px){
  .slide{ grid-template-columns:1fr; }
  .infoSpikers{
    grid-template-columns:1fr;
    grid-template-areas:'title' 'subtitle' 'talk' 'meta';
    margin: 0 auto;
  }
  
  .meta-card, .talk-card{ max-width:300px; margin:0 auto; }
}

.arrow {
  position: absolute;
  top: 55%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  background: #555;
  color: #fff;
  font-size: 28px;   
  z-index: 100;

  display: flex;  
  align-items: center;
  justify-content: center;
}
.prev { left: -15px; }
.next { right: -15px; }


.hidden{ display:none !important }

.social-icons {
  margin-top: 0;
  display: flex;
  justify-content: center;         
  gap: 16px; 
   
                      
}

.social-icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(0,0,0,.2);

}

.social-icons a:hover {
  background: #ec1274;    
  transform: scale(1.1);
}

.social-icons img {
  width: 35px; 
  height: 35px;
}

/* SECTION 5 */

.section5{
  line-height: 0;               
}

.prizes-banner {
  position: relative;
  overflow: hidden;
  background: url("/resources/розіграш.png");
  background-size: cover;
  height: clamp(280px, 45vw, 520px); 
  min-height: 400px; 
}


.prizes-img{
  display: block;
  width: 100%;
  height: clamp(280px, 45vw, 520px);  
  object-fit: fill;
  filter: brightness(.85);           
}

.prizes-card{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: left;
  max-width: 900px;   
  width: 80%;         
  margin: 0 auto;     
  
  padding: 24px;
  background: rgba(0,0,0,0.4);
  border-radius: 16px;
  color: #fff;
  text-decoration: none;  
  color: #fff;    
}

.prizes-card::before{
  content: "";
  position: absolute;
  inset: auto 50% 12% 50%;            
  transform: translateX(-50%);
  width: min(880px, 88vw);
  border-radius: 22px;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
  z-index: 0;
}

.prizes-title,
.prizes-text{
  position: relative;
  z-index: 1;
  line-height: 1.3;
  color: #fff;
  text-align: center;
  margin: 0;
}

.prizes-title{
  font-weight: 800;
  font-size: clamp(28px, 4vw, 44px);
  margin-bottom: clamp(8px, 1.5vw, 12px);
}

.prizes-text{
  font-size: clamp(14px, 1.6vw, 18px);
  opacity: .95;
  text-align: left;
  line-height: 1.3;
}
.prizes-text + .prizes-text{ margin-top: 14px; line-height: 1.2; }

.prizes-text{
  line-height: 1.3;
}


.prizes-decor{
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}




.org{
  position: relative;
  padding: clamp(28px, 5vw, 56px) 0;
  color: #fff;
  background-image: url("/resources/graphiti_purple.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 10;
}

.org__wrap{
  width: min(1100px, 92vw);
  margin: 0 auto;
  display: grid;
  gap: clamp(16px, 2.6vw, 24px);
}

.org__card, .org__row--hero{
  position: relative;
  padding: clamp(14px, 2.2vw, 22px) clamp(16px, 3vw, 28px);
  border-radius: 22px;
  border: 1.5px solid rgba(255, 255, 255, 0.6);

}

.org__row--hero{
  display: grid;
  gap: 10px;
  align-items: center;
}
.org__logo{ width: clamp(80px, 12vw, 120px); height: auto; }
.org__title{
  margin: 0;
  font-weight: 800;
  font-size: clamp(28px, 5vw, 56px);
  line-height: 1.115;
  
}

.org__row--two{
  display: grid;
  grid-template-columns: 1fr 2.2fr;
  gap: clamp(12px, 2vw, 20px);
}
.org__card--small{ text-align: center; }
.org__number{ 
  margin: 0 0 6px; 
  font-weight: 900; 
  font-size: clamp(28px, 6vw, 48px); }

.org__subtitle{ 
  margin: 0 0 6px; 
  font-weight: 800; 
  font-size: clamp(18px, 3.2vw, 26px); }
.org__lead{ 
  margin: 0; 
  font-style: italic; 
  opacity: .95; 
  line-height: 1.35;
}
.org__text{ 
  margin: 0; 
  line-height: 1.35; 
  opacity: .95; 
}

.org__row--cta{
  display: grid;
  grid-template-columns: 2fr 1.1fr;
  gap: clamp(12px, 2vw, 20px);
  align-items: start;
}

/* Кнопки */
.org__cta{ 
  display: grid; 
  gap: 12px; 
  align-content: start; }
.org__btn{
  display: grid; 
  place-items: center;
  height: 56px;
   padding: 0 20px;
  border-radius: 999px;
  background: #fff; 
  color: #1a0e33; 
  text-decoration: none;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  
}

.org__btn:hover{ transform: translateY(-1px); 

}
.org__btn--ghost{
  background: #fff; color: #000000;
  border: 2px solid #fff;
}

/* Адаптив */
@media (max-width: 880px){
  .org__row--two{ grid-template-columns: 1fr; }
  .org__row--cta{ grid-template-columns: 1fr; }
}
.org__card p, 
.org__card a, 
.org__card h1, 
.org__card h2, .org__title {
  line-height: 1.6;   
}






/* =============================== */


.bg-commons {
  background: url("/resources/Frame\ 25.png") center/cover no-repeat;
}

/* =============================== */


/* Section6 */
.section6_second{
  padding-bottom: 0;
  position:relative; 
  z-index:0; 
  min-height:100vh;
  display:grid; 
  margin-bottom: 0;
  padding-bottom: 0;
  place-items:center;
  background: url("/resources/Frame 25.png") center/cover no-repeat;
}
.section6_second::before{
  content:""; position:fixed; inset:0;

  z-index:-1; will-change:transform;
}

.viewport_second{
  position:relative;
  width:min(413px, 95vw);
  isolation:isolate;
  overflow: visible;
  clip-path: none;
  border-radius:16px;
}

.carousel_second{
  --slide-w: 60%; 
  --gap: 16px;
  position:relative;
  height:400px;
  border-radius:16px;
  overflow:visible;
  background:transparent;
  box-shadow:none !important;
}


.carousel_second input{ display:none; }

.track_second{
  display:flex; align-items:center; height:100%;
  gap:var(--gap);
  transition:transform .5s ease;
  will-change:transform;
  padding:0 !important; margin:0;
  background:transparent;
  padding-left: calc((100% - var(--slide-w)) / 2);
  padding-right: calc((100% - var(--slide-w)) / 2);

}

.slide_second{
  flex:0 0 var(--slide-w);
  height:100%;
  border-radius:16px;
  overflow:hidden;
  transform:scale(.92);
  transform-origin:center center;
  opacity:.5;
  transition:transform .35s ease, opacity .35s ease;
  backface-visibility:hidden;
  box-shadow:none !important;
  filter: blur(15px) saturate(.7) brightness(.9);
}
.slide_second img{
  width:100%; 
  height:100%; 
  object-fit:cover; 
  display:block;
  border-radius:26px;
}

/* активний та сусіди */
.slide_second.is-active{ transform:scale(1);   opacity:1;   }
.slide_second.is-peek  { transform:scale(.96); opacity:.75; }

/* стрілки */
.arrows_second label{
  display:none; 
  position:absolute; 
  top:50%; 
  translate:0 -50%;
  width:46px; 
  height:46px; 
  border-radius:50%;
  background:rgba(0,0,0,.55); 
  color:#fff; 
  font-size:28px;
  line-height:46px; 
  text-align:center; 
  cursor:pointer; 
  user-select:none;
}
.arrows_second .prev_second{ left:12px; }
.arrows_second .next_second{ right:12px; }
#c1_second:checked ~ .arrows_second label[data-for="c1_second"],
#c2_second:checked ~ .arrows_second label[data-for="c2_second"],
#c3_second:checked ~ .arrows_second label[data-for="c3_second"],
#c4_second:checked ~ .arrows_second label[data-for="c4_second"],
#c5_second:checked ~ .arrows_second label[data-for="c5_second"],
#c6_second:checked ~ .arrows_second label[data-for="c6_second"],
#c7_second:checked ~ .arrows_second label[data-for="c7_second"],
#c8_second:checked ~ .arrows_second label[data-for="c8_second"] {
  display:block;
}


/* точки навігації сховані */


#c1_second:checked ~ .track_second{ transform: translateX(0); }
#c2_second:checked ~ .track_second{ transform: translateX(calc(-1 * (var(--slide-w) + var(--gap)))); }
#c3_second:checked ~ .track_second{ transform: translateX(calc(-2 * (var(--slide-w) + var(--gap)))); }
#c4_second:checked ~ .track_second{ transform: translateX(calc(-3 * (var(--slide-w) + var(--gap)))); }
#c5_second:checked ~ .track_second{ transform: translateX(calc(-4 * (var(--slide-w) + var(--gap)))); }
#c6_second:checked ~ .track_second{ transform: translateX(calc(-5 * (var(--slide-w) + var(--gap)))); }
#c7_second:checked ~ .track_second{ transform: translateX(calc(-6 * (var(--slide-w) + var(--gap)))); }
#c8_second:checked ~ .track_second{ transform: translateX(calc(-7 * (var(--slide-w) + var(--gap)))); }

.carousel_second:has(#c1_second:checked) .slide_second:nth-child(1),
.carousel_second:has(#c2_second:checked) .slide_second:nth-child(2),
.carousel_second:has(#c3_second:checked) .slide_second:nth-child(3),
.carousel_second:has(#c4_second:checked) .slide_second:nth-child(4),
.carousel_second:has(#c5_second:checked) .slide_second:nth-child(5),
.carousel_second:has(#c6_second:checked) .slide_second:nth-child(6),
.carousel_second:has(#c7_second:checked) .slide_second:nth-child(7),
.carousel_second:has(#c8_second:checked) .slide_second:nth-child(8){
  opacity:1;
  transform:scale(1.1);
  filter:none;
}

.carousel_second:has(#c1_second:checked) .slide_second:nth-child(2),
.carousel_second:has(#c1_second:checked) .slide_second:nth-child(8),
.carousel_second:has(#c2_second:checked) .slide_second:nth-child(1),
.carousel_second:has(#c2_second:checked) .slide_second:nth-child(3),
.carousel_second:has(#c3_second:checked) .slide_second:nth-child(2),
.carousel_second:has(#c3_second:checked) .slide_second:nth-child(4),
.carousel_second:has(#c4_second:checked) .slide_second:nth-child(3),
.carousel_second:has(#c4_second:checked) .slide_second:nth-child(5),
.carousel_second:has(#c5_second:checked) .slide_second:nth-child(4),
.carousel_second:has(#c5_second:checked) .slide_second:nth-child(6),
.carousel_second:has(#c6_second:checked) .slide_second:nth-child(5),
.carousel_second:has(#c6_second:checked) .slide_second:nth-child(7),
.carousel_second:has(#c7_second:checked) .slide_second:nth-child(6),
.carousel_second:has(#c7_second:checked) .slide_second:nth-child(8),
.carousel_second:has(#c8_second:checked) .slide_second:nth-child(7),
.carousel_second:has(#c8_second:checked) .slide_second:nth-child(1){
  opacity:.6;
  transform:scale(.95);
  filter:blur(2px);
}

.carousel_second:has(#c1_second:checked) .slide_second:nth-child(3),
.carousel_second:has(#c2_second:checked) .slide_second:nth-child(4),
.carousel_second:has(#c3_second:checked) .slide_second:nth-child(5),
.carousel_second:has(#c4_second:checked) .slide_second:nth-child(6),
.carousel_second:has(#c5_second:checked) .slide_second:nth-child(7),
.carousel_second:has(#c6_second:checked) .slide_second:nth-child(8),
.carousel_second:has(#c7_second:checked) .slide_second:nth-child(1),
.carousel_second:has(#c8_second:checked) .slide_second:nth-child(2){
  opacity:0;
  transform:scale(.9);
  filter:blur(4px);
}

.track_second .slide_second{
  opacity:0;
  filter:blur(26px);
  transform:scale(.85);
}

.dots_second{
  display:flex; 
  gap:10px; 
  z-index: 2;
  justify-content:center;
  margin-top: 33px; 
  user-select:none;
  
}
.dots_second label{
  width:12px; 
  height:12px; 
  border-radius:50%;
  border:3px solid rgba(255,255,255,.45);
  background:transparent; 
  cursor:pointer;
  z-index: 5;
  transition:transform .2s ease;
}

#c1_second:checked ~ .dots_second label[for="c1_second"],
#c2_second:checked ~ .dots_second label[for="c2_second"],
#c3_second:checked ~ .dots_second label[for="c3_second"],
#c4_second:checked ~ .dots_second label[for="c4_second"],
#c5_second:checked ~ .dots_second label[for="c5_second"],
#c6_second:checked ~ .dots_second label[for="c6_second"],
#c7_second:checked ~ .dots_second label[for="c7_second"],
#c8_second:checked ~ .dots_second label[for="c8_second"]{
  background:#fff;
  border-color:#fff;
  transform:scale(1.15);
}
.carousel_title{
  font-family: Gilroy;
  font-weight: 800;
  font-style: Extrabold;
  font-size: 38px;
  line-height: 10px;
  letter-spacing: 0%;
  text-align: center;
  color: rgba(249, 249, 249, 1);
  margin: 0;
  line-height: 1;
  padding: 0;
  position: static;
  margin-bottom: 20px;
  position: relative;
  top: 50px; 
}

/* ============                PHOTO        ===================== */
.slide_second{ 
  position:relative; 
  overflow:hidden; 
  border-radius:16px; 
}
.slide_second>img{ 
  width:100%; 
  height:100%; 
  object-fit:cover; 
  display:block; 
}

.info-top{
  position:absolute; 
  inset:0 0 auto 0;         
  padding:14px 16px 28px;
  text-align:center; 
  color:#fff;
  pointer-events:none;
}
.info-top h1{
  margin:0 0 6px; 
  font-weight:800; 
  text-shadow:0 1px 2px rgba(0,0,0,.35);
font-style: Extrabold;
font-size: 20px; 
letter-spacing: 0%;
text-align: center;
vertical-align: middle;

}
.info-top p{
  margin:0; 
  font-size:14px; 
  font-weight:200; 
  opacity:.7;
  font-family: Gilroy;
  font-style: Light;
  font-size: 15px;
  letter-spacing: 0%;
  text-align: center;
  vertical-align: middle;

}

.socials{
  position:absolute; 
  left:50%; 
  bottom:14px; 
  transform:translateX(-50%);
  display:flex; 
  gap:12px; 
  padding:8px 12px; 
  border-radius:999px;
  background:rgba(0,0,0,.35); 
  backdrop-filter:blur(6px);
  box-shadow:0 4px 14px rgba(0,0,0,.35);
}
.socials img{ width:26px; height:26px; display:block; background-color: aliceblue; border-radius: 50%; }
.socials a{ line-height:0; transition:transform .18s ease, filter .18s ease; } 
.socials a:hover{ transform:scale(1.12); filter:brightness(1.1); }

/*SECTION 7============================ */
.section7{
  position: relative;
  z-index: 1;
  padding: clamp(40px, 6vw, 80px) 0 0;
  background-position: cover 100%, center;
  background-size: auto min(100%, 90vh), cover;
  background: transparent;
}

.bg-wrapper {
  position: relative;
  z-index: 1;
  background-image:
    url("./resources/grandgradiontbuble.png"),
    url("./resources/Frame 25.png");
  background-repeat: no-repeat, no-repeat;
  background-position: center top, center;
  background-size: cover, cover;
  padding: clamp(40px, 6vw, 80px) 0 24px;
  
}

.title_reviews{
  font-family: Gilroy, system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(32px, 6vw, 64px);
  color: #fff;
  text-align: center;
  margin: 0 0 24px;
}
.reviews{ display:grid; gap:16px; place-items:center; }

.viewport_reviews{
  --card-max-w: 900px;
  width:min(92vw, var(--card-max-w));
  position: relative;
  margin-inline: auto;
  overflow: hidden; 
  overflow: clip;
  padding-bottom: 64px;
}

.carousel_reviews > input[type="radio"]{
  position: absolute; inset: auto;
  opacity: 0; pointer-events: none;
}

.track_reviews{
  display: flex;
  width: 100%;   
  grid-auto-columns: 100%;              
  transition: transform .45s ease;
  position: relative; z-index: 1;
}
.slide_reviews{ 
  flex: 0 0 100%;
  width: 100%; 
  justify-content: center;
}

/* Положення треку відповідно до активного radio */
#rv1:checked ~ .track_reviews{ transform: translateX(  0%); }
#rv2:checked ~ .track_reviews{ transform: translateX(-100%); }
#rv3:checked ~ .track_reviews{ transform: translateX(-200%); }
#rv4:checked ~ .track_reviews{ transform: translateX(-300%); }
#rv5:checked ~ .track_reviews{ transform: translateX(-400%); }

/* ===== Стрілки ===== */

.arrows_reviews label{
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  display: none;
  place-items: center;
  font-size: 32px;
  box-shadow: 0 8px 22px rgba(0,0,0,.25);
  cursor: pointer;

  z-index: 20;
}

.reviews-wrapper{


  position: relative;
  width: min(90vw, 900px);
  margin: 0 auto; 

  /* РОБИМО "бортики" для стрілок */
 
}
.prev_reviews{ left: -54px; }
.next_reviews{ right: -54px; }

.arrows_reviews label{ display: none; } /* показуємо лише актуальну пару */
.reviews-wrapper:has(#rv1:checked) .arrows_reviews [data-for="rv1"]{ display: grid; }
.reviews-wrapper:has(#rv2:checked) .arrows_reviews [data-for="rv2"]{ display: grid; }
.reviews-wrapper:has(#rv3:checked) .arrows_reviews [data-for="rv3"]{ display: grid; }
.reviews-wrapper:has(#rv4:checked) .arrows_reviews [data-for="rv4"]{ display: grid; }
.reviews-wrapper:has(#rv5:checked) .arrows_reviews [data-for="rv5"]{ display: grid; }

@media (max-width:1060px){
  .prev_reviews{ left: -18px; }
  .next_reviews{ right: -18px; }

  @media (max-width:760px){
    .prev_reviews{ left: -15px; }
    .next_reviews{ right: -15px; }
  }
}


/* ===== Крапки ===== */
.dots_reviews{
  display: flex; 
  gap: 10px; 
  justify-content: center;
  margin-top: 16px;
}
.dots_reviews label{
  width: 10px; 
  height: 10px; 
  border-radius: 50%;
  background: #fff8; 
  cursor: pointer;
}
#rv1:checked ~ .dots_reviews label[for="rv1"],
#rv2:checked ~ .dots_reviews label[for="rv2"],
#rv3:checked ~ .dots_reviews label[for="rv3"],
#rv4:checked ~ .dots_reviews label[for="rv4"],
#rv5:checked ~ .dots_reviews label[for="rv5"]{
  background: #fff; width: 12px; height: 12px;
}

/* ===== Оформлення картки відгуку (можеш підлаштувати) ===== */
.review-card{
  background: #fff; color: #111;
  border-radius: 28px;
  padding: clamp(20px, 4vw, 40px);
  box-shadow: 0 14px 40px rgba(0,0,0,.25);
  min-height: 340px;
  display: grid; 
  align-content: start; 
  gap: 14px;
  position: relative; 
  z-index: 1;
  box-sizing: border-box;
  transform: translateX(-3px) scale(0.75);
  transform-origin: center;
  margin: 0 auto;
}
.review-card__quote{
  position: absolute; 
  top: -16px; 
  left: -8px;
  font-size: clamp(64px, 10vw, 100px);
  line-height: .6; 
  color: rgba(0,0,0,.08);
  pointer-events: none; 
  user-select: none;
}
.review-card__name{

font-style: Bold;
font-size: 38px;
line-height: 43px;
letter-spacing: 0%;
  margin: 0; 
  font-weight: 900;
}
.review-card__tag{
  display: inline-grid; 
  place-items: center;
  padding: 10px 48px;
  border: 2px solid #ff2b93; 
  color: #ff2b93;
  border-radius: 999px; 
  width: max-content; 
  font-weight: 700;
}
.review-card__text{
  margin: 8px 0 0;
  line-height: 1.5;
  font-family: Gilroy;
font-weight: 500;
font-style: Medium;
font-size: 25px ;
line-height: 43px;
letter-spacing: 0%;

}
.apostrof{
  width: clamp(28px, 5vw, 56px); /* адаптивна ширина */
  height: auto;
  transform: translate(-80%, -50%);   /* трохи підняти, за потреби підкрути */
}

@media (max-width:560px){
  .apostrof{ width: 36px; transform: translate(-80%, -50%); }
  
}

/* =======================    Galary        ===========================*/


.galary{ 
  color:#fff; 
  font-family:system-ui,sans-serif;
  margin-top: 50px; 
}

.gallery{ 
  display:flex; 
  align-items:center; 
  justify-content:center; 
  gap:12px; 
}

.gallery-head{ 
  text-align:center; 
  margin-bottom: 16px; 
}

.gallery-title{ 
  margin:0; 
  font-weight:900; 
  font-size: clamp(28px,4vw,48px); 
}

.gallery-sub{ 
  margin:8px 0 0; 
  opacity:.9; 
  font-size:clamp(14px,2.2vw,18px) 
}

.gallery .nav{
  border:0; 
  background:rgba(255,255,255,.12);
  padding:10px 14px; 
  color: #fff;
  border-radius:12px; 
  cursor:pointer;
  backdrop-filter: blur(4px);
}
.gallery .nav:hover{ 
  background:rgba(255,255,255,.2); 
}
.viewport{
  --gap:12px;  
  --col-w: clamp(220px, 30vw, 360px); 
  --row-h: clamp(140px, 26vh, 240px); 
  width:min(92vw, 1100px);
  overflow:hidden;
}

.gallery .track{
  display:grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--col-w);
  grid-template-rows: repeat(2, var(--row-h));
  gap: var(--gap);
  will-change: transform;
  transition: transform .5s ease;
}
.track.no-anim{ transition:none !important; }


.cell{
  width:100%; 
  height:var(--row-h);
  overflow:hidden; 
  border-radius:14px; 
  background:#111;
  box-shadow: 0 4px 18px rgba(0,0,0,.25);
}
.cell img{ 
  width:100%; 
  height:100%; 
  object-fit:cover; 
  display:block; 
}

.dotss{ 
  display:flex; 
  justify-content:center; 
  gap:8px; 
  margin-top:12px; 
}

.dotss .dot{
  width:14px; 
  height:14px; 
  border-radius:50%; 
  border:0;
  background:#777; 
  cursor:pointer;
  
}
.dotss .dot.active{ background:#fff; transform: scale(1.2); }

/* ====================== LAST =========================*/
.section9{
  background:#1a0d2e;
  color:#fff;
}
.footer-wrap{
  max-width:1100px;              /* щоб було як на макеті */
  margin:0 auto;
  padding:48px 20px 40px;
}

.footer-container{
  display:grid;
  grid-template-columns: 1fr 1fr;      /* ліва/права половини */
  grid-template-rows: auto auto;       /* верхній/нижній ряд */
  grid-template-areas:
    "logo  slogan"
    "year  socials";
  align-items:center;
  gap:32px 40px;
}

/* області */
.footer-left-top{ 
  grid-area: logo; 
}
.footer-left-bottom{ 
  grid-area: year; 
  align-self:end; 
}
.seeYouOnBTW{ 
  grid-area: slogan; 
  justify-self:end; 
  text-align:right; 
}
.socials-footer{ 
  grid-area: socials; 
  justify-self:end; 
  display:flex; 
  gap:16px; 
}

/* стилі елементів */
.logobtwithtext{ 
  width:160px; 
  height:auto; 
}
.yearOfBTW{ 
  margin:0; 
  font-size:20px; 
  font-weight:700; 
  opacity:.9; 
  letter-spacing:.02em; 
}

.seeYouOnBTW{
  margin:0;
  font-weight:900;
  font-size: clamp(28px, 4.2vw, 40px);
  line-height:1.15;
}

/* круглі кнопки соцмереж */
.soc{
  width:44px; height:44px;
  border-radius:50%;
  display:grid; place-items:center;
  position: relative;
}
.soc img{ width:32px; height:32px; display:block; filter: invert(0); }

/* мобільна версія */
@media (max-width:540px){
  
  .seeYouOnBTW{
    justify-self: end;
    text-align:right; 
    line-height: 1.2;
    margin-right: 120px;
    transform: translateX(60px);
}
.logobtwithtext{ 
  width:120px; 
}
.soc{
  left: 10px;
  width:24px; height:24px;
}
  .socials-footer{ justify-self:start; }


  @media (max-width:440px){
    .soc{left: -100px;}
    .seeYouOnBTW{
      text-align:right; 
      line-height: 1.2;
      margin-right: 75px;
      margin-right: 120px;
      transform: translateX(80px);
  }
  @media (max-width:390px){
    .seeYouOnBTW{
      transform: translateX(40px);
    } 
    @media (max-width:350px){
      .seeYouOnBTW{
        transform: translateX(10px);
      }    
    }   
  }
  }

}