*{
    font-family: 'Poppins';

  }


  .carousel-image-wrapper {
    position: relative;
  }




  .nav-link {
      color: black !important; /* Ensure text color is black */
  }

  .nav-link:hover {
      color: #EE9322 !important; /* Color on hover */
  }


  /* calendar */
  a {
      text-decoration: none;
    }

    h2 {
      font-size: 2em;
      line-height: 1.25em;
      margin: .25em 0;
    }

    h3 {
      font-size: 1.5em;
      line-height: 1em;
      margin: .33em 0;
    }

    table {
      border-collapse: collapse;
      border-spacing: 0;
    }

    .container {
      width: 510px;

    }

    /* ---------- CALENDAR ---------- */

  /* styles.css */
  .col-lg-5.col-sm-12 {
    background-color: #ffad00; /* Background color for the calendar container */
    padding: 20px; /* Add padding if needed for spacing */
    border-radius: 6px; /* Optional: for rounded corners */
    height: 470px;
  }

  .calendar {
    text-align: center;
    font-family: Arial, sans-serif;
    margin: 0 auto;
    background-color: #fff; /* Background color for the calendar itself */
    border-radius: 8px; /* Optional: for rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Optional: for shadow effect */
  }

  .calendar header {
    top: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
    position: relative;
  }

  .calendar h2 {
    text-transform: uppercase;
    margin: 0;
    font-size: 1.5em;
  }

  .btn-prev,
  .btn-next {
    border: 2px solid #cbd1d2;
    border-radius: 50%;
    color: #cbd1d2;
    height: 2em;
    width: 2em;
    font-size: 1.25em;
    line-height: 2em;
    cursor: pointer;
    background: transparent;
    transition: background 0.3s, color 0.3s;
  }

  .btn-prev:hover,
  .btn-next:hover {
    background: #cbd1d2;
    color: #f9f9f9;
  }

  .calendar table {
    width: 100%;
    border-collapse: collapse;
  }

  .calendar th, .calendar td {
    border: 2px solid transparent;
    border-radius: 50%;
    display: inline-block;
    height: 4em;
    line-height: 4em;
    text-align: center;
    width: 4em;
    vertical-align: middle;
  }

  .calendar thead {
    font-weight: 600;
    text-transform: uppercase;
  }

  .calendar tbody {
    color: #7c8a95;
  }

  .calendar thead th {
    color: #333;
  }

  .calendar tbody td:hover {
    border: 2px solid #EE9322;
  }

  .current-day {
    background: #EE9322;
    color: #f9f9f9;
  }

  .event {
    cursor: pointer;
    position: relative;
  }

  .event:after {
    background: #EE9322;
    border-radius: 50%;
    bottom: .5em;
    display: block;
    content: '';
    height: .5em;
    left: 50%;
    margin: -.25em 0 0 -.25em;
    position: absolute;
    width: .5em;
  }

  .event.current-day:after {
    background: #f9f9f9;
  }

  /* Responsive Design */
  @media (max-width: 768px) {
    .calendar header {
        flex-direction: column;
    }

    .btn-prev,
    .btn-next {
        font-size: 1em;
        height: 1.5em;
        width: 1.5em;
    }

    .calendar h2 {
        font-size: 1.25em;
    }

    .calendar td {
        height: 3em;
        line-height: 3em;
        width: 3em;
    }
  }

  @media (max-width: 576px) {
    .calendar {
        width: 100%;
        margin: 10px;
    }

    .calendar header {
        margin-bottom: 5px;
    }

    .calendar h2 {
        font-size: 1em;
    }

    .calendar td {
        height: 2.5em;
        line-height: 2.5em;
        width: 2.5em;
    }

    .btn-prev,
    .btn-next {
        font-size: 0.75em;
        height: 1.5em;
        width: 1.5em;
    }
  }


  /* end cel */

    .nav-link.active {
      background-color: #EE9322 !important;
      color: white !important;

    }


    .custom-heading {
      width: 95%;
      margin: 0;
      left: 28px;
      border-bottom: 1px solid #EE9322;
      position: relative;
      top: -16px; /* Move the line upwards */
    }


    .colored-line {
      border-top: 1px solid #EE9322; /* Adjust the thickness of the line as needed */
      margin: 10px 0; /* Optional: Add margin for spacing */
  }

  .mtop-5-custom{
    margin-top: 100px; /* Adjust the value as needed */
  }

  .text-justify {
    text-align: justify; /* Justifies the text */
  }

  .center-last-line {
    display: block;
    text-align: center; /* Center-aligns the last line */
  }

  .card-body {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centers content vertically */
    align-items: center; /* Centers content horizontally */
  }

  .image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px; /* Optional: add space between text and image */
  }


  .custom-shadow {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1); /* Custom shadow */
  }

  /* Optional custom styling for card container */
  .card {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }




  body, html {
    overflow-x: hidden; /* Prevent horizontal scroll */
  }





  /* Normal size for laptop and larger screens */
  .btn-custom {
    padding: 10px 20px;
    font-size: 16px;
  }

  /* Small size for screens up to 914px */
  @media (max-width: 914px) {
    .btn-custom {
      padding: 5px 10px;
      font-size: 12px;
    }
  }

  /* Extra small size for screens up to 412px */
  @media (max-width: 412px) {
    .btn-custom {
      padding: 3px 8px;
      font-size: 10px;
    }
  }

  /* Additional adjustments for mobile and desktop views */
  @media (max-width: 767px) {
    .overlay-content {
      left: 5%; /* Adjust as needed */
      top: 75%; /* Adjust as needed */
      transform: translateY(-75%);
      max-width: 70%;
    }

    h1 {
      font-size: 0.8rem;
      line-height: 1rem;
    }

    .btn {
      font-size: 0.6rem;
      padding: 0.2rem 0.4rem;
    }
  }

  @media (min-width: 768px) {
    .overlay-content {
      left: 16%;
      top: 50%;
      transform: translateY(-50%);
      max-width: 100%;
    }

    h1 {
      font-size: 2rem;
    }
  }

  @media (max-width: 767px) {
    .heading-text {
      font-size: 10px;
      line-height: 1.2rem;
    }

    .btn-custom {
      font-size: 1rem; /* Adjusted for better visibility */
      padding: 0.2rem 0.5rem;
    }
  }

  @media (min-width: 768px) {
    .heading-text {
      font-size: 2.5rem;
      line-height: 3rem;
    }
  }

  .carousel-image-wrapper {
    position: relative;
  }

  /* Default styles for mobile view */
  .carousel-indicators-wrapper {
    position: absolute;
    top: 176px; /* Adjust for mobile view */
    width: 100%;
    display: flex;
    justify-content: center; /* Center indicators horizontally */
    z-index: 1000; /* Ensure indicators are above other content */
  }

  .carousel-indicators {
    display: flex;
    gap: 10px; /* Space between indicators */
  }

  .carousel-indicators button {
    width: 10px; /* Width of the indicators */
    height: 10px; /* Height of the indicators */
    border-radius: 50%; /* Makes the indicators round */
    background-color: rgba(255, 255, 255, 0.5); /* Light color with transparency */
    border: none; /* Remove border */
    transition: background-color 0.3s ease; /* Smooth transition */
  }

  .carousel-indicators button.active {
    background-color: #ffffff; /* Color of the active indicator */
  }

  /* Styles for larger screens (laptops and desktops) */
  @media (min-width: 992px) {
    .carousel-indicators-wrapper {
      top: 720px; /* Adjust for larger screens */
    }
  }
  .image-container {
    position: relative;
    overflow: hidden;
    transition: transform 0.5s ease;
    text-align: center;
}

.image-container img {
    transition: transform 0.5s ease;
    width: 100%;
    height: 200px; /* Fixed height for uniformity */
    object-fit: cover; /* Ensures all images are cropped evenly */
}

.image-container:hover img {
    transform: scale(1.1); /* Zoom-in effect */
}

.image-title {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Text shadow for better readability */
}

.image-container img {
    border-radius: 10px; /* Smooth corners */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Add subtle shadow */
}
/* activity */
.image-container-activity {
    position: relative;
    overflow: hidden;
    text-align: center;
}

.image-container-activity img {
    width: 100%;
    height: 200px; /* Fixed height for uniformity */
    object-fit: cover; /* Ensures all images are cropped evenly */
    border-radius: 10px; /* Smooth corners */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Add subtle shadow */
}

.image-title {
    position: absolute;
    bottom: 15px;
    transform: translateX(-50%);
    color: white;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Text shadow for better readability */
    transition: transform 0.5s ease, opacity 0.5s ease; /* Smooth transition for hover effects */
}

.image-container-activity:hover .image-title {
    transform: translate(-50%, -20px); /* Move text up */
    opacity: 1; /* Ensure text is fully visible */
}