/* latin */
@font-face {
    font-family: 'Varela Round';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/varelaround/v19/w8gdH283Tvk__Lua32TysjIfp8uP.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    font-display: swap;
}


@font-face {
    font-family: IRANSansX;
    font-style: normal;
    font-weight: 100;
    src: url('../fonts/woff/IRANSansX-Thin.woff') format('woff'), url('../fonts/woff2/IRANSansX-Thin.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: IRANSansX;
    font-style: normal;
    font-weight: 200;
    src: url('../fonts/woff/IRANSansX-UltraLight.woff') format('woff'), url('../fonts/woff2/IRANSansX-UltraLight.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: IRANSansX;
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/woff/IRANSansX-Light.woff') format('woff'), url('../fonts/woff2/IRANSansX-Light.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: IRANSansX;
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/woff/IRANSansX-Medium.woff') format('woff'), url('../fonts/woff2/IRANSansX-Medium.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: IRANSansX;
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/woff/IRANSansX-DemiBold.woff') format('woff'), url('../fonts/woff2/IRANSansX-DemiBold.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: IRANSansX;
    font-style: normal;
    font-weight: 800;
    src: url('../fonts/woff/IRANSansX-ExtraBold.woff') format('woff'), url('../fonts/woff2/IRANSansX-ExtraBold.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: IRANSansX;
    font-style: normal;
    font-weight: 900;
    src: url('../fonts/woff/IRANSansX-Black.woff') format('woff'), url('../fonts/woff2/IRANSansX-Black.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: IRANSansX;
    font-style: normal;
    font-weight: bold;
    src: url('../fonts/woff/IRANSansX-Bold.woff') format('woff'), url('../fonts/woff2/IRANSansX-Bold.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: IRANSansX;
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/woff/IRANSansX-Regular.woff') format('woff'), url('../fonts/woff2/IRANSansX-Regular.woff2') format('woff2');
    font-display: swap;
}


@font-face {
    font-family: fontIcon;
    src: url(../fonts/icomoon.eot);
    src: url(../fonts/icomoon.woff) format('woff'),url(../fonts/icomoon.eot#iefix) format('embedded-opentype'),url(../fonts/icomoon.ttf) format('truetype'),url(../fonts/icomoon.svg#icomoon) format('svg');
    font-weight: 400;
    font-style: normal;
    font-display: block
}

:root {
    --max-width: 1200px;
    --width: calc(100% - 40px);
    --c1: #151414;
    --c01: #15141400;
    --c2: #999;
    --c3: #ccc;
    --c4: #4cc2c0;
    --c5: #2f2c2c;
    --c6: #f7f9f9;
    --c7: #f15b26;
    --c8: #fcb03b;
    --c9: #3cb878;
    --c10: rgba(137, 137, 137, 0.1);
    --c11: rgba(255, 255, 255, 0.1);
    --c12: #acacac;
    --c13: #e1e1e1;
    --c14: #66c491;
    --c15: #797676;
    --c16: #373434;
    --c17: #3cb879;
    --c18: #fcd846;
    --c19: #362f2d;
    --c20: #55d5d3;
    --c21: #121111;
    --c22: #504D4E;
    --c23: #222121;
    --c24: #d2d2d3;
    --c25: #f0f2f2;
    --c26: #8dc63f;
    --c27: #ff9700;
    --c28: #6739b6;
    --c29: #3b3432;
    --rotate: 0;
    --sh-height: calc(100vh - 290px);
    --gap: 120px;
    --grid3: 1fr 1fr 1fr;
    --grid3-gap: 40px;
    --grid-socials: max-content 1fr;
    --grid-socials-justify: flex-end;
    --grid-stats: repeat(4,1fr);
    --sc-padding: 80px 0 0;
    --sc-margin: 90px;
    --sc-margin-bottom: -50px;
    --sc-grid: repeat(4,1fr);
    --ln-padding: 80px 60px;
    --t-padding: 81px 0 26px;
    --t-grid: max-content 1fr 32px;
    --t-position: relative;
    --m-margin-right: 100%;
    --m-position: absolute;
    --m-margin: 0;
    --stat-grid: max-content max-content;
    --stat-align: right;
    --stat-grid-rows: initial;
    --stats-margin: -50px auto 70px;
    --stat-fs-1: 100px;
    --stat-fs-2: 22px;
    --contact-grid: 300px 1fr;
    --cf-grid: 1fr 1fr 1fr 1fr;
    --cf-captcha: auto / span 3;
    --cf-div: auto / span 2;
    --cf-btn: auto / span 1;
    --sm-width: 1000px;
    --g-grid: 1fr 1fr 1fr;
    --dir-grid: 1fr 1fr 1fr;
    --sc-duration: 500ms;
    --sc-delay: 0;
    --ssh-b-left: 46px;
    --ssh-b-right: auto;
    --ssh-b-fs: 104px;
    --ssh-height: initial;
    --ssh-padding: 38px 46px;
    --f-i-grid: max-content max-content max-content;
    --f-i-padding: 50px 30px;
    --nl-grid: 58px minmax(420px,1fr) minmax(300px,470px);
    --nl-i-br: 50px 0 0 50px;
    --test-grid: minmax(200px,300px) minmax(600px,1fr);
    --test-gap: 80px;
    --test-margin: 56px 56px 0 0;
    --test-width: auto;
    --test-img-l: 98px;
    --test-img-r: -160px;
    --test-br: 100px 0;
    --test-text-m: 0 136px 0 44px;
    --test-text-size: 20px;
    --test-text-lh: 27px;
    --test-sp-tr: translateY(-46px) translateX(36px);
    --test-sp-img-m: 0 0 -10px auto;
    --port-grid: 1fr 1fr 1fr;
    --port-width: 260px;
    --port-width-h: 320px;
    --port-padding: 20px 30px;
    --port-box-mw: 380px;
    --steps-grid: repeat(4,1fr);
    --consult-i-br: 0 50px 50px 0;
    --consult-i-br-1: 50px 0 0 50px;
    --consult-grid: 4fr 2fr;
    --service-grid: 1fr 1fr 1fr;
    --a-padding: 18px 31px;
    --a-f-size: 16px;
    --a-mw: 160px;
    --a-top: 12px;
    --a-right: 12px;
    --top-info-grid: 159px 1fr 159px;
    --service-grid: 1fr 1fr 1fr;
    --header-padding: 132px 0;
    --header-gap: 40px;
    --expert-grid: repeat(4,1fr);
    --sup-grid: 1fr 1fr 1fr;
    --profit-grid: 1fr 1fr;
    --profit-col: 2 / span 1;
    --contacts-grid: max-content max-content max-content;
    --nf-img-width: initial;
    --nf-padding: 20px 0 141px;
    --nf-bg-size: initial;
    --nf-f-size: 257px;
    --nf-f-size1: 40px;
}

em {
    font-style: normal
}

section {
    display: block
}

select {
    padding: 1.5px 4px .5px 20px;
    cursor: pointer;
    background: 0 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: url(../PanelImages/SelectArrow.png) left 4px top 4px no-repeat #fff;
    text-align: right
}

input[type=password], input[type=text], select, textarea {
    box-sizing: border-box;
    font-family: IRANSansX;
}

    input[type=password]:focus, input[type=text]:focus, select:focus, textarea:focus {
        outline: 0
    }

    input[type=password]:disabled, input[type=text]:disabled, select:disabled, textarea:disabled {
        background-color: #f8f8f8;
        border-color: #ccc;
        color: #aaa;
        cursor: default
    }

    select:disabled {
        background-position: left 4px top -18px
    }

.DRV {
    font-size: 11px;
    background-color: var(--c7);
    color: #fff;
    padding: 5px;
    position: absolute;
    right: 3px;
    left: 20px;
    line-height: 11px;
    margin-top: -61px;
    display: none;
    opacity: 0;
    transition: all 300ms;
    border-radius: 50px 20px 0 50px;
}

    .DRV:before {
        content: '';
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 6px 8px 0;
        border-color: transparent var(--c7) transparent transparent;
        margin-right: -5px;
        position: absolute;
        bottom: -7px;
    }

    .DRV.ValErr {
        display: block;
        opacity: 1;
    }

.ValErr:disabled, .ValErr:not(.DRV) {
    border: 1px solid var(--c7) !important;
    background-color: #ffe5e5 !important;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: var(--c12);
    opacity: 1; /* Firefox */
    text-align: right;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: var(--c12);
    text-align: right;
}

::-ms-input-placeholder { /* Microsoft Edge */
    color: var(--c12);
    text-align: right;
}

i {
    font-family: fontIcon;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    vertical-align: middle;
    font-size: 15px
}

    i.ICellPhone:before {
        content: '\e900'
    }

    i.IClock:before {
        content: '\e901'
    }

    i.ILocation:before {
        content: '\e902'
    }

    i.IBack:before {
        content: '\e903'
    }

    i.IArrow:before {
        content: '\e904'
    }

    i.IDate:before {
        content: '\e905'
    }

    i.ISearch:before {
        content: '\e906'
    }

    i.IMember:before {
        content: '\e90a';
    }

    i.ISArrow:before {
        content: '\e90b';
    }

    i.ILang:before {
        content: '\e90c';
    }

    i.IQuotes:before {
        content: '\e90d';
    }

    i.IMail:before {
        content: '\e90e';
    }

    i.ISettings:before {
        content: '\e90f';
    }

    i.ISecurity:before {
        content: '\e910';
    }

    i.IService:before {
        content: '\e911';
    }

    i.IWhatsapp:before {
        content: '\e912';
    }

    i.ITelegram:before {
        content: '\e913';
    }

    i.IInstagram:before {
        content: '\e914';
    }

    i.IBroadCast:before {
        content: '\e915';
    }

    i.ITop:before {
        content: '\e917';
    }

    i.IPhoneCall:before {
        content: '\e918';
    }

    i.IEmail:before {
        content: '\e919';
    }

    i.ILocation:before {
        content: '\e91a';
    }


table {
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0 auto
}

    table table {
        margin: 0
    }

td, th {
    vertical-align: middle;
    padding: 5px
}

p {
    margin: 0
}

h1, h2, h3, h4, h5 {
    font-weight: 400;
    margin: 0;
    padding: 0;
    font-family: IRANSansX
}

h2 {
    font-size: 18px;
    line-height: 28px;
}

.Right {
    text-align: right !important
}

.Left {
    text-align: left !important
}

.Center {
    text-align: center !important
}

.LtrTD {
    direction: ltr
}

img {
    display: block;
}

a, button {
    transition: all 300ms;
    text-decoration: none;
    box-sizing: border-box;
    cursor: pointer;
}

    a.ADark, a.ATrans, a.AGreen, a.ABlue {
        color: #fff;
        padding: var(--a-padding);
        border-radius: 50px;
        font-size: var(--a-f-size);
        min-width: var(--a-mw);
        display: inline-block;
        position: relative;
        white-space: nowrap;
    }

    a.ATrans {
        border: 2px solid #fff;
    }

        a.ATrans:hover {
            background-color: rgba(255, 255, 255, 0.1)
        }

    a.ABlue {
        background-color: var(--c4);
    }

        a.ABlue:hover {
            background-color: var(--c20);
        }

    a.AGreen {
        background-color: var(--c17);
    }

        a.AGreen:hover {
            box-shadow: 9px 9px 9px 0 rgba(70,214,141,0.2);
        }

    a.ADark {
        background-color: var(--c5);
    }

        a.ADark:not(.ABlue):hover {
            box-shadow: 9px 9px 9px 0 rgba(47,44,44,0.2);
        }

        a.ADark:before, a.ATrans:before, a.AGreen:before, a.ABlue:before {
            content: '';
            display: block;
            position: absolute;
            top: var(--a-top);
            right: var(--a-right);
            width: 37px;
            height: 37px;
            border: 2px solid transparent;
            border-top-color: #fff;
            border-radius: 100%;
            transform: rotate(45deg);
            box-sizing: border-box;
            z-index: 0;
            transition: all 300ms;
        }

        a.ADark:hover:before, a.ATrans:hover:before, a.AGreen:hover:before, a.ABlue:hover:before {
            transform: rotate(135deg);
        }

html {
    scroll-behavior: smooth;
}

body {
    color: var(--c5);
    font-family: IRANSansX;
    font-size: 13px;
    line-height: 25px;
    margin: 0;
    text-align: center;
    direction: rtl;
    -moz-font-feature-settings: "ss02";
    -webkit-font-feature-settings: "ss02";
    font-feature-settings: "ss02";
}

    body.Active {
        overflow: hidden;
    }

.TopInfo {
    background-color: var(--c1);
    color: var(--c2);
    padding: 10px 0;
    box-shadow: 0 -20px 40px rgba(0,0,0,0.3);
    z-index: 21;
    position: relative;
}

    .TopInfo .DTopInfo {
        margin: 0 auto;
        width: var(--width);
        max-width: var(--max-width);
        display: grid;
        grid-template-columns: var(--top-info-grid);
        gap: 20px;
        justify-content: center;
        align-items: center;
    }

        .TopInfo .DTopInfo > div:nth-child(2) {
            display: flex;
            gap: 10px;
            justify-content: center;
            align-items: center;
        }

        .TopInfo .DTopInfo > div:nth-child(3) {
            display: flex;
            gap: 10px;
            justify-content: center;
            align-items: center;
        }

        .TopInfo .DTopInfo a {
            color: var(--c2);
        }

            .TopInfo .DTopInfo a:hover {
                color: var(--c3);
            }

        .TopInfo .DTopInfo i {
            padding: 5px;
            border-radius: 50%;
            font-size: 16px;
            transition: all 300ms;
        }

            .TopInfo .DTopInfo i:hover {
                background-color: #000;
            }

            .TopInfo .DTopInfo i.ITelegram:hover {
                color: #229ed9;
            }

            .TopInfo .DTopInfo i.IInstagram:hover {
                color: #bc2a8d;
            }

            .TopInfo .DTopInfo i.IWhatsapp:hover {
                color: #25d366;
            }

        .TopInfo .DTopInfo .DLang {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            direction: ltr;
        }

            .TopInfo .DTopInfo .DLang a {
                margin-top: 2px;
            }


.Top {
    height: 104px;
}

    .Top .TopDiv {
        padding: var(--t-padding);
        z-index: 20;
        top: 0;
        background-color: #fff;
        transform-origin: top;
        transition: padding 300ms;
        position: fixed;
        left: 0;
        width: 100vw;
        right: 0;
    }

        .Top .TopDiv.Hide, .Top .TopDiv.Show {
            box-shadow: 0 9px 9px 0 rgba(47,44,44,0.2);
            padding: 15px 0;
            animation: swingOutX 500ms both ease;
        }

        .Top .TopDiv.Show {
            animation-name: swingInX;
        }

    .Top .TopTD {
        max-width: var(--max-width);
        width: var(--width);
        margin: 0 auto;
        display: grid;
        grid-template-columns: var(--t-grid);
        gap: 10px 20px;
        justify-content: center;
        align-items: center;
        position: var(--t-position);
        z-index: 5;
    }

        .Top .TopTD .DLogo * {
            display: block;
        }

        .Top .TopTD .DLogo img {
            width: 176px;
            height: auto;
        }

        .Top .TopTD > a {
            padding: 6px;
            border-radius: 50%;
            background-color: var(--c7);
        }

            .Top .TopTD > a i {
                color: #fff;
                /*color: var(--c5);*/
                font-size: 20px;
                display: block;
                line-height: 20px;
            }

            .Top .TopTD > a:hover {
                background-color: var(--c4);
            }



/*#region HeaderMenu */
nav {
    font-weight: 500;
    font-size: 14px;
}



ul#cm-nav, ul#cm-nav ul {
    list-style-type: none;
    margin: 0;
    list-style-image: none;
    padding: 0px;
    direction: rtl;
    /*display: table;*/
}

    ul#cm-nav ul {
        background-color: var(--c1);
    }

    ul#cm-nav li {
        position: relative;
        list-style-type: none;
        margin: 0;
        width: auto;
        float: right;
        list-style-image: none;
        z-index: 9997;
    }

        ul#cm-nav li li {
            width: auto;
            float: none;
            background-image: none;
            padding: 0;
            margin: 0;
        }

#cm-nav a {
    color: var(--c5);
    display: block;
    line-height: 40px;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    position: relative;
}

    #cm-nav a:hover {
        color: var(--c4);
    }

        #cm-nav a:hover:before {
            position: absolute;
            left: 0;
            bottom: 0;
            height: 2px;
            width: 80%;
            animation: primary-long .5s linear;
            content: '';
            background-color: var(--c4);
        }

        #cm-nav a:hover:after {
            background-color: var(--c4);
            position: absolute;
            right: 0;
            bottom: 0;
            height: 2px;
            width: 15%;
            content: '';
            animation: primary-short .5s linear;
        }

