/* =========================================================
   SA AUDITORS COMMON NAVBAR
   LEFT BRANDING
========================================================= */

:root {

    --navbar-white: #FFFFFF;
    --navbar-black: #0B0D0C;
    --navbar-green: #174D38;
    --navbar-green-dark: #0D3526;
    --navbar-grey: #68706D;

}


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

.site-navbar {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 104px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 8px 5.5% 0 4.5%;

    z-index: 1000;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.72) 0%,
            rgba(255,255,255,.38) 58%,
            rgba(255,255,255,0) 100%
        );

    backdrop-filter: blur(12px);

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

    transition:
        height .5s ease,
        padding .5s ease,
        background .5s ease;

}


/* =========================================================
   TOP NAVBAR LINE
========================================================= */

.site-navbar::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(23,77,56,.15),
            rgba(23,77,56,.35),
            rgba(23,77,56,.15),
            transparent
        );

}


/* =========================================================
   MOVING LIGHT
========================================================= */

.site-navbar::after {

    content: "";

    position: absolute;

    bottom: -2px;

    left: -18%;

    width: 18%;

    height: 4px;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(57,132,99,.9) 0%,
            rgba(57,132,99,.45) 35%,
            transparent 75%
        );

    filter: blur(2px);

    animation:
        navbarLightSweep
        5s cubic-bezier(.4,0,.2,1)
        infinite;

    pointer-events: none;

}


@keyframes navbarLightSweep {

    0% {

        left: -20%;
        opacity: 0;

    }

    10% {

        opacity: .7;

    }

    45% {

        opacity: 1;

    }

    65% {

        opacity: .75;

    }

    100% {

        left: 105%;
        opacity: 0;

    }

}


/* =========================================================
   CURSOR GLOW
========================================================= */

.site-nav-cursor-glow {

    position: absolute;

    width: 250px;
    height: 250px;

    border-radius: 50%;

    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(45,112,82,.10),
            transparent 68%
        );

    filter: blur(12px);

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

    opacity: 0;

    transition:
        opacity .4s ease;

    z-index: 1;

}


.site-navbar:hover .site-nav-cursor-glow {

    opacity: 1;

}


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

.site-logo {

    position: relative;

    display: flex;

    align-items: center;

    gap: 16px;

    padding: 7px 12px 7px 7px;

    z-index: 5;

    text-decoration: none;

    transform-style: preserve-3d;

    transition:
        transform .45s cubic-bezier(.2,.8,.2,1),
        filter .4s ease;

}


/* LOGO GLOW */

.site-logo::before {

    content: "";

    position: absolute;

    left: -25px;

    top: 50%;

    width: 170px;

    height: 100px;

    transform:
        translateY(-50%)
        scale(.8);

    background:
        radial-gradient(
            ellipse,
            rgba(23,77,56,.13),
            transparent 68%
        );

    filter: blur(16px);

    opacity: 0;

    transition:
        opacity .5s ease,
        transform .6s ease;

    z-index: -1;

}


.site-logo:hover::before {

    opacity: 1;

    transform:
        translateY(-50%)
        scale(1.15);

}


.site-logo:hover {

    transform:
        translate3d(5px,-2px,0)
        rotateX(1deg)
        rotateY(-2deg);

}


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

.site-logo-mark {

    position: relative;

    width: 66px;
    height: 66px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 19px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #174D38 0%,
            #0D3526 55%,
            #09271C 100%
        );

    box-shadow:
        0 12px 28px rgba(23,77,56,.20),
        inset 0 1px 0 rgba(255,255,255,.25);

    transition:
        transform .7s cubic-bezier(.2,.8,.2,1),
        box-shadow .6s ease,
        border-radius .5s ease;

}


/* LOGO SHINE */

.site-logo-mark::before {

    content: "";

    position: absolute;

    width: 120px;

    height: 35px;

    left: -130px;

    top: 15px;

    background:
        linear-gradient(
            100deg,
            transparent,
            rgba(255,255,255,.75),
            transparent
        );

    transform: rotate(-25deg);

    animation:
        logoLight
        4.5s ease-in-out
        infinite;

}


@keyframes logoLight {

    0%,
    45% {

        left: -140px;

    }

    75%,
    100% {

        left: 120px;

    }

}


