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

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    background:#08130F;
    min-height:100vh;
}

/*===============================
        COLORS
================================*/

:root{

    --primary:#2EE59D;
    --primary-dark:#18B67A;
    --white:#ffffff;
    --text:#E8F4F0;

    --glass:rgba(255,255,255,.08);

    --glass-hover:rgba(255,255,255,.12);

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

}

.navbar{

    position: fixed;

    top: 20px;

    left: 50%;

    transform: translateX(-50%);

    width: 95%;

    height: 84px;

    padding: 0 28px;

    display: flex;

    align-items: center;

    border-radius: 24px;

    backdrop-filter: blur(25px);

    background: var(--glass);

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

    z-index: 999;

}

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

.logo{

    width: 220px;

    display: flex;

    align-items: center;

    justify-content: flex-start;

    flex-shrink: 0;

}

.logo img{

    width: 190px;

    display: block;

}

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

.nav-links{

    flex: 1;

    display: flex;

    justify-content: center;

    align-items: center;

    list-style: none;

    gap: 22px;

    margin: 0;

    padding: 0;

}

.nav-links li{

    position: relative;

}

.nav-links li a{

    text-decoration: none;

    color: var(--white);

    font-size: 16px;

    font-weight: 500;

    padding: 12px 18px;

    border-radius: 999px;

    transition: .35s;

    display: block;

    position: relative;

    overflow: hidden;

    white-space: nowrap;

}

/* Glass Hover */

.nav-links li a::before{

    content: "";

    position: absolute;

    inset: 0;

    border-radius: 999px;

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

    backdrop-filter: blur(10px);

    border: 1px solid rgba(46,229,157,.25);

    opacity: 0;

    transition: .35s;

}

.nav-links li a:hover::before{

    opacity: 1;

}

.nav-links li a:hover{

    color: var(--primary);

}

.nav-links li a span{

    position: relative;

    z-index: 2;

}

.nav-links li a.active{

    background: rgba(46,229,157,.12);

    border: 1px solid rgba(46,229,157,.3);

    color: var(--primary);

}

/*===============================
        BOOK BUTTON
================================*/

.book-btn{

    display:flex;

    align-items:center;

    gap:14px;

    text-decoration:none;

    background:white;

    color:#08130F;

    padding:13px 22px;

    border-radius:999px;

    font-weight:600;

    transition:.35s;

    white-space:nowrap;

}

.book-btn span{

    width:36px;

    height:36px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:var(--primary);

    color:white;

    transition:.35s;

}

.book-btn:hover{

    transform:translateY(-3px);

    box-shadow:0 12px 35px rgba(46,229,157,.30);

}

.book-btn:hover span{

    transform:rotate(45deg);

}

/*===============================
        MENU TOGGLE
================================*/

.menu-toggle{

    width:48px;

    height:48px;

    display:none;

    justify-content:center;

    align-items:center;

    flex-direction:column;

    gap:6px;

    cursor:pointer;

    border-radius:14px;

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

    backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,.15);

}

.menu-toggle span{

    width:24px;

    height:2px;

    background:white;

    transition:.35s;

}

/* Animation */

.menu-toggle.active span:nth-child(1){

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

}

.menu-toggle.active span:nth-child(2){

    opacity:0;

}

.menu-toggle.active span:nth-child(3){

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

}

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

.mobile-menu{

    position:fixed;

    top:0;

    right:-100%;

    width:100%;

    height:100vh;

    background:#08130F;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:30px;

    transition:.45s ease;

    z-index:998;

}

.mobile-menu.active{

    right:0;

}

.mobile-menu a{

    color:white;

    text-decoration:none;

    font-size:24px;

    font-weight:600;

    transition:.3s;

}

.mobile-menu a:hover{

    color:var(--primary);

}

.mobile-btn{

    margin-top:20px;

    background:white;

    color:#08130F !important;

    padding:14px 28px;

    border-radius:999px;

}

/* =========================================================
   MOBILE RESOURCE LINKS
========================================================= */

.mobile-resource-links {

    width: 100%;

    display: flex;
    flex-direction: column;

    align-items: center;

    margin-top: 18px;
    padding-top: 18px;

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

}


/* Individual resource links */

.mobile-resource-links a {

    width: 100%;

    padding: 10px 0;

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

    font-size: 14px;

    text-align: center;

    text-decoration: none;

    transition: color 0.25s ease;
}


.mobile-resource-links a:hover {

    color: #2EE59D;

}

/*=========================================
        4K MONITORS (2560px+)
=========================================*/

@media (min-width:2560px){

    .navbar{
        width:80%;
        height:92px;
    }

    .logo img{
        width:220px;
    }

    .nav-links{
        gap:30px;
    }

    .nav-links li a{
        font-size:18px;
        padding:15px 22px;
    }

    .book-btn{
        padding:16px 28px;
        font-size:17px;
    }

}


/*=========================================
        LARGE DESKTOP
=========================================*/

@media (max-width:1600px){

    .navbar{
        width:92%;
    }

    .nav-links{
        gap:20px;
    }

}


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

@media (max-width:1440px){

    .logo img{
        width:180px;
    }

    .nav-links{
        gap:18px;
    }

    .nav-links li a{
        font-size:15px;
        padding:12px 16px;
    }

}


/*=========================================
        LAPTOP (MacBook Air / Surface)
=========================================*/

@media (max-width:1280px){

    .navbar{
        padding:0 22px;
    }

    .logo{
        width:180px;
    }

    .book-btn{
        width:auto;
    }

    .nav-links{
        gap:14px;
    }

    .nav-links li a{

        font-size:14px;

        padding:11px 14px;

    }

}


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

@media (max-width:1100px){

    .logo img{
        width:155px;
    }

    .nav-links{
        gap:10px;
    }

    .nav-links li a{

        font-size:13px;

        padding:10px 12px;

    }

    .book-btn{

        padding:10px 16px;

        font-size:13px;

    }

}


