h2 {
      font-size: 2rem;
  }

  body {
      margin: 0;
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial;
      line-height: 1.6;
      /* position:relative;
      scroll-behavior: smooth; */
  }

  .bg-canvas {
      background-color: rgba(207, 226, 241, 0.2);
  }

  .bg-theme {
      /* background-color:#0F2A6B; */
      background-color: #010035;
  }

  /* .bg-th-db { background-color:#0F2A6B; } */
  .bg-th-db {
      background-color: #010035;
  }

  .bg-th-rb {
      background-color: #1A36B4;
  }

  .bg-th-sb {
      background-color: #3498DB;
  }

  .bg-th-my {
      background-color: #f39c12
  }

  .bg-th-gr {
      background-color: #BDC3C7;
  }

  .bg-th-gg {
      background-color: #95A5A6;
  }

  .bg-th-pp {
      background-color: #8E44AD;
  }

  .txt-th-db {
      color: #010035;
  }

  .txt-th-rb {
      color: #1936b3;
  }

  .txt-th-sb {
      color: #3498DB;
  }

  .txt-th-my {
      color: #F39C12;
  }

  .txt-th-gr {
      color: #BDC3C7;
  }

  .txt-th-gg {
      color: #95A5A6;
  }

  .txt-th-pp {
      color: #8E44AD;
  }

  .carousel-control-prev-icon {
      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%231A36B4' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
  }

  .carousel-control-next-icon {
      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%231A36B4' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
  }

  .navbar-glass {
      backdrop-filter: saturate(1.1) blur(10px);
      background: rgba(11, 16, 32, .7) !important;
      border-bottom: 1px solid rgba(255, 255, 255, .06)
  }

  .fixed-nav-wrapper {
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 1030;
      /* Above other content */
  }

  

  .navbar-brand img {
      width: 55px;
      /* Adjust the value as needed */
      height: auto;
  }

  /* .logo-container { */
      /*background-color: #007bff;*/
      /* Example: a solid blue background */
      /*padding: 10px;  Optional: add some spacing around the logo */
  /* } */

  .navbar-brand p {
      font-size: 11px;
      line-height: 1.2;
  }

  .hover-card {
      background-color: white;
  }

  .hover-list {
      display: none;
      margin-top: 10px;
      padding-left: 1rem;
      list-style-type: disc;
  }

  .hover-card .hover-list {
      display: none;

  }

  .card .hover-list {
      display: none;
  }

  .card.hoveractive {
      background-color: #1A36B4;
  }

  .card.hoveractive .hover-list {
      display: block;
  }

  .card.hoveractive .default-text {
      display: none;
  }
  #svcDescriptionModalTxt {
   font-size: 12px; 
  }
  /* Desktop-only hover behavior */
  @media (min-width: 768px) {
      /* .svc-btn-chv{
        display:none;
      }   */
      /* .hover-card:focus  */
      .hover-card:hover {
          background-color: #1A36B4;

      }

      .hover-card:hover .hover-list {
          display: block;
      }

      .hover-card:hover .default-text {
          display: none;
      }

  }
  /* Desktop-only hover behavior */
  @media (max-width: 768px) {
    /* .svc-btn-mod{
        display:none;
      }  */

    .carousel-inner .carousel-item {
    height: auto; /* Overrides any fixed height for mobile */
  }

  .carousel-inner .carousel-item img {
    height: auto; /* Ensures the image maintains its aspect ratio */
    width: 100%;  /* Ensures the image fills the container horizontally */
  }

  }


  /* .hover-card:focus .hover-list {
            display: block;
        }

        .hover-card:focus .default-text {
            display: none;
        } */

  .no-bullets {
      list-style: none;
      padding-left: 0;
  }

  .ch-custom {
      height: 400px;
  }

  .carousel-indicators {
      position: relative !important;
      /* bottom: 20px;
            z-index: 10; */
  }

  .carousel-indicators [data-bs-target] {
      background-color: #F39C12;
  }

  .carousel-indicators .active {
      background-color: #1A36B4;
      /* bottom: 20px;
            z-index: 10; */
  }

  .custom-indicators {
      position: relative;
      /* keep them in flow */
      display: flex;
      justify-content: center;
      margin-top: 10px;
      gap: 8px;
  }

  .custom-indicators button {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background-color: red;
      border: none;
      opacity: 1;
      transition: opacity 0.3s ease;
  }

  .custom-indicators .active {
      background-color: #1A36B4;
      opacity: 1;
  }

  .custom-indicators .not-active {
      background-color: #F39C12;
      opacity: 1;
  }

  img.grayscale {
      filter: grayscale(100%);
  }

  section {
      padding: 80px 0;
  }

  .carousel-item {
      overflow: visible;
  }

  .gr-whbl-bg {
      background: linear-gradient(to bottom, white, black);
  }

  /* #whyus, #ourvalues {
            max-width: 700px;
        } */
  .custom-shadow {
      /* subtle and clean */
      /* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);  */
      box-shadow: 13px 18px 11px -11px rgb(38, 57, 77) !important
  }
  .btn-close{
    background-size: 0.475rem;
    background-color: white;
  }
  .btn-loading {
      /* Optional: Add basic styling for disabled button */
      cursor: not-allowed;
      opacity: 0.6;
  }
 .nav-item {
  position: relative; /* Needed for the absolute positioning of the pseudo-element */
}
.nav-link {
   /* color: #333; */
  /*padding: 0.5rem 1rem;*/
  z-index: 2; /* Keep the link text above the background */
  position: relative; /* Keep the link text above the background */
  transition: color 0.3s ease; /* Animate the text color change */
}

