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

@font-face {
  src: url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/webfonts/fa-brands-400.woff2);
  font-family: 'fontawesome 5 free';
  font-display: optional !important;
}

:root {
  --bg-color: #fff;
  --black-color: #000;
  --gray-color: #516d83;
  --light-gray-color: #f7f7f7;
  --default-border-color: #b1b1b1;
  --theme-color: #043357;
  --accent-color: #1692e5;
  --dark-grey: #8DB1D1;
  --accent-light-color: #79cfff;
  --active-color: #D5EAF5;
  --primary-light-color: #d2ecff;
  --hover-card-color: #e8f0ff;
  /* --hover-card-color-1: #f1f1f1; */
  --hover-card-color-1: #f5f5f5;
  --accent-color-shadow: color-mix(in srgb, var(--accent-color) 50%, #333333 10%);
  --gradient-color: linear-gradient(135deg, var(--accent-color), var(--theme-color), var(--accent-color-shadow));
  --lightgradient-color: linear-gradient(180deg, rgba(186, 215, 240, 1) 0%, rgba(255, 255, 255, 1) 100%);
  --text-gradient-color: linear-gradient(135deg, #98c5e4, #223d52, var(--accent-color-shadow));
  --card-shadow-inset: rgba(0, 0, 0, 0.06) 0px -2px 8px 1px inset;
  --shaow-10: rgb(0 0 0 / 10%);
  --shaow-24: rgb(0 0 0 / 24%);
  /* Smooth scroll */
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
  background-color: inherit;
  font-family: "Open Sans", serif;
}

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

.pt-80 {
  padding-top: 80px;
}

.pb-80 {
  padding-bottom: 80px;
}

.font-18 {
  font-size: 18px;
}

.bg-linergradient {
  border-radius: 20px;
  background: var(--lightgradient-color);
}

.px-20 {
  padding: 0 20px;
}

.banner-render {
  /* height: 65dvh; */
  max-height: 65dvh;
  width: 100%;
  object-fit: cover;

  &.product {
    max-height: 80dvh;
  }
}

.banner-section-bg {
  background-image: linear-gradient(to right, #12364F, #184769, #12364F);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  padding: 90px 0 !important;
}

.productListLogo {
  img {
    max-width: 150px !important;
    max-height: 80px !important;
    display: inline-block;
  }

  @media screen and (max-width:767.5px) {
    text-align: center;
  }
}

/*
# heroSection 
--------------------------------*/
.heroSection {
  --hero-slider-height: 220px;
  --hero-slider-content-translate-y: 0%;

  .slide-banner-cont {
    .slideBanner-item {
      height: var(--hero-slider-height);
      background-position-x: center;
      background-repeat: no-repeat;
      background-size: cover;
      display: flex;
      align-items: center;
      justify-content: center;

      .content {
        transform: translateY(var(--hero-slider-content-translate-y));
        color: #fff;
        text-shadow: none;
        font-weight: 600;
        max-width: var(--hero-slider-content-width);

        .slider-heading {
          font-size: clamp(1.08rem, 4vw, 2.5rem);
        }

        p {
          text-wrap: balance;
          font-size: clamp(14px, 1vw, 17px)
        }
      }
    }
  }
}

/*
# overLaySection 
--------------------------------*/
.overlay-section {
  --overLay-margin: 5%;
  --section-custom-margin:6%;
  --inner-padding: 20px 30px;
  overflow: unset !important;
  padding-bottom: 0 !important;
  padding-top: 0px !important;

  .overLaySection-inner {
    max-width: 1514px;
    background-color: #fff;
    z-index: 1;
    position: relative;
    border: 0;
    border-radius: 25px;
    padding: var(--inner-padding);
    margin: calc(-1 * var(--overLay-margin, 0%) - var(--section-custom-margin, 0%)) auto 0 !important;

  }
}

.ops-inner-box-new {
  margin: -13% auto 0 !important;
}

.tabs-section-logos-outer .slick-prev {
  top: 100%;
}

.tabs-section-logos-outer .slick-next {
  top: 100%;
}

.rdy-to-tak-exp {
  border: 0;
  border-radius: 20px;
  box-shadow: 0 2px 3px rgb(0, 0, 0, 0.1);
  background: rgb(186, 215, 240);
  background: linear-gradient(0deg,
      rgba(186, 215, 240, 1) 0%,
      rgba(255, 255, 255, 1) 100%);
  min-height: 400px;
  margin-inline: auto !important;
  z-index: 1;
  padding: 40px 40px 40px;

  & .subheading-tech {
    font-size: 20px !important;
    color: #043357 !important;
    font-weight: 600 !important;
    margin-bottom: 6px !important;
  }

  & p {
    text-wrap: pretty;
  }
}

.rdy-to-tak-exp h2 {
  text-shadow: none !important;
}

.rdy-to-tak-exp .cont-btn {
  background-color: #034679;
  border: 0;
  border-radius: 12px;
  padding: 8px 20px;
  font-size: 18px;
  text-align: center;
  color: #fff;
  margin-bottom: 16px;
  font-weight: 400;
  min-width: 180px;
  box-shadow: none;
  outline: none;
  transition: 0.3s ease-in-out;
}

.rdy-to-tak-exp p {
  text-shadow: none !important;
  color: #6d6d6d !important;
  letter-spacing: 0 !important;
  font-weight: 500;
  margin: 0 0 30px 0 !important;
  font-size: clamp(17px, 5vw, 20px) !important;
  line-height: 30px !important;
  margin-bottom: 30px !important;
}

.prsn-flght-2 img {
  border-radius: 8px;
}


/* Hover effect */


.disabled-button {
  cursor: not-allowed;
  opacity: 0.6;
  box-shadow: none;
  transition: 0.3s ease-in-out;
}

.timer-lenth {
  /* margin-top: -50px; */
  position: relative;
  z-index: 1;
  padding: 30px 10px;
  /* margin-bottom: 30px; */
  color: #fff;
  /* box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; */
  border-radius: 10px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.timer-lenth h2 {
  /* color: #043357; */
  font-weight: 700;
  font-size: 42px;
}

.timer-lenth .pluse-content {
  font-size: 32px;
  padding-right: 3px;
  font-weight: 700;
  /* color: #063355; */
}

.border-right {
  border-right: 1px solid #fff;
}

.border-right-after {
  position: relative;
}

.border-right-after:after {
  content: "";
  position: absolute;
  right: 12px;
  top: 9px;
  background: #fff;
  width: 1.5px;
  height: 40px;
}

.border-right-after:after:first-child {
  width: 2px;
}

.we-innovate {
  position: relative;
  margin-top: 60px;
  margin-bottom: 80px;
}

.we-innovate .bg-fg-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.we-innovate h3 {
  font-size: 26px;
  font-weight: 700;
  color: #043357;
}

/* .timer-lenth-main {
  margin-bottom: 50px;
    margin-top: 50px;
} */

.timer-lenth-main .year-cont {
  padding-left: 5px;
  padding-right: 5px;

  text-align: center;
}

.ready-newupdate {
  max-width: 100%;
  margin: 0 auto;
}

.we-innovate h4 {
  font-size: 24px;
  color: #03355b;
  font-weight: 700;
}

.we-innovate p {
  margin-bottom: 5px;
}

a.know-more {
  background-color: #043357;
  color: #fff;
  border: none;
  text-decoration: none;
  /* padding: 15px 30px; */
  border-radius: 8px;

  &:hover {
    background-color: var(--accent-color);
    color: var(--bg-color);
  }
}

/* .services-bg {
  background-image: url(../img/bg-effects/services-bg.png);
} */

.services-bg img {
  width: 70px;
  margin: 10px auto 15px;
  height: 55px;
  object-fit: contain;
}

.services-offer h3 {
  font-size: 42px;
  font-weight: 700;
  color: #03487d;
}

.services-offer h4 {
  font-size: 22px;
  text-align: center;
  font-weight: 700;
  color: #03355b;
}

.services-offer {
  border-radius: 20px;
  box-shadow: 0 -2px 3px rgb(0, 0, 0, 0.1);
  background: linear-gradient(180deg,
      rgba(186, 215, 240, 1) 0%,
      rgba(255, 255, 255, 1) 100%);
}

.services-offer .img-overide-content {
  background-color: #000;
  color: #fff;
  padding: 15px;
}

.services-offer .img-overide-content h3 {
  font-size: 22px;
  color: #fff;
}

.tabs-section-logos-outer {
  padding: 0 30px;
}

.tabs-section-logos-outer .nav-link {
  color: #043357;
  border-radius: 6px;
  background: transparent;
}

.tabs-section-logos-outer .nav-link.active {
  border-radius: 6px;
  color: #fff;
  font-size: 18px;
  background: #043357;
}

.tabs-section-logos-outer .tabs-card-sections {
  border-radius: 20px;
  box-shadow: 0 -2px 3px rgb(0, 0, 0, 0.1);
}

.tabs-card-sections {
  background: rgb(186, 215, 240);
  background: linear-gradient(180deg,
      rgba(186, 215, 240, 1) 0%,
      rgba(255, 255, 255, 1) 100%);
  padding: 20px;
}

.tab-sec-hdngs .travel-solute {
  font-size: 18px;
}

/* elevate card  */
.elevate-card {
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  /* min-height: 400px; */

  img {
    height: 158px;
    object-fit: cover;
  }

  .card-content {
    padding: 15px;

    .card-title {
      font-size: 26px;
      color: #043357;
      font-weight: 700;
    }

    .card-subtitle {
      font-size: 18px;
      font-weight: 700;
      white-space: nowrap;
      -webkit-line-clamp: 1;
      line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    p {
      margin-top: 20px;
      min-height: 115px;
      margin-bottom: 0px;
      display: -webkit-box;
      line-clamp: 3;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
  }

  .learn-btn {
    display: flex;
    justify-content: end;
    padding: 15px;
    margin-top: auto;
    align-items: end;
    right: 10px;
    bottom: 0;
    position: relative;
    padding-top: 0px;

    a {
      font-size: 17px;
      font-weight: 600;
      text-decoration: none;
    }
  }
}


a.read-more-btn {
  text-decoration: none;
  /* color: #1692e5; */
  font-size: 16px;
  font-weight: 600;
}

.services-offer .img-overide-content {
  background-color: #00000045;
  color: #fff;
  padding: 15px;
  position: absolute;
  backdrop-filter: blur(2px);
  bottom: 0;
}

.slick-center .card-footer-content {
  display: block;
  margin-top: 10px;
}

.card-footer-content {
  display: none;
}

.card-footer-content p {
  font-size: 10px;
}

.card-footer-content h5 {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 2px;
}

.insights-inner h5 {
  font-weight: 600;
}



.tabs-section-logos-outer .slider-popup-card {
  text-align: center;
}

.tabs-section-logos-outer .slider-popup-card .card-content {
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
    rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
  margin-top: 10px;
  padding: 15px;
  height: 270px;
  place-content: center;
  border-radius: 8px;
}

.tabs-section-logos-outer .slick-center .card-content p {
  display: -webkit-box;
  -webkit-line-clamp: 6 !important;
  line-clamp: 6 !important;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tabs-section-logos-outer .slick-center .slider-popup-card .card-content {
  display: block;
  background-color: #034b73;
  color: #fff;
  height: 190px;
  box-shadow: none;
  place-content: center;
  position: relative;
  border-radius: 10px;
}

.tabs-section-logos-outer .slick-center .slider-popup-card .card-content::after {
  content: "";
  /* background-image: url(../img/icons/Hear-about2.png); */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  background-size: contain;
  left: 0;
  top: 30px;
  width: 20px;
  height: 30px;
  display: block;
  z-index: 10;
}

.tabs-section-logos-outer .slick-center .slider-popup-card .card-content::before {
  content: "";
  /* background-image: url(../img/icons/Hear-about3.png); */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  background-size: contain;
  right: 0;
  top: 30px;
  width: 20px;
  height: 30px;
  display: block;
  z-index: 10;
}

.tabs-section-logos-outer .slider-popup-card .card-content h5 {
  font-size: 14px;
  font-weight: 600;
}

.tabs-section-logos-outer .card-footer-logo {
  width: 150px;
  height: 50px;
  margin: 10px auto;
}

.tabs-section-logos-outer .slick-list {
  padding-bottom: 20px;
}

.tabs-section-logos-outer .card-footer-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.tabs-section-logos-outer .slider-popup .slick-center .slider-popup-card {
  margin: auto;
  text-align: center;
}

.tabs-section-logos-outer .slick-center .slider-popup-card {
  transform: scale(1.2);
  transition: transform 0.3s ease-in-out;
}

.footer .map-render {
  position: absolute;
  left: 0%;
  top: 112px;
  max-width: 400px;
  min-width: 250px;
  object-fit: contain;
}

.tabs-section-logos-outer .slick-track {
  padding: 0px 0px;
}

.tabs-section-logos-outer .slider-for .card-content {
  visibility: visible;
}

.tabs-section-logos-outer .slick-center .slider-popup-card .card-content p {
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  margin-bottom: 0px;
}

.tabs-section-logos-outer .slick-center .slider-popup-card .card-content h5 {
  margin-bottom: -1px;
  margin-top: 8px;
}

.tabs-section-logos-outer .slick-next:before {
  content: "\f101";
}

.tabs-section-logos-outer .slick-prev:before {
  content: "\f100";
}

.tabs-section-logos-outer .slick-prev {
  left: 25px;
}

.tabs-section-logos-outer .slick-next {
  right: 25px;
}

.tabs-section-logos-outer .slick-prev,
.tabs-section-logos-outer .slick-next {
  font-size: 0;
  line-height: 0;
  position: absolute;
  top: 50%;
  display: block;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  padding: 0;
  cursor: pointer;
  color: transparent;
  border: 0;
  outline: 0;
  background: transparent;
}

.tabs-section-logos-outer .slick-next {
  font-size: 0;
  position: absolute;
  top: auto;
  left: 20%;
  transform: translateX();
  margin: auto;
  margin-top: -10px;
  bottom: -32px;
}

.tabs-section-logos-outer .slick-prev {
  position: absolute;
  top: auto;
  display: block;
  width: 20px;
  left: 39%;
  bottom: -32px;
}

/* .slick-prev:before, .slick-next:before {
      font-family: 'FontAwesome';
      font-size: 18px;
      line-height: 1;
      padding: 6px;
      border-radius: 5px;
      opacity: .75;
      border: 1px solid #1580ba;
      color: #0d6495;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
  } */
/* .slick-prev:before {
  content: '\f104';
 }
.slick-next:before {
  content: '\f105';
} */
.services-offer .services-bg .card {
  display: flex;
  height: 100%;
  justify-content: space-between;
}

.tabs-section-logos-outer .slick-prev:before,
.tabs-section-logos-outer .slick-next:before {
  font-family: "FontAwesome";
  font-size: 27px;
  line-height: 1;
  padding: 6px;
  border-radius: 5px;
  opacity: 0.75;
  border: none;
  color: #03355b;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.slider-popup-card .card-content p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.slider-popup h3 {
  color: #03355b;
  font-size: 36px;
  font-weight: 700;
}


.trusted-by-mrkt-inner .hdngs h2 {
  font-size: 36px;
}

.prsn-flght-render {
  max-width: 400px;
}

.news-card-2 {
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
    rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  border-radius: 10px;
  overflow: hidden;
}

.latest-newsinsight .news-card-2 .insight-img {
  max-height: 350px;
  object-fit: cover;
  object-position: center;
}

.news-card-2 .img-overide-content {
  padding: 15px;
}

.news-card-2 .img-overide-content .card-title {
  font-size: 20px;
  font-weight: 600;
}

.latest-newsinsight {
  /* box-shadow: 0 2px 3px rgb(0, 0, 0, 0.1); */
  background: rgb(186, 215, 240);
  background: linear-gradient(0deg, #fff 0%, rgb(186 215 240) 100%);
  border-radius: 10px 10px 0px 0px;
}

.left-news-card {
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
    rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  border-radius: 10px;
  overflow: hidden;
}

.left-news-card .img-content {
  height: 207px;
}

.left-news-card .img-content img {
  height: 100%;
  object-fit: cover;
}

.img-content img {
  min-height: 200px;
  object-fit: cover;
}

.latest-newsinsight h4 {
  text-align: center;
  font-size: 18px;
}

.latest-newsinsight .card-title {
  color: #043357 !important;
  font-weight: 700;
  font-size: 36px;
}

.marquee {
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: relative;
}

.marquee--inner {
  display: flex;
  width: max-content;
  animation: scroll 50s linear infinite;
}

.marquee--inner-2 {
  display: flex;
  width: max-content;
  animation: scroll 13s linear infinite;
}

.marquee--inner-3 {
  display: flex;
  width: max-content;
  animation: scroll 40s linear infinite;
}

.marquee--inner-4 {
  display: flex;
  width: max-content;
  animation: scroll 23s linear infinite;
}

.marquee--inner:hover {
  animation-play-state: paused;
}

.marquee--inner-2:hover {
  animation-play-state: paused;
}

.marquee--inner-3:hover {
  animation-play-state: paused;
}

.marquee--inner-4:hover {
  animation-play-state: paused;
}

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

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

.orb {
  display: inline-block;
  margin: 0 24.7px;
  transition: all 0.4s ease-out;

  &.size-auto {
    img {
      min-height: auto !important;
      min-width: auto !important;
    }
  }
}

.orb img:hover {
  transform: scale(1.2);
  /* opacity: 0.5; */
  cursor: pointer;
  background-color: var(--hover-card-color);
}

.orb img {
  padding: 12px;
  background-color: #f3f3f3;
  border-radius: 12px;
  min-height: 102px;
  max-height: 102px;
  object-fit: contain;
  margin: 12px;
  max-width: 188px;
  min-width: 188px;
  transition: all 0.4s ease-out;

  @media only screen and (max-width: 767.5px) {
    max-width: 118px;
    min-width: unset;

  }
}

.orb.bg-none {
  && img {
    background-color: transparent !important;
  }
}

.custom-size {
  .orb img {
    max-height: 170px;
    max-width: 188px;
    min-width: 188px;
  }
}

.slick-disabled {
  opacity: 0.5;
}

@media (min-width: 1400px) and (max-width: 1728px) {
  .ready-newupdate .prsn-flght-render {
    max-width: 490px;
    border-radius: 8px;
  }
}

@media (min-width: 320px) and (max-width: 576px) {
  .tabs-card-sections {
    padding: 20px 0px;
  }

  .tabs-section-logos .module-tabs-outer .tab-content {
    padding: 10px;
  }

  .tabs-section-logos .logos-wrapper {
    display: grid !important;
    column-count: auto auto !important;
    grid-template-columns: auto auto;
    place-items: center;
  }

  .tabs-section-logos .logos-wrapper .line-brk {
    display: none;
  }

  .tabs-section-logos .module-tabs-outer .cont-box-tab img {
    max-width: 140px;
    min-width: 140px;
    min-height: 82px;
    max-height: 82px;
    object-fit: contain;
    margin: 10px;
  }

  .slider-popup .slick-slider .slick-slide {
    height: auto;
    place-content: end;
  }

  .slick-center .slider-popup-card .card-content {
    height: auto;
  }

  .trusted-by-mrkt-inner .hdngs h2 {
    font-size: 22px;
  }




  .module-tabs-outer .nav-tabs .nav-link {
    margin: 5px 10px;
  }

  .tabs-section-logos-outer .nav-link {
    font-size: 14px;
  }

  /* .tabs-section-logos-outer .slick-prev {
    top: 50%;
  left: -7%;
  } */

  /* .tabs-section-logos-outer .slick-next {
    top: 50%;
  right: -4%;
  } */

  .elevate-card {
    margin-bottom: 15px;
  }

  .col1 h2 {
    font-size: 18px;
  }

  .col2 h2 {
    font-size: 18px;
  }

  .col3 h2 {
    font-size: 18px;
  }

  .col1 {
    height: 170px;
    place-content: center;
  }

  .col2 {
    height: 170px;
    place-content: center;
  }

  .col3 {
    height: 170px;
    place-content: center;
  }

  .left-news-card .insights-inner {
    padding: 12px 0px;
  }

  .latest-newsinsight h4 {
    font-size: 16px;
  }

  .latest-newsinsight h3 {
    font-size: 22px;
  }

  .services-offer .db-tclr {
    font-size: 22px;
  }

  .tab-sec-hdngs .travel-solute {
    font-size: 16px;
  }

  .nexusaqua .ops-inner-box h1 {
    font-size: 22px;
  }


  .tabs-section-logos-outer .db-tclr {
    font-size: 22px;
  }

  .slick-center .slider-popup-card .card-content {
    height: 280px;
  }

  .slider-popup h3 {
    font-size: 22px;
  }

  .slick-track {
    padding: 0px 0px;
  }

  .slick-center .slider-popup-card .card-content::before {
    width: 15px;
  }

  .slick-center .slider-popup-card .card-content::after {
    width: 15px;
  }

  .slick-center .slider-popup-card .card-content p {
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    margin-bottom: 0px;
  }

  .slider-popup .slick-center .slider-popup-card {
    /* width: calc(100vw - 30px); */
    transform: translateX(0%);
  }

  .slick-center .slider-popup-card .card-content::after {
    top: 0px;
    display: none;
  }

  .slick-center .slider-popup-card .card-content::before {
    top: 0px;
    display: none;
  }

  .slider-popup-card .card-content {
    padding: 0px;
  }

  .slick-center .card-content p {
    -webkit-line-clamp: inherit !important;
    line-clamp: inherit !important;
  }

  .slick-prev {
    top: 90%;
    left: 19%;
  }

  .slick-next {
    top: 90%;
    right: 19%;
    left: auto;
  }

  .conference-cards .card {
    margin-bottom: 10px;
  }

  .services-bg .card {
    margin-bottom: 10px;
    height: auto !important;
  }

  .tabs-section-logos-outer {
    padding: 0 0px;
  }

  .tabs-section-logos .navbar .nav-tabs {
    row-gap: 0px;
  }

  .tabs-section-logos-outer .nav-link.active {
    font-size: 14px;
  }

  .border-right-after::after {
    display: none;
  }

  .col1 p {
    position: relative !important;
    top: 0px !important;
    left: 0 !important;
    display: none;
  }

  .col2 p {
    position: relative !important;
    top: 0px !important;
    left: 0 !important;
    display: none;
  }

  .col3 p {
    position: relative !important;
    top: 0px !important;
    left: 0 !important;
    display: none;
  }
}

/*------------------------------------------------------------------------------------------------------------
# css adjustments 
-------------------------------------------------------------------------------------------------------------*/

/*---------------------------------------
# global css 
--------------------------------------- */
.innerContent {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0.6s ease;

  &.visible {
    opacity: 1;
    visibility: visible;
  }
}

.customShadow {
  box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px,
    rgba(0, 0, 0, 0.05) 0px 4px 6px -2px !important;
}

.customShadow-1 {
  box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px !important;
}

.customShadow-2 {
  box-shadow: var(--card-shadow-inset) !important;
}

.card {
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px,
    rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
  /* border-color: rgba(0, 0, 0, 0.056); */
  border: 0;
  border-radius: 12px;

  &&.rounded-30 {
    border-radius: 30px;
  }

  &&.rounded-20 {
    border-radius: 20px;
  }

  .card-footer:last-child {
    border-radius: 0 0 12px 12px;
  }

  .card-link {
    text-decoration: none;
    color: var(--theme-color);

    &&:hover {
      text-decoration: none;
      color: var(--accent-color);
    }

    &&+.card-link {
      margin-left: 0px;
    }
  }
}

section,
.section {
  padding: 60px 0;
  scroll-margin-top: 72px !important;
  overflow: clip !important;
}

.gradient-section {
  --gradient-section-padding: 40px;

  .prduct-cntnt {
    font-size: 16px !important;
  }

  .agents-content {
    font-size: 18px;
    font-weight: 500;
  }

  .gradient-section-inner {
    border-radius: 25px;
    background: var(--lightgradient-color);
    padding: var(--gradient-section-padding);
  }

}

@media (max-width: 1199px) {

  section,
  .section {
    scroll-margin-top: 60px !important;
  }
}

.rounded-30 {
  border-radius: 30px !important;
}

.rounded-20 {
  border-radius: 20px !important;
}

.text-balance {
  text-wrap: balance !important;
}

.text-pretty {
  text-wrap: pretty !important;
}

.text-current {
  color: currentColor !important;
}

.langchangeBtn {
  padding: 8px 20px !important;
  all: unset !important;
}

.text-gray {
  color: #adadad !important;
}

.text-theme,
.text-primary {
  color: var(--theme-color) !important;
}

.text-accent {
  color: var(--accent-color) !important;
}

.link-primary {
  color: var(--theme-color) !important;
  text-decoration: none;

  &:hover {
    text-decoration: underline;
    opacity: 0.75;
  }
}

.link-accent {
  color: var(--accent-color) !important;
  text-decoration: none;

  &:hover {
    text-decoration: underline;
    opacity: 0.75;
  }
}

.bg-gray {
  background-color: var(--light-gray-color) !important;
}

.bg-theme {
  background-color: var(--theme-color) !important;
}

/* custom list */
.custom-list {
  padding-left: 1rem !important;
  list-style: var(--list-style);
  margin-bottom: 5px;

  li {
    padding-left: 0rem;
    list-style: var(--list-style);
    margin-bottom: 5px;
  }
}

/* positions  */
.bottom-15 {
  bottom: 15%;
}

.bottom-25 {
  bottom: 25%;
}

/* 
# accordian css 
---------------------------- */

.accordion {
  .accordion-item {
    .accordion-button {
      box-shadow: none !important;

      &:not(.collapsed) {
        background-color: var(--bg-color) !important;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px,
          rgba(0, 0, 0, 0.05) 0px 4px 6px -2px !important;
      }

      sup {
        margin-left: 1rem;
        color: var(--accent-color);
        font-size: medium;
      }
    }

    &:only-child {
      padding-bottom: 0;
    }
  }

  &&.rounded-30 {
    .accordion-item {
      &:first-child {
        border-top-right-radius: 30px;
        border-top-left-radius: 30px;
        overflow: hidden;
      }

      &:last-child {
        border-bottom-right-radius: 30px;
        border-bottom-left-radius: 30px;
        overflow: hidden;
      }
    }
  }
}


.cta-section {
  padding-bottom: 0px;
  margin-bottom: -60px;
  z-index: 2;

  .rdy-to-tak-exp {
    border-radius: 15px;
    background-image: url(/assets/img/banners/cta-bg-banner.webp);
    min-height: 360px;
    background-repeat: no-repeat;
    margin-inline: auto !important;
    place-content: center;
    z-index: 1;
    /* border: 7px solid var(--active-color); */
    padding: 0px;
    background-size: cover;
    background-position: top;
    border-radius: 27px;

    @media screen and (max-width: 767.5px) {
      background-position: left;
    }

    p {
      color: var(--theme-color) !important;
    }

    .cont-btn {
      background-color: var(--theme-color);
      color: var(--bg-color);
      font-weight: 600;
      border-radius: 30px;
    }

    .prsn-flght-2 img {
      border-radius: 8px;
      height: 350px;
      object-fit: cover;
    }
  }

  .cta-border {
    --cta-padding: 7px;
    padding: var(--cta-padding);
    border-radius: calc(27px + var(--cta-padding));
    background: var(--lightgradient-color);
    box-shadow: var(--accent-color-shadow) !important;
    background-clip: padding-box, border-box;
    background-origin: border-box;
    background-repeat: no-repeat;

    @media screen and (max-width: 575.5px) {
      max-width: 90%;
    }
  }
}

/* 
# footer
------------------------------------ */

.footer {
  padding-inline: 10px;
}

.footerLinksWrapper {
  display: grid;
  gap: 20px !important;
  row-gap: 10px;
  column-gap: unset;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  text-align: center;
  text-wrap: nowrap;

  && li {
    padding-inline: 5px !important;
  }
}

/*
# custom footer 
----------------------------------*/
.customFooter {
  position: relative;
  /* background: linear-gradient(135deg, #9aa7b5 0%, #4d6187 50%, #0f2237 100%); */
  /* background: linear-gradient(127deg, #a3d6f9 0%, #53596d 50%, #191c1e 100%); */
  /* background: #043357 !important; */
  /* background: linear-gradient(135deg, #0D1B2A 0%, #1B263B 50%, #415A77 100%); */
  background: linear-gradient(90deg, #003a65 0%, #1673b9 100%);
  padding: 120px 0px 30px;
  color: #fcfcfc;
  font-size: 16px;
  overflow-y: clip;
  overflow-x: hidden;

  img.map-render {
    position: absolute;
    left: 4%;
    top: 0px;
    max-width: 93%;
    z-index: 0;
    min-width: 250px;
    object-fit: cover;
  }

  .link-heading {
    font-size: clamp(18px, 4vw, 22px);
    position: relative;
    font-weight: 700;
    margin-bottom: 20px;
    color: #ffffff;
    letter-spacing: 0.5px;

    &::after {
      content: "";
      position: absolute;
      bottom: -7px;
      left: 0;
      width: 50px;
      height: 2px;
      background-color: var(--accent-color);
    }
  }

  a {
    color: #ffffff;
    text-decoration: none;
    display: inline-block;
    margin-bottom: 8px;
    transition: transform 0.4s cubic-bezier(0.075, 0.82, 0.165, 1),
      color 0.2s ease;
    /* transform-style: preserve-3d; */

    &:hover {
      color: #b9deff;
      /* transform: scale(1.2) rotateX(3deg) rotateY(3deg); */
      transform: translate(-5px);
    }
  }

  .logo img {
    max-width: 150px;
  }

  .cert img {
    height: 60px;
    margin-right: 10px;
  }

  .customFooter-bottom {
    padding-top: 20px;
    font-size: 14px;
    color: #aaa;
  }
}

/* buttons
-------------------------------------*/
.customBtn {
  background-color: var(--theme-color);
  padding: 17px 40px;
  border-radius: 50px;
  cursor: pointer;
  display: inline-block;
  border: 0;
  color: white;
  box-shadow: rgb(0 0 0 / 5%) 0 0 8px;
  letter-spacing: 1.5px;
  font-size: 15px;
  transition: all 0.5s ease;

  &.btn-sm {
    padding: 10px 20px;
  }
}

.customBtn:hover {
  letter-spacing: 3px;
  background-color: var(--accent-color);
  color: hsl(0, 0%, 100%);
  box-shadow: var(--accent-color-shadow) 0px 7px 29px 0px;
}

.customBtn:active {
  letter-spacing: 3px;
  background-color: var(--accent-color);
  color: hsl(0, 0%, 100%);
  box-shadow: var(--accent-color-shadow) 0px 0px 0px 0px;
  transform: translateY(10px);
  transition: 100ms;
}

.customBtn1 {
  padding: 12.5px 30px;
  border: 0;
  border-radius: 100px;
  background-color: var(--theme-color);
  color: #ffffff;
  font-weight: Bold;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
}

.customBtn1:hover {
  background-color: var(--accent-color-shadow);
  box-shadow: 0 0 20px #6fc5ff50;
  /* transform: scale(1.1); */
}

.customBtn1:active {
  background-color: var(--theme-color);
  transition: all 0.25s;
  -webkit-transition: all 0.25s;
  box-shadow: none;
  transform: scale(0.98);
}

.btn-primary,
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus {
  background-color: #4571A5;
  border-color: #4571A5;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  border-radius: 8px;
  padding: 12px 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 50px;
  box-shadow: none;
}

/* 
# layout
------------------------------- */
.innerContent {
  min-height: calc(100dvh - 40px);

  & .blogPageLayout {
    padding-bottom: 2rem;

    section,
    .section {
      padding: 50px 0 !important;
      scroll-margin-top: 72px !important;
      overflow: clip !important;

      &&.banner-hero {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
      }
    }

    & .contentArea {
      position: relative;
      /* height: calc(100dvh - 40px) !important;
            overflow-y: auto; */

      .blogSidebarToggle {
        position: sticky;
        top: 0px;
        height: 1px;
        left: 0;
        z-index: 5;
        transform: translateX(0px);
        transition: all 0.35s ease;
        transition-delay: 30ms;

        & span {
          margin: 8px 0 !important;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          background: var(--accent-color);
          border-radius: 12px;
          width: 50px;
          height: 50px;
          color: var(--bg-color);
        }

        &[aria-expanded="false"] {
          transform: translateX(-15px);

          span div {
            transform: rotateY(180deg);
          }
        }
      }
    }

    & .blogPageSidebar,
    .blogPageSidebar1 {
      display: none;

      &.collapsing,
      &.collapse.show {
        width: 0px;
        padding: 0;
        overflow: hidden;
        transition: all 0.35s ease;
      }

      @media only screen and (min-width: 993px) {
        display: block;
        height: calc(100dvh - 60px) !important;
        top: 70px;
      }

      @media only screen and (max-width: 1200px) {
        height: calc(100dvh - 56px) !important;
        top: 56px;
      }
    }
  }
}

/*-------------------------------
# navbar css 
----------------------------------- */
.top-nav {
  box-shadow: var(--shaow-10) 0px 1px 20px 0px, var(--shaow-24) 0px 1px 3px 0px;
  --list-heading-color: #195379;
  --list-heading-bg: var(--active-color);
  --list-item-hover-bg: var(--active-color) !important;
  --list-item-hover-border: 2px solid #2395d4 !important;
  --list-item-radius: 10px 0px 10px 0px !important;
  --link-width-inner: 250px;

  padding: 0;

  .logo {
    max-height: 45px;
  }

  .offcanvas {
    --bs-offcanvas-width: 600px !important;

    .offcanvas-body {
      .navbar-nav {
        --link-size: 18px;
        --link-size-inner: 17px;
        --link-font-weight: 600;

        .nav-item {
          transition: 0.8s linear;

          .nav-link {
            font-size: var(--link-size) !important;
            font-weight: var(--link-font-weight);
            color: var(--black-color);

            &.active {
              color: var(--color-active);
            }
          }

          &.custom-dropdown {
            transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
            position: static;

            .custom-dropdown-menu {
              display: none;

              .custom-dropdown-menu-inner {
                display: flex;
                flex-grow: 1;
                flex-direction: column;
                row-gap: 0.65rem;

                .list-heading {
                  color: var(--list-heading-color);
                  display: inline;
                  padding: 0.4rem 1rem;
                  border-radius: 4rem;
                  border-bottom: 1px solid var(--accent-color);
                  background-color: var(--list-heading-bg);
                  font-weight: 600;
                  text-transform: capitalize;
                }

                .list-grid {
                  /* display: flex;
                  flex-direction: column;
                  row-gap: 0.5rem; */
                  display: grid;
                  grid-template-columns: repeat(auto-fit, minmax(calc(var(--link-width-inner) - 40px), 1fr));
                  gap: 1rem;
                  row-gap: 0.5rem;

                  .list-item {
                    padding: .5rem;
                    text-decoration: none;
                    color: currentColor;
                    font-size: var(--link-size-inner);
                    border-radius: var(--list-item-radius);
                    max-width: 300px !important;
                    min-width: var(--link-width-inner) !important;
                    min-height: 80px;
                    border: 2px solid transparent;
                    transition: all 0.5s linear;
                    position: relative;
                    z-index: 5;
                    overflow: hidden !important;

                    &::after {
                      content: "";
                      background: var(--list-item-hover-bg);
                      display: block;
                      width: 110%;
                      height: 120px;
                      z-index: -1;
                      top: 0px;
                      left: -2px;
                      position: absolute;
                      transform: translateX(calc(-1 * var(--link-width-inner) - 100%)) !important;
                      transition: 0.6s;
                    }

                    &.active {
                      background-color: var(--color-primary);
                      color: var(--color-white);
                    }

                    &:is(:hover) {
                      box-shadow: var(--shaow-10) 0px 1px 20px 0px, var(--shaow-10) 0px 1px 3px 0px;
                      color: var(--list-heading-color);
                      border-top: var(--list-item-hover-border);
                      border-left: var(--list-item-hover-border);

                      &:after {
                        transform: translateX(0%) !important;
                      }

                      /* .item-heading,
                      .item-desciption {
                        color: var(--color-active) !important;
                      } */
                    }

                    .item-heading {
                      transition: color .4s ease;
                      font-size: calc(var(--link-size-inner) + 1px);
                      font-weight: bold;
                      color: var(--theme-color) !important;
                    }

                    .item-desciption {
                      transition: color .4s ease;
                      font-size: calc(var(--link-size-inner) - 1px);
                      opacity: 0.75;
                      color: var(--black-color) !important;
                    }
                  }
                }

              }
            }

            &.products,
            &.services,
            &.resources,
            &.about {
              padding: 1rem 0.5rem !important;

              &:hover {
                .custom-dropdown-menu {
                  display: block;
                }
              }
            }
          }
        }

        .ctaSection {
          padding: 1rem;
          display: flex;
          align-items: center;
          justify-content: space-around;
          background-image: linear-gradient(259deg, rgba(77, 169, 219, 1) 0%, rgba(8, 56, 93, 1) 100%);

          .dropdown-menu {
            position: absolute;
          }
        }
      }
    }
  }
}


/* 
  #grid Wrappers
  ---------------------------- */
.services-cardsWrapper {
  display: grid;
  gap: 15px;
  row-gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));

  &.solutionCards {
    .card {
      margin-bottom: 0px;
      padding: 20px;
      background-color: transparent;

      .card-title {
        min-height: 55px;
        margin-bottom: 3px;
        font-size: 19px;
      }

      .card-img {
        background-color: var(--bg-color);
        border-radius: 50%;
        width: 110px;
        aspect-ratio: 4/4;

        img {
          max-width: 70%;
          object-fit: contain;
        }
      }
    }
  }
}

.servicesWrapper {
  --grid-column-size: 250px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--grid-column-size), 1fr));
  gap: 1rem;

  .tech-services {
    border-radius: 10px !important;

    .card-img-top {
      aspect-ratio: 9/5;
    }

    .card-body {
      .card-title {
        color: var(--theme-color);
        font-size: clamp(17px, 1vw, 19px) !important;
        height: 30px !important;
      }

      .card-text {
        font-size: clamp(14px, 1vw, 16px) !important;
      }
    }
  }
}

.logosWrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 15px;
  row-gap: 10px;
}

.logosWrapper1 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-template-rows: 102px;
  place-content: center;
  place-items: center;
  gap: 15px;
  row-gap: 20px;

  &.d-inline-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 15px !important;
  }

  && .logoCont,
  .logoCont div {
    padding: 12px;
    background-color: #f3f3f3;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 102px;
    min-width: 88px;
    /* max-width: 150px; */
    overflow: hidden;
    transition: transform 0.3s ease;

    & img {
      object-fit: contain;
      width: 100%;
      height: 100%;
      transition: transform 0.6s ease;
      transform-style: preserve-3d;
    }

    &:hover {
      transform: translateY(-10px);
      /* background-color: #b5bcff; */

      /* & img {
        transform: rotateY(360deg);
      } */
    }
  }

  @media only screen and (max-width: 576px) {
    grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  }
}

.fs-7 {
  font-size: 0.885rem;
}

.fs-20 {
  font-size: 20px !important;
}

.fs-18 {
  font-size: 18px !important;
}

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
  text-align: center;
  padding-bottom: 30px;
  /*/// padding-bottom: 60px; */
  position: relative;

  &:not(:has(p)) {
    /* padding-bottom: 30px; */
    padding-bottom: 20px;
  }

  && p {
    margin-bottom: 0;
    /* font-size: clamp(16px, 5vw, 22px); */
    font-size: clamp(16px, 2vw, 22px);
    color: #043357;
    font-weight: 600;
  }

  &.font-36 :is(h2, h1) {
    font-size: clamp(20px, 4vw, 36px) !important;
  }
}

