/* ============================================================
   FRED & FRED AGRO ENGINEERS
   ABOUT US
   COMPLETE SIX-SECTION RESPONSIVE STYLESHEET
============================================================ */


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

:root {

    --navy: #062b4d;
    --navy-deep: #041f39;
    --navy-blue: #073859;
    --navy-light: #073f63;

    --green: #6fb342;
    --green-bright: #72cf20;
    --green-light: #82c94d;

    --orange: #f47b20;
    --purple: #4d506e;

    --white: #ffffff;
    --text-white: #f7fbff;
    --muted: #c8d7e2;

    --border: rgba(255, 255, 255, .10);

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

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


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

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    min-width: 320px;

    overflow-x: hidden;

    background: var(--navy);
    color: var(--white);

    font-family: var(--font);
}

body.menu-open {
    overflow: hidden;
}

img {
    display: block;
    max-width: 100%;
}

a {
    text-decoration: none;
}

button {
    font-family: inherit;
}


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

.site-header {

    position: fixed;

    inset: 0 0 auto 0;

    z-index: 1000;

    padding:
        12px
        clamp(16px, 4vw, 60px);

    background:
        rgba(6, 43, 77, .90);

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

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

    transition:
        padding .35s ease,
        background .35s ease,
        box-shadow .35s ease;
}


.site-header.scrolled {

    padding-block: 8px;

    background:
        rgba(3, 29, 52, .97);

    box-shadow:
        0
        8px
        30px
        rgba(0, 0, 0, .20);
}


.navbar-container {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 24px;
}


.logo-link {

    display: flex;

    align-items: center;

    flex-shrink: 0;
}


.navbar-logo {

    width: 82px;

    height: auto;

    object-fit: contain;

    transition: transform .3s ease;
}


.logo-link:hover .navbar-logo {
    transform: scale(1.04);
}


/* ============================================================
   NAV LINKS
============================================================ */

.site-nav {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap:
        clamp(
            9px,
            1.5vw,
            24px
        );
}


.nav-link {

    position: relative;

    padding: 10px 2px;

    color: #ffffff;

    font-size: 12px;

    font-weight: 700;

    white-space: nowrap;

    transition: color .25s ease;
}


.nav-link:hover,
.nav-link.active {
    color: var(--green-light);
}


.nav-link::after {

    content: "";

    position: absolute;

    left: 0;
    right: 0;

    bottom: 3px;

    height: 2px;

    background: var(--green-bright);

    transform: scaleX(0);

    transform-origin: center;

    transition: transform .3s ease;
}


.nav-link:hover::after,
.nav-link.active::after {
    transform: scaleX(1);
}


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

.navbar-toggle {

    display: none;

    width: 42px;
    height: 42px;

    padding: 7px;

    border: 0;

    border-radius: 5px;

    background: #213a21;

    cursor: pointer;

    z-index: 1002;
}


.navbar-toggle .bar {

    display: block;

    width: 25px;
    height: 3px;

    margin: 4px auto;

    background: #ffffff;

    border-radius: 2px;

    transition:
        transform .3s ease,
        opacity .3s ease;
}


.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);
}


/* ============================================================
   GLOBAL ABOUT SECTION
============================================================ */

.about-section {

    position: relative;

    width: 100%;

    min-height: 100svh;
    min-height: 980px;

    overflow: hidden;

    isolation: isolate;

    background:
        linear-gradient(
            180deg,
            #062b4d 0%,
            #062b4d 72%,
            #052a48 100%
        );
}


/* ============================================================
   BLUE BACKGROUND GLOW
============================================================ */

.about-section::before {

    content: "";

    position: absolute;

    z-index: 0;

    left: 50%;
    bottom: -140px;

    width: 1100px;
    height: 850px;

    transform: translateX(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse at center,

            rgba(8, 75, 112, .42) 0%,

            rgba(8, 75, 112, .16) 45%,

            transparent 72%
        );

    filter: blur(10px);

    pointer-events: none;
}


/* ============================================================
   SECTION 1
   ABOUT HOME
============================================================ */

.about-home-section {

    display: flex;

    align-items: center;
    justify-content: center;

    padding:
        135px
        5%
        90px;

    min-height: 1100px;
}


.about-hero-glow {

    position: absolute;

    z-index: 0;

    width: 600px;
    height: 600px;

    left: 50%;
    top: 44%;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(8, 84, 124, .25),
            transparent 70%
        );

    pointer-events: none;
}


.about-hero-ring {

    position: absolute;

    border:
        1px solid
        rgba(90, 173, 213, .12);

    border-radius: 50%;

    pointer-events: none;
}


.ring-one {

    width: 850px;
    height: 850px;

    left: 50%;
    top: 43%;

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


.ring-two {

    width: 1050px;
    height: 1050px;

    left: 50%;
    top: 43%;

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

    opacity: .6;
}


.about-home-container {

    position: relative;

    z-index: 5;

    width:
        min(1000px, 100%);

    display: flex;

    flex-direction: column;

    align-items: center;
}


.about-flag {

    width: 105px;

    margin-bottom: 20px;
}


.about-flag img {

    width: 100%;

    animation:
        flagFloat
        5s
        ease-in-out
        infinite;
}


@keyframes flagFloat {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(-1deg);
    }

    50% {
        transform:
            translateY(-6px)
            rotate(1deg);
    }
}


.about-home-title {
    text-align: center;
}


.about-home-title h1 {

    margin: 0;

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

    line-height: 1;

    font-weight: 900;

    letter-spacing: -.045em;
}


.about-home-title h1 span {

    display: block;

    color: var(--green);
}


.about-home-title h1 span:last-child {

    margin-top: 10px;
}


.about-home-title em {

    margin-right: 10px;

    color: #ffffff;

    font-size: .55em;

    font-family: Georgia, serif;

    font-weight: 400;
}


.about-home-title strong {
    color: var(--green);
}


.about-home-logo {

    width: 155px;

    margin:
        35px
        0
        15px;
}


