/* Font styling */
.navbar-brand, .nav-link {
  font-family: 'Oswald', sans-serif;
  font-weight: 700; 
}

/* ---------------------------------------------------------------------- */
/* Provincial association */

.dropdown-btn {
    padding: 6px 8px 6px 16px;
    text-decoration: none;
    font-size: 15px;
    color: #696969;
    display: block;
    background: none;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    cursor: pointer;
}

.dropdown-container {
    max-height: 0;
    /* Start with a height of 0 */
    overflow: hidden;
    /* Hide the content initially */
    padding-left: 20px;
    transition: max-height 0.5s ease-out;
    /* Smooth transition for the max-height */
}

.dropdown-container a {
    display: block;
    text-decoration: none;
    color: #818181;
    padding: 4px 10px;
}

/* ---------------------------------------------------------------------- */

/* Apply font to the body */
body {
  font-family: 'Oswald', sans-serif;

}

.headline-color{
  color: blue;
}


.logo {
  margin-left: -7px;
}






/* Default style for large screens */
.custom-carousel-item img {
  width: 100%;        /* Ensure the image takes up the full width */
  height: auto;       /* Maintain aspect ratio */
  object-fit: cover;  /* Ensure the image covers the area without distortion */
}

.custom-carousel-caption h1 {
  font-size: 3rem; /* Larger text on larger screens */
}

.custom-carousel-caption .btn {
  font-size: 1.25rem; 
}

/* Mobile responsive styles */
@media (max-width: 767px) {
  .custom-carousel-item img {
    width: 100%;    /* Keep image width 100% */
    height: auto;   /* Maintain aspect ratio */
    object-fit: cover; /* Ensure image covers the container */
  }

  .custom-carousel-caption h1 {
    font-size: 1.75rem; /* Smaller text on smaller screens */
  }

  .custom-carousel-caption .btn {
    font-size: 1rem; /* Smaller button text */
  }
}

/* For tablets and small devices */
@media (max-width: 991px) {
  .custom-carousel-item img {
    width: 100%;    /* Keep image width 100% */
    height: auto;   /* Maintain aspect ratio */
    object-fit: cover; /* Ensure image covers the container */
  }

  .custom-carousel-caption h1 {
    font-size: 2rem;
  }

  .custom-carousel-caption .btn {
    font-size: 1.1rem;
  }
}






/* -------------------------------------------------- */
/* breadinfo */

.responsive-iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  /* Maintains a 16:9 ratio */
}

@media (max-width: 768px) {
  .responsive-iframe {
      aspect-ratio: 4 / 3;
      /* Adjusts to a 4:3 ratio for smaller screens */
  }
}

@media (max-width: 576px) {
  .responsive-iframe {
    height: 190px;
      aspect-ratio: 1 / 1;
      /* Square ratio for very small screens */
  }
}

/* -------------------------------------------------- */
















/* Custom Navbar Toggle Button Style */
.navbar-toggler {
  border: none; /* Remove border */
  padding: 0;
  outline: none;
  background: transparent; /* Remove background */
}

/* Custom lines for the hamburger icon */
.navbar-toggler-icon-custom {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 24px;
  height: 24px;
  position: relative;
}

.navbar-toggler-icon-custom div {
  width: 100%;
  height: 2px;
  background-color: #000;
  transition: transform 0.3s ease, opacity 0.3s ease;
  border: none; /* Ensure no border on lines */
}

/* Open/Close Animation for Navbar Toggle */
.navbar-toggler.active .line1 {
  transform: rotate(45deg) translate(4px, 4px);
}

.navbar-toggler.active .line2 {
  opacity: 0; /* Hide middle line */
}

.navbar-toggler.active .line3 {
  transform: rotate(-45deg) translate(4px, -4px);
}









.navbar-nav .dropdown:hover .dropdown-menu {
  display: block;
  margin-top: 0;
}




.dropdown-menu.mega-content {
  width: 100%; 
  left: 0; 
  right: 0; 
  position: absolute; 
  top: 65%; 
  padding: 1rem; 
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
  z-index: 1000; 
}


.dropdown-menu.mega-content > .container-fluid {
  padding: 0;
  margin: 0;
} 






/* ------------------------------------------------------- */
 
.news-scroller {
  white-space: nowrap; /* Ensures items flow in a single line without wrapping */
}

.news-item {
  display: inline-block; /* Inline-block keeps items in line and allows margin, padding, and transformations */
  color: yellow; /* Sets the text color to yellow */
  transition: transform 0.3s ease; /* Smooth transition for transform effects */
}
/* 
.news-item:hover {
  transform: scale(0.9); 
} */

 