/*=========================================
        TABLETS
=========================================*/

@media (max-width:992px){

    .navbar{

        height:74px;

        padding:0 18px;

    }

    .logo img{

        width:145px;

    }

    .nav-links{

        gap:6px;

    }

    .nav-links li a{

        font-size:12px;

        padding:9px 10px;

    }

    .book-btn{

        padding:9px 15px;

        font-size:12px;

    }

}


/*=========================================
        TABLET & LARGE MOBILE
=========================================*/

@media (max-width:768px){

    .navbar{

        height:72px;

        padding:0 18px;

        justify-content:space-between;

    }

    .nav-links{

        display:none;

    }

    .book-btn{

        display:none;

    }

    .menu-toggle{

        display:flex;

    }

    .logo{

        width:auto;

    }

    .logo img{

        width:145px;

    }

}


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

@media (max-width:576px){

    .navbar{

        width:94%;

        height:68px;

        padding:0 15px;

        border-radius:18px;

    }

    .logo img{

        width:130px;

    }

    .menu-toggle{

        width:42px;

        height:42px;

    }

}


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

@media (max-width:430px){

    .navbar{

        height:64px;

        top:12px;

    }

    .logo img{

        width:120px;

    }

    .menu-toggle{

        width:40px;

        height:40px;

    }

}


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

@media (max-width:375px){

    .navbar{

        width:96%;

        padding:0 12px;

    }

    .logo img{

        width:110px;

    }

    .menu-toggle{

        width:38px;

        height:38px;

    }

}


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

@media (max-width:320px){

    .logo img{

        width:100px;

    }

    .menu-toggle{

        width:36px;

        height:36px;

    }

}

/*==================================================
        OXIDATIVE STRESS PAGE
==================================================*/

.oxidative-page {

    position: relative;

    min-height: 100vh;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #06110F 0%,
            #030806 50%,
            #06110F 100%
        );

    color: #ffffff;

}


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

.oxidative-page .container {

    width: 90%;

    max-width: 1450px;

    margin: auto;

    position: relative;

    z-index: 5;

}


/*==================================================
        BACKGROUND GLOWS
==================================================*/

.os-bg-glow {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    z-index: 0;

}


.os-glow-1 {

    width: 650px;

    height: 650px;

    top: -250px;

    left: -250px;

    background:

        radial-gradient(
            circle,
            rgba(46,229,157,.15),
            rgba(46,229,157,.05) 40%,
            transparent 72%
        );

    filter: blur(30px);

    animation:
        glowFloat1 12s ease-in-out infinite;

}


.os-glow-2 {

    width: 750px;

    height: 750px;

    top: 35%;

    right: -350px;

    background:

        radial-gradient(
            circle,
            rgba(46,229,157,.13),
            rgba(46,229,157,.04) 40%,
            transparent 72%
        );

    filter: blur(35px);

    animation:
        glowFloat2 15s ease-in-out infinite;

}


.os-glow-3 {

    width: 600px;

    height: 600px;

    bottom: -300px;

    left: 35%;

    background:

        radial-gradient(
            circle,
            rgba(46,229,157,.10),
            transparent 70%
        );

    filter: blur(40px);

    animation:
        glowFloat3 18s ease-in-out infinite;

}


@keyframes glowFloat1 {

    0%,
    100% {
        transform:
            translate(0,0)
            scale(1);
    }

    50% {
        transform:
            translate(70px,50px)
            scale(1.1);
    }

}


@keyframes glowFloat2 {

    0%,
    100% {
        transform:
            translate(0,0)
            scale(1);
    }

    50% {
        transform:
            translate(-60px,-50px)
            scale(1.1);
    }

}


@keyframes glowFloat3 {

    0%,
    100% {
        transform:
            translateX(0)
            scale(1);
    }

    50% {
        transform:
            translateX(-70px)
            scale(1.12);
    }

}


/*==================================================
        PARTICLES
==================================================*/

.os-particles {

    position: absolute;

    inset: 0;

    overflow: hidden;

    pointer-events: none;

    z-index: 1;

}


.os-particles span {

    position: absolute;

    width: 3px;

    height: 3px;

    border-radius: 50%;

    background: #2EE59D;

    opacity: .2;

    box-shadow:
        0 0 8px rgba(46,229,157,.5);

    animation:
        particleFloat
        var(--speed)
        ease-in-out
        infinite;

}


.os-particles span:nth-child(1) {
    left: 5%;
    top: 15%;
    --speed: 10s;
}

.os-particles span:nth-child(2) {
    left: 12%;
    top: 40%;
    --speed: 13s;
}

.os-particles span:nth-child(3) {
    left: 20%;
    top: 75%;
    --speed: 11s;
}

.os-particles span:nth-child(4) {
    left: 28%;
    top: 20%;
    --speed: 15s;
}

.os-particles span:nth-child(5) {
    left: 35%;
    top: 55%;
    --speed: 12s;
}

.os-particles span:nth-child(6) {
    left: 43%;
    top: 85%;
    --speed: 14s;
}

.os-particles span:nth-child(7) {
    left: 50%;
    top: 30%;
    --speed: 10s;
}

.os-particles span:nth-child(8) {
    left: 57%;
    top: 65%;
    --speed: 16s;
}

.os-particles span:nth-child(9) {
    left: 64%;
    top: 12%;
    --speed: 12s;
}

.os-particles span:nth-child(10) {
    left: 70%;
    top: 45%;
    --speed: 11s;
}

.os-particles span:nth-child(11) {
    left: 76%;
    top: 80%;
    --speed: 14s;
}

.os-particles span:nth-child(12) {
    left: 82%;
    top: 25%;
    --speed: 12s;
}

.os-particles span:nth-child(13) {
    left: 88%;
    top: 60%;
    --speed: 15s;
}

.os-particles span:nth-child(14) {
    left: 94%;
    top: 18%;
    --speed: 10s;
}

