/* ============================================================
   FRED & FRED AGRO ENGINEERS
   HOMEPAGE MAIN CSS
============================================================ */


/* ============================================================
   ROOT VARIABLES
============================================================ */

:root {

    --navy:
        #062445;

    --navy-2:
        #0a3154;

    --navy-dark:
        #041b33;

    --green:
        #70b83f;

    --green-bright:
        #a8d63a;

    --orange:
        #ff7b16;

    --white:
        #ffffff;

    --gray:
        #d6e2ec;

    --shadow:
        0 18px 50px rgba(0, 0, 0, 0.20);

    --ease:
        cubic-bezier(.22, 1, .36, 1);

            --font-primary: "Montserrat", sans-serif;

}


/* ============================================================
   GLOBAL RESET
============================================================ */

* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    margin:
        0;

    padding:
        0;

    width:
        100%;

    overflow-x:
        hidden;

            font-family:
                var(--font-primary);
    /* font-family:
        Inter,
        "Segoe UI",
        Arial,
        sans-serif; */

            font-family:
                "Montserrat",
                sans-serif;
        
    color:
        var(--white);

    background:
        var(--navy);

}


body.menu-open {
    overflow: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6,
.nav-link,
.hero-title,
.hero-statement,
.mission-content h1,
.section-heading {
    font-family:
        "Montserrat",
        sans-serif;
}


img {
    max-width: 100%;
}


a {
    text-decoration: none;
}


.mission-content h1 {
    font-family:
        "Montserrat",
        sans-serif;

    font-weight:
        800;

    letter-spacing:
        -0.035em;
}

.mission-content p {
    font-family:
        "Montserrat",
        sans-serif;

    font-weight:
        400;
}


/* ============================================================
   ============================================================
   NAVBAR
   ADAPTED FROM THE UPLOADED WEBSITE ZIP
   ============================================================
============================================================ */

.site-header {

    position:
        fixed;

    inset:
        0 0 auto 0;

    z-index:
        1000;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        24px;

    padding:
        14px clamp(
            18px,
            4vw,
            60px
        );

    background:
        rgba(
            6,
            36,
            69,
            0.88
        );

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            0.12
        );

    transition:
        padding
        0.35s var(--ease),

        background:
        0.35s var(--ease),

        box-shadow:
        0.35s var(--ease);

}


/* ============================================================
   HEADER WHEN SCROLLING
============================================================ */

.site-header.scrolled {

    padding-block:
        9px;

    background:
        rgba(
            6,
            36,
            69,
            0.97
        );

    box-shadow:
        0 8px 30px
        rgba(
            0,
            0,
            0,
            0.18
        );

}


/* ============================================================
   NAVBAR CONTAINER
============================================================ */

.navbar-container {

    width:
        100%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        24px;

}


/* ============================================================
   NAVBAR LOGO
============================================================ */

.logo-link {

    display:
        flex;

    align-items:
        center;

    flex-shrink:
        0;

}


/* Your supplied logo */

.navbar-logo {

    width:
        82px;

    height:
        auto;

    object-fit:
        contain;

    transition:
        transform
        0.3s ease;

}


.logo-link:hover .navbar-logo {

    transform:
        scale(1.04);

}


/* ============================================================
   DESKTOP NAVIGATION
============================================================ */

.site-nav {

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        clamp(
            10px,
            1.8vw,
            26px
        );

}


/* ============================================================
   NAVIGATION LINKS
============================================================ */

.site-nav .nav-link {

    position:
        relative;

    color:
        #ffffff;

    text-decoration:
        none;

    font-size:
        13px;

    font-weight:
        700;

    padding:
        10px 2px;

    white-space:
        nowrap;

    transition:
        color
        0.25s ease;

}


/* ============================================================
   NAVBAR HOVER / ACTIVE
============================================================ */

.site-nav .nav-link:hover,
.site-nav .nav-link.active {

    color:
        var(--green-bright);

}


/* ============================================================
   NAVBAR UNDERLINE
============================================================ */

