/* === ACHIEVEMENTS SECTION === */

        /* Section Heading (Keep as is, unless you want to adjust) */
        .section-heading {
            text-align: center;
            margin-bottom: 20px; /* हेडिंग के नीचे की जगह को नियंत्रित करने के लिए जोड़ा गया */
        }

        .section-heading span {
               font-size: 40px;
    font-weight: bold;
    color: indigo;
    position: relative;
    padding-bottom: 0px;
    margin-top: 18px;
        }

        /* .section-heading span::after {
            content: '';
            position: absolute;
            left: 50%;
            bottom: 0;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background-color: #ffcc00;
            border-radius: 2px;
        } */

        .achievements-container {
            display: flex; /* Changed back to flex (default is row) */
            justify-content: center;
            flex-wrap: wrap; /* Allows wrapping on smaller screens */
            gap: 30px; /* Keep original gap for spacing between boxes */
            
            align-items: stretch; /* Ensures boxes stretch to the same height when in a row */
            max-width: 100%; /* Changed to 100% to take full page width */
            margin: 0 auto 50px auto;
            background-color: #eaf4fd;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
        }

        .distinction-box,
        .award-box {
            flex: 1; /* Allows boxes to share available space */
            min-width: 350px; /* Base minimum width for larger screens */
            max-width: 48%; /* Allows two boxes per row with some gap */
            
            background: #fff;
            border: 1px solid #d0e0f0;
            border-radius: 8px;
            padding: 0;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            margin: 0;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            overflow: hidden;
            height: auto; /* Important: Allow height to adjust to content so all students are visible */
        }

        .box-header {
            font-weight: 700;
            font-size: 20px; /* Reverted header font size */
            padding: 15px 20px; /* Reverted header padding */
            border-bottom: 1px solid #ddd;
            text-align: left;
            background-color: #f0f0f0;
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
        }

      
        .box-header.maroon {
            color: #a00000;
            background-color: #ffe6e6;
        }

        .award-heading {
            font-weight: bold;
            color: #333;
            border-bottom: 2px solid #ccc;
            font-size: large;
            text-align: center; /* Center the award heading */
        }

        .boxx-body {
            flex: 1; /* Allows it to grow and take available space */
            padding: 15px; /* Reverted internal padding */
            background-color: #ffffff;
            display: flex; /* Use flexbox for alignment within the body */
            flex-direction: column; /* Stack content vertically */
            justify-content: flex-start; /* Align content to the start */
            overflow: hidden;
        }

        .boxx1-body {
            flex: 1;
            padding: 15px;
            background-color: #ffffff;
            display: flex;
            justify-content: center; /* Center the image */
            align-items: center; /* Center the image vertically */
            overflow: hidden;
        }

        /* Flip card styles for award image */
        .flip-card {
            width: 100%;
            height: 400px; /* Match max-height of award-img */
            perspective: 1000px; /* 3D perspective for flip effect */
        }

        .flip-card-inner {
            position: relative;
            width: 100%;
            height: 100%;
            transition: transform 0.6s;
            transform-style: preserve-3d;
        }

        .flip-card:hover .flip-card-inner {
            transform: rotateY(180deg); /* Flip on hover */
        }

        .flip-card-front, .flip-card-back {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden; /* Hide back face when not facing viewer */
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .flip-card-front {
            z-index: 2;
        }

        .flip-card-back {
            transform: rotateY(180deg); /* Back face is rotated 180 degrees */
            background-color: #ffffff;
        }

        .award-img {
            width: 100%;
            height: auto;
            max-height: 400px; /* Prevent excessively large images */
            object-fit: contain; /* Keep aspect ratio */
            border-radius: 5px;
            display: block;
            margin: 0 auto;
        }

        .student-list {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between; /* Changed to space-between to spread items */
            padding: 0;
            margin: 0;
            max-height: none; /* Crucial: Remove max-height so all students are visible */
            overflow: visible; /* Crucial: Ensure no overflow/scrollbar */
            background-color: #fcfcfc;
            padding-top: 10px;
            row-gap: 56px;
        }

        .student-card {
            width: 19.5%; /* Keep original width for 5 cards per row */
            box-sizing: border-box;
            text-align: center;
            padding: 5px 3px; /* Further reduced padding for compactness */
            margin-bottom: 5px; /* Reduced space between rows for compactness */
            flex-shrink: 0;
            transition: transform 0.2s ease, box-shadow 0.2s ease; /* Add transition for hover effect */
            background-color: #fff;
            border-radius: 5px; /* Slight roundness for cards */
        }

        .student-card:hover {
            transform: translateY(-3px); /* Lift card slightly on hover */
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* More prominent shadow on hover */
            cursor: pointer; /* Indicate it's clickable */
            background-color: #f0f8ff;
        }

        .student-card img {
            width: 80px; /* Keep current image size for compactness */
            height: 80px;
            object-fit: cover;
            border-radius: 50%;
            border: 3px solid #0056b3;
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
        }

        .student-card strong {
            font-size: 13px; /* Keep current font size for compactness */
            margin-top: 5px;
            display: block;
            color: blue;
            white-space: nowrap; /* Prevent name wrapping */
            overflow: hidden; /* Hide overflow if nowrap causes issues */
            text-overflow: ellipsis; /* Add ellipsis for overflowed text */
            font-family: initial;
        }

        .student-card span {
            font-size: 12px; /* Keep current font size for compactness */
            display: block;
            color: darkred;
            margin-top: 1px;
            font-weight: bold;
        }

        /* --- Responsive Adjustments --- */

        @media (max-width: 992px) {
            .achievements-container {
                flex-direction: column; /* Force stacking on tablets and mobiles */
                align-items: center; /* Center items when stacked */
                padding: 20px;
                gap: 20px;
                max-width: 90%;
            }

            .distinction-box,
            .award-box {
                max-width: 100%; /* Take full width when stacked */
                min-width: unset; /* Remove min-width constraint when stacked */
                height: auto; /* Allow height to adjust */
                flex: unset; /* Remove flex property when stacked */
            }

            .distinction-box {
                order: 1;
            }

            .award-box {
                order: 2;
                width: -webkit-fill-available;
            }

            .box-header {
                font-size: 18px;
                padding: 12px 15px;
            }

            .award-heading {
                font-size: 16px;
                padding: 10px;
            }

            .student-card {
                width: 30%; /* 3 cards per row on tablets */
                padding: 5px;
                margin-bottom: 8px;
            }

            .student-card img {
                width: 55px;
                height: 55px;
            }

            .flip-card {
                height: 350px; /* Adjust for smaller screens */
            }

            .award-img {
                max-height: 350px;
            }
        }

        @media (max-width: 768px) {
            .section-heading span {
                font-size: 28px;
            }
            .section-heading span::after {
                width: 60px;
                height: 3px;
            }

            .achievements-container {
                padding: 15px;
                gap: 15px;
                margin-bottom: 30px; /* Reduce bottom margin */
            }

            .boxx-body, .boxx1-body {
                padding: 10px;
            }

            .student-card {
                width: 48%; /* 2 cards per row on smaller mobiles */
                padding: 5px;
                margin-bottom: 10px;
            }

            .student-card img {
                width: 50px;
                height: 50px;
            }

            .student-card strong {
                font-size: 12px;
            }

            .student-card span {
                font-size: 11px;
            }

            .flip-card {
                height: 300px; /* Further adjust for smaller screens */
            }

            .award-img {
                max-height: 300px; /* Further constrain image height */
            }
        }

        @media (max-width: 480px) {
            .section-heading span {
                font-size: 24px;
            }

            .achievements-container {
                padding: 10px;
                gap: 10px;
            }

            .box-header {
                font-size: 16px;
                padding: 10px 12px;
            }

            .award-heading {
                font-size: 14px;
                padding: 8px;
            }

            .student-card {
                width: 48%; /* Keep 2 cards per row as it works well */
                padding: 3px;
                margin-bottom: 8px;
            }

            .student-card img {
                width: 45px;
                height: 45px;
                border-width: 2px; /* Slightly thinner border for smaller images */
            }

            .student-card strong {
                font-size: 11px;
            }

            .student-card span {
                font-size: 10px;
            }

            .flip-card {
                height: 250px; /* Even smaller for very small screens */
            }

            .award-img {
                max-height: 250px; /* Even smaller max height */
            }
        }
        /* ✅ Special rule for 2nd box in mobile view */
@media (max-width: 768px) {
  .achievements-container .distinction-box:nth-of-type(2) {
    width: 100% !important;   /* Take full width */
  }

  /* If you want the first box smaller in mobile */
  .achievements-container .distinction-box:nth-of-type(1) {
    width: 90%; /* or keep it auto */
    margin: auto;
  }
}

@media (max-width: 480px) {
  .achievements-container .distinction-box:nth-of-type(2) {
    width: 100% !important;
  }
}
            /* === ACHIEVEMENTS SECTION === */

        /* Section Heading (Keep as is, unless you want to adjust) */
        .section-heading {
            text-align: center;
            margin-bottom: 20px; /* हेडिंग के नीचे की जगह को नियंत्रित करने के लिए जोड़ा गया */
        }

        .section-heading span {
               font-size: 40px;
    font-weight: bold;
    color: indigo;
    position: relative;
    padding-bottom: 0px;
    margin-top: 18px;
        }


        .achievements-container {
            display: flex; /* Changed back to flex (default is row) */
            justify-content: center;
            flex-wrap: wrap; /* Allows wrapping on smaller screens */
            gap: 30px; /* Keep original gap for spacing between boxes */
            
            align-items: stretch; /* Ensures boxes stretch to the same height when in a row */
            max-width: 100%; /* Changed to 100% to take full page width */
            margin: 0 auto 50px auto;
            background-color: #eaf4fd;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
        }

        .distinction-box,
        .award-box {
            flex: 1; /* Allows boxes to share available space */
            min-width: 350px; /* Base minimum width for larger screens */
            max-width: 48%; /* Allows two boxes per row with some gap */
            
            background: #fff;
            border: 1px solid #d0e0f0;
            border-radius: 8px;
            padding: 0;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            margin: 0;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            overflow: hidden;
            height: auto; /* Important: Allow height to adjust to content so all students are visible */
        }

        .box-header {
            font-weight: 700;
            font-size: 20px; /* Reverted header font size */
            padding: 15px 20px; /* Reverted header padding */
            border-bottom: 1px solid #ddd;
            text-align: left;
            background-color: #f0f0f0;
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
        }

        

       

        .award-heading {
            font-weight: bold;
            color: #333;
            border-bottom: 2px solid #ccc;
            font-size: large;
            text-align: center; /* Center the award heading */
        }

        .boxx-body {
            flex: 1; /* Allows it to grow and take available space */
            padding: 15px; /* Reverted internal padding */
            background-color: #ffffff;
            display: flex; /* Use flexbox for alignment within the body */
            flex-direction: column; /* Stack content vertically */
            justify-content: flex-start; /* Align content to the start */
            overflow: hidden;
        }

        .boxx1-body {
            flex: 1;
            padding: 15px;
            background-color: #ffffff;
            display: flex;
            justify-content: center; /* Center the image */
            align-items: center; /* Center the image vertically */
            overflow: hidden;
        }

        /* Flip card styles for award image */
        .flip-card {
            width: 100%;
            height: 400px; /* Match max-height of award-img */
            perspective: 1000px; /* 3D perspective for flip effect */
        }

        .flip-card-inner {
            position: relative;
            width: 100%;
            height: 100%;
            transition: transform 0.6s;
            transform-style: preserve-3d;
        }

        .flip-card:hover .flip-card-inner {
            transform: rotateY(180deg); /* Flip on hover */
        }

        .flip-card-front, .flip-card-back {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden; /* Hide back face when not facing viewer */
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .flip-card-front {
            z-index: 2;
        }

        .flip-card-back {
            transform: rotateY(180deg); /* Back face is rotated 180 degrees */
            background-color: #ffffff;
        }

        .award-img {
            width: 100%;
            height: auto;
            max-height: 400px; /* Prevent excessively large images */
            object-fit: contain; /* Keep aspect ratio */
            border-radius: 5px;
            display: block;
            margin: 0 auto;
        }

        .student-list {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between; /* Changed to space-between to spread items */
            padding: 0;
            margin: 0;
            max-height: none; /* Crucial: Remove max-height so all students are visible */
            overflow: visible; /* Crucial: Ensure no overflow/scrollbar */
            background-color: #fcfcfc;
            padding-top: 10px;
            row-gap: 56px;
        }

        .student-card {
            width: 19.5%; /* Keep original width for 5 cards per row */
            box-sizing: border-box;
            text-align: center;
            padding: 5px 3px; /* Further reduced padding for compactness */
            margin-bottom: 5px; /* Reduced space between rows for compactness */
            flex-shrink: 0;
            transition: transform 0.2s ease, box-shadow 0.2s ease; /* Add transition for hover effect */
            background-color: #fff;
            border-radius: 5px; /* Slight roundness for cards */
        }

        .student-card:hover {
            transform: translateY(-3px); /* Lift card slightly on hover */
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* More prominent shadow on hover */
            cursor: pointer; /* Indicate it's clickable */
            background-color: #f0f8ff;
        }

        .student-card img {
            width: 80px; /* Keep current image size for compactness */
            height: 80px;
            object-fit: cover;
            border-radius: 50%;
            border: 3px solid #0056b3;
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
        }

        .student-card strong {
            font-size: 13px; /* Keep current font size for compactness */
            margin-top: 5px;
            display: block;
            color: blue;
            white-space: nowrap; /* Prevent name wrapping */
            overflow: hidden; /* Hide overflow if nowrap causes issues */
            text-overflow: ellipsis; /* Add ellipsis for overflowed text */
            font-family: initial;
        }

        .student-card span {
            font-size: 12px; /* Keep current font size for compactness */
            display: block;
            color: darkred;
            margin-top: 1px;
            font-weight: bold;
        }

        /* --- Responsive Adjustments --- */

        @media (max-width: 992px) {
            .achievements-container {
                flex-direction: column; /* Force stacking on tablets and mobiles */
                align-items: center; /* Center items when stacked */
                padding: 20px;
                gap: 20px;
                max-width: 90%;
            }

            .distinction-box,
            .award-box {
                max-width: 100%; /* Take full width when stacked */
                min-width: unset; /* Remove min-width constraint when stacked */
                height: auto; /* Allow height to adjust */
                flex: unset; /* Remove flex property when stacked */
            }

            .distinction-box {
                order: 1;
            }

            .award-box {
                order: 2;
                width: -webkit-fill-available;
            }

            .box-header {
                font-size: 18px;
                padding: 12px 15px;
            }

            .award-heading {
                font-size: 16px;
                padding: 10px;
            }

            .student-card {
                width: 30%; /* 3 cards per row on tablets */
                padding: 5px;
                margin-bottom: 8px;
            }

            .student-card img {
                width: 55px;
                height: 55px;
            }

            .flip-card {
                height: 350px; /* Adjust for smaller screens */
            }

            .award-img {
                max-height: 350px;
            }
        }

        @media (max-width: 768px) {
            .section-heading span {
                font-size: 28px;
            }
            .section-heading span::after {
                width: 60px;
                height: 3px;
            }

            .achievements-container {
                padding: 15px;
                gap: 15px;
                margin-bottom: 30px; /* Reduce bottom margin */
            }

            .boxx-body, .boxx1-body {
                padding: 10px;
            }

            .student-card {
                width: 48%; /* 2 cards per row on smaller mobiles */
                padding: 5px;
                margin-bottom: 10px;
            }

            .student-card img {
                width: 50px;
                height: 50px;
            }

            .student-card strong {
                font-size: 12px;
            }

            .student-card span {
                font-size: 11px;
            }

            .flip-card {
                height: 300px; /* Further adjust for smaller screens */
            }

            .award-img {
                max-height: 300px; /* Further constrain image height */
            }
        }

        @media (max-width: 480px) {
            .section-heading span {
                font-size: 24px;
            }

            .achievements-container {
                padding: 10px;
                gap: 10px;
            }

            .box-header {
                font-size: 16px;
                padding: 10px 12px;
            }

            .award-heading {
                font-size: 14px;
                padding: 8px;
            }

            .student-card {
                width: 48%; /* Keep 2 cards per row as it works well */
                padding: 3px;
                margin-bottom: 8px;
            }

            .student-card img {
                width: 45px;
                height: 45px;
                border-width: 2px; /* Slightly thinner border for smaller images */
            }

            .student-card strong {
                font-size: 11px;
            }

            .student-card span {
                font-size: 10px;
            }

            .flip-card {
                height: 250px; /* Even smaller for very small screens */
            }

            .award-img {
                max-height: 250px; /* Even smaller max height */
            }
        }
        /* ✅ Special rule for 2nd box in mobile view */
@media (max-width: 768px) {
  .achievements-container .distinction-box:nth-of-type(2) {
    width: 100% !important;   /* Take full width */
  }

  /* If you want the first box smaller in mobile */
  .achievements-container .distinction-box:nth-of-type(1) {
    width: 90%; /* or keep it auto */
    margin: auto;
  }
}

@media (max-width: 480px) {
  .achievements-container .distinction-box:nth-of-type(2) {
    width: 100% !important;
  }
}
            /* === ACHIEVEMENTS SECTION === */

        /* Section Heading (Keep as is, unless you want to adjust) */
        .section-heading {
            text-align: center;
            margin-bottom: 20px; /* हेडिंग के नीचे की जगह को नियंत्रित करने के लिए जोड़ा गया */
        }

        .section-heading span {
               font-size: 40px;
    font-weight: bold;
    color: indigo;
    position: relative;
    padding-bottom: 0px;
    margin-top: 18px;
        }

        /* .section-heading span::after {
            content: '';
            position: absolute;
            left: 50%;
            bottom: 0;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background-color: #ffcc00;
            border-radius: 2px;
        } */

        .achievements-container {
            display: flex; /* Changed back to flex (default is row) */
            justify-content: center;
            flex-wrap: wrap; /* Allows wrapping on smaller screens */
            gap: 30px; /* Keep original gap for spacing between boxes */
            
            align-items: stretch; /* Ensures boxes stretch to the same height when in a row */
            max-width: 100%; /* Changed to 100% to take full page width */
            margin: 0 auto 50px auto;
            background-color: #eaf4fd;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
        }

        .distinction-box,
        .award-box {
            flex: 1; /* Allows boxes to share available space */
            min-width: 350px; /* Base minimum width for larger screens */
            max-width: 48%; /* Allows two boxes per row with some gap */
            
            background: #fff;
            border: 1px solid #d0e0f0;
            border-radius: 8px;
            padding: 0;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            margin: 0;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            overflow: hidden;
            height: auto; /* Important: Allow height to adjust to content so all students are visible */
        }

        .box-header {
            font-weight: 700;
            font-size: 20px; /* Reverted header font size */
            padding: 15px 20px; /* Reverted header padding */
            border-bottom: 1px solid #ddd;
            text-align: left;
            
           
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
        }
       

        .box-header.maroon {
            color: #a00000;
            background-color: #ffe6e6;
        }

        .award-heading {
            font-weight: bold;
            color: #333;
            border-bottom: 2px solid #ccc;
            font-size: large;
            text-align: center; /* Center the award heading */
        }







.box-header.blue {
    color: #a00000;
    background-color: #e6f2ff;
}

        .boxx-body {
            flex: 1; /* Allows it to grow and take available space */
            padding: 15px; /* Reverted internal padding */
            background-color: #ffffff;
            display: flex; /* Use flexbox for alignment within the body */
            flex-direction: column; /* Stack content vertically */
            justify-content: flex-start; /* Align content to the start */
            overflow: hidden;
        }

        .boxx1-body {
            flex: 1;
            padding: 15px;
            background-color: #ffffff;
            display: flex;
            justify-content: center; /* Center the image */
            align-items: center; /* Center the image vertically */
            overflow: hidden;
        }

        /* Flip card styles for award image */
        .flip-card {
            width: 100%;
            height: 400px; /* Match max-height of award-img */
            perspective: 1000px; /* 3D perspective for flip effect */
        }

        .flip-card-inner {
            position: relative;
            width: 100%;
            height: 100%;
            transition: transform 0.6s;
            transform-style: preserve-3d;
        }

        .flip-card:hover .flip-card-inner {
            transform: rotateY(180deg); /* Flip on hover */
        }

        .flip-card-front, .flip-card-back {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden; /* Hide back face when not facing viewer */
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .flip-card-front {
            z-index: 2;
        }

        .flip-card-back {
            transform: rotateY(180deg); /* Back face is rotated 180 degrees */
            background-color: #ffffff;
        }

        .award-img {
            width: 100%;
            height: auto;
            max-height: 400px; /* Prevent excessively large images */
            object-fit: contain; /* Keep aspect ratio */
            border-radius: 5px;
            display: block;
            margin: 0 auto;
        }

        .student-list {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between; /* Changed to space-between to spread items */
            padding: 0;
            margin: 0;
            max-height: none; /* Crucial: Remove max-height so all students are visible */
            overflow: visible; /* Crucial: Ensure no overflow/scrollbar */
            background-color: #fcfcfc;
            padding-top: 10px;
            row-gap: 56px;
        }

        .student-card {
            width: 19.5%; /* Keep original width for 5 cards per row */
            box-sizing: border-box;
            text-align: center;
            padding: 5px 3px; /* Further reduced padding for compactness */
            margin-bottom: 5px; /* Reduced space between rows for compactness */
            flex-shrink: 0;
            transition: transform 0.2s ease, box-shadow 0.2s ease; /* Add transition for hover effect */
            background-color: #fff;
            border-radius: 5px; /* Slight roundness for cards */
        }

        .student-card:hover {
            transform: translateY(-3px); /* Lift card slightly on hover */
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* More prominent shadow on hover */
            cursor: pointer; /* Indicate it's clickable */
            background-color: #f0f8ff;
        }

        .student-card img {
            width: 80px; /* Keep current image size for compactness */
            height: 80px;
            object-fit: cover;
            border-radius: 50%;
            border: 3px solid #0056b3;
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
        }

        .student-card strong {
            font-size: 13px; /* Keep current font size for compactness */
            margin-top: 5px;
            display: block;
            color: blue;
            white-space: nowrap; /* Prevent name wrapping */
            overflow: hidden; /* Hide overflow if nowrap causes issues */
            text-overflow: ellipsis; /* Add ellipsis for overflowed text */
            font-family: initial;
        }

        .student-card span {
            font-size: 12px; /* Keep current font size for compactness */
            display: block;
            color: darkred;
            margin-top: 1px;
            font-weight: bold;
        }
.box-header.blue {
            color: #a00000;
    background-color: #ffe6e6;
            
        }
       
        /* --- Responsive Adjustments --- */

        @media (max-width: 992px) {
            .achievements-container {
                flex-direction: column; /* Force stacking on tablets and mobiles */
                align-items: center; /* Center items when stacked */
                padding: 20px;
                gap: 20px;
                max-width: 90%;
            }

            .distinction-box,
            .award-box {
                max-width: 100%; /* Take full width when stacked */
                min-width: unset; /* Remove min-width constraint when stacked */
                height: auto; /* Allow height to adjust */
                flex: unset; /* Remove flex property when stacked */
            }

            .distinction-box {
                order: 1;
            }

            .award-box {
                order: 2;
                width: -webkit-fill-available;
            }

            .box-header {
                font-size: 18px;
                padding: 12px 15px;
            }

            .award-heading {
                font-size: 16px;
                padding: 10px;
            }

            .student-card {
                width: 30%; /* 3 cards per row on tablets */
                padding: 5px;
                margin-bottom: 8px;
            }

            .student-card img {
                width: 55px;
                height: 55px;
            }

            .flip-card {
                height: 350px; /* Adjust for smaller screens */
            }

            .award-img {
                max-height: 350px;
            }
        }

        @media (max-width: 768px) {
            .section-heading span {
                font-size: 28px;
            }
            .section-heading span::after {
                width: 60px;
                height: 3px;
            }

            .achievements-container {
                padding: 15px;
                gap: 15px;
                margin-bottom: 30px; /* Reduce bottom margin */
            }

            .boxx-body, .boxx1-body {
                padding: 10px;
            }

            .student-card {
                width: 48%; /* 2 cards per row on smaller mobiles */
                padding: 5px;
                margin-bottom: 10px;
            }

            .student-card img {
                width: 50px;
                height: 50px;
            }

            .student-card strong {
                font-size: 12px;
            }

            .student-card span {
                font-size: 11px;
            }

            .flip-card {
                height: 300px; /* Further adjust for smaller screens */
            }

            .award-img {
                max-height: 300px; /* Further constrain image height */
            }
        }

        @media (max-width: 480px) {
            .section-heading span {
                font-size: 24px;
            }

            .achievements-container {
                padding: 10px;
                gap: 10px;
            }

            .box-header {
                font-size: 16px;
                padding: 10px 12px;
            }

            .award-heading {
                font-size: 14px;
                padding: 8px;
            }

            .student-card {
                width: 48%; /* Keep 2 cards per row as it works well */
                padding: 3px;
                margin-bottom: 8px;
            }

            .student-card img {
                width: 45px;
                height: 45px;
                border-width: 2px; /* Slightly thinner border for smaller images */
            }

            .student-card strong {
                font-size: 11px;
            }

            .student-card span {
                font-size: 10px;
            }

            .flip-card {
                height: 250px; /* Even smaller for very small screens */
            }

            .award-img {
                max-height: 250px; /* Even smaller max height */
            }
        }
        /* ✅ Special rule for 2nd box in mobile view */
@media (max-width: 768px) {
  .achievements-container .distinction-box:nth-of-type(2) {
    width: 100% !important;   /* Take full width */
  }

  /* If you want the first box smaller in mobile */
  .achievements-container .distinction-box:nth-of-type(1) {
    width: 90%; /* or keep it auto */
    margin: auto;
  }
}

@media (max-width: 480px) {
  .achievements-container .distinction-box:nth-of-type(2) {
    width: 100% !important;
  }
}








/* Fix for flip-card image spacing - MOBILE FIXED VERSION */
.flip-card {
    width: 100%;
    height: 400px;
    perspective: 1000px;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    padding: 0 !important; /* Remove all padding */
    margin: 0 !important; /* Remove all margins */
}

.flip-card-front {
    z-index: 2;
}

.flip-card-back {
    transform: rotateY(180deg);
    background-color: #ffffff;
}

.award-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 0; /* Remove border radius to use full space */
    display: block;
    margin: 0;
    padding: 0;
}

/* MOBILE FIXES - COMPLETE SPACE REMOVAL */
@media (max-width: 992px) {
    .flip-card {
        height: 350px;
    }
    
    /* Target the specific containers that have spacing */
    .achievements-container .distinction-box:nth-of-type(2) .boxx-body,
    .achievements-container .distinction-box:nth-of-type(2) .boxx1-body {
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .award-img {
        border-radius: 0;
        object-fit: fill; /* Try fill to use all space */
    }
}

@media (max-width: 768px) {
    .flip-card {
        height: 300px;
        margin: 0;
        padding: 0;
    }
    
    /* Remove all spacing from the scooty award box */
    .achievements-container .distinction-box:nth-of-type(2) {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .achievements-container .distinction-box:nth-of-type(2) .boxx-body {
        padding: 5px 0 0 0 !important; /* Only minimal top padding for heading */
        margin: 0 !important;
    }
    
    .achievements-container .distinction-box:nth-of-type(2) .boxx1-body {
        padding: 0 !important;
        margin: 0 !important;
        height: auto;
    }
    
    .achievements-container .distinction-box:nth-of-type(2) .award-heading {
        margin-bottom: 5px;
        padding: 8px 5px;
    }
    
    .award-img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        margin: 0;
        padding: 0;
        border: none;
    }
}

@media (max-width: 480px) {
    .flip-card {
        height: 250px;
    }
    
    /* Complete space removal for mobile */
    .achievements-container {
        padding: 10px 5px !important;
        gap: 15px;
    }
    
    .achievements-container .distinction-box:nth-of-type(2) {
        margin: 0 !important;
        padding: 0 !important;
        border: none;
    }
    
    .achievements-container .distinction-box:nth-of-type(2) .box-header {
        padding: 10px 5px !important;
        margin: 0 !important;
    }
    
    .achievements-container .distinction-box:nth-of-type(2) .boxx-body {
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .achievements-container .distinction-box:nth-of-type(2) .award-heading {
        padding: 5px !important;
        margin: 0 0 5px 0 !important;
        font-size: 14px;
    }
    
    .achievements-container .distinction-box:nth-of-type(2) .boxx1-body {
        padding: 0 !important;
        margin: 0 !important;
        min-height: 250px;
    }
    
    .award-img {
        width: 100%;
        height: 100%;
       
        margin: 0;
        padding: 0;
    }
}

@media (max-width: 360px) {
    .flip-card {
        height: 220px;
    }
    
    .achievements-container .distinction-box:nth-of-type(2) .boxx1-body {
        min-height: 220px;
    }
    
    .award-img {
        object-fit: cover; /* Fill all space */
    }
}

/* Extreme space removal - nuclear option */
@media (max-width: 768px) {
    .achievements-container .distinction-box:nth-of-type(2) * {
        box-sizing: border-box;
    }
    
    .achievements-container .distinction-box:nth-of-type(2) {
        background: transparent !important;
        box-shadow: none !important;
    }
}