.section-title :is(h2, h1) {
  /* font-size: clamp(25px, 5vw, 42px); */
  font-size: clamp(19px, 3.5vw, 40px);
  /* background: var(--text-gradient-color) !important; */
  background: var(--theme-color) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-weight: 500;
  margin-bottom: 10px;
  padding-bottom: 20px;
  position: relative;

  &&:before {
    content: "";
    position: absolute;
    display: block;
    width: 160px;
    height: 1px;
    background: color-mix(in srgb, var(--theme-color), transparent 60%);
    left: 0;
    right: 0;
    bottom: 1px;
    margin: auto;
  }

  &&::after {
    content: "";
    position: absolute;
    display: block;
    width: 60px;
    height: 3px;
    background: var(--accent-color);
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
  }
}

/*
# text truncation 
-----------------------------*/
.twolineTrunc,
.threeLineTrunc,
.fourLineTrunc {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;

  &.twolineTrunc {
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  &.threeLineTrunc {
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }

  &.fourLineTrunc {
    -webkit-line-clamp: 4;
    line-clamp: 4;
  }
}

/*---------------------------------
# slick nav
---------------------------------- */
.testi-slider {
  && .element {
    border: 1px solid #74CDFF;
    border-radius: 20px;
    box-shadow: 0 3px 3px rgb(0, 0, 0, 1);
    overflow: hidden;
    background-color: transparent;
    margin: 0 12px;

    && .card {
      min-height: 540px;

      && .img-top {
        border-bottom: 1px solid var(--theme-color);
        /* margin-bottom: 10px; */
      }

      && .card-title {
        height: 300px;
        overflow-y: auto;
        padding-inline: 8px;
        font-size: 15px;
        text-wrap: balance;
        margin-bottom: 0;
      }
    }
  }

  .card {
    .img-top {
      max-width: 200px;
      min-width: 80px;
      max-height: 52px;
      min-height: 52px;
      border: 0;
      border-radius: 0;
      margin: 0 auto 40px 0;
    }

    .card-body {
      padding: 0;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: start;

      .card-title {
        font-size: 16px;
        line-height: 25px;
        margin-bottom: 40px;
      }
    }
  }

  .btn-primary {
    background-color: transparent;
    border: 3px solid #000;
    color: #000000 !important;
    min-width: 55px;
    max-width: 55px;
    min-height: 55px;
    max-height: 55px;
    border-radius: 50%;
    text-align: center;
    padding: 13px 7px;
    position: absolute;
    top: 45%;

    &:hover {
      background-color: var(--theme-color);
      color: var(--bg-color) !important;
    }

    .slick-next {
      right: -60px;
    }

    .slick-prev {
      left: -4px;
    }

    i {
      font-size: 26px;
    }

    @media only screen and (max-width: 576px) {
      &&.slick-prev {
        right: 150px !important;
        transform: translate(-50%, 65%);
        bottom: 0;
        top: auto;
      }

      &&.slick-next {
        right: 150px !important;
        transform: translate(100%, 65%);
        bottom: 0;
        top: auto;
      }
    }
  }
}

.slick-next:before {
  content: unset !important;
}

.slick-prev:before {
  content: unset !important;
}

.logos-slider-sec {
  display: flex;
  justify-content: center;
  align-items: center;
  animation: 60s slide infinite linear;
  margin: 0 auto;

  &:hover {
    animation-play-state: paused;

    img {
      filter: blur(0);

      &:hover {
        filter: blur(0px);
      }
    }
  }

  img {
    width: 100%;
    max-width: 220px;
    margin-top: 15px !important;
    margin-bottom: 15px !important;
    margin: 0 40px;
    padding: 12px;
    background-color: #f3f3f3;
    border-radius: 12px;
    min-height: 102px;
    max-height: 102px;
    object-fit: contain;
    margin: 12px;
    max-width: 188px;
    min-width: 188px;
    display: inline-block;
    transition: all 0.5s ease-in-out;
    mix-blend-mode: multiply;
    border-radius: 12px;

    &:hover {
      transform: translateY(-10px) scale(1.1);
      filter: drop-shadow(0px 1px 2px rgba(60, 64, 67, 0.3));
      background-color: var(--hover-card-color);
      scale: 1.001;
    }
  }
}


.logos-slider-sec-ltr {
  animation: 60s slide-ltr infinite linear;
}

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

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

@keyframes slide-ltr {
  100% {
    transform: translateX(0);
  }

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

.cards-slider-trns .slick-list.draggable {
  padding-top: 20px;
  padding-bottom: 40px;

}

.cards-tbg .cards-slider-trns.cardsHeight-auto .element .card {
  /* padding: 30px 10px 10px !important; */
  max-height: 400px !important;
  height: 100vh;
}

/*--------------------------------------------------
#navs and tabs  
---------------------------------------------------*/
.navbar:has(.customNavs, .partners-customNavs) {
  justify-content: center;
}

.customNavs {
  gap: 15px;
  margin-bottom: 20px;
  row-gap: 5px !important;
  justify-content: center !important;

  && .nav-link {
    padding: 12.5px 30px;
    color: var(--black-color);
    border: 0;
    border-radius: 100px;
    background-color: transparent;
    font-weight: Bold;
    font-size: 18px;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;

    &&:hover {
      background-color: #4f626f;
      color: #ffffff;
    }

    &&.active {
      color: #ffffff;
      background-color: var(--theme-color);
    }
  }
}

.partners-customNavs {
  gap: 15px;
  margin-bottom: 20px;
  row-gap: 5px !important;
  justify-content: center;

  && .nav-link {
    color: var(--theme-color);
    padding: 7.5px 18px;
    border: 0;
    border-radius: 100px;
    background-color: transparent;
    font-weight: Bold;
    font-size: 18px;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;

    &&:hover {
      background-color: #4f626f;
      color: #ffffff;
    }

    &&.active {
      color: #ffffff;
      background-color: var(--theme-color);
    }
  }
}

.customMapNav {
  border: 0;

  && .nav-link {
    background-color: white;
    color: var(--theme-color);
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;

    &&:is(:hover, .active) {
      background-color: var(--theme-color);
      color: #fff !important;
    }

    /* &&.active {
            color: #fff !important;
            background-color: var(--theme-color);

        } */
  }
}

/* ------------------------------
#custom inputs
------------------------------- */
.customInput {
  position: relative;
  margin: 20px 0 40px;
  min-width: 190px;

  label {
    position: absolute;
    top: 15px;
    left: 0;
    pointer-events: none;

    span {
      display: inline-block;
      font-size: 18px;
      font-weight: bold;
      min-width: 5px;
      color: var(--theme-color);
      transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }
  }

  input,
  textarea,
  select {
    background-color: transparent;
    border: 0;
    border-bottom: 2px var(--theme-color) solid;
    display: block;
    width: 100%;
    padding: 15px 0;
    font-size: 18px;
    font-weight: 600;
    color: #000000;
    outline: none;
    appearance: none;

    &::placeholder {
      color: transparent !important;
    }

    /* &:is(:focus, :valid) { */
    &:is(:focus, :valid, :not(:placeholder-shown)) {
      outline: 0;
      border-bottom-color: var(--accent-color);
    }

    /* &:is(:focus, :valid)+label span { */
    &:is(:focus, :valid, :not(:placeholder-shown))+label span {
      color: var(--accent-color);
      transform: translateY(-30px);
    }

    /* &:is(:focus)+label span,
    &:is(:valid)+label span {
      color: var(--accent-color);
      transform: translateY(-30px);
    } */
  }

  input[type="file"] {
    padding: 21px 0 10px 0;
    color: var(--theme-color);

    &:valid::file-selector-button {
      display: none;
    }

    &::file-selector-button {
      background-color: var(--accent-color);
      color: white;
      border: none;
      font-size: small;
      padding: 3px 10px;
      font-weight: bold;
      cursor: pointer;
      border-radius: 4px;
      transition: background-color 0.3s ease;

      &:hover {
        background-color: darken(var(--accent-color), 10%);
      }
    }

  }

  select {
    padding: 21px 0 10px 0px;
    padding-inline-start: 10px;

    option {
      color: black;
    }
  }

  .inputAltText {
    font-size: small;
    color: var(--accent-color);
  }

  &.isFocused {

    input,
    textarea,
    select {
      border-bottom-color: var(--accent-color);
    }

    input[type="file"] {
      border-bottom-color: var(--accent-color);
    }

    label span {
      color: var(--accent-color);
      transform: translateY(-30px);
    }
  }
}

/* custom  checkbox */
.customCheckBox {
  display: block;
  align-items: center;
  position: relative;
  cursor: pointer;
  font-size: 20px;
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  input {
    display: none;

    &:checked~.checkmark {
      background-color: #2196f3;

      &:after {
        left: 0.45em;
        top: 0em;
        width: 0.5em;
        height: 1em;
        border-color: #fff0 white white #fff0;
        border-width: 0 0.15em 0.15em 0;
        border-radius: 0em;
        transform: rotate(45deg);
      }
    }
  }

  .checkmark {
    position: relative;
    top: 0;
    left: 0;
    height: 1.3em;
    width: 1.3em;
    background-color: #2196f300;
    border-radius: 0.25em;
    transition: all 0.25s;

    &:after {
      content: "";
      position: absolute;
      transform: rotate(0deg);
      border: 0.1em solid black;
      left: 5px;
      top: 5px;
      width: 1.05em;
      height: 1.05em;
      border-radius: 0.25em;
      transition: all 0.25s, border-width 0.1s;
    }
  }
}

/* ------------------------------
#custom cards
------------------------------- */
.custom-card {
  background-color: var(--bg-color);
  color: var(--theme-color);
  border-radius: 20px;
  padding: 30px 20px;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);

  &:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 25px var(--accent-color-shadow);

    .custom-card-bg {
      transform: scale(10);
      background-color: var(--accent-color);
      /* Color change on hover */
    }

    .card-title,
    .card-body p {
      color: var(--bg-color);
    }

    .card-img {
      transform: translateY(-10px);
    }
  }

  .custom-card-bg {
    height: 128px;
    width: 128px;
    background-color: var(--theme-color);
    /* Original color */
    position: absolute;
    top: -75px;
    right: -75px;
    border-radius: 50%;
    z-index: 0;
    transition: all 0.5s ease;
  }

  .image-container {
    background-color: #f5f8fa;
    border-radius: 1.2rem;
    /* Like rounded-4 or rounded-5 */
    padding: 1.2rem;
    width: 100px;
    height: 100px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }

  .custom-card-img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
  }

  .card-img,
  .card-body,
  .card-title {
    position: relative;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    z-index: 1;
  }

  .card-title {
    font-size: 1.5rem;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    color: var(--theme-color);
  }

  .card-body p {
    font-size: 1rem;
    line-height: 1.5;
    color: var(--theme-color);
  }
}