.site-nav .nav-link::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    right:
        0;

    bottom:
        4px;

    height:
        2px;

    background:
        var(--green);

    transform:
        scaleX(0);

    transform-origin:
        center;

    transition:
        transform
        0.3s var(--ease);

}


.site-nav .nav-link:hover::after,
.site-nav .nav-link.active::after {

    transform:
        scaleX(1);

}


/* ============================================================
   HAMBURGER
============================================================ */

.navbar-toggle {

    display:
        none;

    border:
        0;

    background:
        transparent;

    padding:
        8px;

    cursor:
        pointer;

    z-index:
        1002;

}


/* ============================================================
   HAMBURGER BARS
============================================================ */

.navbar-toggle .bar {

    display:
        block;

    width:
        27px;

    height:
        2px;

    margin:
        5px 0;

    background:
        #ffffff;

    transition:
        transform
        0.3s ease,

        opacity
        0.3s ease;

}


/* ============================================================
   HAMBURGER → X
============================================================ */

.navbar-toggle[aria-expanded="true"] .bar:nth-child(1) {

    transform:
        translateY(7px)
        rotate(45deg);

}


.navbar-toggle[aria-expanded="true"] .bar:nth-child(2) {

    opacity:
        0;

}


.navbar-toggle[aria-expanded="true"] .bar:nth-child(3) {

    transform:
        translateY(-7px)
        rotate(-45deg);

}


/* ============================================================
   LAPTOP
============================================================ */

@media (max-width: 1050px) {

    .site-nav {

        gap:
            14px;

    }


    .site-nav .nav-link {

        font-size:
            12px;

    }

}


/* ============================================================
   MOBILE / TABLET NAVBAR
   THIS IS THE RESPONSIVE STYLE FROM THE ZIP
============================================================ */

@media (max-width: 820px) {


    .site-header {

        padding:
            12px 18px;

    }


    .navbar-container {

        position:
            relative;

    }


    /* -----------------------------
       HAMBURGER
    ------------------------------ */

    .navbar-toggle {

        display:
            block;

    }


    /* -----------------------------
       MOBILE NAVIGATION
       Dropdown under header
    ------------------------------ */

    .site-nav {

        position:
            absolute;

        left:
            0;

        right:
            0;

        top:
            100%;

        display:
            flex;

        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            0;

        padding:
            10px 18px 18px;

        background:
            rgba(
                6,
                36,
                69,
                0.98
            );

        border-top:
            1px solid
            rgba(
                255,
                255,
                255,
                0.10
            );

        transform:
            translateY(-10px);

        opacity:
            0;

        visibility:
            hidden;

        transition:
            transform
            0.3s var(--ease),

            opacity
            0.3s ease,

            visibility
            0.3s ease;

    }


    /* -----------------------------
       OPEN MOBILE MENU
    ------------------------------ */

    .site-nav.open {

        transform:
            translateY(0);

        opacity:
            1;

        visibility:
            visible;

    }


    /* -----------------------------
       MOBILE LINKS
    ------------------------------ */

    .site-nav .nav-link {

        width:
            100%;

        padding:
            14px 8px;

        font-size:
            14px;

        border-bottom:
            1px solid
            rgba(
                255,
                255,
                255,
                0.08
            );

    }


    .site-nav .nav-link::after {

        bottom:
            0;

        left:
            0;

        right:
            auto;

        width:
            40px;

        transform-origin:
            left center;

    }


    .site-nav .nav-link:hover {

        color:
            var(--green-bright);

    }


    .site-nav .nav-link.active {

        color:
            var(--green-bright);

    }


    /* -----------------------------
       PAGE POSITION
    ------------------------------ */

    .hero-section {

        padding-top:
            70px;

    }

}


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

@media (max-width: 480px) {

    .site-header {

        padding:
            10px 14px;

    }


    .navbar-logo {

        width:
            72px;

    }


    .site-nav {

        padding:
            10px 14px 16px;

    }


    .site-nav .nav-link {

        font-size:
            14px;

        padding:
            13px 8px;

    }


    .navbar-toggle .bar {

        width:
            24px;

    }

}


