html,
body {
  margin: 0;
  padding: 0;
  /* overflow-x: hidden;  */
  width: 100%;
}


/* ---------------------- banner and sider css start ------------------------------- */
/* navebar */

/* Fixed transparent navbar */


#logo {
  transition: all 0.3s ease;
}

.navbar.scrolled {
  background-color: white !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.sidebar {
  position: fixed;
  top: 0;
  right: -100%;
  /* hidden off-screen initially */
  width: 100%;
  /* mobile friendly width */
  height: 100vh;
  background-color: #111;
  /* dark background */
  color: white;
  z-index: 9999;
  transition: right 0.4s ease-in-out;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background-color: black !important;
}



.sidebar button {
  position: absolute;
  top: 15px;
  right: 15px;
}

.toggle-btn-desktop.in-navbar {
  position: relative;
  top: 20px;
  right: 0;
  margin-left: auto;
  background: none;
  width: auto;
  height: auto;
}

/* Apply width only when NOT in navbar */
.toggle-btn-desktop:not(.in-navbar) {
  width: 90px;
  height: 600px;
  right: -5px;
}

.toggle-btn-desktop {
  position: fixed;
  top: 54%;
  right: 20px;
  width: 50px;
  /* <- you only want this when on banner */
  height: 50px;
  border: none;
  z-index: 999;
  transition: all 0.3s ease;
  background: url("images/menu-bulge-blk.svg") center/cover no-repeat;
}



hr {
  margin: 0.2rem 0;

}

@media (min-width: 1400px) {
  .container {
    max-width: 1600px;
  }
}

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: transparent;
  z-index: 1000;
  padding: 1rem 2rem;
  transition: background-color 0.4s ease, box-shadow 0.4s ease;
}

/* White background when scrolling */
.navbar.scrolled {
  background: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 0px;
}

.navbar-brand img {
  width: 120px;
  height: auto;
}

/* Banner video section */
.banner {
  position: relative;
  /* height: 100vh; */
  overflow: hidden;
}

.banner video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Optional overlay for better contrast */


/* Navbar stays above everything */
.navbar {
  z-index: 10;
}

.sidebar.hidden {
  right: -100%;
}

.sidebar a {
  text-decoration: none;
  color: #fff;
  font-size: 18px;
  margin: 10px 0;
  position: relative;
  transition: color 0.3s;
}

.sidebar a:hover {
  color: #00a7b3;
}

.sidebar a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 0;
  height: 2px;
  background: #00a7b3;
  transition: width 0.3s ease;
}

.sidebar a:hover::after {
  width: 100%;
}

/* Desktop Toggle Button */
.toggle-btn-desktop {
  position: fixed;
  top: 50%;
  right: -5px;
  height: 600px;
  width: 90px;
  background: url("images/menu-bulge-blk.svg") center/cover no-repeat;
  border: none;
  cursor: pointer;
  z-index: 200;
  transform: translateY(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s;
}

/* Chevron inside desktop toggle */
.toggle-btn-desktop img {
  width: 40px;
  height: 40px;
  transition: transform 0.3s;
  padding: 5px;
  border-radius: 6px;
  background-color: black;
}

.toggle-btn-desktop:hover img {
  transform: scale(1.1);
}

/* Mobile Toggle */
.toggle-btn-mobile {
  display: none;
  position: fixed;
  top: 20px;
  right: 20px;
  background: #000;
  border: none;
  padding: 0px 5px 4px;
  border-radius: 4px;
  z-index: 200;
}

.toggle-btn-mobile img {
  width: 20px;
  height: 20px;
}

video {
  width: 100%;
}

/* Show only on mobile */
@media (max-width: 768px) {
  .toggle-btn-desktop {
    display: none;
  }

  .navbar-brand img {
    width: 75px;
    height: auto;
  }

  .toggle-btn-mobile {
    display: block;
    right: 20px;
    top: 10px;
  }
}


/* ---------------------- banner and sider css end ------------------------------- */



/* ---------------------- section2 css start ------------------------------- */
#section2 {
  background-color: rgb(229 229 229);
  padding: 150px 80px 150px 80px;
  transition: margin-right 0.4s ease;
}

