:root {
    /* BRAND COLORS */
    --grey-3: #080808;
    --grey-10: #1A1A1A;
    --grey-12: #1F1F1F;
    --grey-15: #262626;
    --grey-30: #4D4D4D;

    --text-50: #808080;
    --text-70: #B3B3B3;
    --text-90: #E5E5E5;

    /* NEUTRAL COLORS */
    --white: #ffffff;
    --neutral-01: #fafafa;
    --neutral-02: #f2f2f2;
    --neutral-03: #e5e5e5;
    --neutral-04: #d9d9d9;
    --neutral-05: #cccccc;
    --neutral-06: #bfbfbf;
    --neutral-07: #b3b3b3;
    --neutral-08: #a5a5a5;
    --neutral-09: #999999;
    --neutral-10: #8d8d8d;
    --neutral-11: #808080;
    --neutral-12: #737373;
    --neutral-13: #666666;
    --neutral-14: #595959;
    --neutral-15: #4d4d4d;
    --neutral-16: #404040;
    --neutral-17: #343434;
    --neutral-18: #272727;
    --neutral-19: #1a1a1a;
    --neutral-20: #0d0d0d;
    --black: #000000;

    /* SEMANTIC COLORS */
    --red-01: #df3a3f;
    --red-02: #b92c31;
    --red-03: #951d21;
    --red-04: #6b1518;

    --yellow-01: #e5b800;
    --yellow-02: #b28f00;
    --yellow-03: #806600;
    --yellow-04: #665100;

    --green-01: #2eb875;
    --green-02: #29a368;
    --green-03: #248f5b;
    --green-04: #1a6641;


    /* FONT WEIGHT */
    --light: 300;
    --regular: 400;
    --medium: 500;
    --semiBold: 600;
    --bold: 700;
    --extraBold: 800;

    /* FILTERS */
    --filter-black: brightness(0) saturate(100%);
    --filter-white: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(340deg) brightness(104%) contrast(104%);
    --filter-neutral-04: brightness(0) saturate(100%) invert(96%) sepia(0%) saturate(454%) hue-rotate(178deg) brightness(93%) contrast(89%);
    --filter-neutral-05: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(1282%) hue-rotate(231deg) brightness(84%) contrast(88%);
    --filter-neutral-06: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(4414%) hue-rotate(64deg) brightness(82%) contrast(77%);
    --filter-neutral-07: brightness(0) saturate(100%) invert(81%) sepia(5%) saturate(0%) hue-rotate(177deg) brightness(91%) contrast(82%);
    --filter-neutral-10: brightness(0) saturate(100%) invert(62%) sepia(0%) saturate(5826%) hue-rotate(177deg) brightness(93%) contrast(70%);
    --filter-neutral-12: brightness(0) saturate(100%) invert(45%) sepia(4%) saturate(9%) hue-rotate(314deg) brightness(99%) contrast(87%);
    --filter-neutral-19: brightness(0) saturate(100%) invert(6%) sepia(10%) saturate(1492%) hue-rotate(106deg) brightness(92%) contrast(96%);

}

/*-----------------------------------*\
  #DESIGN
\*-----------------------------------*/
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: var(--text-70);
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: var(--medium);
    font-style: normal;
    font-size: 14px;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--grey-3);
    overflow-x: hidden;
}

a {
    text-decoration: none;
    cursor: pointer;
    color: inherit;
}

button {
    cursor: pointer;
    border: 0;
    background: transparent;
    font: inherit;
}

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

main {
    overflow: hidden;
}


.icon12 {
    width: 12px;
    height: 12px;
}

.icon16 {
    width: 16px;
    height: 16px;
}

.icon18 {
    width: 18px;
    height: 18px;
}

.icon20 {
    width: 20px;
    height: 20px;
}

.icon24 {
    width: 24px;
    height: 24px;
}

.icon28 {
    width: 28px;
    height: 28px;
}

.icon32 {
    width: 32px;
    height: 32px;
}

.icon40 {
    width: 40px;
    height: 40px;
}


/*-----------------------------------*\
  #DESIGN
\*-----------------------------------*/


.main-button {
    padding: 16px 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: var(--semiBold);
    color: var(--white);
    border: solid 1px var(--text-70);
    transition: 0.5s;
}


.main-button:is(:hover, :focus-visible, :focus-within) {
    background-color: #FFFFFF1A;
    border: solid 1px var(--white);
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.6);
}


.content-main-container {
    width: 1280px;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 72px;
}

.content-title {
    font-size: 18px;
    font-weight: var(--bold);

}

.content-text-container {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    gap: 40px;
    width: 800px;
}

