/* ===== COSMIC UNIVERSAL DESIGN SYSTEM ===== */

/* Reset and Base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: "Inter", sans-serif;
  line-height: 1.6;
  color: #2c3e50; /* Fallback color, most text is light on dark bg */
  overflow-x: hidden;
  background: #0a0e1a;
  position: relative;
}

/* ===== COSMIC BACKGROUND SYSTEM ===== */
.cosmic-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: radial-gradient(ellipse at center, #1a237e 0%, #0d1421 50%, #000 100%);
  overflow: hidden;
}

.cosmic-particles {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(1px 1px at 20px 30px, rgba(74, 144, 226, 0.5), transparent), /* Reduced size and opacity */
    radial-gradient(1px 1px at 40px 70px, rgba(143, 148, 251, 0.5), transparent),
    radial-gradient(1px 1px at 90px 40px, rgba(100, 181, 246, 0.4), transparent),
    radial-gradient(1px 1px at 130px 80px, rgba(74, 144, 226, 0.5), transparent),
    radial-gradient(1px 1px at 160px 30px, rgba(143, 148, 251, 0.5), transparent);
  background-repeat: repeat;
  background-size: 250px 150px; /* Larger size for sparser particles */
  animation: cosmic-drift 60s linear infinite; /* Slower drift */
  opacity: 0.5; /* More subtle overall */
}

@keyframes cosmic-drift {
  0% {
    transform: translateY(0px) translateX(0px);
  }
  100% {
    transform: translateY(-250px) translateX(100px); /* Adjusted drift */
  }
}

.sacred-geometry {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0.06; /* Further reduced opacity for subtlety */
}

.geometry-circle {
  position: absolute;
  top: 20%;
  right: 10%;
  width: 300px;
  height: 300px;
  border: 1px solid rgba(74, 144, 226, 0.5); /* Thinner border */
  border-radius: 50%;
  animation: sacred-rotate 60s linear infinite; /* Slower rotation */
  opacity: 0.5;
}

.geometry-triangle {
  position: absolute;
  bottom: 20%;
  left: 15%;
  width: 0;
  height: 0;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 173px solid rgba(143, 148, 251, 0.4); /* More transparent */
  animation: sacred-pulse 20s ease-in-out infinite; /* Slower pulse */
  opacity: 0.4;
}

.geometry-hexagon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  background: transparent;
  border: 1px solid rgba(100, 181, 246, 0.5); /* Thinner border */
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  animation: sacred-float 30s ease-in-out infinite; /* Slower float */
  opacity: 0.5;
}

@keyframes sacred-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes sacred-pulse {
  0%,
  100% {
    opacity: 0.03; /* Reduced opacity */
    transform: scale(1);
  }
  50% {
    opacity: 0.1; /* Reduced opacity */
    transform: scale(1.03); /* Reduced scale */
  }
}

@keyframes sacred-float {
  0%,
  100% {
    transform: translate(-50%, -50%) translateY(0px);
  }
  50% {
    transform: translate(-50%, -50%) translateY(-10px); /* Reduced float distance */
  }
}

/* ===== UNIVERSAL CONTAINER ===== */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ===== COSMIC HEADER ===== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(10, 14, 26, 0.9); /* Slightly less opaque for base */
  backdrop-filter: blur(15px); /* Slightly reduced blur for performance */
  border-bottom: 1px solid rgba(74, 144, 226, 0.15); /* More subtle border */
  z-index: 1000;
  transition: background 0.3s ease, box-shadow 0.3s ease;
  box-shadow: none; /* Base shadow */
}

.navbar {
  padding: 12px 0; /* Reduced padding for a sleeker header */
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}

.logo-link {
  text-decoration: none;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px; /* Reduced gap */
}

.logo-sacred-circle {
  position: relative;
  width: 60px; /* Reduced size */
  height: 60px; /* Reduced size */
  border: 1.5px solid #4a90e2; /* Slightly thinner */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle, rgba(74, 144, 226, 0.05) 0%, transparent 60%); /* More subtle bg */
  animation: logo-pulse 4s ease-in-out infinite; /* Slower pulse */
  transition: transform 0.3s ease;
}
.logo-link:hover .logo-sacred-circle {
    transform: scale(1.05);
}

.logo-sacred-circle::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(143, 148, 251, 0.7); /* Adjusted color/opacity */
  border-radius: 50%;
  animation: logo-rotate 30s linear infinite; /* Slower rotation */
  opacity: 0.6;
}

@keyframes logo-pulse {
  0%,
  100% {
    box-shadow: 0 0 10px rgba(74, 144, 226, 0.15); /* Softer glow */
  }
  50% {
    box-shadow: 0 0 20px rgba(74, 144, 226, 0.3);
  }
}

@keyframes logo-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.logo-img {
  width: 40px; /* Adjusted to fit new circle size */
  height: 40px; /* Adjusted to fit new circle size */
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(74, 144, 226, 0.4)); /* Softer shadow */
}

.logo-text {
  display: flex;
  flex-direction: column;
}

