@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Montserrat:wght@600;700&display=swap");

* {
  font-family: "Poppins", sans-serif;
}

/* ===== COLOR PALETTE ===== */
:root {
  --primary: #a068e6;
  --primary-hover: #4d0aa4;
  --heading: #4f459c;
  --text: #252121;
  --text-light: #7a7a7a;
  --bg-light: #f1f2f3;
  --bg-white: #ffffff;
  --accent-red: #e20e0e;
  --accent-green: #2ea339;
  --accent-blue: #3c2bc5;
}

/* ===== REUSABLE UTILITY CLASSES ===== */
.text-shadow-md {
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.98);
}

.text-shadow-light {
  text-shadow: 0px 0px 10px #000000;
}

/* ===== GRADIENT UTILITIES ===== */
.gradient-header {
  background: linear-gradient(90deg, #ad77ff 0%, #4d0aa4 100%);
}

.gradient-bg {
  background: linear-gradient(180deg, #ffffff 0%, #e2e2e2 100%);
}

.gradient-btn {
  background: linear-gradient(122deg, #561d9e 0%, #ac92cf 100%);
}

.gradient-btn:hover {
  background: linear-gradient(122deg, #6303d7 0%, #9e77d2 100%);
}

/* ===== HERO SECTIONS ===== */
.hero-bg {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("images_zenclassigroup/02/room-home-the-interior.jpg");
  background-size: cover;
  background-position: center;
}

.hero-bg-about-us {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("images_zenclassigroup/02/zen-home-slide1.jpg");
  background-size: cover;
  background-position: center;
}

/* ===== FOOTER ===== */
.footer-bg {
  background: #f1f2f3;
}

/* ===== NAVIGATION ===== */
.nav-dot::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 100px;
  background-color: #a068e6;
  position: absolute;
  bottom: -9px;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.nav-item:hover .nav-dot::after,
.nav-item.active .nav-dot::after {
  opacity: 1;
}

/* ===== CARD SHADOWS ===== */
.card-shadow {
  box-shadow: 15px 0px 30px -10px #b4adad;
}

/* ===== ANIMATIONS ===== */
.animate-bounce-slow {
  animation: bounce 3s infinite;
}

@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

/* ===== WAVE DIVIDER ===== */
.wave-bottom {
  position: relative;
}

.wave-bottom::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 85px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 283.5 27.8' preserveAspectRatio='none'%3E%3Cpath fill='%23F1F2F3' d='M283.5,9.7c0,0-7.3,4.3-14,4.6c-6.8,0.3-12.6,0-20.9-1.5c-11.3-2-33.1-10.1-44.7-5.7s-12.1,4.6-18,7.4c-6.6,3.2-20,9.6-36.6,9.3C131.6,23.5,99.5,7.2,86.3,8c-1.4,0.1-6.6,0.8-10.5,2c-3.8,1.2-9.4,3.8-17,4.7c-3.2,0.4-8.3,1.1-14.2,0.9c-1.5-0.1-6.3-0.4-12-1.6c-5.7-1.2-11-3.1-15.8-3.7C6.5,9.2,0,10.8,0,10.8V0h283.5V9.7z'/%3E%3C/svg%3E")
    no-repeat;
  background-size: 125% 100%;
}

/* ===== IMAGE UTILITIES ===== */
img {
  height: auto;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 640px) {
  .hero-bg {
    min-height: auto;
    height: 60vh;
  }
}

/* ===== CONTACT CARDS ===== */
.contact-card {
  transition: all 300ms ease;
  background: white;
}

.contact-card:hover {
  background: linear-gradient(90deg, #6b21a8 0%, #8152a8 100%);
}

.contact-card:hover h3,
.contact-card:hover p,
.contact-card:hover a {
  color: white;
}

.contact-card:hover svg {
  stroke: white;
}

.contact-card svg stop {
  transition: stop-color 300ms ease;
}

.contact-card:hover svg stop.stop1 {
  stop-color: white;
}

.contact-card:hover svg stop.stop2 {
  stop-color: white;
}