:root {
     --primary-color: #2c5f5f;
     --secondary-color: #6bb6c6;
     --accent-color: #f4c2c2;
     --light-teal: #4a9aa9;
     --text-dark: #2c5f5f;
     --text-light: #4a8a8a;
     --bg-gradient: linear-gradient(135deg, #e8f4f8 0%, #f5e8f0 50%, #e0f0e8 100%);
 }

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 body {
     font-family: 'Lato', sans-serif;
     line-height: 1.6;
     color: var(--text-dark);
     background: var(--bg-gradient);
     background-attachment: fixed;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
     font-family: 'Playfair Display', serif;
 }

 /* Custom scrollbar */
 ::-webkit-scrollbar {
     width: 8px;
 }

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

 ::-webkit-scrollbar-thumb {
     background: var(--secondary-color);
     border-radius: 4px;
 }

 /* Header Styles */
 .navbar {
     background: rgba(255, 255, 255, 0.95) !important;
     backdrop-filter: blur(10px);
     box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
     padding: 15px 0;
     transition: all 0.3s ease;
 }

 .navbar.scrolled {
     padding: 8px 0;
     background: rgba(255, 255, 255, 0.98) !important;
 }

 .navbar-brand {
     font-family: 'Playfair Display', serif;
     font-size: 1.8rem;
     font-weight: 600;
     color: var(--primary-color) !important;
 }

 .navbar-nav .nav-link {
     color: var(--text-dark) !important;
     font-weight: 400;
     margin: 0 10px;
     position: relative;
     transition: color 0.3s ease;
 }

 .navbar-nav .nav-link:hover {
     color: var(--secondary-color) !important;
 }

 .navbar-nav .nav-link::after {
     content: '';
     position: absolute;
     width: 0;
     height: 2px;
     bottom: -5px;
     left: 50%;
     background-color: var(--secondary-color);
     transition: all 0.3s ease;
 }

 .navbar-nav .nav-link:hover::after {
     width: 80%;
     left: 10%;
 }

 .btn-custom {
     background: linear-gradient(45deg, var(--secondary-color), var(--light-teal));
     border: none;
     color: white;
     padding: 12px 30px;
     border-radius: 50px;
     font-weight: 500;
     transition: all 0.3s ease;
     text-decoration: none;
     display: inline-block;
 }

 .btn-custom:hover {
     transform: translateY(-2px);
     box-shadow: 0 10px 25px rgba(107, 182, 198, 0.4);
     color: white;
 }

 /* Hero Section */
 .hero {
     padding: 100px 0 0 0;
     min-height: 100vh;
     display: flex;
     align-items: center;
     position: relative;
     overflow: hidden;

 }

 .hero::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: radial-gradient(circle at 20% 80%, rgba(107, 182, 198, 0.1) 0%, transparent 50%),
         radial-gradient(circle at 80% 20%, rgba(244, 194, 194, 0.1) 0%, transparent 50%);
     z-index: -1;
 }

 .hero h1 {
     font-size: 4rem;
     font-weight: 700;
     color: var(--primary-color);
     margin-bottom: 25px;
     line-height: 1.2;
 }

 .hero-subtitle {
     font-size: 1.4rem;
     color: var(--text-light);
     margin-bottom: 40px;
     font-weight: 300;
 }

 .window-frame {
     width: 350px;
     height: 450px;
     background: linear-gradient(180deg, #4a9aa9 0%, #2c7a89 100%);
     border-radius: 175px 175px 25px 25px;
     border: 10px solid var(--secondary-color);
     position: relative;
     overflow: hidden;
     margin: 0 auto;
     box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
 }

 .stars {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-image:
         radial-gradient(3px 3px at 60px 100px, #fff, transparent),
         radial-gradient(2px 2px at 140px 180px, #fff, transparent),
         radial-gradient(4px 4px at 220px 120px, #fff, transparent),
         radial-gradient(2px 2px at 90px 240px, #fff, transparent),
         radial-gradient(3px 3px at 180px 300px, #fff, transparent),
         radial-gradient(1px 1px at 120px 80px, #fff, transparent);
 }

 .reaching-hand {
     position: absolute;
     top: 80px;
     right: 50px;
     width: 100px;
     height: 140px;
     background: var(--accent-color);
     border-radius: 50px 50px 25px 25px;
     transform: rotate(-15deg);
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
 }

 .person-silhouette {
     position: absolute;
     bottom: -60px;
     left: 50%;
     transform: translateX(-50%);
     width: 140px;
     height: 220px;
     background: var(--primary-color);
     border-radius: 70px 70px 0 0;
 }

 /* Section Styles */
 .section {
     padding: 80px 0;
 }

 .section-title {
     font-size: 3rem;
     font-weight: 600;
     color: var(--primary-color);
     margin-bottom: 50px;
     text-align: center;
 }

 .about-section {
     background: rgba(255, 255, 255, 0.4);
     backdrop-filter: blur(5px);
 }

 .meditation-figure {
     width: 280px;
     height: 280px;
     background: linear-gradient(135deg, var(--secondary-color), var(--light-teal));
     border-radius: 50%;
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
     box-shadow: 0 20px 40px rgba(107, 182, 198, 0.3);
 }

 .meditation-person {
     width: 180px;
     height: 180px;
     background: rgba(90, 165, 181, 0.8);
     border-radius: 50% 50% 40% 40%;
     position: relative;
 }

 .meditation-person::before {
     content: '';
     position: absolute;
     top: 25px;
     left: 50%;
     transform: translateX(-50%);
     width: 50px;
     height: 50px;
     background: var(--accent-color);
     border-radius: 50%;
 }

 /* Service Cards */
 .service-card {
     background: rgba(255, 255, 255, 0.7);
     backdrop-filter: blur(10px);
     padding: 40px 30px;
     text-align: center;
     border-radius: 20px;
     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
     transition: all 0.4s ease;
     border: 1px solid rgba(255, 255, 255, 0.3);
     height: 100%;
 }

 .service-card:hover {
     transform: translateY(-15px);
     box-shadow: 0 25px 50px rgba(107, 182, 198, 0.2);
     background: rgba(255, 255, 255, 0.9);
 }

 .service-icon {
     width: 80px;
     height: 80px;
     margin: 0 auto 25px;
     background: linear-gradient(45deg, var(--secondary-color), var(--light-teal));
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 30px;
     color: white;
     box-shadow: 0 10px 25px rgba(107, 182, 198, 0.3);
 }

 .service-card h4 {
     font-size: 1.5rem;
     color: var(--primary-color);
     margin-bottom: 20px;
     font-weight: 600;
 }

 /* Steps Section */
 .steps-section {
     background: rgba(255, 255, 255, 0.4);
     backdrop-filter: blur(5px);
 }

 .step-card {
     text-align: center;
     padding: 30px 20px;
     height: 100%;
 }

 .step-number {
     width: 80px;
     height: 80px;
     background: linear-gradient(45deg, var(--secondary-color), var(--light-teal));
     color: white;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 30px;
     font-weight: 700;
     margin: 0 auto 25px;
     box-shadow: 0 10px 25px rgba(107, 182, 198, 0.3);
 }

 .step-card h4 {
     font-size: 1.6rem;
     color: var(--primary-color);
     margin-bottom: 20px;
     font-weight: 600;
 }

 /* Footer */
 .footer {
     background: linear-gradient(135deg, var(--primary-color) 0%, var(--light-teal) 100%);
     color: white;
     padding: 60px 0 20px;
 }

 .footer h5 {
     color: white;
     margin-bottom: 20px;
     font-weight: 600;
 }

 .footer ul {
     list-style: none;
     padding: 0;
 }

 .footer ul li {
     margin-bottom: 10px;
 }

 .footer ul li a {
     color: rgba(255, 255, 255, 0.8);
     text-decoration: none;
     transition: color 0.3s ease;
 }

 .footer ul li a:hover {
     color: white;
 }

 .social-icons a {
     display: inline-block;
     width: 45px;
     height: 45px;
     background: rgba(255, 255, 255, 0.1);
     border-radius: 50%;
     text-align: center;
     line-height: 45px;
     margin-right: 10px;
     color: white;
     font-size: 18px;
     transition: all 0.3s ease;
 }

 .social-icons a:hover {
     background: rgba(255, 255, 255, 0.2);
     transform: translateY(-2px);
 }

 .footer-bottom {
     border-top: 1px solid rgba(255, 255, 255, 0.2);
     margin-top: 40px;
     padding-top: 20px;
     text-align: center;
     color: rgba(255, 255, 255, 0.8);
 }

 /* Animations */
 /* Floating Animation - faster */
 @keyframes float {

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

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

 .floating {
     animation: float 3s ease-in-out infinite;
     /* 6s → 3s */
 }

 /* Fade-in-up Animation - faster */
 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translateY(50px);
     }

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

 .fade-in-up {
     animation: fadeInUp 0.4s ease-out;
     /* 0.8s → 0.4s */
 }


 /* Responsive adjustments */
 @media (max-width: 768px) {
     .hero h1 {
         font-size: 2.5rem;
     }

     .section-title {
         font-size: 2.2rem;
     }

     .window-frame {
         width: 280px;
         height: 380px;
     }

     .navbar-brand {
         font-size: 1.5rem;
     }
 }

 @media (max-width: 576px) {
     .hero {
         padding: 100px 0 60px;
     }

     .hero h1 {
         font-size: 2rem;
     }

     .section {
         padding: 60px 0;
     }
 }

 #scheduleForm .form-label {

     display: flex;
 }

 .moveToTopBtn {
     display: block;
     position: fixed;
     bottom: 40px;
     right: 30px;
     z-index: 9999;
     background: linear-gradient(135deg, rgb(232, 244, 248) 0%, rgb(245, 232, 240) 50%, rgb(224, 240, 232) 100%);
     border: none;
     border-radius: 50%;
     box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;
     width: 48px;
     height: 48px;
     cursor: pointer;
     transition: opacity 0.3s;
     opacity: 1;
 }