/*!
Theme Name: Teknika WP Theme
Theme URI: http://underscores.me/
Author: Serj
Author URI: http://serhii@teknikacorp.com
Description: Theme for our company website
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: teknika
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Teknika WP Theme is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

@import url('css2.css');

/*<editor-fold desc="Variables">*/
:root
{
    /*<editor-fold desc="Colors">*/
    --clr-primary-txt: #FDFDFD;
    --clr-secondary-txt: #A4A6B0;
    --clr-accent: #3483FA;
    --clr-hover: #0066FF;
    --clr-bg-100: #FFF;
    --clr-highlight: #33363F;
    --clr-disabled: #34353D;
    --clr-header-bg: #2E3039;
    --clr-bg-700: #3D414D;
    --clr-bg-900: #1E1F28;
    /*</editor-fold>*/

    /*<editor-fold desc="Media Calculations">*/
    /* --- Header Logo Width --- */
    --h-lw-COF: calc((var(--STOP) - var(--hg-pv-START)) / (var(--h-lw-MAX) - var(--h-lw-MIN))); /*--- Value growth factor */
    --header-lw: min(max(var(--h-lw-MIN) * 1px, ((100vw - var(--hg-pv-START) * 1px) / var(--h-lw-COF)) + var(--h-lw-MIN) * 1px), var(--h-lw-MAX) * 1px);

    /* --- Header Height --- */
    --h-h-COF: calc((var(--STOP) - var(--hg-pv-START)) / (var(--h-h-MAX) - var(--h-h-MIN))); /*--- Value growth factor */
    --header-height: min(max(var(--h-h-MIN) * 1px, ((100vw - var(--hg-pv-START) * 1px) / var(--h-h-COF)) + var(--h-h-MIN) * 1px), var(--h-h-MAX) * 1px);

    /* --- Header Vertical Paddings --- */
    --h-vp-COF: calc((var(--STOP) - var(--hg-pv-START)) / (var(--h-vp-MAX) - var(--h-vp-MIN))); /*--- Value growth factor */
    --header-vp: min(max(var(--h-vp-MIN) * 1px, ((100vw - var(--hg-pv-START) * 1px) / var(--h-vp-COF)) + var(--h-vp-MIN) * 1px), var(--h-vp-MAX) * 1px);

    /* --- Header Horizontal Paddings --- */
    --h-hp-COF: calc((var(--STOP) - var(--hg-pv-START)) / (var(--h-hp-MAX) - var(--h-hp-MIN))); /*--- Value growth factor */
    --header-hp: min(max(var(--h-hp-MIN) * 1px, ((100vw - var(--hg-pv-START) * 1px) / var(--h-hp-COF)) + var(--h-hp-MIN) * 1px), var(--h-hp-MAX) * 1px);

    /* --- Containers Horizontal Paddings --- */
    --cont-hp-COF: calc((var(--STOP) - var(--hg-pv-START)) / (var(--cont-hp-MAX) - var(--cont-hp-MIN))); /*--- Value growth factor */
    --container-hp: min(max(var(--cont-hp-MIN) * 1px, ((100vw - var(--hg-pv-START) * 1px) / var(--cont-hp-COF)) + var(--cont-hp-MIN) * 1px), var(--cont-hp-MAX) * 1px);

    /* --- footer Vertical Paddings --- */
    --f-vp-COF: calc((var(--STOP) - var(--hg-pv-START)) / (var(--f-vp-MAX) - var(--f-vp-MIN))); /*--- Value growth factor */
    --footer-vp: min(max(var(--f-vp-MIN) * 1px, ((100vw - var(--hg-pv-START) * 1px) / var(--f-vp-COF)) + var(--f-vp-MIN) * 1px), var(--f-vp-MAX) * 1px);
    /*</editor-fold>*/
}

/*</editor-fold>*/

/*<editor-fold desc="Basics">*/

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus
{
    -webkit-text-fill-color: var(--clr-primary-txt);
    -webkit-box-shadow: none;
    color: var(--clr-primary-txt);
    transition: background-color 5000s ease-in-out 0s;
}

*
{
    margin: 0;
    padding: 0;
    list-style-type: none;
    box-sizing: border-box;
}

