/* =========================================================
   FUEL-S AWARDS & ACHIEVEMENTS PAGE
========================================================= */


/* =========================================================
   ACTIVE NAVIGATION
========================================================= */

.nav-links a.awards-active {

    color: red;

    border-bottom:
        2px solid
        rgb(160, 0, 0);

}



/* =========================================================
   HERO
========================================================= */

.awards-hero {

    min-height: 440px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding:
        6rem 2rem
        4rem;

    color: white;


    background:

        linear-gradient(
            rgba(0, 50, 90, 0.76),
            rgba(0, 100, 78, 0.80)
        ),

        url("image_4.jpeg");


    background-size: cover;

    background-position: center;

}



.awards-hero-content {

    max-width:
        900px;

}



.awards-label {

    display:
        inline-block;

    margin-bottom:
        1rem;

    font-family:
        "Tektur",
        sans-serif;

    font-size:
        0.9rem;

    font-weight:
        600;

    letter-spacing:
        5px;

}



.awards-hero h1 {

    font-family:
        "Tektur",
        sans-serif;

    font-size:

        clamp(
            3rem,
            7vw,
            5.5rem
        );

    font-weight:
        600;

    line-height:
        1.05;

    margin-bottom:
        1.5rem;

}



.awards-hero p {

    max-width:
        750px;

    margin:
        auto;

    font-size:
        1.08rem;

    line-height:
        1.8;

    color:

        rgba(
            255,
            255,
            255,
            0.90
        );

}



/* =========================================================
   MAIN SECTION
========================================================= */

.awards-section {

    max-width:
        1250px;

    margin:
        auto;

    padding:
        5.5rem
        6%;

}



/* =========================================================
   SECTION HEADING
========================================================= */

.awards-heading {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        flex-end;

    gap:
        3rem;

    margin-bottom:
        4rem;

}



.awards-heading > div {

    flex:
        1;

}



.awards-heading span {

    display:
        block;

    margin-bottom:
        0.6rem;

    color:
        #1b6ca8;

    font-size:
        0.8rem;

    font-weight:
        700;

    letter-spacing:
        3px;

}



.awards-heading h2 {

    font-family:
        "Tektur",
        sans-serif;

    font-size:

        clamp(
            2rem,
            4vw,
            2.8rem
        );

    color:
        #222;

}



.awards-heading p {

    max-width:
        500px;

    color:
        #666;

    line-height:
        1.7;

}



/* =========================================================
   YEAR SECTION
========================================================= */

.award-year-section {

    margin-bottom:
        4.5rem;

}



.award-year {

    display:
        flex;

    align-items:
        center;

    margin-bottom:
        1.6rem;

}



.award-year span {

    font-family:
        "Tektur",
        sans-serif;

    font-size:
        2.5rem;

    font-weight:
        600;

    color:
        #174b3d;

}



.award-year::after {

    content:
        "";

    flex:
        1;

    height:
        1px;

    margin-left:
        1.5rem;

    background:
        #dce5e2;

}



/* =========================================================
   AWARDS GRID
========================================================= */

.awards-grid {

    display:
        grid;

    grid-template-columns:

        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        1.6rem;

}



/* =========================================================
   AWARD CARD
========================================================= */

.award-card {

    position:
        relative;

    display:
        grid;

    grid-template-columns:
        65px
        1fr;

    gap:
        1.4rem;

    padding:
        2rem;

    background:
        white;

    border:
        1px solid
        #e4ebe8;

    border-radius:
        18px;

    box-shadow:

        0 5px 18px

        rgba(
            0,
            0,
            0,
            0.06
        );

    overflow:
        hidden;

    transition:

        transform
        0.3s ease,

        box-shadow
        0.3s ease,

        border-color
        0.3s ease;

}



.award-card:hover {

    transform:
        translateY(-6px);

    border-color:
        #b5dace;

    box-shadow:

        0 15px 32px

        rgba(
            0,
            0,
            0,
            0.13
        );

}



/* =========================================================
   FEATURED AWARD
========================================================= */

.featured-award {

    border-top:
        4px solid
        #00897b;

}



.featured-award::after {

    content:
        "";

    position:
        absolute;

    width:
        140px;

    height:
        140px;

    right:
        -70px;

    top:
        -70px;

    border-radius:
        50%;

    background:

        rgba(
            0,
            137,
            123,
            0.06
        );

}



/* =========================================================
   AWARD ICON
========================================================= */

.award-icon {

    width:
        55px;

    height:
        55px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        14px;

    background:

        linear-gradient(
            135deg,
            #1b6ca8,
            #00897b
        );

    color:
        white;

    font-size:
        1.4rem;

    box-shadow:

        0 5px 12px

        rgba(
            0,
            0,
            0,
            0.15
        );

}



/* =========================================================
   AWARD CATEGORY
========================================================= */

.award-category {

    display:
        inline-block;

    margin-bottom:
        0.7rem;

    color:
        #00897b;

    font-size:
        0.75rem;

    font-weight:
        700;

    text-transform:
        uppercase;

    letter-spacing:
        1.2px;

}



/* =========================================================
   AWARD TITLE
========================================================= */

.award-content h3 {

    font-family:
        "Tektur",
        sans-serif;

    font-size:
        1.3rem;

    line-height:
        1.45;

    color:
        #1d3029;

    margin-bottom:
        1rem;

}



/* =========================================================
   DESCRIPTION
========================================================= */

.award-content p {

    color:
        #606763;

    font-size:
        0.92rem;

    line-height:
        1.75;

}



/* =========================================================
   METADATA
========================================================= */

.award-meta {

    display:
        flex;

    flex-wrap:
        wrap;

    justify-content:
        space-between;

    gap:
        0.7rem;

    margin-top:
        1.3rem;

    padding-top:
        1rem;

    border-top:

        1px solid
        #edf0ef;

}



.award-meta span {

    color:
        #777;

    font-size:
        0.8rem;

    font-weight:
        500;

}



/* =========================================================
   TABLET
========================================================= */

@media
(max-width: 950px) {


    .awards-heading {

        flex-direction:
            column;

        align-items:
            flex-start;

    }



    .awards-grid {

        grid-template-columns:
            1fr;

    }

}



/* =========================================================
   MOBILE
========================================================= */

@media
(max-width: 600px) {


    .awards-hero {

        min-height:
            350px;

    }



    .awards-hero h1 {

        font-size:
            2.7rem;

    }



    .awards-section {

        padding:

            4rem
            5%;

    }



    .award-card {

        grid-template-columns:
            1fr;

        padding:
            1.5rem;

    }



    .award-icon {

        width:
            48px;

        height:
            48px;

    }



    .award-year span {

        font-size:
            2rem;

    }



    .award-meta {

        flex-direction:
            column;

    }

}