.content-text {
    font-size: 40px;
    font-weight: var(--extraBold);
    line-height: 150%;
    letter-spacing: 0.5%;
    text-align: start;
    color: var(--white);
}

.content-text span {
    font-size: 40px;
    font-weight: var(--extraBold);
    line-height: 150%;
    letter-spacing: 0.5%;
    text-align: start;
    color: var(--text-50);
}

.content-text-description {
    font-size: 18px;
    font-weight: var(--semiBold);
    line-height: 150%;
    color: var(--text-50);
}


/*-----------------------------------*\
  #NAVBAR
\*-----------------------------------*/

.navbar {
    width: 100%;
    height: 128px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    background-color: var(--black);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 40px;
    transition: transform 260ms ease;
    will-change: transform;
}

.navbar.navbar-hidden {
    transform: translateY(-100%);
}

.navbar-main-container {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 64px;
}

.navbar-logo {
    width: 200px;
}

.navbar-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 120px;
}

.navbar-title {
    font-size: 14px;
    line-height: 160%;
    font-weight: var(--bold);
    max-width: 310px;
    text-align: start;
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.6);
    color: var(--white);
    text-transform: uppercase;
}


.navbar-links-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 48px;

}

.navbar-links-small-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
}

.navbar-link {
    font-size: 14px;
    font-weight: var(--bold);
    transition: 0.5s;
    text-transform: uppercase;
}

.navbar-link:is(:hover, :focus-visible, :focus-within) {
    color: var(--white);
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.6);

}


/*-----------------------------------*\
  #NAVBAR MOBILE
\*-----------------------------------*/
.navbar.mobile {
    display: none;
}

.navbar.mobile {
    width: 100%;
    height: 128px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    background-color: var(--black);
    justify-content: center;
    align-items: center;
    padding: 0 48px;
    transition: transform 260ms ease;
    will-change: transform;
}

.navbar-mobile-main-container {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 64px;
}


.navbar-mobile-right-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 48px;
}

.navbar-hamburger-button {
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    background-color: transparent;
    outline: none;
}

.navbar-hamburger-icon {
    width: 32px;
    height: 32px;
}

.mobile-navbar-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 260ms ease;
}

.mobile-navbar-panel {
    width: min(460px, 100vw);
    height: 100dvh;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1300;
    background-color: var(--black);
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 260ms ease;
    box-shadow: -24px 0 64px rgba(0, 0, 0, 0.4);
}


.mobile-navbar-panel-top-bar {
    width: 100%;
    min-height: 64px;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 32px;
    border-bottom: solid 1px var(--text-50);
}

.mobile-navbar-panel.is-open {
    transform: translateX(0);
}

.mobile-navbar-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

.mobile-navbar-close-button {
    width: 48px;
    height: 48px;
    margin-left: auto;
    border: none;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    cursor: pointer;
}

.mobile-navbar-close-line {
    width: 26px;
    height: 2px;
    background-color: var(--white);
    position: absolute;
}

.mobile-navbar-close-line:first-child {
    transform: rotate(45deg);
}

.mobile-navbar-close-line:last-child {
    transform: rotate(-45deg);
}

.mobile-navbar-panel-content {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    gap: 32px;
    padding: 48px 32px;
}

.mobile-navbar-link {
    font-size: 20px;
    font-weight: var(--bold);
    color: var(--text-90);
    text-transform: uppercase;
    transition: 0.5s;
    line-height: 22px;

}


.mobile-navbar-link:is(:hover, :focus-visible, :focus-within) {
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.6);
    color: var(--white);
    font-size: 22px;

}

body.mobile-navbar-open {
    overflow: hidden;
}


.contact-navbar-panel-button {
    margin-top: 48px;
}



/*-----------------------------------*\
  #FOOTER
\*-----------------------------------*/

.footer-section {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px;
}

.footer-main-container.footer-clear {
    background-color: var(--grey-3);
}


.footer-main-container.footer-clear::before {
    display: none;
}




.footer-main-container {
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background-color: #2A2A2A;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 80px 72px;
}


.footer-main-container::before {
    content: "";
    position: absolute;
    inset: -12%;
    z-index: -1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cfilter id='noise-footer' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.85' numOctaves='1' seed='7' stitchTiles='stitch' result='noise'/%3E%3CfeColorMatrix in='noise' type='saturate' values='0' result='mono'/%3E%3CfeComponentTransfer in='mono' result='threshold'%3E%3CfeFuncR type='discrete' tableValues='0 0 1'/%3E%3CfeFuncG type='discrete' tableValues='0 0 1'/%3E%3CfeFuncB type='discrete' tableValues='0 0 1'/%3E%3CfeFuncA type='table' tableValues='0 0.25'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='64' height='64' fill='%23000000' filter='url(%23noise-footer)'/%3E%3C/svg%3E");
    background-size: 96px 96px;
    background-repeat: repeat;
    background-position: 0 0;
    opacity: 0.8;
    pointer-events: none;
    mix-blend-mode: multiply;
    animation: service-noise-live 16s ease-in-out infinite alternate;
    will-change: transform, background-position, opacity;
    transform: translate3d(0, 0, 0) scale(1.02);
}

