/* =========================================================
   FUEL-S LAUNCH PAGE
========================================================= */


/* =========================================================
   GENERAL
========================================================= */

body {

    background:
        #ffffff;

    color:
        #1d2925;

}


.home-active {

    color:
        red !important;

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

}



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

.hero {

    position:
        relative;

    width:
        100%;

    min-height:
        calc(100vh - 105px);

    height:
        780px;

    overflow:
        hidden;

    display:
        flex;

    align-items:
        center;

}



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

.hero-image {

    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    opacity:
        0;

    transform:
        scale(1.04);

    transition:

        opacity
        1.2s ease,

        transform
        7s ease;

}



.hero-image-active {

    opacity:
        1;

    transform:
        scale(1.10);

}



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

.hero-overlay {

    position:
        absolute;

    inset:
        0;

    z-index:
        2;

    background:

        linear-gradient(
            90deg,
            rgba(7, 28, 25, 0.88) 0%,
            rgba(7, 28, 25, 0.65) 45%,
            rgba(7, 28, 25, 0.18) 100%
        );

}



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

.hero-content {

    position:
        relative;

    z-index:
        4;

    width:
        min(
            760px,
            85%
        );

    margin-left:
        8%;

    color:
        white;

}



.hero-eyebrow {

    display:
        block;

    margin-bottom:
        1.2rem;

    font-size:
        0.82rem;

    font-weight:
        600;

    letter-spacing:
        4px;

    color:
        #b9e3d4;

}



.hero-content h1 {

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

    font-size:

        clamp(
            3.2rem,
            6vw,
            6.2rem
        );

    line-height:
        1.03;

    font-weight:
        600;

    letter-spacing:
        -2px;

    margin-bottom:
        1.6rem;

}



.hero-content h1 span {

    display:
        block;

    color:
        #87dbc0;

}



.hero-content p {

    max-width:
        650px;

    font-size:
        1.15rem;

    line-height:
        1.8;

    color:
        rgba(
            255,
            255,
            255,
            0.88
        );

}



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

.hero-buttons {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        1rem;

    margin-top:
        2.2rem;

}



.hero-button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        160px;

    padding:
        0.95rem
        1.6rem;

    border-radius:
        7px;

    text-decoration:
        none;

    font-weight:
        600;

    transition:
        0.3s ease;

}



.primary-button {

    background:
        white;

    color:
        #125441;

}



.primary-button:hover {

    transform:
        translateY(-3px);

    box-shadow:

        0 10px 25px
        rgba(
            0,
            0,
            0,
            0.25
        );

}



.secondary-button {

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.65
        );

    color:
        white;

    background:
        rgba(
            255,
            255,
            255,
            0.07
        );

    backdrop-filter:
        blur(5px);

}



.secondary-button:hover {

    background:
        white;

    color:
        #125441;

}



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

.hero-arrow {

    position:
        absolute;

    z-index:
        6;

    top:
        50%;

    transform:
        translateY(-50%);

    width:
        52px;

    height:
        52px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.35
        );

    border-radius:
        50%;

    color:
        white;

    background:
        rgba(
            0,
            0,
            0,
            0.15
        );

    backdrop-filter:
        blur(5px);

    cursor:
        pointer;

    font-size:
        1.3rem;

    transition:
        0.3s ease;

}



.hero-arrow:hover {

    background:
        white;

    color:
        #123c31;

}



.hero-prev {

    left:
        2rem;

}



.hero-next {

    right:
        2rem;

}



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

.hero-bottom {

    position:
        absolute;

    z-index:
        6;

    bottom:
        2rem;

    left:
        8%;

    right:
        8%;

    display:
        grid;

    grid-template-columns:
        auto
        1fr
        auto;

    align-items:
        center;

    gap:
        1.2rem;

    color:
        white;

    font-size:
        0.75rem;

    letter-spacing:
        1.5px;

}



.hero-progress {

    height:
        2px;

    background:
        rgba(
            255,
            255,
            255,
            0.25
        );

    overflow:
        hidden;

}



.hero-progress-bar {

    width:
        100%;

    height:
        100%;

    background:
        white;

    transform-origin:
        left;

}