/* INNER BORDER */

.site-logo-mark::after {

    content: "";

    position: absolute;

    inset: 2px;

    border-radius: 17px;

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

    pointer-events: none;

}


/* LOGO HOVER */

.site-logo:hover .site-logo-mark {

    transform:
        translate3d(0,-5px,15px)
        rotate(-4deg)
        scale(1.08);

    border-radius: 22px;

    box-shadow:
        0 20px 42px rgba(23,77,56,.30),
        0 0 30px rgba(72,140,107,.18),
        inset 0 1px 0 rgba(255,255,255,.35);

}


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

.site-navbar-logo {

    width: 100%;

    height: 100%;

    object-fit: contain;

    position: relative;

    z-index: 2;

    transition:
        transform .7s cubic-bezier(.2,.8,.2,1),
        filter .5s ease;

}


.site-logo:hover .site-navbar-logo {

    transform:
        scale(1.09)
        rotate(2deg);

    filter:
        brightness(1.12)
        contrast(1.06);

}


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

.site-logo-text {

    display: flex;

    flex-direction: column;

    justify-content: center;

    position: relative;

    min-width: 260px;

}


/* COMPANY NAME */

.site-logo-title {

    position: relative;

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

    font-size: 23px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: .4px;

    background:
        linear-gradient(
            110deg,
            #0B0D0C 10%,
            #174D38 35%,
            #0B0D0C 50%,
            #236B52 70%,
            #0B0D0C 90%
        );

    background-size: 250% auto;

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;

    animation:
        companyColorFlow
        7s linear infinite;

    transition:
        letter-spacing .5s ease,
        transform .5s cubic-bezier(.2,.8,.2,1);

}


@keyframes companyColorFlow {

    0% {

        background-position: 0% center;

    }

    50% {

        background-position: 100% center;

    }

    100% {

        background-position: 0% center;

    }

}


/* UNDERLINE */

.site-logo-title::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -5px;

    width: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            #e7f0ec,
            #f3f5f4,
            transparent
        );

    transition:
        width .7s cubic-bezier(.2,.8,.2,1);

}


.site-logo:hover .site-logo-title {

    letter-spacing: 1.3px;

    transform:
        translateX(4px);

}


.site-logo:hover .site-logo-title::after {

    width: 92%;

}


/* =========================================================
   SUBTITLE
========================================================= */

.site-logo-subtitle {

    margin-top: 8px;

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

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 3.2px;

    color: #68706D;

    white-space: nowrap;

    transition:
        color .45s ease,
        letter-spacing .5s ease,
        transform .5s ease;

}


.site-logo:hover .site-logo-subtitle {

    color: #dae6e1;

    letter-spacing: 4px;

    transform:
        translateX(5px);

}


/* =========================================================
   RIGHT SIDE CONTAINER
========================================================= */

.site-navbar-right {

    display: flex;

    align-items: center;

    gap: 12px;

    position: relative;

    z-index: 5;

}


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

@media (max-width: 1000px) {

    .site-navbar {

        height: 92px;

        padding-left: 3%;

        padding-right: 3%;

    }


    .site-logo-text {

        min-width: 0;

    }


    .site-logo-title {

        font-size: 19px;

    }


    .site-logo-subtitle {

        font-size: 8px;

        letter-spacing: 2.5px;

    }

}


@media (max-width: 700px) {

    .site-navbar {

        top: 0;

        height: 78px;

        padding:
            3px 4% 0 3%;

        background:
            linear-gradient(
                180deg,
                rgba(255,255,255,.84),
                rgba(255,255,255,.38)
            );

        backdrop-filter: blur(14px);

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

    }


    .site-logo {

        gap: 10px;

        padding: 4px;

    }


    .site-logo-mark {

        width: 48px;

        height: 48px;

        border-radius: 14px;

    }


    .site-logo-title {

        font-size: 15px;

        letter-spacing: .2px;

    }


    .site-logo-subtitle {

        font-size: 6.7px;

        letter-spacing: 1.5px;

        margin-top: 5px;

    }


    .site-logo:hover .site-logo-title {

        letter-spacing: .6px;

    }


    .site-logo:hover .site-logo-subtitle {

        letter-spacing: 1.8px;

    }

}