.footer-main-width-container {
    width: 1280px;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 80px;
}


.footer-top-container {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 104px;
}

.footer-links-main-container {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    gap: 40px;
}

.footer-title {
    font-size: 20px;
    color: var(--text-50);
    font-weight: var(--bold);
    text-transform: uppercase;

}

.footer-all-links-container {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 64px;
}

.footer-links-container {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    gap: 24px;
}

.footer-link {
    font-size: 20px;
    line-height: 100%;
    font-weight: var(--semiBold);
    text-transform: uppercase;
    color: var(--white);
    transition: 0.5s;
}

.footer-link:is(:hover, :focus-visible, :focus-within) {
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.6);
    font-weight: var(--bold);

}


.footer-contacts-main-container {
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    flex-direction: column;
    gap: 40px;
}

.footer-contact-container {
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    flex-direction: column;
    gap: 24px;
}

.footer-contact-link {
    font-size: 20px;
    line-height: 100%;
    font-weight: var(--medium);
    color: var(--white);
    transition: 0.5s;
}

.footer-contact-link:is(:hover, :focus-visible, :focus-within) {
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.6);
    font-weight: var(--semiBold);

}

.footer-bottom-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 104px;
    width: 100%;
}

.footer-gdpr-container {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 24px;
    flex-direction: column;
}


.footer-gdpr-link {
    font-size: 20px;
    line-height: 100%;
    font-weight: var(--medium);
    color: var(--white);
    transition: 0.5s;
}

.footer-gdpr-link:is(:hover, :focus-visible, :focus-within) {
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.6);
    font-weight: var(--semiBold);

}

.created-by-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;

    font-size: 20px;
    line-height: 100%;
    font-weight: var(--semiBold);
    color: var(--text-70);
    letter-spacing: -1%;
    transition: 0.5s;
}

.logo-codemode {
    height: 16px;
    filter: var(--filter-white);
}

.footer-image-section {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 8px 8px 8px;
    position: relative;
}

.footer-image {
    width: 100%;
    height: auto;
}

.footer-image.mobile {
    display: none;
}

.footer-image-logo {
    position: absolute;
    bottom: 48px;
    left: 96px;
    height: 256px;
}


@media(max-width: 1320px) {



    /*-----------------------------------*\
  #DESIGN
\*-----------------------------------*/


    .content-main-container {
        width: 1000px;
        height: auto;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 48px;
    }

    .content-title {
        font-size: 18px;
        font-weight: var(--bold);

    }

    .content-text-container {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: column;
        gap: 40px;
        width: 700px;
    }

    .content-text {
        font-size: 40px;
        font-weight: var(--extraBold);
        line-height: 150%;
        letter-spacing: 0.5%;
        text-align: start;
        color: var(--white);
    }

    .content-text span {
        font-size: 40px;
        font-weight: var(--extraBold);
        line-height: 150%;
        letter-spacing: 0.5%;
        text-align: start;
        color: var(--text-50);
    }

    .content-text-description {
        font-size: 18px;
        font-weight: var(--semiBold);
        line-height: 150%;
        color: var(--text-50);
    }


    /*-----------------------------------*\
  #FOOTER
\*-----------------------------------*/
    .navbar.desktop {
        display: none;
    }


    .navbar.mobile {
        display: flex;
    }

    /*-----------------------------------*\
  #FOOTER
\*-----------------------------------*/




    .footer-main-container {

        padding: 80px 0px;
    }

    .footer-main-width-container {
        width: 1000px;
        gap: 80px;
    }



    .footer-image-logo {
        position: absolute;
        bottom: 48px;
        left: 96px;
        height: 200px;
    }

}



@media(max-width: 1080px) {

    /*-----------------------------------*\
  #DESIGN
\*-----------------------------------*/


    .content-main-container {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 48px;
    }

    .content-title {
        font-size: 18px;
        font-weight: var(--bold);

    }

    .content-text-container {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: column;
        gap: 40px;
        width: 600px;
    }

    .content-text {
        font-size: 32px;

    }

    .content-text span {
        font-size: 32px;

    }




    /*-----------------------------------*\
  #NAVBAR
\*-----------------------------------*/

    .contact-navbar-btn {
        display: none;
    }


    /*-----------------------------------*\
  #FOOTER
\*-----------------------------------*/




    .footer-main-container {

        padding: 80px 48px;
    }

    .footer-main-width-container {
        width: 100%;
        gap: 80px;
    }



    .footer-image-logo {
        position: absolute;
        bottom: 48px;
        left: 48px;
        height: 160px;
    }

}