/* ------------------------------
#services section
------------------------------- */
.hoverCards,
.hoverCards1 {
  &&.cardBorder {
    .card {
      border: 1px solid !important;
    }
  }

  .card {
    transition: all 0.3s ease;
    transform: scale(1);
    border: 0 !important;

    &:hover {
      opacity: 1;
      transform: scale(1.05);
      background-color: var(--hover-card-color) !important;
    }

    &:not(:is(.post-bx-nw)) {
      background-image: none;
    }
  }

  &:hover .card:not(:hover) {
    /* opacity: 0.5; */
    transform: scale(1);
    /* filter: blur(3px); */
  }

  &.hoverCards1 {
    .card {
      &:hover {
        transform: scale(0.97) !important;
        background-color: var(--hover-card-color-1) !important;
      }
    }
  }
}

.hoverCards {
  &.cards-slider-trns {
    .card {
      margin-bottom: 0 !important;
    }
  }

  .slick-slide .card {
    opacity: 1;
    transform: scale(1);
    transition: all 0.3s ease;
    /* background-color: #f8f8f8; */
  }

  .slick-slide.slick-active .card:hover {
    transform: scale(1.05);
    background-color: var(--hover-card-color);
    z-index: 2;
  }

  .slick-slide.slick-active .card:hover~.slick-slide.slick-active .card {
    opacity: 0.2;
  }

  .slick-slide.slick-active .card:not(:hover) {
    opacity: 1;
  }
}