@keyframes heroProgress {

    from {

        transform:
            scaleX(0);

    }

    to {

        transform:
            scaleX(1);

    }

}



/* =========================================================
   INTRO
========================================================= */

.intro-section {

    max-width:
        1250px;

    margin:
        auto;

    padding:
        7rem
        6%;

    display:
        grid;

    grid-template-columns:
        1fr
        1fr;

    align-items:
        end;

    gap:
        5rem;

}



.intro-heading span,
.section-small-title {

    display:
        block;

    margin-bottom:
        1rem;

    color:
        #16846c;

    font-size:
        0.78rem;

    font-weight:
        700;

    letter-spacing:
        3px;

}



.intro-heading h2 {

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

    font-size:

        clamp(
            2.2rem,
            4vw,
            3.7rem
        );

    line-height:
        1.15;

}



.intro-text p {

    color:
        #616966;

    font-size:
        1.05rem;

    line-height:
        1.9;

}



/* =========================================================
   RESEARCH
========================================================= */

.research-section {

    padding:
        6.5rem
        6%;

    background:
        #f2f7f5;

}



.section-heading {

    max-width:
        700px;

    margin:
        0 auto
        4rem;

    text-align:
        center;

}



.section-heading > span {

    display:
        block;

    margin-bottom:
        0.8rem;

    color:
        #16846c;

    font-size:
        0.78rem;

    font-weight:
        700;

    letter-spacing:
        3px;

}



.section-heading h2 {

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

    font-size:

        clamp(
            2.2rem,
            4vw,
            3.2rem
        );

    margin-bottom:
        1rem;

}



.section-heading p {

    color:
        #6d7471;

    line-height:
        1.8;

}



.research-grid {

    max-width:
        1350px;

    margin:
        auto;

    display:
        grid;

    grid-template-columns:

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

    gap:
        1.4rem;

}



.research-card {

    position:
        relative;

    min-height:
        330px;

    padding:
        2rem;

    background:
        white;

    border:
        1px solid
        #e1ebe7;

    border-radius:
        15px;

    transition:
        0.35s ease;

    overflow:
        hidden;

}



.research-card:hover {

    transform:
        translateY(-8px);

    box-shadow:

        0 18px 36px
        rgba(
            17,
            70,
            55,
            0.10
        );

}



.research-number {

    position:
        absolute;

    top:
        1.3rem;

    right:
        1.5rem;

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

    font-size:
        2rem;

    font-weight:
        700;

    color:
        rgba(
            0,
            120,
            95,
            0.12
        );

}



.research-icon {

    width:
        55px;

    height:
        55px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        3rem;

    border-radius:
        12px;

    font-size:
        1.7rem;

    color:
        white;

    background:

        linear-gradient(
            135deg,
            #146ca1,
            #16846c
        );

}



.research-card h3 {

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

    font-size:
        1.25rem;

    margin-bottom:
        1rem;

}



.research-card p {

    color:
        #67706c;

    line-height:
        1.75;

    font-size:
        0.92rem;

}



/* =========================================================
   ABOUT
========================================================= */

.about-section {

    max-width:
        1350px;

    margin:
        auto;

    padding:
        8rem
        6%;

    display:
        grid;

    grid-template-columns:
        1.1fr
        1fr;

    gap:
        6rem;

    align-items:
        center;

}



.about-image {

    position:
        relative;

    height:
        550px;

    overflow:
        hidden;

    border-radius:
        18px;

}



.about-image img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

}



.about-image-label {

    position:
        absolute;

    left:
        1.5rem;

    right:
        1.5rem;

    bottom:
        1.5rem;

    padding:
        1.2rem
        1.4rem;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        1rem;

    border-radius:
        10px;

    background:
        rgba(
            7,
            35,
            30,
            0.80
        );

    backdrop-filter:
        blur(10px);

    color:
        white;

}



.about-image-label strong {

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

    font-size:
        1.2rem;

}



.about-image-label span {

    font-size:
        0.8rem;

    color:
        rgba(
            255,
            255,
            255,
            0.75
        );

}



.about-content h2 {

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

    font-size:

        clamp(
            2.2rem,
            4vw,
            3.4rem
        );

    line-height:
        1.15;

    margin-bottom:
        1.8rem;

}



