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

body {
  background: none;
}

/* mobile */

#productDropdown {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

#productDropdown a {
  text-decoration: none;
}

/* -------------------- Navbar ------------------ */

.contanctNav {
  display: flex;
  border: solid 1px black;
  height: 40px;
  justify-content: space-between;
  align-items: center;
  padding: 10px 5vw 5px 5vw;
  background-color: rgba(14, 18, 29, 1);
}

/* for nav bar */
.navigationBox2 {
  margin-top: 39px;
}

.contanctNav img {
  height: 20px;
}

.contanctNav p {
  color: #888c97;
  font-size: 0.729vw;
  font-weight: 500;
}

.contacts {
  display: flex;
  gap: 10px;
}

.contacts div {
  display: flex;
  gap: 10px;
}

.socialNav {
  display: flex;
  gap: 20px;
}

.socialNav div {
  display: flex;
  gap: 8px;
}

/* -------------------- navbar end ------------------ */

/* ----------------------- body ---------------------- */

/* hero */

@media (max-width: 580px) {
  #heroCarousel {
    /* Symmetric, clean padding for mobile gutters */
    padding: 90px 16px 40px 16px !important;
  }

  .heroBotDiv {
    flex-direction: column;
    gap: 30px;
  }

  #heroCarousel .leftBotHero {
    width: 100%;
    margin: 0;
  }

  #heroCarousel .leftBotHero h1 {
    /* Predictable fixed typography with proper line height */
    font-size: 28px;
    line-height: 34px;
    font-weight: 800;
  }

  #heroCarousel .leftBotHero p {
    /* Optimize the paragraph text on mobile */
    font-size: 14px;
    line-height: 20px;
    margin-top: 10px;
    color: var(--off-white, #e9e6e6);
  }

  #heroCarousel .lineText p {
    font-size: 12px;
    line-height: 16px;
  }

  #heroCarousel .lineText svg {
    /* Scale down the decorative line on mobile */
    width: 40px;
  }

  #heroCarousel .heroBtns {
    display: flex;
    gap: 12px;
    margin-top: 15px;
  }

  #heroCarousel .heroBtns button {
    display: flex;
    /* Clean, modern button padding */
    padding: 12px 24px;
    border: 1px solid rgba(255, 198, 49, 1);
    background-color: rgba(255, 198, 49, 1);
    color: #000810;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    gap: 8px;
    border-radius: 4px;
  }

  #heroCarousel .heroBtns button:last-child {
    background-color: transparent;
    color: rgba(255, 198, 49, 1);
  }

  #heroCarousel .heroCredits {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    margin-top: 30px;
  }

  #heroCarousel .heroCredits div {
    /* Distribute space evenly, preventing overflow */
    flex: 1;
    min-width: 0;
    padding: 0;
    align-items: flex-start;
    text-align: left;
  }

  #heroCarousel .heroCredits div h1 {
    color: #ffc631;
    font-size: 28px;
    font-weight: 700;
    line-height: 32px;
  }

  #heroCarousel .heroCredits div p {
    color: var(--off-white, #e9e6e6);
    font-size: 10px;
    font-weight: 400;
    /* Reduced line height to close gap between lines */
    line-height: 14px; 
    text-transform: uppercase;
    margin-top: 4px;
  }

  #heroCarousel .rightBotHero {
    padding: 10px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
  }

  #heroCarousel .rightBotHero img {
    /* Prevent image squeezing while maintaining layout constraints */
    width: 100% !important;
    max-width: 320px !important;
    height: auto !important;
    margin: 0 auto !important;
    object-fit: contain !important;
  }

  #heroCarousel .arrow {
    font-size: 14px;
    font-weight: 400;
    line-height: 14px;
    text-align: center;
  }

  /* Optimize background size scaling for mobile viewport aspect ratios */
  body .hero::before {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
}

