/* Unified Modern Hover Effects for All Cards */

/* Apply consistent hover effects to all card types */
.course-card,
.testimonial-card,
.blog-card,
.role-card,
.teach-card,
.ach-card,
.program-card,
.stat-card,
.gallery-item,
.sidebar-widget,
.editorial-blog-card,
.slide,
.course-slider-card > .course-card {
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, border 0.3s ease-in-out;
  position: relative;
  z-index: 1;
}

.course-card:hover,
.testimonial-card:hover,
.blog-card:hover,
.role-card:hover,
.teach-card:hover,
.ach-card:hover,
.program-card:hover,
.stat-card:hover,
.gallery-item:hover,
.sidebar-widget:hover,
.editorial-blog-card:hover,
.slide:hover,
.course-slider-card:hover > .course-card {
  transform: scale(1.03);
  box-shadow: 0 12px 30px rgba(119, 186, 67, 0.4); /* Using the primary color in rgba */
  border: 2px solid var(--secondary) !important;
  z-index: 10;
}

/* Adjust specific card types that may need different handling */
.role-card::before,
.course-card::before,
.testimonial-card::before {
  transition: width 0.3s ease, height 0.3s ease;
}

/* Mobile responsiveness - disable hover effects on touch devices */
@media (hover: hover) and (pointer: fine) {
  .course-card:not(.mobile),
  .testimonial-card:not(.mobile),
  .blog-card:not(.mobile),
  .role-card:not(.mobile),
  .teach-card:not(.mobile),
  .ach-card:not(.mobile),
  .program-card:not(.mobile),
  .stat-card:not(.mobile),
  .gallery-item:not(.mobile),
  .sidebar-widget:not(.mobile),
  .editorial-blog-card:not(.mobile),
  .slide:not(.mobile) {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, border 0.3s ease-in-out;
  }
}

/* Individual card types */
.about-text {
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  position: relative;
  z-index: 1;
  margin: 20px;
  border-radius: 12px;
  padding: 20px;
}

.about-card {
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  position: relative;
  z-index: 1;
  border-radius: 12px;
}

.about-text:hover,
.about-card:hover {
  transform: scale(1.03);
  box-shadow: 0 12px 30px rgba(119, 186, 67, 0.4);
  z-index: 10;
}

/* Ensure no layout shift occurs during hover */
.course-card,
.testimonial-card,
.blog-card,
.role-card,
.teach-card,
.ach-card,
.program-card,
.stat-card,
.gallery-item,
.sidebar-widget,
.editorial-blog-card,
.slide,
.about-text,
.about-card {
  will-change: transform;
  backface-visibility: hidden;
  transform-origin: center;
}