* {
  margin: 0;
  padding: 0;
  font-family: "Orbitron", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  scrollbar-width: thin;
  /* Firefox */
  scrollbar-color: #888 #f1f1f1;
}


/* For Webkit-based browsers */
::-webkit-scrollbar {
  width: 8px;
  /* Adjust width of the scrollbar */
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  /* Track color */
}

::-webkit-scrollbar-thumb {
  background: #888;
  /* Thumb color */
  border-radius: 10px;
  /* Optional: rounded corners */
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
  /* Thumb hover color */
}

span{
  font-family: "Poppins", serif;

}
p {
  font-family: "Poppins", serif;
}

.the-main-nav {
  height: 79px;
  background-color: rgb(245, 245, 245);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  position: absolute;
  top: 0;
  width: 100%;
  transition: background-color 0.3s ease, top 0.3s ease; /* Smooth transitions for background and top */
}
.sticky{
  position: sticky !important;
  top: 0 !important;
  background-color: rgb(6, 54, 87) !important;
  z-index: 1000 !important;
  box-shadow: 2px 6px 19.5px -0.5px #3e3e3e3d;
}


.the-main-nav-ul {
  list-style: none;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  gap: 3rem;
  padding: 0 1rem !important;
  width: 50%;
  margin-bottom: 0;
}
.the-main-nav-ul li > a {
  text-decoration: none;
  color: rgb(255, 255, 255);
  z-index: 3;
  position: relative;
  font-size: 1rem;
  font-weight: 900;
}

.the-main-hd {
  background-color: rgb(255, 255, 255);
  width: 360px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(0% 0%, 100% 0%, 75% 100%, 25% 100%);
  z-index: 3;
  border-radius: 12% 12% 55% 55%;
  position: relative;
}
.bd-remover{
  border-radius: 0!important;
  background-color: rgba(255, 255, 255, 0.95);
}
.the-main-hd img {
  width: 150px;
  height: 60%;
  object-fit: contain;
}
.the-main-slider {
  height: 100vh;
  z-index: 2;
  position: relative;
  margin: 2px;
  border-radius: 10px;
}
.the-main-slider img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  /* border-radius: 0 0 2rem 2rem; */
  border-radius: 2rem;
}

.the-mainffade {
  margin-top: 0.25rem;
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}
.the-main-cc {
  height: 100vh !important;
}
.the-main-cc img {
  height: 100vh !important;
  /* animation: zoom-in 140s forwards; */
  transform-origin: center;
  border-radius: 10px !important;

}


@keyframes zoom-in {
  0% {
    transform: scale(1); /* Start at original size */
  }
  100% {
    transform: scale(1.5); /* Final zoom level */
  }
}
.the-main-cc .carousel-item {
  position: relative;
  border-radius: 10px;

}

.content-overlay {
  /* background-color: rgba(17, 17, 17, 0.83); */
  background-color: #23a7e2;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  border-radius: 10px;

  
}
.overlay-content {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;

}

.overlay-content h1 {
  position: absolute;
  text-align: center;
  margin: 0.85rem;
  left:3%;
}
.overlay-content h2 {
  position: absolute;
  bottom: 10%;
  text-align: center;
  margin: 0.85rem;
  left: 3%;
 
}

.overlay-content img {
  position: absolute;
  top: 2%;
  right:-4%;
  height: 100% !important;
  animation:   fadeup 1s ease-in forwards,         
  zoom-in-out 6s ease-in-out infinite; 
  animation-delay: 0s, 1s;

transform-origin: center;



}
@media screen and (max-width:1500px){
  .overlay-content img {
    right:-11%;
  }

}
@media screen and (max-width:992px){
  .overlay-content img{
    position: absolute;
  bottom: 2%;
  height: 75% !important;
  top:unset;
  }
  
}
@media screen and (max-width:550px){
  .overlay-content img{
    position: absolute;
  bottom: 2%;
  height: 60% !important;
  top:unset;
  right:unset;
  }
  
}