.h2-heading {
  font-size: 2.8rem;
  font-weight: bold;
  font-family: auto;
  line-height: 3rem;
  color: #000000a1;
}

.p-heading {
  color: #000000a1;
  font-size: 1.5rem;
  line-height: 1.5rem;
}


@media (max-width: 768px) {
  #section2 {
    padding: 40px 6px;
  }

  .banner2 {
    text-align: center;
    padding: 49px 20px !important;
  }

  .banner2 {
    font-size: 2.5rem !important;
    font-family: auto;
  }

  #banner-section2 {
    padding: 30px 0px 0px 0px !important;
  }

  #section3 {
    padding: 40px 6px !important;
  }

  #section4 {
    padding: 40px 0px !important;
  }

  .h2-heading {
    font-size: 1.5rem !important;
    line-height: 2rem;
  }
  .fh-h{
    font-size: 1.4rem !important;
  }

  .pa-heading {
    font-size: 0.8rem !important;
  }

  .a-heading {
    font-size: 1.4rem !important;
  }

  .client-section {
    padding: 40px 10px !important;
  }

  .client-text {
    padding-right: 0px !important;
    margin-bottom: 0px !important;
  }

  .image-box {
    margin: 6px !important;
  }


  .p-heading {
    color: #000000a1;
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .footer-20192 {
    top: 160px !important;
    padding-left: 2%;
    padding-right: 2%;
  }

  .f-h {
    font-size: 1.1rem !important;
  }

  .footer-20192 .links li {
    font-size: 13px;
  }

  .ft-bottom {
    font-size: 12px;
  }

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

  .footer-links a {
    color: white;
    text-decoration: none;
    font-size: 12px;
  }

  p.f-p {
    font-size: 14px;
  }

  .WM-bt {
    padding: 12px 30px !important;
    font-size: 14px !important;
  }

  .planning-strategy {
    padding: 0px 50px !important;
  }

  .database-ft {
    font-size: .7rem !important;
  }

  .service-box img {
    width: 40px !important;
  }

  .service-h {
    font-size: 0.8rem !important;
  }

}

@media (max-width: 991px) {
  .image-box img {
    width: 60px !important;
    height: 25px !important;
  }
}

/* ---------------------- section2 css end ------------------------------- */

/* ---------------------- section3 css start ------------------------------- */
#section3 {
  padding: 100px 80px 100px 80px;


}

.image-box img {
  width: 100%;
}

.WM-bt {
  background-color: #00a7b3;
  color: white;
  padding: 12px 36px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 1px;
  transition: all 0.3s ease;

}

.WM-bt:hover {
  background-color: rgb(77 77 80);
  color: white;
  transform: translateY(-5px);
}

/* ---------------------- section3 css end ------------------------------- */

/* services section start  */
#section4 {
  background-color: rgb(77 77 80);
  padding: 150px 90px 150px 90px;
}

#section4 a {
  text-decoration: none;
}

.service-h {
  font-size: 1.25rem;
  line-height: 1.25rem;
  font-style: normal;
  color: rgb(173 173 173);
  font-weight: 400;
}

/* Service box hover effect */
.service-box {
  height: 100%;
  text-align: center;
  background-color: rgb(50 51 53 );
  /* background-color: rgb(255, 255, 255); */
  transition: all 0.3s ease-in-out;
  border-radius: 6px;
}

.service-box a {
  text-decoration: none;
  color: inherit;
}

.service-box:hover {
  background-color: rgb(8 145 178);
  /* optional: gives a black hover bg */
}

.service-box:hover h3 {
  color: #fff;
  /* text turns white */
}

.service-box img {
  width: 80px;
  height: auto;
  transition: all 0.3s ease;
}

