* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}



body {

  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

  background: #0a0a0a; 

  color: #ddd; 

  line-height: 1.6;

  min-height: 100vh;

  padding-top: 80px; 

  overflow-x: hidden;

}





.container {

  width: 90%;

  max-width: 1100px;

  margin: 0 auto;

}







header {

  position: relative;

}



.nav-container {

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  z-index: 1000;

  display: flex;

  align-items: center;

  justify-content: space-between;

  background: linear-gradient(90deg, rgba(5,5,10,0.95) 0%, rgba(15,15,30,0.95) 100%);

  padding: 16px 30px;

  height: 80px;

  backdrop-filter: blur(10px);

  border-bottom: 1px solid #0099ff; 

  transition: background 0.3s ease;

}



/**/

.logo-link {

  display: flex;

  align-items: center;

}



.logo {

  max-height: 90px;

  width: auto;

  height: auto;

  object-fit: contain;

  filter: drop-shadow(0 0 8px #00ccff);

  transition: filter 0.3s ease, transform 0.3s ease;

}



.logo:hover,

.logo:focus {

  filter: drop-shadow(0 0 16px #00ccff);

  transform: scale(1.05);

}





.nav-list {

  list-style: none;

  display: flex;

  gap: 40px;

  margin: 0;

  padding: 0;

}



.nav-list li a {

  color: #00ccff; 

  text-decoration: none;

  font-weight: 700;

  font-size: 1.15rem;

  position: relative;

  padding-bottom: 5px;

  transition: color 0.3s ease, transform 0.25s ease;

}



.nav-list li a::after {

  content: '';

  position: absolute;

  bottom: 0;

  left: 0;

  width: 0%;

  height: 3px;

  background-color: #33ddff; 

  border-radius: 3px;

  transition: width 0.3s ease;

}



.nav-list li a:hover::after,

.nav-list li a:focus::after {

  width: 100%;

}



.nav-list li a:hover,

.nav-list li a:focus {

  color: #33ddff;

  transform: scale(1.1);

  text-shadow: 0 0 12px #00ccff;

}





.nav-toggle {

  display: none;

  background: none;

  border: none;

  cursor: pointer;

  z-index: 1001;

}



.hamburger {

  display: block;

  width: 25px;

  height: 3px;

  background: #00ccff;

  border-radius: 2px;

  position: relative;

  transition: all 0.3s ease;

}



.hamburger::before,

.hamburger::after {

  content: '';

  position: absolute;

  width: 25px;

  height: 3px;

  background: #33ddff;

  border-radius: 2px;

  transition: all 0.3s ease;

}



.hamburger::before {

  top: -8px;

}



.hamburger::after {

  bottom: -8px;

}



.nav-toggle.active .hamburger {

  background: transparent;

}



.nav-toggle.active .hamburger::before {

  transform: rotate(45deg) translate(5px, 5px);

}



.nav-toggle.active .hamburger::after {

  transform: rotate(-45deg) translate(5px, -5px);

}





@media (max-width: 768px) {

  .nav-list {

    position: absolute;

    top: 80px;

    left: 0;

    right: 0;

    background-color: rgba(5, 5, 15, 0.98);

    flex-direction: column;

    align-items: center;

    gap: 25px;

    padding: 20px 0;

    display: none;

  }



  .nav-list.open {

    display: flex;

    animation: fadeInDown 0.3s ease forwards;

  }



  @keyframes fadeInDown {

    from {

      opacity: 0;

      transform: translateY(-10px);

    }

    to {

      opacity: 1;

      transform: translateY(0);

    }

  }



  .nav-list li a {

    font-size: 1.05rem;

  }



  .logo {

    max-height: 45px;

  }



  .nav-toggle {

    display: block;

  }

}



.hero {

  position: relative;

  background:

    linear-gradient(rgba(46, 46, 46, 0.9), rgba(0, 0, 0, 0.9)),

    url('images/uvod1_very_dark.jpeg') no-repeat center center/cover;

  height: 100vh;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  text-align: center;

  color: #99dfff; 

  padding: 0 20px;

  overflow: hidden;

  z-index: 1;

  filter: brightness(0.85);

}



.hero-logo {

  max-width: 100%;

  height: auto;

  margin-bottom: 30px;

  filter: drop-shadow(0 0 16px #33ccffaa);

  position: relative;

  z-index: 2;

  max-width: 600px;

}



.hero p {

  font-family: 'Cormorant Garamond', serif; 

  font-weight: 400;

  font-size: 1.8rem;

  max-width: 700px;

  margin: 0 auto 55px;

  color: #bbdefb; 

  position: relative;

  z-index: 2;

  line-height: 1.5;

  text-shadow: 0 0 16px #33ccffcc;

  letter-spacing: 0.02em;

}



#dynamic-slogan {

  opacity: 1;

  transition: opacity 0.5s ease;

  font-weight: 600;

  min-height: 1.5em; 

}

.fade-out {

  opacity: 0;

}



.hero-icon {

  display: inline-block;

  vertical-align: middle;

  margin: 0 10px;

}



.hero-icon svg {

  width: 36px;

  height: 36px;

  stroke: #fff; 

  stroke-width: 1.5;

  fill: none;

}





.hero-socials {

  position: absolute;

  bottom: 20px;

  left: 20px;

  display: flex;

  flex-direction: column;

  gap: 15px;

  z-index: 10;

}



.hero-socials a {

  color: #99dfff;

  text-decoration: none;

  transition: color 0.3s ease;

  font-size: 0;

}



.hero-socials a:hover {

  color: #33ccff;

}



.btn-primary {

  position: relative;

  display: inline-block;

  padding: 18px 60px;

  font-size: 1.4rem;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.12em;

  color: #222;

  background-color: #fff;

  border: 3px solid #0575e6;

  border-radius: 8px; 

  cursor: pointer;

  overflow: hidden;

  transition: color 0.3s ease, border-color 0.3s ease;

  user-select: none;

  z-index: 1;

  text-decoration: none;

}





.btn-primary::before {

  content: "";

  position: absolute;

  top: 0; left: -50%;

  width: 50%;

  height: 100%;

  background: linear-gradient(90deg, rgba(5, 117, 230, 0) 0%, rgba(5, 117, 230, 0.5) 50%, rgba(5, 117, 230, 0) 100%);

  animation: slideStripe 2.5s linear infinite;

  pointer-events: none;

  z-index: 0;

}





@keyframes slideStripe {

  0% { left: -50%; }

  100% { left: 100%; }

}



.btn-primary:hover,

.btn-primary:focus {

  color: #fff;

  border-color: #00f260;

  background-color: #0575e6;

}



.btn-primary:hover::before,

.btn-primary:focus::before {

  background: linear-gradient(90deg, rgba(0, 242, 96, 0) 0%, rgba(0, 242, 96, 0.6) 50%, rgba(0, 242, 96, 0) 100%);

  animation-duration: 1.2s;

}





@media (max-width: 768px) {

  .hero {

    height: auto;

    padding: 90px 20px 70px;

  }



  .hero-logo {

    max-height: 160px;

    margin-bottom: 25px;

  }



  .hero p {

    font-size: 1.3rem;

    max-width: 90%;

    margin-bottom: 45px;

  }



  .btn-primary {

    padding: 16px 40px;

    font-size: 1.15rem;

  }

}





@media (max-width: 600px) {

  .hero-socials {

    position: static;

    flex-direction: row;

    justify-content: center;

    margin-top: 30px;

    gap: 30px;

  }

}





.about {

  position: relative;

  padding: 100px 20px;

  background: transparent;

}





.about-header {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 15px;

  margin-bottom: 40px;

  position: relative;

  z-index: 2;

}



.about-header i[data-lucide] {

  width: 40px;

  height: 40px;

  color: #33ccff;

  filter: drop-shadow(0 0 6px #00bfffaa);

  transition: transform 0.3s ease;

}

.about-header i[data-lucide]:hover {

  transform: rotate(20deg);

}



.about-header h2 {

  font-size: 2.8rem;

  font-weight: 700;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  text-align: center;

  margin: 0 0 12px 0;

  color: #33ccff;

  position: relative;

  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

}





.about-header h2::after {

  content: "";

  position: absolute;

  bottom: -7px;

  left: 50%;

  transform: translateX(-50%);

  width: 100px;

  height: 3px;

  background:

    repeating-linear-gradient(

      45deg,

      #33ccff,

      #33ccff 4px,

      transparent 4px,

      transparent 8px

    );

  border-radius: 2px;

  opacity: 0.75;

}

.about-header h2:hover::after {

  opacity: 1;

  height: 4px;

  background: linear-gradient(90deg, #1ef4ff, #33ccff, #1ef4ff);

}



.floating-booking-btn {

  

  position: fixed;

  bottom: 20px;

  right: 20px;

  z-index: 9999;

  

  

  background-color: #000000; 

  color: #ffffff; 

  border: 2px solid #00ffff; 

  padding: 12px 20px;

  border-radius: 30px; 

  

  

  display: flex;

  align-items: center;

  gap: 10px; 

  

  

  font-family: sans-serif;

  font-weight: bold;

  font-size: 16px;

  text-decoration: none;

  box-shadow: 0 4px 15px rgba(0, 255, 255, 0.2); 

  transition: all 0.3s ease;

  cursor: pointer;

}





.floating-booking-btn:hover {

  transform: translateY(-3px); 

  background-color: #00ffff; 

  color: #000000; 

  box-shadow: 0 6px 20px rgba(0, 255, 255, 0.5); 

}





@media (max-width: 576px) {

  .floating-booking-btn {

    bottom: 15px;

    right: 15px;

    padding: 0;

    width: 55px;

    height: 55px;

    border-radius: 50%; 

    justify-content: center;

    gap: 0;

  }

  

  

  .floating-booking-btn .btn-text {

    display: none;

  }

}







.service-marquee {

    position: relative;

    width: 100%;

    height: 58px;



    display: flex;

    align-items: center;



    overflow: hidden;



    background:

        linear-gradient(

            180deg,

            #050708 0%,

            #080c0f 48%,

            #050708 100%

        );



    border-top: 1px solid rgba(0, 229, 255, 0.18);

    border-bottom: 1px solid rgba(0, 229, 255, 0.18);



    box-shadow:

        inset 0 1px 0 rgba(255, 255, 255, 0.025),

        inset 0 -1px 0 rgba(255, 255, 255, 0.018),

        0 -10px 35px rgba(0, 229, 255, 0.025),

        0 10px 35px rgba(0, 0, 0, 0.45);



    isolation: isolate;

}









.service-marquee::before {

    content: "";



    position: absolute;

    top: 50%;

    left: 50%;



    width: 55%;

    height: 1px;



    transform: translate(-50%, -50%);



    background: #00e5ff;



    opacity: 0.18;



    filter: blur(7px);



    box-shadow:

        0 0 20px rgba(0, 229, 255, 0.5),

        0 0 45px rgba(0, 229, 255, 0.25);



    pointer-events: none;



    z-index: 0;

}









.service-marquee::after {

    content: "";



    position: absolute;



    left: -20%;

    bottom: 0;



    width: 40%;

    height: 1px;



    background: linear-gradient(

        90deg,

        transparent,

        rgba(0, 229, 255, 0.9),

        transparent

    );



    box-shadow:

        0 0 8px rgba(0, 229, 255, 0.7);



    animation: marquee-light 7s ease-in-out infinite;



    pointer-events: none;



    z-index: 5;

}









.marquee-track {

    position: relative;

    z-index: 2;



    display: flex;

    align-items: center;



    width: max-content;



    animation:

        marquee-scroll 32s linear infinite;



    will-change: transform;

}









.marquee-content {

    display: flex;

    align-items: center;

    flex-shrink: 0;

    width: max-content;

}









.marquee-item {

    position: relative;



    display: inline-flex;

    align-items: center;



    gap: 12px;



    padding: 0 34px;



    white-space: nowrap;



    color: rgba(242, 246, 248, 0.88);



    font-family: "Inter", sans-serif;

    font-size: 11px;

    font-weight: 600;



    letter-spacing: 2.2px;



    text-transform: uppercase;



    transition:

        color 0.35s ease,

        text-shadow 0.35s ease;

}









.marquee-item svg {

    width: 17px;

    height: 17px;



    flex-shrink: 0;



    stroke: #00e5ff;

    stroke-width: 1.6;



    opacity: 0.95;



    filter:

        drop-shadow(0 0 4px rgba(0, 229, 255, 0.45))

        drop-shadow(0 0 10px rgba(0, 229, 255, 0.15));



    transition:

        transform 0.35s ease,

        filter 0.35s ease;

}









.marquee-dot {

    display: inline-flex;

    align-items: center;

    justify-content: center;



    width: 6px;

    height: 6px;



    color: #d4af37;



    font-size: 6px;



    opacity: 0.9;



    text-shadow:

        0 0 5px rgba(212, 175, 55, 0.55),

        0 0 12px rgba(212, 175, 55, 0.2);



    transform: rotate(0deg);



    transition:

        transform 0.4s ease,

        filter 0.4s ease;

}









.service-marquee {

    -webkit-mask-image:

        linear-gradient(

            to right,

            transparent 0%,

            #000 7%,

            #000 93%,

            transparent 100%

        );



    mask-image:

        linear-gradient(

            to right,

            transparent 0%,

            #000 7%,

            #000 93%,

            transparent 100%

        );

}









.service-marquee:hover .marquee-track {

    animation-play-state: paused;

}



.service-marquee:hover .marquee-item {

    color: #ffffff;



    text-shadow:

        0 0 12px rgba(255, 255, 255, 0.08);

}



.service-marquee:hover .marquee-item svg {

    transform: scale(1.08);



    filter:

        drop-shadow(0 0 6px rgba(0, 229, 255, 0.8))

        drop-shadow(0 0 14px rgba(0, 229, 255, 0.3));

}



.service-marquee:hover .marquee-dot {

    transform: rotate(45deg) scale(1.15);



    filter:

        drop-shadow(0 0 5px rgba(212, 175, 55, 0.8));

}









@keyframes marquee-scroll {



    from {

        transform: translateX(0);

    }



    to {

        transform: translateX(-50%);

    }



}









@keyframes marquee-light {



    0% {

        left: -40%;

        opacity: 0;

    }



    15% {

        opacity: 0.8;

    }



    50% {

        opacity: 1;

    }



    85% {

        opacity: 0.8;

    }



    100% {

        left: 100%;

        opacity: 0;

    }



}









@media (max-width: 700px) {



    .service-marquee {

        height: 52px;

    }



    .marquee-track {

        animation-duration: 25s;

    }



    .marquee-item {

        gap: 9px;



        padding: 0 24px;



        font-size: 9px;



        letter-spacing: 1.6px;

    }



    .marquee-item svg {

        width: 15px;

        height: 15px;

    }



    .marquee-dot {

        font-size: 5px;

    }



}



.booking-update__button {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 14px 28px;

    background: #fff;

    color: #000;

    text-decoration: none;

    font-weight: 700;

    letter-spacing: 1px;

    border-radius: 4px;

    transition: .3s ease;

}



.booking-update__button:hover {

    transform: translateY(-3px);

    background: #ddd;

}





.about-content {

  max-width: 800px;

  margin: 0 auto;

  backdrop-filter: blur(12px);

  background: rgba(15, 15, 15, 0.4);

  border: 1px solid rgba(51, 204, 255, 0.15);

  border-radius: 20px;

  padding: 40px 30px;

  box-shadow: 0 0 60px rgba(0, 153, 255, 0.05);

  position: relative;

  z-index: 2;

}



.about-content p {

  font-size: 1.2rem;

  color: #e0e0e0;

  line-height: 1.8;

  text-align: center;

  margin-top: 1.4em;

}

.about-content p:first-child {

  margin-top: 0;

}

.about-content p strong {

  color: #33ccff;

}



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

   recenze

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



.reviews {

  padding: 100px 20px;

  background:

    radial-gradient(circle at top, rgba(51,204,255,0.12), transparent 45%),

    linear-gradient(135deg, #050505, #111);

  position: relative;

  overflow: hidden;

}





.reviews::before {

  content: "";

  position: absolute;

  inset: 0;



  background:

    radial-gradient(circle at center, rgba(51,204,255,0.06), transparent 60%);



  pointer-events: none;

}









.reviews .about-header {



  display:flex;

  justify-content:center;

  align-items:center;



  gap:15px;



  margin-bottom:60px;



  position:relative;

  z-index:2;



}





.reviews .about-header i {



  width:38px;

  height:38px;



  color:#33ccff;



  filter:

    drop-shadow(0 0 8px rgba(51,204,255,.7));



}





.reviews .about-header h2 {



  margin:0;



  color:#33ccff;



  font-size:clamp(2rem,5vw,3rem);



  letter-spacing:.15em;



  text-transform:uppercase;



  text-shadow:

    0 0 15px rgba(51,204,255,.35);



}











.review-grid {



  max-width:1200px;



  margin:auto;



  display:grid;



  grid-template-columns:repeat(3,1fr);



  gap:30px;



}







/* KARTA */



.review {



  position:relative;



  padding:35px 30px;



  overflow:hidden;





  background:

    linear-gradient(

      145deg,

      rgba(255,255,255,.08),

      rgba(51,204,255,.03)

    );





  border:



    1px solid rgba(51,204,255,.25);





  border-radius:20px;





  backdrop-filter:blur(12px);





  box-shadow:



    0 20px 50px rgba(0,0,0,.5);





  transition:



    transform .35s ease,

    border-color .35s ease,

    box-shadow .35s ease;



}











.review::before {



  content:"";



  position:absolute;



  top:0;



  left:20%;



  width:60%;



  height:1px;





  background:



    linear-gradient(

      90deg,

      transparent,

      #33ccff,

      transparent

    );





  opacity:.7;



}







.review:hover {



  transform:translateY(-8px);





  border-color:#33ccff;





  box-shadow:



    0 25px 70px rgba(51,204,255,.18);



}







/* HVĚZDY */



.stars {



  color:#33ccff;





  font-size:1.25rem;





  letter-spacing:4px;





  margin-bottom:20px;





  text-shadow:



    0 0 10px rgba(51,204,255,.5);



}







/* TEXT */



.review p {



  color:rgba(255,255,255,.85);





  font-size:1.05rem;





  line-height:1.7;





  font-style:italic;





  margin:0;



}







/* JMÉNO */



.review span {



  display:block;





  margin-top:25px;





  color:#33ccff;





  font-weight:700;





  font-style:normal;





  font-size:1rem;



}







/* GOOGLE HODNOCENÍ */



.rating-box {



  max-width:400px;





  margin:60px auto 0;





  text-align:center;





  padding:25px;





  border-radius:20px;





  border:



    1px solid rgba(51,204,255,.3);





  background:



    rgba(255,255,255,.04);





  box-shadow:



    0 0 30px rgba(51,204,255,.08);



}







.rating-box strong {



  display:block;





  color:#33ccff;





  font-size:2rem;





  letter-spacing:3px;





  text-shadow:



    0 0 15px rgba(51,204,255,.5);



}







.rating-box p {



  margin:10px 0 0;





  color:rgba(255,255,255,.7);



}







/* GOOGLE LINK */



.reviews-more {



  text-align:center;





  margin-top:40px;





  color:rgba(255,255,255,.7);



}







.reviews-more a {



  color:#33ccff;





  font-weight:700;





  text-decoration:none;



}





.reviews-more a:hover {



  color:#1ef4ff;



}







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

   MOBIL

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





@media(max-width:1000px){



  .review-grid {



    grid-template-columns:repeat(2,1fr);



  }



}







@media(max-width:650px){



  .reviews {



    padding:70px 15px;



  }





  .reviews .about-header h2 {



    font-size:2rem;



  }





  .review-grid {



    grid-template-columns:1fr;



    gap:20px;



  }





  .review {



    padding:28px 22px;



  }





  .review p {



    font-size:.95rem;



  }





  .stars {



    font-size:1.1rem;



  }





  .rating-box strong {



    font-size:1.6rem;



  }



}







.about p,

.services p,

.contact p {

  max-width: 700px;

  margin: 0 auto;

  font-size: 1.15rem;

  color: #ddd;

  line-height: 1.6;

  text-align: center;

}





.services {

  position: relative;

  padding: 85px 0;

  overflow: hidden;

  background: linear-gradient(135deg, #0a0a0a 0%, #121212 100%);

}





.services-header {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 15px;

  margin-bottom: 40px;

  position: relative;

  z-index: 2;

}



.services-header i[data-lucide] {

  width: 40px;

  height: 40px;

  color: #33ccff;

  filter: drop-shadow(0 0 6px #00bfffaa);

  transition: transform 0.3s ease;

}

.services-header i[data-lucide]:hover {

  transform: rotate(20deg);

}



.services-header h2 {

  font-size: 2.8rem;

  font-weight: 700;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  text-align: center;

  margin: 0 0 12px 0;

  color: #33ccff;

  position: relative;

  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

}





.services-header h2::after {

  content: "";

  position: absolute;

  bottom: -7px;

  left: 50%;

  transform: translateX(-50%);

  width: 100px;

  height: 3px;

  background:

    repeating-linear-gradient(

      45deg,

      #33ccff,

      #33ccff 4px,

      transparent 4px,

      transparent 8px

    );

  border-radius: 2px;

  opacity: 0.75;

}





.services-header h2:hover::after {

  opacity: 1;

  height: 4px;

  background: linear-gradient(90deg, #1ef4ff, #33ccff, #1ef4ff);

}





.services-box {

  max-width: 800px;

  margin: 0 auto;

  backdrop-filter: blur(15px);

  background: rgba(15, 15, 15, 0.55);

  border: 1px solid rgba(51, 204, 255, 0.2);

  border-radius: 24px;

  padding: 45px 35px;

  box-shadow: 0 0 80px rgba(0, 153, 255, 0.1);

  position: relative;

  z-index: 2;

}





.services-list {

  list-style: none;

  color: #a0cfff;

  font-size: 1.18rem;

  line-height: 1.65;

  padding: 0;

  margin: 30px 0;

}





.services-list li {

  margin-bottom: 28px;

  border-bottom: 1px solid rgba(51, 204, 255, 0.12);

  padding-bottom: 18px;

  border-radius: 8px;

  transition: background-color 0.3s ease, box-shadow 0.3s ease;

  cursor: default;

}

.services-list li:last-child {

  border-bottom: none;

  margin-bottom: 0;

  padding-bottom: 0;

}

.services-list li:hover {

  background-color: rgba(51, 204, 255, 0.12);

  box-shadow: 0 0 20px #33ccff88;

}





.service-title {

  display: flex;

  justify-content: space-between;

  align-items: center;

  font-weight: 600;

  color: #33ccff;

  font-size: 1.22rem;

  margin-bottom: 6px;

  letter-spacing: 0.03em;

}





.price {

  font-weight: 700;

  font-size: 1.18rem;

  color: #1ef4ff;

  background: rgba(51, 204, 255, 0.15);

  padding: 3px 12px;

  border-radius: 12px;

  box-shadow: 0 0 10px #33ccff99;

  user-select: none;

  white-space: nowrap;

}





.services-list li p {

  color: #b0d6ffcc;

  font-weight: 400;

  margin: 0;

  font-size: 1rem;

  line-height: 1.5;

  padding-left: 6px;

  letter-spacing: 0.015em;

}





.addon-title {

  font-size: 1.3rem;

  font-weight: 600;

  color: #33ccff;

  margin-top: 40px;

  text-align: center;

}





.services-note {

  display: flex;

  align-items: center;

  justify-content: center;

  margin-top: 50px;

  font-size: 1.25rem;

  color: #33ccffdd;

  font-weight: 600;

  letter-spacing: 0.04em;

  gap: 10px;

  user-select: none;

  text-shadow: 0 0 6px #33ccff55;

  font-style: italic;

}



.services-note-icon {

  width: 24px;

  height: 24px;

  color: #33ccff;

  filter: drop-shadow(0 0 2px #33ccff88);

  flex-shrink: 0;

  transition: transform 0.3s ease;

}



.services-note-icon:hover {

  transform: scale(1.2) rotate(10deg);

}







@media (max-width: 520px) {

  .service-title {

    flex-direction: column;

    align-items: flex-start;

    gap: 6px;

  }

  .price {

    padding: 5px 14px;

  }

  .services-box {

    padding: 30px 20px;

  }

   .services-header h2 {

    font-size: 2rem;

    letter-spacing: 0.1em;

  }

  .services-header h2::after {

    width: 70px;

    height: 2.5px;

  }

}







.gallery {

  padding-bottom: 120px; 

  position: relative;

}







.gallery-header {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 15px;

  margin-bottom: 40px;

  position: relative;

  z-index: 2;

}



.gallery-header i[data-lucide] {

  width: 40px;

  height: 40px;

  color: #33ccff;

  filter: drop-shadow(0 0 6px #00bfffaa);

  transition: transform 0.3s ease;

}

.gallery-header i[data-lucide]:hover {

  transform: rotate(20deg);

}



.gallery-header h2 {

  font-size: 2.8rem;

  font-weight: 700;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  text-align: center;

  margin: 0 0 12px 0;

  color: #33ccff;

  position: relative;

  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

}



.gallery-header h2::after {

  content: "";

  position: absolute;

  bottom: -7px;

  left: 50%;

  transform: translateX(-50%);

  width: 100px;

  height: 3px;

  background:

    repeating-linear-gradient(

      45deg,

      #33ccff,

      #33ccff 4px,

      transparent 4px,

      transparent 8px

    );

  border-radius: 2px;

  opacity: 0.75;

}



.gallery-header h2:hover::after {

  opacity: 1;

  height: 4px;

  background: linear-gradient(90deg, #1ef4ff, #33ccff, #1ef4ff);

}





.gallery-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit,minmax(230px,1fr));

  gap: 22px;

  max-width: 1100px;

  margin: 0 auto;

  padding: 15px;

  background: rgba(15, 15, 15, 0.4);

  border-radius: 20px;

  box-shadow: 0 0 50px rgba(51, 204, 255, 0.2);

  border: 1px solid rgba(51, 204, 255, 0.15);

  transition: box-shadow 0.3s ease;

  position: relative;

  z-index: 2;

}



.gallery-grid:hover {

  box-shadow: 0 0 70px rgba(51, 204, 255, 0.4);

}



.gallery-grid img {

  width: 100%;

  height: 160px;

  object-fit: cover;

  border-radius: 14px;

  box-shadow: 0 0 16px #33ccff66;

  transition: transform 0.3s ease, box-shadow 0.3s ease;

  cursor: pointer;

  border: 2px solid transparent;

  will-change: transform;

}



.gallery-grid img:hover,

.gallery-grid img:focus {

  transform: scale(1.07);

  box-shadow: 0 0 28px #33ccffcc;

  border-color: #33ccff;

}





.gallery-info {

  text-align: center;

  margin-top: 35px;

  font-size: 1.1rem;

  color: #dcdcdc;

  z-index: 2;

  position: relative;

}



.gallery-info a {

  color: #33ccff;

  font-weight: 700;

  text-decoration: none;

  transition: color 0.3s ease;

}



.gallery-info a:hover {

  color: #66ccff;

}



.lightbox {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(10, 10, 10, 0.95);

  display: flex;

  align-items: center;

  justify-content: center;

  z-index: 9999;

  padding: 40px;

}



.lightbox img {

  max-width: 100%;

  max-height: 90%;

  border-radius: 12px;

  box-shadow: 0 0 40px rgba(51, 204, 255, 0.3);

  transition: opacity 0.3s ease;

}



.lightbox-close {

  position: absolute;

  top: 30px;

  right: 40px;

  width: 30px;

  height: 30px;

  color: #33ccff;

  cursor: pointer;

  transition: transform 0.2s ease;

  z-index: 2;

}

.lightbox-close:hover {

  transform: rotate(90deg) scale(1.2);

}





.lightbox-nav {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  width: 40px;

  height: 40px;

  color: #33ccff;

  cursor: pointer;

  z-index: 2;

  opacity: 0.8;

  transition: transform 0.3s ease, opacity 0.2s ease;

}

.lightbox-nav:hover {

  opacity: 1;

  transform: translateY(-50%) scale(1.2);

}

.lightbox-nav.left {

  left: 30px;

}

.lightbox-nav.right {

  right: 30px;

}



.hidden {

  display: none;

}







.contact-header {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 15px;

  margin-bottom: 40px;

  position: relative;

  z-index: 2;

}



.contact-header i[data-lucide] {

  width: 40px;

  height: 40px;

  color: #33ccff;

  filter: drop-shadow(0 0 6px #00bfffaa);

  transition: transform 0.3s ease;

}

.contact-header i[data-lucide]:hover {

  transform: rotate(20deg);

}



.contact-header h2 {

  font-size: 2.8rem;

  font-weight: 700;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  text-align: center;

  margin: 0 0 12px 0;

  color: #33ccff;

  position: relative;

  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

}





.contact-header h2::after {

  content: "";

  position: absolute;

  bottom: -7px;

  left: 50%;

  transform: translateX(-50%);

  width: 100px;

  height: 3px;

  background:

    repeating-linear-gradient(

      45deg,

      #33ccff,

      #33ccff 4px,

      transparent 4px,

      transparent 8px

    );

  border-radius: 2px;

  opacity: 0.75;

}





.contact-header h2:hover::after {

  opacity: 1;

  height: 4px;

  background: linear-gradient(90deg, #1ef4ff, #33ccff, #1ef4ff);

}





.contact-content p {

  font-size: 1.2rem;

  color: #e0e0e0;

  max-width: 600px;

  margin: 0 auto 1.3em auto;

  text-align: center;

  line-height: 1.6;

}



.contact-content p strong {

  color: #33ccff;

}





.contact-content p a {

  color: #3399ff;

  text-decoration: none;

  font-weight: 700;

  transition: color 0.3s ease;

}



.contact-content p a:hover,

.contact-content p a:focus {

  color: #66bbff;

  text-decoration: underline;

  outline: none;

}





.contact-card {

  max-width: 700px;

  margin: 0 auto;

  padding: 30px;

  border-radius: 20px;

  background: rgba(15, 15, 15, 0.45);

  border: 1px solid rgba(51, 204, 255, 0.12);

  box-shadow: 0 0 40px rgba(51, 204, 255, 0.06);

  backdrop-filter: blur(10px);

  display: flex;

  flex-direction: column;

  gap: 24px;

}





.contact-row {

  display: flex;

  align-items: flex-start;

  gap: 15px;

}



.contact-row i[data-lucide] {

  flex-shrink: 0;

  width: 26px;

  height: 26px;

  color: #33ccff;

  margin-top: 3px;

  filter: drop-shadow(0 0 4px #33ccff44);

}



.contact-row p {

  margin: 0;

  font-size: 1.1rem;

  color: #e0e0e0;

  line-height: 1.6;

}





.contact-row strong {

  color: #33ccff;

}





.contact-row a {

  color: #3399ff;

  font-weight: 700;

  text-decoration: none;

  transition: color 0.3s ease;

}

.contact-row a:hover {

  color: #66bbff;

  text-decoration: underline;

}



.contact-map {

  max-width: 800px;

  margin: 40px auto 0 auto;

  border-radius: 16px;

  overflow: hidden;

  box-shadow: 0 0 30px rgba(0, 153, 255, 0.08);

  border: 1px solid rgba(51, 204, 255, 0.12);

}



.is-open-row {

  display: flex;

  align-items: center;

  gap: 12px;

  margin-top: 15px;

  font-weight: 600;

  font-size: 1rem;

  color: #ffffffcc;

}



.is-open-row i[data-lucide] {

  width: 20px;

  height: 20px;

  stroke-width: 2.5;

  color: #3399ffcc; 

}



#open-status {

  font-weight: bold;

  color: #00ff88; 

}

#open-status.closed {

  color: #ff4444; 

}





@media (max-width: 600px) {

  .contact-card {

    padding: 24px 20px;

  }



  .contact-row {

    align-items: flex-start;

    gap: 12px;

  }



  .contact-row i[data-lucide] {

    width: 24px;

    height: 24px;

  }



  .contact-row p {

    font-size: 1rem;

  }

}









footer {

  background: #111822;

  color: #3399ffcc;

  border-top: 1px solid #0066cc;

  padding: 30px 20px;

  font-size: 0.95rem;

  box-shadow: inset 0 3px 8px #00336644;

  user-select: none;

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

  align-items: center;

  gap: 15px;

  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

}



footer p {

  margin: 0;

  flex: 1 1 300px;

  color: #3399ffcc;

  line-height: 1.4;

}



.footer-credit {

  color: #66ccff;

  font-weight: 700;

  text-decoration: none;

  transition: color 0.3s ease;

}



.footer-credit:hover,

.footer-credit:focus {

  color: #1ef4ff;

  text-decoration: underline;

  outline: none;

}



.footer-links {

  display: flex;

  gap: 25px;

  flex-wrap: wrap;

  flex: 1 1 300px;

  justify-content: flex-end;

}



.footer-links a {

  color: #3399ffcc;

  font-weight: 600;

  text-decoration: none;

  display: flex;

  align-items: center;

  gap: 6px;

  transition: color 0.3s ease;

  font-size: 1rem;

}



.footer-links a i[data-lucide] {

  width: 18px;

  height: 18px;

  stroke-width: 2.5;

  color: #3399ffcc;

  transition: color 0.3s ease;

}



.footer-links a:hover,

.footer-links a:focus {

  color: #1ef4ff;

  outline: none;

}



.footer-links a:hover i[data-lucide],

.footer-links a:focus i[data-lucide] {

  color: #1ef4ff;

}



.footer-logo {

  flex: 0 0 auto;      

  margin-right: 20px;  

  display: flex;

  align-items: center;

}



.footer-logo img {

  max-height: 70px;    

  height: auto;

  width: auto;

  filter: drop-shadow(0 0 8px #00ccff);

  transition: filter 0.3s ease;

}



.footer-logo img:hover,

.footer-logo img:focus {

  filter: drop-shadow(0 0 16px #00ccff);

}







@media (max-width: 600px) {

  footer {

    flex-direction: column;

    text-align: center;

  }



  .footer-links {

    justify-content: center;

    margin-top: 15px;

  }



  .footer-logo {

    margin-bottom: 15px;

    margin-right: 0;

    justify-content: center;

  }

}





a {

  transition: color 0.25s ease;

  outline-offset: 4px;

}



button:focus,

a:focus {

  outline: 2px solid #33ccff;

  outline-offset: 3px;

  outline-radius: 3px;

}



.hair-tip-trigger {

  text-align: center;

  margin: 50px 0;

}



.hair-tip-trigger button {

  background: linear-gradient(135deg, #5ac8fa, #39a0ed);

  color: #000;

  padding: 14px 26px;

  border: none;

  font-size: 15px;

  font-weight: 600;

  letter-spacing: 0.3px;

  cursor: pointer;

  border-radius: 40px;

  box-shadow: 0 8px 20px rgba(90,200,250,0.25);

  transition: transform .2s ease, box-shadow .2s ease;

}



.hair-tip-trigger button:hover,

.hair-tip-trigger button:active {

  transform: translateY(-2px);

  box-shadow: 0 12px 30px rgba(90,200,250,0.4);

}



.modal {

  display: none;

  position: fixed;

  inset: 0;

  background: rgba(0,0,0,0.85);

  backdrop-filter: blur(6px);

  z-index: 999;

  animation: fadeIn .3s ease;

}



@keyframes fadeIn {

  from { opacity: 0; }

  to { opacity: 1; }

}



.modal-content {

  background: radial-gradient(circle at top, #111d2e, #0c0f1f);

  max-width: 520px;

  margin: 8vh auto;

  padding: 40px 35px;

  position: relative;

  text-align: center;

  border-radius: 16px;

  box-shadow: 0 30px 80px rgba(0,0,0,0.6);

  animation: slideUp .4s ease;

}



@keyframes slideUp {

  from {

    transform: translateY(40px);

    opacity: 0;

  }

  to {

    transform: translateY(0);

    opacity: 1;

  }

}



.close {

  position: absolute;

  right: 18px;

  top: 14px;

  font-size: 26px;

  cursor: pointer;

  color: #777;

  transition: color .2s ease;

}



.close:hover {

  color: #5ac8fa;

}



.step p {

  font-size: 18px;

  margin-bottom: 25px;

  color: #eee;

}



.step {

  display: none;

}



.step.active {

  display: block;

}



.modal button {

  width: 100%;

  margin: 12px 0;

  padding: 16px;

  background: #0c1a2b;

  border: 1px solid #222;

  color: #eee;

  font-size: 15px;

  border-radius: 10px;

  cursor: pointer;

  transition: border .2s ease, background .2s ease, transform .15s ease, box-shadow .2s ease;

  display: flex;

  align-items: center;

  gap: 10px;

}



.modal button:hover,

.modal button:active {

  background: #14243c;

  border-color: #5ac8fa;

  transform: scale(1.03);

  box-shadow: 0 6px 20px rgba(90,200,250,0.35);

}



.result h3 {

  font-size: 22px;

  margin-bottom: 10px;

  color: #fff;

}



.result p {

  font-size: 18px;

  margin: 20px 0;

  color: #5ac8fa;

  font-weight: 600;

}



.cta {

  display: inline-block;

  margin-top: 25px;

  padding: 14px 34px;

  background: linear-gradient(135deg, #5ac8fa, #39a0ed);

  color: #000;

  text-decoration: none;

  font-weight: 700;

  border-radius: 40px;

  box-shadow: 0 10px 30px rgba(90,200,250,0.35);

  transition: transform .2s ease, box-shadow .2s ease;

}



.cta:hover,

.cta:active {

  transform: scale(1.05);

  box-shadow: 0 14px 40px rgba(90,200,250,0.5);

}



.progress {

  display: flex;

  justify-content: center;

  gap: 10px;

  margin: 20px 0 30px;

}



.progress span {

  width: 50px;

  height: 4px;

  background: #222;

  border-radius: 10px;

  transition: all .3s ease;

}



.progress span.active {

  background: #5ac8fa;

  box-shadow: 0 0 8px #5ac8fa;

}



.order-info {

  margin-top: 15px;

  font-size: 14px;

  color: #aaa;

}



.call-btn {

  display: inline-block;

  margin-top: 20px;

  padding: 14px 28px;

  background: #5ac8fa;

  color: #000;

  font-weight: bold;

  text-decoration: none;

  border-radius: 6px;

  text-align: center;

  transition: transform .2s ease, box-shadow .2s ease;

}



.call-btn:active {

  transform: scale(1.05);

  box-shadow: 0 8px 25px rgba(90,200,250,0.35);

}



.step button {

  display: flex;

  align-items: center;

  gap: 8px;

  justify-content: flex-start;

  padding: 14px 18px;

  font-weight: 600;

  transition: all .15s ease;

}



.icon {

  width: 22px;

  height: 22px;

  stroke-width: 2.2;

  color: #5ac8fa;

  flex-shrink: 0;

}



.booking-update{

    max-width:900px;

    margin:60px auto;

    padding:38px;



    background:rgba(15,22,32,.75);



    border:1px solid rgba(55,211,255,.15);

    border-radius:18px;



    box-shadow:

        0 0 30px rgba(55,211,255,.06);



    backdrop-filter:blur(10px);

}



.booking-update__header{

    display:flex;

    align-items:center;

    gap:12px;



    color:var(--primary-color);

    font-weight:700;

    letter-spacing:.08em;

    margin-bottom:18px;

}



.booking-update__header svg{

    width:20px;

    height:20px;

}



.booking-update h3{

    color:#fff;

    font-size:2rem;

    margin-bottom:16px;

}



.booking-update p{

    color:#b9c6d4;

    line-height:1.8;

    max-width:650px;

}



.booking-update__bottom{

    display:flex;

    gap:15px;

    margin-top:32px;

    flex-wrap:wrap;

}



.booking-update__status{

    display:flex;

    align-items:center;

    gap:10px;



    padding:12px 18px;



    border:1px solid rgba(55,211,255,.12);

    border-radius:999px;



    color:#d8e8f4;

    background:rgba(55,211,255,.04);

}



.booking-update__status svg{

    width:18px;

    height:18px;

    color:var(--primary-color);

}



@media(max-width:768px){



    .booking-update{

        margin:30px 15px;

        padding:26px;

    }



    .booking-update h3{

        font-size:1.6rem;

    }



    .booking-update__bottom{

        flex-direction:column;

    }



    .booking-update__status{

        width:100%;

        border-radius:12px;

    }



}



.reviews {

  position: relative;

  z-index: 2;

  padding-bottom: 80px;

}



footer {

  position: relative;

  z-index: 5;

}



.ti-widget {

  position: relative !important;

  z-index: 9999 !important;

}