body {
    background-color: black;
    overflow-x: hidden;
    font-family: 'Roboto';
    color: white;
    max-width: 100vw;
}

/* <<<<< Css for The Hero section >>>>> */
.hero {
    padding-left: 80px;
}

.hero h1 {
    font-size: 5rem;
    text-transform: uppercase;
    text-align: left;
    letter-spacing: 2px;
    font-weight: 500;
}

.hero .row {
    max-width: 100%;
    overflow-x: hidden;
}

.hero span {
    color: red;
    font-weight: 400;
}

.hero img {
    -webkit-transform: translateX(-50px) scale(0.75);
    -ms-transform: translateX(-50px) scale(0.75);
    transform: translateX(-50px) scale(0.75);
}

/* <<<< CSS for Info Section >>>> */

.info {
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
}

.info .row {
    width: 80%;
    margin: 0 auto;
}

.info .row .col-4 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.info h1 {
    color: yellowgreen;
}

.info h4 {
    font-size: 20px;
    letter-spacing: 2px;
    text-align: center;
}

/* <<<< Css for achievements section >>>> */

.achievements .row {
    margin: 0px auto;
    width: 70%;
    height: 30%;
}

.year2019 .row {
    width: 90%;
}

.year2019 .row img {
    margin-left: 30px !important;
    width: 25%;
}

/* This rule is overridden by the new 2019 awards layout below */

.year2021 .about {
    width: 100%;
}

.achievements h1 {
    text-align: center;
    letter-spacing: 15px;
    font-size: 50px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.3);
    padding-top: 20px;
}

.about {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.about p {
    color: white;
    font-size: 1.3rem;
}

.achievements .row img {
    margin-top: 20px;
    margin-bottom: 20px;
    border-radius: 15px;
    margin-left: 50px;
}

.ceremony {
    margin-bottom: var(--spacing-md);
}

.ceremony img {
    border-radius: 15px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.year2024 .awards {
    display: flex;
    flex-direction: row;
}

.year2024 .awards .twoo {
    margin: 10px;
    width: 100%;
    /* adjust the width as needed */
}

/* <<<< All Media Queries >>>> */

@media(max-width: 1250px) {
    .hero img {
        -webkit-transform: translateX(-70px) scale(0.6);
        -ms-transform: translateX(-70px) scale(0.6);
        transform: translateX(-70px) scale(0.6);
    }

    .achievements .about p {
        font-size: 1.1rem;
    }

    .hero {
        padding-left: 0;
    }
}

@media(max-width: 992px) {
    blockquote {
        font-size: 1rem !important;
    }

    .hero img {
        -webkit-transform: translateX(-90px) scale(0.5);
        -ms-transform: translateX(-90px) scale(0.5);
        transform: translateX(-90px) scale(0.5);
    }

    .hero h1 {
        font-size: 4rem;
    }

    .info img {
        -webkit-transform: scale(0.8);
        -ms-transform: scale(0.8);
        transform: scale(0.8);
    }

    .info h4 {
        font-size: 15px;
    }

    .onenthree {
        max-width: 100%;
        height: auto;
        -webkit-transform: scale(0.8);
        -ms-transform: scale(0.8);
        transform: scale(0.8);
    }

    .twoo {
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1);
    }

    .fourrrr {
        -webkit-transform: scale(1.2);
        -ms-transform: scale(1.2);
        transform: scale(1.2);
    }

    .achievements .about p {
        font-size: 1rem;
    }

    .year2019 .row img {
        margin-left: 23px !important;
    }
}

@media(max-width: 768px) {
    .illust {
        display: none;
    }

    .hero .col-12 {
        margin-bottom: 30px;
    }

    .year2019 p {
        text-align: center;
    }

    .year2019 .col-10 {
        margin: 20px auto;
    }

    .awards {
        margin: 0 auto;
    }

    .hero h1 {
        font-size: 3.5rem;
    }

    .hero .row {
        margin-left: 0 !important;
        padding-left: 20px !important;
    }

    .hero {
        padding-left: 0;
    }

    .hero .col-lg-6 {
        padding-right: 15px;
    }

}

@media(max-width: 650px) {
    .info img {
        -webkit-transform: scale(0.6);
        -ms-transform: scale(0.6);
        transform: scale(0.6);
    }

    .achievements .row {
        width: 90%;
    }

    .achievements .row img {
        -webkit-transform: scale(0.9);
        -ms-transform: scale(0.9);
        transform: scale(0.9);
        margin-left: 10px !important;
    }

    .achievements .about p {
        font-size: 0.8rem;
    }

    /* 2019 awards layout handled by specific rules below */
}

@media(max-width: 500px) {
    .hero .row {
        padding-left: 20px !important;
    }

    .hero h1 {
        font-size: 3rem;
    }

    .year2024 img {
        width: 100%;
    }

    .year2023 img {
        width: 100%;
    }

    .year2021 img {
        width: 100%;
    }

    .year2020 img {
        width: 100%;
    }

    .year2019 .about img {
        width: 28% !important;
    }

    .year2018 img {
        width: 100%;
        transform: scale(1) !important;
    }

    .info h4 {
        font-size: 10px;
    }

    /* 2019 awards layout handled by specific rules below */

    .achievements .row img {
        -webkit-transform: scale(0.99);
        -ms-transform: scale(0.99);
        transform: scale(0.99);
        margin-left: 10px !important;
    }

    .achievements .about p {
        font-size: 0.75rem;
    }
}

/* === Spacing fixes: reduce gap after hero quote and before achievements === */
.hero blockquote {
  margin-bottom: 0.5rem; /* tighten space after the quote */
}

/* Further tighten spacing in hero */
.hero h1 {
  margin-bottom: 0.25rem;
}
.hero blockquote p {
  margin-bottom: 0.25rem;
}
.hero blockquote .blockquote-footer {
  margin-top: 0.25rem;
}
.hero { padding-bottom: 0; }
.info { margin-top: 0; }

/* Reduce top padding so the next section doesn’t start too low */
.achievements {
  padding-top: var(--spacing-lg);
}


/* === 2019 awards layout: Use same logic as other years === */
.year2019 .awards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 15px;
  padding: 0;
  margin: 0 auto;
}