@keyframes primary-short {
    0% {
        width: 0;
    }

    50% {
        width: 40%;
    }

    100% {
        width: 15%;
    }
}


@keyframes primary-long {
    0% {
        width: 100%;
    }

    50% {
        width: 55%;
    }

    100% {
        width: 80%;
    }
}



#cm-nav li {
    margin: 0;
    padding: 5px 20px;
}


#cm-nav a.no-click {
    cursor: default;
}




#cm-nav li li a {
    margin: 0px;
    background-image: none;
}

#cm-nav > li > a.arrow {
    padding: 5px;
}

#cm-nav ul.arrow-pad > li > a {
    padding: 5px 20px;
}

#cm-nav li a.arrow, #cm-nav > li > a.arrow {
    background-repeat: no-repeat;
    background-position: 5px 50%;
}

#cm-nav li ul, #cm-nav li:hover ul ul, #cm-nav li:hover ul ul ul, #cm-nav li:hover ul ul ul ul, #cm-nav li:hover ul ul ul ul ul, #cm-nav li:hover ul ul ul ul ul ul, #cm-nav li:hover ul ul ul ul ul ul ul, #cm-nav li:hover ul ul ul ul ul ul ul ul {
    z-index: 999;
    position: var(--m-position);
    display: none;
    background-image: none;
    transition: all 300ms;
}

#cm-nav li:hover ul {
    display: block;
    transition: all 1000ms;
}

#cm-nav li li:hover ul, #cm-nav li li li:hover ul, #cm-nav li li li li:hover ul, #cm-nav li li li li li:hover ul, #cm-nav li li li li li li:hover ul, #cm-nav li li li li li li li:hover ul {
    display: block;
    margin-right: var(--m-margin-right);
}

#cm-nav li:hover ul {
    margin: var(--m-margin);
    background-image: none;
}

#cm-nav ul ul {
    top: 0px;
    right: 0px;
    background-image: none;
}

#cm-nav li {
    top: 0px;
    background-image: none;
}

@keyframes swingOutX {
    0% {
        transform: perspective(400px) rotateX(0deg)
    }

    100% {
        transform: perspective(400px) rotateX(-90deg)
    }
}

@keyframes swingInX {
    0% {
        transform: perspective(400px) rotateX(-90deg)
    }

    100% {
        transform: perspective(400px) rotateX(0deg)
    }
}

/*#endregion */








/*#region Splide */
#SSSBoxes h2 {
    font-size: 24px;
    font-weight: 500;
}

#SSSBoxes ul {
    counter-reset: pagination-num;
    color: #fff;
    text-align: right;
}

    #SSSBoxes ul li {
        box-sizing: border-box;
        padding: var(--ssh-padding);
        background-color: var(--c6);
        border: none;
        position: relative;
        height: var(--ssh-height);
    }

        #SSSBoxes ul li:before {
            counter-increment: pagination-num;
            content: "0" counter( pagination-num );
            font-family: 'Varela Round';
            font-size: var(--ssh-b-fs);
            color: var(--c11);
            position: absolute;
            left: var(--ssh-b-left);
            right: var(--ssh-b-right);
            top: 8px;
            bottom: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            line-height: 1;
        }

        #SSSBoxes ul li:nth-child(1):before {
            color: var(--c10);
        }

        #SSSBoxes ul li:nth-child(1) {
            color: var(--c5);
        }


        #SSlideShow ul li[id$="2"], #SSSBoxes ul li:nth-child(2) {
            background-color: var(--c4);
        }

        #SSlideShow ul li[id$="3"], #SSSBoxes ul li:nth-child(3) {
            background-color: var(--c7);
        }

        #SSlideShow ul li[id$="4"], #SSSBoxes ul li:nth-child(4) {
            background-color: var(--c8);
        }

        #SSlideShow ul li[id$="5"], #SSSBoxes ul li:nth-child(5) {
            background-color: var(--c9);
        }

