body {
        font-family: "Inter", sans-serif;
      
      }

      .bg-gray-100{
     background: radial-gradient(at center center, #7853A5 0%, #19122D 100%);
        color:#fff !important;
      }

      .bg-gray-100 p{
        color:#f3c242;
      }

      .bg-orange-500 {
    --tw-bg-opacity: 1;
    background: radial-gradient(at center center, #7853A5 0%, #19122D 100%);
}

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

.logo-text{ color:#f3c242 !important;}

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

.bg-white{
  background:#fff;
}

.bg-white p{
  color:#f3c242 !important;
}

.text-white{
  color:#fff !important;
}

.carousel-item  img{
  width: 180px;
  height: 180px;
  float:left;
margin-right: 20px;;

}

      /* Header Slider Styles */
      .header-slider-container {
        position: relative;
        height: 60vh; /* Responsive height */
        overflow: hidden;
        border-bottom:2px solid #fff;
      }

      .header-slider-inner {
        display: flex;
        height: 100%;
        transition: transform 0.8s ease-in-out; /* Smooth slide transition */
      }

      .header-slide {
        min-width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        color: white;
        position: relative;
      }

      .header-slide::before {
        /* Overlay for readability */
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.4);
        z-index: 1;
      }

      .header-slide-content {
        position: relative;
        z-index: 2;
        padding: 1rem;
        opacity: 0; /* Start hidden for animation */
        transform: translateY(20px); /* Start slightly below for animation */
        animation: fadeInContent 1s ease-out forwards; /* Fade in content on slide change */
      }

      @keyframes fadeInContent {
        from {
          opacity: 0;
          transform: translateY(20px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .header-slider-button {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background-color: rgba(0, 0, 0, 0.5);
        color: white;
        padding: 0.75rem 1rem;
        border-radius: 9999px;
        cursor: pointer;
        z-index: 10;
        transition: background-color 0.3s ease;
      }

      .header-slider-button:hover {
        background-color: rgba(0, 0, 0, 0.7);
      }

      .header-slider-button.prev {
        left: 1rem;
      }

      .header-slider-button.next {
        right: 1rem;
      }

      .header-slider-pagination {
        display: flex;
        justify-content: center;
        position: absolute;
        bottom: 1rem;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
      }

      .header-pagination-dot {
        width: 10px;
        height: 10px;
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 50%;
        margin: 0 5px;
        cursor: pointer;
        transition: background-color 0.3s ease, transform 0.3s ease;
        border: 1px solid rgba(0, 0, 0, 0.2);
      }

      .header-pagination-dot.active {
        background-color: #f3c242;
        transform: scale(1.2);
        border-color: #f3c242;
      }

      /* General Section Styles */
      .section-title {
        font-size: 2.5rem; /* Large title size */
        font-weight: 600;
        color:#f3c242;
        margin-bottom: 1.5rem;
        position: relative;
        display: inline-block;
      }

      .section-title::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -10px;
        transform: translateX(-50%);
        width: 60px;
        height: 4px;
        background-color: #fca311; /* Orange accent */
        border-radius: 2px;
      }

      .card-hover-effect {
        transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
      }

      .card-hover-effect:hover {
        transform: translateY(-10px) scale(1.02);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
      }

      .person-card {
        transition: transform 0.3s ease-in-out;
      }

      .person-card:hover {
        transform: translateY(-5px);
      }

      /* Testimonial Carousel Styles */
      .carousel-container {
        position: relative;
        overflow: hidden;
        border-radius: 0.75rem; /* rounded-xl */
      }

      .carousel-inner {
        display: flex;
        transition: transform 0.5s ease-in-out;
      }

      .carousel-item {
        min-width: 100%;
        box-sizing: border-box;
      }

      .carousel-button {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background-color: rgba(0, 0, 0, 0.5);
        color: white;
        padding: 0.75rem 1rem;
        border-radius: 9999px; /* full rounded */
        cursor: pointer;
        z-index: 10;
        transition: background-color 0.3s ease;
      }

      .carousel-button:hover {
        background-color: rgba(0, 0, 0, 0.7);
      }

      .carousel-button.prev {
        left: 1rem;
      }

      .carousel-button.next {
        right: 1rem;
      }

      .carousel-pagination {
        display: flex;
        justify-content: center;
        margin-top: 1rem;
        position: absolute; /* Position relative to carousel-container */
        bottom: 1rem; /* Adjust as needed */
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
      }

      .pagination-dot {
        width: 10px;
        height: 10px;
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 50%;
        margin: 0 5px;
        cursor: pointer;
        transition: background-color 0.3s ease, transform 0.3s ease;
        border: 1px solid rgba(0, 0, 0, 0.2); /* Add a subtle border */
      }

      .pagination-dot.active {
        background-color: #fca311; /* Active dot color */
        transform: scale(1.2);
        border-color: #fca311;
      }

      /* Keyframe Animations */
      @keyframes fadeIn {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }

      @keyframes slideInUp {
        from {
          transform: translateY(50px);
          opacity: 0;
        }
        to {
          transform: translateY(0);
          opacity: 1;
        }
      }

      @keyframes slideInLeft {
        from {
          transform: translateX(-100px);
          opacity: 0;
        }
        to {
          transform: translateX(0);
          opacity: 1;
        }
      }

      @keyframes slideInRight {
        from {
          transform: translateX(100px);
          opacity: 0;
        }
        to {
          transform: translateX(0);
          opacity: 1;
        }
      }

      /* Apply slideInUp to sections for a staggered effect */
      .animate-slide-up {
        animation: slideInUp 0.8s ease-out forwards;
        opacity: 0; /* Start hidden */
      }

      .animate-slide-left {
        animation: slideInLeft 0.8s ease-out forwards;
        opacity: 0; /* Start hidden */
      }

      .animate-slide-right {
        animation: slideInRight 0.8s ease-out forwards;
        opacity: 0; /* Start hidden */
      }

      /* Staggered animation delays */
      .delay-100 {
        animation-delay: 0.1s;
      }
      .delay-200 {
        animation-delay: 0.2s;
      }
      .delay-300 {
        animation-delay: 0.3s;
      }
      .delay-400 {
        animation-delay: 0.4s;
      }
      .delay-500 {
        animation-delay: 0.5s;
      }
      .delay-600 {
        animation-delay: 0.6s;
      }
      .delay-700 {
        animation-delay: 0.7s;
      }
      .delay-800 {
        animation-delay: 0.8s;
      }