/* =========================================================
   VYNERA WEBSITE
========================================================= */


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

:root {

    --green: #1D4533;
    --green-dark: #102C21;

    --cream: #F7EAE0;

    --peach: #F9D2BA;

    --brown: #5E3122;
    --brown-dark: #422115;

    --white: #FFFFFF;

    --background: #FCFAF8;

    --text: #20231F;

    --muted: #6D706B;

    --border:
        rgba(29, 69, 51, 0.12);

    --shadow:
        0 30px 80px rgba(29, 69, 51, 0.11);

    --container:
        1200px;

}


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

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    font-family:
        "DM Sans",
        sans-serif;

    background:
        var(--background);

    color:
        var(--text);

    line-height:
        1.65;

    overflow-x:
        hidden;

}


h1,
h2,
h3,
.logo-name {

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

}


a {

    text-decoration:
        none;

    color:
        inherit;

}


button,
input,
select,
textarea {

    font:
        inherit;

}


button {

    cursor:
        pointer;

}


img {

    width:
        100%;

    display:
        block;

}


.container {

    width:
        min(
            calc(100% - 48px),
            var(--container)
        );

    margin:
        0 auto;

}


.section {

    padding:
        115px 0;

}


/* =========================================================
   HEADER
========================================================= */

.header {

    width:
        100%;

    position:
        fixed;

    top:
        0;

    left:
        0;

    z-index:
        1000;

    padding:
        18px 0;

    transition:
        0.3s ease;

}


.header.scrolled {

    padding:
        10px 0;

    background:
        rgba(
            252,
            250,
            248,
            0.88
        );

    backdrop-filter:
        blur(22px);

    border-bottom:
        1px solid var(--border);

}


.nav-container {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

}


/* Logo */

.logo {

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    flex-shrink:
        0;

}


.logo-icon {

    width:
        42px;

    height:
        42px;

    border-radius:
        12px;

    display:
        grid;

    place-items:
        center;

    background:
        var(--green);

    color:
        var(--cream);

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

    font-weight:
        800;

    font-size:
        18px;

}


.logo-name {

    font-weight:
        800;

    font-size:
        19px;

    color:
        var(--green-dark);

}


/* Navigation */

.nav-menu {

    display:
        flex;

    align-items:
        center;

    gap:
        3px;

}


.nav-link {

    border:
        0;

    background:
        transparent;

    padding:
        11px 14px;

    border-radius:
        10px;

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    color:
        var(--text);

    font-size:
        14px;

    font-weight:
        600;

    transition:
        0.2s;

}


.nav-link:hover {

    background:
        var(--cream);

    color:
        var(--green);

}


.dropdown-button i {

    font-size:
        9px;

    transition:
        transform 0.3s;

}


/* CTA */

.nav-cta {

    padding:
        13px 20px;

    border-radius:
        11px;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    background:
        var(--green);

    color:
        white;

    font-size:
        13px;

    font-weight:
        700;

    transition:
        0.25s;

    flex-shrink:
        0;

}


.nav-cta:hover {

    background:
        var(--brown);

    transform:
        translateY(-2px);

}


/* Mobile */

.mobile-menu-button {

    display:
        none;

    width:
        44px;

    height:
        44px;

    border:
        0;

    border-radius:
        11px;

    background:
        var(--green);

    color:
        white;

    font-size:
        18px;

}


/* =========================================================
   DROPDOWN
========================================================= */

.nav-dropdown {
    position: relative;
}


/*
   Invisible hover bridge between
   Services button and dropdown.
   This prevents the menu from closing
   while moving the mouse downward.
*/
.nav-dropdown::after {
    content: "";

    position: absolute;

    top: 100%;
    left: -20px;

    width: calc(100% + 40px);
    height: 26px;

    background: transparent;

    pointer-events: auto;
}


/* Dropdown box */