.os-particles span:nth-child(15) {
    left: 8%;
    top: 90%;
    --speed: 13s;
}

.os-particles span:nth-child(16) {
    left: 18%;
    top: 8%;
    --speed: 15s;
}

.os-particles span:nth-child(17) {
    left: 38%;
    top: 43%;
    --speed: 11s;
}

.os-particles span:nth-child(18) {
    left: 68%;
    top: 90%;
    --speed: 14s;
}

.os-particles span:nth-child(19) {
    left: 87%;
    top: 38%;
    --speed: 12s;
}

.os-particles span:nth-child(20) {
    left: 97%;
    top: 70%;
    --speed: 16s;
}


@keyframes particleFloat {

    0%,
    100% {

        transform:
            translate(0,0)
            scale(.8);

        opacity: .08;

    }

    50% {

        transform:
            translate(
                15px,
                -35px
            )
            scale(1.15);

        opacity: .3;

    }

}


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

.oxidative-heading-section {

    position: relative;

    padding: 130px 0 80px;

    z-index: 3;

}


.oxidative-heading {

    max-width: 900px;

    margin: auto;

    text-align: center;

}


.oxidative-heading h1 {

    margin: 25px 0;

    font-size:
        clamp(
            52px,
            7vw,
            100px
        );

    line-height: .95;

    letter-spacing: -4px;

    color: #ffffff;

}


.oxidative-heading h1 span {

    display: block;

    color: #2EE59D;

    margin-top: 10px;

}


.oxidative-heading > p {

    max-width: 720px;

    margin: 30px auto 0;

    color: #B8C4BF;

    font-size: 17px;

    line-height: 1.85;

}


/*==================================================
        SECTION TAG
==================================================*/

.oxidative-page .section-tag {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 9px 16px;

    border-radius: 50px;

    background:
        rgba(46,229,157,.08);

    border:
        1px solid rgba(46,229,157,.25);

    color: #2EE59D;

    font-size: 12px;

    font-weight: 600;

    letter-spacing: .8px;

    text-transform: uppercase;

}


.oxidative-page .section-tag::before {

    content: "";

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background: #2EE59D;

    box-shadow:
        0 0 12px rgba(46,229,157,.9);

}


/*==================================================
        OXIDATIVE SECTION
==================================================*/

.oxidative-section {

    position: relative;

    padding: 60px 0;

    z-index: 3;

}


.oxidative-row {

    position: relative;

    min-height: 650px;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    align-items: center;

    gap: 100px;

    padding: 70px 60px;

    border-radius: 40px;

    background:

        linear-gradient(
            135deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.015)
        );

    border:
        1px solid rgba(255,255,255,.07);

    overflow: hidden;

    transform:
        translateY(
            var(--scroll-up, 0px)
        );

    transition:
        border-color .5s ease,
        box-shadow .5s ease;

}


.oxidative-row::before {

    content: "";

    position: absolute;

    width: 500px;

    height: 500px;

    border-radius: 50%;

    background:

        radial-gradient(
            circle,
            rgba(46,229,157,.07),
            transparent 70%
        );

    filter: blur(50px);

    pointer-events: none;

}


.oxidative-row:nth-child(odd)::before {

    left: -250px;

    top: -150px;

}


.oxidative-row:nth-child(even)::before {

    right: -250px;

    bottom: -150px;

}


.oxidative-row.section-active {

    border-color:
        rgba(46,229,157,.14);

    box-shadow:
        0 30px 90px rgba(0,0,0,.25);

}


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

.oxidative-text {

    position: relative;

    z-index: 3;

    max-width: 650px;

}


.oxidative-text h2 {

    margin:
        25px 0 30px;

    font-size:
        clamp(
            40px,
            4.5vw,
            65px
        );

    line-height: 1.05;

    letter-spacing: -2.5px;

    color: #ffffff;

}


.oxidative-text h2 span {

    color: #2EE59D;

}


.oxidative-text p {

    color: #C4CFCA;

    font-size: 16px;

    line-height: 1.9;

    margin-bottom: 22px;

}


.oxidative-text p strong {

    color: #2EE59D;

    font-weight: 700;

}


/*==================================================
        IMAGE AREA
==================================================*/

.oxidative-image {

    position: relative;

    min-height: 500px;

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 2;

}


/*==================================================
        IMAGE GLOW
==================================================*/

.image-glow {

    position: absolute;

    width: 360px;

    height: 360px;

    border-radius: 50%;

    background:

        radial-gradient(
            circle,
            rgba(46,229,157,.30),
            rgba(46,229,157,.08) 45%,
            transparent 70%
        );

    filter: blur(45px);

    opacity: .08;

    transform: scale(.8);

    transition:

        opacity 1s ease,

        transform 1.2s ease;

}


.image-active .image-glow {

    opacity: .22;

    transform: scale(1.15);

}


/*==================================================
        WHITE IMAGE CARD
==================================================*/

.image-frame {

    position: relative;

    width: 100%;

    max-width: 600px;

    min-height: 450px;

    padding: 30px;

    display: flex;

    align-items: center;

    justify-content: center;

    /*
        WHITE BACKGROUND
    */

    background: #ffffff;

    border-radius: 32px;

    /*
        Green border to connect
        it with your site
    */

    border:
        1px solid
        rgba(46,229,157,.35);

    /*
        Shadow
    */

    box-shadow:

        0 30px 70px
        rgba(0,0,0,.35),

        0 0 40px
        rgba(46,229,157,.06);

    overflow: hidden;

    transform:

        translateY(
            var(--image-y, 0px)
        )

        scale(
            var(--scroll-scale, 1)
        )

        perspective(1000px)

        rotateX(
            var(--rotate-x, 0deg)
        )

        rotateY(
            var(--rotate-y, 0deg)
        );

    transition:

        border-color .5s ease,

        box-shadow .5s ease;

}


/*==================================================
        IMAGE CARD INNER GLOW
==================================================*/