.about-home-logo img {
    width: 100%;
}


.about-home-map {

    position: relative;

    width:
        min(680px, 85vw);
}


.home-map-halo {

    position: absolute;

    inset: 15%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(93, 171, 96, .14),
            transparent 70%
        );

    filter: blur(15px);
}


.about-home-map img {

    position: relative;

    z-index: 2;

    width: 100%;

    animation:
        homeMapFloat
        8s
        ease-in-out
        infinite;

    filter:
        drop-shadow(
            0
            18px
            25px
            rgba(0, 0, 0, .22)
        );
}


@keyframes homeMapFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}


.about-home-tagline {

    margin-top: 10px;

    text-align: center;
}


.about-home-tagline h2 {

    margin: 0;

    color: var(--orange);

    font-size:
        clamp(
            1.3rem,
            3vw,
            2.8rem
        );

    line-height: 1.35;

    font-weight: 900;
}


/* ============================================================
   SECTIONS 2 & 4
   MISSION STYLE
============================================================ */

.mission-section {

    position: relative;

    padding:
        170px
        8%
        90px;
}


.mission-image-wrap {

    position: absolute;

    z-index: 2;

    top: 20%;
    right: -5%;

    width:
        clamp(
            560px,
            62vw,
            1050px
        );

    height:
        clamp(
            470px,
            61vh,
            680px
        );

    pointer-events: none;
}


.mission-machine {

    width: 100%;
    height: 100%;

    object-fit: contain;

    object-position: right center;

    opacity: .36;

    filter:
        brightness(.62)
        saturate(.74)
        contrast(1.08)
        drop-shadow(
            0
            25px
            35px
            rgba(0, 0, 0, .18)
        );

    mix-blend-mode: screen;

    -webkit-mask-image:
        linear-gradient(
            to right,

            transparent 0%,

            rgba(0, 0, 0, .18) 7%,

            #000 19%,

            #000 78%,

            rgba(0, 0, 0, .72) 92%,

            transparent 100%
        );

    mask-image:
        linear-gradient(
            to right,

            transparent 0%,

            rgba(0, 0, 0, .18) 7%,

            #000 19%,

            #000 78%,

            rgba(0, 0, 0, .72) 92%,

            transparent 100%
        );

    animation:
        missionMachineFloat
        8s
        ease-in-out
        infinite;
}


.mission-image-wrap::after {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 3;

    pointer-events: none;

    background:
        linear-gradient(
            to left,

            rgba(6, 43, 77, 0),

            rgba(6, 43, 77, .16) 50%,

            rgba(6, 43, 77, .78)
        );
}


@keyframes missionMachineFloat {

    0%,
    100% {

        transform:
            translate3d(0, 0, 0)
            scale(1);
    }

    50% {

        transform:
            translate3d(-8px, -8px, 0)
            scale(1.012);
    }
}


.mission-content {

    position: relative;

    z-index: 10;

    width:
        min(
            610px,
            55vw
        );
}


.mission-content h1 {

    margin:
        0
        0
        34px;

    color: var(--green);

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

    line-height: 1.05;

    font-weight: 900;

    letter-spacing: -.035em;
}


.mission-content p {

    margin: 0;

    color: var(--text-white);

    font-size:
        clamp(
            1.3rem,
            2vw,
            2.15rem
        );

    line-height: 1.52;

    font-weight: 400;
}


/* ============================================================
   MISSION ARC
============================================================ */

.mission-arc {

    position: absolute;

    z-index: 6;

    left: 5%;
    bottom: -26%;

    width: 90%;
    height: 48%;
    border-radius: 50% 50% 0 0;
    background: #073859;
    border: none;
    opacity: 1;
    pointer-events: none;
}


/* ============================================================
   MISSION GREEN SWOOSH
============================================================ */

.mission-swoosh {

    position: absolute;

    z-index: 8;

    left: -8%;
    bottom: -6%;

    width: 54%;
    height: 16%;

    background: var(--green);

    clip-path:
        polygon(
            0 100%,
            18% 0,
            100% 100%,
            79% 100%,
            18% 24%
        );

    animation:
        swooshSlide
        1.2s
        var(--ease)
        both;
}


.mission-footer-logo {

    position: absolute;

    z-index: 12;

    right: 5.5%;
    bottom: 7.5%;

    width:
        clamp(
            95px,
            10vw,
            145px
        );
}


.mission-footer-logo img {
    width: 100%;
}


.solution-section .mission-content {
    max-width: 650px;
}


/* ============================================================
   SECTION 3
   CORE FOCUS
============================================================ */

.core-focus-section {

    position: relative;

    padding:
        145px
        7%
        120px;
}


.core-machine-wrap {

    position: absolute;

    z-index: 1;

    top: 23%;
    right: -5%;

    width: 58%;
    height: 63%;

    pointer-events: none;
}


.core-machine {

    width: 100%;
    height: 100%;

    object-fit: contain;

    object-position: right center;

    opacity: .52;

    mix-blend-mode: screen;

    filter:
        brightness(.62)
        saturate(.70)
        contrast(1.05);

    -webkit-mask-image:
        linear-gradient(
            to right,

            transparent 0%,

            rgba(0, 0, 0, .2) 12%,

            #000 25%,

            #000 82%,

            transparent 100%
        );

    mask-image:
        linear-gradient(
            to right,

            transparent 0%,

            rgba(0, 0, 0, .2) 12%,

            #000 25%,

            #000 82%,

            transparent 100%
        );

    animation:
        missionMachineFloat
        8s
        ease-in-out
        infinite;
}


.core-content {

    position: relative;

    z-index: 8;

    width:
        min(
            570px,
            50vw
        );

    margin-left: 2%;
}


.core-kicker {

    display: inline-flex;

    align-items: center;

    padding:
        7px
        18px;

    border-radius: 999px;

    background: var(--green-bright);

    color: #ffffff;

    font-size: .78rem;

    font-weight: 800;

    letter-spacing: .08em;
}