.dropdown-menu {
    position: absolute;

    top: calc(100% + 14px);
    left: 50%;

    width: 680px;

    transform:
        translateX(-50%)
        translateY(8px);

    display: grid;

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

    gap: 14px;

    padding: 23px;

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

    backdrop-filter:
        blur(25px);

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

    border:
        1px solid var(--border);

    border-radius:
        21px;

    box-shadow:
        0 30px 80px
        rgba(
            29,
            69,
            51,
            0.14
        );

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 0.22s ease,
        transform 0.22s ease,
        visibility 0.22s ease;

    z-index: 1001;
}


/*
   Keep dropdown open while:

   1. Services button is hovered
   2. Mouse is moving through bridge
   3. Dropdown itself is hovered
   4. Dropdown contains keyboard focus
*/

.nav-dropdown:hover .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform:
        translateX(-50%)
        translateY(0);
}


/* Rotate arrow */

.nav-dropdown:hover
.dropdown-button i,
.nav-dropdown:focus-within
.dropdown-button i {
    transform: rotate(180deg);
}


/* Section heading */

.dropdown-title {
    display: block;

    margin:
        7px
        10px
        12px;

    color:
        var(--brown);

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        1.5px;

    text-transform:
        uppercase;
}


/* Dropdown item */

.dropdown-section a {
    display: flex;

    align-items: center;

    gap: 11px;

    padding:
        11px 10px;

    border-radius:
        11px;

    color:
        var(--muted);

    font-size:
        13px;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}


/* Dropdown item hover */

.dropdown-section a:hover {
    background:
        var(--cream);

    color:
        var(--green);

    transform:
        translateX(3px);
}


/* Icons */

.dropdown-icon {
    width:
        34px;

    height:
        34px;

    flex-shrink:
        0;

    display:
        grid;

    place-items:
        center;

    border-radius:
        9px;

    background:
        rgba(
            29,
            69,
            51,
            0.07
        );

    color:
        var(--green);

    transition:
        0.2s ease;
}


/* Icon effect */

.dropdown-section a:hover
.dropdown-icon {
    background:
        var(--green);

    color:
        white;
}


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

.hero {

    min-height:
        100vh;

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    padding:
        145px 0 90px;

    overflow:
        hidden;

    background:

        radial-gradient(
            circle at 85% 25%,
            rgba(
                249,
                210,
                186,
                0.45
            ),
            transparent 28%
        ),

        radial-gradient(
            circle at 5% 75%,
            rgba(
                29,
                69,
                51,
                0.06
            ),
            transparent 30%
        ),

        linear-gradient(
            135deg,
            #FCFAF8 0%,
            #F9F3EE 100%
        );

}


.hero-container {

    position:
        relative;

    z-index:
        5;

    display:
        grid;

    grid-template-columns:
        1.05fr
        0.95fr;

    align-items:
        center;

    gap:
        60px;

}


/* Hero content */

.eyebrow {

    margin-bottom:
        24px;

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    color:
        var(--green);

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        1.4px;

}


.eyebrow-line {

    width:
        27px;

    height:
        2px;

    background:
        var(--brown);

}


.hero h1 {

    max-width:
        720px;

    margin-bottom:
        27px;

    color:
        var(--green-dark);

    font-size:
        clamp(
            47px,
            5.3vw,
            76px
        );

    line-height:
        1.04;

    letter-spacing:
        -3.5px;

}


.hero h1 span {

    display:
        block;

    color:
        var(--brown);

}


.hero-description {

    max-width:
        625px;

    margin-bottom:
        34px;

    color:
        var(--muted);

    font-size:
        17px;

    line-height:
        1.8;

}


/* Buttons */

.hero-buttons {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        12px;

}


.button {

    border:
        0;

    padding:
        15px 24px;

    border-radius:
        12px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        11px;

    font-size:
        13px;

    font-weight:
        700;

    transition:
        0.25s;

}


.button-primary {

    background:
        var(--green);

    color:
        white;

    box-shadow:
        0 12px 35px
        rgba(
            29,
            69,
            51,
            0.18
        );

}


