:root {
  --navy-blue: #1335A7;
  --slate-black: #3E3B3B;
  --gray: #808080;
  --voilet: #8A2BE2;
  --midnight-blue: #181869;
  --light-blue: #1D97C7;
  --heading-font-size: 4vh;
  --text-content-size: 1vw;
  --section-padding: 0 5vw;
  --heading-font-mobile: 10vw;
  /* Replace with your desired color code */
}

@font-face {
  font-family: trobika;
  src: url(./fonts/Trobika\ Regular.ttf);
}

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

}

html,
body {
  height: 100%;
  width: 100%;
  /* font-family: ; */
  font-family: sans-serif;
  scroll-behavior: smooth;
}

/* navbar */

#overlay {
  background: rgb(2, 0, 36);
  background: linear-gradient(90deg,
      rgba(2, 0, 36, 1) 0%,
      rgba(130, 45, 182, 0.9865196078431373) 0%,
      rgba(64, 130, 219, 1) 28%,
      rgba(13, 47, 78, 0.9389005602240896) 96%);
}

#page1 {
  overflow: hidden;
  min-height: 100vh;
}

.marquee-text {
  /* font-family: trobika; */
  font-family: Arial;
  font-weight: 900;

  visibility: hidden;
  color: red;
  /* Outline width and color */
}

#text-hero {
  line-height: 8vh;
}

@keyframes slide {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}


/* this is Our clients section */
.logos {
  width: 100%;

  overflow: hidden;
  white-space: nowrap;
  position: relative;
}

/* .logos:before {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 200px;
  height: 100%;
  background: linear-gradient(to left, rgba(255, 255, 255, 0), white);
  content: "";
  z-index: 2;
} */

/* .logos:after {
  position: absolute;
  top: 0%;
  right: 0%;
  width: 200px;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), white);
  content: "";

  z-index: 2;
} */

.logos-slide {
  display: inline-block;
  /* background: #000; */
  animation: 40s slide infinite linear;
}

.logos-slide img {
  display: inline;
  width: 7vw;
  margin: 0 2vw;
}




.service-provide {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  font-family: sans-serif;

}

.char {
  transform: translateY(115px);
  transition: transform .5s;
}






/* landig section */

.landing-section {
  height: calc(100vh - 100px);
  /* background-color: rebeccapurple; */
}

.landing-section1 {
  position: relative;
  /* top: -50px; */
  height: calc(100vh - 100px);
  /* background-color: rebeccapurple; */
}

.hero-section {
  position: relative;
  height: calc(100vh - 100px);
  width: 100%;
  overflow: hidden;
  /* background-color: red; */
}

.top-box,
.bottom-box {
  height: 50%;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 5px;

  /* background-color: aqua; */
}


.bottom-box {
  height: 50%;
  width: 100%;
  background-color: rgb(155, 212, 247);

}

.graphic-text {
  opacity: 0;
  scale: 0;
}

.branding-word {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* border: 4px solid black; */
  /* padding: 3vw; */
  font-weight: 700;
}

#hamburgMenu {
  background-color: white;
  /* border-radius: 1em; */
  width: 100%;
  /* padding: j; */
  height: 70px;
  padding: 0 30px;

  border-top-left-radius: 1rem;
  border-bottom-left-radius: 1rem;
  /* width: fit-content; */
  /* padding: 1.5vw; */
}

#hamburgContainer {
  /* border-radius: 1rem; */
  border-top-right-radius: 1rem;
  border-bottom-right-radius: 1rem;
  height: 70px;
  /* width: 70px; */
  padding: 0 15px;
  position: relative;
  z-index: 9;
  justify-content: center;
  align-items: center;
  background-color: white;
  /* visibility: hidden; */
  display: flex;


}



.hamburgMenu li a::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  height: 2px;
  width: 50%;
  background-color: #000;
}



/* for mobile navigation bar */

/* The overlaymob-nav (background) */
.overlaymob-nav {
  /* Height & width depends on how you want to reveal the overlaymob-nav (see JS below) */
  height: 100%;
  width: 0;
  position: fixed;
  /* Stay in place */
  z-index: 99;
  /* Sit on top */
  right: 0;
  top: 0;
  background-color: var(--midnight-blue);
  /* Black w/opacity */
  overflow-x: hidden;
  /* Disable horizontal scroll */
  transition: 0.5s ease-in-out;
  /* 0.5 second transition effect to slide in or slide down the overlaymob-nav (height or width, depending on reveal) */
}

/* Position the content inside the overlaymob-nav */
.overlaymob-nav-content {
  position: relative;
  top: 25%;
  /* 25% from the top */
  width: 100%;
  /* 100% width */
  text-align: center;
  /* Centered text/links */
  margin-top: 30px;
  /* 30px top margin to avoid conflict with the close button on smaller screens */
}

/* The navigation links inside the overlaymob-nav */
.overlaymob-nav a {
  padding: 8px;
  text-decoration: none;
  font-size: 1.7rem;
  color: white;
  display: block;
  /* Display block instead of inline */
  transition: 0.3s;
  /* Transition effects on hover (color) */
}

/* When you mouse over the navigation links, change their color */
.overlaymob-nav a:hover,
.overlaymob-nav a:focus {
  color: #f1f1f1;
}

.overlay-text {
  font-size: 10vw;
}

/* Position the close button (top right corner) */
.overlaymob-nav .closebtn {
  position: absolute;
  top: -20px;
  right: 7px;
  font-size: 60px;
}


