* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
 }
body{
  overflow-x: hidden;
}


 body,
 html {
   height: 100%;
   font-family: 'Roboto', sans-serif;
 }

 .hero {
   position: relative;
   height: 90vh;
   overflow: hidden;
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
   color: rgb(0, 0, 0);
   font-family: 'Roboto', sans-serif;
 }

 .slideshow {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 0;
 }

 .slide {
   position: absolute;
   width: 100%;
   height: 100%;
   background-size: cover;
   background-position: center;
   opacity: 0;
   animation: fadeSlideshow 15s infinite;
   z-index: 0;
   filter: blur(6px);
   transform: scale(1.05);
   /* Slight scale to avoid edge blur */
 }

 .hero::after {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.4);
   /* semi-dark overlay */
   z-index: 0;
 }



 .slide:nth-child(1) {
   animation-delay: 0s;
 }

 .slide:nth-child(2) {
   animation-delay: 5s;
 }

 .slide:nth-child(3) {
   animation-delay: 10s;
 }

 @keyframes fadeSlideshow {
   0% {
     opacity: 0;
   }

   5% {
     opacity: 1;
   }

   30% {
     opacity: 1;
   }

   35% {
     opacity: 0;
   }

   100% {
     opacity: 0;
   }
 }

 .hero-content {
   position: relative;
   z-index: 1;
   animation: fadeIn 2s ease-in-out;
 }

 .hero-content h1 {
   font-family: 'Playfair Display', serif;
   font-size: 6rem;
   font-weight: 900;
   animation: slideInFromLeft 1.5s ease-out;
   color: #002c9a;
       text-shadow:
    -1px -1px 0 rgb(255, 255, 255),
     1px -1px 0 black,
    -1px  1px 0 black,
     1px  1px 0 rgb(0, 0, 0);

 }
 
 .hero-content p {
   font-size: 1.3rem;
   margin-top: 1rem;
   animation: slideInFromRight 1.5s ease-out;
   color: #ffdd00;
 }

 .hero-content button {
   margin-top: 2rem;
   padding: 1rem 2rem;
   font-size: 1rem;
   border: none;
   border-radius: 30px;
   background-color: #ff6f61;
   color: white;
   cursor: pointer;
   transition: background-color 0.3s;
   animation: fadeIn 3s ease-in;
 }

 .hero-content button:hover {
   background-color: #e85c50;
 }

 @keyframes fadeIn {
   from {
     opacity: 0;
   }

   to {
     opacity: 1;
   }
 }

 @keyframes slideInFromLeft {
   0% {
     transform: translateX(-100%);
     opacity: 0;
   }

   100% {
     transform: translateX(0);
     opacity: 1;
   }
 }

 @keyframes slideInFromRight {
   0% {
     transform: translateX(100%);
     opacity: 0;
   }

   100% {
     transform: translateX(0);
     opacity: 1;
   }
 }

 /* Make hero section A4 aspect ratio on small screens */
 @media (max-width: 768px) {
   .hero {
    
     height: 90vh;
     aspect-ratio: 1 / 1.414;
     /* A4 paper ratio */
     max-width: 100%;
     margin: 0 auto;
   }

   .slideshow,
   .slide {
    margin: 11% 0px;
     aspect-ratio: 1 / 1.414;
     height: auto;
     width: 100%;
   }

   .hero-content h1 {
     font-size: 2.2rem;
     color: #00125c;
   }

   .hero-content p {
     font-size: 1rem;
   }

   .hero-content button {
     padding: 0.8rem 1.5rem;
     font-size: 0.9rem;
   }
 }

 @media (max-width: 480px) {
   .hero-content h1 {
     font-size: 4rem;
   }

   .hero-content p {
     font-size: 0.9rem;
   }

   .hero-content button {
     padding: 0.6rem 1.2rem;
     font-size: 0.8rem;
   }
  
 }
 @media (min-width: 769px) {
   .slide {
     animation: fadeZoom 15s infinite;
     filter: blur(4px);
     transform-origin: center;
     width: 50%;

     margin: 0% 25% 0% 25%;
   }

   @keyframes fadeZoom {
     0% {
       opacity: 0;
       transform: scale(1);
     }

     5% {
       opacity: 1;
       transform: scale(1.03);
     }

     30% {
       opacity: 1;
       transform: scale(1.05);
     }

     35% {
       opacity: 0;
       transform: scale(1.07);
     }

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



 body {
   margin: 0;
   padding: 0;
   font-family: 'Roboto', sans-serif;
   background-color: #f9f9f9;
   color: #333;
 }

 .about-section {
   padding: 4rem 2rem;
   text-align: center;
   max-width: 1000px;
   margin: 0 auto;
   animation: fadeInUp 1.5s ease-in-out;
 }

 h2 {
   font-family: 'Playfair Display', serif;
   font-size: 2.8rem;
   margin-bottom: 0rem;
   color: #222;
 }

 .about-section p {
   font-size: 1.2rem;
   line-height: 1.8;
   color: #555;
   padding-top: 25px;
 }

 @keyframes fadeInUp {
   0% {
     opacity: 0;
     transform: translateY(50px);
   }

   100% {
     opacity: 1;
     transform: translateY(0);
   }
 }


/* Horizontal scroll for editions */
.magazine-scroll-container {
    display: flex;
    gap: 3rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 1rem;
    -webkit-overflow-scrolling: touch; /* smooth scroll on mobile */
    scroll-snap-type: x mandatory;
}

/* Each card should not shrink and set a comfortable width */
.magazine-card {
    flex: 0 0 auto; /* prevents wrapping and allows horizontal scroll */
    min-width: 260px; /* adjust to desired card width on desktop */
    max-width: 320px;
    scroll-snap-align: start;
}

/* Optional: nicer scrollbar on desktop */
.magazine-scroll-container::-webkit-scrollbar {
    height: 4px;
}
.magazine-scroll-container::-webkit-scrollbar-track {
    background: transparent;
}
.magazine-scroll-container::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.15);
    border-radius: 8px;
}
.magazine-scroll-container::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,0.25);
}
/* ...existing code... */