@media (min-width: 580px) and (max-width: 780px) {
  #heroCarousel {
    padding: 90px 24px 40px 24px !important;
  }

  .heroBotDiv {
    flex-direction: column;
    gap: 30px;
  }

  #heroCarousel .leftBotHero {
    width: 100%;
    margin: 0;
  }

  #heroCarousel .leftBotHero h1 {
    font-size: 36px;
    line-height: 44px;
  }

  #heroCarousel .leftBotHero p {
    font-size: 16px;
    line-height: 24px;
  }

  #heroCarousel .heroCredits {
    display: flex;
    gap: 24px;
    align-items: center;
    margin-top: 30px;
  }

  #heroCarousel .heroCredits div {
    flex: 1;
    min-width: 0;
    padding: 0;
    align-items: flex-start;
    text-align: left;
  }

  #heroCarousel .rightBotHero {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 20px 0;
  }

  #heroCarousel .rightBotHero img {
    /* Keep aspect ratio intact on tablets */
    width: 100% !important;
    max-width: 450px !important;
    height: auto !important;
    margin: 0 auto !important;
    object-fit: contain !important;
  }
}

.hero {
  height: 100%;
  width: 100%;
  margin-top: 0;
  background-color: rgba(0, 31, 63, 1);
  position: relative;
  z-index: 1;
  /* border: solid 1px red; */
}

.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 31, 63, 0.1);
  z-index: 2;
  background-image: url(../img/Group.png);
  background-size: cover;
  background-position: center;
  opacity: 0.1;
  z-index: -1;
}

/* carousel */

#heroCarousel {
  padding: 150px 0 0 0;
  /* border: solid 5px green; */
  /* height: 50vh; */
  width: 100%;
  color: white;
  height: 100%;
  /* margin: 0; */
  /* padding: 0; */
}

.lineText {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lineText p {
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  /* line-height: 22px; */
  margin: 0;
  padding: 0;
}

/*  */

.owl-carousel .item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* gap: 40px; */
  height: 100%;
  width: 100%;
  /* border: solid 1px red; */
}

.leftBotHero {
  /* border: solid 1px red; */
  margin: 20px 0 0 13.2vw;
  height: 100%;
  width: 31.25vw;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.leftBotHero h1 {
  font-size: 3vw;
  font-weight: 800;
  line-height: 3.125vw;
}

.leftBotHero p {
  color: var(--off-white, #e9e6e6);
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
}

.heroBotDiv {
  display: flex;
  /* border: solid 3px blue; */
  height: 100%;
}

.heroBtns {
  display: flex;
  gap: 10px;
}

.heroBtns button {
  display: flex;
  padding: 0.625vw 1.458vw;
  border: 1px solid rgba(255, 198, 49, 1);
  background-color: rgba(255, 198, 49, 1);
  color: #000810;
  font-size: 0.938vw;
  font-weight: 600;
  text-align: center;
  gap: 10px;
}

.heroBtns button:last-child {
  background-color: transparent;
  color: rgba(255, 198, 49, 1);
}

.arrow {
  font-size: 1.142vw;
  font-weight: 400;
  line-height: 1.25vw;
  text-align: center;
}

.rightBotHero {
  /* width: 35vw; */
  /* height: 100%; */
  /* border: solid 1px yellow; */
  padding: 30px 0 0 0;
}

.rightBotHero img {
  height: 28vw !important;
  width: 38vw !important;
  margin: 0 28vw 0 auto !important;
  object-fit: contain !important;
}

.heroCredits {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 40px;
}

.heroCredits div {
  width: 180px;
}

.heroCredits div h1 {
  color: #ffc631;
  /* font-family: Archivo; */
  font-size: 2.5vw;
  font-style: normal;
  font-weight: 700;
  /* line-height: 55px; */
}

.heroCredits div p {
  color: var(--off-white, #e9e6e6);
  /* font-family: Archivo; */
  font-size: 1.042vw;
  font-style: normal;
  font-weight: 300;
  line-height: 25px; /* 131.579% */
  text-transform: uppercase;
}

/* carousel end */

/* hero end */

/* ----------------------- solutions ---------------------- */

@media (max-width: 580px) {
  #solutions {
    padding: 100px 0 10vw 0;
    margin: auto;
  }

  #solutions .solutionGrid {
    margin-top: 30px;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 10px;
  }

  #solutions .solutionsheading h1 {
    font-size: 26px;
    line-height: 32px;
    margin: 0 !important;
    padding: 0;
  }

  #solutions .solutionGridBox {
    margin: auto;
    /* border: 1px solid red; */
    width: 90%;
    padding: 20px 16px;
  }

  #solutions .lineText {
    margin: auto;
  }

  #solutions .solutionsheading {
    margin: auto;
  }
}

