* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body {
  color: #fff;
  line-height: 1.6;
}

/*  FIXED VIDEO BACKGROUND  */
.video-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}

.video-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(133, 37, 94, 0.85),
    rgba(33, 12, 116, 0.85)
  );
}

/* Get Started Button Ripple Setup */
.get-started-btn {
  position: relative;
  overflow: hidden;
}

/* Ripple Circle */
.get-started-btn .ripple {
  position: absolute;
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  transform: scale(0);
  animation: rippleEffect 0.6s linear;
  pointer-events: none;
}

@keyframes rippleEffect {
  to {
    transform: scale(12);
    opacity: 0;
  }
}

/*  PAGE CONTENT  */
.page-content {
  position: relative;
  z-index: 1;
}

/*  HEADER  */
.header {
  display: flex;
  justify-content: space-between;
  padding: 20px 10%;
  background: rgba(85, 3, 98, 0.85);
  position: sticky;
  top: 0;
  z-index: 100;
}

.logo {
  font-size: 24px;
  font-weight: bold;
}

.logo span {
  color: #c9c74a;
}

nav a {
  color: #fff;
  margin-left: 20px;
  text-decoration: none;
}

/* HERO */
.hero {
  min-height: 100vh;
  text-align: center;
  padding: 140px 20px;
}

.hero h1 {
  font-size: 42px;
}

.hero p {
  margin-top: 10px;
}

.hero button {
  margin-top: 20px;
  padding: 12px 30px;
  background: #c9a14a;
  border: none;
  border-radius: 30px;
  font-weight: bold;
  cursor: pointer;
}

/*  SECTIONS  */
.section {
  padding: 80px 10%;
}

.section h2 {
  text-align: center;
  margin-bottom: 40px;
  color: #c9a14a;
}

/* CARDS */
.cards {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.card {
   background: rgba(85, 3, 98, 0.85);
  padding: 25px;
  border-radius: 8px;
  flex: 1;
}

/* Fill Form Button */
.card a button {
  margin-top: 15px;
  padding: 12px 26px;
  background: #c9a14a;
  border: none;
  border-radius: 30px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.35s ease;
  position: relative;
  overflow: hidden;
}

/* Hover Effect */
.card a button:hover {
  background: #e0b75a;
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(201, 161, 74, 0.45);
}


.card button .ripple {
  position: absolute;
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  transform: scale(0);
  animation: rippleEffect 0.6s linear;
}

@keyframes rippleEffect {
  to {
    transform: scale(10);
    opacity: 0;
  }
}


/*  PROCESS & WHY  */
.process li,
.why li {
  margin-bottom: 15px;
}

/*  ABOUT  */
.about-text {
  max-width: 800px;
  margin: auto;
  text-align: center;
}

/*  CONTACT  */
.contact {
  text-align: center;
}

/*  FLOATING WHATSAPP & EMAIL  */
.contact-details {
  position: fixed;
  bottom: 30px;        
  right: 20px;
  z-index: 999;
  display: flex;
  gap: 15px;
}

.contact-btn {
  padding: 14px 28px;
  border-radius: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #fff;
  transition: 0.3s ease;
  display: inline-block;
}

/* WhatsApp */
.contact-btn.whatsapp {
  background: #25D366;
}

.contact-btn.whatsapp:hover {
  background: #1ebe5d;
}

/* Email */
.contact-btn.email {
  background: #c9a14a;
  color: #000;
}

.contact-btn.email:hover {
  background: #e0b75a;
}

/*  FOOTER  */
footer {
  text-align: center;
  padding: 20px;
  background: rgba(85, 3, 98, 0.85);
}

/*  MOBILE RESPONSIVE */
@media (max-width: 768px) {
  .hero h1 {
    font-size: 32px;
  }

  .contact-details {
    bottom: 20px;      
    right: 10px;
    flex-direction: column;
  }

  nav a {
    margin-left: 12px;
  }
}