#SSlideShow {
    direction: ltr;
}

    #SSlideShow ul li {
        background-color: var(--c6);
    }

    #SSlideShow h2 {
        font-size: 36px;
        font-weight: 600;
    }

    #SSlideShow .DHor h2 {
        color: var(--c5);
    }

    #SSlideShow h3 {
        font-size: 20px;
        color: var(--c12);
    }

    #SSlideShow p {
        font-size: 26px;
        line-height: 40px;
        text-align: justify;
        font-weight: 500;
    }

        #SSlideShow p.PDark {
            color: var(--c5);
        }

        #SSlideShow p.PSmall {
            font-size: 16px;
            line-height: 25px;
        }

        #SSlideShow p.PMedium {
            font-size: 19px;
            line-height: 30px;
        }

    #SSlideShow .DHor p {
        text-align: center;
    }

    #SSlideShow .splide__slide, #SSlideShow .splide__slide__container {
        height: var(--sh-height);
    }


    #SSlideShow .splide__slide__container {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        width: calc(100vw - 80px);
        max-width: 1000px;
        margin: 0 auto;
    }

        #SSlideShow .splide__slide__container > div {
            display: grid;
            grid-template-columns: 400px 1fr;
            justify-content: center;
            align-items: center;
            gap: 70px;
            direction: rtl;
        }

            #SSlideShow .splide__slide__container > div:not(.DHor) > div {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 30px;
            }

                #SSlideShow .splide__slide__container > div:not(.DHor) > div > *:not(a) {
                    grid-column: 1 / -1;
                }

                #SSlideShow .splide__slide__container > div:not(.DHor) > div > a {
                    justify-self: center;
                }

            #SSlideShow .splide__slide__container > div > * {
            }


            #SSlideShow .splide__slide__container > div.DHor {
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 30px;
                flex-direction: column;
            }


                #SSlideShow .splide__slide__container > div.DHor a {
                    margin-top: 20px;
                }

        #SSlideShow .splide__slide__container img {
            display: block;
            width: 100%;
            max-width: 80vw;
            height: auto;
        }

@keyframes slideEnter {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideExit {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(-50px);
    }
}

#SSlideShow .splide__slide.is-move .splide__slide__container {
    /*opacity: 0;*/
}

    #SSlideShow .splide__slide.is-move .splide__slide__container > div > * {
        animation: slideExit 0.1s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
    }

#SSlideShow .splide__slide.is-active {
    z-index: 1000;
}

    #SSlideShow .splide__slide.is-active .splide__slide__container > div > * {
        animation: slideEnter 0.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    }

/*#SSlideShow .splide__slide.is-active .splide__slide__container > div > img {
    animation: slideEnter 0.15s linear forwards 100ms;
}*/
.splide__arrow {
    background: none !important;
    opacity: 1 !important;
    transform: translateY(calc(-50% - 16px)) !important;
}

.splide__arrow {
    width: 64px !important;
    height: 32px !important;
}


    .splide__arrow i {
        font-size: 32px;
        color: var(--c13);
        transition: color 300ms;
        display: block;
    }

    .splide__arrow:hover i {
        color: var(--c5);
    }

    .splide__arrow i:before {
        content: '\e916';
    }

.splide__arrows .splide__arrow--next i {
    transform: rotate(180deg);
}

.splide__arrows .splide__arrow--next {
    left: 32px !important;
    right: auto;
}

    .splide__arrows .splide__arrow--next:hover {
        left: 24px !important;
        padding-right: 8px;
        width: 72px !important;
    }

.splide__arrows .splide__arrow--prev {
    right: 32px !important;
    left: auto;
}

    .splide__arrows .splide__arrow--prev:hover {
        right: 24px !important;
        padding-left: 8px;
        width: 72px !important;
    }

/*#endregion */

.Header {
    background-color: #fff;
}

    .Header:has(h1) {
        background-image: url(../Images/HBG-Blue.webp);
        background-position: left top;
        background-repeat: repeat;
        padding: var(--header-padding);
    }

    .Header:has(h1.Breez) {
        background-image: url(../Images/HBG-Breez.webp);
    }

    .Header:has(h1.Violet) {
        background-image: url(../Images/HBG-Violet.webp);
    }

    .Header:has(h1.Gray) {
        background-image: url(../Images/HBG-Gray.webp);
    }

    .Header:has(h1.Rose) {
        background-image: url(../Images/HBG-Rose.webp);
    }

.HeaderTD:has(h1) {
    max-width: var(--max-width);
    width: var(--width);
    display: flex;
    grid-gap: var(--header-gap);
    margin: 0 auto;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #fff;
}

.HeaderTD h1 {
    font-size: 44px;
    font-weight: 500;
    line-height: 72px;
}

.HeaderTD .DSiteMap {
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: var(--sm-width);
}

    .HeaderTD .DSiteMap a {
        color: #fff;
        opacity: 0.5;
    }

        .HeaderTD .DSiteMap a:hover {
            opacity: 1;
        }

    .HeaderTD .DSiteMap i {
        opacity: 0.5;
        transform: rotate(180deg);
        display: inline-block;
        margin: 0 20px;
    }