@media (min-width: 580px) and (max-width: 770px) {
  #solutions {
    /* border: solid 3px red; */
    padding: 100px 2vw 10vw 2vw;
  }

  #solutions .solutionGrid {
    /* border: solid 1px red; */
    margin-top: 30px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  #solutions .solutionGridBox {
    border: 1px solid #c8c8c8;
    display: flex;
    width: 45vw;
    padding: 30px 20px 24px 20px;
    flex-direction: column;
    align-items: flex-start;
    transition: color 0.3s ease;
    /* gap: 4px; */
  }

  #solutions .solutionsheading h1 {
    font-size: 4vw;
    line-height: 35px;
    width: 48vw;
    /* border: solid 1px red; */
  }
}

.solutions {
  padding: 9.64vw 12vw 8.33vw 12vw;
}

/* .solutionsheading {
  width: 600px;
} */

.solutionsheading h1 {
  color: #000810;
  font-size: 44px;
  font-style: normal;
  font-weight: 700;
  line-height: 52px;
  margin: 0;
  padding: 0;
}

.solutionGrid {
  /* border: solid 1px red; */
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.solutionGridBox {
  border: 1px solid #c8c8c8;
  display: flex;
  width: 24.9vw;
  padding: 1.458vw 1.042vw 1.458vw 1.042vw;
  flex-direction: column;
  align-items: flex-start;
  transition: color 0.3s ease;
  /* gap: 4px; */
}

.solutionGridBox:hover {
  border: 1px solid #000810;
}

.solutionGridBox h1 {
  color: #e9e6e6;
  font-size: 48px;
  font-style: normal;
  font-weight: 800;
  line-height: normal;
  /* transition: color 0.5s ease; */
}

.solutionGridBox:hover h1 {
  color: #000810;
}

.solutionGridBox:hover .solGridpara3 {
  font-size: 18px;
  text-decoration: underline;
  cursor: pointer;
}

.solutionGridBox .solGridpara1 {
  color: #000810;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.solutionGridBox .solGridpara2 {
  color: #202c38;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}

.solutionGridBox .solGridpara3 {
  color: #0da574;
  font-size: 17px;
  font-style: normal;
  font-weight: 600;
  line-height: 22px;
  transition: color 0.3s ease;
}

/* solutions end */

/* product */

@media (max-width: 600px) {
  #product .productGrid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 5px;
    width: 100%;
    /* border: solid 1px red; */
    padding: 0 0 0 0;
  }

  #product .productHead {
    /* border: solid 1px red; */
    display: flex;
    flex-direction: column;
  }

  #product .productGridBox {
    width: 82vw;
    margin: 0 auto 20px auto;
  }

  #product .productGridImg {
    /* border: solid 1px red; */
    position: relative;
    width: 100%;
  }

  #product .productGridImg img {
    width: 100% !important;
    height: 200px !important;
    object-fit: contain !important;
  }

  #product .productHeadBtn {
    /* border: solid 1px red; */
    display: flex;
    gap: 20px;
    align-items: center;
  }

  #product .productHeadBtn div {
    display: inline-flex;
    height: 50px;
    width: 50%;
    padding: 10px 12px;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
    flex-shrink: 0;
    background: #ffc631;
    border: 1px solid #ffc631;
    cursor: pointer;
    color: rgba(0, 8, 16, 1);
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    /* border: solid 5px red; */
  }

  #product .productHeadBtn .productHeadBtn2 {
    background-color: transparent;
    color: #ffc631;
  }
}