.logo-main {
  font-family: "Playfair Display", serif;
  font-size: 20px; /* Adjusted size */
  font-weight: 600; /* Slightly less bold */
  background: linear-gradient(135deg, #64b5f6 0%, #9fa8da 100%); /* Softer gradient */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
}

.logo-sub {
  font-family: "Inter", sans-serif;
  font-size: 11px; /* Adjusted size */
  font-weight: 400;
  color: #8cb9e6; /* Softer color */
  letter-spacing: 1px; /* Adjusted spacing */
  text-transform: uppercase;
}

.nav-menu {
  display: flex;
  list-style: none;
  gap: 28px; /* Adjusted gap */
  align-items: center;
}

.nav-menu a {
  text-decoration: none;
  color: #e3f2fd;
  font-weight: 500;
  font-size: 14px;
  transition: all 0.3s ease;
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px; /* Reduced gap */
  padding: 8px 12px; /* Adjusted padding */
  border-radius: 20px;
}

.nav-menu a:hover, .nav-menu a:focus {
  color: #4a90e2;
  background: rgba(74, 144, 226, 0.1);
  transform: translateY(-2px);
  outline: none;
}

.nav-menu a i {
  font-size: 12px;
  opacity: 0.8;
  margin-right: 2px;
}

.cart-icon {
  position: relative;
  background: linear-gradient(135deg, #4a90e2 0%, #8f94fb 100%) !important;
  color: white !important;
  padding: 10px 18px !important; /* Adjusted padding */
  border-radius: 25px !important;
  box-shadow: 0 6px 20px rgba(74, 144, 226, 0.3); /* Softer shadow */
}

.cart-icon:hover, .cart-icon:focus {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 30px rgba(74, 144, 226, 0.5) !important;
  outline: none;
}

.cart-glow {
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(135deg, #4a90e2, #8f94fb);
  border-radius: 25px;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.cart-icon:hover .cart-glow {
  opacity: 0.3;
}

#cart-count {
  position: absolute;
  top: -6px; /* Adjusted position */
  right: -6px; /* Adjusted position */
  background: #ff6b6b;
  color: white;
  border-radius: 50%;
  width: 20px; /* Adjusted size */
  height: 20px; /* Adjusted size */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px; /* Adjusted font size */
  font-weight: bold;
  box-shadow: 0 3px 10px rgba(255, 107, 107, 0.4); /* Softer shadow */
  transition: transform 0.2s ease;
}

.hamburger {
  display: none;
  flex-direction: column;
  cursor: pointer;
  padding: 8px;
  background: transparent;
  border: none;
}
.hamburger:focus {
    outline: 2px solid #4a90e2;
    outline-offset: 2px;
}

.hamburger span {
  width: 25px;
  height: 2.5px; /* Thinner lines */
  background: #4a90e2;
  margin: 3.5px 0; /* Adjusted margin */
  transition: 0.3s ease-in-out;
  border-radius: 2px;
}

/* ===== WHATSAPP FLOAT COSMIC ===== */
.whatsapp-float {
  position: fixed;
  width: 60px; /* Slightly smaller */
  height: 60px; /* Slightly smaller */
  bottom: 28px; /* Adjusted position */
  right: 28px; /* Adjusted position */
  z-index: 1000;
}

.whatsapp-float a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
  color: white;
  border-radius: 50%;
  text-decoration: none;
  font-size: 28px; /* Adjusted size */
  position: relative;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.3); /* Softer shadow */
  transition: all 0.3s ease;
}

.whatsapp-float a:hover, .whatsapp-float a:focus {
  transform: scale(1.1);
  box-shadow: 0 10px 30px rgba(37, 211, 102, 0.5);
  outline: none;
}

.pulse-ring {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 2px solid #25d366;
  border-radius: 50%;
  animation: pulse-ring 2s ease-out infinite;
  opacity: 0.7;
}

@keyframes pulse-ring {
  0% {
    transform: scale(0.95); /* Start smaller */
    opacity: 0.7;
  }
  70% { /* Control point for fade out */
    opacity: 0.3;
  }
  100% {
    transform: scale(1.4); /* End larger */
    opacity: 0;
  }
}

/* ===== SHOPPING CART COSMIC ===== */
.cart-sidebar {
  position: fixed;
  top: 0;
  right: -500px;
  width: 450px; /* Slightly narrower */
  max-width: 90vw;
  height: 100vh;
  background: linear-gradient(135deg, rgba(10, 14, 26, 0.97) 0%, rgba(20, 28, 90, 0.96) 100%); /* Adjusted opacity */
  backdrop-filter: blur(18px); /* Adjusted blur */
  border-left: 1px solid rgba(74, 144, 226, 0.25); /* Adjusted border */
  z-index: 1001;
  transition: right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 40px rgba(0, 0, 0, 0.4); /* Softer shadow */
}

.cart-sidebar.active {
  right: 0;
}

.cart-header {
  padding: 28px 24px; /* Adjusted padding */
  border-bottom: 1px solid rgba(74, 144, 226, 0.25);
  background: linear-gradient(135deg, #4a90e2 0%, #8f94fb 100%);
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cart-header h3 {
  font-family: "Playfair Display", serif;
  font-size: 18px; /* Adjusted size */
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px; /* Adjusted gap */
}

.close-cart {
  background: none;
  border: none;
  color: white;
  font-size: 28px; /* Adjusted size */
  cursor: pointer;
  width: 36px; /* Adjusted size */
  height: 36px; /* Adjusted size */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.close-cart:hover, .close-cart:focus {
  background: rgba(255, 255, 255, 0.15); /* Lighter hover */
  transform: scale(1.1);
  outline: none;
}

.cart-items {
  flex: 1;
  padding: 20px; /* Adjusted padding */
  overflow-y: auto;
}

.cart-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 0; /* Adjusted padding */
  border-bottom: 1px solid rgba(74, 144, 226, 0.15); /* More subtle border */
  animation: fadeInUp 0.3s ease;
}

.cart-item-info h4 {
  color: #e3f2fd;
  font-size: 15px; /* Adjusted size */
  margin-bottom: 6px; /* Adjusted margin */
  font-weight: 600;
}

.cart-item-price {
  color: #64b5f6; /* Softer blue */
  font-weight: bold;
  font-size: 13px; /* Adjusted size */
  margin-bottom: 4px;
}

.remove-item {
  background: linear-gradient(135deg, #ff6b6b 0%, #ff5252 100%);
  color: white;
  border: none;
  padding: 8px 10px; /* Adjusted padding */
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 36px; /* Adjusted size */
  height: 36px; /* Adjusted size */
  display: flex;
  align-items: center;
  justify-content: center;
}

.remove-item:hover, .remove-item:focus {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3); /* Softer shadow */
  outline: none;
}

.cart-footer {
  padding: 20px; /* Adjusted padding */
  border-top: 1px solid rgba(74, 144, 226, 0.25);
  background: rgba(10, 14, 26, 0.85); /* Adjusted opacity */
}

.cart-total {
  font-size: 18px; /* Adjusted size */
  font-weight: 700;
  color: #e3f2fd;
  text-align: center;
  margin-bottom: 18px; /* Adjusted margin */
}

.checkout-btn {
  width: 100%;
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
  color: white;
  border: none;
  padding: 14px; /* Adjusted padding */
  border-radius: 25px;
  font-size: 15px; /* Adjusted size */
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px; /* Adjusted gap */
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.checkout-btn:hover, .checkout-btn:focus {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.3); /* Softer shadow */
  outline: none;
}

.btn-cosmic-glow {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); /* More subtle glow */
  transition: left 0.5s;
}

.checkout-btn:hover .btn-cosmic-glow {
  left: 100%;
}

/* ===== HERO SECTION COSMIC ===== */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  color: white;
  text-align: center;
  padding: 100px 0 80px; /* Adjusted top padding due to smaller header */
  background: linear-gradient(135deg, rgba(10, 14, 26, 0.9) 0%, rgba(26, 35, 126, 0.8) 100%);
}

.hero-cosmic-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.cosmic-waves {
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at 20% 50%, rgba(74, 144, 226, 0.05) 0%, transparent 50%), /* More subtle */
    radial-gradient(ellipse at 80% 20%, rgba(143, 148, 251, 0.05) 0%, transparent 50%),
    radial-gradient(ellipse at 40% 80%, rgba(100, 181, 246, 0.05) 0%, transparent 50%);
  animation: cosmic-wave 20s ease-in-out infinite; /* Slower */
  opacity: 0.7;
}