/* mobile navigationn ends here */


.cardContainer {
  font-family: sans-serif;
}




/* this style is for animating branding word */
/* @import url('https://fonts.googleapis.com/css?family=Anton|Roboto'); */

.word {
  width: 80vw;
  text-align: center;
}

.word span {
  cursor: pointer;
  display: inline-block;
  font-size: 12vw;
  user-select: none;
  line-height: .8;
  color: black;
}

.word span:nth-child(1).active {
  animation: balance 1.5s ease-out;
  transform-origin: bottom left;
}

@keyframes balance {

  0%,
  100% {
    transform: rotate(0deg);
  }

  30%,
  60% {
    transform: rotate(-45deg);
  }
}

.word span:nth-child(2).active {
  animation: shrinkjump 1s ease-in-out;
  transform-origin: bottom center;
}

@keyframes shrinkjump {

  10%,
  35% {
    transform: scale(2, .2) translate(0, 0);
  }

  45%,
  50% {
    transform: scale(1) translate(0, -150px);
  }

  80% {
    transform: scale(1) translate(0, 0);
  }
}

.word span:nth-child(3).active {
  animation: falling 2s ease-out;
  transform-origin: bottom center;
}

@keyframes falling {
  12% {
    transform: rotateX(240deg);
  }

  24% {
    transform: rotateX(150deg);
  }

  36% {
    transform: rotateX(200deg);
  }

  48% {
    transform: rotateX(175deg);
  }

  60%,
  85% {
    transform: rotateX(180deg);
  }

  100% {
    transform: rotateX(0deg);
  }
}

.word span:nth-child(4).active {
  animation: rotate 1s ease-out;
}

@keyframes rotate {

  20%,
  80% {
    transform: rotateY(180deg);
  }

  100% {
    transform: rotateY(360deg);
  }
}

.word span:nth-child(5).active {
  animation: toplong 1.5s linear;
}

@keyframes toplong {

  10%,
  40% {
    transform: translateY(-20vh) scaleY(1);
  }

  90% {
    transform: translateY(-20vh) scaleY(2);
  }
}

.word span:nth-child(6).active {
  animation: falling 1.5s linear;
}

.word span:nth-child(7).active {
  animation: rotate 1.5s linear;
}

.word span:nth-child(8).active {
  animation: shrinkjump 1s ease-in-out;
  transform-origin: bottom center;
}









/* first slider section starts from here */

.slider {

  height: 100vh;
  width: 100%;
}

.slider .controls {
  position: absolute;
  left: 50%;
  bottom: 3%;
  transform: translate(-50%, 0%);
  width: 100px;
  height: 100px;
  z-index: 2;
  /* transform: ease-in 1s; */

}

.slider-para {
  font-size: var(--text-content-size);
}

/* for hiding buttons on slider */

.slider .controls>div {
  position: absolute;
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  font-size: 1rem;
  cursor: pointer;
  /* display: none; */
}


.slider .controls>.up {
  top: 0px;
  left: 0px;
  background: #fff;
  color: #111;
}

.slider .controls>.down {
  bottom: 0px;
  left: 0px;
  background: #fff;
  color: #111;
}


.slider .wrapper {
  display: flex;
  width: 100%;
  height: 100%;
  position: relative;
}


.slider .wrapper .left-text-section,
.slider .wrapper .right-image-section {

  width: 50%;
  overflow: hidden;
}


.slider .wrapper .left-text-section>div,
.slider .wrapper .right-image-section>div {
  width: 100%;
  height: 100%;
  transition: all 700ms ease-in-out;
}

.slider .wrapper .left-text-section>div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0px 100px 0px 50px;

}

.slider .wrapper .left-text-section>div h2 {
  font-size: 2.5vw;
  margin-bottom: 10px;
  transition: all 1s ease-in;
}


.slider .wrapper .left-text-section>div p {
  color: #000;
  opacity: 0.6;
  font-size: 1.2vw;
  line-height: 1.3vw;
}


/* for adding a shadow */
.slider .wrapper .left-text-section:before {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 50%;
  height: 100px;
  background-color: white;
  /* background: linear-gradient(to left, rgba(255, 255, 255, 0), white); */
  content: "";
  z-index: 2;
}


.text-branding-slide {
  font-size: 5vw;
}

#right-branding-word {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
}

#left-branding-word {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(0, -50%);
}

.slider .wrapper .right-image-section>div img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.slider .wrapper .right-image-section>div:nth-child(1) {
  margin-top: -600vh;
}


/* first slider section ends here */



/* second secton starts from here */
/* .gradient-heading {
  background: linear-gradient(to right, #662D8C, #ED1E79);

  -webkit-background-clip: text;
  color: transparent;
} */
#company-growth-section {
  /* background-color: red; */
  position: relative;
  height: 100vh;
}


@keyframes heartbeat {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
    /* Adjust the scale factor as needed */
  }
}




.goToBottomLanding {
  animation: heartbeat 1s infinite;
  font-weight: bold;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 3%;
  left: 1%;
  height: 30px;
  width: 30px;
  border: 2px solid var(--midnight-blue);
  color: var(--midnight-blue);
  font-size: var(--text-content-size);
}

.goToTopSection {
  animation: heartbeat 1s infinite;
  font-weight: bold;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 3%;
  right: 1%;
  height: 30px;
  width: 30px;
  /* background-color: var(--light-b; */
  border: 2px solid var(--midnight-blue);
  color: var(--midnight-blue);
  font-size: var(--text-content-size);

}