@media (min-width: 600px) and (max-width: 770px) {
  #product {
    padding: 100px 2vw 10vw 2vw;
  }

  #product .productHead {
    /* border: solid 1px red; */
    color: #fff;
    display: flex;
    align-items: center;
  }

  #product .lineText {
    margin-bottom: -20px;
  }

  #product .productHead h1 {
    color: #fff;
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    margin: 0;
    padding: 0;
    width: 370px;
  }

  #product .productHeadBtn {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
  }

  #product .productGrid {
    /* border: solid 3px green; */
    /* margin-top: 80px; */
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
    /* column-gap: 40px; */
    width: 100%;
  }

  #product .productGridBox {
    width: 45vw;
    /* border: solid 1px yellow; */
  }

  #product .productGridImg {
    /* border: solid 1px red; */
    position: relative;
    width: 100%;
  }

  #product .text {
    border: 1px solid #ffc631;
    color: #ffc631;
    padding: 8px 16px;
    font-size: 20px;
  }

  #product .text:hover {
    background-color: #ffc631;
    color: black;
  }
}

.product {
  padding: 9.64vw 12vw 8.33vw 12vw;
  /* border: #0da574 1px solid; */
  background: #001f3f;
}

.productHead {
  /* border: solid 1px red; */
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.productHead h1 {
  color: #fff;
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
}

.productHeadBtn {
  /* border: solid 1px red; */
  display: flex;
  gap: 20px;
  align-items: center;
}

.productHeadBtn div {
  display: inline-flex;
  height: 61.716px;
  padding: 18px 30px;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  background: #ffc631;
  border: 1px solid #ffc631;
  cursor: pointer;
  color: rgba(0, 8, 16, 1);
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
}

.productHeadBtn .productHeadBtn2 {
  background-color: transparent;
  color: #ffc631;
}

.productGrid {
  /* border: solid 3px green; */
  margin-top: 80px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  column-gap: 40px;
  width: 100%;
}

.productGridBox {
  width: 36.9vw;
  /* border: solid 1px yellow; */
}

.productGridImg {
  /* border: solid 1px red; */
  position: relative;
}

.productGridImg img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  opacity: 1;
  transition: 0.5s ease;
  backface-visibility: hidden;
  border: 1px solid #e2e8f0;
}

.productImgMiddle {
  position: absolute;
  transition: 0.5s ease;
  opacity: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  /* color: white; */
}

.text {
  border: 1px solid #ffc631;
  color: #ffc631;
  font-size: 16px;
  padding: 16px 32px;
  font-size: 20px;
}

.text:hover {
  background-color: #ffc631;
  color: black;
}

.productGridImg:hover .productImgs {
  opacity: 0.3;
}

.productGridImg:hover .productImgMiddle {
  opacity: 1;
}

.productGridBox h1 {
  color: #fff;
  font-size: 30px;
  font-style: normal;
  font-weight: 700;
  line-height: 40px;
}

.productGridBox p {
  color: var(--off-white, #e9e6e6);
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 26px;
}

/* product end */

/* map */

@media (max-width: 580px) {
  #map {
    padding: 100px 2vw 10vw 2vw;
    flex-direction: column;
    gap: 28px;
    /* border: solid 1px red; */
  }

  #map .mapLeft {
    /* border: solid 1px green; */
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #map .mapLeft .mapTopP {
    color: #202c38;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  #map .mapLeftStats {
    display: grid;
    /* flex-direction: space-between; */
    justify-content: space-between;
    grid-template-columns: repeat(1, 1fr);
    align-items: center;
    /* flex-wrap: wrap; */
    gap: 20px;
    /* border: solid 1px red; */
    width: 95%;
  }

  #map .mapLeftNum h1 {
    color: var(--brand-colour-3, #0da574);
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    margin: 0;
    padding: 0;
  }

  #map .mapLeftNum p {
    color: #202c38;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    width: auto;
    margin: 0;
    padding: 0;
  }

  #map .mapDiv {
    color: #000810;
    font-weight: 600;
    height: 45px;
    padding: 8px 12px;
    background: #ffc631;
    width: 200px;
    text-align: center;
    /* border: solid 3px red; */
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

