body {
  margin: 0;
  padding: 0;
}


.navbar {
    max-height: 60px; 
}


.navbar .logo {
    max-height: 80px; 
    width: 100px;       
}



.custom-btn {
  background: transparent !important;
  border: 0.5px solid #a10c8d;
  color: #141414;
  /* background: #640650 !important; */
  font-weight: bold;
}
.custom-btn:hover {
  background: #640650 !important;
  color: #f5f1f1;
}

/* .gradient-text {
  font-weight: bold;
  font-size: 20px;
  background: linear-gradient(90deg, #e222e2, #640364, #750c75, #e222e2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
} */


.hero-section {
  position: relative;
  height: 100vh;
  z-index: 1;
}

.hero-section {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.hero-bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  
}

.hero-section .container {
  position: relative;
  z-index: 5;
}

.soft-btn {
    padding: 16px 32px;
    border: none;
    background: #723681;
    color: #faf4f4;
    border-radius: 16px;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: 0.3s ease;
}

.soft-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.18);
}



/* THIS makes text + buttons visible above blur */
.hero-section .container,
.hero-section h1,
.hero-section p,
.hero-section a {
  position: relative;
  z-index: 5;
}

.typewriter {
  display: inline-block;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid #8da8f5ff;
  font-weight: bold;
  animation: typing 5s steps(80, end), blink .7s step-end infinite;
}

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

@keyframes blink {
  from, to { border-color: transparent }
  50% { border-color: #8da8f5ff; }
}

.heading-animate {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    transition: all 0.8s ease-out;
}

.heading-animate.show {
    opacity: 1;
    transform: translateY(0) scale(1);
}




.video-bg-section {
  position: relative;
  height: 80vh;
}

.bg-video {
  position: absolute;
  width: 100%;
  height: 80vh;
  object-fit: cover;
  top: 0;
  left: 0;
}

.video-overlay {
  position: absolute;
  width: 100%;
  height: 80vh;
  background: rgba(0, 25, 40, 0.5);
  top: 0;
  left: 0;
}

.content-box {
  position: relative;
  z-index: 5;
  top: 35%;
  transform: translateY(-50%);
}

/* .about-card-floating {
  position: absolute;
  right: 8%;
  top: 70vh;
  background: rgba(241, 235, 235, 0.959);
  backdrop-filter: blur(12px);
  width: 320px;
  border-radius: 12px;
  z-index: 10;
  border: 4px solid rgba(139, 92, 246, 0.8);
  box-shadow: 0 8px 25px rgba(139, 92, 246, 0.5);
} */


@media (max-width: 768px) {
  .about-card-floating {
    position: relative;
    top: 0;
    right: 0;
    margin: 20px auto;
    width: 90%;
  }
}

.about-card-floating {
    background: rgba(128, 41, 185, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 20px;
    padding: 30px;
    width: 100%;
    margin: auto 0;
    color: #fff;
    box-shadow: 
        0 8px 20px rgba(0, 0, 0, 0.25),
        0 15px 40px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    
    transition: transform 0.2s ease-out;
}




/* Hover 3D Lift */
.about-card-floating:hover {
    transform: translateY(-10px) scale(1.03);
    box-shadow: 
        0 15px 35px rgba(0, 0, 0, 0.35),
        0 25px 60px rgba(0, 0, 0, 0.25);
}



.small-close-btn {
    width: 3px;
    height: 3px;
    padding: 0.15rem;
}

/* Circle service cards */
.service-card-circle {
    width: 120px;
    height: 120px;
    position: absolute;
    border-radius: 50%;
    background-color: #c46dcf;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    position: absolute;
    top: 50%;
    left: 50%;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.8s ease-out;
}

.service-card-circle:hover {
    transform: scale(1.1);
}

/* Desktop Circle Position */
.service-circle .service-card-circle:nth-child(1) { transform: rotate(0deg) translate(150px) rotate(0deg); }
.service-circle .service-card-circle:nth-child(2) { transform: rotate(60deg) translate(150px) rotate(-60deg); }
.service-circle .service-card-circle:nth-child(3) { transform: rotate(120deg) translate(150px) rotate(-120deg); }
.service-circle .service-card-circle:nth-child(4) { transform: rotate(180deg) translate(150px) rotate(-180deg); }
.service-circle .service-card-circle:nth-child(5) { transform: rotate(240deg) translate(150px) rotate(-240deg); }
.service-circle .service-card-circle:nth-child(6) { transform: rotate(300deg) translate(150px) rotate(-300deg); }

/* Animation */
.logo-center {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
    animation: logoFadeIn 1s forwards;
}

@keyframes logoFadeIn {
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.service-card-circle.show {
    opacity: 1;
    transform: scale(1);
}

/* 🔥 FULL MOBILE RESPONSIVENESS FIX */
@media (max-width: 768px) {

    .service-circle {
        width: 200px !important;
        height: 200px !important;
        top: 50%;
        left: 75%;
        transform: translate(-50%, -50%);
    }

    .service-card-circle {
        width: 80px !important;
        height: 80px !important;
    }

    .service-circle .service-card-circle:nth-child(1) { transform: rotate(0deg) translate(95px) rotate(0deg); }
    .service-circle .service-card-circle:nth-child(2) { transform: rotate(60deg) translate(95px) rotate(-60deg); }
    .service-circle .service-card-circle:nth-child(3) { transform: rotate(120deg) translate(95px) rotate(-120deg); }
    .service-circle .service-card-circle:nth-child(4) { transform: rotate(180deg) translate(95px) rotate(-180deg); }
    .service-circle .service-card-circle:nth-child(5) { transform: rotate(240deg) translate(95px) rotate(-240deg); }
    .service-circle .service-card-circle:nth-child(6) { transform: rotate(300deg) translate(95px) rotate(-300deg); }

    /* Text smaller */
    .service-card-circle h6 {
        font-size: 9px !important;
    }

    /* Center logo resize */
    .logo-center img {
        max-width: 90px !important;
    }
}



    

    





.icon-box {
    font-size: 20px;
    color: #8f158fff;
}

.small-title {
    font-size: 14px !important;
}

.swal2-popup.tiny-popup {
    font-size: 12px !important;
}


/* ----------------------------
      MOBILE RESPONSIVE
-----------------------------*/

@media (max-width: 768px) {

  .navbar-brand img {
      height: 45px;
  }

  .hero-section {
      height: 80vh;
  }

  .hero-section h1 {
      font-size: 26px;
      line-height: 1.3;
  }

  .typewriter {
      font-size: 8px;
      white-space: normal;
      border-right: none;
  }

  .soft-btn {
      padding: 10px 20px;
      font-size: 14px;
  }

  .d-flex.gap-4 {
      flex-direction: column;
      gap: 10px !important;
  }

}