@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.row:nth-child(even) {
  /*background-color: #f8f9fa;  Light gray for even rows */
}

.row:nth-child(odd) {
   background-color: #ffffff; /* White for odd rows */
}

body {
  padding-top: 0px;
}
.navbar-brand{
  color:#213783;
}

.navbar-nav .nav-link {
  position: relative;
  padding: 8px 12px;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  color: #007bff  ;
}
/* .nav-link1{
background-color: green;
  color:white  
} */
.navbar-nav .nav-link::after {
  content: "";
  position: absolute;
  width: 0;
  height: 1px; /* Changed from 2px to 1px for a thinner underline */
  left: 0;
  bottom: 0;
  background-color: #000;
  transition: width 0.3s ease;
}

.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {
  width: 100%;
}


.dropdown-toggle::after {
  display: none;
}

.right-logo-text {
  font-size: 13px;
  text-align: right;
  margin-right: 10px;
}

.right-logo-text div:first-child {
  font-weight: 600;
}


.login-dropdown-toggle:hover, .login-dropdown-toggle:focus {
    background-color: #0d6efd !important;
    color: #fff !important;
    border-color: #0d6efd !important;
}
/* banner */
#banner {
  background: url("../assets/images/banner_edited.jpeg") center/cover no-repeat;
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#banner:before {
  position: absolute;
  z-index: 1;
  /* background: rgba(0, 0, 0, 0.73); */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  content: "";
}

#banner .block {
  position: relative;
  z-index: 2;
  color: #fff;
}

#banner .block h1 {
  font-size: 55px;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  color: #80d6a3;
  padding-bottom: 25px;
}

#banner .block h2 {
  font-size: 18px;
  line-height: 30px;
  font-weight: 500;
}

#banner .block .btn-learn {
  border: 1px solid #fff;
  color: #fff;
  border-radius: 25px;
  margin: 0 7px;
  padding: 10px 22px;
  font-size: 18px;
  transition: 0.3s;
}

#banner .block .btn-learn:hover {
  border-color: #80d6a3;
  color: #80d6a3;
}

#banner .block .buttons {
  margin-top: 40px;
}

#banner .scrolldown {
  position: absolute;
  left: 50%;
  bottom: 10%;
  transform: translateX(-50%);
}

#banner .scrolldown .scroll {
  border-radius: 100px;
  width: 25px;
  height: 45px;
  display: inline-block;
  border: 1px solid #fff;
  position: relative;
}

#banner .scrolldown .scroll:after {
  background: #fff;
  border-radius: 300px;
  width: 4px;
  height: 9px;
  position: absolute;
  top: 10px;
  left: 50%;
  margin-left: -2px;
  display: block;
  content: "";
  animation: wiggle 0.5s linear infinite alternate;
}

@keyframes wiggle {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(10px);
  }
}

@media (max-width: 768px) {
  #banner .block h1 {
    font-size: 40px;
  }
  #banner .block h2 {
    font-size: 16px;
  }
}
.login-signup-icons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1050;
  /* Ensure visibility */
}

.icon-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.icon-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.login-icon,
.signup-icon {
  font-size: 24px;
  color: white;
  cursor: pointer;
  transition: color 0.3s ease, transform 0.3s ease;
}

.login-icon:hover,
.signup-icon:hover {
  color: #007bff;
  /* Change color on hover */
  transform: scale(1.2);
  /* Slightly enlarge on hover */
}