/*---------------------------------------------------------
# Animations
---------------------------------------------------------- */
/* Waves Animation */
.animationsCont {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  overflow: hidden;
}

.pulse-wrapper {
  position: relative;
  z-index: -1;
  width: 320px;
  height: 320px;
  border-radius: 50%;

  .pulse-wave {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    border: 2px solid rgba(22, 146, 229, 0.5);
    border-radius: 50%;

    -webkit-transform: translate(-50%, -50%) scale(2);
    -moz-transform: translate(-50%, -50%) scale(2);
    transform: translate(-50%, -50%) scale(2);

    opacity: 0;
    -webkit-animation: pulse-wave 2.5s ease-out infinite;
    -moz-animation: pulse-wave 2.5s ease-out infinite;
    animation: pulse-wave 2.5s ease-out infinite;

    pointer-events: none;
    z-index: 1;

    &:nth-child(1) {
      animation-delay: 0s;
    }

    &:nth-child(2) {
      animation-delay: 0.3s;
    }

    &:nth-child(3) {
      animation-delay: 0.6s;
    }

    &:nth-child(4) {
      animation-delay: 0.9s;
    }

    &:nth-child(5) {
      animation-delay: 1.2s;
    }
  }
}

@-webkit-keyframes pulse-wave {
  0% {
    -webkit-transform: translate(-50%, -50%) scale(0.5);
    opacity: 0.6;
  }

  70% {
    -webkit-transform: translate(-50%, -50%) scale(1.6);
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@-moz-keyframes pulse-wave {
  0% {
    -moz-transform: translate(-50%, -50%) scale(0.5);
    opacity: 0.6;
  }

  70% {
    -moz-transform: translate(-50%, -50%) scale(1.6);
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@keyframes pulse-wave {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0.6;
  }

  70% {
    transform: translate(-50%, -50%) scale(1.6);
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}


/* CAREER PAGE CSS */


.testimonial_slider .owl-item.center .card {
  height: auto;
}

.testimonial_slider .owl-item.center .card img {
  transform: scale(1.3);
  border: none;
  height: auto;
  padding: 0;
  box-shadow: none;
  border-radius: 0;
}

.testimonial_slider .owl-item.center .card-body,
.testimonial_slider .owl-item.center .image-wrapper {
  display: block;
}

.testimonial_slider .owl-item .card-body,
.testimonial_slider .owl-item .image-wrapper {
  display: none;
}

/* body .testimonial_slider .owl-item.center{
    width: 600px !important;
} */
/* .testimonial_slider .owl-item.active{
    width: 237px !important;
} */
@media screen and (max-width: 990px) {
  .pro-tmc {
    padding: 0 16px;
  }

  .seg-text {
    padding-bottom: 0;
    padding-top: 15px;
    word-break: break-word;
  }
}

.menu-box2:hover h4,
.menu-box2:hover p {
  color: #fff;
}

@media screen and (max-width: 576px) {
  .testimonial_slider .owl-item.center .card img {
    transform: none;
  }

  .testimonial_slider img {
    max-width: 220px !important;
  }

  .testimonial_slider .card-body h5:after {
    top: -24px;
    left: -10px;
  }

  .testimonial_slider .card {
    height: auto;
  }

  .hidden {
    display: none;
  }

  p {
    margin: 0;
    padding: 0;
    display: block;
  }

  .welcome-text {
    display: none;
  }

  .abt-bg {
    padding: 10px;
    background: linear-gradient(180deg, #4490df 9.8%, #7bb9c100 70.91%);
  }

  .cookies {
    display: block;
    padding: 12px;
  }

  .cookie-content {
    width: 100%;
    padding-bottom: 10px;
  }

  .cookies p {
    font-size: 12px;
  }

  .buttons-dec {
    width: 100%;
    display: flex;
  }

  .decline {
    font-size: 16px;
    margin: 0px 10px;
    width: auto !important;
  }

  .accept {
    font-size: 16px;
    margin: 0px;
    width: auto !important;
  }
}

/*------------------------------------------------------------
# About Us
-------------------------------------------------------- */
.emp-bsns-sec-inner-box .card:hover .d-rendr {
  display: block;
}

.prsn-flght-render {
  /* top: 44px;
    bottom: auto; */
  max-width: 600px !important;
}


/* responsive here below */
@media (min-width: 1400px) and (max-width: 1728px) {

  .all-cont-boxes .card label {
    font-size: 19px;
  }

  .text-cont-big h2 {
    font-size: 46px;
  }
}

@media (max-width: 1399.98px) {

  .all-cont-boxes .card label {
    font-size: 19px;
  }

  .text-cont-big h2 {
    font-size: 46px;
  }
}

.w-28 {
  width: 28%;
}

.w-72 {
  width: 72%;
}

.w-90 {
  width: 90%;
}

.h-90 {
  height: 90%;
}

.h-80 {
  height: 80%;
}

.max-w-90 {
  max-width: 90%;

}

.h-max-260 {
  max-height: 260px;
}

.object-position-center {
  object-position: center !important;
}

.object-position-top {
  object-position: top !important;
}

.locationTextArea {
  min-width: 35%;
  background: linear-gradient(36deg, rgb(227, 243, 255) 0%, 11.1438%, rgb(203 237 255) 39.2876%, 60.1438%, rgb(255 255 255) 100%);
  display: flex;
  flex-direction: column;
  align-items: start;
  padding: 30px 30px;
  position: relative;
  left: 0;
  top: 0;
  z-index: 2;

  @media only screen and (max-width: 767.5px) {
    width: 100%;

    .location-area-inner {
      .nav-link {
        transform: rotate(90deg);
      }
    }

    h5 {
      text-align: center;
    }
  }

  @media only screen and (min-width: 768px) {
    max-width: 350px;
  }
}

.locationHeadingText {
  font-size: clamp(15px, 5vw, 22px);
}

.location-map-prt {
  .tab-pane {
    display: none;

    &&.active {
      display: block;
    }
  }
}

/*------------------------------------------------------------
# services page
-------------------------------------------------------- */
.banr-bg-render-services {
  object-fit: cover !important;
  object-position: top !important;
  width: 100% !important;
  max-width: 100% !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  margin-left: 0px !important;
  margin-right: 0px !important;
  max-height: 430px !important;
}

.our-services-content {
  font-size: 18px;
}

.small-text {
  font-size: 22px;
  color: #043357;
  font-weight: 600;
}

.subheading-tech {
  font-size: 20px !important;
  color: #043357 !important;
  font-weight: 600 !important;
}

.cont-sec span {
  font-size: 21px;
}

.rttib-cont {
  max-width: 562px;
}

#nexuswind .prsn-flght-render {
  max-width: 492px;
  top: 44px;
}

.re-sa-new img {
  border-radius: 10px;
  max-width: 560px;
}

.re-sa-new-2 img {
  border-radius: 10px;
  max-width: 100% !important;
}

.rep-anl img {
  height: 394px;
}

.unfcop-trvl-card {
  max-width: 100%;
  margin-bottom: 20px !important;
  padding: 5px !important;
}

.logos-wrapper img {
  max-width: 188px;
  min-width: 188px;
  padding: 12px;
  background-color: #f3f3f3;
  border-radius: 12px;
  min-height: 102px;
  max-height: 102px;
  object-fit: contain;
  margin: 8px;
  transition: all 0.6s ease-in-out;

  &:hover {
    transform: translateY(-10px) scale(1.1);
    /* filter: drop-shadow(0px 1px 2px rgba(60, 64, 67, 0.3)); */
    background-color: var(--hover-card-color) !important;
    padding: 5px;
  }
}

.grad-bottom {
  background: linear-gradient(0deg, rgba(186, 215, 240, 1) 0%, rgba(255, 255, 255, 1) 100%);
  border-radius: 10px 10px 0px 0px;
  padding: 50px 30px;
}

.grad-top {
  background: linear-gradient(0deg, #fff 0%, rgb(186 215 240) 100%);
  border-radius: 10px 10px 0px 0px;
  padding: 50px 30px;
}

@media (min-width: 320px) and (max-width: 576px) {

  .logos-wrapper img {
    max-width: 100px;
    min-width: 120px;
    min-height: 66px;
    max-height: 66px;
  }

  .mn-title {
    font-size: 32px;
  }

  .re-sa-new img {
    border-radius: 10px;
    max-width: 100%;
  }

  .prsn-flght-render {
    position: relative;
    opacity: 100% !important;
  }

  .rttib-cont h2 {
    font-size: 24px;
    line-height: 30px;
  }

  .rttib-cont p {
    line-height: 26px;
    font-size: 16px;
  }

  .rep-anl img {
    height: 100% !important;
  }
}

/*------------------------------------------------------------
# card image modal css 
-------------------------------------------------------- */
.img-modal-trigger {
  cursor: zoom-in;
  transition: transform 0.2s ease;

  &:hover {
    transform: scale(1.03);
    cursor: url("../img/icons/expand-icon.svg") 40 40, zoom-in;

    &+.expand-icon {
      opacity: 0;
      transition: opacity 0.3s ease;
      pointer-events: none;
    }

    &:hover+.expand-icon {
      opacity: 1;
    }
  }

  &.scale-unset {
    &:hover {
      transform: scale(1);
    }
  }
}

/*------------------------------------------------------------
# NEWSROOM Css
-------------------------------------------------------- */
.masonry-column {
  column-count: 3;
  column-gap: 1rem;
}

.masonry-block {
  margin-bottom: 1rem;
  break-inside: avoid;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  /* padding: 1rem; */
  color: currentColor;
}

.newsRoomTopCard {
  @media only screen and (min-width:768PX) {
    max-height: 310px;
  }
}

@media (max-width: 992px) {
  .masonry-column {
    column-count: 2;
  }
}

@media (max-width: 576px) {
  .masonry-column {
    column-count: 1;
  }
}

/*------------------------------------------------------------
# blogs page css
-------------------------------------------------------- */
/*
# blog side bar css 
--------------------------------*/
.blogPageSidebar {
  background-color: #043357;

  .header-box {
    border-bottom: 2px solid #b6b6b6;

    h5 {
      font-size: 23px;
      font-weight: 700;
      color: var(--bg-color);
    }

    .date {
      span {
        color: #b3deff;
      }
    }
  }
}

.customBlogNav {

  /* border: 1px solid var(--bg-color); */
  & .nav.nav-pills {
    & .nav-link {
      padding: 3px 1rem;
      font-size: 16px;
      border: 2px solid transparent;
      border-radius: 0 !important;
      color: var(--bg-color);
      font-weight: 400;
      transition: all 0.8s ease;

      &.active {
        color: var(--accent-color);
        font-weight: 700;
        padding: 0px 10px;
        border-left: 3px solid var(--bg-color) !important;
        transform: scaleY(1.1);
      }
    }
  }
}

/* # blog cards  
--------------------------------*/
.blogswrapper-section {

  /* padding-top: 0.5rem !important; */
  .latest-top-blog {
    width: 100%;

    .card-img {
      height: 450px;
      min-height: max-content;
      max-height: 500px;
      border-radius: 16px;
      margin-bottom: 0;
    }

    .card-img-overlay {
      background-color: rgba(0, 0, 0, 0.473);
      /* top: calc(100% - 180px); */
      top: unset;
      border-radius: 0 0 16px 16px;
      min-height: 180px;

      & .card-title,
      .card-text {
        color: var(--bg-color) !important;

        &.card-title {
          font-size: clamp(23px, 3dvw, 40px) !important;
        }

        &.card-text {
          font-size: clamp(17px, 2dvw, 24px) !important;
        }

        /* color: white; */
      }
    }
  }
}

.blog-card {

  &.card,
  & .card {
    & .card-img-top {
      border-radius: 12px !important;
      border-bottom-left-radius: 0 !important;
      border-bottom-right-radius: 0 !important;
    }

    .card-title,
    .card-text {
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;

      small {
        font-weight: 600;
      }
    }

    .card-title {
      font-weight: 600;
      color: var(--theme-color);
      font-size: 23px !important;
    }

    .card-text {
      -webkit-line-clamp: 3;
      line-clamp: 3;
      font-size: 15px !important;
      color: rgb(112, 112, 112);
      font-weight: 400;
    }
  }
}


.introduced-section {
  h4 {
    color: #03487d;
    font-weight: 700;
    font-size: 28px;
  }

  h5 {
    color: #03487d;
    font-weight: 600;
    font-size: 16px;
  }

  p {
    font-size: 16px;
    line-height: 30px;
  }

  .offer-cards {
    display: grid;
    grid-template-columns: auto auto;
    gap: 15px;

    .card {
      box-shadow: rgb(50 50 93 / 6%) 0px 0px 7px -2px,
        rgb(0 0 0 / 8%) 0px 3px 3px -3px;
      padding: 10px;
      border: 1px solid #eee;
      text-align: center;

      h5 {
        font-size: 17px;
        font-weight: 600;
        color: #034679;
      }
    }
  }
}

.table-gds-section {
  /* background: #1a5a8b;
  background: linear-gradient(
    180deg,
    rgba(26, 90, 139, 1) 36%,
    rgba(98, 145, 182, 1) 68%,
    rgba(222, 240, 255, 1) 93%
  ); */

  .inner-content {
    width: 95%;
    min-width: fit-content;
    overflow: hidden;
    border-radius: 20px;
    background-color: #fffffffa;
    margin: auto;
    /* border-radius: 13px !important; */
    box-shadow: none !important;
    border: 0 !important;

    .border-right {
      border-right: 2px solid #d0d0d0;
    }

    .heading {
      font-size: 18px !important;
      color: #1a5a8b;
    }

    .first-col {
      background-color: #dfecf8;

      p {
        padding: 0px 50px;
        border-bottom: 1px solid #000;
        height: 50px;
        place-content: center;
        font-size: 15px;
        margin-bottom: 0px;
        font-weight: 600;

        &:nth-child(9) {
          border: none;
        }
      }
    }

    .second-col {
      background-color: #fff;

      p {
        padding: 0px 15px;
        border-bottom: 1px solid #000;
        height: 50px;
        font-size: 15px;
        font-weight: 600;
        place-content: center;
        margin-bottom: 0px;

        &:nth-child(9) {
          border: none;
        }
      }
    }

    .content-table {
      width: 100%;

      & th {
        width: 33.33%;
        padding: 15px;
        background-color: #fff;
        /* &:nth-child(1) {
          background-color: #dfecf8;
        } */
        border-top-right-radius: 20px !important;
        border-top-left-radius: 20px !important;

        td:first-child {
          border-top-left-radius: 20px !important;
        }

        td:last-child {
          border-top-right-radius: 20px !important;
        }
      }

      & td {
        width: 33.33%;
        padding: 15px;
        background-color: #fff;
        /* &:nth-child(1) {
          background-color: #dfecf8;
        } */
      }

      tbody {
        tr:last-child {
          border-bottom-right-radius: 20px !important;
          border-bottom-left-radius: 20px !important;

          td:first-child {
            border-bottom-left-radius: 25px !important;
          }

          td:last-child {

            border-bottom-right-radius: 25px !important;
          }
        }
      }
    }
  }
}

.ndc-section {
  background-color: #034679;
  color: #fff;

  h4 {
    color: #fff;
  }

  span {
    font-size: 14px;
    font-weight: 100;
  }

  ul {
    display: grid;
    grid-template-columns: auto auto;
    gap: 20px;

    li {
      list-style: none;

      i {
        background-color: #fff;
        color: #074677;
        padding: 3px;
        border-radius: 50%;
      }
    }
  }
}

.ndc-capabilities {
  h4 {
    color: #03487d;
    font-weight: 700;
    font-size: 28px;
  }

  h5 {
    font-size: 17px;
    color: #03487d;
    font-weight: 600;
    line-height: 30px;
  }

  h6 {
    font-weight: 600;
    margin-bottom: 3px;
  }

  p {
    font-size: 16px;
    margin-bottom: 2px;
  }

  span {
    font-size: 12px;
    font-style: italic;
    font-weight: 400;
    color: #000;
  }

  ul {
    li {
      list-style: disc;
    }
  }
}

.roadblock-ndc {
  background: #d9edff;
  background: linear-gradient(180deg,
      rgba(217, 237, 255, 1) 42%,
      rgba(245, 249, 252, 1) 87%,
      rgba(255, 255, 255, 1) 94%);

  h4 {
    color: #03487d;
    font-weight: 700;
    font-size: 28px;
  }

  h5 {
    color: #03487d;
    font-weight: 600;
    font-size: 16px;
  }

  ul {
    padding-left: 20px;

    li {
      list-style: disc;
    }
  }
}

.introducing-aqua {
  h4 {
    color: #03487d;
    font-weight: 700;
    font-size: 28px;
  }
}

.thougt-section {
  background: #bad7f0;
  background: linear-gradient(180deg,
      rgba(186, 215, 240, 1) 61%,
      rgba(214, 231, 246, 1) 111%,
      rgba(255, 255, 255, 1) 62%);

  h4 {
    color: #03487d;
    font-weight: 700;
    font-size: 28px;
  }

  .contact-btn {
    width: 120px;
    background-color: #03487d;
    padding: 10px;
    text-align: center;
    border-radius: 10px;
    margin: 10px 0px;

    a {
      color: #fff;
      text-decoration: none;
      text-transform: uppercase;
    }
  }
}

.ndc-images-design {
  .orb {
    margin: 0 10.7px;

    img {
      min-height: 70px;
      max-height: 70px;
      max-width: 120px;
      min-width: 120px;
    }
  }
}

.rotate-90 {
  transform: rotate(180deg);
  transition: transform 0.3s ease;
  /* smooth animation */
}

.side-imgs {
  height: 250px;
  max-width: 481px;
}

@media (min-width: 992px) {

  .green-banner,
  .lightBlue-banner,
  .darkBlue-banner,
  .darkGreen-banner,
  .tealBlue-banner {
    .side-imgs {
      height: auto;
      scale: 1.25;
      /* transform: translateY(4%) translateX(3%); */

      &.left {
        transform: translateX(-5%) translateY(4%);
      }
    }
  }
}

ul.list-bulets li {
  list-style: disc !important;
}

/*------------------------------------------------------------
# french pages css
-------------------------------------------------------- */
.wrapper.french {
  .partners-customNavs {
    .nav-link {
      font-size: 16px !important;
    }
  }

  /* header.sticky-top {
    a.nav-link {
      font-size: 15px !important;
    }
  } */
}


/*----------------------------------------------------------
# technology page css start
----------------------------------------*/
.techBanner-content {
  position: relative;
  max-height: 550px;
  aspect-ratio: 10/5 !important;

  .techno-banner {
    aspect-ratio: 19/8 !important;
    position: absolute;
    z-index: 1;
    max-height: 85dvw;
  }

  .girl-img {
    position: absolute;
    /* right: 0; */
    aspect-ratio: 2/3;
    bottom: var(--spacer-t-position);
    z-index: 5;
    max-height: 80%;
    width: auto;
    max-width: 432px;
  }

  .text-container {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--bg-color);

    .text-bg-effect {
      background-size: cover;
      width: auto;
      background-position: center;
      padding: 5% 20% !important;
      background-repeat: no-repeat;
      border-radius: 8px !important;
    }

    p {
      margin-bottom: 0;
      display: block;
      min-width: 100%;
      width: 100%;
      font-size: clamp(10px, 2.5vw, 40px) !important;
    }
  }

  .techDisplay-container {
    --position-spacer-r: 0px;
    --translate-text: -2%;
    position: relative;

    .techShow-img {
      aspect-ratio: 16/11;
      width: 100%;
      /* min-width: 60vw; */
      max-width: 500px;
    }

    .floating-text {
      position: absolute;
      font-size: clamp(11px, 1.54vw, 1.5rem);
      color: var(--bg-color);
      font-style: oblique;
      z-index: 6;
    }

    .text-top-right {
      transform: translateX(calc(-1 * var(--translate-text)));
      top: 30px;
      right: var(--position-spacer-r);
    }

    .text-top-left {
      transform: translateX(-30%, calc(-1 * var(--translate-text)));
      top: 5px;
      left: var(--position-spacer-r);
    }

    .text-middle-left {
      transform: translateX(var(--translate-text));
      top: 40%;
      left: 0;
    }

    .text-bottom-right {
      transform: translateX(-30%);
      transform: translateX(calc(-1 * var(--translate-text)));
      bottom: 10px;
      right: var(--position-spacer-r);

    }
  }
}

.timer-lenth-main2 .timer-lenth p {
  color: #043357;
  font-size: clamp(14px, 1.5vw, 20px);
}

.timer-lenth-main2 .timer-lenth h2 {
  color: #043357;
  font-size: 62px;
}

.timer-lenth-main2 .timer-lenth .pluse-content {
  color: #063355;
}

.timer-lenth-main2 .border-right-after:after {
  content: "";
  position: absolute;
  right: 12px;
  top: 9px;
  background: #06335538;
  width: 1.5px;
  height: 110px;
}

.green-banner,
.lightBlue-banner,
.darkBlue-banner,
.darkGreen-banner,
.tealBlue-banner {
  min-height: 200px;
  width: 100%;
  background-size: 120% 120%;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 1rem;

}

.newProducts-banner {
  border: 1px solid var(--light-gray-color);
  overflow-x: clip;

  .product-logo {
    object-fit: contain;
    height: 60px;
    max-width: 150px;
  }

  .categoriesTags {
    .border-dark {
      border: 1px solid var(--theme-color) !important;
    }
  }
}

.rotate-45 {
  transform: rotate(45deg);
}

/*---------------------------------------------------
# Tech-Stack section 
---------------------------------------------------*/

.technology-page {
  .techStack-section {
    .tech-row {
      --circle-box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
      --tech-common-border: 1px solid transparent;
      display: flex;
      align-items: center;
      gap: 4rem;
      row-gap: 2rem;

      .tech-branch {
        min-width: 170px;
        width: 170px;
        position: relative;
        border: var(--tech-common-border);

        h5 {
          margin-bottom: 0;
          /* font-size: clamp(1.2rem , 1vw , 1.5rem); */
          font-size: clamp(1rem, 1vw, 1.1rem);
        }

        &::after {
          content: "";
          position: absolute;
          display: block;
          width: 75%;
          height: 2px;
          left: 15%;
          background-color: var(--accent-color);
        }
      }

      .tech-data {
        /* ---sapcerr-x: 60px; */
        ---sapcerr-x: 35px;
        ---sapcerr-y: 20px;
        --sapcerr-x-position: -62%;
        --sapcerr-y-position: -36%;
        ---size: 67px;
        display: flex;
        align-items: center;
        flex-flow: row;
        flex-wrap: wrap;
        /* margin-left: auto; */
        gap: var(---sapcerr-x);
        row-gap: var(---sapcerr-y);

        .tech-item {
          --tranform-spacer: transform 2s ease, opacity 1s;
          border-radius: 50%;
          width: var(---size);
          height: var(---size);
          border: var(--tech-common-border);
          box-shadow: var(--circle-box-shadow);
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;

          img {
            /* aspect- ratio: 3/3; */
            aspect-ratio: 7/9;
            max-width: calc(var(---size) - 38%);
            object-fit: contain;
          }

          .spacer-x {
            width: var(---sapcerr-x);
            height: 2px;
            background-color: var(--default-border-color) !important;
            flex-shrink: 0;
            position: absolute;
            right: var(--sapcerr-x-position);
            display: flex;
            align-items: center;
            justify-content: space-between;
            /* transform: translateX(100%); */
            /* animation defaults */
            transform-origin: left center;
            transform: scaleX(0);
            /* transform: scaleX(1); */
            transition: var(--tranform-spacer) !important;

            &::before,
            &::after {
              content: "";
              display: block;
              width: 4px;
              height: 4px;
              border-radius: 50%;
              background-color: var(--default-border-color);
            }
          }

          .spacer-y {
            width: 2px;
            height: var(---sapcerr-y);
            background-color: var(--default-border-color) !important;
            flex-shrink: 1;
            margin: auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-direction: column;
            position: absolute;
            top: var(--sapcerr-y-position);
            /* transform: translateY(-105%); */
            /* animation defaults */
            transform-origin: top center;
            transform: scaleY(0);
            /* transform: scaleY(1); */
            transition: var(--tranform-spacer) !important;

            &::before,
            &::after {
              content: "";
              display: block;
              width: 4px;
              height: 4px;
              border-radius: 50%;
              background-color: var(--default-border-color);
            }
          }

          .spacer-x,
          .spacer-y {
            transition: var(--tranform-spacer) !important;
            transition-delay: 2s;
            opacity: 1;

            &.hidden {
              height: 0;
              opacity: 0;
            }
          }

          &.tech-item-lg {
            ---size: 90px !important;
            ---sapcerr-x: 35px;
            ---sapcerr-y: 20px;
            --sapcerr-x-position: -45% !important;
            --sapcerr-y-position: -24%;
          }

        }
      }

      &.aos-animate {
        .tech-data {
          .tech-item {
            .spacer-x.grow {
              transform: scaleX(1) translateX(-3px);
            }

            .spacer-y.grow {
              transform: scaleY(1) translateY(10%);
            }
          }
        }
      }
    }
  }

  .ops-inner-box {
    margin: calc(-1 * var(--spacer-t-position)) auto 0 !important;
  }
}

.error {
  border-color: red !important;
}

.error-message {
  color: red;
  font-size: 0.875rem;
}

/*-------------------------------------------------------------------------------
# Data Analytics & Reporting​
----------------------------------------------------------------------------------- */

/* #OurApproachCards section
---------------------------------------*/
.OurApproachCards-section {
  --gird-column-width: 244px;
  --gird-column-gap: 4rem;
  --gird-row-gap: 3rem;

  .cardwrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit,
        minmax(var(--gird-column-width), 1fr));
    column-gap: var(--gird-column-gap);
    row-gap: var(--gird-row-gap);
  }

}

.desktopTimelineCont {
  --conector-height: 85px;
  --conector-width: calc(100vw - 60px);
  --conector-min-height: 2px;

  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;

  .desktopTimelineCont-inner {
    flex-grow: 1;
    /* display: inline-block; */
    border: 1px solid var(--theme-color);
    border-radius: 0.8rem;
    padding: 1rem;

    .innerItem-cont {
      display: flex;
      justify-content: space-between;
      gap: 1rem;

      .innerItem {
        position: relative;
        min-width: 102px;
        border-radius: 1rem;
        min-height: 75px;
        border: 1px solid var(--default-border-color);

        .item-label {
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          padding: 0.5rem;
          gap: 0.5rem;
          height: 100%;

          .iconCont {
            border-radius: 6px;
            display: inline-block;
            background-color: rgb(230, 249, 255);
          }

          .stepCont {
            font-size: 1rem;
          }
        }

        .verticalConnector,
        .itemDataCont {
          position: absolute;
        }

        .verticalConnector {
          background-color: var(--theme-color);
          width: 2px;
          height: var(--conector-height);
          top: 100%;
          left: 50%;
        }

        .horizontalConnector {
          background: transparent;
          width: var(--conector-width);
          height: var(--conector-min-height);
          top: auto;
          left: auto;
          position: absolute;
          bottom: 50%;
          right: -60px;
          border-bottom: 2px dashed #0f4165cf;

        }

        .itemDataCont {
          top: calc(100% + var(--conector-height));
          /* border: 1px solid var(--theme-color); */
          text-align: end;
          left: 50%;
          padding: 0.5rem;
          transform: translateX(-75%);
          min-width: 220px;
          min-height: 80px;

          .titleCont {
            font-size: 0.9rem;
            font-weight: 600;
          }

          .textCont {
            font-size: 0.73rem;
          }
        }

        &:nth-child(odd) {
          .verticalConnector {
            top: calc(-1 * var(--conector-height));
          }

          .itemDataCont {
            text-align: start !important;
            top: calc(-1 * var(--conector-height) - 100%);
            transform: translateX(-25%);
          }
        }
      }
    }
  }

}

/* approach cards */
.customApproach-card {
  .customApproach-card-inner {
    background-color: var(--bg-color);
    height: 100%;
    color: var(--black-color);
    border-radius: 20px;
    padding: 15px;
    padding-top: 12px;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);

    .icon-cont {
      border-radius: 4px;
      background-color: rgb(230, 249, 255);

      .outer-icon {
        transition: all 0.5s ease;
        opacity: 0.5;
      }

    }

    &:hover {
      /* transform: translateY(-10px); */
      box-shadow: 0 8px 25px var(--primary-light-color);

      .customApproach-card-bg {
        transform: scale(7);
        background-color: var(--primary-light-color);

        /* Color change on hover */
        i {
          color: var(--bg-color) !important;
        }
      }

      .icon-cont {
        .outer-icon {
          opacity: 1;
        }

      }

      .card-title,
      .card-body p {
        color: var(--theme-color);
      }

      .card-img {
        transform: translateY(-10px);
      }
    }

    .customApproach-card-bg {
      height: 128px;
      width: 128px;
      background-color: var(--primary-light-color);
      /* Original color */
      position: absolute;
      top: -50px;
      left: -50px;
      border-radius: 50%;
      z-index: 0;
      transition: all 0.5s ease;

      i {
        color: var(--theme-color) !important;
      }
    }

    .image-container {
      background-color: #f5f8fa;
      border-radius: 1.2rem;
      /* Like rounded-4 or rounded-5 */
      padding: 1.2rem;
      width: 100px;
      height: 100px;
      margin: 0 auto;
      position: relative;
      z-index: 1;
    }

    .customApproach-card-img {
      max-width: 100%;
      height: auto;
      object-fit: contain;
    }

    .card-img,
    .card-body,
    .card-title {
      position: relative;
      z-index: 1;
    }

    .card-title {
      font-size: clamp(1rem, 1vw, 1.2rem);
      margin-top: 1rem;
      margin-bottom: 0.5rem;
      color: var(--theme-color);
    }

    .card-text {
      font-size: clamp(0.8rem, 1vw, 1rem);
      line-height: 1.5;
      color: var(--theme-color);
    }
  }

  &.middle-in-row {
    position: relative;

    .middle-connector {
      display: block;
      position: absolute;
      top: 50%;
      right: calc(-1 * var(--gird-column-gap));
      background-color: var(--theme-color);
      width: var(--gird-column-gap);
      height: 2px;
    }
  }

  &.first-in-row {
    position: relative;

    .first-connector {
      display: block;
      position: absolute;
      top: 50%;
      right: calc(-1 * var(--gird-column-gap));
      background-color: var(--theme-color);
      width: var(--gird-column-gap);
      height: 2px;
    }
  }

  &.last-in-row {
    position: relative;

    .last-connector {
      display: block;
      position: absolute;
      top: 50%;
      left: calc(-1 * var(--gird-column-gap));
      background-color: var(--theme-color);
      width: var(--gird-column-gap);
      height: 2px;
    }
  }

  &.connect-vertical {
    position: relative;

    .vertical-connector {
      display: block;
      position: absolute;
      left: 50%;
      top: calc(-1 * var(--gird-row-gap));
      background-color: var(--theme-color);
      height: var(--gird-row-gap);
      width: 2px;
    }
  }
}

/* DataAnalytics list */
.DataAnalytics-cards {
  --data-card-item-width: 300px;
  display: flex;
  overflow-y: visible !important;
  overflow-x: auto;
  gap: 1rem;
  padding: 0.5rem;

  .DataAnalytics-item {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    max-width: var(--data-card-item-width);
    background: #fff;
    border: 1px solid #e5e7eb;
    padding: 16px;
    border-radius: 16px;
    margin-bottom: 20px;
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.6s ease;
    cursor: pointer;

    &.show {
      opacity: 1;
      transform: translateX(0);
    }

    &:hover {
      transform: scale(1.05);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
      background: #f0f7ff;
    }

    .item__number {
      width: 40px;
      height: 40px;
      background: var(--theme-color);
      color: #fff;
      font-weight: bold;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .item__content {
      h3 {
        font-size: 1rem;
        margin: 0 0 5px;
      }

      p {
        font-size: 0.9rem;
        color: #555;
        margin: 0;
      }
    }
  }
}

.DataAnalytics-illustration {
  background: var(--hover-card-color);
  --lustration-height: 300px;
  border-radius: 20px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: #1e3a8a;
  overflow: hidden;
  padding: 1rem;

  img {
    max-width: 100%;
    max-height: var(--lustration-height);
    object-fit: cover;
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform: scale(1);
    opacity: 1;
    border-radius: 12px !important;
  }
}

/* analyticsCapability-section */
.analyticsCapability-section {
  .step-card {
    padding: 1rem;
    background-color: white;
    border-radius: 1rem;
    width: 100%;
    height: 150px;
    margin: 0 auto 20px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    position: relative;

    &.grid {
      display: grid;
      gap: 1rem;
      place-items: center;
      grid-template-columns: 1fr 1fr;
    }


    img {
      height: 50px;
      object-fit: contain;
    }
  }

  .step {
    text-align: center;
    position: relative;

    .step-heading {
      font-weight: 600;
      color: var(--theme-color);
      text-wrap: nowrap;
      font-size: 1.2rem;
      margin-top: 15px;
    }

    .step-des {
      font-weight: 500;
      min-height: 48px;
    }
  }



  .arrow {
    font-size: 2rem;
    color: var(--accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-80%);
  }

  @media (max-width: 991.5px) {
    .arrow {
      transform: unset;

      i {
        transform: rotate(90deg);
      }
    }
  }
}

/* project show case section */
.project-showcase {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 3rem 2rem;
  flex-wrap: wrap;

  .ps-dashboards {
    flex: 1;
    min-height: 200px;
    position: relative;

    img {
      width: 100%;
      border-radius: 12px;
      transition: transform 0.4s ease;

      &:hover {
        transform: scale(1.03);
      }
    }

    .ps-floating-card {
      position: absolute;
      bottom: -30px;
      left: 30px;
      width: 60%;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);

      img {
        width: 100%;
        display: block;
      }
    }
  }

  .ps-content {
    --feature-list-grid-items: 1fr 1fr;
    flex: 1;
    min-width: 300px;

    p {
      margin-bottom: 1.5rem;
      line-height: 1.6;
    }

    ul {
      list-style: none;
      display: grid;
      grid-template-columns: var(--feature-list-grid-items);
      padding: 0;

      li {
        margin: 0.2rem 0;
        display: flex;
        align-items: center;
        gap: 0.6rem;
        opacity: 0;
        transform: translateX(30px);
        transition: all 0.6s ease;

        &.ps-visible {
          opacity: 1;
          transform: translateX(0);
        }

        &::before {
          content: "✔";
          color: var(--accent-color);
          font-weight: bold;
        }
      }
    }
  }
}

/*-------------------------------------------------------------------------------
# NDC Implementation page
----------------------------------------------------------------------------------- */
.managementServices-section {
  .service-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 15px;

    &:hover {
      transform: translateY(-10px);
      box-shadow: 0 8px 25px var(--primary-light-color) !important;
    }

    .icon-wrapper {
      width: 70px;
      height: 70px;
      border-radius: 50%;
      background: var(--primary-light-color);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
    }

    .card-title {
      min-height: 48px;
    }

    .tickList {
      li {
        margin: 0.2rem 0;
        font-size: 17px;
        display: flex;
        align-items: center;
        gap: 0.6rem;

        &::before {
          content: "✔";
          color: var(--accent-color);
          font-weight: bold;
        }
      }
    }
  }
}