@media (min-width: 580px) and (max-width: 770px) {
  #map {
    padding: 100px 2vw 10vw 2vw;
  }

  #map .maph1 h1 {
    font-size: 3.5vw;
    width: 44vw;
  }

  #map .mapLeft {
    /* border: solid 1px green; */
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  #map .mapLeft .mapTopP {
    color: #202c38;
    font-size: 1.5vw;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5vw;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  #map .mapLeftNum h1 {
    color: var(--brand-colour-3, #0da574);
    font-size: 44px;
    font-style: normal;
    font-weight: 700;
    margin: 0;
    padding: 0;
  }

  #map .mapLeftNum p {
    color: #202c38;
    font-size: 1.3vw;
    font-style: normal;
    font-weight: 400;
    line-height: 1.35vw;
    /* width: 11.2vw; */
    margin: 0;
    padding: 0;
  }

  #map .mapDiv {
    color: #000810;
    font-size: 12px;
    font-weight: 600;
    height: 40px;
    padding: 8px 12px;
    background: #ffc631;
    width: 146px;
  }
}

.map {
  padding: 9.64vw 10vw 8.33vw 12.5vw;
  display: flex;
  justify-content: space-between;
  gap: 128px;
  /* border: solid 2px red; */
}

.maph1 h1 {
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  /* line-height: 55px; */
  margin: 0;
  padding: 0;
}

.mapRight {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* border: solid 1px red; */
  width: 100%;
}
.mapbox {
  margin-top: 40px;
  width: 100%;
}

.mapbox img {
  width: 100%;
}

.mapLeft {
  /* border: solid 1px green; */
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.mapLeft .mapTopP {
  color: #202c38;
  font-size: 1.3vw;
  font-style: normal;
  font-weight: 400;
  line-height: 1.35vw;
  width: 27.2vw;
}

.mapLeftNum h1 {
  color: var(--brand-colour-3, #0da574);
  font-size: 58px;
  font-style: normal;
  font-weight: 700;
}

.mapLeftNum p {
  color: #202c38;
  font-size: 1.2vw;
  font-style: normal;
  font-weight: 400;
  line-height: 1.35vw;
  width: 11.2vw;
}

.mapDiv {
  color: #000810;
  font-size: 18px;
  font-weight: 600;
  height: 61.716px;
  padding: 18px 30px;
  background: #ffc631;
  width: 246px;
}

/* map */

/* future */

@media (max-width: 580px) {
  #future {
    padding: 100px 2vw 10vw 2vw;
    /* border: solid 1px red; */
    /* gap: 10px; */
    width: 100%;
  }

  #future .futureGrid {
    /* border: solid 1px red; */
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    align-items: center;
  }

  #future .expertHead {
    /* border: solid 1px red; */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: start;
    margin-top: 60px;
  }

  #future .expertHead h1 {
    width: 100% !important;
  }

  .expertHeadtext {
    width: 100% !important;
    /* border: solid 1px red !important; */
  }

  #future .futureGridBox p {
    padding: 0;
    margin: 0;
  }

  #future .futureGridBox h1 {
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    line-height: 35px;
  }
  #future .futureGridBox {
    /* border: solid 1px red; */
    padding: 20px 12px 10px 30px;
    width: 95vw;
  }

  #future .futureBotLeft {
    /* border: solid 1px red; */
    width: 100%;
  }

  #future .futureGridBox1 {
    /* border: solid 1px red; */
    border: 1px solid #c8c8c8;
    width: 95vw;
    padding: 20px 12px 10px 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

  #future .futureGridBox p {
    padding: 0;
    margin: 0;
    /* width: 100%; */
  }

  #future .futureBot {
    /* border: solid 1px red; */
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }

  #future .futureBot .futureBotLeft p {
    font-size: 12px;
  }

  #future .futureBotRight {
    /* border: solid 1px red; */
    width: 95%;
    padding: 4vw;
  }

  #future .futureBotRight p {
    font-size: 18px;
    line-height: 20px;
  }

  #future .futureBotLeft p {
    /* border: solid 1px red; */
    font-size: 16px;
    padding: 0;
    margin: 0;
  }

  #future .consultBtn {
    padding: 12px 24px;
    font-size: 14px;
    width: auto;
    display: inline-block;
  }
}