.icon-title {
  position: absolute;
  bottom: -20px;
  font-size: 0.9rem;
  color: white;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.icon-container:hover .icon-title {
  opacity: 1;
  /* Show title on hover */
}

@media (max-width: 991.98px) {
  .login-signup-icons {
    display: none;
    /* Hide banner icons on smaller screens */
  }
}

.stats-box {
  width: 90%;
  max-width: 800px;
  /* background: rgba(255, 255, 255, 0.9); */
  background: transparent;
  /* box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); */
  border-radius: 10px;
  padding: 20px;
  position: absolute;
  top: calc(100% - 30px);
  /* Lower the box slightly */
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1015;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

.stat-icon {
  font-size: 2rem;
  color: #007bff;
  margin-bottom: 10px;
}

.stat-number {
  font-family: "Roboto", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 28px;
  font-style: normal;
  color: #333;
}

.stat-item p {
  margin: 0;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  font-style: normal;
  color: #555;
}

@media (max-width: 768px) {
  .stats-box {
    top: calc(100% - 20px);
    /* Adjust for smaller screens */
    width: 95%;
  }

  .stat-icon {
    font-size: 1.5rem;
  }

  .stat-number {
    font-size: 1.2rem;
  }

  .stat-item p {
    font-size: 0.9rem;
  }
}
#ourCourses {
  margin:10px;
  font-family: "Roboto", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 28px;
  font-style: normal;
  color: rgb(51, 51, 51);
}

/* popular  */
.popular_container {
  max-width: 1110px;
  margin: 0 auto;
  position: relative;
  padding: 20px;
  font-family: "Roboto", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
  background-color: #f9f9f9;
}

/* Cards */
.popularcards-wrapper {
  display: flex;
    overflow-x: auto; /* Allow horizontal scrolling */
    scroll-snap-type: x mandatory; /* Smooth scrolling for cards */
    gap: 8px; /* Add spacing between cards */
    padding: 0 10px; /* Add padding to ensure cards are fully visible */
    width: 100%; /* Ensure the wrapper takes full width */
    box-sizing: border-box; /* Include padding in width calculation */
}
.popularcard {
  flex: 0 0 calc(25% - 20px); /* Ensure four cards fit in the row */
  scroll-snap-align: start; /* Align cards properly */
  width: 300px;
  margin-right: 20px;
  border-radius: 12px;
  overflow: hidden;
  background-color: white;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
  scroll-snap-align: start;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.popularcard img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.card-content {
  padding: 15px;
}

.popularcard h3 {
  margin-bottom: 10px;
}

.popularcard p {
  font-size: 0.9em;
  margin-bottom: 10px;
  color: #444;
}

/* Adjust styles for the "See All" link */
.see-all-link {
  position: absolute;
  right: px;
  bottom: 10px; /* Increased to move the text slightly down */
  font-size: 16px;
  font-weight: bold;
  color: #007bff;
  text-decoration: none;
  transition: transform 0.3s ease, color 0.3s ease;
}

.see-all-link:hover {
  color: #0056b3;
  transform: scale(1.1);
}

/* Add padding to the parent container */
.container.position-relative {
  padding-bottom: 40px; /* Increased to create more space at the bottom */
}
.badge-container {
  position: relative;
}

.popular-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: #ff5733;
  color: white;
  padding: 5px 10px;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 28px;
  font-style: normal;
  border-radius: 5px;
  opacity: 1;
  transform: translateY(0);
}

.animated-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  color: #007bff;
  font-weight: bold;
  position: relative;
  overflow: hidden;
  transition: color 0.3s ease;
}

.animated-link i {
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}

.animated-link:hover {
  color: #0056b3;
}

.animated-link:hover i {
  transform: translateX(0);
}
/* Navigation Buttons - Rounded */
.nav-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.4);
  color: white;
  border: none;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  font-size: 1.2em;
  display: flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 20; /* Increased z-index for visibility */
  transition: background-color 0.3s ease;
  opacity: 1; /* Ensure visible */
  visibility: visible; /* Ensure visible */
}

.nav-button.prev {
  left: -50px !important;
  right: auto;
}

.nav-button.next {
  right: -50px !important;
  left: auto;
}

@media (max-width: 767.98px) {
  .nav-button {
    top: auto;
    bottom: 10px;
    transform: none;
    width: 40px;
    height: 40px;
    font-size: 1.5em;
  }
  .nav-button.prev {
    left: 10px !important;
    right: auto;
  }
  .nav-button.next {
    right: 10px !important;
    left: auto;
  }
}

/* Hide scrollbar */
.popularcards-wrapper::-webkit-scrollbar {
  display: none;
}

/* Hover Animation */
.popularcard:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.popularcard:hover img {
  transform: scale(1.05);
  transition: transform 0.3s ease;
}

/* Responsive 
@media screen and (max-width: 768px) {
  .popularcard {
    width: 96vw; /* Show only one card per row in scroll */
    /*min-width: 220px;
    max-width: 98vw;
    margin: 10px auto;
    margin-right: 40px;
  }


  .popularcards-wrapper {
    gap: 10px;
    padding: 0 4px;
  }
  .nav-button {
    display: none;
  }
}
  */

h1 {
  font-size: 2.2em;
}

.flip {
  position: relative;
  > .front,
  > .back {
    display: block;
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition-duration: 0.5s;
    transition-property: transform, opacity;
  }
  > .front {
    transform: rotateY(0deg);
  }
  > .back {
    position: absolute;
    opacity: 0;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    transform: rotateY(-180deg);
  }
  &:hover {
    > .front {
      transform: rotateY(180deg);
    }
    > .back {
      opacity: 1;
      transform: rotateY(0deg);
    }
  }
  &.flip-vertical {
    > .back {
      transform: rotateX(-180deg);
    }
    &:hover {
      > .front {
        transform: rotateX(180deg);
      }
      > .back {
        transform: rotateX(0deg);
      }
    }
  }
}