.goToBottomSection {
  animation: heartbeat 1s infinite;
  font-weight: bold;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 3%;
  left: 1%;
  height: 30px;
  width: 30px;
  border: 2px solid var(--midnight-blue);
  color: var(--midnight-blue);
  font-size: var(--text-content-size);
}

.goToTopSectionWhite {
  animation: heartbeat 1s infinite;
  font-weight: bold;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 3%;
  right: 1%;
  height: 30px;
  width: 30px;
  border: 2px solid white;
  color: white;
  font-size: var(--text-content-size);
  z-index: 5;
}

.goToBottomSectionWhite {
  z-index: 5;
  animation: heartbeat 1s infinite;
  font-weight: bold;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 3%;
  left: 1%;
  height: 30px;
  width: 30px;
  border: 2px solid white;
  color: white;
  font-size: var(--text-content-size);


}

#company-growth-section #top-section-cg {
  display: flex;
  /* background-color: red; */
  align-items: center;
  margin-top: 3vw;
  /* background-color: red; */
}

#company-growth-section #top-section-cg .left-section-cg {
  width: 30%;
  height: 100%;
  /* background-color: rebeccapurple; */
  display: flex;
  justify-content: flex-end;

}

#company-growth-section #top-section-cg .left-section-cg .heading-cg {
  width: 85%;
  /* background-color: red; */
  /* padding: 0 5vw; */
  text-align: center;
  display: flex;
  /* justify-content: space-between; */
  align-items: center;
  gap: 1;
}

#company-growth-section #top-section-cg .left-section-cg .heading-cg>div {
  font-size: var(--heading-font-size);
  /* background-color: red; */
}

#company-growth-section #top-section-cg .left-section-cg .heading-cg>.icon-down {
  /* background-color: rgb(5, 151, 209); */
  /* padding: 1vw 2vw; */
  height: 50px;
  width: 50px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  /* color: white; */
  position: relative;
  /* left: 50px; */
}

#company-growth-section #top-section-cg .right-section-cg {
  width: 70%;
  background-color: rgb(24, 24, 105);
  height: 100%;
  padding: 2.5vw 0;
  color: white;
  /* text-align: center; */
}

/* #wefocuson-Text>div {
  font-size: var(--text-content-size) !important;
} */

#company-growth-section #top-section-cg .right-section-cg ul {
  display: flex;
  justify-content: space-evenly;
  font-size: 1vw;
  font-weight: 400;
}

#company-growth-section .companygrwth-container {
  /* height: 100%; */
  padding: 4vw;

  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;

}

#company-growth-section .companygrwth-container .card-growth {
  background-color: #5b18b9;
  /* height: 12rem; */
  padding: 1vw;
  box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
  height: 150px;

}

#company-growth-section .companygrwth-container .card-growth:nth-child(1) {
  background-color: white;
}

#company-growth-section .companygrwth-container .card-growth:nth-child(2) {
  background-color: rgb(19, 53, 167);
}

#company-growth-section .companygrwth-container .card-growth:nth-child(3) {
  background-color: gray
}

#company-growth-section .companygrwth-container .card-growth:nth-child(4) {
  background-color: rgb(62, 59, 59)
}

#company-growth-section .companygrwth-container .card-growth:nth-child(5) {
  background-color: blueviolet
}

#company-growth-section .companygrwth-container .card-growth:nth-child(6) {
  background-color: rgb(29, 151, 199)
}

#company-growth-section .companygrwth-container .card-growth:nth-child(1) h1 {
  font-size: 2.2vw;
}

#company-growth-section .companygrwth-container .card-growth:nth-child(1) p {
  font-size: var(--text-content-size);
  margin-top: .2vw;
  opacity: 0.7;
}

#company-growth-section .companygrwth-container .card-growth:nth-child(2) h1,
#company-growth-section .companygrwth-container .card-growth:nth-child(3) h1,
#company-growth-section .companygrwth-container .card-growth:nth-child(4) h1,
#company-growth-section .companygrwth-container .card-growth:nth-child(5) h1,
#company-growth-section .companygrwth-container .card-growth:nth-child(6) h1 {
  color: white;
  font-size: 3vw;
}

#company-growth-section .companygrwth-container .card-growth:nth-child(2) p,
#company-growth-section .companygrwth-container .card-growth:nth-child(3) p,
#company-growth-section .companygrwth-container .card-growth:nth-child(4) p,
#company-growth-section .companygrwth-container .card-growth:nth-child(5) p,
#company-growth-section .companygrwth-container .card-growth:nth-child(6) p {
  color: white;
  font-size: var(--text-content-size);
  /* opacity: 0.8; */
}



.card-growth h2 {
  /* background-color: rebeccapurple; */
  font-size: 1.3vw;
  font-weight: 700;
  color: white;

}

/* second secton ends here */





/* About us Section starts from here */

#About {
  position: relative;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* background-color: #202020; */
  /* overflow-y: hidden; */
}



.cards {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100vh;
  padding: 3vw;
  /* border-radius: 2vw; */

}

#vision-mission-mobile {
  display: none;
}