.button-primary:hover {

    background:
        var(--brown);

    transform:
        translateY(-3px);

}


.button-outline {

    border:
        1px solid
        rgba(
            29,
            69,
            51,
            0.22
        );

    color:
        var(--green);

}


.button-outline:hover {

    background:
        var(--cream);

}


/* Hero features */

.hero-features {

    margin-top:
        48px;

    display:
        flex;

    gap:
        25px;

}


.hero-features > div {

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

}


.hero-feature-icon {

    width:
        39px;

    height:
        39px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        10px;

    background:
        rgba(
            29,
            69,
            51,
            0.07
        );

    color:
        var(--green);

    font-size:
        13px;

}


.hero-features div div {

    display:
        flex;

    flex-direction:
        column;

}


.hero-features strong {

    color:
        var(--green);

    font-size:
        12px;

}


.hero-features small {

    color:
        var(--muted);

    font-size:
        10px;

}


/* =========================================================
   HERO 3D AREA
========================================================= */

.hero-visual {

    min-height:
        570px;

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    perspective:
        1200px;

    isolation:
        isolate;

}


/* Three.js */

#hero3d {

    position:
        absolute;

    width:
        680px;

    height:
        680px;

    top:
        50%;

    left:
        50%;

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

    pointer-events:
        none;

    z-index:
        -4;

}


/* Grid */

.hero-visual::before {

    content:
        "";

    position:
        absolute;

    width:
        520px;

    height:
        420px;

    left:
        50%;

    bottom:
        10px;

    transform:
        translateX(-50%)
        perspective(750px)
        rotateX(67deg);

    background-image:

        linear-gradient(
            rgba(
                29,
                69,
                51,
                0.06
            )
            1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(
                29,
                69,
                51,
                0.06
            )
            1px,
            transparent 1px
        );

    background-size:
        38px 38px;

    -webkit-mask-image:
        radial-gradient(
            circle,
            black 0%,
            transparent 70%
        );

    mask-image:
        radial-gradient(
            circle,
            black 0%,
            transparent 70%
        );

    pointer-events:
        none;

    z-index:
        -3;

}


/* Tech card */

.tech-card {

    width:
        410px;

    position:
        relative;

    z-index:
        5;

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

    border-radius:
        27px;

    overflow:
        hidden;

    background:
        linear-gradient(
            145deg,
            rgba(
                29,
                69,
                51,
                0.96
            ),
            rgba(
                16,
                44,
                33,
                0.97
            )
        );

    box-shadow:
        0 45px 100px
        rgba(
            29,
            69,
            51,
            0.28
        );

    transform:
        perspective(1000px)
        rotateX(3deg)
        rotateY(-5deg)
        rotateZ(1deg);

    transition:
        transform 0.2s ease;

}


.tech-card::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            125deg,
            rgba(
                255,
                255,
                255,
                0.14
            ),
            transparent 25%,
            transparent 70%,
            rgba(
                255,
                255,
                255,
                0.04
            )
        );

    pointer-events:
        none;

}


.tech-card-header {

    padding:
        19px 21px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

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

}


.tech-brand {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

}


.tech-mini-logo {

    width:
        34px;

    height:
        34px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        9px;

    background:
        var(--cream);

    color:
        var(--green);

    font-weight:
        800;

}


.tech-brand div:last-child {

    display:
        flex;

    flex-direction:
        column;

}


.tech-brand span {

    color:
        white;

    font-size:
        12px;

    font-weight:
        700;

}


.tech-brand small {

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

    font-size:
        9px;

}


.status-pill {

    padding:
        7px 9px;

    display:
        flex;

    align-items:
        center;

    gap:
        6px;

    border-radius:
        20px;

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

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

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        0.6px;

}


.status-pill span {

    width:
        6px;

    height:
        6px;

    border-radius:
        50%;

    background:
        #9AE6B4;

    box-shadow:
        0 0 12px #9AE6B4;

}