.flip {
  position: relative;
  display: inline-block;
  margin-right: 2px;
  margin-bottom: 1em;
  width: 400px;

  > .front,
  > .back {
    display: block;
    color: white;
    width: inherit;
    background-size: cover !important;
    background-position: center !important;
    height: 220px;
    padding: 1em 2em;
    /* background: #1d3382f2; */
    border-radius: 10px;
    background-image: linear-gradient(to right bottom, #23409c, #444eb1, #605cc5, #7b6bda, #967aef);
    overflow: auto;
    scrollbar-width: thin;
      overscroll-behavior: contain;
    h5 {
      font-family: "Roboto", sans-serif;
      font-size: 20px;
      font-weight: 700;
      line-height: 28px;
      font-style: normal;
    }
    p {
      font-family: "Roboto", sans-serif;
      font-size: 16px;
      font-weight: 400;
      font-style: normal;
      line-height: 160%;
      color: #ffffff;  
    }
  }
}

.text-shadow {
  text-shadow: 1px 1px rgba(0, 0, 0, 0.04), 2px 2px rgba(0, 0, 0, 0.04),
    3px 3px rgba(0, 0, 0, 0.04), 4px 4px rgba(0, 0, 0, 0.04),
    0.125rem 0.125rem rgba(0, 0, 0, 0.04), 6px 6px rgba(0, 0, 0, 0.04),
    7px 7px rgba(0, 0, 0, 0.04), 8px 8px rgba(0, 0, 0, 0.04),
    9px 9px rgba(0, 0, 0, 0.04), 0.3125rem 0.3125rem rgba(0, 0, 0, 0.04),
    11px 11px rgba(0, 0, 0, 0.04), 12px 12px rgba(0, 0, 0, 0.04),
    13px 13px rgba(0, 0, 0, 0.04), 14px 14px rgba(0, 0, 0, 0.04),
    0.625rem 0.625rem rgba(0, 0, 0, 0.04), 16px 16px rgba(0, 0, 0, 0.04),
    17px 17px rgba(0, 0, 0, 0.04), 18px 18px rgba(0, 0, 0, 0.04),
    19px 19px rgba(0, 0, 0, 0.04), 1.25rem 1.25rem rgba(0, 0, 0, 0.04);
}
/*  */

/* testimonial */
.carousel img {
  width: 70px;
  max-height: 70px;
  border-radius: 50%;
  margin-right: 1rem;
  overflow: hidden;
}
.carousel-inner {
  padding: 1em;
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 28px;
  font-style: normal;
}

.carousel-inner .card-title {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  font-weight: 400;
}

@media screen and (min-width: 576px) {
  .carousel-inner {
    display: flex;
    width: 90%;
    margin-inline: auto;
    padding: 1em 0;
    overflow: hidden;
  }
  .carousel-item {
    display: block;
    margin-right: 0;
    flex: 0 0 calc(100% / 2);
  }
}
@media screen and (min-width: 768px) {
  .carousel-item {
    display: block;
    margin-right: 0;
    flex: 0 0 calc(100% / 3);
  }
}
.carousel .card {
  margin: 0 0.5em;
  border: 0;
}

.carousel-control-prev,
.carousel-control-next {
  width: 3rem;
  height: 3rem;
  background-color: grey;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
}

/* our courses nav tabs */
/* Change the background color of the nav pills container */
#pills-tab {
  background-color: #fff !important;
  border-radius: 10px;
  padding: 10px; /* Ensures spacing inside */
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

/* Ensure the background color of individual nav items doesn't override */
.nav-pills .nav-link {
  color: black !important; /* Optional: Ensures text remains visible */
}

/* Change the background of the active tab */
.nav-pills .nav-link.active {
  background-color: rgb(13, 110, 255) !important; /* A slightly darker shade */
  color: white !important;
}

.nav-pills .nav-link.active:hover {
  background-color: #6ea8fe !important ; /* A slightly darker shade */
  color: black !important;
}

/* Hide the badge by default */
.nav-pills .nav-link .badge {
  display: none;
}

/* Show the badge only when the tab is active */
.nav-pills .nav-link.active .badge {
  display: inline-block;
}

/* footer */
.footer {
  background: #fff;
  padding: 10px 0;
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  text-align: center;
  color: #343a40;
  position: relative;
  border-top: 1px solid #343a40; /* Add top border line */
}

.footer-logo {
  position: absolute;
  top: -25px; /* Adjust to overlap the top border */
  left: 50%;
  transform: translateX(-50%);
  background: #fff; /* Optional: Add background to make the logo stand out */
  padding: 5px; /* Optional: Add padding around the logo */
  border-radius: 50%; /* Optional: Make the logo background circular */
}

.footer-logo-img {
  max-width: 100px;
  height: auto;
}

.social-icons {
  gap: 20px;
  margin-bottom: 10px;
}

.social-icons a {
  font-size: 26px;
  color: rgb(11, 11, 11);
  transition: color 0.3s ease;
}

.social-icons a:hover {
  color: rgb(174, 174, 174);
}

.footer-links ul {
  list-style: none;
  padding: 0;
  margin: 8px 0;
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
}

.footer-links ul li a {
  text-decoration: none;
  color: #fff;
  font-size: 14px;
  position: relative;
}

.footer-links ul li a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1px;
  background-color: #000;
  transition: width 0.3s ease;
}

