.page__header{
    background: url(../images/black\ student\ studing.jpg) center center/cover;
}

/* Events Section */
.events {
   padding: 5rem 0;
   background: var(--color-gray-100);
}

.events__container {
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 1.5rem;
}

.events__header {
   text-align: center;
   margin-bottom: 4rem;
}

.events__header h2 {
   font-size: 2.5rem;
   color: var(--color-gray-900);
   margin-bottom: 1rem;
   font-weight: 700;
}

.events__header p {
   font-size: 1.2rem;
   color: var(--color-gray-600);
}

.events__grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
   gap: 2.5rem;
   margin-bottom: 4rem;
}

/* Event Cards */
.event__card {
   background: white;
   border-radius: 1rem;
   overflow: hidden;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   display: flex;
   flex-direction: column;
}

.event__card:hover {
   transform: translateY(-10px);
   box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
}

.event__card-image {
   position: relative;
   width: 100%;
   height: 220px;
   overflow: hidden;
}

.event__card-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.event__card:hover .event__card-image img {
   transform: scale(1.08);
}

.event__card-badge {
   position: absolute;
   top: 1rem;
   right: 1rem;
   background: yellow;
   color: black;
   padding: 0.5rem 1.2rem;
   border-radius: 2rem;
   font-size: 0.85rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

.event__card-content {
   padding: 1.8rem;
   display: flex;
   flex-direction: column;
   gap: 1.2rem;
   flex: 1;
}

.event__card-date {
   display: flex;
   gap: 1.2rem;
   align-items: flex-start;
   padding-bottom: 1rem;
   border-bottom: 2px solid black;
}

.date__box {
   background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
   padding: 0.8rem 1rem;
   border-radius: 0.8rem;
   text-align: center;
   min-width: 70px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.date__day {
   display: block;
   font-size: 2rem;
   font-weight: 700;
   color: black;
   line-height: 1;
}

.date__month {
   display: block;
   font-size: 0.9rem;
   font-weight: 600;
   color: black;
   text-transform: uppercase;
   letter-spacing: 1px;
   margin-top: 0.3rem;
}

.date__details {
   flex: 1;
}

.date__details h3 {
   font-size: 1.4rem;
   color: var(--color-gray-900);
   margin-bottom: 0.5rem;
   font-weight: 700;
}

.date__details p {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   color: var(--color-gray-600);
   font-size: 0.95rem;
}

.date__details i {
   color: var(--color-primary);
   font-size: 1.1rem;
}

.event__card-description {
   color: var(--color-gray-600);
   line-height: 1.7;
   font-size: 0.95rem;
}

.event__card-location {
   display: flex;
   gap: 0.8rem;
   padding: 1rem;
   background: var(--color-gray-50);
   border-radius: 0.6rem;
   color: var(--color-gray-700);
   font-size: 0.9rem;
   line-height: 1.5;
}

.event__card-location i {
   color: var(--color-primary);
   font-size: 1.3rem;
   flex-shrink: 0;
   margin-top: 0.1rem;
}

.event__card-footer {
   display: flex;
   flex-direction: column;
   gap: 1rem;
   padding-top: 1rem;
   border-top: 1px solid black;
   margin-top: auto;
}

.event__card-details {
   display: flex;
   gap: 1.5rem;
   flex-wrap: wrap;
   font-size: 0.9rem;
   color: var(--color-gray-600);
}

.event__card-details span {
   display: flex;
   align-items: center;
   gap: 0.4rem;
   font-weight: 500;
}

.event__card-details i {
   color: var(--color-primary);
   font-size: 1.1rem;
}

.event__card-btn {
   background: var(--color-primary);
   color: black;
   padding: 0.9rem 1.5rem;
   border-radius: 0.6rem;
   font-size: 1rem;
   font-weight: 700;
   text-align: center;
   text-decoration: none;
   min-height: 44px;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.event__card-btn:hover {
   background: var(--color-primary-dark);
   transform: translateY(-3px);
   box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

/* Events CTA Section */
.events__cta {
   text-align: center;
   background: white;
   padding: 3rem 2rem;
   border-radius: 1rem;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.events__cta h3 {
   font-size: 1.8rem;
   color: var(--color-gray-900);
   margin-bottom: 0.8rem;
   font-weight: 700;
}

.events__cta p {
   color: var(--color-gray-600);
   font-size: 1.1rem;
   margin-bottom: 2rem;
}

.events__cta-btn {
   display: inline-flex;
   align-items: center;
   gap: 0.8rem;
   background: #25D366;
   color: white;
   padding: 1rem 2.5rem;
   border-radius: 3rem;
   font-size: 1.1rem;
   font-weight: 700;
   text-decoration: none;
   min-height: 44px;
   box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
}

.events__cta-btn:hover {
   background: #128C7E;
   transform: translateY(-3px);
   box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
}

.events__cta-btn i {
   font-size: 1.5rem;
}

/* Tablet Screens */
@media screen and (max-width: 900px) {
   .events__grid {
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 2rem;
   }

   .events__header h2 {
      font-size: 2rem;
   }

   .events__header p {
      font-size: 1.1rem;
   }
}

/* Mobile Screens */
@media screen and (max-width: 600px) {
   .events {
      padding: 3rem 0;
   }

   .events__container {
      padding: 0 1rem;
   }

   .events__header {
      margin-bottom: 2.5rem;
   }

   .events__header h2 {
      font-size: 1.8rem;
   }

   .events__header p {
      font-size: 1rem;
   }

   .events__grid {
      grid-template-columns: 1fr;
      gap: 2rem;
   }

   .event__card-image {
      height: 180px;
   }

   .event__card-content {
      padding: 1.5rem;
   }

   .event__card-date {
      flex-direction: row;
      gap: 1rem;
   }

   .date__box {
      min-width: 60px;
      padding: 0.6rem 0.8rem;
   }

   .date__day {
      font-size: 1.6rem;
   }

   .date__month {
      font-size: 0.8rem;
   }

   .date__details h3 {
      font-size: 1.2rem;
   }

   .date__details p {
      font-size: 0.85rem;
   }

   .event__card-description {
      font-size: 0.9rem;
   }

   .event__card-location {
      font-size: 0.85rem;
      padding: 0.9rem;
   }

   .event__card-details {
      gap: 1rem;
      font-size: 0.85rem;
   }

   .event__card-btn {
      padding: 0.8rem 1.2rem;
      font-size: 0.95rem;
   }

   .event__card-badge {
      padding: 0.4rem 0.9rem;
      font-size: 0.75rem;
   }

   .events__cta {
      padding: 2rem 1.5rem;
   }

   .events__cta h3 {
      font-size: 1.4rem;
   }

   .events__cta p {
      font-size: 1rem;
   }

   .events__cta-btn {
      padding: 0.9rem 2rem;
      font-size: 1rem;
   }
}

/* Small Mobile Screens */
@media screen and (max-width: 400px) {
   .events__header h2 {
      font-size: 1.5rem;
   }

   .event__card-date {
      flex-direction: column;
      align-items: center;
      text-align: center;
   }

   .date__box {
      width: 100%;
   }

   .event__card-details {
      flex-direction: column;
      gap: 0.5rem;
   }
}

.programDetail__right{
   display: flex;
   flex-direction: column;
   gap: 1rem;
   height: fit-content;

}

.programDetail__right article{
   background: var(--color-gray-0);
   padding: 1.5rem;
   border-radius: var(--radius-5);
}
.programDetail__right h4{
   color: var(--color-primary);
}
.programDetail__right h2{
   font-weight: 600;
}
.programDetail__right div{
   margin-top: 1.5rem;
}
.programDetail__right article p{
   margin-top: 0.5rem;
  
}

@media screen and (max-width: 600px){
   .programs__menu{
      grid-template-columns: 1fr;
   }
   .program{
      flex-direction: column;
   }
   .program__image{
      width: 100%;
      height: 12rem;
   }
   
   .programDetail__container{
      grid-template-columns: 1fr;
     
   }
   .programDetail__images{
      grid-template-columns: 1fr;
      gap: 1rem;
   }
}