/* ============================================================
   ============================================================
   YOUR HOMEPAGE HERO
   UNCHANGED CONCEPT
   ============================================================
============================================================ */

.hero-section {

    position:
        relative;

    min-height:
        100vh;

    min-height:
        900px;

    overflow:
        hidden;

    padding-top:
        78px;

    background:

        radial-gradient(
            circle at 50% 30%,
            rgba(
                17,
                83,
                124,
                0.28
            ),
            transparent 34%
        ),

        linear-gradient(
            180deg,
            #062b4d 0%,
            #052844 58%,
            #07324f 100%
        );

}


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

.hero-glow {

    position:
        absolute;

    width:
        600px;

    height:
        600px;

    left:
        50%;

    top:
        39%;

    transform:
        translate(
            -50%,
            -50%
        );

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(
                76,
                146,
                95,
                0.16
            ),
            rgba(
                76,
                146,
                95,
                0.03
            ) 45%,
            transparent 72%
        );

    filter:
        blur(12px);

    pointer-events:
        none;

}


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

.hero-ring {

    position:
        absolute;

    border:
        1px solid
        rgba(
            124,
            190,
            219,
            0.10
        );

    border-radius:
        50%;

    pointer-events:
        none;

}


.hero-ring-one {

    width:
        920px;

    height:
        920px;

    left:
        50%;

    top:
        77%;

    transform:
        translate(
            -50%,
            -50%
        );

}


.hero-ring-two {

    width:
        1250px;

    height:
        1250px;

    left:
        50%;

    top:
        82%;

    transform:
        translate(
            -50%,
            -50%
        );

    opacity:
        0.45;

}


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

.hero-container {

    position:
        relative;

    z-index:
        2;

    width:
        min(
            1180px,
            92%
        );

    margin:
        0 auto;

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

    padding:
        70px 0;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

}


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

.hero-title {

    width:
        100%;

    text-align:
        center;

    margin-bottom:
        25px;

    animation:
        titleReveal
        1s
        0.15s
        both;

}


.hero-title h1 {

    margin:
        0;

    font-size:
        clamp(
            2.4rem,
            5.6vw,
            5.8rem
        );

    line-height:
        0.98;

    font-weight:
        900;

    letter-spacing:
        -0.04em;

    color:
        #69b844;

}


.hero-title h1 span {

    display:
        block;

}


.title-second-line {

    margin-top:
        12px;

}


.title-second-line em {

    color:
        #ffffff;

    font-family:
        "Brush Script MT",
        "Segoe Script",
        cursive;

    font-size:
        0.55em;

    font-weight:
        400;

    margin-right:
        8px;

    position:
        relative;

    top:
        -5px;

}


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

.hero-logo {

    margin:
        10px 0 8px;

    position:
        relative;

    z-index:
        4;

    animation:
        logoReveal
        1s
        0.42s
        both;

}


.hero-logo img {

    width:
        clamp(
            125px,
            11vw,
            175px
        );

    filter:
        drop-shadow(
            0 20px 25px
            rgba(
                0,
                0,
                0,
                0.30
            )
        );

}


/* ============================================================
   MAP AREA
============================================================ */

.map-area {

    position:
        relative;

    width:
        min(
            950px,
            96vw
        );

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

}


.map-halo {

    position:
        absolute;

    width:
        80%;

    height:
        80%;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(
                65,
                162,
                190,
                0.14
            ),
            transparent
        );

    filter:
        blur(15px);

    animation:
        haloPulse
        6s
        ease-in-out
        infinite;

}


.nigeria-map {

    position:
        relative;

    z-index:
        2;

    width:
        min(
            760px,
            77vw
        );

    max-height:
        570px;

    object-fit:
        contain;

    filter:
        drop-shadow(
            0 28px 35px
            rgba(
                0,
                0,
                0,
                0.28
            )
        );

    animation:
        mapFloat
        6s
        ease-in-out
        infinite;

}


/* ============================================================
   HOME GROWN KNOWLEDGE
============================================================ */