.DDirectors {
    width: var(--width);
    max-width: var(--max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: var(--dir-grid);
    grid-gap: 40px;
    justify-content: flex-start;
    align-items: flex-start;
    text-align: right;
}

    .DDirectors > div {
        display: flex;
        grid-gap: 20px;
        flex-direction: column;
        color: var(--c5);
    }

        .DDirectors > div > img {
            display: block;
            width: 100%;
            height: auto;
        }

        .DDirectors > div > h2 {
            position: relative;
            color: var(--c1);
        }

        .DDirectors > div > span {
            right: 0;
            bottom: 0;
            width: 18px;
            background-color: var(--c2);
            height: 3px;
        }


.Content {
    margin-bottom: 495px;
    background-color: #fff;
}

header:has(h1) + main .Content, main:has(.DNotFound) .Content {
    /*padding-bottom: 80px;*/
    margin-bottom: 0;
}

header:has(h1) ~ footer .Footer, main:has(.DNotFound) ~ footer .Footer {
    position: initial;
}
/*#region NewsLetter */
.DNewsLetter {
    background-color: var(--c9);
    padding-top: 40px;
    overflow: hidden;
}

    .DNewsLetter > div {
        margin: 0 auto;
        width: var(--width);
        max-width: var(--max-width);
        display: grid;
        grid-template-columns: var(--nl-grid);
        gap: 40px;
        justify-content: center;
        align-items: center;
    }

        .DNewsLetter > div > img {
            width: 100%;
            height: auto;
            max-width: 470px;
            justify-self: flex-end;
        }

            .DNewsLetter > div > img:first-of-type {
                align-self: flex-start;
                max-width: 58px;
                justify-self: flex-start;
            }

        .DNewsLetter > div > div {
            text-align: right;
            display: flex;
            gap: 30px;
            flex-direction: column;
            color: #fff;
            margin: 0 auto 30px;
            width: 100%;
        }

            .DNewsLetter > div > div > div {
                display: flex;
            }

            .DNewsLetter > div > div h5 {
                font-size: 24px;
            }



            .DNewsLetter > div > div input {
                border: none;
                border-radius: var(--nl-i-br);
                padding: 18px 31px;
                direction: ltr;
                width: 100%;
                font-size: 16px;
            }

                .DNewsLetter > div > div input:focus {
                    box-shadow: -17px 0 60px #d3dcdc;
                }

            .DNewsLetter > div > div a {
                border-radius: 0 50px 50px 0;
            }

            .DNewsLetter > div > div p {
                opacity: 0.5;
                font-size: 15px;
            }

    .DNewsLetter ::placeholder {
        color: var(--c24);
    }

    .DNewsLetter :-ms-input-placeholder { /* Internet Explorer 10-11 */
        color: var(--c24);
    }

    .DNewsLetter ::-ms-input-placeholder { /* Microsoft Edge */
        color: var(--c24);
    }

/*#endregion */
.Footer {
    background-color: var(--c1);
    padding: 40px 0 0;
    position: fixed;
    z-index: -1;
    bottom: 0;
    left: 0;
    right: 0;
}


.FooterTD > .DFAbout, .FooterTD > .DFInfo {
    margin: 0 auto;
    width: var(--width);
    max-width: var(--max-width);
}

.FooterTD > .DFAbout {
    padding: 50px 0;
    color: #fff;
}

    .FooterTD > .DFAbout h3 {
        font-size: 24px;
    }

    .FooterTD > .DFAbout p {
        opacity: 0.4;
        font-size: 16px;
        text-align: right;
    }

.FooterTD > .DFInfo {
    display: grid;
    grid-template-columns: var(--f-i-grid);
    grid-gap: 40px;
    justify-content: space-between;
    align-items: center;
    border-top: 2px solid rgba(255,255,255,0.1);
    padding: var(--f-i-padding);
    box-sizing: border-box;
}

    .FooterTD > .DFInfo > div {
        display: grid;
        grid-template-columns: max-content 1fr;
        grid-gap: 5px 30px;
        justify-content: flex-start;
        align-items: center;
        text-align: right;
    }

        .FooterTD > .DFInfo > div > i {
            grid-row: 1 / span 2;
            line-height: 56px;
            font-size: 56px;
            color: var(--c7);
        }

            .FooterTD > .DFInfo > div > i.ILocation {
                color: var(--c9);
            }

            .FooterTD > .DFInfo > div > i.IPhoneCall {
                color: var(--c8);
            }

        .FooterTD > .DFInfo > div > span {
            color: #fff;
            font-size: 14px;
        }

            .FooterTD > .DFInfo > div > span:first-of-type {
                font-size: 18px;
            }

            .FooterTD > .DFInfo > div > span:last-of-type {
                opacity: 0.4;
            }

.FooterTD > div {
    display: flex;
    flex-direction: column;
    grid-gap: 20px;
    justify-content: flex-start;
    align-items: flex-start;
}

.FooterTD h4 {
    font-size: 16px;
    color: var(--c1);
    font-weight: 500;
    margin-bottom: 10px;
    text-align: right;
}

.FooterTD .DCopyRight {
    grid-column: 1 / -1;
    -moz-font-feature-settings: "ss01";
    -webkit-font-feature-settings: "ss01";
    font-feature-settings: "ss01";
    padding: 60px 0;
    color: var(--c22);
    font-size: 14px;
    text-align: left;
    direction: ltr;
    background-color: var(--c21);
}

    .FooterTD .DCopyRight > div {
        width: var(--width);
        max-width: var(--max-width);
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr max-content;
        gap: 20px;
        justify-content: center;
        align-items: center;
    }

    .FooterTD .DCopyRight a {
        color: #ffffff;
        opacity: 0.3;
    }

        .FooterTD .DCopyRight a:hover {
            opacity: 1;
            color: var(--c4);
        }

    .FooterTD .DCopyRight i {
        font-size: 42px;
        cursor: pointer;
        color: var(--c23);
        transition: all 300ms;
    }

        .FooterTD .DCopyRight i:hover {
            color: var(--c4);
        }

.DContacts > div {
    display: grid;
    grid-template-columns: 16px 1fr;
    grid-gap: 20px 10px;
    justify-content: flex-start;
    align-items: flex-start;
    text-align: right;
    -moz-font-feature-settings: "ss03";
    -webkit-font-feature-settings: "ss03";
    font-feature-settings: "ss03";
}

.DContacts i {
    color: var(--c6);
    font-size: 16px;
}

.DContacts a {
    color: var(--c5);
}

    .DContacts a:hover {
        color: var(--c6);
    }


.FooterTD .DAbout p {
    text-align: justify;
}


.Btn {
    background-color: var(--c2);
    padding: 5px 10px;
    align-self: flex-end;
    color: var(--c1);
    border-radius: 5px;
    overflow: hidden;
    display: block;
    width: max-content;
    font-size: 13px;
    cursor: pointer;
}

    .Btn:hover {
        background-color: var(--c1);
        color: var(--c2);
    }


    .Btn i {
        margin-right: 5px;
        font-size: 11px;
        display: inline-block;
    }

    .Btn:hover i {
        animation: BtnLeft 0.7s infinite both;
    }

.BtnTop {
    background-color: var(--c2);
    color: var(--c1);
    font-size: 20px;
    position: fixed;
    right: 30px;
    bottom: 0;
    opacity: 0;
    border-radius: 5px 5px 0 0;
    padding: 5px 10px;
    cursor: pointer;
    overflow: hidden;
}

    .BtnTop i {
        transform: rotate(90deg);
        display: block;
        font-weight: bold;
        font-size: 20px;
    }

    .BtnTop:hover {
        padding-top: 20px;
    }

        .BtnTop:hover i {
            animation: BtnTop 0.7s infinite both;
        }

    .BtnTop.Show {
        opacity: 1;
    }

@keyframes BtnTop {
    from {
        transform: rotate(90deg) translateX(0);
        opacity: 1;
    }

    to {
        transform: rotate(90deg) translateX(-20px);
        opacity: 0;
    }
}

@keyframes BtnLeft {
    from {
        transform: rotate(var(--rotate)) translateX(0);
        opacity: 1;
    }

    to {
        transform: rotate(var(--rotate)) translateX(-20px);
        opacity: 0;
    }
}

/*#region Pager */
.DPager {
    grid-column: 1 /-1;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    grid-gap: 5px !important;
    width: 100%;
    -moz-font-feature-settings: "ss03";
    -webkit-font-feature-settings: "ss03";
    font-feature-settings: "ss03";
}

    .DPager > a {
        color: var(--c6);
        border-radius: 2px;
        padding: 2px 10px;
    }

        .DPager > a:not([class]) {
            border: 1px solid var(--c8);
            padding: 2px 10px 0;
        }

        .DPager > a:not([href]):not([class]) {
            background-color: var(--c2);
            color: var(--c1);
            border-color: var(--c2);
        }

        .DPager > a[href]:hover {
            color: var(--c5);
            border-color: var(--c5);
        }


        .DPager > a[class]:not([href]) {
            color: var(--c8);
        }

    .DPager i {
        display: block;
    }

        .DPager i:before {
            content: '\e903';
        }

    .DPager a[class].APFirst i {
        transform: rotate(180deg);
        --rotate: 180deg;
    }

    .DPager a[class][href]:hover i {
        animation: BtnLeft 0.7s infinite both;
    }


/*#endregion */

/*#region Gallery */

.hes-gallery {
    display: grid;
    grid-template-columns: var(--g-grid);
}

    .hes-gallery img {
        width: 100%;
        height: 100%;
        position: relative;
        object-fit: cover;
        display: block;
        aspect-ratio: 7 / 5;
    }

    .hes-gallery > a {
        position: relative;
        cursor: pointer;
        transition: 0.3s;
        animation: GAnim 0.5s both ease-in-out;
    }

@keyframes GAnim {
    from {
        transform: scale(0);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.hes-gallery > a::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: var(--c11);
    z-index: 5;
    opacity: 0;
    transition: 0.3s;
}

.hes-gallery > a:hover::before, .hes-gallery > a:hover > i {
    opacity: 1;
    transform: scale(1);
}

.hes-gallery > a > i {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    color: var(--c2);
    font-size: 25px;
    font-weight: bold;
    transition: 0.3s;
    opacity: 0;
    z-index: 6;
    transform: scale(0);
}

/*#endregion */
/*#region AllServices */
.DAllServices, .DAllProducts {
    margin: 120px auto;
    width: var(--width);
    max-width: var(--max-width);
    gap: 40px;
    display: grid;
    grid-template-columns: var(--service-grid);
    justify-content: center;
    align-items: flex-start;
}

    .DAllServices > .DBox, .DAllProducts > .DBox {
        text-align: right;
        align-self: center;
    }

        .DAllServices > .DBox > div, .DAllProducts > .DBox > div {
            margin: 0;
            padding: 0 !important;
            align-items: flex-start !important;
            width: 100%;
        }

            .DAllServices > .DBox > div > a, .DAllProducts > .DBox > div > a {
                align-self: flex-end;
                margin-top: 20px;
            }

    .DAllProducts > .DProduct > div:has(img) {
        height: 100px;
        max-height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .DAllProducts > .DProduct img {
        filter: grayscale(100%) brightness(0.2) invert(1);
        transition: all 500ms ease;
        max-height: 100px;
    }

    .DAllProducts > .DProduct:hover img {
        filter: initial;
    }

    .DAllServices .DProduct img {
        width: 100%;
        height: auto;
        max-width: 270px;
    }
/*#endregion */
/*#region Product */

.DProduct {
    padding: 60px 45px;
    text-align: right;
    transition: all 300ms ease;
    color: #fff;
    font-size: 16px;
    line-height: 1.7;
}

    .DProduct > h3 {
        color: var(--c5);
        font-size: 24px;
        line-height: 1;
        font-weight: 500;
        margin: 50px 0 20px;
    }

    .DProduct img {
        margin: 0 auto;
    }

    .DProduct > i {
        font-size: 26px;
        margin-top: 30px;
        transform: rotate(180deg);
        display: inline-block;
    }



    .DProduct:nth-child(5n+1) {
        background-color: var(--c28);
    }

    .DProduct:nth-child(5n+2) {
        background-color: var(--c4);
    }

    .DProduct:nth-child(5n+3) {
        background-color: var(--c7);
    }

    .DProduct:nth-child(5n+4) {
        background-color: var(--c8);
    }

    .DProduct:nth-child(5n) {
        background-color: var(--c9);
    }



    .DProduct:hover {
        background-color: var(--c6);
        color: var(--c12);
    }

        .DProduct:hover > i {
            color: var(--c5);
        }


/*#endregion */
article {
    text-align: justify;
    max-width: var(--max-width);
    width: var(--width);
    margin: 0 auto;
    font-size: 16px;
    line-height: 30px;
}

    article p {
        margin-bottom: 20px;
    }

    article img {
        max-width: 100%;
        display: block;
        margin: 20px 0;
        height: auto;
    }

    article .DBox > div {
        align-items: flex-start;
        padding-bottom: 40px;
        width: initial;
        max-width: initial;
    }

.DProfit {
    padding: 120px 0;
    margin-top: 80px;
    background-color: var(--c26);
}

    .DProfit > div {
        width: var(--width);
        max-width: var(--max-width);
        margin: 0 auto;
        display: grid;
        grid-template-columns: var(--profit-grid);
        gap: 80px 40px;
        color: #fff;
        text-align: right;
        justify-content: flex-start;
        align-items: center;
    }

        .DProfit > div > img {
            grid-column: var(--profit-col);
            width: 100%;
            height: auto;
            max-width: 670px;
            margin: 0 auto;
        }

        .DProfit > div > div {
            display: flex;
            justify-content: center;
            flex-direction: column;
            gap: 30px;
        }

        .DProfit > div h3 {
            font-size: 30px;
            line-height: 45px;
        }

        .DProfit > div p {
            font-size: 18px;
            line-height: 30px;
        }

.DExperts > div:last-child {
    display: grid;
    grid-template-columns: var(--expert-grid);
    gap: 40px;
    justify-content: center;
    align-items: center;
    margin-top: 120px;
}

    .DExperts > div:last-child > div {
        display: flex;
        flex-direction: column;
        gap: 10px;
        justify-content: center;
        align-items: center;
    }

        .DExperts > div:last-child > div > img {
            margin-bottom: 20px;
            width: 100%;
            max-width: 210px;
            height: auto;
        }

        .DExperts > div:last-child > div > h3 {
            font-size: 22px;
            line-height: 32px;
        }

        .DExperts > div:last-child > div > p {
            font-size: 16px;
            color: var(--c12);
        }

.DExperts.DBox {
    padding: 120px 0;
}

    .DExperts.DBox > div {
        padding: 0;
    }

.DVision {
    background-color: var(--c27);
    color: #fff;
    overflow: hidden;
    position: relative;
}

    .DVision.DBox > div:first-child {
        gap: 40px;
        position: relative;
        z-index: 1;
    }

    .DVision.DBox p {
        color: #fff;
        padding-bottom: 60px;
        width: 70%;
    }

    .DVision.DBox > div:last-child {
        position: absolute;
        bottom: -90px;
        left: 0;
        right: 0;
        margin: 0 auto;
        padding: 0;
        z-index: 0;
    }

.DSupport > div > div:not(.Line) {
    display: grid;
    grid-template-columns: var(--sup-grid);
    grid-gap: 80px;
    text-align: right;
    margin-top: 40px;
}

    .DSupport > div > div:not(.Line) h4 {
        font-size: 20px;
        margin: 20px 0;
    }

    .DSupport > div > div:not(.Line) p {
        color: var(--c12);
    }

.DContact {
    /*display: grid;
    margin: 0 auto;
    width: var(--width);
    max-width: var(--max-width);
    grid-template-columns: var(--contact-grid);
    grid-gap: 60px;*/
    padding-bottom: 120px;
}

    .DContact p {
        color: var(--c10);
    }

    .DContact .DBox > div {
        align-items: flex-start;
    }

    .DContact .DContacts {
        background-color: var(--c6);
        padding: 80px 0;
    }

        .DContact .DContacts > div {
            display: grid;
            grid-template-columns: var(--contacts-grid);
            justify-content: space-between;
            align-items: center;
            margin: 0 auto;
            width: var(--width);
            max-width: var(--max-width);
        }


            .DContact .DContacts > div > div {
                display: grid;
                grid-template-columns: max-content 1fr;
                grid-gap: 5px 30px;
                justify-content: flex-start;
                align-items: center;
                text-align: right;
            }

                .DContact .DContacts > div > div > img {
                    grid-row: 1 / span 2;
                    transform: scaleX(-1);
                    width: 100%;
                    height: auto;
                    max-width: 70px;
                }

                .DContact .DContacts > div > div:first-child > img {
                    transform: initial;
                }

                .DContact .DContacts > div > div > span {
                    font-size: 14px;
                    color: var(--c12);
                }

                    .DContact .DContacts > div > div > span:first-of-type {
                        font-size: 18px;
                        color: var(--c5);
                    }



    .DContact iframe {
        display: block;
        grid-column: 1 / -1;
        border: none;
    }

    .DContact .DContactForm {
        display: flex;
        flex-direction: column;
        text-align: right;
        grid-gap: 20px;
        justify-content: center;
        margin: -60px auto 0;
        max-width: var(--max-width);
        width: var(--width);
    }


        .DContact .DContactForm > div {
            display: grid;
            grid-template-columns: var(--cf-grid);
            grid-gap: 40px;
        }

        .DContact .DContactForm div:not(.PUMDiv):has(textarea):not(.g-recaptcha) {
            grid-column: 1 / -1;
        }



        .DContact .DContactForm > div div:not(.PUMDiv):has(select) {
            display: none;
        }

        .DLogin input, .DContact .DContactForm input, .DContact .DContactForm textarea, .DContact .DContactForm select {
            background-color: var(--c6);
            padding: 20px 40px;
            border: 1px solid var(--c6);
            transition: all 300ms;
            border-radius: 50px;
            color: var(--c12);
            font-size: 16px;
        }

            .DLogin input:focus, .DContact .DContactForm input:focus, .DContact .DContactForm textarea:focus, .DContact .DContactForm select:focus {
                background-color: #fff !important;
                color: var(--c4);
                box-shadow: -17px 0 60px #d3dcdc;
            }

        .DContact .DContactForm > div:not(.PUMDiv) > div {
            display: flex;
            flex-direction: column;
            text-align: right;
            grid-gap: 10px;
            justify-content: center;
            position: relative;
            grid-column: var(--cf-div);
        }

            .DContact .DContactForm > div:not(.PUMDiv) > div.g-recaptcha {
                grid-column: var(--cf-captcha);
            }

            .DContact .DContactForm > div:not(.PUMDiv) > div:has(.ADark) {
                grid-column: var(--cf-btn);
                width: fit-content;
                justify-self: flex-end;
            }




/*#region MessageBox */
.PUMDiv {
    border-radius: 5px;
    font-weight: 400;
    text-align: right;
    background-color: #49b200;
    color: #fff;
    box-sizing: border-box;
    position: relative;
    transition: height 0.5s ease-out;
    height: 0;
    overflow: hidden;
    grid-template-columns: max-content 1fr !important;
    display: grid !important;
    grid-gap: 10px !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 10px;
    grid-column: 1 / -1 !important;
}

    .PUMDiv > div {
        padding: 10px 0;
        margin: 0 !important;
    }

    .PUMDiv i {
        font-size: 20px;
    }

        .PUMDiv i:before {
            content: '\e907';
        }

.Error {
    background-color: #a91a13 !important
}

    .Error i:before {
        content: '\e909'
    }

.Alert {
    background-color: #ee8615 !important
}

    .Alert i:before {
        content: '\e908'
    }

.DNewsLetter .PUMDiv[class="PUMDiv"] {
    background-color: #fff;
    color: #49b200;
}

    .DNewsLetter .PUMDiv[class="PUMDiv"] i {
        width: 24px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        background-color: #49b200;
        color: #fff;
        border-radius: 50%;
    }

/*#endregion */
/*#region Loading */
.DBG {
    background-color: rgba(255,255,255,0.9);
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    height: 0;
    width: 100vw;
    height: 100vh;
    justify-content: center;
    align-items: center;
    transition: opacity 300ms;
    display: flex;
    opacity: 0;
    z-index: -1;
}

    .DBG.Show {
        opacity: 1;
        z-index: 1000;
    }

    .DBG > div {
        width: max-content;
        padding: 20px;
        border-radius: 5px;
    }

        .DBG > div img {
            display: block;
            width: 200px;
            height: auto;
        }

.Loader {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: block;
    margin: 15px auto;
    position: relative;
    color: var(--c1);
    left: -100px;
    box-sizing: border-box;
    animation: shadowRolling 2s linear infinite;
}

@keyframes shadowRolling {
    0% {
        box-shadow: 0px 0 var(--c01), 0px 0 var(--c01), 0px 0 var(--c01), 0px 0 var(--c01);
    }

    12% {
        box-shadow: 100px 0 var(--c1), 0px 0 var(--c01), 0px 0 var(--c01), 0px 0 var(--c01);
    }

    25% {
        box-shadow: 110px 0 var(--c1), 100px 0 var(--c1), 0px 0 var(--c01), 0px 0 var(--c01);
    }

    36% {
        box-shadow: 120px 0 var(--c1), 110px 0 var(--c1), 100px 0 var(--c1), 0px 0 var(--c01);
    }

    50% {
        box-shadow: 130px 0 var(--c1), 120px 0 var(--c1), 110px 0 var(--c1), 100px 0 var(--c1);
    }

    62% {
        box-shadow: 200px 0 var(--c01), 130px 0 var(--c1), 120px 0 var(--c1), 110px 0 var(--c1);
    }

    75% {
        box-shadow: 200px 0 var(--c01), 200px 0 var(--c01), 130px 0 var(--c1), 120px 0 var(--c1);
    }

    87% {
        box-shadow: 200px 0 var(--c01), 200px 0 var(--c01), 200px 0 var(--c01), 130px 0 var(--c1);
    }

    100% {
        box-shadow: 200px 0 var(--c01), 200px 0 var(--c01), 200px 0 var(--c01), 200px 0 var(--c01);
    }
}

/*#endregion */
/*#region NotFound */

.DNotFound {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: 16px;
    line-height: 30px;
    grid-gap: 50px;
    position: relative;
    background-color: var(--c6);
    padding: var(--nf-padding);
    background-image: url('../Images/NFBricks.webp');
    background-repeat: repeat-x;
    background-position: left bottom;
    background-size: var(--nf-bg-size);
}

    .DNotFound > div {
        max-width: var(--max-width);
        width: var(--width);
        margin: 0 auto;
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: max-content max-content;
        color: var(--c12);
        font-size: 18px;
        justify-content: space-between;
        align-items: center;
    }

        .DNotFound > div h1 {
            font-size: var(--nf-f-size1);
            line-height: 55px;
            margin-bottom: 30px;
        }

        .DNotFound > div p {
            margin-bottom: 50px;
        }

        .DNotFound > div h2 {
            font-family: 'Varela Round';
            font-size: var(--nf-f-size);
            line-height: 1;
            color: var(--c5);
        }

        .DNotFound > div > img {
            transform: scaleX(-1);
            height: auto;
            width: var(--nf-img-width);
        }



/*#endregion */
/*#region News */
.DNews.DBox > div {
    display: grid !important;
    grid-template-columns: max-content 2px 1fr;
    grid-gap: 30px !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

    .DNews.DBox > div > span {
        width: 2px;
        height: 40px;
        background-color: var(--c25);
    }

    .DNews.DBox > div > a {
        color: var(--c3);
        width: fit-content;
        font-size: 16px;
    }

        .DNews.DBox > div > a i {
            margin-right: 10px;
        }

        .DNews.DBox > div > a:hover {
            color: var(--c4);
        }

    .DNews.DBox > div > div {
        grid-column: 1 / -1;
    }

        .DNews.DBox > div > div:not(.Line) {
            margin-top: 20px;
        }

.DNews.DBox #SNews {
    direction: ltr;
}

    .DNews.DBox #SNews .splide__slide__container {
        direction: rtl;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 30px;
        flex-direction: column;
        text-align: right;
        color: var(--c12);
        font-size: 15px;
    }

        .DNews.DBox #SNews .splide__slide__container > span {
            background-color: var(--c6);
            color: var(--c3);
            border-radius: 50px;
            padding: 12px 25px;
            word-spacing: 5px;
            font-weight: 500;
        }

        .DNews.DBox #SNews .splide__slide__container > a {
            color: var(--c5);
            font-size: 18px;
            line-height: 30px;
        }

            .DNews.DBox #SNews .splide__slide__container > a:hover {
                color: var(--c4);
            }

        .DNews.DBox #SNews .splide__slide__container > div {
            display: grid;
            grid-template-columns: max-content 1fr;
            gap: 0 20px;
            justify-content: flex-start;
            align-items: center;
            font-size: 12px;
            color: var(--c3);
            margin-top: 30px;
            line-height: 20px;
        }

            .DNews.DBox #SNews .splide__slide__container > div > img {
                grid-row: 1 / span 2;
                border-radius: 50%;
            }

            .DNews.DBox #SNews .splide__slide__container > div > span:last-child {
                color: var(--c5);
                font-size: 13px;
            }



    .DNews.DBox #SNews .splide__pagination {
        top: -122px;
        right: auto;
        left: 0;
        bottom: auto;
    }

        .DNews.DBox #SNews .splide__pagination .splide__pagination__page {
            background-color: var(--c25);
            width: 15px;
            height: 15px;
            transition: all 300ms;
            margin: 5px;
            opacity: 1;
        }

            .DNews.DBox #SNews .splide__pagination .splide__pagination__page.is-active {
                transform: initial;
                border: 2px solid var(--c4);
                background-color: #fff;
            }