.about-content p {

    margin-bottom:
        1.2rem;

    color:
        #626a67;

    line-height:
        1.9;

}



/* =========================================================
   TEXT LINK
========================================================= */

.text-link {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.6rem;

    margin-top:
        1rem;

    color:
        #087764;

    text-decoration:
        none;

    font-weight:
        600;

}



.text-link span {

    transition:
        transform
        0.3s ease;

}



.text-link:hover span {

    transform:
        translateX(5px);

}



/* =========================================================
   DIRECTOR
========================================================= */

.director-section {

    padding:
        7rem
        max(
            6%,
            calc(
                (100vw - 1300px) / 2
            )
        );

    display:
        grid;

    grid-template-columns:
        1.3fr
        0.7fr;

    gap:
        6rem;

    align-items:
        center;

    background:
        #102f29;

    color:
        white;

}



.director-content h2 {

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

    font-size:

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

    margin-bottom:
        2rem;

}



.director-content blockquote {

    margin:
        0;

    font-size:
        1.2rem;

    line-height:
        1.9;

    color:
        rgba(
            255,
            255,
            255,
            0.83
        );

    border-left:
        3px solid
        #71c8ad;

    padding-left:
        1.6rem;

}



.director-name {

    display:
        flex;

    flex-direction:
        column;

    gap:
        0.25rem;

    margin-top:
        2rem;

}



.director-name strong {

    font-size:
        1.1rem;

}



.director-name span {

    color:
        #91b4a9;

    font-size:
        0.9rem;

}



.director-section .text-link {

    color:
        #88d7bf;

}



.director-image-frame {

    width:
        330px;

    height:
        400px;

    margin:
        auto;

    overflow:
        hidden;

    border-radius:
        160px
        160px
        20px
        20px;

    border:
        4px solid
        rgba(
            255,
            255,
            255,
            0.18
        );

}



.director-image img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

}



/* =========================================================
   EXPLORE
========================================================= */

.explore-section {

    padding:
        7rem
        6%;

}



.explore-grid {

    max-width:
        1250px;

    margin:
        auto;

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        1.3rem;

}



.explore-card {

    min-height:
        220px;

    padding:
        2rem;

    display:
        flex;

    justify-content:
        space-between;

    gap:
        2rem;

    text-decoration:
        none;

    color:
        #25312d;

    border:
        1px solid
        #dce5e2;

    border-radius:
        14px;

    background:
        white;

    transition:
        0.35s ease;

}



.explore-card:hover {

    transform:
        translateY(-5px);

    color:
        white;

    border-color:
        transparent;

    background:

        linear-gradient(
            135deg,
            #176c91,
            #137761
        );

    box-shadow:

        0 18px 35px
        rgba(
            20,
            90,
            70,
            0.18
        );

}



.explore-number {

    color:
        #16846c;

    font-size:
        0.8rem;

    font-weight:
        700;

}



.explore-card:hover
.explore-number {

    color:
        #a8ddcd;

}



.explore-card h3 {

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

    font-size:
        1.5rem;

    margin:
        1rem
        0;

}



.explore-card p {

    max-width:
        450px;

    color:
        #68716d;

    line-height:
        1.7;

}



.explore-card:hover p {

    color:
        rgba(
            255,
            255,
            255,
            0.8
        );

}



.explore-arrow {

    align-self:
        flex-end;

    font-size:
        2rem;

    transition:
        transform
        0.3s ease;

}



.explore-card:hover
.explore-arrow {

    transform:
        translateX(5px);

}



/* =========================================================
   GALLERY PREVIEW
========================================================= */

.gallery-preview {

    padding:
        7rem
        6%;

    background:
        #f2f7f5;

}



.gallery-preview-heading {

    max-width:
        1300px;

    margin:
        0 auto
        2.5rem;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        end;

    gap:
        2rem;

}



.gallery-preview-heading h2 {

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

    font-size:
        2.7rem;

}



.preview-grid {

    max-width:
        1300px;

    height:
        520px;

    margin:
        auto;

    display:
        grid;

    grid-template-columns:
        1.5fr
        1fr;

    grid-template-rows:
        1fr
        1fr;

    gap:
        1rem;

}