/* ----------------------------------------------------------------
#contact modal CSS START
--------------------------------------------------------- */
.contact-modal {
  place-content: center;

  .modal-dialog {
    max-width: 600px;

    .modal-content {
      box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;

      .modal-body {
        text-align: center;

        img {
          width: 25%;
        }

        h4 {
          font-size: 32px;
          color: #034679;
          font-weight: 600;
        }

        p {
          font-size: 16px;
          margin-bottom: 0px;
        }
      }
    }
  }


}

.contactModal {
  .modal-content {
    border-radius: 20px !important;

    .modal-header {
      background-color: var(--theme-color);
      border-radius: 15px 15px 0 0;
      color: var(--bg-color) !important;
    }
  }
}


/* section media qurries */

/*-------------- max-width ------------- */

@media only screen and (max-width:767.6px) {
  .border-e {
    border-right: 1px solid var(--default-border-color);
  }

  .border-b-sm {
    border-bottom: 1px solid var(--default-border-color) !important;
  }

  .OurApproachCards-section {
    --gird-column-width: 180px;
    --gird-column-gap: 1.3rem;
  }

  /* .tech-data {
    ---sapcerr-x: 60px !important;
    ---size: 60px;
  } */
}

@media only screen and (max-width:575.6px) {
  .tech-data {
    ---sapcerr-x: 35px !important;
    ---size: 65px !important;
    --sapcerr-x-position: -58% !important;
  }

  .OurApproachCards-section {
    --gird-column-width: 210px;
    --gird-column-gap: 1rem;
  }

  .project-showcase {
    padding-inline: unset;

    .ps-content {
      --feature-list-grid-items: 1fr;
    }

    .technology-marquee {
      .Certifications-wrapper {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr !important;

        .orb img {
          max-height: 130px !important;
          max-width: 120 !important;
          min-width: 100px !important;
        }
      }
    }
  }
}