/* ------------------------------------------------------- */




/* ------------------------------------------------- */
/* glow dashboard */
    /* Glow animation */
    @keyframes dashboard-glow {
      0% {
          text-shadow: 0 0 5px #FF2D20, 0 0 10px #FF2D20, 0 0 15px #FF2D20, 0 0 20px #FF2D20;
      }
      50% {
          text-shadow: 0 0 15px #FF2D20, 0 0 20px #FF2D20, 0 0 30px #FF2D20, 0 0 40px #FF2D20;
      }
      100% {
          text-shadow: 0 0 5px #FF2D20, 0 0 10px #FF2D20, 0 0 15px #FF2D20, 0 0 20px #FF2D20;
      }
  }

  /* Apply unique animation class to the nav-link */
  .nav-link-dashboard-glow {
      color: #574646;
      font-weight: bold;
      animation: dashboard-glow 1.5s infinite alternate;
  }
/* ------------------------------------------------- */




/* -------------------------------------------- */

  /* Moving icon animation */
  .moving-icon {
    display: inline-block;
    animation: moveIcon 1s infinite alternate;
  }

  /* Keyframes for subtle left-right movement */
  @keyframes moveIcon {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(5px);
    }
  }

  .car-font-size{
    font-size:130px;
  }
















.upcoming-event-section {
    position: relative;
    padding: 80px 0;
    overflow: hidden; /* Ensures pseudo-element does not extend beyond the section */
}

.upcoming-event-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('images/no10.jpeg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    opacity: 0.8;
    filter: blur(3px);
    z-index: -1; /* Places the image behind the content */
}

.upcoming-event-card {
    background-color: rgba(255, 255, 255, 0.75); /* Semi-transparent background for readability */
    border-radius: 8px;
    padding: 20px;
    height: 160px; /* Adjust height as needed */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1; /* Ensures the content is above the background */
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease; /* Smooth transition on hover */
}

/* Hover effect for the event card */
.upcoming-event-card:hover {
    transform: translateY(-5px); /* Slightly lift the card */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* Increase shadow for depth */
    background-color: rgba(255, 255, 255, 1); /* Change background color on hover */
}

/* Upcoming Event Date */
.upcoming-event-date {
    background-color: #007bff;
    color: white;
    text-align: center;
    padding: 10px;
    border-radius: 8px;
    margin-right: 15px;
    min-width: 60px;
}

.upcoming-event-month {
    display: block;
    font-size: 0.9rem;
    text-transform: uppercase;
}

.upcoming-event-day {
    display: block;
    font-size: 1.5rem;
    font-weight: bold;
}

.upcoming-event-details {
    flex: 1;
}

.upcoming-event-title {
    font-size: 1.2rem;
    margin: 0;
    color: #333;
}

.upcoming-event-duration {
    margin: 5px 0 0;
    color: #555;
    font-size: 0.9rem;
}



.font-for-post{
     font-family:  sans-serif;
}



.partner-section {
    padding: 20px 0;
    text-align: center;
  }
  .partner-header {
    font-size: 2em;
    font-weight: bold;
    margin-bottom: 20px;
  }
  .partner-row-1 .partner-logo-1, 
  .partner-row-1 .partner-logo-2, 
  .partner-row-2 .partner-logo-3, 
  .partner-row-2 .partner-logo-4, 
  .partner-row-2 .partner-logo-5, 
  .partner-row-2 .partner-logo-6 {
    max-width: 70%;
    height: auto;
  }




  .looping-animated-btn {
 
    animation: bounce 1s infinite ease-in-out;
  }

  @keyframes bounce {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-5px);
    }
  }




 
  


  .pfdf-heading {
    font-size: 3vw;  /* Adjust font size based on viewport width */
    font-family: 'Courier New', monospace; 
    font-weight: bold;
    color: #114b02;
    /* line-height: 36px; */
    height: 50px;
    white-space: nowrap; /* Prevents text from wrapping */
    overflow: hidden;
    display: inline-block;
  margin-top: 9px;
}

