/* Enhanced Banner image styles for section dividers - Full Width */
.section-banner {
  width: 100%;
  height: 180px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll;
  margin: 4rem 0;
  position: relative;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(106,27,154,0.15);
  border-radius: 12px;
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  /* Fallback background for missing images */
  background-image: linear-gradient(135deg, #6a1b9a 0%, #9c27b0 50%, #e91e63 100%);
}

.section-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, 
    rgba(106,27,154,0.6), 
    rgba(156,39,176,0.5), 
    rgba(233,30,99,0.4));
  z-index: 1;
  transition: all 0.3s ease;
}

.section-banner::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, 
    transparent 30%, 
    rgba(255,255,255,0.1) 50%, 
    transparent 70%);
  z-index: 2;
  transform: translateX(-100%);
  transition: transform 0.8s ease;
}

.section-banner:hover::after {
  transform: translateX(100%);
}

.section-banner:hover {
  transform: translateY(-5px);
  box-shadow: 0 25px 50px rgba(106,27,154,0.25);
}

.section-banner:hover::before {
  background: linear-gradient(135deg, 
    rgba(106,27,154,0.7), 
    rgba(156,39,176,0.6), 
    rgba(233,30,99,0.5));
}

.section-banner-1 {
  background-image: 
    url('../images/slider/1.webp'),
    url('../images/placeholders/placeholder-1.webp'),
    /* Final fallback pattern if all images fail */
    linear-gradient(135deg, #6a1b9a 0%, #9c27b0 50%, #e91e63 100%);
}

.section-banner-2 {
  background-image: 
    url('../images/slider/2.webp'),
    url('../images/placeholders/placeholder-2.webp'),
    /* Final fallback pattern if all images fail */
    linear-gradient(45deg, #9c27b0 0%, #e91e63 50%, #6a1b9a 100%);
}

.section-banner-3 {
  background-image: 
    url('../images/slider/3.webp'),
    url('../images/placeholders/placeholder-3.webp'),
    /* Final fallback pattern if all images fail */
    linear-gradient(225deg, #e91e63 0%, #6a1b9a 50%, #9c27b0 100%);
}

.section-banner-4 {
  background-image: 
    url('../images/slider/4.webp'),
    url('../images/placeholders/placeholder-4.webp'),
    /* Final fallback pattern if all images fail */
    linear-gradient(315deg, #6a1b9a 0%, #e91e63 50%, #9c27b0 100%);
}

.section-banner-welcome {
  background-image: 
    url('../images/welcome.webp'),
    url('../images/placeholders/placeholder-1.webp'),
    /* Final fallback pattern if all images fail */
    linear-gradient(180deg, #9c27b0 0%, #6a1b9a 50%, #e91e63 100%);
}

/* Decorative elements */
.section-banner-decorative {
  position: relative;
  margin: 5rem 0;
}

.section-banner-decorative::before {
  content: '✦';
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--primary);
  font-size: 2rem;
  animation: sparkle 2s ease-in-out infinite;
}

/* Different overlay variations for variety */
.section-banner-alt-1::before {
  background: linear-gradient(45deg, 
    rgba(106,27,154,0.7), 
    rgba(156,39,176,0.5), 
    rgba(106,27,154,0.6));
}

.section-banner-alt-2::before {
  background: linear-gradient(90deg, 
    rgba(156,39,176,0.6), 
    rgba(233,30,99,0.5), 
    rgba(106,27,154,0.6));
}

.section-banner-alt-3::before {
  background: linear-gradient(225deg, 
    rgba(233,30,99,0.6), 
    rgba(106,27,154,0.5), 
    rgba(156,39,176,0.6));
}

/* Page-specific banner overlays with fallback images */
.banner-about {
  background-image: 
    url('../images/slider/2.webp'),
    url('../images/placeholders/placeholder-2.webp'),
    linear-gradient(135deg, #6a1b9a 0%, #9c27b0 100%);
}

.banner-about::before {
  background: linear-gradient(135deg, 
    rgba(106,27,154,0.8), 
    rgba(156,39,176,0.7));
}

.banner-academics {
  background-image: 
    url('../images/slider/3.webp'),
    url('../images/placeholders/placeholder-3.webp'),
    linear-gradient(45deg, #9c27b0 0%, #e91e63 100%);
}

.banner-academics::before {
  background: linear-gradient(45deg, 
    rgba(156,39,176,0.8), 
    rgba(233,30,99,0.6));
}

.banner-admission {
  background-image: 
    url('../images/slider/1.webp'),
    url('../images/placeholders/placeholder-1.webp'),
    linear-gradient(225deg, #e91e63 0%, #6a1b9a 100%);
}

.banner-admission::before {
  background: linear-gradient(225deg, 
    rgba(233,30,99,0.7), 
    rgba(106,27,154,0.8));
}

.banner-gallery {
  background-image: 
    url('../images/slider/4.webp'),
    url('../images/placeholders/gallery-banner.webp'),
    linear-gradient(180deg, #6a1b9a 0%, #9c27b0 100%);
}

.banner-gallery::before {
  background: linear-gradient(180deg, 
    rgba(106,27,154,0.8), 
    rgba(156,39,176,0.6));
}

.banner-events {
  background-image: 
    url('../images/slider/2.webp'),
    url('../images/placeholders/events-banner.webp'),
    linear-gradient(90deg, #9c27b0 0%, #e91e63 100%);
}

.banner-events::before {
  background: linear-gradient(90deg, 
    rgba(156,39,176,0.7), 
    rgba(233,30,99,0.7));
}

.banner-contact {
  background-image: 
    url('../images/slider/2.webp'),
    url('../images/placeholders/placeholder-2.webp'),
    linear-gradient(315deg, #e91e63 0%, #6a1b9a 100%);
}

.banner-contact::before {
  background: linear-gradient(315deg, 
    rgba(233,30,99,0.8), 
    rgba(106,27,154,0.7));
}

@keyframes sparkle {
  0%, 100% { opacity: 0.5; transform: translateX(-50%) scale(1); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.2); }
}

@media (max-width: 768px) {
  .section-banner {
    height: 120px;
    margin: 3rem 0;
    background-attachment: scroll;
    border-radius: 8px;
  }

  .section-banner-decorative {
    margin: 3rem 0;
  }

  .section-banner-decorative::before {
    font-size: 1.5rem;
    top: -15px;
  }
}

/* Ensure consistent positioning across all devices */
@media (max-width: 1200px) {
  .section-banner {
    background-attachment: scroll;
  }
}

/* Animation for banners */
.section-banner.aos-animate {
  opacity: 1;
  transform: translateY(0);
}

/* Global fix for all background attachments to prevent scrolling issues */
* {
  background-attachment: scroll !important;
}

/* Ensure consistent banner behavior across all pages */
.banner, .section-banner {
  background-attachment: scroll !important;
  position: relative;
  will-change: auto;
}

/* Fix for any potential z-index issues */
.section-banner {
  z-index: 1;
}

.section-banner::before,
.section-banner::after {
  z-index: 2;
}