.service-box:hover img {
  filter: brightness(0);
}

/* services section end  */

/* client section css start */
.client-section {
  color: #bfbfbf;
  padding: 16px 0;
  overflow: hidden;
  position: relative;
  padding: 100px 80px 100px 80px;
}

.client-text {
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.trusted-brands-row1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.image-box {
  background-color: white;
  /* border-radius: 10px; */
  padding: 5px 15px;
  margin: 14px;
  /* border: 1px solid #b0d7ff; */
}

.image-box img {
  width: 96px;
  height: 36px;
  object-fit: contain;
}

/* client section css end */


/* footer section start  */

.footer-20192 {
  position: relative;
  color: rgb(156 156 156);
  padding: 2rem 0;
  background-color: rgb(77 77 80);
  top: 240px;
  padding-left: 5%;
  padding-right: 5%;
}

.footer-20192 .container {
  position: relative;
}

.footer-20192 .cta {
  box-shadow: 0px 0px 10px 0px rgba(52, 58, 64, 0.2);
  padding: 30px;
  background-color: #00AAB5;
  top: -150px;
  position: relative;
  color: rgb(255, 255, 255);
  border-radius: 10px;
}

.footer-20192 .links li {
  color: rgb(156 156 156);
  text-decoration: none;
}

.footer-20192 .links li a {
  color: rgb(156 156 156);
  text-decoration: none;
}

.footer-links a {
  color: white;
  text-decoration: none;
}

.f-h {
  font-size: 1.4rem;
  color: rgb(156 156 156);
}

.footer-20192 img {
  width: 70%;
}

/* --- Social Media Section --- */
.social-section {
  margin-top: 20px;
}

.social-icons {
  display: flex;
  justify-content: left;
  gap: 10px;
}

.social-icons a {
  text-decoration: none;
}

.social-box {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.social-box:hover {
  background: #ffffff;
  color: #2c2c2c;
  border-color: #ffffff;
  transform: translateY(-3px);
}

/* footer section end  */


/* ----------------------About us page css start----------------------------  */
.banner2 {
  text-align: center;
  padding: 100px 200px;
  background-color: rgb(38 38 38);
  color: white;
}

.banner2 {
  font-size: 4.5rem;
  font-family: auto;
}

.a-heading {
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-family: auto;
  font-weight: bold;
}

.pa-heading {
  font-size: 1rem;
  font-family: Barlow, sans-serif;
  color: rgb(75 85 99);

}

#banner-section2 {
  padding: 80px 60px 80px 60px;
}

.footer-2 {
  background-color: rgb(38 38 38);
}

.footer-2 img {
  width: 200px;
}

.text-gray-500 {
  color: rgb(107 114 128);
  font-size: .75rem;

}

a.social-box {
  text-decoration: none;
}

/* Carousel Container */
.custom-carousel {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px 0 60px 0;
}

/* Inner Carousel Card */
.carousel-inner {
  max-width: 970px;
  min-height: 230px;
  background-color: #555;
  color: #fff;
  padding: 50px;
  border-radius: 15px;
  position: relative;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* Text */
.carousel-item p {
  font-size: 1rem;
  line-height: 1.8;
  margin: 0;
  text-align: left;
}

/* Custom Arrow Buttons */
.carousel-control-prev,
.carousel-control-next {
  width: 50px;
  height: 50px;
  background: #ffffff;
  border-radius: 4px;
  transform: rotate(45deg);
  top: 50%;
  translate: 0 -50%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.carousel-control-prev {
  left: -25px;
}

.carousel-control-next {
  right: -25px;
}

/* Arrow icons - black */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-size: 50%;
  background-repeat: no-repeat;
  background-position: center;
  width: 20px;
  height: 20px;
  transform: rotate(-45deg);
  filter: invert(0%);
  /* black */
}

/* Black arrow SVGs */
.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M11 1 3 8l8 7V1z'/%3E%3C/svg%3E");
}

.carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M5 1l8 7-8 7V1z'/%3E%3C/svg%3E");
}

