/* Banner */
 .event-banner {

     height: 450px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     font-size: 2.5rem;
     font-weight: 700;
     letter-spacing: 2px;
     text-transform: uppercase;

     animation: fadeInDown 1.5s ease;
     background:
         linear-gradient(135deg, rgba(26, 79, 139, 0.548) 0%, rgba(58, 125, 206, 0.27) 100%),
         url('../collge/page-header.webp') no-repeat center center/cover;

     position: relative;
     overflow: hidden;
 }

 /* Timeline */
 .timeline {
     position: relative;
     margin: 60px auto;
     padding: 0 20px;
     max-width: 1000px;
 }

 .timeline::before {
     content: "";
     position: absolute;
     top: 0;
     left: 50%;
     width: 4px;
     height: 100%;
     background: #007bff;
     transform: translateX(-50%);
     animation: growLine 2s ease-out forwards;
 }

 .timeline-item {
     display: flex;
     justify-content: flex-start;
     margin-bottom: 60px;
     position: relative;
     width: 100%;
     opacity: 0;
     transform: translateY(50px);
     transition: all 1s ease;
 }

 .timeline-item.show {
     opacity: 1;
     transform: translateY(0);
 }

 .timeline-item:nth-child(even) {
     flex-direction: row-reverse;
 }

 .timeline-content {
     background: #fff;
     padding: 20px;
     border-radius: 15px;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
     width: 45%;
     position: relative;
     z-index: 1;
     transform: scale(0.95);
     transition: transform 0.5s ease, box-shadow 0.5s ease;
 }

 .timeline-item.show .timeline-content {
     animation: zoomIn 1s ease forwards;
 }

 .timeline-content:hover {
     transform: scale(1.05);
     box-shadow: 0 20px 40px rgba(0, 90, 255, 0.3);
 }

 .timeline-content h4 {
     font-weight: 700;
     color: #0056d6;
     margin-bottom: 15px;
     animation: fadeInText 1.5s ease;
 }

 .timeline-content iframe {
     width: 100%;
     height: 250px;
     border-radius: 12px;
     border: none;
     animation: fadeInVideo 1.5s ease;
 }

 /* Circle indicator */
 .timeline-dot {
     position: absolute;
     top: 20px;
     left: 50%;
     transform: translateX(-50%);
     width: 20px;
     height: 20px;
     background: #007bff;
     border-radius: 50%;
     border: 4px solid #fff;
     box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.3);
     animation: pulse 2s infinite;
 }

 /* Back Button */
 .btn-custom {
     border: 2px solid #007bff;
     color: #007bff;
     font-weight: 600;
     padding: 12px 25px;
     border-radius: 50px;
     transition: all 0.3s ease;
     margin: 40px auto 60px;
     display: block;
     text-transform: uppercase;
     font-size: 0.95rem;
 }

 .btn-custom:hover {
     background: #007bff;
     color: #fff;
     transform: scale(1.05);
 }

 /* Animations */
 @keyframes fadeInDown {
     from {
         opacity: 0;
         transform: translateY(-60px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 @keyframes growLine {
     from {
         height: 0;
     }

     to {
         height: 100%;
     }
 }

 @keyframes zoomIn {
     from {
         transform: scale(0.8);
         opacity: 0;
     }

     to {
         transform: scale(1);
         opacity: 1;
     }
 }

 @keyframes fadeInText {
     from {
         opacity: 0;
         transform: translateY(20px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 @keyframes fadeInVideo {
     from {
         opacity: 0;
         transform: scale(0.9);
     }

     to {
         opacity: 1;
         transform: scale(1);
     }
 }

 @keyframes pulse {
     0% {
         box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.3);
     }

     50% {
         box-shadow: 0 0 0 12px rgba(0, 123, 255, 0.1);
     }

     100% {
         box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.3);
     }
 }