/* ---------------------------
   Base / Reset
   --------------------------- */


body{ font-size: 16px; overflow-x: hidden; 


}
.menu-card, .reviews-slider { scrollbar-width: none; /* Firefox */ }
.menu-card::-webkit-scrollbar, .reviews-slider::-webkit-scrollbar { display: none; /* Chrome, Safari, Edge */ }

.wrapper{  overflow-y: visible;
  overflow-x: hidden; }
.video-wrapper { overflow: hidden;
 }
.video-section{ position: relative; min-height: 110vh;background-color: #fff;z-index: 3; }
.video-bg {  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
    position:absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(60%); z-index: -1; mask-image: linear-gradient(to bottom, black 70%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%); }
.video-wrapper::after 
{ content: ''; position: absolute; bottom: 0px; left: 0; width: 100%; height: 100px; background: linear-gradient( to bottom, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 40%, rgba(255, 255, 255, 0.4) 70%, rgba(255, 255, 255, 0) 100% ); filter: blur(35px); opacity: 0.9; z-index: 1; pointer-events: none; }
.phone-btn
 { 
  border: 2px solid white; border-radius: 50%; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; background: transparent; transition: 0.3s; cursor: pointer; }
svg:hover, svg:active
{ background-color: #1fa1af; box-shadow: 0 8px 20px rgba(34, 203, 211, 0.6); transform: scale(1.05); }
.phone-btn:hover, .phone-btn:active
{ background-color: #1fa1af; box-shadow: 0 8px 20px rgba(34, 203, 211, 0.6); transform: scale(1.05); }
.phone-icon { animation: vibrate 0.3s infinite; }
@keyframes vibrate { 0% { transform: rotate(0deg); } 25% { transform: rotate(10deg); } 50% { transform: rotate(-10deg); } 75% { transform: rotate(8deg); } 100% { transform: rotate(0deg); } }

/*****/
/* --- Бургер --- */
.burger { background: none; border: none; display: flex; flex-direction: column; justify-content: space-between; width: 26px; height: 20px; cursor: pointer; z-index: 20; }
.burger span { display: block; height: 3px; background: #fff; border-radius: 2px; transition: 0.3s; }
.burger.active span:nth-child(1) { transform: rotate(45deg) translateY(8px); }
.burger.active span:nth-child(2) { opacity: 0; }
.burger.active span:nth-child(3) { transform: rotate(-45deg) translateY(-8px); }
/* --- Мобільне меню --- */
.mobile-menu { position: absolute; top: -5%; right: 0; background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(6px); padding: 20px; border-radius: 12px; display: none; justify-content: space-around; gap: 6px; width:210px; z-index: 15; }
.nav-mobile{ text-align: left; }
.mobile-menu a { color: #fff; text-decoration: none; display: block; padding: 6px 0; font-weight: 500; transition: 0.3s; }
.mobile-menu a:hover, .mobile-menu a:active { color: #5fc9f3; }
.mobile-socials { display: flex; justify-content:center; align-items: flex-end; gap: 8px; }
.mobile-socials a { color: #5fc9f3; font-size: 1.2rem; transition: 0.3s; }

.mobile-menu.active { display: flex; }
@media (max-width: 992px) { 
  .socials { display: none !important; }  }
header { position: relative; z-index: 2; color: white; padding: 10px 0; }
header .nav-link, header .btn { color: white !important; }
header .nav-link:hover, header .nav-link:active{ text-decoration: underline; }
.logo-img{ width: 40%; }
@media (max-width: 765px){ 
  .logo-img{ width: 40%; }
.video-section{min-height: 80vh; }

} 

/*****************/
.modal { z-index: 2000 !important; }
.modal-backdrop { z-index: 1500 !important; }
.wrapper { overflow: visible !important; }
/*******************/
.form-modal { background: rgba(0, 0, 0, 0.8); border: 1px solid #5fc9f3; box-shadow: 0 0 20px rgba(85, 171, 245, 0.4); border-radius: 16px; backdrop-filter: blur(8px); }
.form-input { background: rgba(255, 255, 255, 0.1); border: 1px solid #5fc9f3; color: #fff; }
.form-input::placeholder { color: #ddd; }
.btn-gradient { background: linear-gradient(180deg, #5fc9f3 0%, #55abf5 100%); border: none; color: #fff; font-weight: 600; transition: 0.3s; }
.btn-gradient:hover, .btn-gradient:active { opacity: 0.9; transform: translateY(-1px); }
/* --- Основний блок --- */
.hero { height: 100vh; display: flex; align-items: center; color: white; padding-top: 100px; }


.title-hero{ font-weight: 900; font-size: 44px; }
.custom-btn { padding: 16px 120px; font-size: 1.2rem; transition: all 0.3s ease; border: 3px solid #fff; border-radius: 13px; }
/* --- Контейнер з картками --- */
.cards-box { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: -300px; gap: 40px; padding: 120px 0; }
.card-bg {  border-radius:13px; max-width: 365px; width: 100%; border: 2px solid transparent; height: auto; background: linear-gradient(0deg, #1e549f 0%, rgba(20, 116, 184, 0) 100%); transition: all 0.3s ease-in-out; backdrop-filter: blur(8px); z-index: 99; }
.card-bg:hover, .card-bg:active{ background-color: #1fa1af; box-shadow: 0 8px 20px rgba(34, 203, 211, 0.6); transform: scale(1.05); border: 2px solid #fff; }
.text-card{ padding: 18px 0 18px 29px; }
.text-card p{ font-weight: 400 ; padding: 0 10px; }
.icon-card{ display: flex; gap: 7px; font-size: 24px; font-size: 500; }
.icon-card::before{ content: ''; display: block; width:31px ; height:32px ; background-image: url(./icon/icon-a.png); background-position: center; background-repeat:no-repeat ; }
.icon-online::before{ background-image: url(./icon/icon-b.png); }
.icon-sert::before{ background-image: url(./icon/icon-c.png); }
.card-btn{ border-radius: 7px; text-align: center; height: 38px; background-color: #1fa1af;width: 100%; color: #fff; border: none; }
.card-btn:hover, .card-btn:active{ background-color: #1fa1af; box-shadow: 0 8px 20px rgba(34, 203, 211, 0.6); transform: scale(1.05); }
/* Анімація появи */
.card-bg { opacity: 0; transform: translateY(40px); animation: fadeUp 1s ease forwards; }
.card-bg:nth-child(1) { animation-delay: 0.3s; }
.card-bg:nth-child(2) { animation-delay: 0.6s; }
.card-bg:nth-child(3) { animation-delay: 0.9s; }
.span, .span-icon{ display: flex; align-items: center; gap: 5px; font-size: 20px; font-weight: 500; }
.span::before, .span-icon::before{ content: ''; display:inline-block ; min-width:20px ; height:20px ; background-image: url(./icon/data-icon.png); background-position: center; background-repeat:no-repeat ; }
.span-icon::before{ background-image: url(./icon/icon-student.png); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 1024px) {
  .title-hero{ 
    font-size: 34px;
  }
  .custom-btn {
    padding: 10px 40px;
    font-size: 0.95rem;
  }
  .span, .span-icon{
    font-size: 10px;
  }
  .cards-box{
padding-top: 170px ;
  gap: 20px;
    }
  .hero{
    padding-top: 0;
  }

}

@media (max-width: 768px) {
  .cards-box{
  padding-bottom: 50px;
    gap:20px;
    }
  .hero{
  padding-top:30px ;
  justify-content: center;
  
    align-items: center;
    text-align: center;
}
.hero-content {
  
    width: 100%;
    text-align: center;
  }

  .hero-content .d-flex {
    justify-content: center;
  }
  .title-hero{ 
    font-size: 28px;
  }
  .span, .span-icon{
    font-size: 8px;
  }
  .box-span{
    justify-content: center;
  }
 
  }



@media (max-width: 380px) {
   .custom-btn {
    padding: 10px 40px;
    font-size: 0.65rem;
  }
  }
/* ---------------------------
   Sity (location) block
   --------------------------- */
.sity { background: transparent/* #fff*/; position: relative; z-index: 2; padding-bottom: clamp(40px, 5.20vw, 100px ); }
.sity-bg { padding: 40px; padding-left: clamp(15px, 5%, 30px); padding-right: clamp(15px, 5%, 30px); position: relative; z-index: 5; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: 24px; border: 1px solid rgba(255, 255, 255, 0.35); box-shadow: 0 0 25px rgba(255, 255, 255, 0.2), 0 8px 40px rgba(0, 0, 0, 0.2); }
.sity::after { content: ''; position: absolute; top: 0px; left: 0; width: 100%; height: 220px; background: linear-gradient( to bottom, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 40%, rgba(255, 255, 255, 0.4) 70%, rgba(255, 255, 255, 0) 100% ); filter: blur(30px); z-index: 1; pointer-events: none; }

/* section headings */
.section-span,
.section-text
 {
  font-size: 18px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  color: #103a58;
 
}
.title-section {
  font-weight: 700;
  font-size: clamp(40px, 3.33vw, 64px);
  text-align: center;
  color: #103a58;
}
@media (max-width: 768px) {
  .section-span, .section-text { font-size: 10px; }
  
}

/* ---------------------------
   Prorosal / menu-card (offers)
   --------------------------- */
.prorosal{
  padding: clamp(40px, 5.20vw, 100px) 0;
  background:transparent /*linear-gradient(to top, #66c8d1 40%, #ffffff 100%)*/;
}


.article-img {
  height: 157px;
  width: 300px;
}

.menu-card {
  display: flex;
  gap: 20px;
  overflow-y: hidden;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 20px;
  -webkit-overflow-scrolling: touch;
}


.item-card {
  background:  linear-gradient(
    130deg,
    #4ecbff, /* ніжна бірюза */
    #0e8cb5,
    #044f77,
    #00315D)/*#f7f7f7*/ ;
  flex: 0 0 300px;
  border-radius: 20px;
  scroll-snap-align: start;
  flex-shrink: 0;
 
box-shadow:
  0 0 10px rgba(255, 255, 255, 0.9),
  0 0 2px rgba(255, 255, 255, 0.7) inset;

  perspective: 800px;
  transform-style: preserve-3d;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  position: relative;
  overflow: hidden;
 
  border: 2px solid #fff;
}

.article{
  display: flex;
  flex-direction: column;
  height: 100%;
}
.btn-link-article{
 
 margin-top: auto;
}

.card-content {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s ease;
}
.card-content.show {
  opacity: 1;
  transform: translateY(0);
}
.card-content p {
  padding: 0 10px 10px 10px;
  font-size: 14px;
  letter-spacing: 0.05em;
  text-align: center;
  color:#fff;
}


.title-menu {
  font-weight: 700;
  font-size: 18px;
  text-align: center;
  color: #103a58;
}


.link-article {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 5px;
  border-top: 1px solid #dbd9d9;
  padding: 8px 0;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.05em;
  background: #fff;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.link-article::after,
.link-blog::after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 14px;
  margin-left: 6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='white' stroke-width='2' fill='none' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 5l7 7-7 7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  transition: transform 0.3s ease;
}



.item-card:hover,
.item-card:active {
  box-shadow: 0 8px 25px rgba(50, 160, 200, 0.7); 
  border: 2px solid rgba(50, 160, 200, 0.7);
  transition: all 0.3s ease;
}
.item-card:hover::after,
.item-card:active { left: 125%; }


@media (max-width: 768px) {
  .menu-card { overflow-x: visible; justify-content: start; }
  .item-card { flex: 0 0 250px; }
}

/* ---------------------------
   Reviews section
   --------------------------- */
.reviews {
  position: relative;
  background:transparent /*linear-gradient(to bottom, #66c8d1, #158794)*/;
  padding: clamp(40px, 5.20vw, 100px) 0;
  text-align: center;
  overflow: hidden;
}
.reviews-title {
  font-weight: 700;
  font-size: clamp(40px, 3.33vw, 64px);
  margin-bottom: 40px;
  color: #fff;
}
.reviews-slider {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  transition: transform 0.6s ease;
  position: relative;
  z-index: 2;
 
}
.review-card {
  max-width: 375px;
  width: 100%;
  padding: 20px;
background-color: #ffffff10;
  border-radius: 20px;



  opacity: 0.95;
  transform: scale(0.96);
  transition: all 0.4s ease;
  border: 2px solid #fff;
}
.review-card p { font-style: italic; color: #fff; }
.review-img {
  width: 30%;
  border-radius: 100%;
  margin-bottom: 15px;
  border: 2px solid #158794;
}

.review-card:hover,
.review-card.active {

  
    box-shadow: 0 0 15px #4cc9f0, 0 0 30px #4cc9f0;
    transform: translateY(-4px);
}



.dot.active { opacity: 1; }

.review-content {
  margin-top: 100px;
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px 10px;
 
 
 
}
.review-content p{
   text-align:center;
}
@media (max-width: 768px) {
  .reviews-slider {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 20px;
    justify-content: flex-start;
    padding: 10px 20px;
  }
  .review-content { margin-top: 50px; padding: 30px 0; }
  .review-card {
    flex: 0 0 80%;
    scroll-snap-align: center;
    opacity: 1;
    transform: scale(1);
    filter: none;
    max-width: none;
  }
  .dots { display: none; }
}

/* ---------------------------
   Blog / Swiper gallery
   --------------------------- */
 
 .section-divider {
margin-top:clamp( 40px, 7.29vw, 120px) ;
  height: 2px;
  background: rgba(255, 255, 255, 0.25);
  filter: blur(1px);
}


.blog {
  padding: clamp(40px, 5.20vw, 100px) 0;
  background:transparent/* #158794*/;
  z-index: 0;
  color: #fff;
}

.blog-title { color: #fff; }

/* swiper */
.swiper { width: 100%; padding: 50px 0; }
.swiper-slide {
  background: #fff;
  border-radius: 15px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.swiper-slide img { width: 100%; height: auto; object-fit: cover; }

/* gallery boxes */
.box-img {
  width: 300px;
  height: 200px;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.6);
  background: linear-gradient(145deg, #f9fdff, #e1f7fa);
  animation: pulse-glow 2s infinite alternate;
  box-shadow:
    0 0 35px rgba(95,201,243,0.9),
    0 0 60px rgba(21,135,148,0.6);
}
.blog-img { width: 100%; height: 100%; object-fit: cover; }
.swiper-pagination span { background-color: #fff; }

/* btn-blog */
.btn-blog {
  display: block;
  margin: 0 auto;
  padding: 18px 60px;
  color: #fff;
  border-radius: 12px;
  font-size: 22px;
  font-weight: 600;
  text-align: center;
  background-color: #22cbd3;
  box-shadow: 0 6px 15px rgba(34,203,211,0.4);
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
  margin-bottom: 50px;
}
.btn-blog:hover,
 .btn-blog:active{
  background-color: #1fa1af;
  box-shadow: 0 8px 20px rgba(34,203,211,0.6);
  transform: scale(1.05);
}
@media (max-width: 768px) {
  .swiper-slide {
    transform: scale(0.85);
  }

  .swiper-slide-active {
    animation: centerPulse 1.2s ease-out;
    z-index: 10;
  }

  @keyframes centerPulse {
    0%   { transform: scale(0.9); }
    50%  { transform: scale(1.25); }
    100% { transform: scale(1.1); }
  }
  .btn-blog { width: 80%; font-size: 18px; padding: 15px 0; border-radius: 10px; }
  .title-section { padding-bottom: 0; margin-bottom: 0; }
}

@media (max-width: 480px) {
  .btn-blog { width: 90%; font-size: 16px; padding: 13px 0; border-radius: 8px; }

}

/* ---------------------------
   News / blog cards
   --------------------------- */
.news {
 /* background: /*linear-gradient(to bottom, #158794 0%, #0d4c53 100%);*/
  padding: clamp(40px, 5.20vw, 100px) 0;
}
.section-subtitle {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 50px;
  color: #555;
  font-size: 1rem;
}

/* blog cards grid */
.blog-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  margin-bottom: 50px;
}

.blog-card {
  background: #1C3B5A; /* гармонійний темно-синій */
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 5px 20px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
box-shadow: 0 8px 25px rgba(50, 160, 200, 0.7); /* легка бірюзово-синя підсвітка */
  /* обводка */
  border: 2px solid rgba(50, 160, 200, 0.7);
  height:auto;
  padding-bottom: 10px;
}

.blog-card:hover,
.blog-card:active  {
  
    transform: translateY(-8px);
}

.blog-card h3 { color: #fff; }
.blog-card p { color: #dddbdb; }

    .btn-news {
    color: #fff;
    display: inline-block;
    width: 100%;
    border: none;
    text-align: left;
    padding-left: 20px;
    align-items: center;
   
    }
    .link-blog{
      display: flex;
      align-items: center;
      text-align: end;
      gap: 10px;
      color: #fff;
      font-weight: 500;
  font-size: 14px;
 
    }
/* image wrapper with wave */
.image-wrapper { position: relative; overflow: hidden; }
.image-wrapper img { width: 100%; height: 180px; object-fit: cover; }

/* subtle animated wave under image */
.wave {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 200%;
  height: 40px;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.8), rgba(255,255,255,0));
  opacity: 0.7;
  animation: waveMove 4s linear infinite;
  clip-path: polygon(
    0 60%, 10% 55%, 20% 65%, 30% 55%, 40% 65%, 50% 55%,
    60% 65%, 70% 55%, 80% 65%, 90% 55%, 100% 60%, 100% 100%, 0 100%
  );
}
@keyframes waveMove { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

.blog-card h3 { margin: 20px 15px 10px; font-size: 1.2rem; color: #fff; }
.blog-card p { margin: 0 15px 20px; color: #dddbdb; font-size: 0.95rem; }

/* ---------------------------
   Social section
   --------------------------- */
.social {
  position: relative;
 
 

  padding-top: clamp(40px, 5.20vw, 100px) 0;
  padding-bottom: clamp(120px, 7.81vw, 150px) ;
  text-align: center;
  color: #fff;
}
.social-title {
  font-size: clamp(24px, 3vw, 36px);
  margin-bottom: 40px;
  font-weight: 700;
  letter-spacing: 1px;
}
.social-cards {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
  padding-bottom: 50px;
   z-index: 10;
  position: relative;
}
.social-card {
  background:#1b1b1b;
  backdrop-filter: blur(8px);
  border-radius: 20px;
  padding: 30px;
  width: 260px;
  transition: all 0.4s ease;
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
 
}
.social-card, .social-card .icon {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.social-card:hover,
.social-card:active 
{  transform: scale(1.02);
  box-shadow:
    0 0 35px rgba(95,201,243,0.9),
    0 0 60px rgba(21,135,148,0.6);
  border: 1px solid rgba(255,255,255,0.6);
 
  animation: pulse-glow 2s infinite alternate;
}



.icon { font-size: 40px; margin-bottom: 15px; }
.icon.fb { color: #1877f2; }
.icon.ig { color: #e4405f; }
.icon.tw { color: #1da1f2; }

.social-card p { font-size: 14px; line-height: 1.5; margin-bottom: 20px; }

.btn-social {
  background-color: #22cbd3;
  color: white;
  border: none;
  padding: 10px 25px;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.btn-social:hover, .btn-social:active { background-color: #158794; }

/* ---------------------------
   Footer
   --------------------------- */
.footer {
 position: relative;

 overflow: hidden;

 background-image: url(./img/footer-q.webp);
 background-position:bottom  center;
 background-size:cover;
  background-repeat:no-repeat ;
  height: 400px;}

.box-footer {
  padding:clamp(20px, 5.20vw, 100px) 0;
}



.footer-nav a,
.box-footer a,
.boxs a ,
.socials-boxs a p{
  z-index: 2;
}
.socials-boxs a{
  font-size: 30px;
  margin-right: 20px;
}
.text-footer  p{
  color: #fff;
}
.socials-boxs{
 text-align: end;
}

/* Бульбашки */
.bubble {
  position: absolute;
  bottom: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  opacity: 0.8;
  animation: rise linear infinite;
}

/* Різні кольори та швидкість */
.bubble:nth-child(1) { left: 10%; background: #0d4c53; animation-duration: 4s; width: 8px; height: 8px; }
.bubble:nth-child(2) { left: 25%; background: #09393e; animation-duration: 5s; width: 12px; height: 12px; }
.bubble:nth-child(3) { left: 40%; background: #05272a; animation-duration: 6s; width: 10px; height: 10px; }
.bubble:nth-child(4) { left: 60%; background: #0d4c53; animation-duration: 4.5s; width: 14px; height: 14px; }
.bubble:nth-child(5) { left: 75%; background: #09393e; animation-duration: 5.5s; width: 9px; height: 9px; }

@keyframes rise {
  0% { transform: translateY(0) scale(0.5); opacity: 0.6; }
  50% { opacity: 1; }
  100% { transform: translateY(-250px) scale(1); opacity: 0; }
}
/*******************/

@media (max-width: 765px) {
.footer {
  padding: 0 0}

.box-footer {
    flex-direction: column;
    text-align: center;
  }

  .footer-nav {
    margin-top: 1rem;
  }

  .box-contacts {
    flex-direction: column;
    gap: 1rem;
  }

  .logo-img {
    max-width: 120px;
  }
.text-footer  p{
 font-size: 10px;
}
.social-cards {
 
  padding-bottom: 10px;
  
}
}

/* ---------------------------
   Global: smooth reveal & section shimmer
   (non-invasive: safe to append)
   --------------------------- */