.tech-card-body {

    padding:
        35px;

}


.tech-small-title {

    color:
        var(--peach);

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        1.5px;

}


.tech-card h3 {

    max-width:
        300px;

    margin:
        10px 0 26px;

    color:
        white;

    font-size:
        30px;

    line-height:
        1.17;

}


.tech-services {

    display:
        flex;

    flex-direction:
        column;

    gap:
        11px;

}


.tech-service {

    display:
        grid;

    grid-template-columns:
        auto
        1fr
        auto;

    align-items:
        center;

    gap:
        12px;

    padding:
        13px;

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

    border-radius:
        12px;

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

    color:
        white;

}


.tech-service-icon {

    width:
        36px;

    height:
        36px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        9px;

    background:
        var(--cream);

    color:
        var(--green);

    font-size:
        13px;

}


.tech-service-icon.peach {

    background:
        var(--peach);

    color:
        var(--brown);

}


.tech-service-icon.brown {

    background:
        var(--brown);

    color:
        var(--cream);

}


.tech-service div:nth-child(2) {

    display:
        flex;

    flex-direction:
        column;

}


.tech-service strong {

    font-size:
        11px;

}


.tech-service small {

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

    font-size:
        9px;

}


.tech-service >
i:last-child {

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

    font-size:
        9px;

}


/* Floating badges */

.floating-badge {

    position:
        absolute;

    z-index:
        10;

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    padding:
        13px 17px;

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

    border-radius:
        14px;

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

    backdrop-filter:
        blur(18px);

    box-shadow:
        0 20px 50px
        rgba(
            29,
            69,
            51,
            0.14
        );

    animation:
        floatingBadge
        5s
        ease-in-out
        infinite;

}


.floating-badge-one {

    left:
        -5px;

    bottom:
        80px;

}


.floating-badge-two {

    right:
        -8px;

    top:
        80px;

    animation-delay:
        -2.5s;

}


.floating-badge-icon {

    width:
        37px;

    height:
        37px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        10px;

    background:
        var(--green);

    color:
        white;

    font-size:
        12px;

}


.floating-badge div:last-child {

    display:
        flex;

    flex-direction:
        column;

}


.floating-badge small {

    color:
        var(--muted);

    font-size:
        7px;

    font-weight:
        700;

    letter-spacing:
        1px;

}


.floating-badge strong {

    color:
        var(--green);

    font-size:
        10px;

}


@keyframes floatingBadge {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-12px);

    }

}


/* Orbits */

.orbit {

    position:
        absolute;

    border:
        1px solid
        rgba(
            29,
            69,
            51,
            0.09
        );

    border-radius:
        50%;

    pointer-events:
        none;

}


.orbit-one {

    width:
        530px;

    height:
        230px;

    transform:
        rotate(-19deg);

}


.orbit-two {

    width:
        480px;

    height:
        300px;

    transform:
        rotate(28deg);

}


/* Future dots */

.future-dot {

    position:
        absolute;

    width:
        8px;

    height:
        8px;

    border-radius:
        50%;

    background:
        var(--brown);

    box-shadow:
        0 0 20px
        rgba(
            94,
            49,
            34,
            0.4
        );

}


.future-dot-one {

    top:
        72px;

    left:
        65px;

}


.future-dot-two {

    bottom:
        80px;

    right:
        50px;

    background:
        var(--green);

}


.future-dot-three {

    top:
        180px;

    right:
        5px;

    background:
        var(--peach);

}


/* Background glow */

.hero-glow {

    position:
        absolute;

    border-radius:
        50%;

    filter:
        blur(5px);

    pointer-events:
        none;

}


.hero-glow-one {

    width:
        420px;

    height:
        420px;

    right:
        -160px;

    top:
        -140px;

    border:
        80px solid
        rgba(
            29,
            69,
            51,
            0.035
        );

}