/* Style the pseudo-element that will act as the highlight */
.nav-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #1A36B4 !important; /* The highlight color */
  border-radius: 1.5rem; /* The rounded border */
  z-index: -1;
  opacity: 0; /* Initially invisible */
  transform: scale(0.9); /* Start slightly smaller for a subtle "pop" effect */
  transition: opacity 0.3s ease, transform 0.3s ease; /* Animate the highlight */
}
.nav-link.active::before,
.nav-link:hover::before {
  opacity: 1;
  transform: scale(1);
}

.nav-link.active,
.nav-link:hover {
  color: #fff !important; /* Change text color when active or hovered */
}

 /* .nav-link.active { */
      /* font-weight: bold; */
      /* background-color: #1A36B4 !important; */
      /* color: white !important; */
      /* border-bottom: 2px solid #1A36B4; */
      /* border-radius: 20px; */
  /* }  */

  /* CSS for a simple inline spinner */
  .spinner {
      display: inline-block;
      width: 1em;
      height: 1em;
      border: 0.15em solid currentColor;
      border-right-color: transparent;
      border-radius: 50%;
      animation: spinner-border 0.75s linear infinite;
      vertical-align: -0.125em;
      /* Adjust alignment */
      margin-right: 0.5em;
  }

  @keyframes spinner-border {
      to {
          transform: rotate(360deg);
      }
    }
.carousel {
  position: relative; /* Make sure the carousel has position: relative */
  padding-bottom: 50px; /* Add padding to make space for the controls */
}

/* Position the new control wrapper */
.carousel-controls-bottom {
  /* position: absolute;
   bottom: 0; 
  right: 10px; Adjust the left position as needed */
  z-index: 15;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

/* Override Bootstrap's default button positions */
.carousel-controls-bottom .carousel-control-prev,
.carousel-controls-bottom .carousel-control-next {
  position: relative; /* Change from absolute to relative */
  width: auto;
  opacity: 1; /* Make sure the controls are always visible */
  width:1rem;
}

/* Add some spacing between the two buttons */
.carousel-controls-bottom .carousel-control-prev {
  margin-right: 10px;
}
.glass-card{
  background: rgba(255, 255, 255, 0.15); /* Semi-transparent white background */
  backdrop-filter: blur(10px); /* Frosted glass effect */
  -webkit-backdrop-filter: blur(10px); /* Safari support */
  border: 1px solid rgba(255, 255, 255, 0.2); /* Subtle border */
  border-radius: 15px; /* Rounded corners */
  /* padding: 20px; */
  color: #F39C12;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  /* width: 200px;
  height: 250px; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;  
}
.bg-card{
    background-image:url("/static/images/it30.svg");
}

.img-up{
   /* transform: translateY(-30px);  */
   position:relative;
   top:-20px;  
}
.capsule-img{
    border-radius:9999px;
    object-fit:cover;
    aspect-ratio:5/8;
}
.toggle-arrow-button .fa-chevron-down {
  transition: transform 0.3s ease-in-out;
}
/* .capsule-img-container{
    max-width:100%;
    height:auto;
} */
.svc-name{
  color: #1936b3 !important;
}
.toggle-arrow-button:not(.collapsed) .fa-chevron-down {
  transform: rotate(180deg);
}

/* This class is added by Bootstrap when the content is shown */
.toggle-arrow-button.collapsed .fa-chevron-down {
  transform: rotate(0deg);
}

.mobile-bio,.svc-descr-mob {
  display: none; /* hide initially on mobile */
}
.mobile-bio.show ,.svc-descr-mob.show{
  display: block;
}

#desktopBio , #desktop-svc-descr,#desktop-svc-descr-2{
  /*display: none; *//* hide initially on desktop */
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  /* padding: 0 1rem; */
  transition: max-height 0.4s ease, opacity 0.4s ease;
}
#desktopBio.show,#desktop-svc-descr.show,#desktop-svc-descr-2.show{
  /* display: block; */
  max-height: 110%;
  opacity:1;
}
.service-item{
  /* display:block;list-style:none;margin:0;padding:0;gap:12px;display:flex;flex-direction:column}
    .solution{ */
  padding:12px 10px;border-radius:10px;background:linear-gradient(180deg, rgba(243,244,246,0.6), rgba(255,255,255,0.8));
  display:flex;flex-direction:column;gap:6px;  
}
.value-item {
      display: flex;
      justify-content: space-between;
      margin: .35rem 0;
      /* font-size: .875rem; */
    }
    .value-text {
      font-weight: 500;
    }
    .value-metric {
      font-weight: 600; 
      color: #1936b3;
      white-space: nowrap;
    }
.value-metric.up::before { content: "↑"; }
.value-metric.down::before { content: "↓"; }

#svcBlock .card{
 transition: transform 0.3s ease-in-out;
}
#svcBlock .card:hover{
 cursor:pointer;
 transform: translateY(-6px) ; 
}
.glass-container{
background: rgba(255, 255, 255, 0.2); /* Semi-transparent background */
backdrop-filter: blur(10px); /* The frosted glass effect */
border: 1px solid rgba(255, 255, 255, 0.3);
}
/*
.team-wave {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.team-member {
  text-align: center;
  max-width: 180px;
}

.team-member img {
   width: 150px; 
   height: 200px; 
  object-fit: cover;
  border-radius: 100px / 133px; 
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
  margin-bottom: 0.8rem;
  transition: transform 0.3s ease;
}

.team-member img:hover {
  transform: scale(1.05);
}

.team-member.up {
  transform: translateY(-20px);
}

.team-member.down {
  transform: translateY(20px);
}

.team-member h5 {
  margin: 0.3rem 0 0.2rem;
  font-weight: 600;
}

.team-member p {
  margin: 0;
}
  */