@media(max-width: 970px) {

    /*-----------------------------------*\
  #DESIGN
\*-----------------------------------*/


    .content-main-container {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: column;
        gap: 32px;
    }

    .content-title {
        font-size: 18px;
        font-weight: var(--bold);

    }

    .content-text-container {
        width: 100%;
    }

    .content-text {
        font-size: 32px;

    }

    .content-text span {
        font-size: 32px;

    }


    /*-----------------------------------*\
  #NAVBAR
\*-----------------------------------*/

    .navbar.mobile {
        width: 100%;
        height: 64px;
    }


    .contact-navbar-btn {
        height: 44px;
    }


    .navbar-logo.mobile {
        height: 44px;
        width: auto;
    }


    .navbar.mobile {
        padding: 0 32px;
    }




    /*-----------------------------------*\
  #FOOTER
\*-----------------------------------*/




    .footer-main-container {

        padding: 80px 32px;
    }

    .footer-main-width-container {
        width: 100%;
        gap: 64px;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .footer-top-container {
        gap: 64px;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }


    .footer-contacts-main-container {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: column;
        gap: 40px;
    }

    .footer-contact-container {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: column;
        gap: 24px;
    }

    .footer-bottom-container {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: column;
        gap: 64px;
        width: 100%;
    }

    .created-by-container {
        align-self: center;
        justify-self: center;
    }

    .footer-image-logo {
        position: absolute;
        bottom: 32px;
        left: 32px;
        height: 160px;
    }

}


@media(max-width: 700px) {

    /*-----------------------------------*\
  #DESIGN
\*-----------------------------------*/



    .content-title {
        font-size: 16px;
        font-weight: var(--bold);

    }

    .content-text-container {
        width: 100%;
    }

    .content-text {
        font-size: 28px;

    }

    .content-text span {
        font-size: 28px;

    }

    .content-text-description {
        font-size: 16px;
    }


    /*-----------------------------------*\
  #NAVBAR
\*-----------------------------------*/

    .navbar-title.mobile {
        display: none;
    }

    .navbar.mobile {
        padding: 0 20px;
    }



    /*-----------------------------------*\
  #FOOTER
\*-----------------------------------*/




    .footer-main-container {
        padding: 64px 20px;
    }


    .footer-image-logo {
        position: absolute;
        bottom: 20px;
        left: 20px;
        height: 120px;
    }

}

@media(max-width: 510px) {
    .created-by-container {
        font-size: 14px;
    }

    .logo-codemode {
        height: 12px;
    }
}

@media(max-width: 500px) {


    /*-----------------------------------*\
  #DESIGN
\*-----------------------------------*/



    .content-title {
        font-size: 16px;
        font-weight: var(--bold);

    }

    .content-text-container {
        width: 100%;
    }

    .content-text {
        font-size: 22px;

    }

    .content-text span {
        font-size: 22px;

    }

    .content-text-description {
        font-size: 16px;
    }




    /*-----------------------------------*\
  #NAVBAR
\*-----------------------------------*/

    .mobile-navbar-panel {
        width: 100%;
        height: 100dvh;
    }

    .navbar.mobile {
        padding: 0 16px;
    }



    /*-----------------------------------*\
  #FOOTER
\*-----------------------------------*/




    .footer-main-container {
        padding: 64px 16px;
    }

    .footer-title {
        font-size: 14px;
    }

    .footer-link {
        font-size: 14px
    }

    .footer-contact-link {
        font-size: 14px;
        line-height: 140%;
    }

    .footer-gdpr-link {
        font-size: 14px;
    }




    .footer-image.desktop {
        display: none;
    }

    .footer-image.mobile {
        display: block;
    }


    .footer-image-logo {
        bottom: 20px;
        left: 16px;
        height: 140px;
    }

}

@media(max-width: 420px) {
    /*-----------------------------------*\
  #FOOTER
\*-----------------------------------*/

    .footer-image-logo {
        height: 120px;
    }
}

@media(max-width: 375px) {

    /*-----------------------------------*\
  #FOOTER
\*-----------------------------------*/
    .created-by-container {
        align-self: center;
        justify-self: center;
        flex-direction: column;
        gap: 8px;
    }


    .footer-image-logo {
        height: 100px;
    }
}