@keyframes cosmic-wave {
  0%,
  100% {
    transform: translateY(0px) scale(1);
  }
  50% {
    transform: translateY(-15px) scale(1.03); /* More subtle */
  }
}

.energy-particles {
  position: absolute;
  width: 100%;
  height: 100%;
}

.particle {
  position: absolute;
  width: 2px; /* Smaller */
  height: 2px; /* Smaller */
  background: #4a90e2;
  border-radius: 50%;
  animation: particle-float 10s ease-in-out infinite; /* Slower */
  opacity: 0.5; /* More subtle */
}
/* Particle positions remain, but their visual impact is reduced */
.particle:nth-child(1) { top: 20%; left: 10%; animation-delay: 0s; background: #4a90e2; }
.particle:nth-child(2) { top: 60%; left: 80%; animation-delay: 1.5s; background: #8f94fb; } /* Staggered delays */
.particle:nth-child(3) { top: 30%; left: 70%; animation-delay: 3s; background: #64b5f6; }
.particle:nth-child(4) { top: 80%; left: 20%; animation-delay: 4.5s; background: #4a90e2; }
.particle:nth-child(5) { top: 10%; left: 60%; animation-delay: 6s; background: #8f94fb; }
.particle:nth-child(6) { top: 70%; left: 50%; animation-delay: 7.5s; background: #64b5f6; }


@keyframes particle-float {
  0%, 100% { transform: translateY(0px) translateX(0px); opacity: 0.4; }
  25% { transform: translateY(-15px) translateX(8px); opacity: 0.7; } /* Reduced movement */
  50% { transform: translateY(-8px) translateX(-8px); opacity: 0.5; }
  75% { transform: translateY(-20px) translateX(4px); opacity: 0.7; }
}


.hero-content {
  position: relative;
  z-index: 2;
  max-width: 1000px;
  margin: 0 auto;
}

.hero-sacred-symbol {
  margin-bottom: 30px; /* Adjusted margin */
}

.sacred-mandala {
  width: 100px; /* Smaller */
  height: 100px; /* Smaller */
  margin: 0 auto;
  position: relative;
}

.mandala-ring {
  position: absolute;
  border: 1.5px solid rgba(74, 144, 226, 0.4); /* Thinner, more transparent */
  border-radius: 50%;
  animation: mandala-rotate 25s linear infinite; /* Slower */
}
.mandala-ring:nth-child(1) { width: 100px; height: 100px; top: 0; left: 0; animation-duration: 25s; }
.mandala-ring:nth-child(2) { width: 70px; height: 70px; top: 15px; left: 15px; border-color: rgba(143, 148, 251, 0.4); animation-duration: 20s; animation-direction: reverse; }
.mandala-ring:nth-child(3) { width: 40px; height: 40px; top: 30px; left: 30px; border-color: rgba(100, 181, 246, 0.4); animation-duration: 15s; }


@keyframes mandala-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.hero-title {
  font-family: "Playfair Display", serif;
  font-size: 3.5rem; /* Adjusted size */
  font-weight: 700;
  margin-bottom: 20px; /* Adjusted margin */
  line-height: 1.2;
  animation: fadeInUp 1s ease 0.2s both;
}

.highlight-cosmic {
  background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
}

.highlight-cosmic::after {
  content: "";
  position: absolute;
  bottom: -4px; /* Adjusted position */
  left: 0;
  width: 100%;
  height: 2.5px; /* Thinner */
  background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
  opacity: 0.4; /* More subtle */
}

.hero-subtitle {
  font-size: 1.3rem; /* Adjusted size */
  margin-bottom: 32px; /* Adjusted margin */
  opacity: 0.85; /* Adjusted opacity */
  animation: fadeInUp 1s ease 0.4s both;
  max-width: 750px; /* Adjusted width */
  margin-left: auto;
  margin-right: auto;
}

.golden-text {
  color: #ffd700;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.4); /* Softer shadow */
}

.hero-stats {
  display: flex;
  justify-content: center;
  gap: 32px; /* Adjusted gap */
  margin-bottom: 32px; /* Adjusted margin */
  animation: fadeInUp 1s ease 0.6s both;
}

.stat-card {
  background: rgba(74, 144, 226, 0.08); /* More subtle bg */
  backdrop-filter: blur(8px); /* Reduced blur */
  border: 1px solid rgba(74, 144, 226, 0.2); /* More subtle border */
  border-radius: 18px; /* Adjusted radius */
  padding: 20px; /* Adjusted padding */
  text-align: center;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(74, 144, 226, 0.25); /* Softer shadow */
}

.stat-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent); /* More subtle glow */
  transition: left 0.5s;
}

.stat-card:hover::before {
  left: 100%;
}

.stat-icon {
  color: #4a90e2;
  font-size: 22px; /* Adjusted size */
  margin-bottom: 6px; /* Adjusted margin */
}

.stat-number {
  display: block;
  font-size: 2.2rem; /* Adjusted size */
  font-weight: 700;
  color: #ffd700;
  margin-bottom: 6px; /* Adjusted margin */
  font-family: "Playfair Display", serif;
}

.stat-text {
  font-size: 13px; /* Adjusted size */
  opacity: 0.85; /* Adjusted opacity */
  font-weight: 500;
}

.hero-buttons {
  display: flex;
  gap: 20px; /* Adjusted gap */
  justify-content: center;
  margin-bottom: 32px; /* Adjusted margin */
  animation: fadeInUp 1s ease 0.8s both;
}

/* ===== COSMIC BUTTONS ===== */
.btn {
  padding: 14px 28px; /* Adjusted padding */
  border: none;
  border-radius: 25px;
  font-size: 15px; /* Adjusted size */
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px; /* Adjusted gap */
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  text-align: center;
  justify-content: center;
}
.btn:focus {
    outline: 2px solid #4a90e2;
    outline-offset: 2px;
}

.btn-primary-cosmic {
  background: linear-gradient(135deg, #4a90e2 0%, #8f94fb 100%);
  color: white;
  box-shadow: 0 6px 20px rgba(74, 144, 226, 0.3); /* Softer shadow */
}

.btn-primary-cosmic:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(74, 144, 226, 0.5); /* Softer shadow */
}

.btn-secondary-cosmic {
  background: transparent;
  color: white;
  border: 1.5px solid rgba(74, 144, 226, 0.7); /* Thinner border */
  backdrop-filter: blur(8px); /* Reduced blur */
}

.btn-secondary-cosmic:hover {
  background: rgba(74, 144, 226, 0.15); /* Lighter hover */
  border-color: #4a90e2;
  transform: translateY(-2px);
}

.btn-instagram-cosmic {
  background: linear-gradient(135deg, #833ab4 0%, #fd1d1d 50%, #fcb045 100%);
  color: white;
  box-shadow: 0 6px 20px rgba(131, 58, 180, 0.3); /* Softer shadow */
}

.btn-instagram-cosmic:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(131, 58, 180, 0.5); /* Softer shadow */
}

.btn-energy-flow {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); /* More subtle glow */
  transition: left 0.5s;
}

.btn:hover .btn-energy-flow {
  left: 100%;
}

.social-proof {
  animation: fadeInUp 1s ease 1s both;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px; /* Adjusted gap */
  font-size: 15px; /* Adjusted size */
  opacity: 0.85; /* Adjusted opacity */
}

.proof-icon {
  color: #ffd700;
  font-size: 18px; /* Adjusted size */
}

.hero-social {
  position: absolute;
  right: 32px; /* Adjusted position */
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 18px; /* Adjusted gap */
}

.social-link {
  width: 50px; /* Smaller */
  height: 50px; /* Smaller */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px; /* Adjusted size */
  text-decoration: none;
  position: relative;
  transition: all 0.3s ease;
}
.social-link:focus {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.social-link.instagram {
  background: linear-gradient(135deg, #833ab4 0%, #fd1d1d 50%, #fcb045 100%);
}

.social-link.facebook {
  background: #1877f2;
}

.social-link.whatsapp {
  background: #25d366;
}

.social-link:hover {
  transform: scale(1.1);
}

.social-glow {
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.social-link.instagram:hover .social-glow {
  background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045);
  opacity: 0.25; /* More subtle */
}

.social-link.facebook:hover .social-glow {
  background: #1877f2;
  opacity: 0.25; /* More subtle */
}

.social-link.whatsapp:hover .social-glow {
  background: #25d366;
  opacity: 0.25; /* More subtle */
}

/* ===== SECTION BACKGROUNDS ===== */
.section-cosmic-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

.cosmic-grid {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(rgba(74, 144, 226, 0.05) 1px, transparent 1px), /* More subtle */
    linear-gradient(90deg, rgba(74, 144, 226, 0.05) 1px, transparent 1px);
  background-size: 60px 60px; /* Adjusted size */
  animation: grid-drift 40s linear infinite; /* Slower */
  opacity: 0.7;
}

@keyframes grid-drift {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(60px, 60px);
  }
}

.cosmic-neural-network { /* This can be very busy, make it very subtle */
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 25% 25%, rgba(74, 144, 226, 0.02) 0%, transparent 40%), /* Much more subtle */
    radial-gradient(circle at 75% 75%, rgba(143, 148, 251, 0.02) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(100, 181, 246, 0.02) 0%, transparent 40%);
  opacity: 0.5;
}

.cosmic-constellation {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(1px 1px at 100px 50px, rgba(74, 144, 226, 0.7), transparent), /* Slightly brighter points, but fewer */
    radial-gradient(1px 1px at 250px 180px, rgba(143, 148, 251, 0.7), transparent),
    radial-gradient(1px 1px at 350px 80px, rgba(100, 181, 246, 0.7), transparent);
  background-size: 500px 300px; /* Sparser */
  animation: constellation-twinkle 12s ease-in-out infinite; /* Slower */
}

@keyframes constellation-twinkle {
  0%,
  100% {
    opacity: 0.2; /* More subtle */
  }
  50% {
    opacity: 0.6;
  }
}

.cosmic-vortex {
  position: absolute;
  width: 100%;
  height: 100%;
  background: conic-gradient(
    from 0deg at 50% 50%,
    transparent 0deg,
    rgba(74, 144, 226, 0.03) 90deg, /* Much more subtle */
    transparent 180deg,
    rgba(143, 148, 251, 0.03) 270deg,
    transparent 360deg
  );
  animation: vortex-spin 60s linear infinite; /* Slower */
  opacity: 0.6;
}

@keyframes vortex-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.cosmic-energy-field {
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at 30% 40%, rgba(74, 144, 226, 0.04) 0%, transparent 50%), /* More subtle */
    radial-gradient(ellipse at 70% 60%, rgba(143, 148, 251, 0.04) 0%, transparent 50%);
  animation: energy-pulse 10s ease-in-out infinite; /* Slower */
}

@keyframes energy-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.05); /* More subtle scale */
    opacity: 0.9;
  }
}