.right-arrow-about {
  cursor: pointer;
  animation: heartbeat 1s infinite;
  position: absolute;

  left: 2%;
  /* bottom: 2%; */
  top: 50%;
  transform: translate(-50%, 0);
  width: 30px;
  height: 30px;
  /* background-color: var(--light-blue); */
  color: white;
  border: 2px solid white;
  font-size: var(--text-content-size);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

.left-arrow-about {
  cursor: pointer;
  animation: heartbeat 1s infinite;
  position: absolute;

  top: 50%;
  right: 2%;
  transform: translate(-50%, 0);
  /* bottom: 2%; */
  width: 30px;
  height: 30px;
  /* background-color: var(--light-blue); */
  border: 2px solid white;
  color: white;
  font-size: var(--text-content-size);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}



.about-card-heading {
  /* margin-top: 1vw; */
  text-transform: capitalize;
}

.about-card-heading h1 {
  font-size: var(--heading-font-size);

  padding: 0 5vw;
  font-weight: 700;
}

.text-img-aboutsection {
  /* background-color: red; */
  height: 75%;
  display: flex;
  gap: 1vw;
}

.text-img-aboutsection .left-img-about {
  width: 50%;
  height: 100%;
  padding: var(--section-padding);
  display: flex;

  /* justify-content: center; */
  margin-top: 2vw;
  /* background-color: red; */

}

.text-img-aboutsection .left-img-about img {
  width: 400px;
  height: 400px;
}

.text-img-aboutsection .right-text-about {
  padding: 1.5vw;
  width: 50%;
  height: 100%;
}

/* .text-img-aboutsection .right-text-about p:nth-child(1) {
  font-size: 1.6vw;
  font-weight: 500;
} */




#card-one {
  /* color: black; */
  color: white;
  top: 50%;
  /* background-color: #7cde8f; */
  background-color: var(--navy-blue);
  /* background-position: center;
  background-size: cover; */
  z-index: 3;
}

#card-two {
  color: white;
  /* background-color: #D79A9A; */
  background-color: var(--light-blue);
  top: 55%;
  background-position: center;
  background-size: cover;
  z-index: 4;

}

#vision {
  margin-top: 2vw;
}

#mission {
  display: flex;
  justify-content: flex-end;
  margin-top: 2.5vw;
}

#card-three {
  color: white;
  /* padding: 7vw 5vw; */
  /* background-color: #9CE7F9; */
  background-color: #788DAA;
  top: 60%;
  background-position: center;
  background-size: cover;
  z-index: 5;
}


#birthOfVision {
  display: flex;
  gap: 1rem;
  padding: 5vw 0vw;
}


#pagination {
  /* z-index: 6; */

  /* background-color: red; */
  position: absolute;
  bottom: 5%;
  left: 10%;
  /* transform: translate(-50%, 0); */
  /* bottom: 0; */
  display: none;
  /* flex-direction: column; */
  /* height: 100px; */
  width: 100px;
  justify-content: space-between;
}

#pagination button.active-btn {
  /* background-color: var(--light-blue); */
  display: flex;
  justify-content: center;
  align-items: center;
  /* padding: .5rem; */
  height: 30px;
  width: 30px;
  border-radius: 50%;
  /* Set the desired highlight color */
  color: white;
  font-weight: 700;
  /* font-size: 1.2rem; */
  /* Set the text color for better visibility */
  border: 2px solid white;
}


/* Our services section starts from here */
#Services {
  position: relative;
  min-height: 100vh;
  padding: 2vw 0vw;
  overflow-x: hidden;

}



.list-services {
  font-size: var(--text-content-size);
}

/* #services-heading {
  padding: 2vw 0;
} */

#services-heading>h1 {
  padding: 1vh 5vw;
  /* background-color: rebeccapurple; */
  font-weight: 700;
  font-size: var(--heading-font-size);
  line-height: 2vw;

}

#services-cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 1vw 4vw;
  /* background-color: rebeccapurple; */
  gap: 1vw;
}

.serviceCard1 {
  background-color: #060FAA;
  color: white;
  /* height: 200px; */
}

.serviceCard2 {
  background-color: #325DD0;
  color: white;
}

.serviceCard3 {
  background-color: #8F96B4;
  color: white;
}

.serviceCard4 {
  background-color: #788DAA;
  color: white;
}

.serviceCard5 {
  background-color: #713EB4;
  color: white;
}

.serviceCard6 {
  background-color: #622992;
  color: white;
}

#services-cards>div {
  height: 200px;
}

#hover-overlay {
  position: relative;
  height: 250px;
  /* box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset; */
  cursor: pointer;
}

#back-content {
  height: 100%;
  /* width: 100%; */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#back-content h1 {
  font-size: 1.3vw;
  text-align: center;
}

.front-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: black;

  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
  color: white;
}

#hover-overlay:hover .front-overlay {
  height: 100%;
}

/* Our services section ends from here */






/* Portfolio section starts here */

#Portfolio {
  position: relative;
  min-height: 100vh;
  width: 100%;
  /* background-color: ; */
  overflow-x: hidden;
}

.PortfolioImageWrapper {
  margin-top: 5vw;
  /* background-color: red; */
}

.portfolioText .portfolioTextWrapper {
  width: fit-content;
  display: flex;
  flex-wrap: nowrap;
}

.portfolioText .portfolioTextWrapper h2 {
  /* font-family: cursive; */
  font-size: 6rem;
  text-transform: uppercase;
  flex-shrink: 0;
  padding-right: 0.3em;
  padding-left: 0.3em;
  color: white;
  /* margin-top: -50px; */
}

.portfolioText .portfolioTextWrapper h2:nth-child(1) {
  background-color: #181869;
}

.portfolioText .portfolioTextWrapper h2:nth-child(2) {
  background-color: #808080;
}

