#side_banner {
  background-color: none;
  border-radius: 0px 0px 10px 10px;
  display: flex;
  justify-content: center;
  justify-items: center;
  position: relative;
}
#sidebar {
  background-color: aliceblue;
  margin: 10px;
  border-radius: 0px 0px 10px 10px;
  box-shadow: 2px 4px 36px 8px #ffc107;
}
#frosted-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.092); /* Semi-transparent */
  backdrop-filter: blur(10px); /* The blur effect */
  -webkit-backdrop-filter: blur(10px); /* For Safari support */
  border-radius: 0px 0px 10px 10px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: all 2s ease;
}
#frosted-overlay:hover {
  backdrop-filter: blur(0px); /* The blur effect */
  -webkit-backdrop-filter: blur(0px); /* For Safari support */
}
#text-overlay {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: start;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  padding: 20px 80px;
}

#dynamic-text {
  font-size: 60px;
  text-shadow: 5px 10px 10px #231f20;
  font-weight: 200px;
  color: aliceblue;
  display: inline-block;
  white-space: nowrap;
}
@keyframes blink {
  50% {
    opacity: 0;
  }
}
/* Cursor style */
.cursor::after {
  content: "_"; /* Underscore cursor */
  animation: blink 0.7s infinite;
}

@media screen and (max-width: 992px) {
  #dynamic-text {
    font-size: 45px;
  }
}
@media screen and (max-width: 768px) {
  #dynamic-text {
    font-size: 35px;
  }
}
@media screen and (max-width: 576px) {
  #dynamic-text {
    font-size: 25px;
  }
}

#services {
  font-size: 40px;
  text-shadow: 5px 10px 10px #231f20;
  color: #ffc107;
}
@media screen and (max-width: 768px) {
  #services {
    font-size: 35px;
  }
}
@media screen and (max-width: 576px) {
  #services {
    font-size: 25px;
  }
}
.services_card {
  box-shadow: 2px 4px 36px 8px #231f20;
}
.card-text {
  text-align: center;
}

/* Extra small devices (phones) */
@media (max-width: 575px) {
  /* Styles for phones */
  .card-text {
    font-size: 15px;
  }
}

/* Small devices (tablets) */
@media (min-width: 576px) and (max-width: 767px) {
  /* Styles for small tablets */
  .card-text {
    font-size: 15px;
  }
}

/* Medium devices (larger tablets & small laptops) */
@media (min-width: 768px) and (max-width: 991px) {
  /* Styles for large tablets */
  .card-text {
    font-size: 11px;
  }
}

/* Large devices (desktops, laptops) */
@media (min-width: 992px) and (max-width: 1199px) {
  /* Styles for laptops */
  .card-text {
    font-size: 15px;
  }
}

/* Extra large devices (large desktops) */
@media (min-width: 1200px) {
  /* Styles for large desktops */
  .card-text {
    font-size: 17px;
  }
}

/* css/swiper-patch.css
   Swiper-friendly CSS: responsive slides, touch-action, overlay fix, nav/pagination on top.
*/

.swiper, .swiper-container {
  width: 100%;
  position: relative;
  overflow: hidden;
  touch-action: pan-y;       /* let Swiper handle horizontal gestures */
  -ms-touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

.swiper-wrapper {
  display: flex;
  transition-timing-function: linear !important;
  will-change: transform;
}

.swiper-slide {
  flex: 0 0 auto;            /* variable width but won't shrink */
  width: auto !important;
  max-width: 100%;
  box-sizing: border-box;
  -webkit-user-drag: none;
  user-select: none;
  padding: 0 10px;           /* small gap to keep cards separated on small screens */
}

/* If overlay is purely decorative, ignore pointer events so touches reach the slider */
#frosted-overlay, .overlay {
  pointer-events: none;
}

/* Ensure nav & pagination are above overlays and clickable */
.swiper-button-next, .swiper-button-prev, .swiper-pagination {
  z-index: 50;
  pointer-events: auto;
}

/* Make cards inside slides center and responsive */
.swiper-slide .card {
  margin: 0 auto;
  width: 100%;
  max-width: 320px;          /* card max width */
}

/* Small-screen adjustments */
@media (max-width: 576px) {
  .swiper-slide {
    padding: 0 8px;
  }
  .swiper-slide .card {
    max-width: 260px;
  }
}


/* Our Clients Slider */
.continuous-marquee {
        overflow: hidden;
        width: 100%;
      }
      .marquee-track {
        display: flex;
        gap: 16px;
        width: max-content;
        animation: marquee 10s linear infinite;
        align-items: center;
      }
      .m-slide {
        flex: 0 0 auto;
      }

/* Apply transparent background + no border to ALL slide cards */
.m-slide .card {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important; /* optional: removes Bootstrap default shadow */
}

/* Apply width: 100px to ALL images inside slides */
.m-slide .card img {
  width: 100px !important;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto; /* center images */
}

      @keyframes marquee {
        from {
          transform: translateX(0);
        }
        to {
          transform: translateX(-50%);
        } /* -50% to scroll exactly one copy */
      }
.card{
  
}
      /* Duplicate slides so the track is at least twice the visible length.
   You can clone slides with small JS on load instead of putting duplicates in HTML. */