.core-content h1 {

    margin:
        17px
        0
        0;

    color: #ffffff;

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

    line-height: .96;

    font-weight: 900;

    letter-spacing: -.05em;
}


.core-content h1 span {
    color: var(--green-bright);
}


.core-line {

    width: 100px;
    height: 5px;

    margin:
        24px
        0
        26px;

    background: var(--green-bright);
}


.core-content p {

    margin:
        0
        0
        28px;

    color: #ffffff;

    font-size:
        clamp(
            1rem,
            1.32vw,
            1.18rem
        );

    line-height: 1.72;
}


/* ============================================================
   MAP TEXT
============================================================ */

.map-text {

    background: #0000007a;

    padding: 13px;

    box-shadow:
        5px
        5px
        7px
        rgba(0, 0, 0, .78);

     border-radius: 7% 7% 0 0;
}


/* ============================================================
   CORE MAP
============================================================ */

.core-map-wrap {

    position: absolute;

    z-index: 7;

    right: 4%;
    top: 28%;

    width:
        min(
            46vw,
            650px
        );

    aspect-ratio: 1;

    display: flex;

    align-items: center;
    justify-content: center;
}


.core-map-glow {

    position: absolute;

    inset: 10%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(82, 198, 87, .26),
            transparent 66%
        );

    filter: blur(18px);

    animation:
        mapGlow
        5s
        ease-in-out
        infinite;
}


.core-map-orbit {

    position: absolute;

    inset: 4%;

    border:
        2px solid
        rgba(0, 125, 205, .25);

    border-radius: 50%;
}


.core-map {

    position: relative;

    z-index: 4;

    width: 87%;
    height: 87%;

    object-fit: contain;

    filter:
        drop-shadow(
            0
            20px
            24px
            rgba(0, 0, 0, .28)
        );

    animation:
        coreMapFloat
        7s
        ease-in-out
        infinite;
}


@keyframes coreMapFloat {

    0%,
    100% {

        transform:
            translateY(0)
            rotate(0);
    }

    50% {

        transform:
            translateY(-10px)
            rotate(.5deg);
    }
}


@keyframes mapGlow {

    0%,
    100% {

        transform: scale(.95);
        opacity: .55;
    }

    50% {

        transform: scale(1.05);
        opacity: 1;
    }
}


.core-dots {

    position: absolute;

    z-index: 5;

    right: 5%;
    top: 28%;

    display: grid;

    grid-template-columns:
        repeat(5, 7px);

    gap: 11px;
}


.core-dots span {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #0877bd;

    opacity: .65;
}


.core-bottom-message {

    position: absolute;

    z-index: 10;

    left: 8%;
    bottom: 8%;

    display: flex;

    align-items: center;

    gap: 18px;
}


.core-message-icon {

    width: 60px;
    height: 60px;

    display: grid;

    place-items: center;

    border:
        3px solid
        var(--green-bright);

    border-radius: 50%;

    color: var(--green-bright);

    font-size: 1.5rem;
}


.core-bottom-message strong {

    display: block;

    font-size: .82rem;

    letter-spacing: .10em;
}


.core-bottom-message strong span {

    color: var(--green-bright);

    margin:
        0
        7px;
}


.core-bottom-message p {

    margin:
        6px
        0
        0;

    color: var(--muted);

    font-size: .82rem;
}


/* ============================================================
   SECTION 5
   CORE SERVICES
============================================================ */

.services-section {

    position: relative;

    min-height: 980px;

    padding:
        155px
        0
        240px;

    overflow: hidden;

    isolation: isolate;
}


/* ============================================================
   SERVICES BACKGROUND MACHINERY
============================================================ */

.services-section .about-machine-wrap {

    position: absolute;

    left: 50%;
    bottom: -5%;

    transform:
        translateX(-50%);

    width:
        min(
            900px,
            75vw
        );

    height: auto;

    z-index: 1;

    pointer-events: none;

    display: flex;

    justify-content: center;

    align-items: flex-end;
}


.services-section .about-machine {

    width: 100%;
    height: auto;

    display: block;

    object-fit: contain;

    object-position: center bottom;

    opacity: .20;

    filter:
        saturate(.75)
        contrast(1.05)
        brightness(.85);

    -webkit-mask-image:
        linear-gradient(
            to bottom,

            transparent 0%,

            rgba(0, 0, 0, .35) 20%,

            rgba(0, 0, 0, .85) 55%,

            #000 100%
        );

    mask-image:
        linear-gradient(
            to bottom,

            transparent 0%,

            rgba(0, 0, 0, .35) 20%,

            rgba(0, 0, 0, .85) 55%,

            #000 100%
        );

    animation:
        servicesMachineFloat
        9s
        ease-in-out
        infinite;
}


@keyframes servicesMachineFloat {

    0%,
    100% {

        transform:
            translateY(0)
            scale(1);
    }

    50% {

        transform:
            translateY(-8px)
            scale(1.01);
    }
}


/* ============================================================
   SERVICES CONTENT
============================================================ */

.services-content {

    position: relative;

    z-index: 8;

    width: 82%;

    max-width: 1100px;

    margin: 0 auto;
}


.page-heading {

    position: relative;

    z-index: 9;
}


.page-heading h1 {

    margin: 0;

    color: var(--green);

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

    line-height: 1.02;

    font-weight: 900;

    letter-spacing: -.045em;
}


.service-group {

    position: relative;

    z-index: 9;

    margin-top: 34px;
}


.service-title {

    display: flex;

    align-items: center;

    min-height: 52px;

    padding:
        6px
        26px;

    border-radius: 999px;

    background:
        rgba(76, 80, 110, .92);

    color: var(--orange);

    font-size:
        clamp(
            1.2rem,
            2vw,
            1.9rem
        );

    font-weight: 800;

    box-shadow:
        0
        10px
        24px
        rgba(0, 0, 0, .12);
}