/* 2019 images - target all images in awards div, not just .twoo class */
.year2019 .awards img {
  width: 100% !important;
  max-width: 280px !important;
  height: auto !important;
  margin: 0 !important;
  border-radius: 15px !important;
  flex: 0 0 280px;
}

/* Responsive: same pattern as other years */
@media (max-width: 992px) {
  .year2019 .awards img {
    max-width: 250px !important;
    flex: 0 0 250px;
  }
}

@media (max-width: 768px) {
  .year2019 .awards {
    flex-direction: column;
    gap: 15px;
  }
  .year2019 .awards img {
    max-width: 220px !important;
    flex: 0 0 220px;
  }
}

@media (max-width: 500px) {
  .year2019 .awards img {
    max-width: 200px !important;
    flex: 0 0 200px;
  }
}
/* Additional fixes for spacing and mobile layout */

/* Control spacing for year sections that are outside the main achievements container */
.year2022, .year2018 {
  margin-bottom: var(--spacing-2xl);
}

.year2022 h1, .year2018 h1 {
  text-align: center;
  letter-spacing: 15px;
  font-size: 50px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.3);
  padding-top: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

/* Reduce ceremony image spacing */
.ceremony-photo-2018 {
  margin-bottom: var(--spacing-md);
}

/* Tighten overall page spacing */
body {
  line-height: 1.4;
}

/* Reduce excessive spacing in info section */
.info {
  padding: var(--spacing-md) 0;
  margin-bottom: var(--spacing-md);
}

/* Make ceremony images more compact */
.ceremony img, .ceremony-photo-2018 img {
  margin-bottom: var(--spacing-sm);
}

/* Reduce overall section spacing */
.year2024-2, .year2024, .year2023, .year2021, .year2020, .year2019, .year2022, .year2018 {
  margin-bottom: var(--spacing-xl);
}

/* Tighten row spacing */
.achievements .row {
  margin-bottom: var(--spacing-sm);
}

/* Fix mobile hero section */
@media(max-width: 500px) {
    .hero h1 {
        font-size: 2.5rem;
        line-height: 1.1;
    }

    .hero .row {
        padding-left: 15px !important;
        margin-left: 0 !important;
    }

    .hero blockquote {
        font-size: 0.9rem;
        margin-top: var(--spacing-md);
    }
}

/* Ensure proper spacing between sections */
.hero + .info {
    margin-top: var(--spacing-lg);
}

.info + .achievements {
    margin-top: var(--spacing-lg);
}
/* Fix for achievements page spacing issues */
body[data-page="achievements"] {
  overflow-x: hidden;
}

body[data-page="achievements"] section {
  padding: 0;
  margin: 0;
}

body[data-page="achievements"] .hero {
  margin-bottom: 0;
  padding-bottom: var(--spacing-lg);
}

body[data-page="achievements"] .info {
  margin-top: 0;
  margin-bottom: var(--spacing-lg);
}

body[data-page="achievements"] .achievements {
  margin-top: 0;
  padding-top: var(--spacing-lg);
}

/* Prevent any JavaScript-added main elements from affecting layout */
body[data-page="achievements"] main {
  padding: 0;
  margin: 0;
}

/* Override any global section spacing that might be applied */
body[data-page="achievements"] section:not(.hero):not(.info):not(.achievements) {
  padding: 0;
  margin: 0;
}