.portfolioText .portfolioTextWrapper h2:nth-child(3) {
  background-color: #8A2BE2;
}

.portfolioText .portfolioTextWrapper h2:nth-child(4) {
  background-color: #1335A7;
}

.portfolioText .portfolioTextWrapper h2:nth-child(5) {
  background-color: #3E3B3B;
}

.portfolioText h2:last-of-type {
  background-color: grey;
}

#portfolioImagesContainer {
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
  gap: 5vw;
  padding-left: 2vw;

}

#portfolioImagesContainer .portfolio-images {
  width: 370px;
  /* overflow: visible; */
}

#portfolioImagesContainer .portfolio-images img {
  /* height: 100%; */
  width: 100%;
  /* height: auto; */
}

.explore-more {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2.2vw;
  gap: 3;
  margin-top: 5vw;
}

/* Portfolio section ends here  */


/* testmonials section2 */

#Testimonials {
  min-height: 100vh;
  background-color: var(--light-blue);
  position: relative;
  width: 100%;
  overflow: hidden;
}

.heading-testimoials {
  color: white
}

#testmonial-wrapper {
  display: flex;
  width: 100%;
  height: 100vh;
}

#testmonial-left {
  width: 30%;
  /* height: 100%; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* align-items: center; */
  padding-left: 5vw;
}

.heading-testimoials h1 {
  font-weight: 400;
  font-size: 3.5vw;
  line-height: 3.5vw;
  letter-spacing: -1px;
}

.heading-testimoials h3 {
  font-weight: 100;
  font-size: 1.5vw;
  line-height: 1.5vw;
  letter-spacing: -1px;
  margin-top: 5px;
}

#testmonial-right {
  /* min-height: 100vh; */

  width: 70%;
  /* background-color: rgb(172, 137, 133); */
  display: flex;
  justify-content: center;
  align-items: center;
}

#testmonial-right .users-box {
  position: relative;
  /* overflow: hidden; */
  left: -20px;
  height: 350px;
  width: 100%;
  /* background-color: #008CBA; */
  /* background-color: #000; */
}

/* swiper css */
.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  /* background: #fff; */
  display: flex;
  justify-content: center;
  align-items: center;
  /* height: ; */
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.custom-next-button i {
  font-size: 2.5rem;

}

/* peginiation custo color */
.swiper-pagination-bullet {
  /* Set the color of the pagination dots */
  background-color: rgb(207, 199, 199) !important;
}

.swiper-pagination-bullet-active {
  background-color: white !important;
}

.custom-next-button {
  position: absolute;
  top: 50%;
  left: -2%;
  transform: translate(0, -50%);
  background-color: white;
  z-index: 1;
  width: 40px;
  /* z-index: inherit; */
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

/* <div class="custom-prev-button">Prev</div> */

/* swiper css ends */




/* let's talk with us section Starts here */
#lets-talk {
  /* height: 400px; */
  width: 95%;
  background-color: rgb(239, 178, 154);
  margin: 1rem auto;
  /* border-radius: 30px; */
}

.lets-talk-section {

  display: flex;
  /* height: 100%; */
  flex-direction: column;
  /* gap: 10px; */
  justify-content: center;
  align-items: center;
}

.lets-talk-section h1 {
  font-size: 3vw;
  line-height: 3vw;
  /* opacity: 0; */
  /* transform: translateY(20px); */
  /* Initial position for the reveal */
  /* transition: opacity 0.5s, transform 0.5s; */
}

/* .lets-talk-section h1.reveal {
  opacity: 1;
  transform: translateY(0);
} */

.lets-talk-section p {
  font-size: 1vw;
  margin-top: 1vw;
  /* line-height: 1vw; */
  /* opacity: 0; */
  /* transform: translateY(20px); */
  /* Initial position for the reveal */
  /* transition: opacity 0.5s, transform 0.5s; */
}

.lets-talk-section button {
  font-size: var(--text-content-size);
  margin-top: 1vw;
  /* line-height: 1vw; */
  background-color: black;
  color: white;
  padding: 10px 20px;
  /* border: none; */
  border: black;
  border-radius: 35px;

}


/* let's talk with us section Ends here */


/* footer section */
/* 
footer {
  position: relative;
  height: 300px;
  width: 100%;

  background-color: black;

} */






/* .footer-bottom {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 70px;
  color: white;
} */

/* footer section ends here */

#ourClients {
  /* padding: 1vw 0vw; */
  overflow: hidden;

  /* background-color: rebeccapurple; */
}

#ourClients h1 {
  font-weight: 700;
  font-size: var(--heading-font-size);
}

footer {
  /* color: white; */
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-top: 5px solid var(--midnight-blue);
}

.goToTopFooter {
  animation: heartbeat 1s infinite;
  font-weight: bold;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 10%;
  right: 1%;
  height: 30px;
  width: 30px;
  border: 2px solid white;
  color: white;
  font-size: var(--text-content-size);
}

.info-footer {
  /* background-color: blue; */
  /* height: 150px; */
  display: flex;
  flex-direction: column;
  gap: 2vw;
}

.footer-icons {
  /* background-color: goldenrod; */
  height: 100px;
  align-items: center;
}

.usefulLinks {
  /* background-color: saddlebrown; */
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;

}

.lets-talk-section {
  /* height: 150px; */
  /* background-color: aqua; */
}

.legalLinks {
  height: 100px;
  /* background-color: yellow; */
}