.knowledge-message {

    position:
        absolute;

    right:
        7%;

    bottom:
        4%;

    z-index:
        6;

    text-align:
        left;

    transform:
        rotate(-3deg);

    filter:
        drop-shadow(
            0 9px 12px
            rgba(
                0,
                0,
                0,
                0.22
            )
        );

}


.knowledge-green {

    color:
        #69b844;

    font-size:
        clamp(
            1.25rem,
            3vw,
            2.7rem
        );

    font-weight:
        900;

    line-height:
        1;

}


.knowledge-script {

    color:
        #ffffff;

    font-family:
        "Brush Script MT",
        "Segoe Script",
        cursive;

    font-size:
        clamp(
            2.4rem,
            5vw,
            5rem
        );

    line-height:
        0.82;

    white-space:
        nowrap;

    margin-left:
        -15px;

}


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

.hero-statement {

    width:
        100%;

    text-align:
        center;

    margin-top:
        -12px;

    position:
        relative;

    z-index:
        7;

    animation:
        statementReveal
        1s
        1s
        both;

}


.hero-statement h2 {

    margin:
        0;

    color:
        #ff8219;

    font-size:
        clamp(
            2rem,
            4vw,
            4.3rem
        );

    line-height:
        1.1;

    font-weight:
        900;

}


.hero-statement h2 + h2 {

    margin-top:
        5px;

}


/* ============================================================
   REVEAL EFFECT
============================================================ */

.reveal {

    opacity:
        0;

    transform:
        translateY(
            35px
        );

    transition:
        opacity
        0.95s ease,

        transform
        0.95s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

}


.reveal.visible {

    opacity:
        1;

    transform:
        translateY(0);

}


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

@keyframes titleReveal {

    from {

        opacity:
            0;

        transform:
            translateY(-30px)
            scale(0.97);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0)
            scale(1);

    }

}


@keyframes logoReveal {

    from {

        opacity:
            0;

        transform:
            translateY(30px)
            scale(0.8);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0)
            scale(1);

    }

}


@keyframes statementReveal {

    from {

        opacity:
            0;

        transform:
            translateY(35px);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0);

    }

}


@keyframes mapFloat {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-13px);

    }

}


@keyframes haloPulse {

    0%,
    100% {

        transform:
            scale(0.95);

        opacity:
            0.55;

    }

    50% {

        transform:
            scale(1.07);

        opacity:
            1;

    }

}


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

.site-footer {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        20px;

    padding:
        28px clamp(
            20px,
            4vw,
            60px
        );

    background:
        #041b33;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.12
        );

    font-size:
        12px;

}


.footer-container {

    width:
        100%;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        20px;

}


.footer-brand {

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

}


.footer-brand img {

    width:
        60px;

}


.footer-brand div {

    display:
        grid;

    gap:
        5px;

}


.footer-brand p {

    margin:
        0;

    color:
        #9fb1c2;

}


.back-top {

    color:
        var(--green);

    text-decoration:
        none;

    font-weight:
        800;

}


.back-top:hover {

    color:
        #ffffff;

}


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

@media (max-width: 600px) {

    .hero-section {

        min-height:
            780px;

        padding-top:
            65px;

    }


    .hero-container {

        width:
            94%;

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

        padding:
            55px 0
            50px;

    }


    .hero-title h1 {

        font-size:
            clamp(
                2rem,
                9.7vw,
                3.4rem
            );

    }


    .hero-logo img {

        width:
            120px;

    }


    .nigeria-map {

        width:
            92vw;

        max-height:
            450px;

    }


    .knowledge-message {

        right:
            5%;

        bottom:
            2%;

    }


    .knowledge-green {

        font-size:
            1.15rem;

    }


    .knowledge-script {

        font-size:
            2.3rem;

    }


    .hero-statement h2 {

        font-size:
            clamp(
                1.55rem,
                8vw,
                2.5rem
            );

    }


    .footer-container {

        flex-direction:
            column;

        align-items:
            flex-start;

    }

}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media (
    prefers-reduced-motion: reduce
) {

    html {
        scroll-behavior:
            auto;
    }


    *,
    *::before,
    *::after {

        animation-duration:
            0.01ms !important;

        transition-duration:
            0.01ms !important;

    }

}