@media (min-width: 580px) and (max-width: 770px) {
  #future {
    padding: 100px 2vw 10vw 2vw;
    width: 100%;
  }

  #future .futureGrid {
    /* border: solid 1px red; */
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  #future .futureGridBox {
    /* border: solid 1px red; */
    padding: 20px 12px 10px 30px;
    width: 45vw;
  }

  #future .futureGridBox p {
    padding: 0;
    margin: 0;
  }

  #future .futureGridBox h1 {
    font-size: 28px;
    font-style: normal;
    font-weight: 700;
    line-height: 35px;
  }

  #future .futureGridBox1 {
    /* border: solid 1px red; */
    border: 1px solid #c8c8c8;
    width: 45vw;
    padding: 20px 12px 10px 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

  #future .futureBot {
    /* border: solid 1px red; */
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }

  #future .futureBot .futureBotLeft p {
    /* border: solid 1px red; */
    width: 100%;
    margin: 0;
    padding: 0;
  }
}

.future {
  background: var(--brand-colour-2, #001f3f);
  padding: 9.64vw 12vw 8.33vw 12vw;
}

.futureGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  /* border: solid 1px red; */
}

.futureGridBox {
  width: 24vw;
  /* border: solid 1px red; */
}

.futureGridBox1 {
  border: 1px solid #c8c8c8;
  width: 24vw;
  padding: 40px 24px 10px 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.futureGridBox1 > *:not(:last-child) {
  margin-bottom: 24px;
}

.futureBoxicon {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
}

.futureGridBox1 h5 {
  color: white;
  font-size: 18px;
  margin-bottom: 8px !important;
}

.futureGridBox1 p {
  color: white;
  margin: 0;
}

.futureGridBox h1 {
  color: #fff;
  font-size: 44px;
  font-style: normal;
  font-weight: 700;
  line-height: 52px;
  margin: 10px 0 15px 0;
}

.futureGridBox p {
  color: #fff;
  /* border: solid 1px red; */
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 26px;
  margin: 0;
  padding: 0;
}

/* 2nd */
.expertHead {
  /* border: solid 1px red; */
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-top: 180px;
}

.expertHeadtext {
  /* border: solid 3px green; */
  width: 360px;
}

.consultBtn {
  padding: 18px 30px;
  background: #ffc631;
  color: #000810;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
}

.futureVideo img {
  margin-top: 50px;
  width: 100%;
}

.futureBot {
  margin-top: 50px;
  /* border: solid 1px red; */
  display: flex;
  justify-content: space-between;
}

.futureBotLeft {
  display: flex;
  flex-direction: column;
  gap: 20px;
  color: white;
  width: 580px;
}

.futureBotLeft p {
  margin: 0;
}

.futureBotRight {
  background: radial-gradient(
    235.52% 205.16% at -39.57% 150.37%,
    rgba(255, 198, 49, 0) 0%,
    rgba(255, 198, 49, 0.4) 100%
  );
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(2.5px);
  display: flex;
  gap: 50px;
  width: 500px;
  padding: 3vw 3.5vw;
  flex-direction: column;
}

.futureBotRight p {
  color: #d0d0d0;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 30px;
  margin: 0;
  /* padding: 0; */
}

.futureBotRight div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  /* border: solid 1px red; */
}

.founder p {
  color: #fff;
  font-family: Roboto;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}
/* future end */

/* accordion */

@media (max-width: 580px) {
  #accordion {
    /* border: solid 1px red; */
    width: 95%;
    flex-direction: column;
    gap: 40px;
  }

  #accordion .accordionLeft {
    width: 100%;
    display: flex;
    flex-direction: column;
    /* gap: 10px; */
    /* border: solid 1px red; */
  }

  #accordion .accordionRight {
    width: 100%;
  }

  #accordion .accordionLeft p {
    color: #162739;
    font-size: 16px;
    /* font-style: normal; */
    font-weight: 400;
    line-height: 20px;
    margin-top: 14px;
  }

  #accordion .accordionLeft h1 {
    /* border: solid 1px red; */
    width: 100%;
  }

  #accordionExample {
    width: 100% !important;
  }
}

@media (min-width: 580px) and (max-width: 770px) {
  #accordion {
    width: 95%;
  }

  #accordion .accordionLeft {
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  #accordion .accordionRight {
    width: 100%;
  }
}

.accordion {
  margin: 100px auto;
  width: 80vw;
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 70px;
  /* border: solid 5px green; */
}

.accordionLeft {
  width: 480px;
  display: flex;
  flex-direction: column;
  /* gap: 10px; */
  /* border: solid 1px red; */
}