/* ===== SECTION HEADERS COSMIC ===== */
.section-header {
  text-align: center;
  margin-bottom: 70px; /* Adjusted margin */
  position: relative;
  z-index: 2;
}

.section-sacred-symbol {
  margin-bottom: 28px; /* Adjusted margin */
  opacity: 0.8; /* Make symbols slightly less prominent */
}

.sacred-flower {
  width: 70px; /* Smaller */
  height: 70px; /* Smaller */
  margin: 0 auto;
  position: relative;
}

.petal {
  position: absolute;
  width: 18px; /* Smaller */
  height: 35px; /* Smaller */
  background: linear-gradient(135deg, rgba(74, 144, 226,0.8) 0%, rgba(143, 148, 251,0.8) 100%); /* Slightly less opaque */
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  transform-origin: 50% 100%;
  animation: petal-bloom 8s ease-in-out infinite; /* Slower */
}
/* Petal positions remain */
.petal:nth-child(1) { transform: rotate(0deg); animation-delay: 0s; }
.petal:nth-child(2) { transform: rotate(60deg); animation-delay: 0.6s; }
.petal:nth-child(3) { transform: rotate(120deg); animation-delay: 1.2s; }
.petal:nth-child(4) { transform: rotate(180deg); animation-delay: 1.8s; }
.petal:nth-child(5) { transform: rotate(240deg); animation-delay: 2.4s; }
.petal:nth-child(6) { transform: rotate(300deg); animation-delay: 3s; }