.hero-glow-two {

    width:
        300px;

    height:
        300px;

    left:
        -150px;

    bottom:
        -120px;

    border:
        50px solid
        rgba(
            94,
            49,
            34,
            0.035
        );

}


/* =========================================================
   SECTION HEADINGS
========================================================= */

.section-heading {

    margin-bottom:
        55px;

    display:
        grid;

    grid-template-columns:
        1fr
        0.65fr;

    gap:
        80px;

    align-items:
        end;

}


.section-tag {

    display:
        inline-block;

    margin-bottom:
        14px;

    color:
        var(--brown);

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        1.6px;

    text-transform:
        uppercase;

}


.section-heading h2,
.center-heading h2,
.about-content h2,
.contact-info h2 {

    color:
        var(--green-dark);

    font-size:
        clamp(
            34px,
            4vw,
            52px
        );

    line-height:
        1.12;

    letter-spacing:
        -2px;

}


.section-heading > p {

    color:
        var(--muted);

    font-size:
        15px;

}


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

.services {

    background:
        white;

}


.services-grid {

    display:
        grid;

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

    gap:
        18px;

}


.service-card {

    min-height:
        510px;

    position:
        relative;

    padding:
        37px;

    display:
        flex;

    flex-direction:
        column;

    border:
        1px solid var(--border);

    border-radius:
        25px;

    overflow:
        hidden;

    transition:
        0.35s ease;

}


.service-card:hover {

    transform:
        translateY(-9px);

    box-shadow:
        var(--shadow);

}


.service-card::after {

    content:
        "";

    position:
        absolute;

    width:
        180px;

    height:
        180px;

    right:
        -90px;

    bottom:
        -90px;

    border:
        25px solid
        rgba(
            255,
            255,
            255,
            0.07
        );

    border-radius:
        50%;

}


.service-card-green {

    background:
        linear-gradient(
            145deg,
            var(--green),
            var(--green-dark)
        );

    color:
        white;

}


.service-card-cream {

    background:
        var(--cream);

}


.service-card-peach {

    background:
        var(--peach);

}


.service-number {

    position:
        absolute;

    top:
        28px;

    right:
        30px;

    font-size:
        10px;

    font-weight:
        800;

    opacity:
        0.5;

}


.service-icon-large {

    width:
        57px;

    height:
        57px;

    margin-bottom:
        31px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        15px;

    background:
        white;

    color:
        var(--green);

    box-shadow:
        0 13px 25px
        rgba(
            29,
            69,
            51,
            0.08
        );

    font-size:
        18px;

}


.service-card h3 {

    margin-bottom:
        12px;

    font-size:
        26px;

}


.service-card p {

    margin-bottom:
        27px;

    opacity:
        0.72;

    font-size:
        14px;

}


.service-list {

    display:
        flex;

    flex-direction:
        column;

    gap:
        11px;

}


.service-list div {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    font-size:
        13px;

    font-weight:
        600;

}


.service-list i {

    font-size:
        10px;

}


.service-card > a {

    position:
        relative;

    z-index:
        2;

    margin-top:
        auto;

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    font-size:
        12px;

    font-weight:
        700;

}


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

.about {

    background:
        var(--background);

}


.about-grid {

    display:
        grid;

    grid-template-columns:
        0.9fr
        1.1fr;

    gap:
        95px;

    align-items:
        center;

}


.about-visual {

    min-height:
        535px;

    position:
        relative;

    padding:
        34px;

    display:
        flex;

    align-items:
        flex-end;

    overflow:
        hidden;

    border-radius:
        30px;

    background:
        linear-gradient(
            145deg,
            var(--green),
            var(--green-dark)
        );

}


.about-circle {

    position:
        absolute;

    border-radius:
        50%;

}


.about-circle-one {

    width:
        350px;

    height:
        350px;

    top:
        -180px;

    right:
        -80px;

    background:
        var(--peach);

}