@media only screen and (max-width:459.5px) {
  .customApproach-card {
    max-width: 90%;
    width: 100%;
    margin: auto;

    &.first-in-row {
      .first-connector {
        display: none;
      }
    }
  }
}

@media only screen and (max-width:425px) {
  .technology-page {
    --spacer-t-position: 0px;

    .techBanner-content {
      .techDisplay-container {
        --position-spacer-r: -30px;
        --translate-text: 113%;

        .techShow-img {
          transform: translateX(30px);
        }

        .text-top-left {
          top: 15px;
        }

        .text-bottom-right {
          bottom: 0px;
        }
      }
    }
  }
}

@media only screen and (max-width:1199.5px) {
  .wrapper.french {
    .top-nav {
      .offcanvas {
        & .offcanvas-body {
          .navbar-nav {
            & .nav-item {
              &.custom-dropdown {
                .nav-link {
                  display: inline-block;
                }

                .custom-dropdown-menu {
                  position: static !important;
                  transform: unset !important;
                }
              }
            }
          }

          .ctaSection {
            max-width: unset !important;
            border-radius: 0 !important;
            border: 0 !important;
          }
        }
      }
    }
  }
}



/*-------------- min-width ------------- */

@media only screen and (min-width:576px) {
  .heroSection {
    --hero-slider-height: 380px;
    --hero-slider-content-width: 90%;
  }

  .technology-page {
    --spacer-t-position: 40px;
  }

  .w-sm-90 {
    height: 90% !important;
  }

  .overlay-section {
    --overLay-margin: 10%;
    --inner-padding: 20px 40px 30px;
  }
}