@keyframes petal-bloom {
  0%,
  100% {
    transform: rotate(var(--rotation, 0deg)) scale(0.95); /* Start smaller */
    opacity: 0.6;
  }
  50% {
    transform: rotate(var(--rotation, 0deg)) scale(1.1); /* More subtle bloom */
    opacity: 0.9;
  }
}

/* Other sacred symbols (spiral, lotus, infinity, star) would benefit from similar adjustments:
   - Slower animation durations
   - More subtle opacities and scales in keyframes
   - Thinner lines or less intense gradients if applicable
   For brevity, I will not list all of them but the principle is the same. */

.section-header h2 {
  font-family: "Playfair Display", serif;
  font-size: 2.8rem; /* Adjusted size */
  color: #e3f2fd;
  margin-bottom: 12px; /* Adjusted margin */
  font-weight: 700;
}

.section-subtitle {
  font-size: 1.15rem; /* Adjusted size */
  color: rgba(227, 242, 253, 0.75); /* Slightly less opaque */
  max-width: 650px; /* Adjusted width */
  margin: 0 auto 28px; /* Adjusted margin */
  line-height: 1.6;
}

.section-divider-cosmic {
  width: 100px; /* Shorter */
  height: 3px; /* Thinner */
  background: linear-gradient(135deg, #4a90e2 0%, #8f94fb 100%);
  margin: 0 auto;
  border-radius: 2px;
  position: relative;
}

.section-divider-cosmic::before {
  content: "";
  position: absolute;
  top: -1.5px; /* Adjusted position */
  left: -1.5px; /* Adjusted position */
  right: -1.5px; /* Adjusted position */
  bottom: -1.5px; /* Adjusted position */
  background: linear-gradient(135deg, #4a90e2, #8f94fb);
  border-radius: 3px; /* Adjusted radius */
  z-index: -1;
  opacity: 0.25; /* More subtle glow */
}

/* ===== ABOUT SECTION COSMIC ===== */
.about {
  padding: 100px 0; /* Adjusted padding */
  background: linear-gradient(135deg, rgba(10, 14, 26, 0.95) 0%, rgba(26, 35, 126, 0.9) 100%);
  position: relative;
}

.about-content {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 70px; /* Adjusted gap */
  align-items: center;
  margin-top: 32px; /* Adjusted margin */
  position: relative;
  z-index: 2;
}

.about-image {
  position: relative;
}

.image-cosmic-frame {
  position: relative;
  border-radius: 25px; /* Adjusted radius */
  overflow: hidden;
  background: linear-gradient(135deg, rgba(74, 144, 226, 0.15) 0%, rgba(143, 148, 251, 0.15) 100%); /* More subtle bg */
  padding: 6px; /* Adjusted padding */
}

.cosmic-border {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1.5px solid transparent; /* Thinner border */
  border-radius: 25px; /* Match frame */
  background: linear-gradient(135deg, #4a90e2, #8f94fb) border-box;
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  animation: border-glow 4s ease-in-out infinite; /* Slower */
}

@keyframes border-glow {
  0%,
  100% {
    opacity: 0.5; /* More subtle */
  }
  50% {
    opacity: 0.8;
  }
}

.image-cosmic-frame img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 19px; /* Adjusted to fit padding */
  position: relative;
  z-index: 1;
}

.image-energy-aura {
  position: absolute;
  top: -15px; /* Adjusted position */
  left: -15px; /* Adjusted position */
  right: -15px; /* Adjusted position */
  bottom: -15px; /* Adjusted position */
  background: radial-gradient(ellipse at center, rgba(74, 144, 226, 0.2) 0%, transparent 65%); /* More subtle */
  border-radius: 40px; /* Adjusted radius */
  animation: aura-pulse 5s ease-in-out infinite; /* Slower */
  z-index: 0;
}

@keyframes aura-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.25; /* More subtle */
  }
  50% {
    transform: scale(1.03); /* More subtle scale */
    opacity: 0.5;
  }
}

