.awards-gallery-section {
     padding: 80px 20px;
     max-width: 1400px;
     margin: 0 auto;
 }

 .awards-header {
     text-align: center;
     margin-bottom: 60px;
 }

 .awards-badge {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background-color: rgba(40, 167, 69, 0.98);
     padding: 12px 24px;
     border-radius: 50px;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
     margin-bottom: 30px;
     color: #fff;
     font-size: 16px;
     font-weight: 500;
 }

 .awards-heart-icon {
     width: 18px;
     height: 18px;
     fill: #fff;
 }

 .awards-title {
     font-size: 48px;
     font-weight: 800;
     color: #1a365d;
     line-height: 1.2;
     margin: 0;
     max-width: 800px;
     margin-left: auto;
     margin-right: auto;
 }

 .awards-gallery-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     grid-template-rows: repeat(2, 300px);
     gap: 20px;
     margin-bottom: 40px;
 }

 .awards-photo-item {
     position: relative;
     border-radius: 16px;
     overflow: hidden;
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
 }

 .awards-photo-item:hover {
     transform: translateY(-8px);
     box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
 }

 .awards-photo-item:first-child {
     grid-column: span 1;
     grid-row: span 1;
 }

 .awards-photo-item:nth-child(2) {
     grid-column: span 1;
     grid-row: span 1;
 }

 .awards-photo-item:nth-child(3) {
     grid-column: span 1;
     grid-row: span 2;
 }

 .awards-photo-item:nth-child(4) {
     grid-column: span 1;
     grid-row: span 2;
 }

 .awards-photo-item:nth-child(5) {
     grid-column: span 2;
     grid-row: span 1;
 }

 .awards-photo-image {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.3s ease;
 }

 .awards-photo-item:hover .awards-photo-image {
     transform: scale(1.05);
 }

 .awards-scroll-indicator {
     position: fixed;
     bottom: 30px;
     right: 30px;
     width: 50px;
     height: 50px;
     background: rgb(226, 204, 7);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
     transition: all 0.3s ease;
     z-index: 100;
 }

 .awards-scroll-indicator:hover {
     transform: translateY(-3px);
     box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);
 }

 .awards-scroll-arrow {
     width: 138px;
     height: 105px;
     fill: rgba(58, 117, 0, 0.98);
 }

 /* this is for animation */
 /* .awards-photo-item {
            opacity: 0;
        }
        .awards-title {
            opacity: 0;
        } */


 /* Responsive Styles */
 @media (max-width: 1200px) {
     .awards-gallery-grid {
         grid-template-columns: repeat(3, 1fr);
         grid-template-rows: repeat(3, 280px);
     }

     .awards-photo-item:first-child {
         grid-column: span 1;
         grid-row: span 1;
     }

     .awards-photo-item:nth-child(2) {
         grid-column: span 1;
         grid-row: span 1;
     }

     .awards-photo-item:nth-child(3) {
         grid-column: span 1;
         grid-row: span 2;
     }

     .awards-photo-item:nth-child(4) {
         grid-column: span 2;
         grid-row: span 1;
     }

     .awards-photo-item:nth-child(5) {
         grid-column: span 3;
         grid-row: span 1;
     }
 }

 @media (max-width: 768px) {
     .awards-gallery-section {
         padding: 60px 15px;
     }

     .awards-title {
         font-size: 36px;
     }

     .awards-gallery-grid {
         grid-template-columns: repeat(2, 1fr);
         grid-template-rows: repeat(4, 250px);
         gap: 15px;
     }

     .awards-photo-item:first-child {
         grid-column: span 1;
         grid-row: span 1;
     }

     .awards-photo-item:nth-child(2) {
         grid-column: span 1;
         grid-row: span 1;
     }

     .awards-photo-item:nth-child(3) {
         grid-column: span 2;
         grid-row: span 1;
     }

     .awards-photo-item:nth-child(4) {
         grid-column: span 1;
         grid-row: span 1;
     }

     .awards-photo-item:nth-child(5) {
         grid-column: span 1;
         grid-row: span 1;
     }

     .awards-scroll-indicator {
         bottom: 20px;
         right: 20px;
         width: 45px;
         height: 45px;
     }
 }

 @media (max-width: 480px) {
     .awards-title {
         font-size: 28px;
     }

     .awards-badge {
         font-size: 14px;
         padding: 10px 20px;
     }

     .awards-gallery-grid {
         grid-template-columns: 1fr;
         grid-template-rows: repeat(5, 200px);
         gap: 12px;
     }

     .awards-photo-item:first-child,
     .awards-photo-item:nth-child(2),
     .awards-photo-item:nth-child(3),
     .awards-photo-item:nth-child(4),
     .awards-photo-item:nth-child(5) {
         grid-column: span 1;
         grid-row: span 1;
     }
 }