@media only screen and (min-width:768px) {
  .border-x-md {
    border-left: 1px solid var(--primary-border-color) !important;
    border-right: 1px solid var(--primary-border-color) !important;
  }

  .border-b-md {
    border-bottom: 1px solid var(--primary-border-color) !important;
  }

  .technology-page {
    --spacer-t-position: 60px;
  }

  .servicesWrapper {
    --grid-column-size: 300px;
  }

  .overlay-section {
    --overLay-margin: 12%;
    --inner-padding: 30px 80px 40px;
  }

  .technology-page {
    .techStack-section {
      .tech-row {
        --tech-common-border: 1px solid var(--primary-border-color);

        .tech-branch {
          /* min-width: 200px; */
          min-width: 180px;
          width: 110px;
          height: 60px;
          text-align: center;
          border-radius: 4rem;
          /* background-color: red; */
          box-shadow: var(--circle-box-shadow);
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;

          &::after {
            content: "";
            position: absolute;
            display: block;
            width: 55px !important;
            height: 2px;
            right: -30%;
            transform: translateX(20%);
            left: unset;
            background-color: var(--primary-border-color);
          }

          &::before {
            content: "";
            position: absolute;
            display: block;
            width: 9px !important;
            height: 9px;
            border-radius: 50%;
            right: -9%;
            left: unset;
            background-color: var(--primary-border-color);
          }
        }
      }
    }
  }
}