.footer-links ul li a:hover::after {
  width: 100%;
}

.footer-links ul li a:hover {
  color: #000;
}

.copyright p {
  font-size: 12px;
  color: #fff;
  margin: 0;
}

@media (max-width: 720px) {
  .footer {
    text-align: center;
    padding: 10px;
  }

  .footer-links ul li {
    display: block;
    margin: 5px 0;
  }
}


/* Hover Animation */
.coursecard:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.coursecard:hover img {
  transform: scale(1.05);
  transition: transform 0.3s ease;
}
.coursecard.responsive-coursecard {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background-color: white;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 30%;
}
.coursecard.responsive-coursecard img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 10px 10px 0 0;
}
@media (max-width: 991.98px) {
  .coursecard.responsive-coursecard img { height: 140px; }
}
@media (max-width: 767.98px) {
  .coursecard.responsive-coursecard { margin-bottom: 20px; }
  .coursecard.responsive-coursecard img { height: 120px; }
}
@media (max-width: 575.98px) {
  .coursecard.responsive-coursecard { margin-bottom: 16px; }
  .coursecard.responsive-coursecard img { height: 100px; }
}

/* Reduce container and card size for mobile screens */
@media (max-width: 575.98px) {
  .popular_container {
    padding: 6px;
    max-width: 100vw;
  }
  .popularcards-wrapper {
    gap: 6px;
    padding: 0 2px;
  }
  .popularcard {
    width: 80vw;
    max-width: 80vw;
    min-width: 140px;
    margin: 4px auto;
    margin-right: 0;
  }
  .popularcard img {
    height: 80px;
  }
  .card-content {
    padding: 8px;
  }
}

/* Make .popular_container fit screen and responsive for <=768px */
@media (max-width: 768px) {
  .popular_container {
    max-width: 100vw;
    width: 100vw;
    padding: 8px 2vw;
    margin: 0;
    box-sizing: border-box;
  }
  .popularcards-wrapper {
    gap: 6px;
    padding: 0 2vw;
  }
  .popularcard {
    width: 90vw;
    max-width: 90vw;
    min-width: 140px;
    margin: 4px auto;
    margin-right: 0;
  }
  .popularcard img {
    height: 90px;
  }
  .card-content {
    padding: 8px;
  }
}


/*                     
.coursecard {
  width: 320px;
  max-width: 100%;
  flex: 0 0 auto;
} 
*/
                    

/* Scroll button (consistent rule for .scroll-btn) */
.scroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.45);
  color: #fff;
  border: none;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  font-size: 1.2em;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 50;
  transition: background-color 0.2s ease, transform 0.15s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.scroll-btn:hover { background-color: rgba(0,0,0,0.65); transform: translateY(-50%) scale(1.03); }

/* left / right helper classes */
.scroll-btn.scroll-left { left: -50px; }
.scroll-btn.scroll-right { right: -50px; }

/* mobile adjustments */
@media (max-width: 767.98px) {
  .scroll-btn {
    top: auto;
    bottom: 12px;
    transform: none;
    width: 40px;
    height: 40px;
  }
  .scroll-btn.scroll-left { left: 12px; }
  .scroll-btn.scroll-right { right: 12px; }
}

/* START: Fixed 4-column slot layout for course lists
   Ensures each of the 4 slots remains 25% on wide screens even when fewer cards are present.
   Inner course cards will fill their slot (width:100%) and will not shrink.
*/
.fixed-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 equal columns (25% each) */
  gap: 1rem; /* spacing between slots */
  align-items: start;
}