/*#endregion */
/*#region Stats */


.DStats {
    background-color: var(--c9);
    padding: 80px 0;
}

    .DStats > div {
        display: grid;
        grid-template-columns: var(--grid-stats);
        grid-gap: 60px 30px;
        justify-content: center;
        align-items: center;
        max-width: var(--max-width);
        width: var(--width);
        margin: 0 auto;
    }

        .DStats > div > div {
            text-align: var(--stat-align);
            position: relative;
            padding: 10px 5px 10px 0;
        }

            .DStats > div > div:before, .DStats > div > div:after {
                position: absolute;
                content: '';
                background-color: var(--c14);
                height: 3px;
                bottom: 0;
                right: 0;
            }

            .DStats > div > div:before {
                width: 50px;
                right: 25px;
            }

            .DStats > div > div:after {
                width: 15px;
            }

            .DStats > div > div > i {
                grid-row: 1 / span 2;
                font-size: 44px;
                color: var(--c6);
            }

            .DStats > div > div > span {
                font-weight: 600;
                font-size: var(--stat-fs-1);
                line-height: 100px;
                color: var(--c14);
            }

                .DStats > div > div > span:last-of-type {
                    font-weight: initial;
                    line-height: initial;
                    font-size: var(--stat-fs-2);
                    color: #fff;
                    bottom: 20px;
                    right: 0;
                    position: absolute;
                }