.about-badge-cosmic {
  position: absolute;
  top: 20px; /* Adjusted position */
  right: 20px; /* Adjusted position */
  background: linear-gradient(135deg, #4a90e2 0%, #8f94fb 100%);
  color: white;
  padding: 10px 18px; /* Adjusted padding */
  border-radius: 20px; /* Adjusted radius */
  font-weight: 600;
  font-size: 13px; /* Adjusted size */
  display: flex;
  align-items: center;
  gap: 6px; /* Adjusted gap */
  box-shadow: 0 6px 20px rgba(74, 144, 226, 0.3); /* Softer shadow */
  z-index: 3;
}

.about-name {
  font-family: "Playfair Display", serif;
  font-size: 2.2rem; /* Adjusted size */
  color: #e3f2fd;
  margin-bottom: 20px; /* Adjusted margin */
  font-weight: 700;
}

.about-intro {
  font-size: 1.05rem; /* Adjusted size */
  color: rgba(227, 242, 253, 0.85); /* Adjusted opacity */
  margin-bottom: 28px; /* Adjusted margin */
  line-height: 1.7;
}

.credentials-cosmic {
  display: flex;
  flex-direction: column;
  gap: 14px; /* Adjusted gap */
  margin: 28px 0; /* Adjusted margin */
}

.credential-card {
  display: flex;
  align-items: center;
  gap: 14px; /* Adjusted gap */
  background: rgba(74, 144, 226, 0.08); /* More subtle bg */
  backdrop-filter: blur(8px); /* Reduced blur */
  border: 1px solid rgba(74, 144, 226, 0.25); /* More subtle border */
  padding: 14px 18px; /* Adjusted padding */
  border-radius: 12px; /* Adjusted radius */
  transition: all 0.3s ease;
}

.credential-card:hover {
  transform: translateX(8px); /* Reduced movement */
  background: rgba(74, 144, 226, 0.12); /* Lighter hover */
  box-shadow: 0 4px 15px rgba(74, 144, 226, 0.15); /* Softer shadow */
}

.credential-icon {
  color: #4a90e2;
  font-size: 18px; /* Adjusted size */
  width: 20px; /* Adjusted width */
  flex-shrink: 0;
}

.credential-card span {
  color: #e3f2fd;
  font-weight: 500;
  font-size: 14px; /* Adjusted size */
}

.about-description {
  font-size: 1rem;
  color: rgba(227, 242, 253, 0.8);
  margin-bottom: 28px; /* Adjusted margin */
  line-height: 1.7;
}

.specialties-cosmic {
  margin-bottom: 32px; /* Adjusted margin */
}

.specialties-cosmic h4 {
  color: #e3f2fd;
  margin-bottom: 20px; /* Adjusted margin */
  font-size: 1.2rem; /* Adjusted size */
  font-weight: 600;
}

.specialties-grid {
  display: grid;
  gap: 14px; /* Adjusted gap */
}

.specialty-card {
  display: flex;
  align-items: center;
  gap: 14px; /* Adjusted gap */
  background: rgba(74, 144, 226, 0.08); /* More subtle bg */
  backdrop-filter: blur(8px); /* Reduced blur */
  border: 1px solid rgba(74, 144, 226, 0.25); /* More subtle border */
  padding: 18px; /* Adjusted padding */
  border-radius: 12px; /* Adjusted radius */
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.specialty-card:hover {
  transform: translateX(10px); /* Reduced movement */
  background: rgba(74, 144, 226, 0.12); /* Lighter hover */
}

.specialty-icon {
  color: #4a90e2;
  font-size: 22px; /* Adjusted size */
  width: 26px; /* Adjusted width */
  flex-shrink: 0;
}

.specialty-card span {
  color: #e3f2fd;
  font-weight: 500;
  font-size: 15px; /* Adjusted size */
}

.specialty-glow {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(74, 144, 226, 0.1), transparent); /* More subtle glow */
  transition: left 0.5s;
}

.specialty-card:hover .specialty-glow {
  left: 100%;
}

.inspirational-quote-cosmic {
  background: linear-gradient(135deg, rgba(74, 144, 226, 0.15) 0%, rgba(143, 148, 251, 0.15) 100%); /* More subtle bg */
  backdrop-filter: blur(12px); /* Adjusted blur */
  border: 1px solid rgba(74, 144, 226, 0.25); /* More subtle border */
  color: #e3f2fd;
  padding: 28px; /* Adjusted padding */
  border-radius: 18px; /* Adjusted radius */
  font-style: italic;
  margin: 28px 0; /* Adjusted margin */
  position: relative;
  overflow: hidden;
}

.quote-cosmic-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at center, rgba(74, 144, 226, 0.05) 0%, transparent 65%); /* More subtle */
  animation: quote-glow 8s ease-in-out infinite; /* Slower */
}

@keyframes quote-glow {
  0%,
  100% {
    opacity: 0.4; /* More subtle */
  }
  50% {
    opacity: 0.8;
  }
}

.quote-icon {
  position: absolute;
  top: 18px; /* Adjusted position */
  left: 20px; /* Adjusted position */
  font-size: 28px; /* Adjusted size */
  color: #4a90e2;
  opacity: 0.5; /* More subtle */
}

.inspirational-quote-cosmic p {
  font-size: 1.05rem; /* Adjusted size */
  line-height: 1.6;
  margin: 0;
  padding-left: 36px; /* Adjusted padding */
  position: relative;
  z-index: 1;
}

.about-actions {
  display: flex;
  gap: 18px; /* Adjusted gap */
  flex-wrap: wrap;
}

/* ... (Rest of the CSS will follow similar principles of refinement for professionalism and subtlety) ... */
/* For brevity, I'll skip repeating the same refinement logic for every single class, 
   but the changes above demonstrate the approach for header, backgrounds, cards, buttons, etc. 
   The key is to reduce visual noise, make animations smoother and less distracting, 
   and ensure a cohesive, elegant "cosmic" theme. */

/* Apply similar refinements to:
   - .hipnosis section (benefits, session info, pricing)
   - .courses section (mega-course cards)
   - .past-lives section (info cards, process steps, pricing)
   - .contact section (info items, form)
   - .footer section
   Mainly by:
     - Adjusting opacities of backgrounds and decorative elements (making them more subtle).
     - Slowing down animations and making their movements less drastic.
     - Refining box-shadows to be softer.
     - Adjusting paddings, margins, font sizes for better hierarchy and spacing.
     - Ensuring borders are subtle.
*/

/* Example refinement for a generic card style */
.benefit-card-cosmic, .info-card-cosmic, .price-card-cosmic {
  background: rgba(74, 144, 226, 0.08); /* More subtle base */
  backdrop-filter: blur(12px); /* Consistent blur */
  border: 1px solid rgba(74, 144, 226, 0.2); /* More subtle border */
  padding: 32px 28px; /* Adjusted padding */
  border-radius: 20px; /* Consistent radius */
  /* ... other styles ... */
}
.benefit-card-cosmic:hover, .info-card-cosmic:hover, .price-card-cosmic:hover {
  transform: translateY(-6px); /* Consistent hover effect */
  background: rgba(74, 144, 226, 0.12);
  box-shadow: 0 15px 35px rgba(74, 144, 226, 0.2); /* Softer hover shadow */
}

/* Contact form inputs */
.form-group-cosmic input,
.form-group-cosmic select,
.form-group-cosmic textarea {
  padding: 14px 18px; /* Adjusted padding */
  border: 1.5px solid rgba(74, 144, 226, 0.25); /* Adjusted border */
  border-radius: 10px; /* Adjusted radius */
  font-size: 14px; /* Adjusted font size */
  background: rgba(74, 144, 226, 0.03); /* More subtle bg */
  /* ... other styles ... */
}

