* {
   box-sizing: border-box;
}
 html, body {
   margin: 0;
   padding: 0;
}

.slider-image{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

 .C-carousel {
   background: #212121;
   height: 600px;
   width: 100%;
   overflow: hidden;
   position: relative;
}

.C-carousel::after{
  content: "";
  position: absolute;
  width: 100%;
  height: 5px;
  background: #040348;
  bottom: 0;
}
 .C-track {
   opacity: 1;
   transition: all 400ms ease;
}

 .C-track--reinit {
   opacity: 0;
   transition: all 0ms linear;
}
 .button-prev {
   position: absolute;
   right: 50%;
}
 .C-slide {
   height: 600px;
   width: 100vw;
   display: flex;
   flex: 1 1 auto;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   color: #fff;
   background: #333;
   font-size: 22px;
   overflow: hidden;
}


 .C-carousel.initialized .C-slide {
   border-radius: 100vw;
   transform: scale(0.5) skew(-5deg) rotate(0);
   transition: all 700ms ease;
}

 .C-carousel.initialized .C-slide.active {
   transform: scale(1) skew(0) rotate(0);
   border-radius: 0;
}


 .C-navigation {
   position: absolute;
   bottom: 5px;
   left: 50%;
   transform: translateX(-50%);
   z-index: 2;
}
 .C-carousel--vertical .C-navigation {
   bottom: auto;
   left: auto;
   right: 20px;
   top: 50%;
   transform: translateY(-50%);
   width: 20px;
}
 @media (max-width: 480px) {
   .C-carousel--horizontal .C-navigation {
     bottom: 50px;
  }
}
 .C-navigation__dot {
   width: 12px;
   height: 12px;
   background: #fff;
   display: inline-block;
   margin: 4px;
   cursor: pointer;
   border-radius: 50%;
}
 .C-navigation__dot.active {
   background: #3333ff;
   transform: scale(1.3);
}
 .C-carousel-navigation-button {
   position: absolute;
   top: 50%;
   left: 10px;
   z-index: 2;
   border: 2px solid #fff;
   box-shadow: none;
   border-radius: 5px;
   font-weight: bold;
   color: #fff;
   padding: 10px;
   background: transparent;
   cursor: pointer;
   transform: translateY(-50%);
   transition: all 300ms ease;
   text-transform: capitalize;
   text-shadow:1px 1px 3px #333;
   box-shadow:1px 1px 3px #333;
}
 .C-carousel-navigation-button:hover {
   background: #eee;
   color: blueviolet;
}
 .C-carousel-navigation-button:active {
   background: #fff;
}
 .C-carousel-navigation-button--next {
   left: auto;
   right: 10px;
}
 .C-carousel--vertical .C-carousel-navigation-button {
   bottom: 20px;
   top: auto;
   left: auto;
   right: 25px;
   transform: translateY(0);
}
 .C-carousel--vertical .C-carousel-navigation-button--next {
   right: 20px;
}
 .C-carousel--vertical .C-carousel-navigation-button--prev {
   transform: translatex(calc(-105%));
}
 .C-slide-title {
   padding: 1rem 2rem;
   font-size: 1.5rem;
   position: relative;
   transform: translateY(100%);
   opacity: 0;
   transition: all 300ms ease;
   transition-delay: 500ms;
}
 @media (min-width: 480px) {
   .C-slide-title {
     font-size: 2rem;
  }
}
 @media (min-width: 768px) {
   .C-slide-title {
     font-size: 42px;
  }
}
 .active .C-slide-title {
   transform: translateY(0) translateX(0);
   opacity: 1;
}
 .pen-controls {
   position: fixed;
   bottom: 10px;
   left: 10px;
}
 .pen-controls button {
   border: 2px solid blueviolet;
   box-shadow: none;
   border-radius: 0;
   font-weight: bold;
   color: blueviolet;
   padding: 10px;
   background: #fff;
   cursor: pointer;
}

.events-featured-container{
  width: 100%; background: linear-gradient(180deg,rgba(1, 30, 88, 1) 0%, rgba(1, 6, 16, 1) 100%); display: flex; justify-content: center; align-items: center; position: relative; padding-top: 20px;
 }

.events-featured-header{
  position:absolute; left: 40px; top: 20px; color: #fff; font-family: Inter; font-size: 20px; font-weight: 700;
}

.events-featured-item-container{
  width: 80%; padding: 70px 10px; display: flex; justify-content: space-around ;  flex-direction: row; flex-wrap: wrap;
}

.events-featured-item{
  flex: 0 0 350px; 
  height: 600px; 
  background: #eee; 
  border-radius: 20px; 
  margin-top: 20px; 
  overflow: hidden;
  font-family: Inter;
  position: relative;
}

.events-featured-item img{width: 100%; object-fit: cover; height:250px; box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.4);}

.events-featured-date{padding: 10px 20px;}

.events-featured-title{
  width: 95%;
  padding: 10px 20px;
  font-size: 18px;
  font-weight: 700;
  color: #040348;
}

.events-featured-writeup{
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 400;
}