/* 1. Main Lightbox Background */
/* This styles the semi-transparent black overlay. */
.awards-lightbox {
    display: none; /* Hidden by default */
    position: fixed; /* Stays in place even when scrolling */
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(10, 20, 30, 0.92); /* A slightly bluer, more modern dark background */
    backdrop-filter: blur(8px); /* Adds a modern "glass" effect to the background */
    
    /* NEW: Add a subtle fade-in transition */
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* When the 'active' class is added by JavaScript, it becomes visible */
.awards-lightbox.active {
    display: flex; /* Using flexbox is the best way to center content */
    align-items: center;
    justify-content: center;
    opacity: 1; /* Fade in to full opacity */
}


/* 2. Lightbox Content Area */
/* This is the container for the image/video and its caption. */
.awards-lightbox-content {
    /* Make the content area take up a large portion of the screen */
    width: 90%;
    height: 90%;
    max-width: 1200px; /* Set a max-width for very large screens */
    
    /* Use flexbox to arrange the media and caption */
    display: flex;
    flex-direction: column; /* Stack media on top of the caption */
    align-items: center;    /* Center horizontally */
    justify-content: center;/* Center vertically */
    
    /* Add a small gap between the media and the caption */
    gap: 15px; 
}

/* 4. The Image or Video Element Itself (Shared Class) */
/* This styles BOTH the <img> and <video> tags inside the lightbox. */
.awards-lightbox-image { /* We reuse this class name for both */
    display: block;
    max-width: 100%;    /* Ensures it never overflows its container horizontally */
    max-height: 100%;   /* Ensures it never overflows its container vertically */
    object-fit: contain;/* Scales the media down to fit, preserving aspect ratio */
    border-radius: 8px; /* Soft rounded corners */

    /* Add a subtle shadow to lift it off the background */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); 
}

/* 5. The Close Button (X) */
.awards-lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: white;
    font-size: 45px; /* Slightly larger and easier to click */
    font-weight: 300; /* A thinner, more modern look */
    cursor: pointer;
    z-index: 1001;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.awards-lightbox-close:hover {
    opacity: 0.8;
    transform: scale(1.1); /* Slightly enlarges on hover */
}

 /* for photo overlay */
 .photo-overlay {
     position: absolute;
     bottom: 0;
     width: 100%;
     background: linear-gradient(to top, rgba(0, 0, 0, 0.925), transparent);
     color: white;
     padding: 12px 16px;
     font-size: 16px;
     font-weight: 500;
     opacity: 1;
     transition: opacity 0.3s ease;
 }

 .awards-photo-item:hover .photo-overlay {
     opacity: 1;
 }

 .photo-caption {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }

/* This holds the <img> or <video> tag that JavaScript creates. */
.awards-lightbox-media-container {
    width: 100%;
    height: 100%;
    
    /* Use flexbox again to perfectly center the media inside */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 6. The Caption Text */
.awards-lightbox-caption {
    /* Remove the top margin as we are now using 'gap' */
    margin-top: 0; 
    padding: 0 20px; /* Add some horizontal padding */
    text-align: center;
    color: #e0e0e0; /* A slightly softer white */
    font-size: 1rem;
    line-height: 1.5;
    max-width: 80%; /* Prevent caption from being too wide */
}

 .see-gallery-button-container {
     display: flex;
     justify-content: center;
     margin-top: 40px;
 }

 .see-gallery-button {
     background-color: #1a365d;
     color: white;
     padding: 12px 28px;
     font-size: 16px;
     font-weight: 600;
     border: none;
     border-radius: 50px;
     cursor: pointer;
     transition: background-color 0.3s ease, transform 0.2s ease;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
 }

 .see-gallery-button:hover {
     background-color: #28528c;
     transform: translateY(-2px);
 }

 /* this is for the image count */
 /*
 * MODIFIED/NEW DYNAMIC GALLERY STYLES
 * This section makes the grid layout adapt based on the number of images.
*/

 .awards-gallery-grid {
     display: grid;
     gap: 20px;
     /* Universal gap for all layouts */
     margin-bottom: 40px;
 }

 /* --- Layout for ONLY 1 Image --- */
 .gallery-count-1 {
     grid-template-columns: 1fr;
     /* A single column */
     grid-template-rows: 400px;
     /* A single row with a fixed height */
 }

 /* --- Layout for 2 Images --- */
 .gallery-count-2 {
     grid-template-columns: repeat(2, 1fr);
     /* Two equal columns */
     grid-template-rows: 300px;
 }

 /* --- Layout for 3 Images --- */
 .gallery-count-3 {
     grid-template-columns: repeat(2, 1fr);
     /* Two columns */
     grid-template-rows: repeat(2, 250px);
 }

 .gallery-count-3 .awards-photo-item:first-child {
     grid-column: span 1;
     grid-row: span 2;
     /* The first image is tall */
 }

 .gallery-count-3 .awards-photo-item:nth-child(2) {
     grid-column: span 1;
     grid-row: span 1;
 }

 .gallery-count-3 .awards-photo-item:nth-child(3) {
     grid-column: span 1;
     grid-row: span 1;
 }

 /* --- Layout for 4 Images (Classic 2x2 Grid) --- */
 .gallery-count-4 {
     grid-template-columns: repeat(2, 1fr);
     grid-template-rows: repeat(2, 300px);
 }

 /* --- YOUR ORIGINAL LAYOUT, NOW SCOPED FOR EXACTLY 5 IMAGES --- */
 .gallery-count-5 {
     grid-template-columns: repeat(4, 1fr);
     grid-template-rows: repeat(2, 300px);
 }

 .gallery-count-5 .awards-photo-item:first-child {
     grid-column: span 1;
     grid-row: span 1;
 }

 .gallery-count-5 .awards-photo-item:nth-child(2) {
     grid-column: span 1;
     grid-row: span 1;
 }

 .gallery-count-5 .awards-photo-item:nth-child(3) {
     grid-column: span 1;
     grid-row: span 2;
     /* Tall image */
 }

 .gallery-count-5 .awards-photo-item:nth-child(4) {
     grid-column: span 1;
     grid-row: span 2;
     /* Tall image */
 }

 .gallery-count-5 .awards-photo-item:nth-child(5) {
     grid-column: span 2;
     /* Wide image */
     grid-row: span 1;
 }

 .video-play-icon::after {
    content: '\f144'; /* Font Awesome 'play-circle' icon */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    bottom: 150%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2.5rem;
    color: white;
    opacity: 0.8;
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.7);
    pointer-events: none;
}