.image-frame::before {

    content: "";

    position: absolute;

    inset: 0;

    background:

        radial-gradient(
            circle at 50% 50%,
            rgba(46,229,157,.10),
            transparent 65%
        );

    pointer-events: none;

    z-index: 1;

}


/*==================================================
        IMAGE
==================================================*/

.image-frame img {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 520px;

    max-height: 470px;

    object-fit: contain;

    display: block;

    /*
        Keeps image clean on white
    */

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

    transition:
        filter .5s ease,
        transform .5s ease;

}


/*==================================================
        IMAGE HOVER
==================================================*/

.image-frame:hover {

    border-color:
        rgba(46,229,157,.65);

    box-shadow:

        0 35px 80px
        rgba(0,0,0,.4),

        0 0 55px
        rgba(46,229,157,.13);

}


.image-frame:hover img {

    filter:
        drop-shadow(
            0 20px 35px
            rgba(46,229,157,.18)
        );

}


/*==================================================
        REVERSE SECTION
==================================================*/

.oxidative-row.reverse {

    grid-template-columns:
        1fr 1fr;

}


.oxidative-row.reverse
.oxidative-image {

    order: 1;

}


.oxidative-row.reverse
.oxidative-text {

    order: 2;

}


/*==================================================
        PROCESS POINTS
==================================================*/

.oxidative-points {

    display: flex;

    flex-direction: column;

    gap: 12px;

    margin-top: 30px;

}


.oxidative-points > div {

    display: flex;

    align-items: center;

    gap: 16px;

    padding: 14px 16px;

    border-radius: 15px;

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

    border:
        1px solid
        rgba(255,255,255,.07);

    opacity: 0;

    transform:
        translateY(20px);

    transition:

        opacity .7s ease,

        transform .7s ease,

        border-color .35s ease,

        background .35s ease;

}


.oxidative-points
> div.point-visible {

    opacity: 1;

    transform:
        translateY(0);

}


.oxidative-points > div:hover {

    background:
        rgba(46,229,157,.06);

    border-color:
        rgba(46,229,157,.25);

    transform:
        translateX(7px);

}


.oxidative-points > div > span {

    width: 38px;

    height: 38px;

    min-width: 38px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #2EE59D;

    background:
        rgba(46,229,157,.10);

    border:
        1px solid
        rgba(46,229,157,.25);

    font-size: 11px;

    font-weight: 700;

}


.oxidative-points p {

    margin: 0;

    color: #D5DFDB;

    font-size: 14px;

}


/*==================================================
        IMPACT TAGS
==================================================*/

.oxidative-impact {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 30px;

}


.oxidative-impact span {

    padding: 10px 15px;

    border-radius: 50px;

    color: #2EE59D;

    background:
        rgba(46,229,157,.08);

    border:
        1px solid
        rgba(46,229,157,.22);

    font-size: 11px;

    font-weight: 600;

    letter-spacing: .4px;

    transition: .35s ease;

}


.oxidative-impact span:hover {

    color: #06110F;

    background: #2EE59D;

    transform:
        translateY(-3px);

    box-shadow:
        0 10px 25px
        rgba(46,229,157,.2);

}


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

.reveal-left,
.reveal-right,
.reveal-up {

    opacity: 0;

    transition:

        opacity 1s
        cubic-bezier(.16,1,.3,1),

        transform 1s
        cubic-bezier(.16,1,.3,1);

}


.reveal-left {

    transform:
        translateX(-80px)
        translateY(35px);

}


.reveal-right {

    transform:
        translateX(80px)
        translateY(35px);

}


.reveal-up {

    transform:
        translateY(70px);

}


.reveal-left.active,
.reveal-right.active,
.reveal-up.active {

    opacity: 1;

    transform:
        translate(0,0);

}


/*==================================================
        SECTION SPACING
==================================================*/

.oxidative-section {

    margin-bottom: 30px;

}


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

@media (max-width: 1100px) {

    .oxidative-row {

        gap: 55px;

        padding: 55px 40px;

    }

    .oxidative-text h2 {

        font-size: 48px;

    }

    .image-frame {

        min-height: 400px;

    }

}


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

@media (max-width: 900px) {

    .oxidative-heading-section {

        padding:
            100px 0 60px;

    }

    .oxidative-row,
    .oxidative-row.reverse {

        display: flex;

        flex-direction: column;

        gap: 45px;

        min-height: auto;

        padding: 50px 40px;

    }

    /*
        Image first on mobile/tablet
    */

    .oxidative-row .oxidative-image,
    .oxidative-row.reverse .oxidative-image {

        order: 1;

        width: 100%;

    }

    .oxidative-row .oxidative-text,
    .oxidative-row.reverse .oxidative-text {

        order: 2;

        width: 100%;

    }

    .oxidative-image {

        min-height: 400px;

    }

    .image-frame {

        max-width: 650px;

        min-height: 380px;

    }

}


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

@media (max-width: 600px) {

    .oxidative-page .container {

        width: 92%;

    }

    .oxidative-heading-section {

        padding:
            75px 0 40px;

    }

    .oxidative-heading h1 {

        font-size: 48px;

        letter-spacing: -2px;

    }

    .oxidative-heading > p {

        font-size: 14px;

        line-height: 1.8;

    }

    .oxidative-section {

        padding: 25px 0;

    }

    .oxidative-row,
    .oxidative-row.reverse {

        padding: 30px 20px;

        gap: 30px;

        border-radius: 28px;

    }

    .oxidative-text h2 {

        font-size: 36px;

        letter-spacing: -1px;

    }

    .oxidative-text p {

        font-size: 14px;

        line-height: 1.8;

    }

    .oxidative-image {

        min-height: 280px;

    }

    .image-frame {

        min-height: 260px;

        padding: 18px;

        border-radius: 23px;

    }

    .image-frame img {

        max-height: 280px;

    }

    .image-glow {

        width: 230px;

        height: 230px;

    }

}


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