.address-footer,
.email-footer,
#contacts,
.usefulLinks,
.legalLinks {
  font-size: var(--text-content-size);
}

#left-footer-section {
  /* justify-content: center; */
}

#left-footer-section,
#contacts {
  font-size: var(--text-content-size)
}



#left-footer-section>div {
  gap: 1vw;

  /* background-color: red; */
}

.footer-logo {
  padding: 0 4vw;
  /* background-color: red; */
  height: 120px;
  /* align-items: center; */
}

.footer-logo>a>img {
  width: 150px;
}

#right-footer-section {
  /* gap: 1vw; */
  /* font-size: 1.3vw; */
  background-color: var(--midnight-blue);
  color: white;
}




.ask-review h1 {
  font-size: var(--text-content-size);
}

.clickToReview {
  /* color: rgb(55, 55, 221); */
  /* margin-top: 1vw; */
  /* line-height: 1vw; */
  background-color: black;
  color: white;
  padding: 10px 20px;
  /* border: none; */
  border: black;
  font-size: var(--text-content-size);
  border-radius: 35px;
}










/* .swiper-wrapper {
  transition-timing-function: linear;
} */


@keyframes scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(calc(-250px * 7));
  }
}

.slider-clientTel {
  /* background: white; */
  /* box-shadow: 0 10px 20px -5px rgba(0, 0, 0, .125); */
  /* height: 200px; */
  margin: auto;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.slider-clientTel .slide-track {
  animation: scroll 50s linear infinite;
  display: flex;
  align-items: center;
  gap: 1rem;
  width: calc(250px * 15);
}

/* Pause animation on hover */
.slider-clientTel:hover .slide-track {
  animation-play-state: paused;
}

.slider-clientTel .slide {
  /* height: 100px; */
  width: 250px;
  /* background-color: red; */
}

.slider-clientTel .slide img {
  /* background-color: rebeccapurple; */
  width: 150px;
  height: auto;
}

#mobileSlider {
  height: 100vh;
  overflow: hidden;

}

.mob-slider-heading {
  display: flex;
  flex-direction: column;
  padding: 0 2rem;
  margin-top: 1rem;

  /* font-family: ; */
}

.mob-slider-heading h1 {
  font-size: 2rem;
  line-height: 2.1rem;
  font-weight: 700;
}

.mob-slider-heading p {
  margin-top: 1rem;
}

.swiper-container {
  width: 100%;
  /* height: 50vh; */
  overflow: hidden;

}

#slider-top {
  height: 50vh;
  width: 100%;
  /* background-color: red; */
}

#slider-bottom {
  height: 50vh;
  width: 100%;
  /* background-color: blue; */
}

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}


.pagination-bar {
  position: absolute;
  left: 3%;
  bottom: 5%;
  z-index: 10;
  /* background-color: red; */
  width: 45%;
  text-align: center;
}

.pagination-bar button {
  background-color: #ccc;
  /* Default dot color */
  border: none;
  width: 15px;
  height: 15px;
  margin: 0 5px;
  cursor: pointer;
  border-radius: 50%;
}

.pagination-bar button.active {
  background-color: #3498db;
  /* Active dot color - Blue */
}

#terms-heading {
  background-color: skyblue;
  padding: 3vw;
  text-align: center;
  font-size: 2.5vw;
}

.terms-contions-matter {
  padding: 2vw 5vw;
  display: flex;
  flex-direction: column;
  gap: 2vw;
}

.terms-headings {
  font-size: 1.5vw;
  font-weight: semibold;
}



.swiper--blog__wrapper {
  display: flex;
  transition-timing-function: linear !important;
  color: white;
}

.swiper--blog__slide {
  width: 200px;
  /* height: 200px; */
  margin-right: 30px;
  /* background-color: blue; */
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}





/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
  .overlaymob-nav a {
    font-size: 16px;
    padding: 5px;
  }
}

/* mediaquery for about section */

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


  /* these about section stacked cards */
  #card-one {
    top: 50%;
    z-index: 3;
  }

  #card-two {
    top: 55%;
  }

  #card-three {
    top: 60%;
  }

  /* these about section stacked cards */
  /* about section */

  .text-img-aboutsection {
    flex-direction: column;
    /* background-color: skyblue
    ei; */
    height: 100%;
  }

  .text-img-aboutsection .left-img-about {
    width: 100%;
    height: 315px;

  }


  /* .text-img-aboutsection .left-img-about img {
    height: 250px;
  } */

  .text-img-aboutsection .right-text-about {
    width: 100%;
    /* margin-top: 0px; */
    height: 100%;
    /* background-color: red; */
    /* padding: 5vw; */
  }





  .aboutMainHeading {
    font-size: 3vw;
  }

  .about-card-heading {
    /* margin-top: 5vw; */
    padding: 20px 0;
    text-transform: capitalize;
    text-align: center;
  }

  .about-card-heading h1 {
    font-size: var(--heading-font-mobile);
    line-height: 11vw;
  }

  #vision {
    display: none;
  }

  #mission {
    display: none;
  }

  #vision-mission-mobile {
    display: block;
  }
}