/*#endregion */
/*#region name */
.DConsult {
    background-color: var(--c5);
    color: #fff;
    overflow: hidden;
    position: relative;
}

    .DConsult > div {
        display: flex;
        flex-direction: column;
        grid-gap: 40px;
        justify-content: center;
        align-items: center;
        max-width: var(--max-width);
        width: var(--width);
        margin: 0 auto;
    }

        .DConsult > div > * {
            position: relative;
            z-index: 1;
        }

        .DConsult > div > img {
            opacity: 0;
            z-index: 0;
        }

            .DConsult > div > img:first-child {
                margin: -10px auto 30px;
                width: 100%;
                max-width: 670px;
            }

            .DConsult > div > img:last-of-type {
                position: absolute;
                bottom: 0;
            }

        .DConsult > div.VP > img:first-child {
            animation: SlideDown 500ms forwards;
        }

        .DConsult > div.VP > img:nth-last-of-type(2) {
            animation: SlideUp 500ms forwards;
            width: 100%;
            max-width: 359px;
        }

        .DConsult > div.VP > img:last-of-type {
            animation: SlideUp 500ms forwards 100ms;
        }

        .DConsult > div > h2 {
            font-size: 50px;
        }

        .DConsult > div > p {
            color: var(--c15);
            font-size: 22px;
        }

        .DConsult > div > div {
            display: grid;
            grid-template-columns: var(--consult-grid);
            grid-gap: 30px 3px;
            max-width: 800px;
            width: 100%;
        }

            .DConsult > div > div input {
                background-color: var(--c16);
                padding: 20px 40px;
                border: none;
                border-radius: var(--consult-i-br);
                font-size: 16px;
                color: var(--c15);
            }

                .DConsult > div > div input:nth-child(2) {
                    border-radius: var(--consult-i-br-1);
                    direction: ltr;
                }

            .DConsult > div > div:has(input:focus) input {
                box-shadow: -25px 20px 20px -15px rgba(0,0,0,0.3);
            }

    .DConsult ::placeholder {
        color: var(--c15);
    }

    .DConsult :-ms-input-placeholder { /* Internet Explorer 10-11 */
        color: var(--c15);
    }

    .DConsult ::-ms-input-placeholder { /* Microsoft Edge */
        color: var(--c15);
    }

@keyframes SlideDown {
    from {
        opacity: 0;
        transform: translateY(-100%);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes SlideUp {
    from {
        opacity: 0;
        transform: translateY(100%);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*#endregion */

/*#region Testimonials */
.DTestimonials {
    background-color: var(--c8);
    padding: 60px 0;
    color: #fff;
    overflow: hidden;
    position: relative;
}

    .DTestimonials > div {
        display: grid;
        grid-template-columns: var(--test-grid);
        grid-gap: var(--test-gap);
        justify-content: center;
        align-items: center;
        max-width: var(--max-width);
        width: var(--width);
        margin: 0 auto;
    }

        .DTestimonials > div > *:first-child {
            text-align: right;
            font-size: 20px;
            line-height: 32px;
            display: flex;
            flex-direction: column;
            gap: 30px;
        }

            .DTestimonials > div > *:first-child > h2 {
                color: var(--c5);
                font-size: 32px;
                line-height: 46px;
            }

        .DTestimonials > div *:first-child:hover .Line:before {
            animation: move-short 1.5s infinite linear;
        }

        .DTestimonials > div *:first-child:hover .Line:after {
            animation: move-long 1.5s infinite linear;
        }

        .DTestimonials > div .Line:before, .DTestimonials > div .Line:after,
        .DVision .Line:before, .DVision .Line:after {
            background-color: var(--c18);
        }

        .DTestimonials > div > *:last-child {
            position: relative;
            padding-bottom: 80px;
            width: var(--test-width);
        }

            .DTestimonials > div > *:last-child > div {
                background-color: var(--c19);
                border-radius: var(--test-br);
                z-index: 1;
                margin: var(--test-margin);
                position: relative;
            }

                .DTestimonials > div > *:last-child > div .splide {
                    direction: ltr;
                    transform: var(--test-sp-tr);
                }

                    .DTestimonials > div > *:last-child > div .splide .splide__list li.is-move .splide__slide__container > * {
                        animation: slideExit 0.3s cubic-bezier(0.25, 1, 0.5, 1) forwards;
                    }

                    .DTestimonials > div > *:last-child > div .splide .splide__list li.is-active .splide__slide__container > * {
                        animation: slideEnter 0.3s cubic-bezier(0.25, 1, 0.5, 1) forwards;
                    }

                    .DTestimonials > div > *:last-child > div .splide .splide__list li.is-active .splide__slide__container > span {
                        animation-delay: 100ms;
                    }

                    .DTestimonials > div > *:last-child > div .splide .splide__pagination {
                        bottom: -100px;
                        right: auto;
                        left: 100px;
                    }

                    .DTestimonials > div > *:last-child > div .splide .splide__pagination__page {
                        width: 15px;
                        height: 15px;
                        background-color: var(--c5);
                        opacity: 1;
                        margin: 0 5px;
                        box-sizing: border-box;
                        border: 2px solid var(--c5);
                        transition: all 300ms;
                    }

                        .DTestimonials > div > *:last-child > div .splide .splide__pagination__page.is-active {
                            background-color: transparent;
                            transform: initial;
                            border-color: #fff;
                        }

            .DTestimonials > div > *:last-child .DTestimonial {
            }

                .DTestimonials > div > *:last-child .DTestimonial div {
                    display: grid;
                    justify-content: center;
                    align-items: center;
                    grid-template-columns: max-content;
                    width: fit-content;
                    margin: var(--test-sp-img-m);
                }

                .DTestimonials > div > *:last-child .DTestimonial img {
                    grid-column: 1 / span 1;
                    grid-row: 1 / span 1;
                    margin: 0 auto;
                    position: relative;
                }

                    .DTestimonials > div > *:last-child .DTestimonial img:first-child {
                        transform: scaleX(-1);
                        z-index: 0;
                    }

                .DTestimonials > div > *:last-child .DTestimonial > *:not(div) {
                    margin: var(--test-text-m);
                }

                .DTestimonials > div > *:last-child .DTestimonial p {
                    font-size: var(--test-text-size);
                    line-height: var(--test-text-lh);
                    text-align: right;
                    margin-bottom: 30px;
                }

                .DTestimonials > div > *:last-child .DTestimonial span {
                    display: block;
                    text-align: right;
                    color: var(--c15);
                    opacity: 0;
                }

                    .DTestimonials > div > *:last-child .DTestimonial span:nth-of-type(1) {
                        font-size: 16px;
                        color: var(--c18);
                    }

                .DTestimonials > div > *:last-child .DTestimonial i {
                    font-size: 100px;
                    position: absolute;
                    line-height: 1;
                    left: 0;
                    bottom: -13px;
                    color: var(--c29);
                }



            .DTestimonials > div > *:last-child > img {
                position: absolute;
                z-index: 0;
            }

                .DTestimonials > div > *:last-child > img:nth-of-type(1) {
                    left: var(--test-img-l);
                    top: -42px;
                }

                .DTestimonials > div > *:last-child > img:nth-of-type(2) {
                    right: var(--test-img-r);
                    bottom: -111px;
                    scale: -1 1 1;
                    display: block;
                }


/*#endregion */
/*#region Steps */
.DSteps {
    position: relative;
    overflow: hidden;
}

    .DSteps > img {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: auto;
        z-index: 2;
    }

        .DSteps > img:nth-of-type(1) {
            z-index: 1;
            box-sizing: border-box;
            padding-bottom: 10%;
        }

    .DSteps > div {
        position: relative;
        z-index: 3;
    }


        .DSteps > div > div.DBtn {
            margin: 75px auto 0;
        }

        .DSteps > div > div:not([class]) {
            display: grid;
            grid-template-columns: var(--steps-grid);
            gap: 60px;
            justify-content: center;
            align-items: center;
            margin-top: 75px;
        }

        .DSteps > div > div > div {
            display: flex;
            gap: 15px;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: var(--c5);
        }


            .DSteps > div > div > div > img {
                border-radius: 50%;
                margin-bottom: 15px;
                transition: all 300ms ease;
            }

            .DSteps > div > div > div:hover > img {
                box-shadow: -25px 20px 20px -15px rgba(0,0,0,0.3);
            }

            .DSteps > div > div > div > h3 {
                font-size: 23px;
            }

            .DSteps > div > div > div > p {
                font-size: 15px;
                color: var(--c12);
            }

/*#endregion */
/*#region { */

.DBox {
}

    .DBox > div {
        max-width: var(--max-width);
        width: var(--width);
        margin: 0 auto;
        padding: 120px 0;
        display: flex;
        flex-direction: column;
        gap: 30px;
        justify-content: center;
        align-items: center;
    }

        .DBox > div > h2 {
            font-size: 40px;
            line-height: 56px;
        }

        .DBox > div > p {
            font-size: 18px;
            line-height: 30px;
            color: var(--c12);
            text-align: right;
        }

        .DBox > div > *:hover ~ .Line:before, .DFAbout > h3:hover + .Line:before {
            animation: move-short 1.5s infinite linear;
        }

        .DBox > div > *:hover ~ .Line:after, .DFAbout > h3:hover + .Line:after {
            animation: move-long 1.5s infinite linear;
        }

/*#endregion */
/*#region Packages */
.DPackages {
    background-color: var(--c6);
}


    .DPackages > div > div:not([class]) {
        background-color: #fff;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        justify-content: center;
        align-items: center;
        box-shadow: 0 14px 32px 10px rgba(0,0,0,0.2);
        margin: 0 15px;
        border-radius: 10px;
        width: 100%;
    }

        .DPackages > div > div:not([class]) > div {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            gap: 30px;
            flex-direction: column;
            padding: 60px;
            position: relative;
        }

            .DPackages > div > div:not([class]) > div:nth-of-type(-n+2):after {
                position: absolute;
                content: '';
                top: 150px;
                bottom: 150px;
                left: -2px;
                width: 4px;
                background-image: url('../Images/PackageBorder.webp');
                background-position: top center;
                background-repeat: repeat-y;
            }

            .DPackages > div > div:not([class]) > div > div:has(img) {
                width: 120px;
                height: 120px;
                position: relative;
                margin: 0 auto 15px;
                display: flex;
                justify-content: center;
                align-items: center;
            }

                .DPackages > div > div:not([class]) > div > div:has(img) > img {
                    position: relative;
                    width: 100px;
                    height: auto;
                }

                .DPackages > div > div:not([class]) > div > div:has(img):before {
                    box-sizing: border-box;
                    border: 15px solid var(--c6);
                    border-radius: 50%;
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 120px;
                    height: 120px;
                    z-index: 0;
                    content: '';
                }

            .DPackages > div > div:not([class]) > div > h3 {
                font-size: 30px;
                transition: all 300ms;
            }

            .DPackages > div > div:not([class]) > div:hover > h3 {
                color: var(--c4);
            }

            .DPackages > div > div:not([class]) > div > p {
                font-size: 20px;
                color: var(--c4);
            }

            .DPackages > div > div:not([class]) > div > a {
                margin-top: 20px;
            }

            .DPackages > div > div:not([class]) > div > div > div {
                display: flex;
                justify-content: center;
                gap: 5px;
                font-size: 15px;
                color: var(--c12);
                line-height: 30px;
            }

                .DPackages > div > div:not([class]) > div > div > div.DImp {
                    color: var(--c8);
                }

                .DPackages > div > div:not([class]) > div > div > div > span:nth-child(1) {
                    font-weight: bold;
                    color: var(--c5);
                }


/*#endregion */
/*#region Products */
.DProducts {
    background-color: var(--c6);
    padding-bottom: 100px;
}

#SProducts {
    width: 100%;
    margin-top: 40px;
}

    #SProducts .splide__slide__container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
    }

        #SProducts .splide__slide__container img {
            max-width: 192px;
            max-height: 192px;
            width: 100%;
            height: auto;
            filter: grayscale(1);
            transition: all 300ms;
        }

            #SProducts .splide__slide__container img:hover {
                /*filter: initial;*/
                opacity: 0.5;
            }

    #SProducts .splide__arrows {
        position: absolute;
        bottom: -100px;
        width: 250px;
        margin: 0 auto;
        left: 0;
        right: 0;
    }

    #SProducts .splide__arrow i {
        font-size: 28px;
    }

    #SProducts .splide__arrow:hover i {
        color: var(--c4);
    }