@media (max-width: 400px) {

    .oxidative-heading h1 {

        font-size: 40px;

    }

    .oxidative-text h2 {

        font-size: 31px;

    }

    .oxidative-row,
    .oxidative-row.reverse {

        padding: 25px 16px;

    }

    .image-frame {

        min-height: 220px;

        padding: 12px;

    }

    .image-frame img {

        max-height: 235px;

    }

    .oxidative-text p {

        font-size: 13px;

    }

}


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

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

    .os-bg-glow,
    .os-particles span {

        animation: none;

    }

    .reveal-left,
    .reveal-right,
    .reveal-up {

        opacity: 1;

        transform: none;

        transition: none;

    }

    .oxidative-row {

        transform: none !important;

    }

    .image-frame {

        transform: none !important;

    }

}

/*==================================================
        JS ANIMATION SUPPORT
==================================================*/

.oxidative-row {

    transform:
        translateY(
            var(--scroll-up, 0px)
        );

}


.image-frame {

    transform:

        translateY(
            var(--image-y, 0px)
        )

        scale(
            var(--scroll-scale, 1)
        )

        perspective(1000px)

        rotateX(
            var(--rotate-x, 0deg)
        )

        rotateY(
            var(--rotate-y, 0deg)
        );

}


/*==================================================
        IMAGE ACTIVE GLOW
==================================================*/

.image-glow {

    opacity: .05;

    transform: scale(.8);

    transition:

        opacity 1s ease,

        transform 1.2s ease;

}


.image-active .image-glow {

    opacity: .18;

    transform: scale(1.2);

}


/*==================================================
        PROCESS POINTS
==================================================*/

.oxidative-points > div {

    opacity: 0;

    transform:
        translateY(20px);

    transition:

        opacity .7s ease,

        transform .7s ease;

}


.oxidative-points
> div.point-visible {

    opacity: 1;

    transform:
        translateY(0);

}


/*==================================================
        MOUSE TILT
==================================================*/

.image-frame.mouse-active {

    transition:
        transform .15s ease-out;

}


/*==================================================
        PAGE LOAD
==================================================*/

body:not(.page-loaded)
.oxidative-page {

    opacity: 0;

}


body.page-loaded
.oxidative-page {

    opacity: 1;

    transition:
        opacity .8s ease;

}


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

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

    .oxidative-row {

        transform: none !important;

    }

    .image-frame {

        transform: none !important;

    }

    .oxidative-points > div {

        opacity: 1 !important;

        transform: none !important;

    }

}

.footer{

    position:relative;

    width:100%;

    overflow:hidden;

    background:linear-gradient(
        180deg,
        #07110F 0%,
        #04100D 60%,
        #020705 100%
    );

    padding:90px 0 35px;

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

}

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

.footer::before{

    content:"";

    position:absolute;

    width:900px;

    height:900px;

    background:#2EE59D;

    border-radius:50%;

    filter:blur(220px);

    opacity:.06;

    left:50%;

    top:-450px;

    transform:translateX(-50%);

}

.footer::after{

    content:"";

    position:absolute;

    width:550px;

    height:550px;

    background:#FF9F2A;

    border-radius:50%;

    filter:blur(220px);

    opacity:.03;

    right:-200px;

    bottom:-250px;

}

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

.footer-container{

    width:90%;

    max-width:1450px;

    margin:auto;

    position:relative;

    z-index:2;

}

/*====================================
            DIVIDER
====================================*/

.footer-divider{

    width:100%;

    height:1px;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.18),
        transparent
    );

}

.bottom-divider{

    margin-top:65px;

}

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

.footer-content{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:130px;

    padding:70px 0;

}

/*====================================
            LEFT
====================================*/

.company-header{

    display:flex;

    align-items:center;

    gap:22px;

    margin-bottom:45px;

}

.company-header img{

    width:72px;

    transition:.45s;

}

.company-header img:hover{

    transform:rotate(-5deg) scale(1.05);

}

.company-header h3{

    color:#fff;

    font-size:26px;

    margin-bottom:8px;

    font-weight:700;

}

.company-header span{

    color:#2EE59D;

    font-size:16px;

}

.footer-contact{

    display:flex;

    flex-direction:column;

    gap:28px;

}

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

.contact-item{

    display:flex;

    gap:18px;

    align-items:flex-start;

}

.contact-icon{

    width:54px;

    height:54px;

    flex-shrink:0;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:18px;

    background:rgba(46,229,157,.10);

    border:1px solid rgba(46,229,157,.20);

    color:#2EE59D;

    transition:.4s;

}

.contact-item:hover .contact-icon{

    transform:translateY(-6px);

    background:#2EE59D;

    color:#07110F;

    box-shadow:0 15px 30px rgba(46,229,157,.25);

}

.contact-item p,

.contact-item a{

    color:#D4DDD9;

    text-decoration:none;

    line-height:1.8;

    transition:.35s;

}

.contact-item a:hover{

    color:#2EE59D;

}

.phones{

    display:flex;

    flex-direction:column;

    gap:8px;

}

/*====================================
            RIGHT
====================================*/

.footer-right{

    display:flex;

    flex-direction:column;

    justify-content:space-between;

}

.footer-logo{

    margin-bottom:35px;

}

.footer-logo img{

    width:180px;

    transition:.45s;

}

.footer-logo img:hover{

    transform:scale(1.05);

}

.footer-links ul{

    list-style:none;

}

.footer-links li{

    margin-bottom:18px;

}

.footer-links a{

    color:#D4DDD9;

    text-decoration:none;

    position:relative;

    transition:.35s;

    display:inline-block;

    font-size:17px;

}

.footer-links a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-5px;

    width:0;

    height:2px;

    background:#2EE59D;

    transition:.35s;

}

.footer-links a:hover{

    color:#fff;

    transform:translateX(8px);

}

.footer-links a:hover::after{

    width:100%;

}

/*====================================
        CDS SITE
====================================*/

.partner-site{

    margin-top:40px;

}