.about-circle-two {

    width:
        240px;

    height:
        240px;

    left:
        -100px;

    top:
        150px;

    border:
        40px solid
        rgba(
            255,
            255,
            255,
            0.08
        );

}


.about-window {

    width:
        100%;

    position:
        relative;

    z-index:
        3;

    overflow:
        hidden;

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

    border-radius:
        18px;

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

    backdrop-filter:
        blur(18px);

}


.about-window-top {

    padding:
        13px 17px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

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

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

    font-size:
        9px;

}


.window-dots {

    display:
        flex;

    gap:
        5px;

}


.window-dots span {

    width:
        6px;

    height:
        6px;

    border-radius:
        50%;

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

}


.about-window-content {

    padding:
        30px;

}


.about-window-content small {

    color:
        var(--peach);

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        1.3px;

}


.about-window-content h3 {

    max-width:
        360px;

    margin:
        9px 0 13px;

    color:
        white;

    font-size:
        27px;

    line-height:
        1.2;

}


.about-window-content p {

    margin-bottom:
        22px;

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

    font-size:
        13px;

}


.system-line {

    margin-top:
        11px;

    padding:
        10px 12px;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    border-radius:
        9px;

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

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

    font-size:
        11px;

}


.system-line span {

    width:
        6px;

    height:
        6px;

    border-radius:
        50%;

    background:
        var(--peach);

}


/* About text */

.about-content > p {

    margin-top:
        19px;

    color:
        var(--muted);

    font-size:
        15px;

}


.about-benefits {

    margin-top:
        31px;

    display:
        grid;

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

    gap:
        15px;

}


.about-benefits div {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    color:
        var(--green);

    font-size:
        13px;

    font-weight:
        700;

}


/* =========================================================
   WHY US
========================================================= */

.why-us {

    background:
        var(--cream);

}


.center-heading {

    max-width:
        700px;

    margin:
        0 auto 55px;

    text-align:
        center;

}


.center-heading p {

    max-width:
        580px;

    margin:
        17px auto 0;

    color:
        var(--muted);

    font-size:
        14px;

}


.why-grid {

    display:
        grid;

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

    gap:
        15px;

}


.why-grid article {

    padding:
        29px 24px;

    border:
        1px solid
        rgba(
            29,
            69,
            51,
            0.07
        );

    border-radius:
        18px;

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

    transition:
        0.3s;

}


.why-grid article:hover {

    transform:
        translateY(-6px);

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

}


.why-icon {

    width:
        46px;

    height:
        46px;

    margin-bottom:
        30px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        12px;

    background:
        var(--green);

    color:
        white;

}


.why-grid h3 {

    margin-bottom:
        9px;

    color:
        var(--green);

    font-size:
        17px;

}


.why-grid p {

    color:
        var(--muted);

    font-size:
        12px;

}


/* =========================================================
   CTA
========================================================= */

.cta-section {

    padding:
        80px 0;

    background:
        white;

}


.cta-box {

    padding:
        52px 58px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        40px;

    border-radius:
        29px;

    background:
        linear-gradient(
            135deg,
            var(--brown),
            var(--brown-dark)
        );

    color:
        white;

    overflow:
        hidden;

    position:
        relative;

}


.cta-box::after {

    content:
        "";

    position:
        absolute;

    width:
        250px;

    height:
        250px;

    right:
        -80px;

    top:
        -110px;

    border:
        50px solid
        rgba(
            255,
            255,
            255,
            0.05
        );

    border-radius:
        50%;

}


.cta-box div {

    position:
        relative;

    z-index:
        2;

}


.cta-box span {

    color:
        var(--peach);

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        1.4px;

}


.cta-box h2 {

    max-width:
        650px;

    margin-top:
        7px;

    font-size:
        clamp(
            28px,
            3.4vw,
            43px
        );

    line-height:
        1.15;

}


.button-light {

    position:
        relative;

    z-index:
        2;

    flex-shrink:
        0;

    background:
        var(--cream);

    color:
        var(--brown);

}