.events-featured-button{
  padding:10px 20px; 
  background:#040348;
  border:none;
  border-radius: 10px;
  color:#ffffff;
  position: absolute;
  bottom: 20px;
  right: 20px;
  font-size: 14px;
}

.events-featured-item.even{margin-top: 100px}

.events-more-container{
  width: 100%; background: linear-gradient(355deg,rgba(230, 235, 255, 1) 0%, rgba(224, 237, 255, 1) 50%, rgba(255, 255, 255, 1) 100%); display: flex; justify-content: center; align-items: center; position: relative; padding-top: 20px; flex-direction: column;
}

.events-more-header{
  position:absolute; left: 40px; top: 20px; color: #fff; font-family: Inter; font-size: 20px; font-weight: 700; color: #333;
}

.events-more-item-container{
  width:95%; padding: 70px 10px; display: flex; justify-content: space-around; align-items: center; flex-direction: row; flex-wrap: wrap;
}

.events-more-item-content{
  flex: 0 0 600px; 
  height: 600px; 
  background: #fff; 
  border-radius: 20px; 
  margin-top: 20px;
  box-shadow: 1px 5px 20px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.events-more-item{flex: 0 0 300px; padding: 15px; width: 100%; display: flex; flex-direction: row; justify-content: space-between; position: relative;}

.events-more-item-image{
  flex: 0 0 45%; display: flex; justify-content: center; align-items: center;
}

.events-more-item-image img{width: 95%; height: 95%; object-fit: cover; border-radius: 20px;}

.events-more-date{padding: 10px 20px;}

.events-more-title{
  width: 95%;
  padding: 10px 20px;
  font-size: 18px;
  font-weight: 700;
  color: #040348;
}

.events-more-writeup{
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 400;
}

.events-more-button{
  padding:10px 20px; 
  background:#040348;
  border:none;
  border-radius: 10px;
  color:#ffffff;
  position: absolute;
  bottom: 20px;
  right: 20px;
  font-size: 14px;
}

.s1{
  width: 100%; height: 100%; position: relative;
}

.s2{
  position: absolute; background: linear-gradient(90deg,rgba(16, 64, 161, 1) 0%, rgba(174, 190, 220, 0.51) 73%, rgba(247, 247, 247, 0) 100%); width: 100%; height:100%
}

.s3{
  position: absolute; top: 50%; left: 60px; transform: translateY(-50%); padding-bottom: 70px;
}

.s4{
  font-family: Inter; font-weight: 700; width: 500px; text-shadow: 2px 2px 5px #333; font-size: 32px; margin-bottom: 15px;
}

.s5{
  font-family: Inter; font-weight: 500; width: 500px; text-shadow: 1px 1px 1px #333; font-size: 13px;
}

.s6{
  background-color:#040348; color: #fff; border: none; border-radius: 10px; padding: 10px 20px; font-size: 16px; font-family: Inter; font-weight: 300; position: absolute; bottom: 0; right: 0;
}

/* =========================================================
   MOBILE RESPONSIVENESS FIXES (Max Width: 992px)
   ========================================================= */

@media (max-width: 992px) {
    /* 1. Fix Slider/Hero Banner Text */
    .s3 {
        left: 20px; /* Bring text inward */
        right: 20px;
    }
    .s4, .s5 {
        width: 100%; /* Overrides the hardcoded 500px */
        max-width: 100%;
    }
    .s4 {
        font-size: 24px; /* Slightly smaller title for mobile */
    }

    /* 2. Fix Featured Events Stacking */
    .events-featured-item-container {
        width: 100%; /* Take up full width */
        padding: 40px 15px;
    }
    .events-featured-item {
        flex: 1 1 100%; /* Force items to take full width of container */
        max-width: 400px; /* Prevent them from stretching too wide on iPads */
        height: auto; /* Let height adjust to text */
        min-height: 500px;
        margin: 20px auto !important; /* Override the staggered 100px top margin on even items */
        padding-bottom: 70px; /* Give room for the absolute Read More button */
    }

    /* 3. Fix More Events Stacking */
    .events-more-item-container {
        width: 100%;
        padding: 40px 15px;
    }
    .events-more-item-content {
        flex: 1 1 100%;
        height: auto; /* Overrides the hardcoded 600px height */
    }
    
    /* Change from row (side-by-side) to column (stacked) */
    .events-more-item {
        flex-direction: column; 
        height: auto;
        padding-bottom: 60px; 
    }
    
    .events-more-item-image {
        width: 100%;
        margin-bottom: 15px;
    }
    
    .events-more-item-image img {
        height: 250px; /* Keeps image from being too tall when stacked */
        width: 100%;
    }
    
    /* 4. Override the inline style <div style='flex: 0 0 50%;'> from your PHP */
    .events-more-item > div[style] {
        flex: 1 1 100% !important; 
        width: 100%;
    }
    
    /* 5. Fix "Read More" Button Overlap in More Events */
    .events-more-button {
        position: relative; /* Removes absolute positioning so it flows naturally */
        bottom: 0;
        right: 0;
        margin-top: 15px;
        margin-left: 20px;
        align-self: flex-start;
    }
}