@keyframes fadeup {
  0% {
    opacity: 0;
    transform: translateY(150px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}


@keyframes zoom-in-out {
  0%, 100% {
    transform: scale(1); /* Start and end at normal size */
  }
  50% {
    transform: scale(1.05); /* Slightly zoomed in */
  }
}


.overlay-content h1 {
  font-size: 19rem;
  /* font-size: clamp(5rem, 4.7724rem + 1.1382vw, 19rem);    */
  
  font-weight: 900;
  /* color: #ffffffea; */
  color:#063657;
  animation: faderight 0.98s ease-in forwards;
  animation-delay: 1s; /* Starts after 1s delay (after image fades in) */
  opacity: 0; /* Initially hide text */
  font-family: "Luckiest Guy", cursive;
  font-weight: 400;
  text-shadow: 3px 5px 1px rgba(55,55,55,0.57);
}
@media screen and (max-width:1645px){
  .overlay-content h1{
    font-size: 16rem;
  }

}
@media screen and (max-width:1500px){
  .overlay-content h1{
    font-size: 14rem;
  }

}
@media screen and (max-width:1350px){
  .overlay-content h1{
    font-size: 12rem;
  }

}

@media screen and (max-width:1070px){
  .overlay-content h1{
    font-size: 12rem;
  }
  
}
@media screen and (max-width:992px){
  .overlay-content h1{
    font-size: 10rem;
    top:8%;
  }
  
}

@media screen and (max-width:674px){
  .overlay-content h1{
    font-size: 8rem;
    top:15%;

  }
}

@media screen and (max-width:510px){
  .overlay-content h1{
    font-size: clamp(5rem, -0.0526rem + 25.2632vw, 8rem);
    left:unset;

  }
}





.overlay-content .mb-txt {
  font-size: 15rem ;
  /* font-size: clamp(5rem, 4.7724rem + 1.1382vw, 19rem);    */
  
  font-weight: 900;
  /* color: #ffffffea; */
  color:#063657;
  animation: faderight 0.98s ease-in forwards;
  animation-delay: 1s; /* Starts after 1s delay (after image fades in) */
  opacity: 0; /* Initially hide text */
  font-family: "Luckiest Guy", cursive;
  font-weight: 400;
  text-shadow: 3px 5px 1px rgba(55,55,55,0.57);
  text-wrap: nowrap;
}
@media screen and (max-width:1645px){
  .overlay-content .mb-txt{
    font-size: 12rem;
  }

}
@media screen and (max-width:1500px){
  .overlay-content .mb-txt{
    font-size: 10rem;
  }

}

@media screen and (max-width:1350px){
  .overlay-content .mb-txt{
    font-size: 8rem;
  }

}

@media screen and (max-width:1045px){
  .overlay-content .mb-txt{
    font-size: 9rem;
  }
  
}
@media screen and (max-width:992px){
  .overlay-content .mb-txt{
    font-size: 7rem;
    top:8%;
  }
  
}

@media screen and (max-width:674px){
  .overlay-content .mb-txt{
    font-size: 6rem;
    top:15%;

  }
}

@media screen and (max-width:554px){
  .overlay-content .mb-txt{
    font-size: clamp(3.45rem, -0.0372rem + 17.4359vw, 6rem);    
  }
}


.overlay-content .mb-txtd {
  font-size: 12rem;
  /* font-size: clamp(3rem, 2.8537rem + 0.7317vw, 12rem); */
 
  font-weight: 900;
  color: #ffffffea;
  animation: fadeleft 1s ease-in forwards;
  animation-delay: 2s; /* Starts after h1 fades in */
  opacity: 0; /* Initially hide text */
  font-family: "Luckiest Guy", cursive;
  font-weight: 400;
  text-shadow: 3px 5px 1px rgba(55,55,55,0.57);
}


@media screen and (max-width:1727px){
  .overlay-content .mb-txtd{
    font-size: 10rem;
  }

}
@media screen and (max-width:1500px){
  .overlay-content .mb-txtd{
    font-size: 8rem;
    bottom: 22%;
  }

}
@media screen and (max-width:1350px){
  .overlay-content .mb-txtd{
    font-size: 7rem;
   

  }

}


@media screen and (max-width:1045px){
  .overlay-content .mb-txtd{
    font-size: 8rem;
    bottom: 15%;
  }
  
}


@media screen and (max-width:992px){
  .overlay-content .mb-txtd{
    font-size: 6rem;
    top: 18%;
    bottom: unset;
  }
  
}

@media screen and (max-width:674px){
  .overlay-content .mb-txtd{
    font-size: 4.45rem;
    top: 23%;
   
  }
  
}

@media screen and (max-width:674px){
  .overlay-content .mb-txtd{
    font-size: 3.80rem;
   
  }
  
}
@media screen and (max-width:510px){
  .overlay-content .mb-txtd{
    font-size: clamp(3rem, 1.6526rem + 6.7368vw, 3.8rem);

  }
}





.overlay-content h2 {
  font-size: 12rem;
  /* font-size: clamp(3rem, 2.8537rem + 0.7317vw, 12rem); */
 
  font-weight: 900;
  color: #ffffffea;
  animation: fadeleft 1s ease-in forwards;
  animation-delay: 2s; /* Starts after h1 fades in */
  opacity: 0; /* Initially hide text */
  font-family: "Luckiest Guy", cursive;
  font-weight: 400;
  text-shadow: 3px 5px 1px rgba(55,55,55,0.57);
}
@media screen and (max-width:1727px){
  .overlay-content h2 {
    font-size: 10rem;
  }
  
}

@media screen and (max-width:1500px){
  .overlay-content h2{
    font-size: 8rem;
    bottom: 22%;
  }
  
}
@media screen and (max-width:1350px){
  .overlay-content h2{
    font-size: 7rem;
 
  }

}

@media screen and (max-width:1070px){
  .overlay-content h2{
    font-size: 6rem;
  
  }
  
}


@media screen and (max-width:992px){
  .overlay-content h2{
    font-size: 6rem;
    top: 22%;
    bottom: unset;
  }
  
}

@media screen and (max-width:674px){
  .overlay-content h2{
    font-size: 4.45rem;
    top: 28%;
   
  }
  
}

@media screen and (max-width:674px){
  .overlay-content h2{
    font-size: 3.80rem;
   
  }
  
}
@media screen and (max-width:510px){
  .overlay-content h2{
    font-size: clamp(3rem, 1.6526rem + 6.7368vw, 3.8rem);

  }
}





.content-overlay h4 {
  font-size: clamp(1rem, 0.8235rem + 0.9412vw, 2rem);
  font-weight: 600;
  color: white;
}

@keyframes faderight {
  0% {
    opacity: 0;
    transform: translateX(50px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeup {
  0% {
    opacity: 0;
    transform: translateY(150px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeleft {
  0% {
    opacity: 0;
    transform: translateX(-50px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.thmobile {
  display: none;
}

.bt-toggdd{
   border:none;
   display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  background-color: #31b2ec;
  padding: 10px;
  border-radius: 6px;

}
.bt-toggdd span{
  height: 3px;
  width: 43px;
  border-radius: 2px;
  background-color: white;
  margin: 2px;
}


.mob-diff{
  border: none;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  background-color: #1e1e1e;
  padding: 10px;
  border-radius: 6px;
}


@media screen and (max-width: 992px) {
  .thmobile {
    display: flex;
    justify-content: end;
    align-items: center;
    padding: 1rem;
    height: 70px;
    width: 100%;
    position: absolute;
    top: 0;
    z-index: 999;
  }

  .content-overlay {
    border-radius: 0;

  }

  .overlay-content {
    border-radius: 0;
  }
  .the-main-nav {
    display: none;
  }
  .the-mainffade {
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

.h-aboutus {
  /* Keep your existing background */
  background-image: linear-gradient(
      22.5deg,
      rgba(66, 66, 66, 0.02) 0%,
      rgba(66, 66, 66, 0.02) 11%,
      rgba(135, 135, 135, 0.02) 11%,
      rgba(135, 135, 135, 0.02) 24%,
      rgba(29, 29, 29, 0.02) 24%,
      rgba(29, 29, 29, 0.02) 38%,
      rgba(15, 15, 15, 0.02) 38%,
      rgba(15, 15, 15, 0.02) 50%,
      rgba(180, 180, 180, 0.02) 50%,
      rgba(180, 180, 180, 0.02) 77%,
      rgba(205, 205, 205, 0.02) 77%,
      rgba(205, 205, 205, 0.02) 100%
    ),
    linear-gradient(
      67.5deg,
      rgba(10, 10, 10, 0.02) 0%,
      rgba(10, 10, 10, 0.02) 22%,
      rgba(52, 52, 52, 0.02) 22%,
      rgba(52, 52, 52, 0.02) 29%,
      rgba(203, 203, 203, 0.02) 29%,
      rgba(203, 203, 203, 0.02) 30%,
      rgba(69, 69, 69, 0.02) 30%,
      rgba(69, 69, 69, 0.02) 75%,
      rgba(231, 231, 231, 0.02) 75%,
      rgba(231, 231, 231, 0.02) 95%,
      rgba(138, 138, 138, 0.02) 95%,
      rgba(138, 138, 138, 0.02) 100%
    ),
    linear-gradient(
      112.5deg,
      rgba(221, 221, 221, 0.02) 0%,
      rgba(221, 221, 221, 0.02) 17%,
      rgba(190, 190, 190, 0.02) 17%,
      rgba(190, 190, 190, 0.02) 39%,
      rgba(186, 186, 186, 0.02) 39%,
      rgba(186, 186, 186, 0.02) 66%,
      rgba(191, 191, 191, 0.02) 66%,
      rgba(191, 191, 191, 0.02) 68%,
      rgba(16, 16, 16, 0.02) 68%,
      rgba(16, 16, 16, 0.02) 70%,
      rgba(94, 94, 94, 0.02) 70%,
      rgba(94, 94, 94, 0.02) 100%
    ),
    linear-gradient(90deg, #ffffff, #ffffff);
  position: relative;
  overflow: hidden;
}

.inside-the-div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  justify-content: center;
  gap: 4rem;
  padding: 5rem 2rem;
  max-width: 1400px;
  margin: 0 auto;
}

@media screen and (max-width:992px){
  .inside-the-div {
     grid-template-columns: auto;
  }
}

.image-ah {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
  align-items: center;
}

.img-1 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  border-radius: 50% 20% / 10% 40%;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.aboutus-cont {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 3rem 0;
  text-align: left;
  position: relative;
}

.aboutus-cont h1 {
  position: relative;
  font-size: 2.5rem;
  margin-bottom: 2rem;
  color: #1a3453;
  font-weight: 700;
}

.aboutus-cont h1::before {
  background-color: #1a3453;
  content: "";
  display: block;
  height: 3px;
  width: 75px;
  margin-bottom: 5px;
  transition: width 0.3s ease;
}

.aboutus-cont h1::after {
  background-color: #1a3453;
  content: "";
  display: block;
  position: absolute;
  right: 0;
  bottom: -14px;
  height: 3px;
  width: 75px;
  margin-bottom: 0.25em;
  transition: width 0.3s ease;
}

.aboutus-cont:hover h1::before,
.aboutus-cont:hover h1::after {
  width: 100px;
}

.aboutus-cont p {
  line-height: 1.8;
  font-size: 1.25rem;
  font-family: "Poppins", serif;
  color: #444;
  margin-top: 1rem;
  position: relative;
  padding-left: 1rem;
  border-left: 3px solid #1a345333;
}

/* Add responsive styles */
@media (max-width: 768px) {
  .inside-the-div {
    padding: 6rem 1rem;
    gap: 2rem;
  }

  .aboutus-cont h1 {
    font-size: 2rem;
  }

  .aboutus-cont p {
    font-size: 1.1rem;
    line-height: 1.6;
  }
}

/* Optional: Add animation on scroll */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.image-ah,
.aboutus-cont {
  animation: fadeInUp 0.6s ease-out forwards;
}

.aboutus-cont {
  animation-delay: 0.2s;
}

.cube-container {
  width: 100px;
  height: 100px;
  perspective: 400px;
  margin: 50px auto;
  position: absolute;
  top: 2%;
  right: 14%;
  z-index: 2;
}

@media screen and (max-width:650px){

  .cube-container {
   
    bottom: -5%;
    left: 0%;
    top: unset;
    right: unset;
   
  }
}

.cube {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: rotate 15s infinite linear;
}

.face {
  position: absolute;
  width: 100px;
  height: 100px;
  color: rgb(21, 153, 214);
  font-size: 14px;
  text-align: center;
  line-height: 100px;
  background: transparent;
  opacity: 0.9;
  border: 2px solid;
  border-image: linear-gradient(
    90deg,
    rgba(14, 8, 110, 1) 0%,
    rgba(15, 15, 167, 1) 26%,
    rgba(20, 45, 255, 1) 85%
  );
  box-shadow: 0 0 50px rgba(8, 178, 245, 0.61); /* Reduced shadow size */
}

.front {
  transform: translateZ(50px); /* Half the new size */
  background-image: linear-gradient(160deg, #0093e9 0%, #80d0c7 100%);
}

.back {
  transform: rotateY(180deg) translateZ(50px); /* Adjust depth */
  background-image: linear-gradient(160deg, #0093e9 0%, #80d0c7 100%);
}

.right {
  transform: rotateY(90deg) translateZ(50px);
  background-image: linear-gradient(160deg, #0093e9 0%, #80d0c7 100%);
}

.left {
  transform: rotateY(-90deg) translateZ(50px);
  background-image: linear-gradient(160deg, #0093e9 0%, #80d0c7 100%);
}

.top {
  transform: rotateX(90deg) translateZ(50px);
  background-image: linear-gradient(160deg, #0093e9 0%, #80d0c7 100%);
}

.bottom {
  transform: rotateX(-90deg) translateZ(50px);
  background-image: linear-gradient(160deg, #0093e9 0%, #80d0c7 100%);
}

/* .cube-container:hover .cube {
  animation-play-state: paused;
} */

@keyframes rotate {
  0% {
    transform: rotateX(0) rotateY(0) rotateZ(0);
  }
  100% {
    transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
  }
}

/* Medium Cube */

.mediumcube {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: Yrotate 10s infinite linear;
}




.cube-container.medium {
  width: 50px;
  height: 50px;
  perspective: 200px;
  position: absolute;
  top: 0;
  right: 2%;
}
@media screen and (max-width:650px){

  .cube-container.medium  {
   
    bottom: -5%;
    left: 0%;
    right:unset;
   
  }
}
.medium .face {
  width: 50px;
  height: 50px;
  line-height: 50px;
  position: absolute;
  top: 0;
  right: 2%;
}
.medium .front {
  transform: translateZ(25px);
}
.medium .back {
  transform: rotateY(180deg) translateZ(25px);
}
.medium .right {
  transform: rotateY(90deg) translateZ(25px);
}
.medium .left {
  transform: rotateY(-90deg) translateZ(25px);
}
.medium .top {
  transform: rotateX(90deg) translateZ(25px);
}
.medium .bottom {
  transform: rotateX(-90deg) translateZ(25px);
}

@keyframes Yrotate {
  0% {
    transform: rotateX(0) rotateY(0) rotateZ(0);
  }
  100% {
    transform: rotateX(-360deg) rotateY(360deg) rotateZ(0); /* Counter-clockwise rotation on X */
  }
}

.smallcube {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: zrotate 10s infinite linear;
}

.cube-container.small {
  width: 30px;
  height: 30px;
  perspective: 120px;

  position: absolute;
  top: 25%;
  right: 1%;
}


@media screen and (max-width:650px){

  .cube-container.small {
   
    top: 37%;
    right: 5%;
    bottom: unset;
    left: unset;
   
  }
}
.small .face {
  width: 30px;
  height: 30px;
  line-height: 30px;
}
.small .front {
  transform: translateZ(15px);
}
.small .back {
  transform: rotateY(180deg) translateZ(15px);
}
.small .right {
  transform: rotateY(90deg) translateZ(15px);
}
.small .left {
  transform: rotateY(-90deg) translateZ(15px);
}
.small .top {
  transform: rotateX(90deg) translateZ(15px);
}
.small .bottom {
  transform: rotateX(-90deg) translateZ(15px);
}

@keyframes zrotate {
  0% {
    transform: rotateX(0) rotateY(0) rotateZ(0);
  }
  100% {
    transform: rotateX(360deg) rotateY(-360deg) rotateZ(180deg); /* Rotates on X, Y, and Z axes */
  }
}

.services-wdo {
  background-color: #eff2f7;
}

.nserv {
  padding: 3rem 1rem 5rem 1rem;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 3rem;
  flex-wrap: wrap;
}

.services-wdo h2 {
  padding-top: 5rem;
  font-size: 2.5rem;
  margin-bottom: 2rem;
  color: #1a3453;
  font-weight: 700;
}

.indiserv img {
  width: 70px;
  height: 70px;
}
@media screen and (max-width:353px){
  .indiserv img {
    width: 50px;
    height: 50px;
  }
}
.indiserv {
  width: 23rem;
  padding: 1rem;
  background-color: white;
  position: relative;
  border-radius: 0rem 3rem;
  box-shadow: 20px 20px 60px #d2d2d2, -20px -20px 60px #ffffff;
  border-left: 6px solid #1a3453;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 350px;
}

.indiserv h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 25px;
  text-align: center;
  color: #1a3453;
}
.indiserv p{
  
  text-align: justify;

}
.indiserv {
  transition: transform 0.3s ease-in-out;
}

.indiserv:hover {
  transform: scale(1.045);
}
.stack{
  background: #010e20;
  position: relative;
}
.nstack {
  padding: 7rem 1rem;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.tstack {
  padding: 1rem;
  border-radius: 10px;
  margin: 1rem 1rem;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background: rgba(1, 14, 32, 0);
  -webkit-box-shadow: 1px 2.5px 12.5px 1px #2c3c7b;
-moz-box-shadow: 1px 2.5px 12.5px 1px #2c3c7b;
box-shadow: 1px 2.5px 12.5px 1px #2c3c7b;
 
  backdrop-filter: blur( 4px );
  -webkit-backdrop-filter: blur( 4px );
  border-radius: 10px;
  border: 1px solid rgba(113, 136, 223, 0.18);
}
.tstack:hover{
  animation: heartbeat 1.5s ease-in; /* Heartbeat animation */


}

.tstack img {
  width: 110px !important;
}

@keyframes heartbeat {
  0% {
    box-shadow: 1px 2.5px 12.5px 1px #2c3c7b; /* Initial state */
  }
  25% {
    box-shadow: 2px 5px 20px 2px #2c3c7b; /* Larger shadow for pulsing effect */
  }
  50% {
    box-shadow: 1px 2.5px 12.5px 1px #2c3c7b; /* Back to initial state */
  }
  75% {
    box-shadow: 2px 5px 20px 2px #2c3c7b; /* Larger shadow again */
  }
  100% {
    box-shadow: 1px 2.5px 12.5px 1px #2c3c7b; /* Back to initial state */
  }
}

.parallax-container {
  position: relative;
  height: 600px;
  display: flex;
  justify-content: center;
  align-items: center;

  overflow: hidden;
}

.parallax-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100% !important;
  background-image: url("/static/images/para.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1;
  
}

.content {
  position: relative;
  z-index: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(17, 17, 17, 0.83);
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  flex-direction: column;

}

.content h2 {
  font-size: clamp(1.98rem, 1.7206rem + 1.3835vw, 3.45rem);
        font-weight: bold;
  margin-bottom: 1rem;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-wrap: wrap;
  color: white;

}


/*******************features************* */
.the-ftrs{
  position: relative !important;

}
.the-ftrs h2 {
  padding-top: 3rem;
 
}

.inside_ftrs {
  padding: 2rem 1rem;
  
}


.the-ftrs {
  background-image: linear-gradient(
      22.5deg,
      rgba(66, 66, 66, 0.02) 0%,
      rgba(66, 66, 66, 0.02) 11%,
      rgba(135, 135, 135, 0.02) 11%,
      rgba(135, 135, 135, 0.02) 24%,
      rgba(29, 29, 29, 0.02) 24%,
      rgba(29, 29, 29, 0.02) 38%,
      rgba(15, 15, 15, 0.02) 38%,
      rgba(15, 15, 15, 0.02) 50%,
      rgba(180, 180, 180, 0.02) 50%,
      rgba(180, 180, 180, 0.02) 77%,
      rgba(205, 205, 205, 0.02) 77%,
      rgba(205, 205, 205, 0.02) 100%
    ),
    linear-gradient(
      67.5deg,
      rgba(10, 10, 10, 0.02) 0%,
      rgba(10, 10, 10, 0.02) 22%,
      rgba(52, 52, 52, 0.02) 22%,
      rgba(52, 52, 52, 0.02) 29%,
      rgba(203, 203, 203, 0.02) 29%,
      rgba(203, 203, 203, 0.02) 30%,
      rgba(69, 69, 69, 0.02) 30%,
      rgba(69, 69, 69, 0.02) 75%,
      rgba(231, 231, 231, 0.02) 75%,
      rgba(231, 231, 231, 0.02) 95%,
      rgba(138, 138, 138, 0.02) 95%,
      rgba(138, 138, 138, 0.02) 100%
    ),
    linear-gradient(
      112.5deg,
      rgba(221, 221, 221, 0.02) 0%,
      rgba(221, 221, 221, 0.02) 17%,
      rgba(190, 190, 190, 0.02) 17%,
      rgba(190, 190, 190, 0.02) 39%,
      rgba(186, 186, 186, 0.02) 39%,
      rgba(186, 186, 186, 0.02) 66%,
      rgba(191, 191, 191, 0.02) 66%,
      rgba(191, 191, 191, 0.02) 68%,
      rgba(16, 16, 16, 0.02) 68%,
      rgba(16, 16, 16, 0.02) 70%,
      rgba(94, 94, 94, 0.02) 70%,
      rgba(94, 94, 94, 0.02) 100%
    ),
    linear-gradient(90deg, #ffffff, #ffffff);

}


.mcrd{
  background-color:#dbeaff ;
  padding: 7px;
  border-radius: 50%;
  width: fit-content;
}


.mcrd img{
  width: 40px;
  height: 40px;

}


.mcrd1{
  background-color:#ffe2e4 ;
  padding: 7px;
  border-radius: 50%;
  width: fit-content;
}
.mcrd1 img{
  width: 40px;
  height: 40px;

}

.mcrd2{
  background-color:#ddfae6;
  padding: 7px;
  border-radius: 50%;
  width: fit-content;
}
.mcrd2 img{
  width: 40px;
  height: 40px;

}

.mcrd3{
  background-color:#fdf2df ;
  padding: 7px;
  border-radius: 50%;
  width: fit-content;
}
.mcrd3 img{
  width: 40px;
  height: 40px;

}


.mcrd4{
  background-color:#fef3e1 ;
  padding: 7px;
  border-radius: 50%;
  width: fit-content;
}
.mcrd4  img{
  width: 40px;
  height: 40px;

}



.mcrd5{
  background-color:#dbeaff ;
  padding: 7px;
  border-radius: 50%;
  width: fit-content;
}
.mcrd5  img{
  width: 40px;
  height: 40px;

}

.mcrd6{
  background-color:#fde3f1 ;
  padding: 7px;
  border-radius: 50%;
  width: fit-content;
}

.mcrd6  img{
  width: 40px;
  height: 40px;

}

.mcrd7{
  background-color:#ddfae6 ;
  padding: 7px;
  border-radius: 50%;
  width: fit-content;
}

.mcrd7  img{
  width: 40px;
  height: 40px;

}

.the-ftrs h2 {
  padding-top: 3rem;
  font-size: 2.5rem;
  margin-bottom: 2rem;
  color: #1a3453;
  font-weight: 700;
}

.inside_ftrs {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  gap: 1.45rem;
  flex-wrap: wrap;
}
.ftrcrds {
  padding: 1rem;
  border-radius: 10px;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  display: flex;
  justify-content: center;
  /* align-items: center; */
  flex-direction: column;
  gap: 0.25rem;
 
  background-color: white;
  border-top: 5px solid #1a3453;
  height: 350px;
  transition: all 0.2s;
  margin: 2rem 1rem;
}
.ftrcrds h1 {
  font-size: 1.85rem;
  font-weight: 600;
}
.ftrcrds p {
  font-size: 1rem;
}

/* Hover Effects */
.ftrcrds:hover {
  transform: translateY(-5px);
  box-shadow: rgba(0, 0, 0, 0.15) 0px 15px 35px 0px;
}

/*************** contact us */
.contact {
  padding: 3rem 1rem;
  background-color: #eaedf1;
}
.inside-contact {
  display: grid;
  grid-template-columns: 60% 40%;
  padding: 0 !important;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
  background-color: white;
  border-radius: 2rem;
  height: 650px;
}
@media screen and (max-width: 992px) {
  .inside-contact {
    grid-template-columns: auto;
    height: auto;
  }

  .white-area {
    width: 100%;
    padding: 2rem;
    display: flex;
    flex-direction: column;
  }
  .bluelocation {
    background-color: #1a3453;
    position: relative;
    border-radius: 1rem !important;
    height: 350px;
  }

  .geo {
    position: relative !important;
    left: 0 !important;
    padding: 10px !important;
  }
}

.white-area {
  padding: 2rem;
  display: flex;
  flex-direction: row;
}
.bluelocation {
  background-color: #1a3453;
  position: relative;
  border-radius: 0 2rem 2rem 0;
}

.the-cntnt {
  display: flex;
  justify-content: center;
  flex-direction: column;
  width: 90%;
}
.the-cntnt input {
  border: 1px solid #a29494;
  font-family: "Poppins", serif;
}
.the-cntnt textarea {
  border: 1px solid #a29494;
  resize: none !important;
  overflow: auto;
  font-family: "Poppins", serif;
}

.the-cntnt h1 {
  position: relative;
  font-size: 2.5rem;
  margin-bottom: 2rem;
  color: #1a3453;
  font-weight: 700;
  width: fit-content;
}

.the-cntnt h1::before {
  background-color: #1a3453;
  content: "";
  display: block;
  height: 3px;
  width: 75px;
  margin-bottom: 5px;
  transition: width 0.3s ease;
}

.the-cntnt h1::after {
  background-color: #1a3453;
  content: "";
  display: block;
  position: absolute;
  right: 0;
  bottom: -14px;
  height: 3px;
  width: 75px;
  margin-bottom: 0.25em;
  transition: width 0.3s ease;
}

.inside-contact:hover .the-cntnt h1::before,
.inside-contact:hover .the-cntnt h1::after {
  width: 100px;
}

.geo {
  /* position: absolute;
  top: 0; */
  width: 100%;
  height: 100%;
  padding: 1rem;
  /* left: -15%; */
}

.geo iframe {
  border-radius: 1rem;
}

.the-sendto {
  padding: 1rem;
  border-radius: 15px;
  height: 50px;
  outline: none;
  border: none;
  text-align: center;
  background-color: #1a3453;
  color: white;
  width: 170px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/********************** career******** */

.career {
  padding: 3rem 1rem;
  background-color: #ffffff;
}

.inside-career input {
  -webkit-box-shadow: 2px 6px 19.5px -0.5px #dddddd;
  -moz-box-shadow: 2px 6px 19.5px -0.5px #dddddd;
  box-shadow: 2px 6px 19.5px -0.5px #dddddd;
    font-family: "Poppins", serif;
  border: none;
  height: 50px;
  border-radius: 10px;
}

.inside-career input[type="file"] {
  height: 50px;         
 
  line-height: normal;  
  display: flex; 
  align-items: center; 
  width: 40px;  
}

.careerform {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 3rem 0;
}
.custom-file-wrapper {
  display: flex;
  align-items: center;
  -webkit-box-shadow: 2px 6px 19.5px -0.5px #dddddd;
  -moz-box-shadow: 2px 6px 19.5px -0.5px #dddddd;
  box-shadow: 2px 6px 19.5px -0.5px #dddddd;
  border: none;
  height: 50px;
  border-radius: 10px;
  overflow: hidden;
  width: 100% !important;  /* Adjust width as needed */
}

.custom-file-label {
  background-color: #ddd;
  color: #575757;
  padding: 0 15px;
  height: 100%;
  display: flex;
  align-items: center;
  cursor: pointer;
  white-space: nowrap; /* Prevent text from wrapping */
  font-family: "Poppins", serif;

}

.custom-file-input {
  opacity: 0;  /* Hide the default input */
  position: absolute;
  z-index: -1; /* Keep it behind the label */
  width: 100%;
  font-family: "Poppins", serif;

}

.file-name {
  margin-left: 10px;  /* Add space between button and file name */
  font-size: 16px;
  color: #0a0a0a;
}


/********************** porfolio******** */
.portfolio{
  padding: 3rem 0 0 0;
  background-color: #010e20;
  display: flex;
  justify-content: center;
  flex-direction: column;
  position: relative;
}





.portfolio h1 {
  position: relative;
  font-size: 2.5rem;
  margin-bottom: 2rem;
  color: #ffffff;
  font-weight: 700;
  text-align: center;
  height: fit-content;
}

/* .portfolio h1::before {
  background-color: #1a3453;
  content: "";
  display: block;
  height: 3px;
  width: 75px;
  margin-bottom: 5px;
  transition: width 0.3s ease;
}

.portfolio h1::after {
  background-color: #1a3453;
  content: "";
  display: block;
  position: absolute;
  right: 0;
  bottom: -14px;
  height: 3px;
  width: 75px;
  margin-bottom: 0.25em;
  transition: width 0.3s ease;
}

.inside-contact:hover .portfolio h1::before,
.inside-contact:hover .portfolio h1::after {
  width: 100px;
} */


.the-project-select{
  justify-content: center;
  background: rgba(255, 255, 255, 0.92);
  -webkit-box-shadow: 2px 6px 19.5px -0.5px #dddddd00;
  -moz-box-shadow: 2px 6px 19.5px -0.5px #dddddd00;
  box-shadow: 2px 6px 19.5px -0.5px #dddddd00;
  padding: 1rem;
  width: 90%;
  margin: auto;
  border-radius: 10px;
}
.t-clr-blk{
   color:black !important;
   font-size: 1.15rem;
   font-weight: 500;
}
.t-clr-blk.active{
  color:rgb(255, 255, 255) !important;
  background-color: #1a3453 !important;
}
.inside-portfolio{
  width: 100%;
  background: #010e20;;


}


.one-slide{
  width: 100%;
 
  background: #010e20;;
  
}

.in-slide{
  display: grid;
  grid-template-columns:  30% auto;
  justify-content: center;
  align-items: center;
  height: 100%;
  gap: 12rem;
  color:white;
  padding: 5.5rem 1rem;

}

@media screen and (max-width:1142px){
  .in-slide{
    display: grid;
    grid-template-columns:  auto;
    gap: 2rem;
    /* height: 800px; */
    padding: 3.5rem 1rem;
  
  
  }
  .slide-glassimg img {
    left: -9rem !important;
    }


}
@media screen and (max-width:765px){

    .slide-glassimg img {
      left: -6rem !important;
    }
 

}

@media screen and (max-width:992px){
  .slide-glass-ef{
flex-direction: column !important;
padding: 2.5rem 1rem;
height: 504px !important;
  }

  .slide-glasspara {
    width: 100% !important;
  }
}
.slite-title h2 {
  color:white;

}
.slide-glassimg {
  width: 40%;
  opacity: 0; 

}
.slide-glassimg  img{
  width:500px !important;
  position: relative;
  left:-15rem;
  

}
@media screen and (max-width:650px){
  .slide-glassimg  img{
    width:350px !important;}

    .slite-title h2 {
      max-width: 50% !important;
      width: 100% !important;
    }
    

}

@media screen and (max-width:380px){
  .slide-glassimg  img{
    width:320px !important;
  }
    


}
@media screen and (max-width:350px){
  .slide-glassimg  img{
    width:300px !important;
    left: -5rem !important;


  }
    

}




.slide-glasspara{
  width: 50%;
}
.slide-glasspara p{
  text-align: justify;
}

.slide-glass-ef{
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.055);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
border: 1px solid rgba(70,107,177,0.175);
padding: 10px;
display: flex;
justify-content: center;
flex-direction: row;
align-items: center;
position: relative;
text-decoration: none !important;
color:white;
}

.slide-glass-ef:hover {
  color: white!important;

}


@keyframes fadeleft {
  0% {
    opacity: 0;
    transform: translateX(-50px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }

}


.animated {
  animation: fadeleft 1s ease-in forwards;
}






/*=================== THE FOOTER CSS====== */
.the-footer {
  background-color: #010e20;
  color: white;
  padding: 3rem 0 0 0;
  /* border-top: 0.45px solid white; */
  font-family: Arial, sans-serif;
}

.inside-cont {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
  width: 100%;
}

.logo-footer {
  max-width: 300px;
  width: 100%;
}

.logo-footer img {
  max-width: 150px;
  margin-bottom: 1rem;
}

.quick-links ul,
.social-icons {
  list-style: none;
  padding: 0;
  margin: 0;
}

.quick-links ul li,
.social-icons a {
  margin-bottom: 0.5rem;
  color: white;
  text-decoration: none;
  font-size: 0.9rem;
}

.quick-links>ul>li>a {
  color: white;
  text-decoration: none;
  text-transform: capitalize;
}

.quick-links ul li a:hover,
.social-icons a:hover {
  color: #ddd;
}

.footer-bottom {
  padding: 20px;
  text-align: center;
  font-size: 0.85rem;
  margin-top: 2rem;
  border-top: .01rem solid rgb(45, 44, 44);
}

.footer-bottom p {
  margin-bottom: 0;
}

.footer-bottom p a {
  text-decoration: none;
  color: #ffffff;
  font-weight: 900;
}

/* Social Icons */
.social-icons {
  display: flex;
  gap: 1rem;
}

.social-icons a {
  color: white;
  font-size: 1.2rem;
  text-decoration: none;
}


@media (max-width: 768px) {
  .footer-top {
    flex-direction: column;
    align-items: center;
  }


}

.inside-cont2 {
  display: none;
}

@media(max-width:992px) {
  .inside-cont {
    display: none;
  }

  .inside-cont2 {
    display: initial;
    padding: .45rem;

  }

  .logo-footer1 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
  }

  .social-media {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
  }

  .logo-footer1 img {
    max-width: 150px;
    margin-bottom: 1rem;
  }


}

/* Accordion background color */
.accordion-flush .accordion-item {
  background-color: #010e20;
  /* Dark background color */
  color: white;
  /* Text color to white */
  border: none;
  /* Optional: remove border for a smoother look */
}

/* Accordion header button color */
.accordion-flush .accordion-button {
  background-color: #010e20;
  /* Darker background for button */
  color: white;
  /* White font color */
}

/* Hover and focus color for accordion button */
.accordion-flush .accordion-button:not(.collapsed) {
  background-color: #010e20;
  /* Active color when open */
  color: white;
}

.accordion-flush .accordion-button:focus,
.accordion-flush .accordion-button:hover {
  background-color: #010e20;
  /* Hover/focus color */
  color: white;
}

/* Accordion body color */
.accordion-flush .accordion-collapse {
  background-color: #010e20;
  /* Background color of accordion body */
}

.accordion-flush .accordion-body {
  color: white;
  /* White text in body */
}

.accordion-button::after {
  filter: brightness(100);
}

/****************************************** 3 D animation code***************** */
#threed{
  position: fixed;
  inset: 0;
  /* background-color: red; */
  z-index: 100;
  pointer-events: none;
}

@media screen and (max-width: 768px) {
  #threed {
    display: none !important;
  }
}

#robot-text {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: 'Arial', sans-serif;
  font-size: 1rem;  /* Smaller font size */
  font-weight: 600;
  color: white;
  width:fit-content;
  color:black;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);  /* Soft shadow for text */
  background: rgba(255, 255, 255, 0.8);  /* Cloud-like light background */
  padding: 6px 12px;  /* Smaller padding for the bubble */
  border-radius: 20px;  /* Reduced border-radius for a more compact shape */
  white-space: nowrap;
  pointer-events: none;  /* Prevent interaction */
  opacity: 0;  /* Initially hidden */
  transition: opacity 0.5s, transform 0.3s ease-in-out;  /* Smooth transition */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3), 0 6px 15px rgba(0, 0, 0, 0.2);  /* Softer shadows */
  backdrop-filter: blur(6px);  /* Light blur effect */
  
  /* Create the callout triangle using pseudo-element */
  position: relative;  /* Needed for the triangle positioning */
}

#robot-text.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.05);  /* Slight scale effect when shown */
}

/* Callout triangle */
#robot-text::after {
  content: '';
  position: absolute;
  bottom: -6px;  /* Smaller distance for the triangle */
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;  /* Smaller triangle */
  border-right: 6px solid transparent;  /* Smaller triangle */
  border-top: 6px solid rgba(255, 255, 255, 0.8);  /* Matching color for the triangle */
}




/* ******************************************loader CSS********************* */
/* Prevent scrolling */
.no-scroll {
  overflow-y: hidden;
  height: 100vh;
  /* Ensures the page is locked in place */
}


.load {
  height: 100dvh;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(0, 0, 0);
  transition: opacity 0.5s ease, visibility 0.5s ease;
  opacity: 1;
  visibility: visible;
}

.load.hidden {
  opacity: 0;
  visibility: hidden;
  display: none;
}

.svg-frame {
  position: relative;
  width: 300px;
  height: 300px;
  transform-style: preserve-3d;
  display: flex;
  justify-content: center;
  align-items: center;
}

.svg-frame svg {
  position: absolute;
  transition: .5s;
  z-index: calc(1 - (0.2 * var(--j)));
  transform-origin: center;
  width: 344px;
  height: 344px;
  fill: none;
}

.svg-frame:hover svg {
  transform: rotate(-80deg) skew(30deg) translateX(calc(45px * var(--i))) translateY(calc(-35px * var(--i)));
}

.svg-frame svg #center {
  transition: .5s;
  transform-origin: center;
}

.svg-frame:hover svg #center {
  transform: rotate(-30deg) translateX(45px) translateY(-3px);
}

#out2 {
  animation: rotate16 7s ease-in-out infinite alternate;
  transform-origin: center;
}

#out3 {
  animation: rotate16 3s ease-in-out infinite alternate;
  transform-origin: center;
  stroke: #ff0;
}

#inner3,
#inner1 {
  animation: rotate16 4s ease-in-out infinite alternate;
  transform-origin: center;
}

#center1 {
  fill: #ff0;
  animation: rotate16 2s ease-in-out infinite alternate;
  transform-origin: center;
}

@keyframes rotate16 {
  to {
    transform: rotate(360deg);
  }
}



/* The mobile screen  display offcanvas */
.canvaslist {
  display: flex;
  flex-direction: column;
  gap:1rem;
  font-size: 2rem;
  
}
.canvaslist li{
  list-style: none;

}
.canvaslist li a{
  text-decoration: none;
  color:black;
  font-weight: 800;
}


/* bottom to up button */

#my-d-button {
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
  z-index: 999999;

  display: none;

}


.cursor {
  position: absolute;
  width: 20px;
  height: 20px;
  background: #616263;
  border-radius: 50%;
  display: none !important;
  pointer-events: none;
  transition: transform 0.1s ease-out;
  z-index: 9999; /* Ensure custom cursor is above other elements */
}

@media screen and (max-width:992px){
  .cursor {
    display: none !important;
  }


}
.the-rst{
  position: relative;
}
.the-c-mvv{
  position: absolute;
  bottom: 0;
  width:100%;
  opacity: 0.10;
  object-fit: contain;
  filter: blur(2px);
  z-index: -1;
  
}

/**************************** testimonial css */
.testmonial{
  padding: 3rem 1rem;
  background: #010e20;
  color:white;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
}


.testmonial >h1 {
  position: relative;
  font-size: 2.5rem;
  margin:auto;
  color: #ffffff;
  font-weight: 700;
  width: fit-content;
}

.testmonial >h1::before {
  background-color: #ffffff;
  content: "";
  display: block;
  height: 3px;
  width: 75px;
  margin-bottom: 5px;
  transition: width 0.3s ease;
}

.testmonial > h1::after {
  background-color: #ffffff;
  content: "";
  display: block;
  position: absolute;
  right: 0;
  bottom: -14px;
  height: 3px;
  width: 75px;
  margin-bottom: 0.25em;
  transition: width 0.3s ease;
}


.testmonial:hover > h1::before,
.testmonial:hover > h1::after {
  width: 100px;
}

.inside_testmonial{
  margin: 2rem 0;
}
.h_f_s{
  font-size: 2.20rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.co-img{
  display: flex;
  justify-content: center;
  align-items: center;
}
.co-img > img{
  object-fit: cover!important;
  filter: brightness(10);
 
  width:100% !important;
}

.co-test img{
  width: 53px !important;
  position: absolute;
  right: 3%;
  top: 4%;
}
.co-test p{
  width: 80%;
  text-align: justify;
}


.the-testimony{
  margin: 1rem;
  padding: 3rem;
  border-radius: 0 3rem;
  background: rgba(255, 255, 255, 0.055);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition:  box-shadow .2s ease-in-out;
  display: flex;
  flex-direction:row ;
}
@media screen and (max-width:992px){
  .the-testimony{
    flex-direction: column;
  }
  .co-img{
    display: flex;
    justify-content:start;
    align-items: center;
  }
  .co-img > img{
    object-fit: contain!important;
   
   
   
    width: 85px !important;
    height: 70px !important;
  }
  .co-test p{
    width: 100%;
    text-align: justify;
  }
  
}

@media screen and (max-width:500px){
  .the-testimony{  
    padding: 3rem 1rem;
  }
  .co-test img{
  top:1%;
  width: 40px !important;
  right: 8%;

  }
}

.the-testimony:hover {
 -webkit-box-shadow: 1px 2.5px 12.5px 1px #2c3c7b;
 -moz-box-shadow: 1px 2.5px 12.5px 1px #2c3c7b;
 box-shadow: 1px 2.5px 12.5px 1px #2c3c7b;
}



/*************************** infinite scroll css */
.infinite_scroll {
  --width: 200px;
  --height: 200px;
  --quantity: 14;
}

.infinite_scroll {
  width: 100% !important;
  height: var(--height);
  overflow: hidden;
  
}

.infinite_scroll .scrol-i {
  display: flex;
  width: calc(var(--width) * var(--quantity));
  position: relative;
  height: 100%;
  justify-content: center;
  align-items: center;
 
}

.infinite_scroll .scrol-i .scroll-images {
  width: var(--width);
  height:100px;
  padding: 1rem;
  border-radius: 1rem;
  position: absolute;
  left: 100%;
  animation: autoslide 15s linear infinite;
  animation-delay: calc((15s / var(--quantity)) * (var(--pos) - 1));
  margin: 1rem;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  
}

@keyframes autoslide {
  from {
    left: 100%;
  }
  to {
    left: calc(var(--width) * -1);
  }
}

.infinite_scroll .scrol-i .scroll-images img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
}

.infinite_scroll:hover .scroll-images {
  animation-play-state: paused !important;
}



.custom-prev,
.custom-next {
  position: absolute;
  top: 50%;


  border:1px solid #6e6e6e;

  cursor: pointer;

  border-radius: 50%;

  z-index: 999;


}
.custom-prev i ,
.custom-next i{
  color: #010e20;
}

.custom-prev {
  left: 1%;
 
}

.custom-next {
  right: 1%;
}





/* stack carousel */


.nstack-prev,
.nstack-next {
  display: none;
  position: absolute;
  top: 42%;
 
  cursor: pointer;
  border-radius: 50%;
  z-index: 999;
  background-color: #031733;
  border:none;
  width: 60px;
  height: 60px;


}

.stack:hover .nstack-prev,
.stack:hover   .nstack-next {
  display: block; /* Show buttons on hover */
}
.nstack-prev i ,
.nstack-next i{
  color: #ffffff;
  font-size: 1.25rem;
}

.nstack-prev {
  left: 1%;
  animation: addleft  .2s ease-in-out;

 
}
.nstack-next {
  right: 1%;
  animation: addright  .2s ease-in-out;
}

@media screen and (max-width:620px){
  .nstack-prev {
    left: 0;}
    .nstack-next {
      right: 1%;}

}

@media screen and (max-width:596px){
  .nstack-prev,
.nstack-next {
 
  width: 30px;
  height: 30px;}
  .nstack-prev i ,
  .nstack-next i{
    font-size: .85rem;
    color: #ffffff;

  }

}
@keyframes addleft{
  0%{
   
    opacity: 0;
  }
  100%{
   
    opacity: 1;
  }
}

@keyframes addright{
  0%{
    
    opacity: 0;
  }
  100%{
   
    opacity: 1;
  }
}




/* Features carousel */

.the-bbtt{
  position:  absolute;
  top:8%; right:2%;
  display: flex;
  justify-content: center;
  align-items:center ;
  gap:1rem;
}
.Features-prev,
.Features-next {
 
 

  /* display: none; */
  cursor: pointer;
  border-radius: 50%;
  z-index: 999;
  background-color: #031733;
  border:none;
  width: 60px;
  height: 60px;
  animation: addright  .2s ease-in-out;



}
.Features-prev i ,
.Features-next i{
  color: #ffffff;
  font-size: 1.25rem !important;
}

.the-ftrs:hover .Features-prev,
.the-ftrs:hover   .Features-next {
  display: block; /* Show buttons on hover */
}

@media screen and (max-width:596px){
  .Features-prev,
.Features-next {
 
  width: 35px;
  height: 35px;
  
}


.the-bbtt{
  top:20%; right:1%;
}
  .Features-prev i ,
  .Features-next i{
    font-size: .45rem;
    color: #ffffff;

  }

}

/* portfolio carousel */

.bbbt-cc {
  position: absolute;
  bottom: 2%;
  right: 2%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  z-index: 10; /* Add this */
}


.portfolio-prev,
.portfolio-next {
  display: inline;
  background-color: #031733;
  border:none;
  width: 60px;
  height: 60px;


}

@media screen and (max-width:550px){

  .portfolio-prev,
.portfolio-next {
  width:40px;
  height: 40px;
}
}
.portfolio-prev i ,
.portfolio-next i{
  color: rgb(255, 255, 255);
  font-size: 1rem;
}





.testmonial-prev,
.testmonial-next {
 
  display: none;
  position: absolute;
  top: 42%;
 
  cursor: pointer;
  border-radius: 50%;
  z-index: 999;
  background-color: #031733;
  border:none;
  width: 60px;
  height: 60px;


}
.testmonial-next {
  right: 1%;
  animation: addright  .2s ease-in-out;
}
.testmonial-prev i ,
.testmonial-next i{
  color: #010e20;
  font-size: 3rem;
}

.testmonial-prev {
  left: 1%;
  animation: addleft  .2s ease-in-out;

 
}



.testmonial:hover .testmonial-prev,
.testmonial:hover   .testmonial-next {
  display: block; /* Show buttons on hover */
}
.testmonial-prev i ,
.testmonial-next i{
  color: #ffffff;
  font-size: 1.25rem;
}



@media screen and (max-width:620px){
  .testmonial-prev {
    left: 0;}
    .testmonial-next {
      right: 0;}

}

@media screen and (max-width:596px){
  .testmonial-prev,
.testmonial-next {
 
  width: 30px;
  height: 30px;}
  .nstack-prev i ,
  .nstack-next i{
    font-size: .85rem;
    color: #ffffff;

  }

}

.item-counts{
  position: absolute;
  right: 2%;
  bottom: 1%;
}
.item-counts span::after {
  content: "";
  position: absolute;
  right: 31px;
  top: 9px;
  width: 3px;
  height: 54px;
  background-color: #fff;
  transform: rotate(20deg);
}
@media screen and (max-width:992px){
  .item-counts span::after {
    right: 31px;
  top: 9px;
  width: 3px;
  height: 36px;
  }
  .item-counts sub{
    font-size: 1rem;
  }
  .item-counts span{
    font-size: 2rem !important;
  }
}

@media screen and (max-width:450px){
  .item-counts span::after {
    right: 32px;
    top: 0px;
    width: 3px ;
    height: 36px;
  }
  .item-counts sub{
    font-size: 1rem;
  }
  .item-counts span{
    font-size: 1.25rem !important;
  }
}
.item-counts sub{
  font-size: 1.15rem;
  padding-left: 10px;
}

.item-counts span{
  font-size: 3rem;
}

/* //////////////////////////////////////////////////// */

.error {
	color: red;
}
.form-group {
	margin-bottom: 20px;
}
.input-error-container {
	position: relative;
}
.error-message {
	position: absolute;
	top: 103%;
	left: 0;
	font-size: 12px;
	color: red;
	padding: 2px 5px;
	z-index: 1;
}

.error-message-1 {
	position: absolute;
	top: 93%;
	left: 0;
	font-size: 12px;
	color: red;
	padding: 2px 5px;
	z-index: 1;
}


	



/* ++++++++++++++++++++++++++PRIVACY AND POLICY CSS++++++++++++++++++++ */

.privacy {
  font-family: "Poppins", serif !important;
}
.pl-4 li {
  
  font-family: "Poppins", serif !important;

}

.privacy-section-title {
    color: #05376C;
    display: inline-block;
    padding-bottom: 0.5rem;
    margin-top: 2rem;
    font-weight: 600;
    transition: all 0.3s ease;
    position: relative;
    font-size: x-large;
}
.privacy-section-title:hover {
    transform: translateX(10px);
}
.privacy-content-main {
    background-color: white;
    border-radius: 10px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
.privacy-content {
    background-color: white;
    border-radius: 10px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    border-left: 4px solid #010e20;
    font-family: "Poppins", serif !important;
  }
.privacy-content::before {
    content: '';
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(112 112 112 / 10%), rgba(5, 55, 108, 0.1));
    transition: all 0.5s ease;
}
.privacy-content:hover::before {
    top: 0;
}
.privacy-content:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
.privacy {
    background: #f7f7f7 !important;
}
.privacy-head {
    text-align: center;
}
.privacy__text ul li a {
    color: #353535;
    text-decoration: none;
}
.privacy-first {
    font-weight: 500;
    font-size: 0.98rem;
}
.privacy-main {
    font-weight: 600;
    color: #353535;
}
.width-100 {
    width: 100%
}
.privacy a:hover {
    color: #b30000;
}
@media screen and (max-width:575px) {
    .privacy-section {
        margin: 15px;
    }
    .privacy-content-main {
        margin: 15px;
    }
}