.accordionLeft p {
  color: #162739;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
  margin-top: 16px;
}

.acontactBtn {
  display: flex;
  height: 61.716px;
  padding: 18px 30px;
  align-items: center;
  gap: 10px;
  background: #ffc631;
  color: #000810;
  width: 175px;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 23px;
  margin-top: 28px;
  cursor: pointer;
}

.accordionRight {
  /* border: solid 1px green; */
  width: 70%;
}

#accordionExample {
  /* display: flex; */
  flex-direction: column !important;
  margin: 0 !important;
  padding: 0 !important;
  /* border: orangered solid 1px !important; */
  width: 100%;
}

.accordion-header {
  width: 100%;
  border: 1px solid #c8c8c8;
  border-bottom: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.accordion-header:active {
  /* border: 1px solid #000810 !important; */
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.accordion-button:not(.collapsed) {
  color: rgba(13, 165, 116, 1) !important;
  background-color: #fff !important;
  box-shadow: none !important;
  outline: none !important;
  border: 1px solid var(--brand-colour-3, #0da574) !important;
  border-bottom: none !important;
}

.accordion-body {
  width: 100%;
  border: 1.5px solid var(--brand-colour-3, #0da574) !important;
  border-top: none !important;
}

/* accordion end */

/* curve img */

.curveImg {
  width: 100%;
}

.curveImg img {
  width: 100%;
}

/* curve img end */

/* innovation */

@media (max-width: 580px) {
  #innovation {
    /* border: solid 1px red; */
    padding: 0;
    width: 100%;
    margin-bottom: 50px;
  }

  #innovation .innovationHead {
    /* border: solid 1px red; */
    padding: auto;
    margin: auto;
    width: 95%;
    margin-top: 50px;
  }

  #innovation .innovationHead h1 {
    font-size: 4.8vw;
  }

  #innovation .innovationHeadBtn {
    /* border: solid 1px red; */
    height: 1.9vw;
    font-size: 3vw;
  }

  #innovation .lineText p {
    /* border: solid 1px #c8c8c8; */
    font-size: 2.4vw;
    font-weight: 400;
    /* color:red; */
  }

  #innovation .innovationbody {
    /* border: solid 1px red; */
    flex-direction: column;
    justify-content: center;
    gap: 40px;
  }

  #innovation .innovationbodyBox {
    /* border: solid 2px yellow; */
    width: 90%;
  }

  #innovation .innovationbodyBox h3 {
    font-size: 4vw;
    line-height: 4vw;
  }

  #innovation .innovationbody {
    /* border: solid 1px red; */
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
  }
}

@media (min-width: 580px) and (max-width: 770px) {
  #innovation {
    /* border: solid 1px red; */
    padding: 0;
    width: 100%;
  }

  #innovation .innovationHead {
    /* border: solid 1px red; */
    padding: auto;
    margin: auto;
    width: 95%;
    margin-top: 100px;
  }

  #innovation .innovationHead h1 {
    font-size: 3.9vw;
  }

  #innovation .innovationHeadBtn {
    /* border: solid 1px red; */
    height: 5vw;
  }

  #innovation .innovationbodyBox {
    /* border: solid 2px yellow; */
    width: 280px;
  }

  #innovation .innovationbody {
    /* border: solid 1px red; */
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
  }
}

.innovation {
  padding: 9.64vw 12vw 180px 12vw;
}