/* mediaquery for company growth section */
@media only screen and (max-width: 768px) {

  #company-growth-section {
    height: fit-content
  }

  #company-growth-section #top-section-cg .right-section-cg ul {
    font-size: 4vw;
  }

  #company-growth-section #top-section-cg .left-section-cg .heading-cg>div {
    font-size: var(--heading-font-mobile);
    padding: 5vw 0vw;
    text-align: center;
  }

  #company-growth-section #top-section-cg .left-section-cg .heading-cg>.icon-down {
    display: none;
  }

  #company-growth-section #top-section-cg .left-section-cg .heading-cg {
    /* width: 100%; */
    text-align: center;


  }

  #company-growth-section #top-section-cg .right-section-cg {
    width: 100%;
  }

  #company-growth-section #top-section-cg .left-section-cg {
    width: 100%;
  }

  #company-growth-section #top-section-cg {
    flex-direction: column;
    /* margin-top: 3rem; */
  }

  #company-growth-section .companygrwth-container {
    grid-template-columns: 1fr;
  }


  #company-growth-section .companygrwth-container .card-growth {
    height: 100%;
    padding: 10vw;
    text-align: center;
  }

  .card-growth h2 {
    font-size: 5vw;
  }

  #company-growth-section .companygrwth-container .card-growth:nth-child(2) h1,
  #company-growth-section .companygrwth-container .card-growth:nth-child(3) h1,
  #company-growth-section .companygrwth-container .card-growth:nth-child(4) h1,
  #company-growth-section .companygrwth-container .card-growth:nth-child(5) h1,
  #company-growth-section .companygrwth-container .card-growth:nth-child(6) h1 {
    color: white;
    font-size: 20vw;
  }

  #company-growth-section .companygrwth-container .card-growth:nth-child(2) p,
  #company-growth-section .companygrwth-container .card-growth:nth-child(3) p,
  #company-growth-section .companygrwth-container .card-growth:nth-child(4) p,
  #company-growth-section .companygrwth-container .card-growth:nth-child(5) p,
  #company-growth-section .companygrwth-container .card-growth:nth-child(6) p {
    color: white;
    font-size: 3.5vw;

  }


  #company-growth-section .companygrwth-container .card-growth:nth-child(1) h1 {
    font-size: 10vw;
    line-height: 10vw;
  }

  #company-growth-section .companygrwth-container .card-growth:nth-child(1) p {
    font-size: 3.5vw;
    margin-top: 3vw;
    opacity: 0.7;
  }



}


/* mediaquery for footer */

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

  /* footer responsiveness start here */
  footer {
    height: 100%;
    /* justify-content: center; */
    /* padding: 0; */
  }

  .info-footer {
    /* background-color: blue; */
    /* height: 150px; */

  }

  .ri-building-4-line {
    font-size: 1rem;
  }

  .footer-icons {
    /* background-color: goldenrod; */
    height: 70px;

  }

  .usefulLinks {
    /* background-color: saddlebrown; */
    height: fit-content;


  }

  .legalLinks {
    height: fit-content;
  }

  .footer-logo {
    height: 90px;
  }


  .address-footer,
  .email-footer,
  #contacts,
  .usefulLinks,
  .legalLinks {
    font-size: 3vw;
  }

  .ask-review h1 {
    font-size: 3vw;
    line-height: 3vw;
  }

  .clickToReview {
    font-size: 3vw;
    line-height: 3vw;
    margin-top: 10px;
    text-align: center;
  }

  .explore-more {
    font-size: 7vw;
    gap: 3;
    margin-top: 20vw
  }

  .goToTopFooter {
    display: none;
  }

}


/* let's talk section */
@media only screen and (max-width: 768px) {

  /* let's talk with us section */
  #lets-talk {
    /* height: 300px; */
    transition: opacity 1s, transform 1s;
  }

  .lets-talk-section h1 {
    font-size: 7vw;
    line-height: 7vw;
  }

  .lets-talk-section p {
    font-size: 2.5vw;
    margin-top: 3vw;
    /* line-height: 1vw; */
  }

  .lets-talk-section button {
    font-size: 3vw;
    margin-top: 4vw;
    /* line-height: 1vw; */
    background-color: black;
    color: white;
    padding: 10px 20px;
    /* border: none; */
    border: black;
    /* border-radius: 35px; */
  }
}


/*media query for services section */

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

  /* services section */
  #Services {
    padding: 10vw 0vw;
  }

  #services-cards {
    grid-template-columns: 1fr;
    gap: 5vw;
    padding: 5vw;
  }

  .list-services {
    font-size: 3.5vw;
  }

  #Services #services-cards .service-card .servicename-img i {
    font-size: 40vw;

  }

  #services-cards .service-card:hover .servicename-img i {
    font-size: 15vw;

  }

  #services-cards .service-card .servicename-img h1 {
    font-size: 6vw;
    line-height: 6.5vw;
  }

  #services-cards .service-card .service-content {
    margin-top: 8rem;
    padding: 0 5vw;
  }

  #services-cards .service-card .service-content ul {

    font-size: 4vw;
    line-height: 5vw;

  }

  #services-heading>h1 {
    font-size: var(--heading-font-mobile);
    padding: 5vw;
  }

}