@media (max-width: 768px) {
  .custom-carousel {
    padding: 0px 40px 60px 40px;
  }

  .carousel-item p {
    font-size: 0.8rem !important;
  }

  .all-Projects-banner {
    padding: 50px 20px !important;
  }

  .category-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
    margin: 0px 0 36px;
    font-weight: 500;
    font-size: 14px;
  }

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

  .all-heading {
    font-size: 14px!important;
  }

  .footer-2 img {
    width: 120px;
  }

  .social-box {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }

  .navbar {
    padding: 0rem 0rem;

  }

}

#sidebar,
#toggleBtnDesktop {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}



.policy-h {
  font-size: 28px;
}

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


/* -------------------About us page css end --------------------------- */

/* -----------------All project section css start ----------------------------*/

.all-Projects-banner {
  text-align: center;
  padding: 100px 300px;
  background-color: rgb(38 38 38);
  color: white;
}

.all-Projects-banner h2 {
  font-weight: 800;
  font-size: 4.5rem;
  font-family: auto;
  color: white;
  line-height: 1;

}

/* Category Filter Bar */
.category-menu {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 30px;
  margin: 110px 0 90px;
  font-weight: 500;
}

.category-menu span {
  position: relative;
  color: #000;
  cursor: pointer;
  transition: all 0.3s ease;
}

.category-menu span::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #00b4b6;
  transform: scaleX(0);
  transition: transform 0.3s ease;
  transform-origin: right;
}