/* Make the bootstrap .col wrappers act as grid children occupying one slot */
.fixed-grid-4 > .col {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

/* Ensure course card fills the slot and does not use the previous 30%/320px sizing */
.fixed-grid-4 .coursecard.responsive-coursecard,
.fixed-grid-4 .coursecard {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 auto; /* prevent shrink/grow */
}

/* Ensure images and internal layout fill the card */
.fixed-grid-4 .coursecard.responsive-coursecard img {
  width: 100%;
  height: 180px; /* keep same card image height as before */
  object-fit: cover;
}

/* Responsive: fall back to 2 / 1 columns on smaller screens to match existing behavior */
@media (max-width: 992px) {
  .fixed-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 575.98px) {
  .fixed-grid-4 {
    grid-template-columns: 1fr;
  }
}


/* START: Uniform card height and vertical alignment for course cards */

/* Fix card height for all course cards */
.fixed-grid-4 .coursecard,
.fixed-grid-4 .coursecard.responsive-coursecard {
  height: 350px; /* Adjust as needed for your design */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Ensure image stays at top, content fills space, and button is always at bottom */
.fixed-grid-4 .coursecard .card-content,
.fixed-grid-4 .coursecard.responsive-coursecard .card-content,
.fixed-grid-4 .coursecard .card-content1,
.fixed-grid-4 .coursecard.responsive-coursecard .card-content1 {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 0;
  /* Remove margin-top/bottom from children for better alignment */
}

.fixed-grid-4 .coursecard .card-content1 > h5,
.fixed-grid-4 .coursecard .card-content > h5 {
  margin-bottom: 8px;
  word-break: break-word;
}

.fixed-grid-4 .coursecard .card-content1 > p,
.fixed-grid-4 .coursecard .card-content > p {
  margin-bottom: 8px;
}

/* Align the "Apply" button container to the bottom of the card content */
.fixed-grid-4 .coursecard .card-content1 > div,
.fixed-grid-4 .coursecard .card-content > div {
  margin-top: 0px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  min-height: 0px; /* Ensures button line is always at same vertical position */
}

/* END: Uniform card height and vertical alignment for course cards */

/* START: Uniform height and vertical alignment for popular course cards */
.popularcard {
  height: 320px; /* Match coursecard height */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.popularcard img {
  flex-shrink: 0;
}

.popularcard .card-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 0;
}

.popularcard .card-content > h5,
.popularcard .card-content > h3 {
  margin-bottom: 8px;
  word-break: break-word;
}

.popularcard .card-content > p {
  margin-bottom: 8px;
}

/* Align the "Apply" button container to the bottom of the card content */
.popularcard .card-content > div {
  margin-top: auto;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  min-height: 40px;
}
/* END: Uniform height and vertical alignment for popular course cards */

/* Add/ensure these from index_v1.0.php if missing: */
.scroll-container {
    overflow-x: auto;
    scroll-behavior: smooth;
    white-space: nowrap;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.scroll-container::-webkit-scrollbar {
    display: none;
}
.testimonial-card {
    display: inline-block;
    vertical-align: top;
    min-width: 300px;
    max-width: 320px;
    margin: 0 8px;
    width: 300px;
    overflow: hidden;
}
.testimonial-card .card-body {
    width: 100%;
    padding: 1rem;
    box-sizing: border-box;
}
.testimonial-card .testimonial-img {
    width: 50px !important;
    height: 50px !important;
    object-fit: cover;
    border-radius: 50%;
}
.testimonial-card .card-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    max-width: 260px;
    min-width: 0;
    cursor: pointer;
}
#testimonialPreview {
    position: absolute;
    z-index: 9999;
    max-width: 420px;
    background: #ffffff;
    color: #222;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    padding: 14px;
    display: none;
    transition: opacity 0.18s ease;
    opacity: 0;
    font-size: 14px;
    line-height: 1.5;
}
#testimonialPreview.show {
    display: block;
    opacity: 1;
}
#testimonialPreview.mobile-full {
    position: fixed;
    left: 8px;
    right: 8px;
    top: 12vh;
    bottom: auto;
    max-width: none;
    width: auto;
    max-height: 76vh;
    overflow: auto;
}
#testimonialPreview .close-btn {
    position: absolute;
    right: 8px;
    top: 6px;
    background: transparent;
    border: none;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    color: #444;
}
@media (max-width: 600px) {
    .testimonial-card {
        min-width: 85vw;
    }
}