@media (max-width: 480px) {
  .pfdf-heading {
      font-size: 4vw;  /* Larger text for very small screens */
      height: 20px;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  .pfdf-heading {
      font-size: 4vw;
      height: 27px;
  }
}

@media (min-width: 769px) and (max-width: 1280px) {
  .pfdf-heading {
      font-size: 3vw;
      height: 33px;
  }
}

@media (min-width: 1281px) and (max-width: 3480px) {
  .pfdf-heading {
      font-size: 2vw;
      height: 55px;
  }
}





/* .curved-section {
  background-color: #ffffff;

   height: 4rem;
   display: grid;
   place-items: center;
  border-radius: 30px;
 
  box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;

} */



/* ------------------------------------------------ */
/* ultimate page paraxell */

.parallax-container {
    position: relative;
    width: 100%;
    height: 225px; 
    overflow: hidden;
    z-index: 1;
    background: linear-gradient(45deg, #01ff2b, #1438d8); /* Initial gradient */
    background-size: 400% 400%; 
    animation: gradientAnimation 10s ease infinite; /* Apply the gradient animation */
}

/* Keyframes to animate the gradient */
@keyframes gradientAnimation {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.parallax-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120%; 
    object-fit: cover;
    transform: translateY(0);
    transition: transform 0.1s ease-out;
    z-index: -1;
}

.parallax-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

/* Vibration animation for the text */
@keyframes vibration {
    0% {
        transform: translateY(0);
    }
    20% {
        transform: translateY(-4px);
    }
    40% {
        transform: translateY(4px);
    }
    60% {
        transform: translateY(-4px);
    }
    80% {
        transform: translateY(4px);
    }
    100% {
        transform: translateY(0);
    }
}

.parallax-text {
    color: #fff;
    font-size: 5rem;
    font-weight: bold;
    text-shadow: 11px 12px 4px rgba(0, 0, 0, 0.9);
    animation: vibration 7s linear infinite; /* Apply vibration animation */
}
/* Mobile responsiveness for text size */
@media (max-width: 768px) {
    .parallax-text {
        font-size: 4rem; /* Smaller text for tablets and below */
    }

    .parallax-container {
        height: 200px; /* Smaller height for mobile */
    }
}

/* Further responsiveness for very small screens */
@media (max-width: 480px) {
    .parallax-text {
        font-size: 4rem; /* Even smaller text for small screens */
    }

    .parallax-container {
        height: 140px; /* Adjust parallax container height */
    }

    .ultimate-content-column,
    .ultimate-image-column {
        padding-left: 0; /* Remove padding for small screens */
        padding-right: 0;
    }
}




/* ------------------------------------------------ */





















.btn-learn-more {
  background-color: #e4f1ff;
  color: #1d2218; 
  font-weight: bold;
  padding: 10px 20px; 
  border-radius: 10px; 
  border: 2px solid #0056b3; 
  transition: background-color 0.3s ease, transform 0.3s ease; 
}

/* Hover and Active States */
.btn-learn-more:hover {
  background-color: #0056b3; /* Darker blue on hover */
  transform: scale(1.06); /* Slightly larger on hover */
}

.btn-learn-more:active {
  background-color: #003f7f; /* Even darker blue on click */
  transform: scale(0.97); /* Slightly smaller on click */
}





/* ------------------------------------------------------------------------------------- */





.custom-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 0 15px rgba(0, 123, 255, 0.5); /* Light glow effect */
  transition: box-shadow 0.4s ease;
}

.custom-card:hover {
  box-shadow: 0 0 30px rgba(0, 123, 255, 0.8); /* Brighter glow on hover */
}

.custom-card img {
  transition: transform 0.4s ease, filter 0.4s ease;
  width: 100%;
  height: 340px;
}

.custom-card:hover img {
  transform: scale(1.1);
  filter: blur(4px);
}

.custom-card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 0.4s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.5rem;
}

.custom-card:hover .custom-card-overlay {
  opacity: 1;
}

.custom-card-name {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.6); /* Transparent black background */
  color: #fff; /* White text color */
  font-size: 1.25rem; /* Adjust font size */
  text-align: center;
  padding: 10px; /* Add some padding */
  z-index: 2; /* Ensure it appears above the image */
  opacity: 0; /* Initially hidden */
  transition: opacity 0.4s ease; /* Smooth fade-in effect */
}

.custom-card:hover .custom-card-name {
  opacity: 1; /* Show on hover */
}
.custom-card-name2 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.6); /* Transparent black background */
  color: #fff; /* White text color */
  font-size: 1.25rem; /* Adjust font size */
  text-align: center;
  padding: 10px; /* Add some padding */
  z-index: 2; /* Ensure it appears above the image */
  opacity: 0; /* Initially hidden */
  transition: opacity 0.4s ease; /* Smooth fade-in effect */
}