.button-light:hover {

    transform:
        translateY(-3px);

}


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

.contact {

    background:
        var(--background);

}


.contact-grid {

    display:
        grid;

    grid-template-columns:
        0.8fr
        1.2fr;

    gap:
        90px;

}


.contact-info > p {

    max-width:
        450px;

    margin-top:
        19px;

    color:
        var(--muted);

}


.contact-list {

    margin-top:
        40px;

    display:
        flex;

    flex-direction:
        column;

    gap:
        20px;

}


.contact-list > div {

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

}


.contact-icon {

    width:
        44px;

    height:
        44px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        11px;

    background:
        var(--cream);

    color:
        var(--green);

}


.contact-list div div {

    display:
        flex;

    flex-direction:
        column;

}


.contact-list small {

    color:
        var(--muted);

    font-size:
        10px;

}


.contact-list strong {

    color:
        var(--green);

    font-size:
        13px;

}


/* Form */

.contact-form {

    padding:
        39px;

    border:
        1px solid var(--border);

    border-radius:
        23px;

    background:
        white;

    box-shadow:
        0 18px 55px
        rgba(
            29,
            69,
            51,
            0.05
        );

}


.form-row {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        15px;

}


.form-group {

    margin-bottom:
        17px;

    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;

}


.form-group label {

    color:
        var(--green);

    font-size:
        11px;

    font-weight:
        700;

}


.form-group input,
.form-group select,
.form-group textarea {

    width:
        100%;

    padding:
        14px;

    border:
        1px solid var(--border);

    border-radius:
        10px;

    outline:
        none;

    background:
        var(--background);

    color:
        var(--text);

    transition:
        0.2s;

}


.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {

    border-color:
        var(--green);

    box-shadow:
        0 0 0 3px
        rgba(
            29,
            69,
            51,
            0.06
        );

}


.form-group textarea {

    resize:
        vertical;

}


.form-submit {

    width:
        100%;

}


.form-note {

    display:
        block;

    margin-top:
        10px;

    text-align:
        center;

    color:
        var(--muted);

    font-size:
        9px;

}


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

.footer {

    padding:
        70px 0 23px;

    background:
        var(--green-dark);

    color:
        white;

}


.footer-top {

    padding-bottom:
        50px;

    display:
        flex;

    justify-content:
        space-between;

    gap:
        50px;

}


.footer-logo-icon {

    background:
        var(--cream);

    color:
        var(--green);

}


.footer-logo-name {

    color:
        white;

}


.footer-brand {

    max-width:
        370px;

}


.footer-brand p {

    margin-top:
        17px;

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

    font-size:
        12px;

}


.footer-links {

    display:
        flex;

    gap:
        90px;

}


.footer-links > div {

    display:
        flex;

    flex-direction:
        column;

    gap:
        9px;

}


.footer-links strong {

    margin-bottom:
        7px;

    color:
        var(--peach);

    font-size:
        12px;

}


.footer-links a {

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

    font-size:
        11px;

}


.footer-links a:hover {

    color:
        white;

}


.footer-bottom {

    padding-top:
        20px;

    display:
        flex;

    justify-content:
        space-between;

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

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

    font-size:
        9px;

}


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