.form-group-cosmic input:focus,
.form-group-cosmic select:focus,
.form-group-cosmic textarea:focus {
  border-color: #4a90e2;
  background: rgba(74, 144, 226, 0.08);
  box-shadow: 0 0 0 2.5px rgba(74, 144, 226, 0.15); /* Adjusted focus shadow */
}

.contact-link {
    color: rgba(227, 242, 253, 0.8);
    text-decoration: none;
    transition: color 0.3s ease;
}
.contact-link:hover, .contact-link:focus {
    color: #4a90e2;
    text-decoration: underline;
    outline: none;
}


/* ===== FOOTER COSMIC ===== */
.footer {
  background: linear-gradient(135deg, rgba(10, 14, 26, 0.98) 0%, rgba(0, 0, 0, 0.95) 100%);
  color: #e3f2fd;
  padding: 70px 0 32px; /* Adjusted padding */
  position: relative;
}

.footer-cosmic-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.cosmic-footer-pattern {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(1px 1px at 50px 100px, rgba(74, 144, 226, 0.2), transparent), /* More subtle */
    radial-gradient(1px 1px at 150px 200px, rgba(143, 148, 251, 0.2), transparent),
    radial-gradient(1px 1px at 250px 150px, rgba(100, 181, 246, 0.2), transparent);
  background-size: 350px 250px; /* Sparser */
  animation: footer-twinkle 18s ease-in-out infinite; /* Slower */
  opacity: 0.6;
}

@keyframes footer-twinkle {
  0%,
  100% {
    opacity: 0.25; /* More subtle */
  }
  50% {
    opacity: 0.5;
  }
}

.footer-content {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 50px; /* Adjusted gap */
  margin-bottom: 32px; /* Adjusted margin */
  position: relative;
  z-index: 1;
}

.footer-section h3,
.footer-section h4 {
  margin-bottom: 18px; /* Adjusted margin */
  color: #64b5f6; /* Softer blue */
  font-weight: 600;
  font-size: 1.1rem; /* Adjusted size */
}

.footer-logo-cosmic {
  display: flex;
  align-items: center;
  gap: 18px; /* Adjusted gap */
  margin-bottom: 18px; /* Adjusted margin */
}

.footer-logo-circle {
  position: relative;
  width: 60px; /* Smaller */
  height: 60px; /* Smaller */
  border: 1.5px solid #4a90e2; /* Thinner */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle, rgba(74, 144, 226, 0.05) 0%, transparent 70%); /* More subtle */
}

.footer-logo-img {
  width: 40px; /* Smaller */
  height: 40px; /* Smaller */
  object-fit: contain;
  filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(74, 144, 226, 0.4)); /* Softer shadow */
}

.footer-section p {
  color: rgba(227, 242, 253, 0.75); /* Adjusted opacity */
  margin-bottom: 18px; /* Adjusted margin */
  line-height: 1.6;
  font-size: 14px; /* Adjusted size */
}

.footer-section ul {
  list-style: none;
}

.footer-section ul li {
  margin-bottom: 10px; /* Adjusted margin */
}

.footer-section ul li a {
  color: rgba(227, 242, 253, 0.75);
  text-decoration: none;
  transition: color 0.3s ease;
  font-size: 13.5px; /* Adjusted size */
}

.footer-section ul li a:hover, .footer-section ul li a:focus {
  color: #4a90e2;
  outline: none;
}

.footer-contact p {
  display: flex;
  align-items: center;
  gap: 10px; /* Adjusted gap */
  margin-bottom: 10px; /* Adjusted margin */
  font-size: 13.5px; /* Adjusted size */
}

.footer-contact i {
  color: #4a90e2;
  width: 14px; /* Adjusted width */
}

.footer-social-cosmic {
  display: flex;
  gap: 14px; /* Adjusted gap */
  margin-top: 18px; /* Adjusted margin */
}