.partner-site span{

    display:block;

    color:#9EA8A4;

    margin-bottom:10px;

    font-size:14px;

}

.partner-site a{

    color:#2EE59D;

    text-decoration:none;

    font-size:20px;

    font-weight:600;

    position:relative;

}

.partner-site a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-5px;

    width:0;

    height:2px;

    background:#2EE59D;

    transition:.35s;

}

.partner-site a:hover::after{

    width:100%;

}

/*====================================
        COPYRIGHT
====================================*/

.footer-bottom{

    padding-top:30px;

    text-align:center;

}

.footer-bottom p{

    color:#AEB7B3;

    font-size:15px;

    letter-spacing:.5px;

}

/*==================================================
                4K DISPLAY
==================================================*/

@media (min-width:2560px){

    .footer{
    
    padding:120px 0 40px;
    
    }
    
    .footer-container{
    
    max-width:1800px;
    
    }
    
    .footer-content{
    
    gap:180px;
    
    padding:90px 0;
    
    }
    
    .company-header h3{
    
    font-size:34px;
    
    }
    
    .company-header span{
    
    font-size:18px;
    
    }
    
    .contact-item p,
    .contact-item a{
    
    font-size:20px;
    
    }
    
    .footer-links a{
    
    font-size:22px;
    
    }
    
    .partner-site a{
    
    font-size:24px;
    
    }
    
    .footer-logo img{
    
    width:240px;
    
    }
    
    }
    
    /*==================================================
                LARGE DESKTOP
    ==================================================*/
    
    @media (max-width:1600px){
    
    .footer-content{
    
    gap:120px;
    
    }
    
    }
    
    /*==================================================
                    DESKTOP
    ==================================================*/
    
    @media (max-width:1440px){
    
    .footer-content{
    
    gap:90px;
    
    }
    
    .company-header h3{
    
    font-size:24px;
    
    }
    
    .footer-logo img{
    
    width:170px;
    
    }
    
    }
    
    /*==================================================
                MACBOOK / SURFACE LAPTOP
    ==================================================*/
    
    @media (max-width:1280px){
    
    .footer-content{
    
    grid-template-columns:1.7fr 1fr;
    
    gap:70px;
    
    }
    
    .company-header img{
    
    width:65px;
    
    }
    
    .company-header h3{
    
    font-size:22px;
    
    }
    
    .contact-icon{
    
    width:50px;
    
    height:50px;
    
    }
    
    }
    
    /*==================================================
                    SMALL LAPTOP
    ==================================================*/
    
    @media (max-width:1100px){
    
    .footer-content{
    
    gap:55px;
    
    }
    
    .footer-links a{
    
    font-size:16px;
    
    }
    
    .partner-site a{
    
    font-size:18px;
    
    }
    
    }
    
    /*==================================================
            SURFACE PRO / iPAD PRO
    ==================================================*/
    
    @media (max-width:992px){
    
    .footer{
    
    padding:80px 0 30px;
    
    }
    
    .footer-content{
    
    grid-template-columns:1fr;
    
    gap:60px;
    
    }
    
    .footer-right{
    
    align-items:flex-start;
    
    }
    
    .footer-logo{
    
    margin-bottom:30px;
    
    }
    
    .footer-divider{
    
    margin:15px 0;
    
    }
    
    .bottom-divider{
    
    margin-top:40px;
    
    }
    
    }
    
    /*==================================================
                    TABLET
    ==================================================*/
    
    @media (max-width:768px){
    
    .footer{
    
    padding:70px 0 25px;
    
    }
    
    .footer-container{
    
    width:92%;
    
    }
    
    .footer-content{
    
    padding:50px 0;
    
    gap:50px;
    
    }
    
    .company-header{
    
    flex-direction:column;
    
    align-items:flex-start;
    
    }
    
    .company-header img{
    
    width:60px;
    
    }
    
    .company-header h3{
    
    font-size:21px;
    
    }
    
    .contact-item{
    
    gap:15px;
    
    }
    
    .contact-icon{
    
    width:48px;
    
    height:48px;
    
    font-size:18px;
    
    }
    
    .footer-logo img{
    
    width:155px;
    
    }
    
    .partner-site{
    
    margin-top:30px;
    
    }
    
    }
    
    /*==================================================
                LARGE MOBILE
    ==================================================*/
    
    @media (max-width:576px){
    
    .footer{
    
    padding:60px 0 20px;
    
    }
    
    .footer-container{
    
    width:92%;
    
    }
    
    .company-header{
    
    flex-direction:column;
    
    align-items:center;
    
    text-align:center;
    
    }
    
    .footer-left{
    
    text-align:center;
    
    }
    
    .contact-item{
    
    flex-direction:column;
    
    align-items:center;
    
    text-align:center;
    
    gap:12px;
    
    }
    
    .contact-icon{
    
    margin-bottom:5px;
    
    }
    
    .footer-right{
    
    align-items:center;
    
    text-align:center;
    
    }
    
    .footer-links ul{
    
    padding:0;
    
    }
    
    .footer-links li{
    
    margin-bottom:16px;
    
    }
    
    .partner-site{
    
    text-align:center;
    
    }
    
    .footer-logo img{
    
    width:140px;
    
    }
    
    .footer-bottom{
    
    padding-top:22px;
    
    }
    
    }
    
    /*==================================================
                    MOBILE
    ==================================================*/
    
    @media (max-width:430px){
    
    .footer{
    
    padding:55px 0 20px;
    
    }
    
    .footer-content{
    
    gap:40px;
    
    }
    
    .company-header img{
    
    width:55px;
    
    }
    
    .company-header h3{
    
    font-size:18px;
    
    }
    
    .company-header span{
    
    font-size:13px;
    
    }
    
    .contact-item p,
    .contact-item a{
    
    font-size:14px;
    
    line-height:1.6;
    
    }
    
    .contact-icon{
    
    width:44px;
    
    height:44px;
    
    font-size:17px;
    
    }
    
    .footer-logo img{
    
    width:125px;
    
    }
    
    .footer-links a{
    
    font-size:15px;
    
    }
    
    .partner-site a{
    
    font-size:17px;
    
    }
    
    .footer-bottom p{
    
    font-size:13px;
    
    }
    
    }
    
    /*==================================================
                SMALL MOBILE
    ==================================================*/
    
    @media (max-width:375px){
    
    .footer{
    
    padding:50px 0 15px;
    
    }
    
    .company-header img{
    
    width:50px;
    
    }
    
    .company-header h3{
    
    font-size:16px;
    
    }
    
    .company-header span{
    
    font-size:12px;
    
    }
    
    .contact-item{
    
    gap:10px;
    
    }
    
    .contact-icon{
    
    width:40px;
    
    height:40px;
    
    font-size:15px;
    
    }
    
    .footer-logo img{
    
    width:110px;
    
    }
    
    .footer-links a{
    
    font-size:14px;
    
    }
    
    .partner-site a{
    
    font-size:15px;
    
    }
    
    }
    
    /*==================================================
                EXTRA SMALL MOBILE
    ==================================================*/
    
    @media (max-width:320px){
    
    .footer{
    
    padding:40px 0 15px;
    
    }
    
    .company-header h3{
    
    font-size:15px;
    
    }
    
    .company-header span{
    
    font-size:11px;
    
    }
    
    .contact-item p,
    .contact-item a{
    
    font-size:12px;
    
    }
    
    .contact-icon{
    
    width:38px;
    
    height:38px;
    
    font-size:14px;
    
    }
    
    .footer-logo img{
    
    width:100px;
    
    }
    
    .footer-links a{
    
    font-size:13px;
    
    }
    
    .partner-site a{
    
    font-size:14px;
    
    }
    
    .footer-bottom p{
    
    font-size:12px;
    
    }
    
    }

