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


@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');


@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');


body {
  font-family: "Plus Jakarta Sans", sans-serif;
}
a:hover{
  text-decoration: none; 
}
.ibm {
  font-family: "IBM Plex Serif", serif;

}

.dm {
  font-family: "DM Sans", sans-serif;
}

body{
  font-family: "DM Sans", sans-serif;

}
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
  

/* All commitment boxes become sticky */
.main-project-box {
  position: sticky;
  margin-bottom: 200px; /* control spacing before next one */
}

/* Stacking & positions */
.main-project-box.card-1 { top: 0; transform: scale(0.9); z-index: 10; }
.main-project-box.card-2 { top: 30px;transform: scale(0.95); z-index: 20; }
.main-project-box.card-3 { top: 60px;transform: scale(1); z-index: 30; }
 

 

.hero-bg {
  position: relative;
  background-image: url('../images/main_bg.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}


.hero-bg-new {
  position: relative;
  background-image: url('../images/light_blue.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.milestone_sec {
  background-image: url('../images/red_bg.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

 .swiper-wrapper {
    transition-timing-function: linear !important; /* Makes it perfectly smooth */
  }

#mobile-menu {
  transform-origin: top;
}

.logo {
  border-radius: 0 0 24px 24px;
}
.input_box{
  
}


.main_serve_box {
  background: linear-gradient(301.47deg, rgba(255, 255, 255, 0) 0%, rgba(69, 133, 144, 0.32) 97.56%);

}

.testimonial_section {
  background: radial-gradient(50% 50% at 50% 50%, #154573 0%, #051D35 100%),
    radial-gradient(50% 50% at 50% 50%, #0A1F44 0%, #112D5A 100%);

}  

.left-top-shape{
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  z-index: 99;
  opacity: 0.28;
}

.left-top-shape .round-shape{
  position: absolute;
  border-radius: 50%;
  animation: expandPulse 4s infinite ease-in-out;
  transform-origin: center;
}

/* INDIVIDUAL SIZES + OFFSET */
.left-top-shape .first  { height:100px; width:100px;  left:-50px;  top:-50px;  background:#fff;       animation-delay:0s; }
.left-top-shape .second { height:150px; width:150px;  left:-75px;  top:-75px;  background:#D0D0D0;  animation-delay:0.4s; }
.left-top-shape .third  { height:200px; width:200px;  left:-100px; top:-100px; background:#A0A0A0;  animation-delay:0.8s; }
.left-top-shape .forth  { height:250px; width:250px;  left:-125px; top:-125px; background:#717171;  animation-delay:1.2s; }
.left-top-shape .fifth  { height:300px; width:300px;  left:-150px; top:-150px; background:#414141;  animation-delay:1.6s; }

/* ANIMATION */
@keyframes expandPulse {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.25); /* increase size */
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0.5;
  }
}

.right-bottom-shape{
  position: absolute; 
  right: 0;
  z-index: 99;
  opacity: 0.28;
}

.right-bottom-shape .round-shape{
  position: absolute;
  border-radius: 50%;
  animation: expandPulse 4s infinite ease-in-out;
  transform-origin: center;
}
.right-bottom-shape .first{
    height: 100px;
    width: 100px;
    background-color: #fff;
    display: inline-block;
    border-radius: 50%;
    position: absolute;
    left: -50px;
    top: -50px; 
}
.right-bottom-shape .second{
    height: 150px;
    width: 150px;
    background-color: #D0D0D0;
    display: inline-block;
    border-radius: 50%;
    position: absolute;
    left: -75px;
    top: -75px; 
}
.right-bottom-shape .third{
    height: 200px;
    width: 200px;
    background-color: #A0A0A0;
    display: inline-block;
    border-radius: 50%;
    position: absolute;
    left: -100px;
    top: -100px; 
}
.right-bottom-shape .forth{ 
    height: 250px;
    width: 250px;
    background-color: #717171;
    display: inline-block;
    border-radius: 50%;
    position: absolute;
    left: -125px;
    top: -125px; 
} 
.right-bottom-shape .fifth{ 
    height: 300px;
    width: 300px;
    background-color: #414141;
    display: inline-block;
    border-radius: 50%;
    position: absolute;
    left: -150px;
    top: -150px;
}