@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Plus Jakarta Sans", sans-serif;
}

/* Dark Blue rgb(0,25,76)
    Primary Blue rgb(0,85,255)



*/

.nav-section,
.hero-section-wrapper {
  position: relative; /* Important for layering */
  background-color: rgb(244, 244, 244);
  overflow: hidden; /* keeps elements contained */
  z-index: 0; /* base layer */
}

.upper-nav-wrapper {
  background-color: rgb(0, 25, 76);
}

span {
  font-weight: 500;
  font-size: 14px;
  background-color: rgb(0, 25, 76);
  color: rgb(255, 250, 250);
}

.social-icons i {
  color: rgb(255, 255, 255);
}

.free-consulatnt {
  font-size: small;
  text-decoration: none;
}

.nav-item a {
  font-weight: 600;
  font-size: 15px;
  color: #0b035c;
}

.hotline i {
  background-color: rgb(0, 85, 255);
  padding: 10px 15px;
  border-radius: 50%;
  color: white;
}

#branchAddress {
  display: inline-block;
  transition: opacity 0.8s ease;
  white-space: nowrap;
}

@keyframes ring {
  0% {
    transform: rotate(0);
  }
  10% {
    transform: rotate(15deg);
  }
  20% {
    transform: rotate(-10deg);
  }
  30% {
    transform: rotate(15deg);
  }
  40% {
    transform: rotate(-10deg);
  }
  50% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(0);
  }
}

.ringing {
  animation: ring 1s infinite;
  transform-origin: center;
  color: #28a745;
}

/* Hero */

.sub-header {
  font-size: small;
  font-weight: 600;
  background-color: rgb(230, 238, 255);
  padding: 5px 15px;
  color: rgb(0, 85, 255);
  border-radius: 15px;
  display: inline;
}

.main-header {
  font-weight: 900;
  font-size: 6vh;
  color: #0b035c;
}

.header-para {
  font-weight: 600;
  color: #3b3b3b;
}

.our-services-btn-wrapper {
  background-color: rgb(0, 85, 255);
  display: inline;
  padding: 15px 38px;
  border-radius: 29px;
}

.our-services-btn-wrapper a {
  font-size: small;
  font-weight: 600;
  text-decoration: none;
  color: white;
}

.bg-dots img {
  position: absolute;
  top: 50%;
  left: 50%;
  animation: flow 6s ease-in-out infinite;
  z-index: 1;
}

@keyframes flow {
  0% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-10px);
  }
  50% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(0);
  }
}

.bg-arrow {
  position: absolute;
  top: 20%;
  left: 50%;
  animation: flow_1 6s ease-in-out infinite;
  z-index: 0;
  opacity: 50%;
}

@keyframes flow_1 {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-20px);
  }
  50% {
    transform: translateX(0);
  }
  75% {
    transform: translateX(10px);
  }
  100% {
    transform: translateX(0);
  }
}
#hero-img {
  position: relative;
  z-index: 2; /* ensure hero content stays above circle */
}

.bg-circle {
  position: absolute;
  z-index: -1; /* middle layer */
  bottom: -350px;
  left: -20%;
  width: 550px;
  opacity: 0.8;
}

#hero-img .bg-circle img {
  width: 100%;
  height: auto;
}

.hero-img img {
  position: relative;
  z-index: 3 !important; /* top layer — above the circle */
  right: 100px !important;
}

.service-card-img {
  background-color: rgb(230, 238, 255);
  padding: 15px 22px;
  border-radius: 50%;
}

.service-card-img i {
  color: #006eff;
}

.service-card-wrapper:hover .service-card-img i {
  translate: 360deg;
}

.service-card-content .header h5 {
  font-weight: 500;
  color: #050505;
}

.service-card-content .description p {
  font-weight: 500;
  color: #555151;
}

.get-to-know-img-wrapper {
  position: relative;
}

.get-to-know-img-2 img {
  position: absolute;
  bottom: -80px;
  right: -100px;
  border-top-right-radius: 50px;
  border: 10px solid white;
  z-index: 55;
}

.get-to-know-img-1 img {
  border-top-left-radius: 150px;
}

.get-to-know-content-wrapper {
  background-color: #006eff;
  color: white;
  position: relative;
  margin-left: -50px;
  border-bottom-left-radius: 45px;
  margin-top: -50px;
}

.get-to-know-content h1 {
  font-weight: 600;
}

.get-to-know-para p {
  font-weight: 600;
}

.get-to-know-content {
  border-right: 5px solid white !important;
}