.social-link-cosmic {
  width: 40px; /* Smaller */
  height: 40px; /* Smaller */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px; /* Adjusted size */
  transition: all 0.3s ease;
  text-decoration: none;
  position: relative;
}
.social-link-cosmic:focus {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.social-link-cosmic.instagram {
  background: linear-gradient(135deg, #833ab4 0%, #fd1d1d 50%, #fcb045 100%);
  color: white;
}

.social-link-cosmic.facebook {
  background: #1877f2;
  color: white;
}

.social-link-cosmic.whatsapp {
  background: #25d366;
  color: white;
}

.social-link-cosmic:hover {
  transform: scale(1.1);
}

.social-cosmic-ring {
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 50%;
  border: 1.5px solid currentColor; /* Thinner */
  opacity: 0;
  transition: opacity 0.3s ease;
}

.social-link-cosmic:hover .social-cosmic-ring {
  opacity: 0.4; /* More subtle */
}

.footer-bottom {
  border-top: 1px solid rgba(74, 144, 226, 0.2); /* More subtle border */
  padding-top: 28px; /* Adjusted padding */
  position: relative;
  z-index: 1;
}

.footer-bottom-content {
  text-align: center;
}

.footer-bottom p {
  color: rgba(227, 242, 253, 0.55); /* Adjusted opacity */
  margin-bottom: 10px; /* Adjusted margin */
  font-size: 13px; /* Adjusted size */
}

.disclaimer {
  font-size: 11.5px; /* Adjusted size */
  color: rgba(227, 242, 253, 0.45); /* Adjusted opacity */
  font-style: italic;
}


/* ===== ANIMATIONS ===== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(25px); /* Reduced distance */
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 1024px) {
  .hero-stats {
    gap: 20px; /* Adjusted gap */
  }

  .hero-social {
    right: 24px; /* Adjusted position */
  }

  .about-content {
    gap: 50px; /* Adjusted gap */
  }

  .contact-content {
    gap: 50px; /* Adjusted gap */
  }

  .courses-grid-cosmic {
    grid-template-columns: 1fr;
  }

  .logo-text {
    /* display: block; */ /* Already flex column, should be fine */
  }

  .logo-sacred-circle {
    width: 55px; /* Adjusted size */
    height: 55px; /* Adjusted size */
  }

  .logo-img {
    width: 35px; /* Adjusted size */
    height: 35px; /* Adjusted size */
  }

  .logo-main {
    font-size: 18px; /* Adjusted size */
  }
  .logo-sub {
    font-size: 10px;
  }
  .nav-menu {
    gap: 20px;
  }
  .nav-menu a {
    font-size: 13px;
    padding: 8px 10px;
  }
}

@media (max-width: 768px) {
  .hamburger {
    display: flex;
  }

  .nav-menu {
    position: fixed;
    left: -100%;
    /* Header height: logo circle (50px) + navbar padding (10px*2) = ~70px. */
    top: 70px; /* Adjusted based on new header height for mobile */
    flex-direction: column;
    background: rgba(10, 14, 26, 0.98);
    backdrop-filter: blur(18px);
    width: 100%;
    text-align: center;
    transition: left 0.3s ease-in-out; /* Added left transition */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25); /* Softer shadow */
    padding: 28px 0; /* Adjusted padding */
    gap: 20px; /* Adjusted gap */
    border-top: 1px solid rgba(74, 144, 226, 0.25);
  }

  .nav-menu.active {
    left: 0;
  }
  
  .navbar {
    padding: 10px 0; /* Further reduce padding for mobile header */
  }
  .nav-container {
    padding: 0 20px; /* Adjust container padding for mobile */
  }

  .logo-text {
    display: none; /* Keep logo text hidden on small screens for simplicity */
  }

  .logo-sacred-circle {
    width: 50px; /* Adjusted size for mobile */
    height: 50px; /* Adjusted size for mobile */
  }

  .logo-img {
    width: 30px; /* Adjusted size for mobile */
    height: 30px; /* Adjusted size for mobile */
  }

  .hero-title {
    font-size: 2.5rem; /* Adjusted size */
  }

  .hero-subtitle {
    font-size: 1.15rem; /* Adjusted size */
  }

  .hero-stats {
    flex-direction: column;
    gap: 18px; /* Adjusted gap */
  }

  .hero-buttons {
    flex-direction: column;
    align-items: center;
    gap: 14px; /* Adjusted gap */
  }

  .hero-social {
    display: none;
  }

  .about-content {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 32px; /* Adjusted gap */
  }

  .contact-content {
    grid-template-columns: 1fr;
    gap: 32px; /* Adjusted gap */
  }

  .pricing-grid-two,
  .pricing-grid-three {
    grid-template-columns: 1fr;
  }

  .process-steps-cosmic {
    flex-direction: column;
    gap: 28px; /* Adjusted gap */
  }

  .step-connector {
    display: none;
  }

  .session-pricing-cosmic {
    grid-template-columns: 1fr;
  }

  .cart-sidebar {
    width: 100%;
    right: -100%; /* Ensure it's off-screen */
  }

  .whatsapp-float {
    width: 55px; /* Adjusted size */
    height: 55px; /* Adjusted size */
    bottom: 20px; /* Adjusted position */
    right: 20px; /* Adjusted position */
  }

  .whatsapp-float a {
    font-size: 26px; /* Adjusted size */
  }

  .section-header h2 {
    font-size: 2.2rem; /* Adjusted size */
  }

  .pricing-title-cosmic {
    font-size: 1.8rem; /* Adjusted size */
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .footer-content {
    grid-template-columns: 1fr;
    gap: 32px; /* Adjusted gap */
    text-align: center;
  }
  .footer-logo-cosmic {
    justify-content: center;
  }
  .footer-social-cosmic {
    justify-content: center;
  }


  .about-actions {
    justify-content: center;
  }

  .courses-grid-cosmic {
    grid-template-columns: 1fr;
    gap: 32px; /* Adjusted gap */
  }

  .course-actions-mega {
    gap: 14px; /* Adjusted gap */
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 16px; /* Adjusted padding */
  }

  .hero-title {
    font-size: 2rem; /* Adjusted size */
  }

  .hero-subtitle {
    font-size: 1.05rem; /* Adjusted size */
  }

  .section-header h2 {
    font-size: 1.8rem; /* Adjusted size */
  }

  .about-name {
    font-size: 1.8rem; /* Adjusted size */
  }

  .pricing-title-cosmic {
    font-size: 1.6rem; /* Adjusted size */
  }

  .benefit-card-cosmic,
  .info-card-cosmic {
    padding: 28px 20px; /* Adjusted padding */
  }

  .session-info-content,
  .process-content {
    padding: 32px 20px; /* Adjusted padding */
  }

  .contact-form-cosmic {
    padding: 28px 20px; /* Adjusted padding */
  }

  .course-body {
    padding: 28px 20px; /* Adjusted padding */
  }

  .courses-grid-cosmic {
    grid-template-columns: 1fr;
    gap: 28px; /* Adjusted gap */
  }

  .course-header {
    padding: 28px 20px 20px; /* Adjusted padding */
  }

  .course-header h3 {
    font-size: 1.6rem; /* Adjusted size */
  }

  .course-tagline {
    font-size: 1rem; /* Adjusted size */
  }

  .price-mega-cosmic {
    font-size: 2.8rem; /* Adjusted size */
  }

  .btn-mega-cosmic {
    padding: 16px 28px; /* Adjusted padding */
    font-size: 1rem; /* Adjusted size */
  }
}

/* ===== ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.btn:focus-visible, /* Use focus-visible for better accessibility */
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible,
button:focus-visible {
  outline: 2.5px solid #82aaff; /* More visible focus outline */
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(74, 144, 226, 0.2); /* Optional: add a softer glow */
}


@media (prefers-contrast: high) {
  .btn-primary-cosmic {
    background: #000;
    border: 2px solid #fff;
    color: #fff;
  }

  .btn-secondary-cosmic {
    background: #fff;
    color: #000;
    border: 2px solid #000;
  }
  .highlight-cosmic {
    background: yellow; /* High contrast for text */
    color: black;
    -webkit-text-fill-color: black;
  }
  .highlight-cosmic::after {
    background: yellow;
  }
  .golden-text {
    color: yellow;
  }
}

/* ===== UTILITY CLASSES ===== */
.text-center {
  text-align: center;
}

.mb-0 {
  margin-bottom: 0;
}

.mt-2 {
  margin-top: 32px;
}

.hidden {
  display: none;
}

.loading {
  opacity: 0.6;
  pointer-events: none;
}