.service-grid {

    position: relative;

    z-index: 9;

    display: grid;

    gap:
        17px
        38px;

    margin-top: 15px;

    padding:
        0
        6px;
}


.service-grid-two {

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


.service-grid-three {

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


.service-item {

    position: relative;

    z-index: 10;

    display: flex;

    align-items: flex-start;

    gap: 12px;

    color: #ffffff;

    font-size:
        clamp(
            .85rem,
            1.2vw,
            1.05rem
        );

    line-height: 1.4;

    transition:
        transform .3s ease,
        color .3s ease;
}


.service-icon {

    display: flex;

    align-items: center;
    justify-content: center;

    flex:
        0
        0
        27px;

    width: 27px;
    height: 27px;

    border-radius: 7px;

    background:
        linear-gradient(
            145deg,
            #f4f9ef,
            #61a96d
        );

    box-shadow:
        0
        5px
        12px
        rgba(0, 0, 0, .12);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}


.service-icon svg {

    width: 17px;
    height: 17px;

    fill: none;

    stroke: #2b653c;

    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;

    transition:
        transform .35s ease,
        stroke .35s ease;
}


.service-item:hover {

    color: #ffffff;

    transform:
        translateX(4px);
}


.service-item:hover .service-icon {

    transform:
        translateY(-5px)
        scale(1.10)
        rotate(-6deg);

    box-shadow:
        0
        10px
        20px
        rgba(109, 178, 63, .22);
}


.service-item:hover .service-icon svg {

    transform: scale(1.10);

    stroke: #174c2b;
}


/* ============================================================
   SERVICES ARC
============================================================ */

.services-section .about-arc {

    position: absolute;

    z-index: 6;

    left: 4%;
    bottom: -250px;

    width: 92%;
    height: 700px;

    background: #073859;

    border: none;

    border-radius:
        50%
        50%
        0
        0;

    opacity: 1;

    pointer-events: none;
}


/* ============================================================
   SERVICES GREEN SWOOSH
============================================================ */

.services-section .about-swoosh {

    position: absolute;

    z-index: 8;

    left: -55px;
    bottom: -20px;

    width: 680px;
    height: 255px;

    background: var(--green);

    clip-path:
        polygon(
            0 100%,
            14% 0,
            100% 100%,
            80% 100%,
            16% 30%,
            0 55%
        );

    animation:
        swooshSlide
        1.2s
        var(--ease)
        both;
}


/* ============================================================
   SERVICES FOOTER LOGO
============================================================ */

.services-section .about-footer-logo {

    position: absolute;

    z-index: 12;

    right: 5.5%;
    bottom: 6%;

    width: 130px;
}


.services-section .about-footer-logo img {
    width: 100%;
}


/* ============================================================
   SECTION 6
   VALUE CHAINS
   RESPONSIVE PREMIUM VALUE CHAIN
============================================================ */

.value-chain-section {

    position: relative;

    width: 100%;

    min-height: 1000px;

    padding:
        150px
        0
        180px;

    overflow: hidden;

    isolation: isolate;
}


/* ============================================================
   VALUE CONTENT
============================================================ */

.value-content {

    position: relative;

    z-index: 8;

    width: min(1100px, 92%);

    margin: 0 auto;
}


/* ============================================================
   VALUE HEADING
============================================================ */

.value-heading {

    position: relative;

    z-index: 10;

    margin-bottom: 25px;

    text-align: left;
}


/* ============================================================
   VALUE DIAGRAM
============================================================ */

.value-chain-diagram {

    position: relative;

    width: min(820px, 90vw);

    height: 670px;

    margin: 0 auto;

    overflow: visible;
}


/* ============================================================
   INNER CIRCLE
============================================================ */

.value-inner-circle {

    position: absolute;

    z-index: 1;

    left: 50%;
    top: 50%;

    width: 390px;
    height: 390px;

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

    border:
        4px solid
        rgba(111, 179, 66, .42);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(111, 179, 66, .035),
            transparent 68%
        );

    box-shadow:

        inset
        0
        0
        35px
        rgba(111, 179, 66, .05),

        0
        0
        35px
        rgba(111, 179, 66, .04);

    pointer-events: none;
}


/* ============================================================
   ROTATING RING
============================================================ */

.value-rotating-ring {

    position: absolute;

    z-index: 2;

    left: 50%;
    top: 50%;

    width: 450px;
    height: 450px;

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

    border:
        2px dashed
        rgba(114, 207, 32, .62);

    border-radius: 50%;

    background:
        transparent;

    box-shadow:

        0
        0
        25px
        rgba(114, 207, 32, .08),

        inset
        0
        0
        20px
        rgba(114, 207, 32, .04);

    pointer-events: none;

    animation:
        rotateValueRing
        20s
        linear
        infinite;
}


/* ============================================================
   ROTATING RING DOTS
============================================================ */

.value-rotating-ring span {

    position: absolute;

    width: 12px;
    height: 12px;

    border-radius: 50%;

    background:
        var(--green-bright);

    box-shadow:

        0
        0
        10px
        rgba(114, 207, 32, .80),

        0
        0
        24px
        rgba(114, 207, 32, .45);
}


/* TOP */

.value-rotating-ring span:nth-child(1) {

    left:
        calc(50% - 6px);

    top: -6px;
}


/* RIGHT */

.value-rotating-ring span:nth-child(2) {

    right: -6px;

    top:
        calc(50% - 6px);
}


/* BOTTOM */

.value-rotating-ring span:nth-child(3) {

    left:
        calc(50% - 6px);

    bottom: -6px;
}


/* LEFT */

.value-rotating-ring span:nth-child(4) {

    left: -6px;

    top:
        calc(50% - 6px);
}


/* ============================================================
   ROTATION
============================================================ */

@keyframes rotateValueRing {

    from {

        transform:
            translate(-50%, -50%)
            rotate(0deg);
    }

    to {

        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }
}


/* ============================================================
   ORBIT ARROW
============================================================ */

.orbit-arrow {

    position: absolute;

    z-index: 20;

    width: 48px;
    height: 48px;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        1px solid
        rgba(114, 207, 32, .50);

    border-radius: 50%;

    background:
        rgba(6, 43, 77, .90);

    color:
        var(--green-bright);

    font-size: 1.45rem;

    line-height: 1;

    box-shadow:

        0
        0
        16px
        rgba(114, 207, 32, .18),

        inset
        0
        0
        10px
        rgba(114, 207, 32, .05);

    backdrop-filter:
        blur(8px);

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

    pointer-events: none;

    transition:

        background .3s ease,

        color .3s ease,

        border-color .3s ease,

        box-shadow .3s ease;
}


/* ACTIVE ARROW */

.orbit-arrow.active {

    background:
        var(--green-bright);

    color:
        #ffffff;

    border-color:
        #ffffff;

    box-shadow:

        0
        0
        20px
        rgba(255, 255, 255, .45),

        0
        0
        42px
        rgba(114, 207, 32, .40);
}


/* ============================================================
   VALUE NODES
============================================================ */

.value-node {

    position: absolute;

    z-index: 12;

    width: 180px;

    color:
        rgba(130, 201, 77, .90);

    text-align: center;

    opacity: .70;

    transform:
        translateY(0)
        scale(.96);

    transform-origin:
        center;

    transition:

        color .35s ease,

        opacity .35s ease,

        transform .35s ease,

        filter .35s ease;
}


/* ============================================================
   NODE HEADINGS
============================================================ */

.value-node h3 {

    margin:
        7px
        0
        5px;

    color:
        inherit;

    font-size:
        .9rem;

    line-height:
        1.15;

    font-weight:
        800;

    letter-spacing:
        -.01em;

    transition:
        color .35s ease;
}


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

.value-node p {

    margin:
        4px
        0
        0;

    color:
        inherit;

    font-size:
        .61rem;

    line-height:
        1.4;

    font-weight:
        600;

    transition:
        color .35s ease;
}


/* ============================================================
   NODE LIST
============================================================ */

.value-node ul {

    margin:
        7px
        0
        0;

    padding:
        0;

    list-style:
        none;
}


.value-node li {

    margin-bottom:
        4px;

    color:
        inherit;

    font-size:
        .58rem;

    line-height:
        1.3;

    transition:
        color .35s ease;
}


/* ============================================================
   VALUE ICON
============================================================ */

.value-icon {

    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 74px;
    height: 74px;

    margin:
        0
        auto
        8px;

    padding:
        12px;

    border:
        1.5px solid
        rgba(114, 207, 32, .30);

    border-radius:
        20px;

    background:
        rgba(255, 255, 255, .035);

    box-shadow:
        0
        0
        15px
        rgba(114, 207, 32, .04);

    backdrop-filter:
        blur(7px);

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

    transition:

        transform .35s ease,

        background .35s ease,

        border-color .35s ease,

        box-shadow .35s ease;
}


/* ============================================================
   SVG ICON
============================================================ */

.value-icon svg {

    width:
        100%;

    height:
        100%;

    fill:
        none;

    stroke:
        var(--green-bright);

    stroke-width:
        2.3;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    vector-effect:
        non-scaling-stroke;

    transition:

        transform .35s ease,

        stroke .35s ease,

        fill .35s ease;
}


/* ============================================================
   FORCE COMMON SVG SHAPES TO REMAIN VISIBLE
============================================================ */

.value-icon svg path,
.value-icon svg circle,
.value-icon svg rect,
.value-icon svg line,
.value-icon svg polyline,
.value-icon svg polygon {

    fill:
        none;

    stroke:
        var(--green-bright);

    stroke-width:
        2.3;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


/* ============================================================
   HOVER NODE
============================================================ */

.value-node:hover {

    opacity:
        1;

    transform:
        translateY(-5px)
        scale(1.02);

    color:
        #ffffff;
}


.value-node:hover .value-icon {

    transform:
        scale(1.10)
        translateY(-4px);

    background:
        rgba(114, 207, 32, .10);

    border-color:
        rgba(114, 207, 32, .65);

    box-shadow:

        0
        0
        20px
        rgba(114, 207, 32, .25),

        0
        0
        40px
        rgba(114, 207, 32, .10);
}


.value-node:hover .value-icon svg {

    transform:
        scale(1.08);

    stroke:
        #ffffff;
}


/* ============================================================
   ACTIVE NODE
============================================================ */

.value-node.active {

    z-index:
        18;

    opacity:
        1;

    color:
        #ffffff;

    transform:
        translateY(-4px)
        scale(1.06);

    filter:
        drop-shadow(
            0
            0
            12px
            rgba(255, 255, 255, .15)
        );
}


/* ACTIVE ICON */

.value-node.active .value-icon {

    background:
        var(--green-bright);

    border-color:
        #ffffff;

    transform:
        scale(1.08);

    box-shadow:

        0
        0
        20px
        rgba(255, 255, 255, .40),

        0
        0
        45px
        rgba(114, 207, 32, .38);
}


.value-node.active .value-icon svg {

    stroke:
        #ffffff;

    filter:
        drop-shadow(
            0
            0
            5px
            rgba(255, 255, 255, .30)
        );

        background-color: white;
}


/* ACTIVE TEXT */

.value-node.active h3,
.value-node.active p,
.value-node.active li {

    color:
        #ffffff;
}


/* ============================================================
   VALUE NODE LOCATIONS — DESKTOP
============================================================ */

.value-node[data-node="farmers"] {

    left:
        2%;

    top:
        42%;
}


.value-node[data-node="fsb"] {

    left:
        calc(50% - 90px);

    top:
        1%;
}


.value-node[data-node="banking"] {

    right:
        0;

    top:
        34%;

    text-align:
        center;
}


.value-node[data-node="end-users"] {

    left:
        calc(50% - 90px);

    bottom:
        0;
}


.value-node[data-node="inputs"] {

    left:
        7%;

    bottom:
        16%;
}


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

.value-description {

    position:
        relative;

    z-index:
        12;

    width:
        min(620px, 90%);

    margin:
        15px auto 0;

    text-align:
        center;
}


.value-description p {

    margin:
        0;

    color:
        #ffffff;

    font-size:
        clamp(
            1rem,
            1.8vw,
            1.4rem
        );

    line-height:
        1.55;
}


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

@media (max-width: 1100px) {

    .value-chain-diagram {

        width:
            min(
                90vw,
                760px
            );
    }


    .value-inner-circle {

        width:
            360px;

        height:
            360px;
    }


    .value-rotating-ring {

        width:
            420px;

        height:
            420px;
    }
}


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

@media (max-width: 820px) {

    .value-chain-section {

        min-height:
            1100px;

        padding:
            120px
            0
            150px;
    }


    .value-content {

        width:
            92%;
    }


    .value-heading {

        margin-bottom:
            10px;
    }


    .value-heading h1 {

        font-size:
            2.55rem;
    }


    .value-chain-diagram {

        width:
            min(
                100%,
                560px
            );

        height:
            auto;

        aspect-ratio:
            1 / 1;

        margin:
            30px auto;
    }


    .value-inner-circle {

        width:
            58%;

        height:
            58%;

        border-width:
            3px;
    }


    .value-rotating-ring {

        width:
            70%;

        height:
            70%;

        border-width:
            2px;
    }


    .value-node {

        width:
            140px;
    }


    .value-icon {

        width:
            60px;

        height:
            60px;

        padding:
            9px;
    }


    .value-node h3 {

        font-size:
            .72rem;
    }


    .value-node p,
    .value-node li {

        font-size:
            .51rem;
    }


    .value-node[data-node="farmers"] {

        left:
            -2%;

        top:
            41%;
    }


    .value-node[data-node="fsb"] {

        left:
            calc(50% - 70px);

        top:
            2%;
    }


    .value-node[data-node="banking"] {

        right:
            -3%;

        top:
            34%;
    }


    .value-node[data-node="end-users"] {

        left:
            calc(50% - 70px);

        bottom:
            0;
    }


    .value-node[data-node="inputs"] {

        left:
            2%;

        bottom:
            17%;
    }


    .orbit-arrow {

        width:
            44px;

        height:
            44px;

        font-size:
            1.35rem;
    }


    .value-description {

        width:
            90%;
    }
}


/* ============================================================
   SMALL PHONES
============================================================ */

@media (max-width: 520px) {

    .value-chain-section {

        min-height:
            1060px;

        padding:
            105px
            0
            130px;
    }


    .value-content {

        width:
            94%;
    }


    .value-heading h1 {

        font-size:
            2.15rem;
    }


    .value-chain-diagram {

        width:
            min(
                100%,
                360px
            );

        height:
            auto;

        aspect-ratio:
            1 / 1;

        margin:
            25px auto;
    }


    .value-inner-circle {

        width:
            58%;

        height:
            58%;

        border-width:
            3px;
    }


    .value-rotating-ring {

        width:
            74%;

        height:
            74%;

        border-width:
            1.5px;
    }


    .value-rotating-ring span {

        width:
            9px;

        height:
            9px;
    }


    .value-rotating-ring span:nth-child(1) {

        left:
            calc(50% - 4.5px);

        top:
            -4.5px;
    }


    .value-rotating-ring span:nth-child(2) {

        right:
            -4.5px;

        top:
            calc(50% - 4.5px);
    }


    .value-rotating-ring span:nth-child(3) {

        left:
            calc(50% - 4.5px);

        bottom:
            -4.5px;
    }


    .value-rotating-ring span:nth-child(4) {

        left:
            -4.5px;

        top:
            calc(50% - 4.5px);
    }


    .value-node {

        width:
            108px;
    }


    .value-icon {

        width:
            50px;

        height:
            50px;

        padding:
            9px;

        border-radius:
            15px;
    }


    .value-icon svg {

        stroke-width:
            2.1;
    }


    .value-node h3 {

        font-size:
            .62rem;
    }


    .value-node p,
    .value-node li {

        font-size:
            .44rem;

        line-height:
            1.28;
    }


    .value-node[data-node="farmers"] {

        left:
            -3%;

        top:
            28%;
    }


    .value-node[data-node="fsb"] {

        left:
            calc(50% - 54px);

        top:
            -2%;
    }


    .value-node[data-node="banking"] {

        right:
            -2%;

        top:
            27%;

        width:
            116px;
    }


    .value-node[data-node="end-users"] {

        left:
            calc(50% - 54px);

        bottom:
            -3%;
    }


    .value-node[data-node="inputs"] {

        left:
            1%;

        bottom:
            20%;
    }


    .orbit-arrow {

        width:
            38px;

        height:
            38px;

        font-size:
            1.2rem;
    }


    .value-description {

        width:
            94%;
    }


    .value-description p {

        font-size:
            .9rem;
    }
}


/* ============================================================
   VERY SMALL PHONES
============================================================ */

@media (max-width: 360px) {

    .value-chain-diagram {

        max-width:
            330px;
    }


    .value-node {

        width:
            96px;
    }


    .value-icon {

        width:
            45px;

        height:
            45px;

        padding:
            8px;
    }


    .value-node h3 {

        font-size:
            .58rem;
    }


    .value-node p,
    .value-node li {

        font-size:
            .40rem;
    }


    .value-node[data-node="fsb"] {

        left:
            calc(50% - 48px);
    }


    .value-node[data-node="end-users"] {

        left:
            calc(50% - 48px);
    }
}

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

.reveal {

    opacity: 0;

    transform:
        translateY(35px);

    transition:
        opacity .85s ease,
        transform .85s var(--ease);
}


.reveal.visible {

    opacity: 1;

    transform:
        translateY(0);
}


/* ============================================================
   SHARED ANIMATION
============================================================ */

@keyframes swooshSlide {

    from {

        opacity: 0;

        transform:
            translateX(-80px);
    }

    to {

        opacity: 1;

        transform:
            translateX(0);
    }
}


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

.site-footer {

    position: relative;

    z-index: 50;

    padding:
        30px
        6%;

    background: #031a2c;
}


.footer-container {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;
}


.footer-brand {

    display: flex;

    align-items: center;

    gap: 15px;
}


.footer-brand img {
    width: 72px;
}


.footer-brand strong {

    display: block;

    color: #ffffff;

    font-size: .8rem;
}


.footer-brand p {

    margin:
        5px
        0
        0;

    color: #9eb0bf;

    font-size: .72rem;
}


.back-top {

    color: var(--green-light);

    font-size: .82rem;

    font-weight: 800;
}


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

@media (max-width: 1100px) {

    .site-nav {
        gap: 12px;
    }

    .nav-link {
        font-size: 11px;
    }

    .mission-content {

        width:
            min(
                560px,
                54vw
            );
    }

    .core-content {
        width: 52vw;
    }

    .core-map-wrap {
        width: 46vw;
    }

    .service-grid-three {

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

    .value-chain-diagram {
        width: 90vw;
    }
}


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

@media (max-width: 820px) {

    .site-header {

        padding:
            10px
            16px;
    }


    .navbar-container {
        position: relative;
    }


    .navbar-toggle {

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;
    }


    .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(3, 29, 52, .98);

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

        opacity: 0;

        visibility: hidden;

        transform:
            translateY(-10px);

        transition:
            opacity .3s ease,
            visibility .3s ease,
            transform .3s ease;
    }


    .site-nav.open {

        opacity: 1;

        visibility: visible;

        transform:
            translateY(0);
    }


    .nav-link {

        width: 100%;

        padding:
            13px
            8px;

        font-size: 14px;

        border-bottom:
            1px solid
            rgba(255, 255, 255, .08);
    }


    /* ========================================================
       SECTION 1
    ======================================================== */

    .about-home-section {

        min-height: 920px;

        padding:
            110px
            5%
            70px;
    }


    .about-home-title h1 {

        font-size:
            clamp(
                1.85rem,
                7vw,
                3.4rem
            );
    }


    .about-home-logo {

        width: 125px;

        margin:
            25px
            0;
    }


    .about-home-map {
        width: 94vw;
    }


    .about-home-tagline h2 {
        font-size: 1.25rem;
    }


    /* ========================================================
       SECTIONS 2 & 4
    ======================================================== */

    .mission-section {

        min-height: 920px;

        padding:
            125px
            7%
            230px;
    }


    .mission-content {

        width: 100%;

        max-width: 680px;
    }


    .mission-content h1 {

        font-size:
            clamp(
                2.3rem,
                8vw,
                4rem
            );

        margin-bottom: 25px;
    }


    .mission-content p {

        font-size:
            clamp(
                1.05rem,
                3.3vw,
                1.55rem
            );

        line-height: 1.55;
    }


    .mission-image-wrap {

        top: auto;

        right: -18%;

        bottom: 45px;

        width: 112%;

        height: 49%;
    }


    .mission-machine {

        object-position:
            right bottom;

        opacity: .27;

        -webkit-mask-image:
            linear-gradient(
                to bottom,

                transparent 0%,

                rgba(0, 0, 0, .12) 8%,

                #000 25%,

                #000 73%,

                rgba(0, 0, 0, .55) 90%,

                transparent 100%
            );

        mask-image:
            linear-gradient(
                to bottom,

                transparent 0%,

                rgba(0, 0, 0, .12) 8%,

                #000 25%,

                #000 73%,

                rgba(0, 0, 0, .55) 90%,

                transparent 100%
            );
    }


    .mission-arc {

        left: -4%;

        bottom: -23%;

        width: 108%;

        height: 45%;
    }


    .mission-swoosh {

        left: -8%;

        bottom: -2%;

        width: 68%;

        height: 12%;
    }


    .mission-footer-logo,
    .about-footer-logo {

        right: 6%;

        bottom: 5%;

        width: 100px;
    }


    .desktop-break {
        display: none;
    }


    /* ========================================================
       SECTION 3
    ======================================================== */

    .core-focus-section {

        min-height: 1100px;

        padding:
            120px
            6%
            210px;
    }


    .core-content {

        width: 100%;

        margin: 0;
    }


    .core-content h1 {
        font-size: 2.8rem;
    }


    .core-content p {

        font-size: 1rem;

        line-height: 1.68;
    }


    .core-map-wrap {

        top: auto;

        right: 5%;

        bottom: 27%;

        width: 65vw;

        max-width: 430px;
    }


    .core-dots {
        display: none;
    }


    .core-bottom-message {

        left: 6%;

        bottom: 70px;
    }


    /* ========================================================
       SECTION 5
    ======================================================== */

    .services-section {

        min-height: 1120px;

        padding:
            120px
            0
            220px;
    }


    .services-content {
        width: 88%;
    }


    .services-section .about-machine-wrap {

        width: 105vw;

        max-width: 850px;

        left: 50%;

        bottom: 3%;

        z-index: 1;
    }


    .services-section .about-machine {

        opacity: .16;
    }


    .service-grid-two,
    .service-grid-three {

        grid-template-columns: 1fr;
    }


    .service-title {
        font-size: 1.08rem;
    }


    .service-item {
        font-size: .92rem;
    }


    .services-section .about-arc {

        left: -4%;

        bottom: -23%;

        width: 108%;

        height: 45%;
    }


    .services-section .about-swoosh {

        left: -8%;

        bottom: -2%;

        width: 68%;

        height: 12%;
    }


    .services-section .about-footer-logo {

        right: 6%;

        bottom: 5%;

        width: 100px;
    }


    /* ========================================================
       SECTION 6
    ======================================================== */

    .value-chain-section {

        min-height: 1150px;

        padding:
            120px
            0
            150px;
    }


    .value-content {
        width: 92%;
    }


    .value-heading h1 {
        font-size: 2.55rem;
    }


    .value-chain-diagram {

        width: 100%;

        height: 670px;
    }


    .value-inner-circle {

        width: 330px;
        height: 330px;
    }


    .value-rotating-ring {

        width: 380px;
        height: 380px;
    }


    .value-node {
        width: 140px;
    }


    .value-icon {

        width: 60px;
        height: 60px;
    }


    .value-node h3 {
        font-size: .72rem;
    }


    .value-node p,
    .value-node li {
        font-size: .51rem;
    }


    .value-node[data-node="farmers"] {

        left: -2%;
        top: 41%;
    }


    .value-node[data-node="fsb"] {

        left:
            calc(50% - 70px);

        top: 2%;
    }


    .value-node[data-node="banking"] {

        right: -3%;
        top: 34%;
    }


    .value-node[data-node="end-users"] {

        left:
            calc(50% - 70px);

        bottom: 0;
    }


    .value-node[data-node="inputs"] {

        left: 2%;
        bottom: 17%;
    }


    .value-description {
        width: 90%;
    }
}


/* ============================================================
   SMALL PHONES
============================================================ */

@media (max-width: 520px) {

    .navbar-logo {
        width: 70px;
    }


    .about-home-section {
        min-height: 840px;
    }


    .about-home-title h1 {
        font-size: 1.85rem;
    }


    .about-home-logo {
        width: 105px;
    }


    .about-home-tagline h2 {
        font-size: 1rem;
    }


    /* ========================================================
       MISSION
    ======================================================== */

    .mission-section {

        min-height: 900px;

        padding:
            105px
            7%
            205px;
    }


    .mission-content h1 {
        font-size: 2.1rem;
    }


    .mission-content p {
        font-size: 1rem;
    }


    .mission-image-wrap {

        right: -29%;

        bottom: 40px;

        width: 136%;

        height: 40%;
    }


    .mission-machine {
        opacity: .23;
    }


    .mission-arc {

        bottom: -21%;

        width: 114%;
    }


    .mission-swoosh {

        left: -12%;

        width: 82%;

        height: 10%;
    }


    .mission-footer-logo,
    .about-footer-logo {
        width: 82px;
    }


    /* ========================================================
       CORE FOCUS
    ======================================================== */

    .core-focus-section {
        min-height: 1050px;
    }


    .core-content h1 {
        font-size: 2.3rem;
    }


    .core-content p {
        font-size: .94rem;
    }


    .core-map-wrap {

        bottom: 25%;

        width: 72vw;
    }


    .core-bottom-message {
        display: none;
    }


    /* ========================================================
       SERVICES
    ======================================================== */

    .services-section {

        min-height: 1050px;

        padding-bottom: 220px;
    }


    .services-content {
        width: 86%;
    }


    .page-heading h1 {
        font-size: 2.3rem;
    }


    .service-title {

        min-height: 44px;

        padding:
            6px
            18px;

        font-size: .98rem;
    }


    .service-item {
        font-size: .86rem;
    }


    .services-section .about-machine-wrap {

        width: 125vw;

        bottom: 2%;

        left: 50%;
    }


    .services-section .about-machine {
        opacity: .13;
    }


    /* ========================================================
       VALUE CHAIN
    ======================================================== */

    .value-chain-section {
        min-height: 1110px;
    }


    .value-heading h1 {
        font-size: 2.15rem;
    }


    .value-chain-diagram {
        height: 620px;
    }


    .value-inner-circle {

        width: 255px;
        height: 255px;

        border-width: 3px;
    }


    .value-rotating-ring {

        width: 295px;
        height: 295px;
    }


    .value-node {
        width: 108px;
    }


    .value-icon {

        width: 50px;
        height: 50px;

        padding: 9px;
    }


    .value-node h3 {
        font-size: .62rem;
    }


    .value-node p,
    .value-node li {
        font-size: .44rem;
    }


    .value-node[data-node="farmers"] {

        left: -2%;
        top: 41%;
    }


    .value-node[data-node="fsb"] {

        left:
            calc(50% - 54px);

        top: 5%;
    }


    .value-node[data-node="banking"] {

        right: -4%;

        top: 34%;

        width: 116px;
    }


    .value-node[data-node="end-users"] {

        left:
            calc(50% - 54px);

        bottom: 3%;
    }


    .value-node[data-node="inputs"] {

        left: -1%;

        bottom: 18%;
    }


    .value-description {
        width: 94%;
    }


    .value-description p {
        font-size: .9rem;
    }


    .orbit-arrow {

        width: 34px;
        height: 34px;

        font-size: 1.55rem;
    }


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

    .footer-container {

        flex-direction: column;

        align-items: flex-start;
    }
}

/* =========================================================
   SECTION 5 — CORE SERVICES IMAGE
========================================================= */

.services-section {
    position: relative;
    overflow: hidden;
}


/* IMAGE CONTAINER */

.services-image-wrap {
    position: absolute;

    left: 50%;
    top: 52%;

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

    /* ENLARGED IMAGE */
    width: min(85vw, 1150px);

    display: flex;
    justify-content: center;
    align-items: center;

    z-index: 1;

    pointer-events: none;
}


/* MACHINERY IMAGE */

.services-machine {
    display: block;

    width: 100%;
    max-width: 1150px;

    height: auto;

    object-fit: contain;

    margin: 0 auto;

    /* REDUCED OPACITY */
    opacity: .22;

    /* Softer/blended appearance */
    filter:
        saturate(.65)
        contrast(.95)
        brightness(.90);

    mix-blend-mode: screen;

    transform: scale(1.08);
}


@media (max-width: 900px) {

    .services-image-wrap {
        width: 100vw;
    }

    .services-machine {
        max-width: 950px;
        /* opacity: .11; */
        transform: scale(1.05);
    }
}


@media (max-width: 600px) {

    .services-image-wrap {
        width: 120vw;
    }

    .services-machine {
        max-width: 750px;
        opacity: .29;
        transform: scale(1.03);
    }
}