/* Mobile: vertical scroll inside container */
@media (max-width: 767.98px) {
  .magazine-scroll-container {
    display: block;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 80vh; /* scroll inside the section */
    scroll-snap-type: none;
    padding: 20px;
    
  }

  .magazine-card {
    width: 80% !important;
    max-width: 90% !important;
    margin-bottom: 10px;
    scroll-snap-align: unset !important;
    
  }
}


 .magazine-card {
   min-width: 250px;
   max-width: 250px;
   scroll-snap-align: center;
   background: white;
   border-radius: 15px;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
   transition: transform 0.3s;
   cursor: pointer;
 }

 .magazine-card:hover {
   transform: scale(1.03);
 }

 .magazine-thumbnail {
   width: 100%;
   height: 320px;
   object-fit: cover;
   border-top-left-radius: 15px;
   border-top-right-radius: 15px;
 }

 .magazine-body {
   padding: 15px;
   text-align: center;
 }

 @media (min-width: 768px) {
   .magazine-scroll-container {
     overflow-x: hidden;
     justify-content: center;
   }
 }

 .pdf-viewer {
   width: 100%;
   height: 90vh;
   border: none;
 }













 /* body {
     font-family: 'Roboto', sans-serif;
     margin: 0;
     background-color: #f4f4f4;
 }

 .magazine-section {
  padding: 2rem;
  background-color: #fdfdfd;
  text-align: center;
}

.magazine-section h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
  font-family: 'Playfair Display', serif;
}

.magazine-scroll {
  display: flex;
  flex-wrap: nowrap;
  gap: 1.5rem;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 1rem;
  scroll-behavior: smooth;
  max-width: 100%;
}

.magazine-card {
  flex: 0 0 auto;
  width: 220px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  padding: 1rem;
  text-align: center;
}

/* Mobile view: vertical scroll */
 @media (max-width: 768px) {
   .magazine-scroll {
     flex-direction: column;
     overflow-x: hidden;
     overflow-y: auto;
     align-items: center;
     max-height: 80vh;
     /* optional: constrain height */
   }

   .magazine-card {
     width: 100%;
   }
 }


 .magazine-scroll::-webkit-scrollbar {
   height: 8px;
 }

 .magazine-scroll::-webkit-scrollbar-thumb {
   background: #888;
   border-radius: 4px;
 }



 .magazine-card img {
   width: 100%;
   height: auto;
   border-radius: 5px;
   margin-bottom: 0.5rem;
 }

 .magazine-card button,
 .magazine-card a {
   margin: 0.3rem;
   padding: 0.4rem 0.8rem;
   border: none;
   border-radius: 5px;
   background: #ff6f61;
   color: white;
   cursor: pointer;
   font-size: 0.9rem;
   text-decoration: none;
 }

 .magazine-card a {
   background: #555;
 }

 /* PDF Modal */
 .pdf-modal {
   display: none;
   position: fixed;
   top: 5%;
   left: 50%;
   transform: translateX(-50%);
   width: 80%;
   height: 90%;
   background: white;
   z-index: 1000;
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
 }

 .pdf-modal iframe {
   width: 100%;
   height: 100%;
 }

 .close-btn {
   position: absolute;
   top: 10px;
   right: 20px;
   font-size: 2rem;
   cursor: pointer;
   z-index: 1001;
 }

 .submission-section {
      min-height: 65vh; /* Initial height */
      display: flex;
      flex-direction: column;
      justify-content: center;
      /* align-items: center; */
      text-align: center;
      padding: 3rem 1rem;
      transition: min-height 0.4s ease;
      font-family: 'Segoe UI', sans-serif;
    
    }

    .submission-section.expanded {
      min-height: auto; /* Expand naturally */
    }

    .form-card {
      border: 0;
      border-radius: 1rem;
      box-shadow: 0 8px 28px rgba(0,0,0,.08);
    }

    /* Optional smoothness for collapse */
    #collapseForm.collapsing,
    #collapseForm.collapse:not(.show) {
      transform: translateY(12px);
      opacity: 0;
    }
    #collapseForm.collapse.show {
      transform: translateY(0);
      opacity: 1;
      transition: transform .25s ease, opacity .25s ease;
    }

    .required::after {
      content: " *";
      color: #dc3545;
    }