.preview-image {

    overflow:
        hidden;

    border-radius:
        14px;

}



.preview-large {

    grid-row:
        1 / 3;

}



.preview-image img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform
        0.6s ease;

}



.preview-image:hover img {

    transform:
        scale(1.05);

}



/* =========================================================
   CONTACT
========================================================= */

.launch-contact {

    padding:
        6rem
        8% !important;

}



.contact-intro {

    max-width:
        650px;

    margin:
        0 auto
        3rem;

    text-align:
        center;

}



.contact-intro > span {

    display:
        block;

    margin-bottom:
        0.7rem;

    color:
        #16846c;

    font-size:
        0.78rem;

    font-weight:
        700;

    letter-spacing:
        3px;

}



.contact-intro h2 {

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

    font-size:
        2.7rem;

    margin-bottom:
        1rem;

}



.contact-intro p {

    color:
        #68716d;

    line-height:
        1.7;

}



.contact-label {

    display:
        block;

    margin-bottom:
        0.8rem;

    color:
        #16846c;

    font-size:
        0.72rem;

    font-weight:
        700;

    letter-spacing:
        2px;

}



/* =========================================================
   FOOTER
========================================================= */

.site-footer {

    padding:
        2rem
        6%;

    background:
        #09211c;

    color:
        white;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        2rem;

}



.footer-brand {

    display:
        flex;

    align-items:
        center;

    gap:
        1rem;

}



.footer-brand img {

    width:
        55px;

}



.footer-brand strong {

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

}



.footer-brand p,
.footer-university {

    margin:
        0;

    color:
        rgba(
            255,
            255,
            255,
            0.65
        );

    font-size:
        0.8rem;

    line-height:
        1.6;

}



.footer-university {

    text-align:
        right;

}



/* =========================================================
   RESPONSIVE
========================================================= */

@media
(max-width: 1050px) {


    .research-grid {

        grid-template-columns:
            repeat(
                2,
                1fr
            );

    }



    .about-section {

        gap:
            3rem;

    }



    .director-section {

        gap:
            3rem;

    }

}



@media
(max-width: 850px) {


    .hero {

        height:
            650px;

    }



    .hero-content {

        margin-left:
            7%;

    }



    .hero-arrow {

        display:
            none;

    }



    .intro-section {

        grid-template-columns:
            1fr;

        gap:
            2rem;

    }



    .about-section {

        grid-template-columns:
            1fr;

    }



    .about-image {

        height:
            420px;

    }



    .director-section {

        grid-template-columns:
            1fr;

    }



    .director-image {

        order:
            -1;

    }



    .explore-grid {

        grid-template-columns:
            1fr;

    }

}



@media
(max-width: 600px) {


    .hero {

        min-height:
            620px;

        height:
            620px;

    }



    .hero-content {

        width:
            86%;

        margin:
            auto;

    }



    .hero-content h1 {

        font-size:
            3rem;

        letter-spacing:
            -1px;

    }



    .hero-content p {

        font-size:
            1rem;

    }



    .hero-buttons {

        flex-direction:
            column;

        align-items:
            stretch;

    }



    .hero-bottom {

        left:
            7%;

        right:
            7%;

    }



    .intro-section,
    .research-section,
    .about-section,
    .explore-section,
    .gallery-preview {

        padding-left:
            5%;

        padding-right:
            5%;

    }



    .research-grid {

        grid-template-columns:
            1fr;

    }



    .research-card {

        min-height:
            auto;

    }



    .about-image {

        height:
            340px;

    }



    .about-image-label {

        flex-direction:
            column;

        align-items:
            flex-start;

    }



    .director-image-frame {

        width:
            260px;

        height:
            320px;

    }



    .preview-grid {

        height:
            auto;

        grid-template-columns:
            1fr;

        grid-template-rows:
            none;

    }



    .preview-large {

        grid-row:
            auto;

    }



    .preview-image {

        height:
            260px;

    }



    .gallery-preview-heading {

        flex-direction:
            column;

        align-items:
            flex-start;

    }



    .site-footer {

        flex-direction:
            column;

        text-align:
            center;

    }



    .footer-university {

        text-align:
            center;

    }

}