/*==================================================
        FINAL SECTIONS
==================================================*/

.os-final-sections {

    position: relative;

    width: 90%;
    max-width: 1450px;

    margin: 80px auto 120px;

    z-index: 5;
}


/*==================================================
        COMMON FINAL CARD
==================================================*/

.os-final-card {

    position: relative;

    width: 100%;
    height: 650px;

    margin-bottom: 70px;

    border-radius: 42px;

    overflow: hidden;

    isolation: isolate;

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

    box-shadow:
        0 35px 100px rgba(0,0,0,.35);
}


/*==================================================
        IMAGE
==================================================*/

.os-final-image {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transform: scale(1.04);

    transition:
        transform 1.5s cubic-bezier(.16,1,.3,1);
}


/*==================================================
        IMAGE HOVER
==================================================*/

.os-final-card:hover .os-final-image {

    transform: scale(1.09);
}


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

.os-final-overlay {

    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,

            rgba(3,12,10,.96) 0%,
            rgba(3,12,10,.88) 25%,
            rgba(3,12,10,.68) 45%,
            rgba(3,12,10,.25) 70%,
            rgba(3,12,10,.08) 100%
        );
}


/*==================================================
        SECOND CARD OVERLAY
==================================================*/

.os-reducing-card .os-final-overlay {

    background:
        linear-gradient(
            90deg,

            rgba(3,12,10,.94) 0%,
            rgba(3,12,10,.82) 30%,
            rgba(3,12,10,.55) 50%,
            rgba(3,12,10,.15) 75%,
            rgba(3,12,10,.05) 100%
        );
}


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

        CHANGED:
        55% -> 65%
        700px -> 900px
==================================================*/

.os-final-content {

    position: relative;

    z-index: 3;

    width: 65%;
    max-width: 900px;

    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 70px;
}


/*==================================================
        SECTION TAG
==================================================*/

.os-final-content .section-tag {

    width: fit-content;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 9px 16px;

    border-radius: 50px;

    background: rgba(46,229,157,.08);

    border:
        1px solid rgba(46,229,157,.25);

    color: #2EE59D;

    font-size: 12px;

    font-weight: 600;

    letter-spacing: .7px;

    text-transform: uppercase;
}


/*==================================================
        MAIN HEADING
==================================================*/

.os-final-content .final-main-heading {

    margin: 25px 0 30px;

    width: max-content;

    max-width: 100%;

    font-size:
        clamp(
            48px,
            5.2vw,
            82px
        );

    line-height: .98;

    letter-spacing: -3px;

    font-weight: 700;

    color: #ffffff;
}


/*==================================================
        FORCE EXACT HEADING LINES
==================================================*/

.os-final-content .heading-line {

    display: block;

    width: max-content;

    white-space: nowrap;

    color: #ffffff;
}


/*==================================================
        GREEN WORDS
==================================================*/

.os-final-content .green-word {

    display: inline;

    color: #2EE59D;
}


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

.os-final-content p {

    max-width: 600px;

    color: rgba(255,255,255,.78);

    font-size: 16px;

    line-height: 1.8;

    margin-bottom: 18px;
}


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