.custom-card:hover .custom-card-name2 {
  opacity: 1; /* Show on hover */
}

/* ------------------------------------------------------------------------------------- */

/* register */
.is-invalid {
  border-color: red;
}
.invalid-feedback {
  color: red;
}
/* ----------------------------------------------------------------------- */

/* upcomming sessions */

.upcoming-session-section {
  position: relative;
  padding: 40px 0;
  overflow: hidden; /* Ensures pseudo-element does not extend beyond the section */
}

.upcoming-session-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* background-image: url('images/no10.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  opacity: 0.8;
  filter: blur(3px);
  z-index: -1; /* Places the image behind the content */
}

.upcoming-session-card {
  background-color: rgba(255, 255, 255, 0.75); /* Semi-transparent background for readability */
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1; /* Ensures the content is above the background */
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease; /* Smooth transition on hover */
}

/* Hover effect for the session card */
.upcoming-session-card:hover {
  transform: translateY(-5px); /* Slightly lift the card */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* Increase shadow for depth */
  background-color: rgba(255, 255, 255, 1); /* Change background color on hover */
}

/* Upcoming Session Date */
.upcoming-session-date {
  background-color: #007bff;
  color: white;
  text-align: center;
  padding: 10px;
  border-radius: 8px;
  margin-right: 15px;
  min-width: 60px;
}

.upcoming-session-month {
  display: block;
  font-size: 0.9rem;
  text-transform: uppercase;
}

.upcoming-session-day {
  display: block;
  font-size: 1.5rem;
  font-weight: bold;
}

.upcoming-session-details {
  flex: 1;
}

.upcoming-session-title {
  font-size: 1.2rem;
  margin: 0;
  color: #333;
}

.upcoming-session-duration {
  margin: 5px 0 0;
  color: #555;
  font-size: 0.9rem;
}



/* --------------------------------------------------------------------------------------------- */

/* banner / new moving line  and badge*/



.custom-btn {
    padding: 5px 17px;
    /* Larger padding for a more elegant look */
    font-size: 13px;
    /* Adjust the font size for better readability */
    font-weight: bold;
    /* Make the text bold */
    border-radius: 11px;
    /* Rounded corners for a modern look */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* Subtle shadow for depth */
    transition: all 0.3s ease;
    /* Smooth transition for hover effects */
    margin-bottom: -10px;
    background-color: rgb(87, 210, 30)
}

/* Hover effect */
.custom-btn:hover {
    background-color: #f564e2;
    /* Darker shade of the original button color */
    transform: translateY(-3px);
    /* Slight upward movement */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
    /* Increased shadow on hover */
}

/* Active button effect */
.custom-btn:active {
    transform: translateY(1px);
    /* Slight downward movement when clicked */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    /* Smaller shadow when clicked */
}

.badge-new {
    position: absolute;
    top: 6px;
    left: 8px;
    background-color: red;
    color: white;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: bold;
    border-radius: 7px;
    z-index: 15;
    animation: badgeAnimation 5s ease-in-out infinite;
    
}

/* Keyframes for the badge animation */
@keyframes badgeAnimation {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    50% {
        transform: scale(1.1);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.running-border {
    position: relative;
    border: none;
    /* Remove static border */
}

.running-border::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    border-left: 3px solid #3498db;
    /* Adjust color and size */
    animation: running-border 2s linear infinite;
}

.running-border::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    border-top: 3px solid #3498db;
    /* Adjust color and size */
    animation: running-border 2s linear infinite;
}

@keyframes running-border {
    0% {
        width: 0;
        height: 0;
    }

    25% {
        width: 100%;
        height: 0;
    }

    50% {
        width: 100%;
        height: 100%;
    }

    75% {
        width: 0;
        height: 100%;
    }

    100% {
        width: 0;
        height: 0;
    }
}

.styled-hr {
    border: none;
    height: 3px;
    /* Fixed height */

    background: linear-gradient(to right, #1b4f72, #512e5f, #7b241c);
    /* Darker colors */

    border-radius: 2px;
    margin: 20px auto;
    position: relative;
    overflow: hidden;
    width: 80%;
}

.styled-hr::before {
    content: '';
    position: absolute;
    height: 100%;
    /* Match the height of the <hr> */
    width: 100%;
    top: 0;
    left: -100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 1));

    animation: slide-line 2s infinite;
}

@keyframes slide-line {
    from {
        left: -100%;
    }

    to {
        left: 100%;
    }
}