.category-menu span:hover::after,
.category-menu span.active::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Image Box */
.category-box {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.5s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.category-box:hover {
  transform: scale(1.1);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.category-box img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.category-box:hover img {
  transform: scale(1.05);
}

/* -------------------All Project section css end ---------------------------- */

/* Single picture section css start */
.modal-header {
  border: none;
}

.image-slider {
  text-align: center;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  display: flex;
  flex-flow: column;
  width: 70%;
  /* width: clamp(360px, 96vw, 830px); */
  aspect-ratio: 16 / 9;
  height: 100%;
  overflow: hidden;
  border-radius: 8px;
  container-type: inline-size;
  contain: content;
  background-color: #0006;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px, rgba(0, 0, 0, 0.3) 0px 2px 4px,
    rgba(0, 0, 0, 0.25) 0px 4px 8px, rgba(0, 0, 0, 0.2) 0px 8px 16px,
    rgba(0, 0, 0, 0.15) 0px 16px 32px;
}

.slider__content {
  flex-grow: 1;
  display: flex;
  justify-content: space-between;
}

.slider-control--button {
  border: 0;
  background: 0;
  outline: 0;
  cursor: pointer;
  place-content: center;
  padding-inline: 3vw;
  z-index: 1;
  display: grid;
}

.icon {
  height: 2rem;
  width: 2rem;
  fill: var(--icon-default);
  border-radius: 50%;
}

.slider-control--button:where(:hover) {
  background-image: linear-gradient(to var(--position),
      #0000 0%,
      #0002,
      80%,
      #0006 100%);

  .icon {
    fill: var(--icon-accent);
    background: #0001;
  }
}

.slider-control--button:active {
  outline: 0.2em solid hsl(204 100 53);
  outline-offset: -0.5em;
}

.prev-button {
  --position: left;
}

.next-button {
  --position: right;
}

.image-display {
  /* position: fixed; */
  inset: 0;
}

.slider-navigation {
  z-index: 10;
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: repeat(4, 0.7fr);
  grid-auto-columns: 100%;
  gap: 1.25rem;
  padding: 1rem;
  place-content: center;
  background-color: var(--navigation-color);
  backdrop-filter: blur(6px);
}

.nav-button {
  display: grid;
  width: 100%;
  height: 100%;
  border-radius: 0.5em;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  border: 0;
  aspect-ratio: 16 / 9;
  transition: filter 150ms linear, scale 266ms ease;
}

.thumbnail {
  display: block;
  max-width: 100%;
  width: 100%;
  object-fit: cover;
  height: 100%;
}

.nav-button[aria-selected="true"] {
  scale: 1.1;
}

.nav-button[aria-selected="true"],
.nav-button:focus-visible {
  outline: 0.2em solid var(--active-color);
  outline-offset: 0.2em;
}

.nav-button[aria-selected="false"] {
  filter: opacity(0.7);
}

.nav-button[aria-selected="false"]:where(:hover, :focus-visible) {
  filter: opacity(1);
}

.modal {

  --bs-modal-bg: #000000 !important;
}

@container (max-width: 660px) {
  .nav-button:not(:has(img)) {
    background-color: rgb(241, 235, 232);
  }

  .slider-navigation {
    display: flex;
    justify-content: center;
    padding-block: 1.5em;
  }

  .nav-button {
    inline-size: 0.625rem;
    aspect-ratio: 1;
    border-radius: 50%;
  }

  .nav-button>.thumbnail {
    display: none;
  }

  .nav-button[aria-selected="true"] {
    background-color: black;
    scale: 1.5;
  }


}

/* single picture section css end  */

/* -------------------Planning-Strategy page css start------------------------ */
.planning-strategy {
  padding: 0px 200px;
}

/* -------------------Planning-Strategy page css end------------------------ */


/* -------------------Customer success page css start------------------------ */
.Customer-p {
  letter-spacing: .1em;
}

/* -------------------Customer success page css end------------------------ */
.database-section {
  max-width: 64rem;
}

.database-ft {
  background-color: #dfdfdf;
  font-size: .875rem;
}

.font-semibold {
  font-weight: 600;
}

.barlow-regular a {
  color: black;
  text-decoration: none;
}

.Wm-section {
  max-width: 64rem;
}

.text-3xl {
  font-weight: 600;
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.barlow-medium {
  font-family: Barlow, sans-serif;
  font-style: normal;
  font-weight: 500;
  color: rgb(0 0 0);
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.Customer-p {
  letter-spacing: .1em;
  font-size: 18px;
}

.footer-bg {
  background-color: rgb(241 241 241)
}

/* Scroll to Top Button */
/* Scroll to Top Button */
#scrollTopBtn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  border: 3px solid #ffffff;
  background-color: #00a7b3;
  color: #ffffff;
  font-size: 26px;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  transition: all 0.3s ease;
  box-shadow: 0 0 10px rgba(44, 219, 246, 0.4);
  animation: pulse 2s infinite;
}

/* Hover effect */
#scrollTopBtn:hover {
  background-color: rgb(77 77 80);
  color: white;
  transform: translateY(-5px);
  box-shadow: 0 0 20px rgba(43, 251, 255, 0.7);
}

/* Show animation (fade-in + slide-up) */
#scrollTopBtn.show {
  display: flex;
  animation: fadeInUp 0.5s ease forwards;
}

/* Keyframes for fade-in animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Pulse animation for glowing border */
@keyframes pulse {
  0% {
    box-shadow: 0 0 10px rgba(94, 227, 244, 0.487);
  }

  50% {
    box-shadow: 0 0 25px rgba(2, 196, 235, 0.7);
  }

  100% {
    box-shadow: 0 0 10px rgba(43, 206, 255, 0.4);
  }
}


/* bottam button css end  */

@media only screen and (max-width:768px) {
  .text-3xl {
    font-size: 1.4rem;
    line-height: 2.1rem;
  }

  .text-2xl {
    font-size: 1.1rem;
  }

  .barlow-medium {
    font-size: 1rem;
  }

  .Customer-p {
    letter-spacing: .1em;
    font-size: 12px;
  }

  .category-box img {
    width: 100%;
    height: 100px !important;
    object-fit: cover;
    transition: transform 0.4s ease;
  }

  .image-slider {
    width: 100%;
    height: auto;
  }

}