/*#endregion */
/*#region Projects */
.DLastProjects > div > div:not(.Line) {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px;
    justify-content: center;
    align-items: center;
    margin-bottom: 100px;
}

.DPortFolios {
    display: grid;
    grid-template-columns: var(--port-grid);
    gap: 30px;
    justify-content: center;
    align-items: center;
    margin: 100px auto;
    width: var(--width);
    max-width: var(--max-width);
}

.DPortFolio {
    background-color: var(--c6);
    padding: 30px;
    color: var(--c5);
    font-size: 22px;
    line-height: 30px;
    transition: all 300ms ease;
    overflow: hidden;
    box-sizing: border-box;
    min-width: var(--port-box-mw);
}

    .DPortFolio > div {
        margin-bottom: 40px;
        padding: var(--port-padding);
        transition: all 300ms ease;
        position: relative;
    }

        .DPortFolio > div:before {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(222,222,222,1) 0%, rgba(237,237,237,1) 100%);
            /*background: linear-gradient(135deg,hsla(0, 0%, 87%, 1) 0%, hsla(180, 14%, 97%, 1) 100%);*/
            /*background: linear-gradient(135deg, hsla(180, 10%, 94%, 1) 0%, hsla(180, 14%, 97%, 1) 100%);*/
            box-shadow: 0 16px 16px -8px rgba(0,0,0,0.3);
            transition: all 300ms ease;
            z-index: 0;
            opacity: 1;
        }



        .DPortFolio > div img {
            box-shadow: 0 0 16px rgba(0,0,0,0.5);
            /*max-width: var(--port-width);*/
            width: 100%;
            height: auto;
            transition: all 300ms ease;
            position: relative;
            z-index: 1;
        }

    .DPortFolio:hover {
        background-color: var(--c4);
        color: #fff;
        border-radius: 10px;
    }

        .DPortFolio:hover > div {
            padding: 0;
        }

            .DPortFolio:hover > div:before {
                opacity: 0.2;
                transform: perspective(400px) rotateX(90deg);
                border-radius: 5px;
            }

            .DPortFolio:hover > div img {
                animation: imageSwing forwards 600ms ease;
                /*width: var(--port-width-h);*/
            }

@keyframes imageSwing {
    0% {
        transform: perspective(400px) rotateX(0);
    }

    25% {
        transform: perspective(400px) rotateX(10deg);
    }

    75% {
        transform: perspective(400px) rotateX(0);
    }

    100% {
        box-shadow: 0 16px 16px -8px rgba(0,0,0,0.5);
        border-radius: 5px;
    }
}
/*#endregion */
/*#region Line */
.Line {
    position: relative;
    display: flex;
}

    .Line:before, .Line:after {
        content: '';
        height: 3px;
        background-color: var(--c4);
        width: 30px;
    }

    .Line:before {
        margin-left: 15px;
    }

    .Line:after {
        width: 95px;
    }

@keyframes move-short {

    0% {
        width: 0;
        margin-left: 15px;
    }

    100% {
        width: 135px;
        margin-left: 5px;
    }
}

@keyframes move-long {
    0% {
        width: 125px;
    }

    100% {
        width: 0;
    }
}


/*#endregion */
/*#region Login */
.DLogin {
    max-width: var(--max-width);
    width: var(--width);
    margin: 0 auto;
}

    .DLogin .DLoginForm {
        margin: 40px auto;
        width: 100%;
        display: flex;
        gap: 30px;
        flex-direction: column;
        align-items: center;
    }

        .DLogin .DLoginForm input {
            width: 100%;
            max-width: 400px;
            direction: ltr;
        }

    .DLogin .PUMDiv {
        width: 100%;
        margin-top: 10px;
        margin-bottom: -20px;
    }

/*#endregion */
/*#region Scroll */
[data-scroll] {
    animation-fill-mode: forwards;
    animation-duration: var(--sc-duration);
    animation-delay: var(--sc-delay);
    animation-iteration-count: 1;
    animation-play-state: paused;
    opacity: 0;
}

    [data-scroll].SAnimUp {
        transform: translateY(100%);
        animation-name: SAnimUp;
    }

    [data-scroll].SAnimRotate {
        animation-name: SAnimRotate;
    }

    [data-scroll].SAnimFade {
        animation-name: SAnimFade;
    }

    [data-scroll][data-scroll-anim] {
        animation-play-state: running;
    }

@keyframes SAnimRotate {
    from {
        opacity: 0;
        transform: rotateZ(0deg);
    }

    to {
        opacity: 1;
        transform: rotateZ(360deg);
    }
}