/* mediaquery for testimonials */

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

  /* testmonial section new responsiveness starts here */

  #testmonial-wrapper {
    flex-direction: column;
    justify-content: center;
  }


  #testmonial-left {
    /* background-color: white; */
    width: 100%;
    /* height: 200px; */
    /* background-color: red; */

  }

  .heading-testimoials h1 {
    font-weight: 400;
    font-size: var(--heading-font-mobile);
    line-height: 10vw;
    letter-spacing: -1px;
    text-align: center;
  }

  .heading-testimoials h3 {
    font-weight: 100;
    font-size: 7vw;
    line-height: 7vw;
    letter-spacing: -1px;
    margin-top: 5px;
    text-align: center;
  }

  #testmonial-right {
    /* height:0 ; */
    width: 100%;
    /* background-color: rgb(172, 137, 133); */
    /* display: flex; */
    justify-content: center;
    align-items: center;
  }

  .custom-next-button {
    display: none;
  }

  #testmonial-right .users-box {
    position: relative;
    /* overflow: hidden; */
    left: 0px;
    height: 300px;
    width: 90%;
    /* background-color: #008CBA; */
    /* background-color: #000; */
  }


  .custom-next-button {
    position: absolute;
    top: 50%;
    left: -15px;

    z-index: 1;
    width: 40px;
    /* z-index: inherit; */
    height: 40px;
    font-size: 1.2rem;

  }

  #testmonial-right {
    margin-top: 5rem;
  }

  /* testmonial section new responsiveness ends here */

}




/* mediaquery for responsiveness */

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

  /*go to top button  */
  .goToTopSection .goToBottomLanding,
  .goToTopSection,
  .goToBottomSection,
  .goToTopSectionWhite,
  .goToBottomSectionWhite,
  .left-arrow-about,
  .right-arrow-about {
    display: none;
  }

  /* go to top button ends here */
  #hamburgContainer {
    visibility: hidden;
  }

  #testmonial-left {
    padding-left: 0;
    margin-top: 2rem;
  }

  /* this is services cards heading */
  #back-content h1 {
    font-size: 4vw;

  }

  .slider .controls {
    /* display: none;
     */
    position: absolute;
    right: 0;
  }

  .portfolioText .portfolioTextWrapper h2 {
    font-size: 90px;
  }

  .PortfolioImageWrapper {
    margin-top: 7rem;
  }

  .logos {
    width: 100%;
  }

  .logos-slide img {
    display: inline;
    width: 15vw;
    margin: 0 5vw;
  }

  #desktopSlider {
    display: none;
  }

  /* for adding a shadow */
  .slider .wrapper .left-text-section:before {
    display: none;
  }

  /* company growth section starts from here */
  #ourClients h1 {
    font-size: var(--heading-font-mobile);
    line-height: var(--heading-font-mobile);
    text-align: center;
  }
}


/* tablet */


@media screen and (min-width: 768px) and (max-width: 1024px) {


  #company-growth-section .companygrwth-container {
    grid-template-columns: 1fr 1fr;
  }

  #company-growth-section .companygrwth-container .card-growth {
    height: 15rem;
    padding: 4vw 5vw;
    text-align: center;
  }

  #company-growth-section .companygrwth-container .card-growth:nth-child(2) h1,
  #company-growth-section .companygrwth-container .card-growth:nth-child(3) h1,
  #company-growth-section .companygrwth-container .card-growth:nth-child(4) h1,
  #company-growth-section .companygrwth-container .card-growth:nth-child(5) h1,
  #company-growth-section .companygrwth-container .card-growth:nth-child(6) h1 {
    color: white;
    font-size: 8vw;
  }

  #company-growth-section .companygrwth-container .card-growth:nth-child(2) p,
  #company-growth-section .companygrwth-container .card-growth:nth-child(3) p,
  #company-growth-section .companygrwth-container .card-growth:nth-child(4) p,
  #company-growth-section .companygrwth-container .card-growth:nth-child(5) p,
  #company-growth-section .companygrwth-container .card-growth:nth-child(6) p {
    color: white;
    font-size: 1.4vw;
  }

  #company-growth-section .companygrwth-container .card-growth:nth-child(1) h1 {
    font-size: 5vw;
    line-height: 5vw;
  }

  #company-growth-section .companygrwth-container .card-growth:nth-child(1) p {
    font-size: 1.4vw;
    margin-top: 1.2vw;
    opacity: 0.7;
  }

  #services-cards {
    grid-template-columns: 1fr 1fr;
    gap: 3vw;
  }


  #services-cards .service-card .servicename-img i {
    font-size: 15vw;

  }

  #services-cards .service-card:hover .servicename-img i {
    font-size: 6vw;

  }

  #services-cards .service-card .servicename-img h1 {
    font-size: 3vw;
    line-height: 3.2vw;
  }

  #services-cards .service-card .service-content {
    margin-top: 8rem;

  }

  #services-cards .service-card .service-content ul {

    font-size: 2vw;
    line-height: 2vw;

  }

  /* let's talk with us section */

  .lets-talk-section h1 {
    font-size: 5vw;
    line-height: 5vw;
  }

  .lets-talk-section p {
    font-size: 2vw;
    margin-top: 2vw;
    /* line-height: 1vw; */
  }

  .lets-talk-section button {
    font-size: 1.5vw;
    margin-top: 1vw;
    /* line-height: 1vw; */
    background-color: black;
    color: white;
    padding: 7px 15px;
    /* border: none; */
    border: black;
    /* border-radius: 35px; */
  }


}



/* Chatbot tooltip */

/* Custom CSS for tooltip */
.tooltip {
  position: relative;
}

.tooltip .tooltip-text {
  visibility: hidden;
  background-color: var(--midnight-blue);
  font: bold;
  color: #fff;
  text-align: center;
  border-radius: 4px;
  padding: 0.5rem;
  position: absolute;
  z-index: 999;
  top: -30px;
  left: 60%;
  transform: translateX(-50%);
  width: max-content;
}

.tooltip:hover .tooltip-text {
  visibility: visible;
}