.innovationHead {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.innovationbody {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 40px;
}
.innovationbody img {
  width: 100%;
}

.innovationHeadBtn {
  display: inline-flex;
  height: 61.716px;
  padding: 18px 30px;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  background: #ffc631;
  color: #000810;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
}

.innovationbodyBox {
  /* border: solid 5px yellow; */
  width: 24vw;
}

.innovationbodyBoxP1 {
  color: #202c38;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}

.innovationbodyBoxP2 {
  color: #202c38;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  /* border: solid 1px red; */
}

.innovationbodyBox h3 {
  color: #000810;
  font-size: 1.9vw;
  font-style: normal;
  font-weight: 700;
  line-height: 1.9vw;
}

.innovationbody h6 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(13, 165, 116, 1);
  cursor: pointer;
}

.innovationbodyBoxline {
  width: 100%;
  border-top: solid 1px #c8c8c8;
}
/* innovation end */

/* map */

.map1 {
  /* border: solid 2px red; */
  padding: 0;

  margin: 100px auto;
}

@media (max-width: 580px) {
  .map1 {
    margin: 40px auto !important;
  }
}

/* map end */

/* contact */

@media (max-width: 580px) {
  #contact {
    /* border: solid 1px red; */
    gap: 20px;
    padding: 2px;
    margin: auto;
    flex-direction: column;
  }

  #contact .contactForm {
    /* border: solid 1px red; */
    width: 98%;
  }

  #contact .contactForm .formBox {
    /* border: solid 1px yellow; */
    width: 100%;
  }

  #contact .contactForm h1 {
    width: 100%;
    font-size: 26px;
    line-height: 32px;
  }

  #contact .contactDetails {
    /* border: solid 1px red; */
    width: 100%;
  }

  #contact .formBox button {
    width: auto;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    padding: 10px 20px;
    background: #ffc631;
    color: #000810;
    font-size: 13px;
    font-weight: 600;
    border-radius: 4px;
    align-self: flex-start;
  }

  #contact .formBox input {
    height: 58px;
    flex: none;
  }

  #contact .formBox textarea {
    height: 120px !important;
    flex: none;
  }

  #contact .formBox div {
    flex-direction: column;
    gap: 15px;
  }

  #contact .form-floating textarea {
    /* border: solid 1px #fd0000; */
    height: 120px !important;
    flex: none;
  }

  #contact .contactDetails h2 {
    font-size: 24px;
  }

  #contact .contactDetails p {
    margin: 0;
  }

  #contact .contactDetails .contactDetailsP1 {
    font-size: 12px;
    margin-top: 15px !important;
  }

  #contact .contactDetails .contactDetailsP2 {
    font-size: 15px;
    line-height: 22px;
    width: 100%;
  }
}

@media (min-width: 580px) and (max-width: 770px) {
  #contact {
    /* border: solid 1px red; */
    padding: auto;
    margin: auto;
    flex-direction: column;
  }

  #contact .contactForm {
    /* border: solid 1px red; */
    width: 90%;
  }

  #contact .contactForm .formBox {
    /* border: solid 1px yellow; */
    width: 100%;
  }

  #contact .contactForm h1 {
    width: 100%;
    font-size: 4.5vw;
    line-height: 4.5vw;
  }

  #contact .contactDetails {
    /* border: solid 1px red; */
    width: 100%;
  }

  #contact .formBox button {
    width: 100%;
    height: 62px;
    border: none;
    padding: 18px 30px;
    background: #ffc631;
  }

  #contact .contactDetails h2 {
    font-size: 5vw;
  }

  #contact .contactDetails p {
    margin: 0;
    font-size: 2vw;
  }
}

.contact {
  padding: 9.64vw 12vw 180px 12vw;
  display: flex;
  justify-content: space-between;
  gap: 5.729vw;
}

.contactForm h1 {
  width: 21.9vw;
  color: #000810;
  font-size: 2.5vw;
  font-style: normal;
  font-weight: 700;
  line-height: 2.5vw;
  margin: 0;
  padding: 0;
}

.formBox {
  width: 34vw;
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 40px;
}

.formBox div {
  display: flex;
  gap: 10px;
}

.formBox input,
.formBox textarea {
  flex: 1;
  width: 100%;
  height: 2.92vw;
  padding-left: 20px;
  box-sizing: border-box;
  border: 1px solid #a9a9a9;
}

#floatingTextarea2:focus {
  outline: none !important;
  box-shadow: none !important;
  border: 1px solid #a9a9a9;
}

.formBox button {
  width: 34vw;
  border: none;
  padding: 18px 30px;
  background: #ffc631;
}

.contactDetails {
  padding-top: 50px;
}

.contactDetails h2 {
  font-size: 1.975vw;
}

.contactDetails p {
  margin: 0;
  font-size: 0.933vw;
}

.contactDetailsP1 {
  color: #a9a9a9;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  margin-top: 20px !important;
}

.contactDetailsP2 {
  color: #000810;
  width: 280px;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 26px;
}

/* ----------------------- body end ---------------------- */