@keyframes SAnimUp {
    from {
        opacity: 0;
        transform: translateY(100%);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes SAnimFade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
/*#endregion */
.Title {
    position: relative;
    font-weight: 600;
    margin-bottom: 20px;
    display: block;
    font-size: 18px;
}

    .Title:before {
        width: 20px;
        height: 3px;
        background-color: var(--c2);
        content: '';
        position: absolute;
        top: -15px;
        left: 0;
        right: 0;
        margin: 0 auto;
    }

.DServices {
    width: var(--width);
    max-width: var(--max-width);
    margin: 0 auto;
    font-size: 16px;
    line-height: 28px;
    grid-template-columns: var(--service-grid);
    grid-gap: 80px 60px;
    display: grid;
    align-items: flex-start;
    justify-content: center;
    padding: 100px 0;
}

    .DServices > div {
        grid-template-columns: max-content 1fr;
        grid-gap: 10px 30px;
        display: grid;
        align-items: flex-start;
        justify-content: flex-start;
        text-align: right;
    }

        .DServices > div > img {
            border-radius: 50%;
            grid-row: 1 / span 2;
        }

        .DServices > div > h3 {
            font-size: 22px;
            margin-top: 10px;
        }

        .DServices > div > p {
            color: var(--c12);
            font-size: 14px;
        }


/*#region Responsive */
@media(max-width:1240px) {
    :root {
        --grid3: 1fr 1fr;
        --grid3-gap: 20px;
        --test-gap: 30px;
        --port-padding: 18px 25px;
        --port-box-mw: 250px;
        --service-grid: 1fr 1fr;
    }

    .DSteps > img {
        min-width: 1300px;
        object-fit: none;
        object-position: right;
    }
}

@media(max-width:1024px) {
    :root {
        --sc-padding: 80px 0 30px;
        --sc-margin-bottom: 0;
        --sc-grid: 1fr 1fr;
        --sc-margin: 0;
        --g-grid: 1fr 1fr;
        --ssh-b-left: 0;
        --ssh-b-right: 0;
        --f-i-grid: max-content max-content;
        --test-gap: 0;
        --steps-grid: 1fr 1fr;
        --service-grid: 1fr 1fr;
        --header-padding: 70px 0;
        --header-gap: 30px;
        --port-grid: 1fr 1fr;
        --profit-col: initial;
        --contacts-grid: 1fr 1fr;
        --nf-img-width: 350px;
        --nf-padding: 20px 0 calc(((251 / 716) * 50%) - 89px);
        --nf-bg-size: 50% auto;
    }

    .DLastProjects {
        --port-padding: 20px 30px;
        --port-box-mw: 380px;
    }

        .DLastProjects > div > div:not(.Line) {
            width: 100vw;
            overflow-x: auto;
            justify-content: flex-start;
        }

    .Content {
        margin-bottom: 0;
    }

    .Footer {
        position: initial;
    }

    #SSSBoxes p {
        display: none;
    }

    #SSSBoxes .splide__slide__container {
        height: 100%;
        display: flex;
        align-items: center;
    }

    .DNotFound > div > * {
        grid-row: 1 / span 2;
        grid-column: 1 / span 1;
        z-index: 1;
    }

    .DNotFound > div > img {
        justify-self: flex-end;
        grid-row: 2 / span 2;
        z-index: 0;
    }

    .DNotFound > div {
        grid-template-columns: 1fr;
        grid-template-rows: max-content 50px 1fr;
    }
}

@media(max-width:900px) {
    :root {
        --test-gap: 60px;
        --test-grid: 1fr;
        --test-margin: 56px 56px 100px 0;
        --test-img-r: 20px;
    }

    #cm-nav li {
        padding: 5px 18px;
    }
}

@media(max-width:800px) {
    :root {
        --grid3: 1fr;
        --grid-stats: 1fr 1fr;
        --t-grid: 1fr 32px max-content;
        --t-position: initial;
        --m-margin-right: 0;
        --m-position: initial;
        --m-margin: 0 20px 0 0;
        --contact-grid: 1fr;
        --dir-grid: 1fr 1fr;
        --ssh-height: 104px;
        --ssh-padding: 0;
        --nl-grid: 1fr;
        --test-margin: 56px 30px 120px 0;
        --test-br: 70px 0;
        --test-img-l: 58px;
        --test-width: calc(100vw - 40px);
        --test-text-m: 0 136px 0 20px;
        --test-text-size: 16px;
        --test-text-lh: 25px;
        --sh-height: initial;
        --a-f-size: 14px;
        --a-padding: 15px 26px;
        --a-mw: 120px;
        --a-right: 10px;
        --a-top: 9px;
        --top-info-grid: 1fr 159px;
        --expert-grid: 1fr 1fr;
        --profit-grid: 1fr;
    }

    #SSSBoxes h2 {
        display: none;
    }

    .DPackages > div > div:not([class]) {
        overflow-x: auto;
        justify-content: flex-start;
    }

    .Top .TopTD .DInfo, .TopInfo .DTopInfo > div:nth-child(2) {
        display: none;
    }

    nav {
        width: calc(100vw - 110px);
        height: 100vh;
        grid-column: 1 / -1;
        position: absolute;
        right: 0;
        top: 0;
        z-index: 5;
        align-items: flex-start;
        padding-top: 10px;
        transform: translateX(100vw);
        transition: transform 300ms;
        top: 55px;
    }

        nav.Active {
            background-color: var(--c6);
            box-shadow: -6px 9px 9px 0 rgba(47, 44, 44,0.3);
            transform: translateX(0);
        }

    .TopDiv.Show nav {
        top: 82px;
    }

    ul#cm-nav li {
        float: none;
        text-align: right;
    }

    #cm-nav a {
        text-align: right;
    }


    .plate {
        display: block !important;
    }

    #SSlideShow .splide__slide__container {
        height: 100%;
    }

        #SSlideShow .splide__slide__container > div {
            grid-template-columns: 1fr;
            padding: 40px 0;
        }

            #SSlideShow .splide__slide__container > div.DHor img {
                max-width: 100%;
            }

            #SSlideShow .splide__slide__container > div:not(.DHor) img {
                max-width: 600px;
                margin: 0 auto;
                width: calc(100% - 40px);
            }

            #SSlideShow .splide__slide__container > div:not(:has(.ATrans)) a {
                grid-column: 1 / -1;
            }

    #SSlideShow h2 {
        font-size: 30px;
        line-height: 42px;
    }

    #SSlideShow .DHor h2 {
        color: var(--c5);
    }

    #SSlideShow h3 {
        font-size: 18px;
    }

    #SSlideShow p {
        font-size: 22px;
        line-height: 35px;
    }
}

@media(max-width:720px) {
    :root {
        --grid-socials: 1fr;
        --grid-socials-justify: center;
        --sm-width: 100%;
        --ssh-b-fs: 13vw;
        --ssh-height: 16vw;
        --f-i-grid: 1fr;
        --f-i-padding: 40px 0;
        --service-grid: 1fr;
        --sup-grid: 1fr;
        --cf-grid: 1fr 1fr;
        --cf-captcha: 1 / -1;
        --cf-btn: 1 / -1;
    }

    .DContact .DContactForm > div:not(.PUMDiv) > div.g-recaptcha {
        margin: 0 auto;
    }

    .DContact .DContactForm > div:not(.PUMDiv) > div:has(.ADark) {
        justify-self: center;
    }
}

@media(max-width:640px) {
    :root {
        --sc-grid: 1fr;
        --stats-margin: 0 auto var(--gap);
        --gap: 60px;
        --g-grid: 1fr;
        --consult-grid: 1fr;
        --consult-i-br: 50px;
        --consult-i-br-1: 50px;
        --port-grid: 1fr;
        --contacts-grid: 1fr;
        --nf-padding: 20px 0 74px;
        --nf-img-width: 300px;
        --nf-bg-size: auto 150px;
        --nf-f-size: 45vw;
        --nf-f-size1: 30px;
    }


    .DContact iframe {
        width: 100vw;
    }

    .g-recaptcha iframe {
        width: 100%;
        margin: 0 auto;
    }

    .DNews.DBox #SNews .splide__pagination {
        top: auto;
        right: 0;
        bottom: -70px;
    }

    .DBox > div > h2 {
        font-size: 30px;
        line-height: 42px;
    }

    .DNotFound > div > img {
        justify-self: center;
    }
}

@media(max-width:550px) {
    :root {
        --steps-grid: 1fr;
        --stat-fs-1: 80px;
        --stat-fs-2: 20px;
    }
}

@media(max-width:480px) {
    :root {
        --ln-padding: 60px 20px;
        --cf-grid: 1fr;
        --cf-captcha: 1fr;
        --cf-btn: 1fr;
        --cf-div: 1fr;
        --dir-grid: 1fr;
        --nl-i-br: 50px;
        --test-margin: 56px 0 146px;
        --test-sp-tr: translateY(-46px);
        --test-sp-img-m: 76px auto 26px;
        --test-text-m: 0 20px;
        --stat-fs-1: 70px;
        --stat-fs-2: 19px;
    }

    .DNewsLetter > div > div > div {
        flex-direction: column;
        gap: 20px;
        align-items: center;
    }

        .DNewsLetter > div > div > div a {
            display: inline-flex;
            order: 2;
            border-radius: 50px;
        }

    /*.splide__arrow--next {
        right: -10px !important;
    }

    .splide__arrow--prev {
        left: -10px !important;
    }*/
}

@media(max-width:400px) {
    :root {
        --expert-grid: 1fr;
    }

    #SSlideShow .splide__slide__container > div:not(.DHor) > div {
        grid-template-columns: 1fr;
    }

    .Top {
        height: 96px;
    }

        .Top .TopTD .DLogo img {
            width: 150px;
        }
}

@media(max-width:360px) {
    :root {
        --stat-grid: 1fr;
        --stat-align: center;
        --stat-grid-rows: 44px 1fr 1fr;
        --stat-fs-1: 65px;
        --stat-fs-2: 18px;
        --nf-padding: 20px 0 87px;
        --nf-img-width: 250px;
    }

    .DNews.DBox > div > a {
        font-size: 12px;
    }

    .DServices > div {
        text-align: center;
        grid-template-columns: 1fr;
    }

        .DServices > div > img {
            margin: 0 auto;
        }

    .DLastProjects {
        --port-padding: 15px 22px;
        --port-box-mw: calc(100vw - 40px);
    }

    .g-recaptcha {
        overflow-x: auto;
    }
}


/*#endregion */






.plate {
    height: 42px;
    width: 42px;
    position: relative;
    display: none;
}

.burger {
    filter: url(#gooeyness);
}

.plate svg {
    height: 42px;
    position: absolute;
    width: 42px;
    right: 0;
}

.x {
    transform: scale(0);
    transition: transform 400ms;
}

.line {
    fill: none;
    stroke: black;
    stroke-width: 6px;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform-origin: 50%;
    transition: stroke-dasharray 500ms 200ms, stroke-dashoffset 500ms 200ms, transform 500ms 200ms;
}

.x .line {
    stroke-width: 5.5px;
}
/* First plate */
.plate1 .line2 {
    stroke-dasharray: 40 200;
    stroke-dashoffset: 0px;
}

.plate1 .line3 {
    stroke-dasharray: 40 179;
    stroke-dashoffset: 0px;
}

.Active .line {
    transition: stroke-dasharray 500ms, stroke-dashoffset 500ms, transform 500ms;
}

.Active.plate1 .line1 {
    transform: scale(0, 1);
    transition: transform 500ms 100ms;
}

.Active.plate1 .line2 {
    stroke-dasharray: 5px 200;
    stroke-dashoffset: -164px;
}

.Active.plate1 .line3 {
    stroke-dasharray: 5px 179;
    stroke-dashoffset: -142px;
}

.Active .x {
    transform: scale(1);
    transition: transform 400ms 350ms;
}