.ab {
   font-family: 'Playfair Display', serif;
 }

 /* Floating Image */
 .ab2 {
   animation: abFloat 4s ease-in-out infinite;
 }

 @keyframes abFloat {
   0% {
     transform: translateY(0px);
   }

   50% {
     transform: translateY(-10px);
   }

   100% {
     transform: translateY(0px);
   }
 }

 /* Content Animation */
 .ab3 {
   animation: abFade 1s ease;
 }

 @keyframes abFade {
   from {
     opacity: 0;
     transform: translateY(30px);
   }

   to {
     opacity: 1;
     transform: translateY(0);
   }
 }

 /* Button Animation */
 .ab4 {
   position: relative;
   overflow: hidden;
 }

 .ab4::before {
   content: "";
   position: absolute;
   top: 0;
   left: -100%;
   width: 100%;
   height: 100%;
   background: rgba(255, 255, 255, 0.2);
   transition: 0.5s;
 }

 .ab4:hover::before {
   left: 100%;
 }

 .ab5 {
  border: 1px solid transparent;
  padding: 14px 10px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  min-height: 160px;
  background: transparent;
}

.ab5 .ab9 {
  transition: 0.3s;
}

/* Responsive */
@media (max-width: 768px) {

  .ab5 {
    min-height: auto;
    padding: 10px 6px;
  }

}

 /* -------------------------------------------------------------------------service --------------------------------------------------------------------- */


 .sv1 {
   font-family: 'Playfair Display', serif;
 }

 /* SCROLL ANIMATION */
 .sv2 {
   opacity: 0;
   transform: translateY(50px);
   transition: all 0.9s ease;
 }

 .sv2.sv3 {
   opacity: 1;
   transform: translateY(0);
 }

 /* CARD */
 .sv4 {
   transition: 0.4s;
   overflow: hidden;
   position: relative;
   background: rgba(255, 255, 255, 0.95);
   backdrop-filter: blur(10px);
 }

 .sv4:hover {
   transform: translateY(-8px);
   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.10);
 }

 .sv5 {
   transition: 0.5s;
 }

 .sv4:hover .sv5 {
   transform: scale(1.05);
 }



 .sv7 {
   background: linear-gradient(135deg, #8BAE77, #728F61);
 }

 .sv8 {
   background: linear-gradient(135deg, #C5A46D, #a58251);
 }

 /* -------------------------------------------------------------------------Testimonials--------------------------------------------------------------------- */

 .grid-bg {
   background-image:
     linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
     linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
   background-size: 40px 40px;
 }

 /* glow */
 

 /* card */
 .testimonial-card {
   background: #8bae77;
   min-height: 360px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   text-align: center;
 }

 /* image */
 .testimonial-image {
   width: 100%;
   height: 360px;
   object-fit: cover;
   border-radius: 24px;
 }

 /* overlay */
 .image-overlay {
   position: absolute;
   inset: 0;
   border-radius: 24px;
   background: linear-gradient(to top,
       rgba(0, 0, 0, .85),
       rgba(0, 0, 0, .2),
       transparent);
 }

 /* arrows */
 .arrow-btn {
   width: 54px;
   height: 54px;
   border-radius: 999px;
   background: white;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: .3s;
   box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
 }

 .arrow-btn:hover {
   transform: translateY(-50%) scale(1.08);
 }

 /* responsive */
 @media(max-width:1024px) {

   .testimonial-prev {
     left: -20px !important;
   }

   .testimonial-next {
     right: -20px !important;
   }

 }

 @media(max-width:768px) {

   .testimonial-prev,
   .testimonial-next {
     display: none;
   }

   .testimonial-card {
     min-height: auto;
   }

 }

 /* ----------------------------------------------------------------------------footer ------------------------------------------------------------------- */

 .footer-bg {
   background: #f7f5f1;
 }

 .footer-title {
   font-size: 13px;
   font-weight: 700;
   color: #666055;
   margin-bottom: 16px;
   text-transform: uppercase;
   letter-spacing: .5px;
 }

 .footer-link {
   display: block;
   color: #625d54;
   font-size: 14px;
   margin-bottom: 8px;
   transition: .3s;
 }

 .footer-link:hover {
   color: #7f8f5f;
 }

 .social-icon {
   width: 32px;
   height: 32px;
   border-radius: 999px;
   background: #6f7651;
   color: white;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: .3s;
   font-size: 15px;
 }

 .social-icon:hover {
   transform: translateY(-3px);
   background: #8bae77;
 }

 .newsletter-input {
   width: 100%;
   height: 46px;
   border: none;
   outline: none;
   background: white;
   padding: 0 16px;
   border-radius: 4px;
   font-size: 14px;
 }

 .subscribe-btn {
   width: 100%;
   height: 46px;
   background: #7f8f5f;
   color: white;
   border-radius: 4px;
   font-weight: 500;
   transition: .3s;
   font-size: 15px;
 }

 .subscribe-btn:hover {
   background: #6d7b50;
 }

 .bottom-bar {
   background: #000000;
 }

 .scroll-top {
   width: 48px;
   height: 48px;
   border-radius: 999px;
   background: #8BAE77;
   color: white;
   position: fixed;
   right: 24px;
   bottom: 24px;
   z-index: 999;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   font-size: 20px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);

   opacity: 0;
   visibility: hidden;
   transform: translateY(20px);
   transition: all .35s ease;
 }

 .scroll-top.active {
   opacity: 1;
   visibility: visible;
   transform: translateY(0);
 }

 .scroll-top:hover {
   transform: translateY(-4px);
   background: #728F61;
 }

 @media(max-width:768px) {

   .scroll-top {
     width: 42px;
     height: 42px;
     right: 16px;
     bottom: 16px;
     font-size: 18px;
   }

 }

 .scroll-top:hover {
   transform: translateY(-50%) scale(1.08);
 }

 @media(max-width:768px) {

   .footer-wrapper {
     display: flex;
     flex-direction: column;
     gap: 38px;
   }

   .footer-logo {
     text-align: center;
   }

   .footer-logo h2 {
     font-size: 34px !important;
     letter-spacing: 2px !important;
   }

   .footer-logo p {
     font-size: 10px !important;
     letter-spacing: 3px !important;
   }

   .footer-text {
     max-width: 100% !important;
     font-size: 14px !important;
     line-height: 28px !important;
   }

   .footer-socials {
     justify-content: center;
   }

   .footer-section {
     border-top: 1px solid #ddd1bb;
     padding-top: 24px;
   }

   .footer-title {
     font-size: 12px;
     margin-bottom: 14px;
   }

   .footer-link {
     font-size: 13px;
   }

   .bottom-bar p {
     font-size: 12px;
     padding-right: 40px;
   }

   .scroll-top {
     width: 30px;
     height: 30px;
     right: 12px;
   }

 }


 .footer-wrapper{
    align-items:start;
}

.footer-section{
    width:100%;
}

.newsletter-input{
    width:100%;
}

@media (max-width:1024px){

    .footer-wrapper{
        gap:2rem;
    }

    .footer-logo{
        max-width:100%;
    }

}
 /* ------------------------------------------------------------------contact ------------------------------------------------------------------ */
 .yoga-heading {
      font-family: 'Playfair Display', serif;
    }

    .booking-card {
      background: rgba(255, 255, 255, 0.72);
      backdrop-filter: blur(14px);
      border: 1px solid rgba(255, 255, 255, 0.5);
    }

    .wellness-input {
      width: 100%;
      height: 52px;
      border: 1px solid #e6dfd1;
      background: white;
      border-radius: 14px;
      padding: 0 16px;
      outline: none;
      transition: .3s;
      font-size: 14px;
      color: #2e2e2e;
    }

    .wellness-input:focus {
      border-color: #8bae77;
      box-shadow: 0 0 0 4px rgba(139, 174, 119, .10);
    }

    textarea.wellness-input {
      height: 120px;
      padding-top: 16px;
      resize: none;
    }

    .session-option {
      accent-color: #8bae77;
      width: 16px;
      height: 16px;
      cursor: pointer;
    }

    .booking-button {
      height: 54px;
      background: #8bae77;
      color: white;
      border-radius: 14px;
      font-weight: 600;
      font-size: 14px;
      transition: .35s;
      width: 100%;
    }

    .booking-button:hover {
      background: #769760;
      transform: translateY(-2px);
    }

    .wellness-image {
      overflow: hidden;
      position: relative;
      height: 100%;
      min-height: 650px;
    }

    .wellness-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: 1s;
    }

    .wellness-image:hover img {
      transform: scale(1.05);
    }

    .image-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top,
          rgba(0, 0, 0, .75),
          rgba(0, 0, 0, .15),
          transparent);
    }

    .info-card {
      transition: .35s;
    }

    .info-card:hover {
      transform: translateY(-4px);
    }

    .validation-message {
      color: #ef4444;
      font-size: 12px;
      margin-top: 6px;
      display: none;
    }

    .input-error {
      border-color: #ef4444 !important;
      box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.08) !important;
    }

    @media(max-width:768px) {

      .wellness-image {
        min-height: 350px;
      }

    }
 /* ----------------------------------------------------------------Premium Scrollbar----------------------------------------------------------------------------- */

 ::-webkit-scrollbar {
   width: 10px;
 }

 ::-webkit-scrollbar-track {
   background: #f3eee5;
 }

 ::-webkit-scrollbar-thumb {
   background: #8BAE77;
   border-radius: 999px;
 }

 ::-webkit-scrollbar-thumb:hover {
   background: #728F61;
 }








  .hero {
    background-image: url("image/Image\ 1.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
    min-height: 100vh;
  }

  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.10);
  }

  .hero > * {
    position: relative;
    z-index: 2;
  }

  /* ✅ MOBILE FIX */
  @media (max-width: 768px) {
    .hero {
      min-height: 85vh;        /* balanced height */
      background-position: 70% center; /* face/object adjust */
    }
  }

  /* very small screens */
  @media (max-width: 480px) {
    .hero {
      min-height: 80vh;
      background-position: 75% center;
    }
  }