@media only screen and (min-width:992px) {
  .heroSection {
    --hero-slider-height: 540px;
    --hero-slider-content-width: 80%;
    --hero-slider-content-translate-y: -40%;
  }

  .technology-page {
    --spacer-t-position: 80px;
  }

  .DataAnalytics-cards {
    --data-card-item-width: 100%;
    display: unset;
  }

  .DataAnalytics-illustration {
    --lustration-height: 100%;
  }

  .top-nav {
    .navbar-brand {
      flex-grow: 1;
      max-width: 200px;
    }

    .offcanvas {
      .offcanvas-body {
        position: relative !important;
        align-items: center;

        .navbar-nav {
          --link-size: 17px;
          --link-size-inner: 15px;
          --link-width-inner: 200px;

          .nav-item {
            padding: 1rem 1rem !important;

            &.custom-dropdown {
              transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;

              .nav-link {
                border-radius: 4rem;
                padding: 0.35rem 0.5rem;

                .nav-icon {
                  transition: all 0.3s linear;
                }
              }

              .custom-dropdown-menu {
                position: absolute !important;
                /* padding: 30px 20px !important; */
                padding-top: 10px !important;
                width: 100% !important;
                width: calc(100% - 55px);
                max-width: 1200px !important;
                transform: translateX(-53%);
                left: 46%;
                top: 65px;

                .custom-dropdown-menu-inner {
                  border-radius: 20px;
                  padding: 20px;
                  box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px !important;
                  background-color: var(--bg-color);
                  border: 1px solid var(--accent-color);

                  .list-grid {
                    display: grid;
                    grid-template-columns: repeat(auto-fit, minmax(calc(var(--link-width-inner) - 40px), 1fr));
                    gap: 1rem;
                    row-gap: 0.5rem;

                    .list-item {
                      max-width: var(--link-width-inner);
                    }
                  }

                }
              }

              &:hover {
                .nav-link {
                  background-color: var(--list-heading-bg);

                  .nav-icon {
                    transform: rotateX(180deg);
                  }
                }
              }
            }
          }
        }

        .ctaSection {
          flex-grow: 1;
          max-width: 350px;
          background-image: linear-gradient(259deg, rgba(77, 169, 219, 1) 0%, rgba(8, 56, 93, 1) 100%);
          border-radius: 0px 0px 0px 120px;
          border-left: 8px solid var(--active-color);
          color: var(--bg-color);
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }
}

@media only screen and (min-width:1200px) {
  .technology-page {
    --spacer-t-position: 100px;
  }

  .text-lg-lh {
    line-height: 2;
  }
}