body
{
    font-family: 'Red Hat Text', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 1.6;
    color: var(--clr-secondary-txt);
    background-color: var(--clr-bg-900);
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6
{
    color: var(--clr-bg-100);
}

a, button, input[type="button"], input[type="submit"]
{
    cursor: pointer;
}

a, a:visited
{
    color: var(--clr-accent);
    text-decoration: none;
    transition: color .3s linear;
}

a:hover, a:focus, a:active
{
    color: var(--clr-hover);
}

/*input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible*/
/*{*/
/*    outline: 1px dashed var(--clr-accent);*/
/*    box-shadow: 0 0 10px 1px var(--clr-accent);*/
/*}*/

.mb-0
{
    margin-bottom: 0 !important;
}

.wp-block-image
{
    margin: 0;
}

.wp-block-button > *:not(p),
.btn
{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 18px 43px;
    background-color: var(--clr-accent) !important;
    color: var(--clr-bg-100) !important;
    border: 2px solid var(--clr-accent);
    box-sizing: border-box;
    border-radius: 80px;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.4;
    transition: all .3s linear;
}

.wp-block-button > *:not(p):hover,
.wp-block-button > *:not(p):active,
.wp-block-button > *:not(p):focus,
.btn:hover,
.btn:active,
.btn:focus
{
    border-color: var(--clr-hover) !important;
    background-color: var(--clr-hover) !important;
}

.wp-block-button.is-style-outline > *,
.btn.btn-linen
{
    background-color: transparent !important;
    color: var(--clr-accent) !important;
}

.wp-block-button.is-style-outline > *:hover,
.wp-block-button.is-style-outline > *:active,
.wp-block-button.is-style-outline > *:focus,
.btn.btn-linen:hover,
.btn.btn-linen:active,
.btn.btn-linen:focus
{
    color: var(--clr-hover);
    border-color: var(--clr-hover);
    background-color: transparent;
}

.arrow__link > *
{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    font-size: 18px;
    color: var(--clr-accent);
    line-height: 25px;
    letter-spacing: 0.03em;
    transition: color .3s linear;
}

.arrow__link > *:hover,
.arrow__link > *:active,
.arrow__link > *:focus
{
    color: var(--clr-hover);
}

.arrow__link > ::after
{
    content: '';
    display: inline-block;
    width: 50px;
    height: 50px;
    margin-left: 20px;
    background-color: var(--clr-accent);
    -webkit-mask: url(../image/arrow-bordered.svg);
    mask: url(../image/arrow-bordered.svg);
    -webkit-mask-size: cover;
    mask-size: contain;
    transition: background-color .3s linear;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.arrow__link > *:hover::after,
.arrow__link > *:active::after,
.arrow__link > *:focus::after
{
    background-color: var(--clr-hover);
}

.arrow__round-link > *
{
    display: inline-flex;
    width: 54px;
    height: 54px;
    justify-content: center;
    align-items: center;
    font-size: 0;
    border-radius: 50%;
    background-color: var(--clr-accent);
    transition: background .3s linear;
}

.arrow__round-link > *:hover,
.arrow__round-link > *:active,
.arrow__round-link > *:focus
{
    background-color: var(--clr-hover);
}

.arrow__round-link > *::after
{
    content: '';
    width: 6px;
    height: 12px;
    background-image: url("../image/arrow.svg");
    background-position: center center;
    background-size: cover;
}

#page
{
    display: flex;
    flex-direction: column;
}

footer
{
    margin-top: auto;
}

.container
{
    margin-left: auto;
    margin-right: auto;
    max-width: 1270px;
    padding-left: var(--container-hp);
    padding-right: var(--container-hp);
}

.standart-section
{
    padding-top: min(max(40px, 0.42rem + 6.94vw), 60px);
    padding-bottom: min(max(40px, 0.42rem + 6.94vw), 60px);
    position: relative;
}

.text-center
{
    text-align: center;
}

/*</editor-fold>*/

/*<editor-fold desc="Typography">*/
h1
{
    font-weight: bold;
    color: var(--clr-primary-txt, #FDFDFD);
    letter-spacing: -0.6px;
    --global-h1-START: 480; /*--- Resolution at which the value STARTS to rise */
    --global-h1-STOP: 700; /*--- Resolution at which the value STOPS to rise */

    /*--- Dynamic font size ---*/
    --global-h1-fz-MIN: 32; /*--- Minimum value -- will be reached on --START resolution */
    --global-h1-fz-MAX: 36; /*--- Maximum value -- will be reached on --STOP resolution */
    --global-h1-fz-COF: calc((var(--global-h1-STOP) - var(--global-h1-START)) / (var(--global-h1-fz-MAX) - var(--global-h1-fz-MIN))); /*--- Value growth factor */
    font-size: min(max(calc(var(--global-h1-fz-MIN) * 1px), calc(((100vw - var(--global-h1-START) * 1px) / var(--global-h1-fz-COF)) + var(--global-h1-fz-MIN) * 1px)), calc(var(--global-h1-fz-MAX) * 1px));

    /*--- Dynamic line height ---*/
    --global-h1-lh-MIN: 38; /*--- Minimum value -- will be reached on --START resolution */
    --global-h1-lh-MAX: 43; /*--- Maximum value -- will be reached on --STOP resolution */
    --global-h1-lh-COF: calc((var(--global-h1-STOP) - var(--global-h1-START)) / (var(--global-h1-lh-MAX) - var(--global-h1-lh-MIN))); /*--- Value growth factor */
    line-height: min(max(calc(var(--global-h1-lh-MIN) * 1px), calc(((100vw - var(--global-h1-START) * 1px) / var(--global-h1-lh-COF)) + var(--global-h1-lh-MIN) * 1px)), calc(var(--global-h1-lh-MAX) * 1px));

    /*--- Dynamic margin bottom ---*/
    --global-h1-mb-MIN: 20; /*--- Minimum value -- will be reached on --START resolution */
    --global-h1-mb-MAX: 30; /*--- Maximum value -- will be reached on --STOP resolution */
    --global-h1-mb-COF: calc((var(--global-h1-STOP) - var(--global-h1-START)) / (var(--global-h1-mb-MAX) - var(--global-h1-mb-MIN))); /*--- Value growth factor */
    margin-bottom: min(max(calc(var(--global-h1-mb-MIN) * 1px), calc(((100vw - var(--global-h1-START) * 1px) / var(--global-h1-mb-COF)) + var(--global-h1-mb-MIN) * 1px)), calc(var(--global-h1-mb-MAX) * 1px));
}

h2
{
    font-weight: bold;
    color: var(--clr-primary-txt, #FDFDFD);
    letter-spacing: 0.005em;
    --global-h2-START: 480; /*--- Resolution at which the value STARTS to rise */
    --global-h2-STOP: 700; /*--- Resolution at which the value STOPS to rise */

    /*--- Dynamic font size ---*/
    --global-h2-fz-MIN: 28; /*--- Minimum value -- will be reached on --START resolution */
    --global-h2-fz-MAX: 32; /*--- Maximum value -- will be reached on --STOP resolution */
    --global-h2-fz-COF: calc((var(--global-h2-STOP) - var(--global-h2-START)) / (var(--global-h2-fz-MAX) - var(--global-h2-fz-MIN))); /*--- Value growth factor */
    font-size: min(max(calc(var(--global-h2-fz-MIN) * 1px), calc(((100vw - var(--global-h2-START) * 1px) / var(--global-h2-fz-COF)) + var(--global-h2-fz-MIN) * 1px)), calc(var(--global-h2-fz-MAX) * 1px));

    /*--- Dynamic line height ---*/
    --global-h2-lh-MIN: 34; /*--- Minimum value -- will be reached on --START resolution */
    --global-h2-lh-MAX: 38; /*--- Maximum value -- will be reached on --STOP resolution */
    --global-h2-lh-COF: calc((var(--global-h2-STOP) - var(--global-h2-START)) / (var(--global-h2-lh-MAX) - var(--global-h2-lh-MIN))); /*--- Value growth factor */
    line-height: min(max(calc(var(--global-h2-lh-MIN) * 1px), calc(((100vw - var(--global-h2-START) * 1px) / var(--global-h2-lh-COF)) + var(--global-h2-lh-MIN) * 1px)), calc(var(--global-h2-lh-MAX) * 1px));

    /*--- Dynamic margin bottom ---*/
    --global-h2-mb-MIN: 32; /*--- Minimum value -- will be reached on --START resolution */
    --global-h2-mb-MAX: 62; /*--- Maximum value -- will be reached on --STOP resolution */
    --global-h2-mb-COF: calc((var(--global-h2-STOP) - var(--global-h2-START)) / (var(--global-h2-mb-MAX) - var(--global-h2-mb-MIN))); /*--- Value growth factor */
    margin-bottom: min(max(calc(var(--global-h2-mb-MIN) * 1px), calc(((100vw - var(--global-h2-START) * 1px) / var(--global-h2-mb-COF)) + var(--global-h2-mb-MIN) * 1px)), calc(var(--global-h2-mb-MAX) * 1px));
}

h3
{
    font-weight: bold;
    color: var(--clr-primary-txt, #FDFDFD);
    letter-spacing: 0.005em;
    --global-h3-START: 480; /*--- Resolution at which the value STARTS to rise */
    --global-h3-STOP: 700; /*--- Resolution at which the value STOPS to rise */

    /*--- Dynamic font size ---*/
    --global-h3-fz-MIN: 20; /*--- Minimum value -- will be reached on --START resolution */
    --global-h3-fz-MAX: 22; /*--- Maximum value -- will be reached on --STOP resolution */
    --global-h3-fz-COF: calc((var(--global-h3-STOP) - var(--global-h3-START)) / (var(--global-h3-fz-MAX) - var(--global-h3-fz-MIN))); /*--- Value growth factor */
    font-size: min(max(calc(var(--global-h3-fz-MIN) * 1px), calc(((100vw - var(--global-h3-START) * 1px) / var(--global-h3-fz-COF)) + var(--global-h3-fz-MIN) * 1px)), calc(var(--global-h3-fz-MAX) * 1px));

    /*--- Dynamic line height ---*/
    --global-h3-lh-MIN: 28; /*--- Minimum value -- will be reached on --START resolution */
    --global-h3-lh-MAX: 32; /*--- Maximum value -- will be reached on --STOP resolution */
    --global-h3-lh-COF: calc((var(--global-h3-STOP) - var(--global-h3-START)) / (var(--global-h3-lh-MAX) - var(--global-h3-lh-MIN))); /*--- Value growth factor */
    line-height: min(max(calc(var(--global-h3-lh-MIN) * 1px), calc(((100vw - var(--global-h3-START) * 1px) / var(--global-h3-lh-COF)) + var(--global-h3-lh-MIN) * 1px)), calc(var(--global-h3-lh-MAX) * 1px));

}

@media only screen and (min-width: 1024px)
{
    h1
    {
        letter-spacing: -0.4px;

        --global-h1-START: 1024; /*--- Resolution at which the value STARTS to rise */
        --global-h1-STOP: 1200; /*--- Resolution at which the value STOPS to rise */

        /*--- Dynamic font size ---*/
        --global-h1-fz-MIN: 36; /*--- Minimum value -- will be reached on --START resolution */
        --global-h1-fz-MAX: 50; /*--- Maximum value -- will be reached on --STOP resolution */

        /*--- Dynamic line height ---*/
        --global-h1-lh-MIN: 43; /*--- Minimum value -- will be reached on --START resolution */
        --global-h1-lh-MAX: 60; /*--- Maximum value -- will be reached on --STOP resolution */

        /*--- Dynamic margin bottom ---*/
        margin-bottom: 30px;
    }

    h2
    {
        letter-spacing: -0.4px;

        --global-h2-START: 1024; /*--- Resolution at which the value STARTS to rise */
        --global-h2-STOP: 1200; /*--- Resolution at which the value STOPS to rise */

        /*--- Dynamic font size ---*/
        --global-h2-fz-MIN: 32; /*--- Minimum value -- will be reached on --START resolution */
        --global-h2-fz-MAX: 36; /*--- Maximum value -- will be reached on --STOP resolution */

        /*--- Dynamic line height ---*/
        --global-h2-lh-MIN: 38; /*--- Minimum value -- will be reached on --START resolution */
        --global-h2-lh-MAX: 43; /*--- Maximum value -- will be reached on --STOP resolution */

        /*--- Dynamic margin bottom ---*/
        margin-bottom: 57px;
    }
}

/*</editor-fold>*/

/*<editor-fold desc="Header">*/
#masthead
{
    
    padding-top: var(--header-vp);
    padding-bottom: var(--header-vp);
    padding-left: var(--header-hp);
    padding-right: var(--header-hp);
    display: grid;
    grid-template-columns: var(--header-lw) 1fr;
    align-items: center;
    justify-content: space-between;
    position: relative;
    top: 0;
    left: 0;
    width: 100vw;
    z-index: 100;
    background-color: var(--clr-header-bg);
}

.site-branding
{
    display: flex;
}

.main-logo
{
    background-color: var(--clr-bg-100);
    -webkit-mask: url(../image/main_logo.svg) no-repeat center / cover;
    mask: url(../image/main_logo.svg) no-repeat center / cover;
    font-size: 0;
    position: relative;
    top: -1px;
    display: inline-block;
    cursor: pointer;
}

.main-logo img
{
    opacity: 0;
    max-width: 100%;
}

@media only screen and (max-width: 767px)
{

    .header-service-part
    {
        display: none;
    }

}

@media only screen and (min-width: 768px) and (max-width: 1023px)
{

    .header-service-part
    {
        display: none;
    }

}

@media only screen and (min-width: 1024px)
{


    #primary-menu
    {
        display: flex;
        list-style-type: none;
        justify-content: center;
        margin: 0;
        padding: 0;
        align-items: center;
    }

    #primary-menu li
    {
        font-weight: 500;
        font-size: 18px;
        line-height: 1.4;
        letter-spacing: 0.03em;
    }

    #primary-menu li:not(:last-of-type)
    {
        margin-right: min(max(25px, calc(-7.53rem + 14.20vw)), 50px);
    }

    #primary-menu a
    {
        position: relative;
        color: var(--clr-bg-100);
    }

    #primary-menu a::after
    {
        width: 0;
        height: 2px;
        left: 0;
        bottom: -14px;
        background: var(--clr-bg-100);
        position: absolute;
        opacity: 0;
        transition-property: bottom, opacity, background-color;
        transition-timing-function: ease-in;
        transition-duration: .2s;
        transition-delay: .3s;
    }

    #primary-menu a:hover
    {
        color: var(--clr-hover)
    }

    #primary-menu a:hover::after
    {
        opacity: 1;
        bottom: -4px;
        background: var(--clr-hover);
        animation: growRight .3s linear forwards;
    }

    #primary-menu a:not(:hover)::after
    {
        animation: fallDown .3s ease-out backwards;
        animation-delay: .6s;
    }

    @keyframes growRight
    {
        from
        {
            width: 0;
            background: var(--clr-bg-100);
            bottom: -4px;
            opacity: 1;
        }
        to
        {
            width: 100%;
            bottom: -4px;
            opacity: 1;
            background: var(--clr-hover);
        }
    }

    @keyframes fallDown
    {
        from
        {
            width: 100%;
            background: var(--clr-hover);
            bottom: -4px;
            opacity: 1;
        }
        to
        {
            width: 100%;
            bottom: -14px;
            opacity: 0;
            background: var(--clr-bg-100);
        }
    }

    .header-service-part
    {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 60px;
        padding-left: 20px;
    }
}

/*</editor-fold>*/

/*<editor-fold desc="Mobile Menu">*/

#burger-btn
{
    display: none;
}

@media only screen and (max-width: 1023px)
{

    .mob-menu-open
    {
        overflow: hidden;
    }

    #site-navigation
    {
        display: flex;
        justify-content: flex-end;
    }

    #burger-btn
    {
        display: flex;
        height: 20px;
        width: 24px;
        position: relative;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        margin-right: 4px;
    }

    .burger-line
    {
        background-color: var(--clr-bg-100);
        position: absolute;
        right: 0;
        width: 100%;
        display: inline-block;
        height: 2px;
        transition: width .2s ease-in;
    }

    .burger-line:after,
    .burger-line:before
    {
        content: '';
        background-color: var(--clr-bg-100);
        position: absolute;
        top: -9px;
        right: 0;
        width: 24px;
        display: inline-block;
        height: 2px;
        transition: top .2s ease-in, transform .2s ease-in;
    }

    .burger-line:after
    {
        top: 9px;
    }

    #primary-menu
    {
        position: fixed;
        top:122px;
        background-color: var(--clr-bg-900);
        width: 100%;
        left: 0;
        transform: translateX(100%);
        transition: transform .2s ease-in;
        --pt: min(max(0.1px, calc(-3.76rem + 18.80vh)), 100px);
        --pb: min(max(46px, calc(0.84rem + 10.15vh)), 100px);
        overflow-y: auto;
    }

    #primary-menu li
    {
        border-top: 1px solid var(--clr-bg-700);
    }

    #primary-menu li:last-of-type
    {
        border-bottom: 1px solid var(--clr-bg-700);
    }

    #primary-menu li a
    {
        --pt: min(max(10px, calc(-0.43rem + 5.26vh)), 38px);
        --pi: min(max(10px, calc(-0.88rem + 7.52vh)), 50px);
        --pb: min(max(10px, calc(-0.35rem + 4.89vh)), 36px);
        padding:20px;
        font-weight: 500;
        font-size: 18px;
        line-height: 1.4;
        letter-spacing: 0.03em;
        color: var(--clr-primary-txt);
        display: block;
    }

    .mob-menu-open .burger-line
    {
        width: 0;
    }

    .mob-menu-open .burger-line:after
    {
        top: 0;
        transform: rotate(45deg);
    }

    .mob-menu-open .burger-line:before
    {
        top: 0;
        transform: rotate(-45deg);
    }

    .mob-menu-open #primary-menu
    {
        transform: translateX(0);
    }
}

/*</editor-fold>*/

/*<editor-fold desc="Footer">*/
footer
{
    padding-top: var(--footer-vp);
    padding-bottom: var(--footer-vp);
    background-color: var(--clr-highlight);
}

footer h4
{
    color: var(--clr-primary-txt);
    font-weight: normal;
    font-size: 18px;
    line-height: 1.2;
    letter-spacing: 0.04em;
    margin-top: 0;
    text-transform: uppercase;
}

footer h5
{
    font-size: 18px;
    line-height: 1.6;
    font-weight: normal;
    text-transform: capitalize;
    letter-spacing: -0.5px;
}

footer hr
{
    display: none;
}

footer a:not(:hover)
{
    color: var(--clr-secondary-txt);
}

.contacts-grid
{
    display: grid;
}

.contacts-grid a, .contacts-grid p
{
    font-size: 16px;
    line-height: 160%;
}

.local_contacts_grid
{
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

#footer-nav
{
    margin-top: 100px;
}

#footer-menu
{
    margin: 0;
    padding: 0;
    list-style: none;
}

#footer-menu li
{
    display: inline-block;
    font-size: 16px;
    letter-spacing: -0.3px;
}

#footer-menu li:not(:last-child)
{
    margin-right: 70px;
}

#social-links
{
    margin: 20px 0 0;
    padding: 0;
    list-style-type: none;
}

#social-links li
{
    display: inline-block;
}

#social-links li:not(:last-child)
{
    margin-right: 13px;
}

#social-links a
{
    transition: background-color .3s linear;
}

a.dou-social
{
    margin: 0;
    width: 24px;
    height: 24px;
    display: inline-block;
    background-color: #FFFFFF;
    -webkit-mask: url(../image/dou_icon.svg) no-repeat center;
    mask: url(../image/dou_icon.svg) no-repeat center;
}

a.linkedin-social
{
    margin: 0;
    width: 24px;
    height: 24px;
    display: inline-block;
    background-color: #FFFFFF;
    -webkit-mask: url(../image/linkedin_icon.svg) no-repeat center;
    mask: url(../image/linkedin_icon.svg) no-repeat center;
}

a.linkedin-social:hover,
a.dou-social:hover
{
    background-color: var(--clr-hover);
}

@media only screen and (max-width: 767px)
{
    footer
    {
        text-align: center;
    }

    .contacts-grid
    {
        grid-template-columns: 1fr;
        gap: 52px;
    }

    footer h4
    { /* ---Dynamic Margin Bottom --- */
        --h4-mb-MIN: 24; /*--- Minimum value -- will be reached on --START resolution */
        --h4-mb-MAX: 40; /*--- Maximum value -- will be reached on --STOP resolution */
        --h4-mb-COF: calc((var(--STOP) - var(--hg-pv-START)) / (var(--h4-mb-MAX) - var(--h4-mb-MIN))); /*--- Value growth factor */
        margin-bottom: min(max(var(--h4-mb-MIN) * 1px, ((100vw - var(--hg-pv-START) * 1px) / var(--h4-mb-COF)) + var(--h4-mb-MIN) * 1px), var(--h4-mb-MAX) * 1px);
    }

    footer h5
    {
        margin-bottom: 12px;
    }

    .contacts-grid a:not(:last-child), .contacts-grid p:not(:last-child)
    {
        margin: 0 0 4px;
    }

    .local_contacts_grid
    {
        flex-direction: column;
    }

    #footer-menu li
    {
        display: block;
    }

    #footer-menu li:not(:last-child)
    {
        margin-right: unset;
        margin-bottom: 16px;
    }
}

@media only screen and (min-width: 768px)
{
    footer
    {
        text-align: left;
    }

    footer h4
    {
        margin-bottom: 40px;
    }

    footer h5
    {
        margin-bottom: 15px;
    }

    footer hr
    {
        box-sizing: content-box;
        height: 0;
        overflow: visible;
        width: 100px;
        margin: 54px 0 31px;
        border: 1px solid var(--clr-primary-txt);
    }

    .contacts-grid a, .contacts-grid p
    {
        margin: 10px 0;
    }

    .local_contacts_right,
    .local_contacts_left
    {
        width: 100%;
    }

    .local_contacts_grid
    {
        flex-direction: row;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1023px)
{
    .contacts-grid
    {
        grid-template-columns: 30% 1fr;
        gap: 30px;
    }

    .local_contacts_grid
    {
        gap: 20px;
    }
}

@media only screen and (min-width: 1023px)
{
    .contacts-grid
    {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 27px;
    }
}

/*</editor-fold>*/

/*<editor-fold desc="Owl Carousel styling">*/
.owl-carousel .owl-nav
{
    margin-top: min(max(20px, -1.48rem + 9.09vw), 40px);
    position: relative;
}

.owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev
{
    position: absolute;
    width: min(max(40px, 2.23rem + 0.91vw), 42px);
    height: min(max(40px, 2.23rem + 0.91vw), 42px);
    border-radius: 50%;
    border: 2px solid var(--clr-highlight);
    font-size: 20px;
    color: var(--clr-accent);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    top: 5px;
}

.owl-carousel .owl-nav button.owl-next
{
    right: 0;
}

.owl-carousel .owl-nav button.owl-next span, .owl-carousel .owl-nav button.owl-prev span
{
    line-height: 1;
    font-size: 0;
    display: inline-block;
    background-color: var(--clr-accent);
    -webkit-mask: url("../image/arrow.svg") center no-repeat;
    mask: url("../image/arrow.svg") center no-repeat;
    width: 8px;
    height: 14px;
    position: relative;
    left: 1px;
}

.owl-carousel .owl-nav button.owl-prev span
{
    transform: rotate(180deg);
    left: -1px;
}

.owl-carousel .owl-nav button.owl-next.disabled span, .owl-carousel .owl-nav button.owl-prev.disabled span
{
    background-color: var(--clr-highlight);
}

.owl-carousel .owl-dots
{
    height: 50px;
    width: calc(100% - 100px);
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.owl-carousel .owl-dots .owl-dot
{
    height: 8px;
    width: 8px;
    border-radius: 50%;
    background-color: var(--clr-highlight);
    transition: background .2s linear, width .2s linear;
}

.owl-carousel .owl-dots .owl-dot.active
{
    background-color: var(--clr-accent);
    border-radius: 20px;
    width: 20px;
}

.owl-carousel .owl-dots.disabled, .owl-carousel .owl-nav.disabled
{
    display: block;
    opacity: 0;
    pointer-events: none;
}

.hidden-data-set
{
    display: none;
}

.tk-technologies__filter
{
    margin-bottom: min(max(25px, -7.44rem + 18.75vw), 73px);
    margin-left: -5px;
}

.tk-technologies__filter button
{
    margin-left: 5px;
    margin-bottom: 5px;
    background: var(--clr-highlight);
    border-radius: 4px;
    border: none;
    padding: 2px 12px;
    font-weight: 500;
    font-size: 16px;
    line-height: 26px;
    color: var(--clr-secondary-txt);
    transition: background .2s linear, color .2s linear;
}

.tk-technologies__filter button.active
{
    background: var(--clr-accent);
    color: var(--clr-bg-100);
    pointer-events: none;
}

.tk-technologies__filter button:hover
{
    background: var(--clr-hover);
    color: var(--clr-bg-100);
}

/*</editor-fold>*/

/*<editor-fold desc="Contact Form 7 Styles">*/
.contact-form_grid
{
    display: grid;
    grid-template-columns: 1fr;
    margin-top: min(max(50px, calc(2.08rem + 3.47vw)), 60px);
}

.contact-form_grid br
{
    display: none;
}

.contact-form_grid .btn-holder,
.contact-form_grid .textarea-holder
{
    grid-column: 1;
}

.contact-form_grid .btn-holder
{
    /*text-align: right;*/
    /*display: flex;*/
    /*flex-direction: row-reverse;*/
    /*justify-content: flex-start;*/
    /*margin-top: -27px;*/
    /*align-items: center;*/
}

@media only screen and (max-width: 767px)
{
    .contact-form_grid input[type="submit"]
    {
        width: 100%;
    }
}

.contact-form_grid textarea,
.contact-form_grid input:not([type="submit"])
{
    border: none;
    border-bottom: 1px solid var(--clr-secondary-txt);
    background-color: transparent !important;
    width: 100%;
    font-weight: 500;
    font-size: min(max(18px, calc(0.92rem + 0.69vw)), 20px);
    line-height: 1.6;
    color: var(--clr-primary-txt) !important;
    padding-top: 16px;
    padding-bottom: 8px;
    margin-bottom: 30px;
}

.contact-form_grid textarea
{
    height: 60px;
    resize: vertical;
    margin-bottom: 46px;
}

.contact-form_grid label
{
    position: relative;
    display: block;
}

.contact-form_grid .dynamic-placeholder
{
    position: absolute;
    top: 17px;
    left: 0;
    letter-spacing: -0.4px;
    font-weight: 500;
    transition: all .1s ease-in-out;
    font-size: min(max(18px, calc(0.92rem + 0.69vw)), 20px);
    line-height: 1.6;
    color: var(--clr-secondary-txt);
}

.contact-form_grid .filled textarea,
.contact-form_grid .filled input:not([type="submit"])
{
    border-bottom: 1px solid var(--clr-primary-txt);
}

.contact-form_grid .filled:focus-within textarea,
.contact-form_grid .filled:focus-within input:not([type="submit"])
{
    border-bottom: 2px solid var(--clr-accent);
}

.contact-form_grid .filled .dynamic-placeholder
{
    font-size: 14px;
    /*background-color: var(--background-color);*/
    padding: 0 0;
    top: -9px;
    z-index: 1;
    left: 0;
}

.contact-form_grid .filled:focus-within .dynamic-placeholder
{
    color: var(--accent-color);
}

.contact-form_grid input:focus-visible, .contact-form_grid textarea:focus-visible
{
    outline: 0 dashed var(--clr-accent);
    box-shadow: none;
}


.wpcf7 form .wpcf7-response-output
{
    max-width: calc(100% - 193px);
    margin-top: -40px;
    margin-bottom: 0;
}

.wpcf7-not-valid-tip
{
    color: #dc3232 !important;
    display: block !important;
    font-size: 13px !important;
    background-color: var(--background-color);
    padding: 0 6px;
    top: 31px;
    z-index: 1;
    right: -5px;
    position: absolute;
    bottom: -22px;
    width: 100%;
    text-align: right;
}

.wpcf7-not-valid
{
    border-color: #dc3232 !important;
}

.wpcf7 .ajax-loader
{
    background-color: transparent;
}

.wpcf7 .ajax-loader::before
{
    background-color: var(--clr-accent);
}

.wpcf7 form.sent .wpcf7-response-output
{
    border-color: var(--clr-accent);
}

.wp-block-contact-form-7-contact-form-selector .wpcf7 form.invalid .wpcf7-response-output,
.wp-block-contact-form-7-contact-form-selector .wpcf7 form.unaccepted .wpcf7-response-output,
.wp-block-contact-form-7-contact-form-selector .wpcf7 form.payment-required .wpcf7-response-output
{
    background: var(--clr-accent);
    color: var(--clr-bg-100);
    pointer-events: none;
    border-radius: 4px;
    border: none;
    padding: 12px;
    font-weight: 500;
    font-size: 16px;
    line-height: 26px;
    transition: background .2s linear, color .2s linear;
    margin: 32px 0 0;
}

/*</editor-fold>*/

/*<editor-fold desc="Media Queries">*/
@media only screen and (max-width: 767px)
{

    :root
    {
        /* ---Break Points --- */
        --hg-pv-START: 480; /*--- Resolution at which the value STARTS to rise */
        --STOP: 700; /*--- Resolution at which the value STOPS to rise */

        /* --- Header Logo Width --- */
        --header-lw: 90px;

        /* --- Header Height --- */
        --h-h-MIN: 60; /*--- Minimum value -- will be reached on --START resolution */
        --h-h-MAX: 80; /*--- Maximum value -- will be reached on --STOP resolution */

        /* --- Header Vertical Paddings --- */
        --h-vp-MIN: 16; /*--- Minimum value -- will be reached on --START resolution */
        --h-vp-MAX: 20; /*--- Maximum value -- will be reached on --STOP resolution */

        /* --- Header Horizontal Paddings --- */
        --h-hp-MIN: 16; /*--- Minimum value -- will be reached on --START resolution */
        --h-hp-MAX: 50; /*--- Maximum value -- will be reached on --STOP resolution */

        /* --- Container Horizontal Paddings --- */
        --cont-hp-MIN: 16; /*--- Minimum value -- will be reached on --START resolution */
        --cont-hp-MAX: 50; /*--- Maximum value -- will be reached on --STOP resolution */

        /* --- Footer Vertical Paddings --- */
        --f-vp-MIN: 28; /*--- Minimum value -- will be reached on --START resolution */
        --f-vp-MAX: 32; /*--- Maximum value -- will be reached on --STOP resolution */
    }

}

@media only screen and (min-width: 768px) and (max-width: 1023px)
{

    :root
    {
        /* ---Break Points --- */
        --hg-pv-START: 780; /*--- Resolution at which the value STARTS to rise */
        --STOP: 1000; /*--- Resolution at which the value STOPS to rise */

        /* --- Header Logo Width --- */
        --h-lw-MIN: 90; /*--- Minimum value -- will be reached on --START resolution */
        --h-lw-MAX: 120; /*--- Maximum value -- will be reached on --STOP resolution */

        /* --- Header Height --- */
        --h-h-MIN: 80; /*--- Minimum value -- will be reached on --START resolution */
        --h-h-MAX: 105; /*--- Maximum value -- will be reached on --STOP resolution */

        /* --- Header Vertical Paddings --- */
        --header-vp: 20px;

        /* --- Header Horizontal Paddings --- */
        --header-hp: 50px;

        /* --- Container Horizontal Paddings --- */
        --container-hp: 50px;

        /* --- Footer Vertical Paddings --- */
        --f-vp-MIN: 32; /*--- Minimum value -- will be reached on --START resolution */
        --f-vp-MAX: 60; /*--- Maximum value -- will be reached on --STOP resolution */
    }
}

@media only screen and (min-width: 768px)
{

    .standart-section
    {
        padding-top: min(max(60px, -1.70rem + 8.52vw), 75px);
        padding-bottom: min(max(60px, -1.70rem + 8.52vw), 75px);
    }

    .owl-carousel.with-link .owl-nav
    {
        width: 115px;
    }

    .owl-carousel.with-link .owl-dots
    {
        width: calc(50% - 115px);
        /*margin-left: 100px;*/
    }

    .owl-carousel.with-link + .arrow__link
    {
        text-align: right;
        width: 50%;
        margin-left: auto;
        margin-top: -50px;
        z-index: 1;
        position: relative;
    }
}

@media only screen and (min-width: 1024px)
{

    :root
    {
        /* ---Break Points --- */
        --hg-pv-START: 1280; /*--- Resolution at which the value STARTS to rise */
        --STOP: 1400; /*--- Resolution at which the value STOPS to rise */

        /* --- Header Logo Width --- */
        --header-lw: 210px;

        /* --- Header Height --- */
        --header-height: 105px;

        /* --- Header Vertical Paddings --- */
        --header-vp: 20px;

        /* --- Header Horizontal Paddings --- */
        --h-hp-MIN: 50; /*--- Minimum value -- will be reached on --START resolution */
        --h-hp-MAX: 100; /*--- Maximum value -- will be reached on --STOP resolution */

        /* --- Container Horizontal Paddings --- */
        --container-hp: 50px;

        /* --- Footer Vertical Paddings --- */
        --footer-vp: 50px;
    }

}

/*</editor-fold>*/

/*<editor-fold desc="Legal Pages Styles">*/
.legal-page h1
{
    margin-top: min(max(32px, calc(-4.86rem + 14.29vw)), 64px); /* 768-992 */
    margin-bottom: min(max(32px, calc(-4.86rem + 14.29vw)), 64px); /* 768-992 */
    text-align: center;
}

.legal-page h2
{
    margin-top: min(max(16px, calc(-2.43rem + 7.14vw)), 32px); /* 768-992 */
    margin-bottom: min(max(16px, calc(-2.43rem + 7.14vw)), 32px); /* 768-992 */
}

.legal-page h3
{
    margin-top: min(max(8px, calc(-1.21rem + 3.57vw)), 16px); /* 768-992 */
    margin-bottom: min(max(8px, calc(-1.21rem + 3.57vw)), 16px); /* 768-992 */
}

.legal-page p
{
    margin-bottom: min(max(8px, calc(-1.21rem + 3.57vw)), 16px); /* 768-992 */
}

/*</editor-fold>*/

/*<editor-fold desc="Temporary crutches and fixes">*/
.arrow__link.dont_count
{
    opacity: 0;
    pointer-events: none;
}

.link__more-less,
.tk-technologies__filter.project.complex
{
    display: none !important;
}

.project__intro
{
    font-size: min(max(32px, calc(-1.86rem + 8.04vw)), 50px);
    font-weight: 700;
    line-height: 120%;
    color: var(--clr-primary-txt);
    margin-bottom: 20px;
    margin-top: 0;
}

.project__intro:last-of-type
{
    margin-bottom: min(max(20px, calc(-9.46rem + 22.32vw)), 70px);
}

.BambooHR-ATS-Jobs-Item
{
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 40px;
    margin-bottom: 40px;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid var(--clr-secondary-txt);
}

span.BambooHR-ATS-Location
{
    justify-self: flex-end;
}

.mb-120-40
{
    margin-bottom: min(max(40px, calc(0.42rem + 6.94vw)), 60px);
}

.mb-30-12
{
    margin-bottom: min(max(12px, calc(-0.08rem + 2.78vw)), 20px);
}

.design-process p
{
    max-width: 750px;
    font-size: min(max(16px, calc(0.58rem + 1.39vw)), 20px);
}

.design-process h3
{
    font-size: min(max(28px, calc(1.33rem + 1.39vw)), 32px);
}

.design-process .text-image-1__grid-right
{
    padding: min(max(16px, calc(-0.46rem + 4.86vw)), 30px);
    background: #33363F;
    border-radius: 0 10px 10px 0;
}

@media only screen and (min-width: 769px)
{
    .mb-120-40
    {
        margin-bottom: min(max(60px, calc(-48.17rem + 113.23vw)), 120px);
    }

    .mb-30-12
    {
        margin-bottom: min(max(20px, calc(0.13rem + 2.32vw)), 30px);
    }

    .design-process p
    {
        font-size: min(max(20px, calc(0.80rem + 0.93vw)), 24px);
    }

    .design-process h3
    {
        font-size: min(max(32px, calc(1.55rem + 0.93vw)), 36px);
    }
}

/*</editor-fold>*/

/*<editor-fold desc="Cookies Banner" />*/
.coockies-html-wrapper
{
    position: fixed;
    bottom: var(--header-vp);
    background: var(--clr-header-bg);
    z-index: 100;
    padding: var(--header-vp);
    margin: auto;
    left: 50%;
    transform: translate(-50%, 150%);
    border-radius: 8px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--header-vp);
    opacity: 0;
    transition-property: transform, opacity;
    transition-timing-function: ease-out;
    transition-duration: .3s;
    border: 1px solid var(--clr-accent);
    width: calc(100% - (var(--container-hp) * 2));
    max-width: 540px;
}

.coockies-html-wrapper.active
{
    transform: translate(-50%, 0);
    opacity: 0;
    display: none !important;

}

button.coockies-close
{
    background: var(--clr-accent);
    border-radius: 4px;
    border: none;
    padding: 2px 12px;
    font-weight: 500;
    font-size: 16px;
    line-height: 26px;
    color: var(--clr-bg-100);
    transition: background .2s linear, color .2s linear;
}

button.coockies-close:hover,
button.coockies-close:active,
button.coockies-close:focus
{
    border-color: var(--clr-hover) !important;
    background-color: var(--clr-hover) !important;
}

/*</editor-fold>*/

/*<editor-fold desc="@supports">*/
@supports not (inset:0)
{
    .owl-carousel .owl-dots .owl-dot:not(:first-child)
    {
        margin-left: 5px;
    }

    .owl-carousel .owl-dots .owl-dot:not(:last-child)
    {
        margin-right: 5px;
    }
}

/*</editor-fold>*/

/*<editor-fold desc="Before-after Slider Section">*/

.before-after-slider-item > div figure:nth-child(2)
{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 50%;
    height: 100%;
    overflow: hidden;
}

.before-after-slider-item > div figure:nth-child(2) img
{
    height: 100%;
    object-position: center left;
    position: absolute;
    width: auto;
    max-width: none;
}

.before-after-switcher
{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 3;
    top: 0;
    -webkit-appearance: none;
    appearance: none;
    background: none;
}

.before-after-switcher::-webkit-slider-thumb
{
    -webkit-appearance: none;
    appearance: none;
    width: 4px;
    height: 100%;
    background: transparent;
    cursor: pointer;
    opacity: 0;
}

.before-after-switcher::-moz-range-thumb
{
    width: 4px;
    height: 100%;
    background: transparent;
    cursor: pointer;
    opacity: 0;
}

.slider-button
{
    position: absolute;
    width: 4px;
    height: 100%;
    left: calc(25% - 4px / 2);
    top: 0;
    background: #3483FA;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.02);
    z-index: 1;
}

input:not(:hover) + .slider-button
{
    animation: style_cta__i4cv1 4s ease-in-out infinite;
}

.slider-button:after,
.slider-button:before
{
    content: '';
    position: absolute;
    width: 10px;
    height: 22px;
    background: #3483FA;
    -webkit-mask: url(../image/Vector.svg);
    mask: url(../image/Vector.svg);
    top: calc(50% - 12px);
}

.slider-button:after
{
    left: 12px;
}


.slider-button:before
{
    right: 12px;
    transform: rotate(180deg);
}

.before-after-tooltip
{
    position: absolute;
    background: #33363F;
    backdrop-filter: blur(2px);
    border-radius: 8px;
    font-weight: 400;
    font-size: 14px;
    line-height: 160%;
    display: flex;
    align-items: center;
    color: #FDFDFD;
    padding: 2px 8px 4px;
    width: max-content;
    z-index: 12;
    top: 40px;
    pointer-events: none;
    transition: opacity .3s .3s linear;
    left: calc(25% - 2px);
    transform: translateX(20px);
}

.before-after-tooltip:before
{
    content: "";
    position: absolute;
    left: -4px;
    top: calc(50% - 5px);
    border-bottom: 6px solid transparent;
    border-right: 6px solid #33363F;
    border-top: 6px solid transparent;
    border-left: unset;
}

input:active ~ .before-after-tooltip
{
    opacity: 0;
}

@keyframes style_cta__i4cv1
{
    0%
    {
        transform: translateX(0)
    }

    30%
    {
        transform: translateX(0)
    }

    35%
    {
        transform: translateX(-10px)
    }

    40%
    {
        transform: translateX(10px)
    }

    45%
    {
        transform: translateX(-10px)
    }

    50%
    {
        transform: translateX(10px)
    }

    55%
    {
        transform: translateX(0)
    }

    to
    {
        transform: translateX(0)
    }
}

/*</editor-fold>*/