.os-explore-btn {

    width: 300px;
    height: 58px;

    margin-top: 18px;

    padding: 0 10px 0 25px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    text-decoration: none;

    background: #ffffff;

    color: #06221C;

    border-radius: 50px;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: .4px;

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


/*==================================================
        BUTTON ICON
==================================================*/

.os-explore-btn i {

    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #2EE59D;

    color: #06221C;

    transition:
        transform .4s ease,
        background .4s ease;
}


/*==================================================
        BUTTON HOVER
==================================================*/

.os-explore-btn:hover {

    transform: translateY(-4px);

    box-shadow:
        0 15px 35px rgba(0,0,0,.25);
}


.os-explore-btn:hover i {

    transform: translateX(4px);

    background: #24d894;
}


/*==================================================
        SECOND CARD
==================================================*/

.os-reducing-card {

    height: 680px;
}


/*==================================================
        SECOND CARD CONTENT
==================================================*/

.reducing-content {

    width: 60%;
    max-width: 850px;
}


/*==================================================
        SECOND CARD IMAGE POSITION
==================================================*/

.os-reducing-card .os-final-image {

    object-position: center center;
}


/*==================================================
        GREEN BACKGROUND LIGHT
==================================================*/

.os-final-card::after {

    content: "";

    position: absolute;

    width: 550px;
    height: 550px;

    left: -220px;

    top: 50%;

    transform: translateY(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(46,229,157,.17),
            rgba(46,229,157,.05) 45%,
            transparent 72%
        );

    filter: blur(30px);

    z-index: 2;

    pointer-events: none;
}


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

.os-final-card.reveal-up {

    opacity: 0;

    transform:
        translateY(90px)
        scale(.97);

    transition:
        opacity 1s cubic-bezier(.16,1,.3,1),
        transform 1.2s cubic-bezier(.16,1,.3,1);
}


.os-final-card.reveal-up.active {

    opacity: 1;

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


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

@media (max-width: 1100px) {

    .os-final-content {

        width: 72%;

        max-width: 800px;

        padding: 55px;
    }


    .os-final-content .final-main-heading {

        font-size: clamp(
            48px,
            6vw,
            68px
        );

        letter-spacing: -2.5px;
    }


    .reducing-content {

        width: 68%;
    }
}


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

@media (max-width: 900px) {

    .os-final-sections {

        width: 92%;

        margin-top: 60px;
    }


    .os-final-card,
    .os-reducing-card {

        height: 600px;

        border-radius: 32px;
    }


    .os-final-content,
    .reducing-content {

        width: 85%;

        max-width: none;

        padding: 45px;
    }


    .os-final-content .final-main-heading {

        font-size: 56px;

        letter-spacing: -2px;
    }
}


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

@media (max-width: 650px) {

    .os-final-sections {

        width: 94%;

        margin:
            40px auto
            70px;
    }


    .os-final-card,
    .os-reducing-card {

        height: 650px;

        margin-bottom: 35px;

        border-radius: 27px;
    }


    /*
        IMAGE POSITION
    */

    .os-final-image {

        object-position: center;
    }


    /*
        DARK GRADIENT FROM BOTTOM
    */

    .os-final-overlay,
    .os-reducing-card .os-final-overlay {

        background:
            linear-gradient(
                180deg,

                rgba(3,12,10,.05) 0%,

                rgba(3,12,10,.18) 30%,

                rgba(3,12,10,.75) 62%,

                rgba(3,12,10,.98) 100%
            );
    }


    /*
        CONTENT
    */

    .os-final-content,
    .reducing-content {

        width: 100%;

        height: 100%;

        padding:
            30px 25px
            38px;

        justify-content: flex-end;
    }


    /*
        HEADING
    */

    .os-final-content .final-main-heading {

        width: 100%;

        max-width: 100%;

        font-size:
            clamp(
                38px,
                10vw,
                52px
            );

        line-height: 1;

        letter-spacing: -2px;

        margin:
            20px 0
            20px;
    }


    /*
        Allow responsive wrapping
        only on smaller screens
    */

    .os-final-content .heading-line {

        width: auto;

        white-space: normal;
    }


    .os-final-content p {

        font-size: 14px;

        line-height: 1.7;
    }


    .os-explore-btn {

        width: 100%;

        max-width: 300px;
    }
}


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

@media (max-width: 420px) {

    .os-final-card,
    .os-reducing-card {

        height: 600px;
    }


    .os-final-content,
    .reducing-content {

        padding:
            25px 20px
            30px;
    }


    .os-final-content .final-main-heading {

        font-size: 39px;

        letter-spacing: -1.5px;
    }


    .os-final-content p {

        font-size: 13px;
    }


    .os-explore-btn {

        height: 54px;

        font-size: 13px;
    }


    .os-explore-btn i {

        width: 38px;

        height: 38px;
    }
}
.nav-dropdown {
    position: relative;
}


/* RESOURCES BUTTON */

.nav-dropdown-btn {

    display: flex;
    align-items: center;
    gap: 8px;

    background: transparent;
    border: none;

    color: #ffffff;

    font-family: inherit;
    font-size: 16px;
    font-weight: 500;

    cursor: pointer;

    padding: 10px 0;

    transition: color 0.3s ease;
}


.nav-dropdown-btn:hover {
    color: #2EE59D;
}


/* CHEVRON */

.nav-dropdown-btn i {

    font-size: 10px;

    transition:
        transform 0.3s ease,
        color 0.3s ease;
}


.nav-dropdown.active .nav-dropdown-btn {
    color: #2EE59D;
}


.nav-dropdown.active .nav-dropdown-btn i {
    transform: rotate(180deg);
}


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

.nav-dropdown-menu {

    position: absolute;

    top: calc(100% + 14px);
    right: 0;

    width: 230px;

    padding: 10px;

    background: rgba(8, 25, 21, 0.96);

    border: 1px solid rgba(46, 229, 157, 0.25);

    border-radius: 18px;

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

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.35),
        0 0 30px rgba(46, 229, 157, 0.05);

    opacity: 0;
    visibility: hidden;

    transform: translateY(-8px);

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

    z-index: 9999;
}


/* OPEN */

.nav-dropdown.active .nav-dropdown-menu {

    opacity: 1;
    visibility: visible;

    transform: translateY(0);
}


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

.nav-dropdown-menu a {

    display: flex;

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

    padding: 14px 15px;

    border-radius: 11px;

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

    text-decoration: none;

    font-size: 15px;
    font-weight: 500;

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


.nav-dropdown-menu a i {

    font-size: 11px;

    color: #2EE59D;

    opacity: 0;

    transform: translateX(-5px);

    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}


.nav-dropdown-menu a:hover {

    background: rgba(46, 229, 157, 0.10);

    color: #ffffff;

    transform: translateX(2px);
}


.nav-dropdown-menu a:hover i {

    opacity: 1;

    transform: translateX(0);
}