@media
(max-width: 1050px) {


    .nav-menu,
    .nav-cta {

        display:
            none;

    }


    .mobile-menu-button {

        display:
            grid;

        place-items:
            center;

    }


    .nav-menu.active {

        position:
            absolute;

        top:
            66px;

        left:
            24px;

        right:
            24px;

        display:
            flex;

        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            3px;

        padding:
            16px;

        border:
            1px solid var(--border);

        border-radius:
            17px;

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

        backdrop-filter:
            blur(20px);

        box-shadow:
            var(--shadow);

    }


    .nav-menu.active
    .nav-link {

        width:
            100%;

        justify-content:
            space-between;

    }


    .nav-dropdown {

        width:
            100%;

    }


    .dropdown-menu {

        position:
            static;

        width:
            100%;

        display:
            none;

        grid-template-columns:
            1fr;

        margin-top:
            7px;

        padding:
            10px;

        transform:
            none;

        opacity:
            1;

        visibility:
            visible;

        pointer-events:
            auto;

        box-shadow:
            none;

        background:
            var(--background);

    }


    .dropdown-menu.mobile-open {

        display:
            grid;

    }


    .nav-dropdown:hover
    .dropdown-menu {

        transform:
            none;

    }


    .hero-container {

        grid-template-columns:
            1fr;

    }


    .hero-content {

        max-width:
            770px;

    }


    .hero-visual {

        min-height:
            600px;

    }


    .section-heading {

        grid-template-columns:
            1fr;

        gap:
            20px;

    }


    .services-grid {

        grid-template-columns:
            1fr;

    }


    .service-card {

        min-height:
            auto;

    }


    .service-card > a {

        margin-top:
            35px;

    }


    .about-grid,
    .contact-grid {

        grid-template-columns:
            1fr;

        gap:
            55px;

    }


    .why-grid {

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

    }


}


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

@media
(max-width: 700px) {


    .container {

        width:
            min(
                calc(100% - 30px),
                var(--container)
            );

    }


    .section {

        padding:
            80px 0;

    }


    .logo-name {

        font-size:
            16px;

    }


    .logo-icon {

        width:
            38px;

        height:
            38px;

    }


    .hero {

        min-height:
            auto;

        padding:
            125px 0 60px;

    }


    .hero h1 {

        font-size:
            44px;

        letter-spacing:
            -2.5px;

    }


    .hero-description {

        font-size:
            15px;

    }


    .hero-buttons {

        flex-direction:
            column;

    }


    .hero-buttons
    .button {

        width:
            100%;

    }


    .hero-features {

        display:
            grid;

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

        gap:
            7px;

    }


    .hero-features > div {

        flex-direction:
            column;

        align-items:
            flex-start;

    }


    .hero-feature-icon {

        width:
            34px;

        height:
            34px;

    }


    .hero-features small {

        font-size:
            8px;

    }


    .hero-visual {

        min-height:
            500px;

    }


    #hero3d {

        width:
            510px;

        height:
            510px;

    }


    .tech-card {

        width:
            88%;

    }


    .tech-card-body {

        padding:
            27px 23px;

    }


    .tech-card h3 {

        font-size:
            26px;

    }


    .floating-badge-one {

        left:
            -5px;

        bottom:
            15px;

    }


    .floating-badge-two {

        right:
            -5px;

        top:
            22px;

    }


    .floating-badge {

        padding:
            10px 12px;

    }


    .floating-badge-icon {

        width:
            32px;

        height:
            32px;

    }


    .orbit-one {

        width:
            390px;

    }


    .orbit-two {

        width:
            370px;

    }


    .section-heading h2,
    .center-heading h2,
    .about-content h2,
    .contact-info h2 {

        letter-spacing:
            -1.5px;

    }


    .service-card {

        padding:
            29px;

    }


    .about-visual {

        min-height:
            450px;

        padding:
            20px;

    }


    .about-window-content {

        padding:
            24px;

    }


    .about-benefits {

        grid-template-columns:
            1fr;

    }


    .why-grid {

        grid-template-columns:
            1fr;

    }


    .cta-box {

        padding:
            36px 26px;

        flex-direction:
            column;

        align-items:
            flex-start;

    }


    .button-light {

        width:
            100%;

    }


    .form-row {

        grid-template-columns:
            1fr;

    }


    .contact-form {

        padding:
            24px;

    }


    .footer-top {

        flex-direction:
            column;

    }


    .footer-links {

        gap:
            55px;

    }


    .footer-bottom {

        flex-direction:
            column;

        gap:
            7px;

    }


}