@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&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
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

:root {
    --max-width: 1200px;
    --width: calc(100% - 40px);
    --c1: #151414;
    --c01: #15141400;
    --c2: #999;
    --c3: #ccc;
    --c4: #fbda10;
    --c5: #2f2c2c;
    --c6: #f7f9f9;
    --c7: #ec196a;
    --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: #25517c;
    --c23: #0a223a;
    --c24: #d2d2d3;
    --c25: #f0f2f2;
    --c26: #8dc63f;
    --c27: #ff9700;
    --c28: #6739b6;
    --c29: #3b3432;
    --c30: #fff;
    --c31: #7c7c7c;
    --c32: #5ebbde;
    --c33: 21 58 97;
    --c34: #153a61;
    --c35: #f8d98e;
    --c36: #061422;
    --c37: #030b13;
    --c38: #9ccb9e;
    --c39: #002954;
    --c40: #74c778;
    --c41: #95c6c3;
    --rotate: 0;
    --sh-height: auto;
    --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: 26px 0;
    --t-grid: max-content 1fr;
    --t-position: relative;
    --m-margin-right: 100%;
    --m-position: absolute;
    --m-margin: 0;
    --m-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    --stat-grid: max-content max-content;
    --stat-align: left;
    --stat-grid-rows: initial;
    --stats-margin: -50px auto 70px;
    --stat-fs-1: 100px;
    --stat-fs-2: 24px;
    --contact-grid: 300px 1fr;
    --cf-grid: 1fr 1fr 1fr 1fr;
    --cf-captcha: 1 / span 2;
    --cf-div: auto / span 2;
    --cf-btn: auto / span 2;
    --sm-width: 1000px;
    --g-grid: 1fr 1fr 1fr;
    --dir-grid: 1fr 1fr 1fr;
    --sc-duration: 500ms;
    --sc-delay: 0;
    --ssh-b-left: auto;
    --ssh-b-right: 46px;
    --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: minmax(300px,470px) minmax(420px,1fr) 58px;
    --nl-i-br: 50px 0 0 50px;
    --test-grid: minmax(200px,300px) minmax(600px,1fr);
    --test-gap: 80px;
    --test-margin: 56px 0 0 56px;
    --test-width: auto;
    --test-img-l: 98px;
    --test-img-r: -160px;
    --test-br: 0 100px;
    --test-text-m: 0 44px 0 136px;
    --test-text-size: 20px;
    --test-text-lh: 27px;
    --test-sp-tr: translateY(-46px) translateX(-36px);
    --test-sp-img-m: 0 auto -10px 0;
    --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: 50px 0 0 50px;
    --consult-i-br-1: 0 50px 50px 0;
    --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: 1fr max-content;
    --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;
    --nav-padding: 5px 20px;
    --logo-width: 82px;
    --top-height: 132px;
    --nf-img-width: initial;
    --nf-bg-size: initial;
    --nf-f-size: 257px;
    --nf-f-size1: 40px;
    --sp-font-1: 60px;
    --sp-font-2: 50px;
    --sp-font-3: 30px;
    --sp-font-lh: 42px;
    --font-family: "Montserrat";
    --a-height: 450px;
    --faq-width: 60%;
}

em {
    font-style: normal
}

section {
    display: block
}

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



input[type=password], input, select, textarea {
    box-sizing: border-box;
    font-family: var(--font-family);
}

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

    input[type=password]:disabled, input: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 10px;
    position: absolute;
    right: -4px;
    left: -4px;
    line-height: 11px;
    margin-top: -61px;
    display: none;
    opacity: 0;
    transition: all 300ms;
    border-radius: 5px 5px 0 0;
    font-weight: bold;
}

    .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: 0;
        position: absolute;
        bottom: -7px;
        left: 0;
    }

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

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

.ValErr:disabled, .ValErr:not(.DRV) {
    border: 2px solid var(--c7) !important;
}

.ValErr::placeholder {
    color: var(--c7) !important;
}

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

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

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

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.IPhone: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: '\e918';
    }

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

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

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

    i.IYoutube:before {
        content: '\e91d';
    }

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

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

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

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

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


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;
}

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;
    width: 100%;
    height: auto;
}

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);
            left: 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: var(--font-family);
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 13px;
    line-height: 25px;
    margin: 0;
    text-align: center;
    overflow-x: hidden;
}

    body.Active {
        overflow: hidden;
    }

.TopInfo {
    background-color: var(--c37);
    color: var(--c3);
    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(1) {
            display: flex;
            gap: 20px;
            justify-content: flex-start;
            align-items: center;
            line-height: 1;
        }

            .TopInfo .DTopInfo > div:nth-child(1) div {
                display: grid;
                grid-template-columns: max-content 1fr;
                gap: 5px;
                align-items: flex-end;
            }

            .TopInfo .DTopInfo > div:nth-child(1) i {
                font-size: 16px;
                line-height: 1;
                color: var(--c35);
            }

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

            .TopInfo .DTopInfo > div:nth-child(2) i {
                font-size: 22px;
                line-height: 22px;
                transition: all 300ms;
            }


        .TopInfo .DTopInfo a {
            color: inherit;
        }

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



        .TopInfo .DTopInfo i.IFacebook:hover {
            color: #1877F2;
        }

        .TopInfo .DTopInfo i.IYoutube:hover {
            color: #ff0000;
        }

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

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

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

        .TopInfo .DTopInfo i.ILinkedin:hover {
            color: #0762C8;
        }

        .TopInfo .DTopInfo .DLang {
            display: flex;
            align-items: center;
            font-family: IRANSansX;
        }

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


.Top {
    height: var(--top-height);
    background-color: var(--c30);
}

    .Top .TopDiv {
        padding: var(--t-padding);
        z-index: 20;
        top: 0;
        position: relative;
        background-color: var(--c30);
        transform-origin: top;
        transition: padding,background-color 300ms;
    }

        .Top .TopDiv.Hide, .Top .TopDiv.Show {
            box-shadow: 0 2px 10px 0 rgba(47,44,44,0.2);
            padding: 15px 0;
            /*animation: swingOutX 500ms both ease;*/
            --logo-width: 60px;
            position: fixed;
            left: 0;
            right: 0;
        }

        .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: var(--logo-width);
            transition: all 300ms ease-in-out;
            height: auto;
        }

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

            .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-size: 16px;
    justify-self: flex-end;
}



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

    ul#cm-nav ul {
        background-color: var(--c30);
        box-shadow: var(--m-shadow);
        border-top: 3px solid var(--c35);
        border-radius: 3px;
    }

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

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

        ul#cm-nav li:has(ul) {
            padding-right: 40px !important;
        }

            ul#cm-nav li:has(ul):after {
                font-family: fontIcon;
                font-size: 20px;
                content: '\e904';
                transform: rotate(180deg);
                position: absolute;
                right: 15px;
                top: 5px;
                font-weight: bold;
                line-height: 40px;
            }

    ul#cm-nav > li:has(ul):after {
        transform: rotate(-90deg);
        top: 7px;
    }

    ul#cm-nav > li:last-child {
        padding-right: 0;
    }

#cm-nav a {
    color: var(--c34);
    font-size: 18px;
    display: block;
    line-height: 40px;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    position: relative;
    font-weight: 600;
    transition: color 300ms;
}

#cm-nav li:hover > a,
ul#cm-nav li:has(ul):hover:after {
    color: var(--c35) !important;
}



#cm-nav > li:hover > a:before {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    animation: menu .3s linear;
    content: '';
    background-color: var(--c35);
}

ul#cm-nav > li:has(ul) a:before {
    display: none;
}

@keyframes menu {
    0% {
        width: 0;
    }

    100% {
        width: 100%;
    }
}


@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: var(--nav-padding);
}

#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 {
    padding: 5px 20px 5px 20px;
}

    #cm-nav ul.arrow-pad > li > a {
        text-align: left;
        font-size: 16px;
    }

#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-left: var(--m-margin-right);
    box-shadow: var(--m-shadow);
    top: -3px;
}

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

#cm-nav ul ul {
    top: 0px;
    left: 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 */
.Header {
    z-index: 6;
    position: relative;
}

.SSlideShow a[href=""], .SSlideShow .splide a[href="#"] {
    cursor: default;
}

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

    .SSlideShow .splide__slide img {
        height: var(--sh-height);
        object-fit: cover;
        object-position: center;
        display: revert;
    }

    .SSlideShow .splide__slide.is-active h2 {
        animation: slide-in-right 0.6s cubic-bezier(0.645, 0.045, 0.355, 1.000) both;
    }

    .SSlideShow .splide__slide.is-active h3 {
        animation: slide-in-left 0.5s cubic-bezier(0.645, 0.045, 0.355, 1.000) both;
    }

    .SSlideShow .splide__slide.is-active p {
        animation: slide-in-left 0.5s cubic-bezier(0.645, 0.045, 0.355, 1.000) both;
    }

    .SSlideShow .splide__slide.is-active hr {
        animation: hrRight 0.5s cubic-bezier(0.645, 0.045, 0.355, 1.000) both;
    }

    .SSlideShow .splide__slide.is-active:has(.TopLeft) hr {
        animation: hrLeft 0.5s cubic-bezier(0.645, 0.045, 0.355, 1.000) both;
    }

    .SSlideShow .splide__slide.is-prev p:before {
        background: red;
    }

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

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

.SSlideShow .splide__progress {
    margin-top: -3px;
    z-index: 4;
    position: relative;
}

.SSlideShow .splide__progress__bar {
    height: 3px;
    background: var(--c2);
}

.SSlideShow .splide__Contents {
    position: absolute;
    width: var(--width);
    max-width: var(--max-width);
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    margin: auto;
    gap: 15px;
}


    .SSlideShow .splide__Contents > * {
        position: relative;
        z-index: 1;
        opacity: 0;
        color: #fff;
    }

    .SSlideShow .splide__Contents > hr {
        width: 50%;
        margin: 0;
        height: 3px;
        border: none;
        background-color: var(--c30);
    }

    .SSlideShow .splide__Contents h2 {
        font-size: 50px;
        line-height: 1;
        font-weight: 800;
        text-shadow: 0px 0px 25px rgba(0,0,0,1);
    }

    .SSlideShow .splide__Contents h3 {
        font-size: 40px;
        color: var(--c35);
        line-height: 1;
        font-weight: bold;
        text-align: left;
        max-width: 50%;
        text-shadow: 0px 0px 25px rgba(0,0,0,1);
    }

    .SSlideShow .splide__Contents p {
        font-size: 25px;
        line-height: 30px;
        text-align: left;
        max-width: 50%;
        font-weight: 500;
        text-shadow: 0px 0px 25px rgba(0,0,0,1);
    }

    .SSlideShow .splide__Contents:has(.TopLeft) h2 {
        margin: 0 0 0 10vw;
    }

    .SSlideShow .splide__Contents:has(.TopLeft) p {
        margin: 0 0 0 auto;
    }

@keyframes hrLeft {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }

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

@keyframes hrRight {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }

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

@keyframes skewX {
    0% {
        transform: skewX(0);
    }

    100% {
        transform: skewX(-30deg);
    }
}

@keyframes slide-in-right {
    0% {
        transform: translateX(5vw);
        opacity: 0;
    }

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

@keyframes slide-in-left {
    0% {
        transform: translateX(-10vw);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}
/*#endregion */
.Header {
    background-color: #fff;
}

.HeaderTD.Inner {
    display: flex;
    grid-gap: var(--header-gap);
    margin: 0 auto;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #fff;
    position: relative;
    overflow: hidden;
    min-height: 298px;
    background: radial-gradient(circle, rgba(28,71,97,1) 0%, rgba(3,11,19,1) 100%);
}

    .HeaderTD.Inner img {
        position: absolute;
        z-index: 0;
        min-height: 100%;
        width: auto;
        min-width: 100%;
        margin: auto;
    }

        .HeaderTD.Inner img[src=""] {
            display: none;
        }

    .HeaderTD.Inner:after {
        position: absolute;
        content: '';
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        z-index: 1;
        background: rgba(0, 0, 0, 0.5);
    }

    .HeaderTD.Inner > *:not(img) {
        position: relative;
        z-index: 2;
    }

    .HeaderTD.Inner h1 {
        font-size: 44px;
        font-weight: 600;
        line-height: 52px;
    }

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

        .HeaderTD.Inner .DSiteMap a {
            color: var(--c35);
        }

            .HeaderTD.Inner .DSiteMap a:hover {
                color: var(--c30);
            }

        .HeaderTD.Inner .DSiteMap span {
            opacity: 0.5;
            display: inline-block;
            margin: 0 5px;
        }

.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: left;
}

    .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;
}

.Footer {
    background-color: var(--c36);
    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: left;
    }

.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 15px;
        justify-content: flex-start;
        align-items: center;
        text-align: left;
    }

        .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,
            .FooterTD > .DFInfo > div > a {
                font-size: 18px;
                color: #fff;
            }

            .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: left;
}

.FooterTD .DCopyRight {
    grid-column: 1 / -1;
    padding: 60px 0;
    color: #ffffff50;
    font-size: 14px;
    text-align: left;
    background-color: var(--c37);
}

    .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.5;
    }

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

    .FooterTD .DCopyRight i {
        font-size: 42px;
        cursor: pointer;
        opacity: 0.15;
        color: #fff;
        transition: all 300ms;
    }

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

.DContacts > div {
    display: grid;
    grid-template-columns: 16px 1fr;
    grid-gap: 20px 10px;
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
}

.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%;
}

    .DPager > a {
        color: var(--c36);
        text-align: center;
        padding: 10px;
        border-radius: 50%;
        aspect-ratio: 1;
        width: 42px;
        box-sizing: border-box;
    }

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

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

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

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

    .DPager i {
        display: block;
        font-size: 20px;
    }

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

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

    .DPager a[class][href]:hover i {
        animation: BtnLeft 0.7s infinite both;
    }
/*#endregion */
/*#region Gallery */
.hes-gallery {
    width: var(--width);
    max-width: var(--max-width);
    display: grid;
    margin: 60px auto;
    gap: 20px;
    grid-template-columns: var(--g-grid);
}

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

    .hes-gallery > a {
        position: relative;
        border-radius: 10px;
        overflow: hidden;
        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(--c36);
    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 */


article {
    text-align: justify;
    max-width: var(--max-width);
    width: var(--width);
    margin: 0 auto;
    font-size: 18px;
    line-height: 30px;
}

    article.Alone {
        margin: 40px auto;
    }

    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;
    }

    article .AArrow,
    article .ABack,
    .DForm .AArrow {
        width: fit-content;
        max-width: initial;
    }

    article .AArrow, article .ABack {
        margin: 20px 0 40px auto;
    }

    article h2 {
        font-weight: bold;
        font-size: 20px;
        margin: 30px 0 10px;
        color: var(--c22);
    }

    article h3 {
        font-weight: bold;
        font-size: 18px;
    }

    article ul {
        padding: 0 0 0 20px;
    }

        article ul li {
            margin-bottom: 20px;
        }

            article ul li:last-child {
                margin-bottom: 0;
            }

    article li p {
        margin: 0 0 10px 0;
    }

    article ol:has(ul) > li {
        margin-bottom: 20px;
    }

    article ol:has(ul) ul > li {
        margin-bottom: 0px;
    }

    article ol > li:has(h3)::marker {
        font-weight: bold;
    }

.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: left;
    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 .DForm div:has(>select) {
    display: none !important;
}

.DContact .DContactInfo {
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: center;
    justify-content: center;
}

    .DContact .DContactInfo > div {
        display: flex;
        flex-direction: column;
        gap: 3px;
        align-items: center;
        justify-content: center;
        color: var(--c34);
    }

        .DContact .DContactInfo > div > i {
            font-size: 36px;
            line-height: 36px;
            color: #F8B864;
        }

        .DContact .DContactInfo > div > a {
            color: inherit;
        }

.DContact .DContactSocials {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 60px;
}

    .DContact .DContactSocials i {
        font-size: 24px;
        color: Var(--c30);
        background-color: var(--c35);
        border-radius: 50%;
        padding: 10px;
        transition: all 300ms;
        display: block;
        width: 44px;
        aspect-ratio: 1;
        box-sizing: border-box;
        line-height: 1;
    }

        .DContact .DContactSocials i.IFacebook:hover {
            background-color: #1877F2;
        }

        .DContact .DContactSocials i.IYoutube:hover {
            background-color: #ff0000;
        }

        .DContact .DContactSocials i.ITelegram:hover {
            background-color: #229ed9;
        }

        .DContact .DContactSocials i.IInstagram:hover {
            background-color: #bc2a8d;
        }

        .DContact .DContactSocials i.IWhatsapp:hover {
            background-color: #25d366;
        }

        .DContact .DContactSocials i.ILinkedin:hover {
            background-color: #0762C8;
        }

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

/*#region MessageBox */
.PUMDiv {
    border-radius: 10px;
    font-weight: 400;
    text-align: left;
    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'
    }

/*#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 {
        padding: 20px;
        border-radius: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        flex-direction: column;
    }

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

.Loader {
    width: 6px;
    height: 6px;
    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: 80px 0;
    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: flex;
        flex-direction: column;
        color: var(--c12);
        font-size: 18px;
        justify-content: center;
        align-items: center;
        gap: 30px;
    }

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

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

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

        .DNotFound > div > img {
            height: auto;
            max-width: 800px;
        }
/*#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-left: 10px;
            display: inline-block;
            transform: scaleX(-1);
        }

        .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 {
}

    .DNews.DBox #SNews .splide__slide__container {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 30px;
        flex-direction: column;
        text-align: left;
        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: 0;
        left: auto;
        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;
                left: 0;
            }

            .DStats > div > div:before {
                width: 50px;
                left: 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-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;
                    left: 0;
                    position: absolute;
                    text-transform: uppercase;
                }
/*#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: left;
            font-size: 20px;
            line-height: 32px;
            display: flex;
            flex-direction: column;
            gap: 30px;
            z-index: 1;
        }

            .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 {
                    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: 100px;
                        left: auto;
                    }

                    .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 {
                        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: left;
                    margin-bottom: 20px;
                }

                .DTestimonials > div > *:last-child .DTestimonial span {
                    display: block;
                    text-align: left;
                    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) {
                    right: var(--test-img-l);
                    top: -42px;
                }

                .DTestimonials > div > *:last-child > img:nth-of-type(2) {
                    left: var(--test-img-r);
                    bottom: -111px;
                    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: left;
        }

        .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;
                right: -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-right: 15px;
    }

    .Line:after {
        width: 95px;
    }

@keyframes move-short {

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

    100% {
        width: 135px;
        margin-right: 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;
        }

    .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;
    }

.HTitle {
    font-size: 40px;
    font-weight: 700;
    line-height: 48px;
    margin: 0;
    padding: 0;
}

.HSubTitle {
    font-size: 30px;
    line-height: 36px;
    margin-top: 10px;
    font-weight: 500;
    margin-bottom: 30px;
}
/*#region About */



.DHAbout {
    width: var(--width);
    max-width: var(--max-width);
    margin: -80px auto 0;
    font-size: 16px;
    line-height: 28px;
    padding: 0 0 100px;
    text-align: left;
    position: relative;
    z-index: 19;
}

    .DHAbout > div {
        display: grid;
        grid-template-columns: 500px 1fr;
        gap: 40px;
        justify-content: flex-start;
        align-items: flex-end;
    }

    .DHAbout .DDonate {
        color: #fff;
        position: relative;
        padding: 85px 60px 60px;
        border-radius: 10px 0 10px 10px;
        background-image: linear-gradient(to bottom left, transparent 50%, var(--c32) 50%), linear-gradient(var(--c32), var(--c32)), linear-gradient(var(--c32), var(--c32));
        background-size: 58px 58px, 100% 100%, 100% 100%;
        background-position: 100% 100%, -58px 0%, 100% 58px;
        background-repeat: no-repeat;
    }

        .DHAbout .DDonate:before {
            position: absolute;
            content: "";
            width: 0;
            height: 0;
            top: 0;
            right: 0;
            border-right: 58px solid transparent;
            border-bottom: 58px solid #fff;
        }

        .DHAbout .DDonate h3 {
            font-size: 36px;
            line-height: 36px;
            margin-bottom: 30px;
        }



        .DHAbout .DDonate > div:not(.PUMDiv) {
            display: grid;
            margin-top: 20px;
            grid-template-columns: 40px 1fr;
            text-align: center;
            border-radius: 5px;
            overflow: hidden;
            gap: 0;
            justify-content: center;
            border: 1px solid var(--c34);
        }

            .DHAbout .DDonate > div:not(.PUMDiv) span {
                background-color: var(--c34);
                color: #fff;
                padding: 10px 0;
                font-size: 30px;
            }

            .DHAbout .DDonate > div:not(.PUMDiv) input {
                font-size: 30px;
                line-height: 30px;
                font-weight: bold;
                box-sizing: border-box;
                letter-spacing: 1px;
                border: none;
                width: 100%;
                padding-left: 10px;
            }

        .DHAbout .DDonate ul {
            display: grid;
            grid-template-columns: repeat(4,max-content) 1fr;
            justify-content: center;
            align-items: center;
            text-align: center;
            list-style: none;
            margin: 0;
            padding: 10px 0;
            gap: 10px;
        }

            .DHAbout .DDonate ul li {
                background-color: rgb(var(--c33));
                border-radius: 5px;
                padding: 10px 8px;
                color: #fff;
                letter-spacing: 1px;
                cursor: pointer;
                transition: all 300ms;
            }

                .DHAbout .DDonate ul li:nth-child(1) {
                    background-color: rgb(var(--c33) / 60%);
                }

                .DHAbout .DDonate ul li:nth-child(2) {
                    background-color: rgb(var(--c33) / 70%);
                }

                .DHAbout .DDonate ul li:nth-child(3) {
                    background-color: rgb(var(--c33) / 80%);
                }

                .DHAbout .DDonate ul li:nth-child(4) {
                    background-color: rgb(var(--c33) / 90%);
                }

                .DHAbout .DDonate ul li:hover {
                    background-color: var(--c30);
                    color: var(--c34);
                }

        .DHAbout .DDonate button {
            display: block;
            border-radius: 10px;
            color: var(--c34);
            border: none;
            background-color: var(--c4);
            box-sizing: border-box;
            padding: 15px;
            font-size: 20px;
            width: 100%;
            margin: 30px auto 0;
            transition: 300ms ease;
        }

            .DHAbout .DDonate button:hover {
                color: var(--c4);
                letter-spacing: 5px;
                background-color: var(--c34);
            }

    .DHAbout .DAbout {
        padding: 100px 60px 0;
    }

        .DHAbout .DAbout h1 {
            font-size: 40px;
            font-weight: bold;
            line-height: 48px;
        }

        .DHAbout .DAbout h2 {
            font-size: 30px;
            line-height: 36px;
            margin-top: 10px;
        }

        .DHAbout .DAbout > p {
            margin: 40px 0;
            color: var(--c15);
        }

        .DHAbout .DAbout > a {
            color: var(--c1);
            font-size: 24px;
            margin-bottom: 40px;
            display: inline-block;
            font-weight: bold;
            text-decoration: underline;
        }

            .DHAbout .DAbout > a:hover {
                color: var(--c4);
                letter-spacing: 5px;
            }

        .DHAbout .DAbout ul {
            display: grid;
            grid-template-columns: max-content max-content max-content;
            justify-content: space-between;
            align-items: center;
            text-align: left;
            list-style: none;
            gap: 10px;
            margin: 0;
            padding: 0;
        }

            .DHAbout .DAbout ul li {
                display: flex;
                flex-direction: column;
                gap: 10px;
                justify-content: flex-start;
                align-items: flex-start;
            }

                .DHAbout .DAbout ul li img {
                    height: 90px;
                    width: auto;
                    margin-bottom: 10px;
                }

                .DHAbout .DAbout ul li span {
                    font-weight: bold;
                    letter-spacing: 1px;
                    font-size: 20px;
                    line-height: 20px;
                }

                .DHAbout .DAbout ul li p {
                    line-height: 16px;
                    color: var(--c2);
                }
/*#endregion */
/*#region FAQ */

.DHFAQ {
    background-image: url('../Images/faq.webp');
    background-position: center bottom;
    background-repeat: no-repeat;
}

    .DHFAQ > div {
        width: var(--width);
        max-width: var(--max-width);
        margin: 0 auto;
        font-size: 16px;
        line-height: 28px;
        padding: 40px 0 100px;
        text-align: left;
    }

        .DHFAQ > div > ul {
            width: var(--faq-width);
            display: flex;
            flex-direction: column;
            gap: 40px;
            justify-content: flex-start;
            align-items: flex-start;
            text-align: left;
            list-style: none;
            gap: 20px;
            margin: 40px 0 0;
            padding: 0;
        }

            .DHFAQ > div > ul > li {
                display: grid;
                grid-template-columns: 1fr;
                grid-template-rows: max-content 0fr;
                transition: all 300ms;
                overflow: hidden;
            }


                .DHFAQ > div > ul > li > div {
                    background-color: #f5f5f5;
                    padding: 20px 30px;
                    font-size: 18px;
                    position: relative;
                    border-radius: 10px;
                    display: grid;
                    grid-template-columns: 1fr 10px;
                    gap: 10px;
                    cursor: pointer;
                    transition: all 300ms;
                    font-weight: 500;
                    align-items: center;
                }

                    .DHFAQ > div > ul > li > div:hover {
                        background-color: #e0e0e0;
                    }

                    .DHFAQ > div > ul > li > div i:before {
                        content: '\e920';
                    }

                .DHFAQ > div > ul > li > p {
                    padding: 0 30px;
                    color: var(--c15);
                    min-height: 0;
                    transition: all 300ms;
                }

                .DHFAQ > div > ul > li.Show {
                    grid-template-rows: max-content 1fr;
                }

                    .DHFAQ > div > ul > li.Show > div {
                        background-color: var(--c35);
                    }

                        .DHFAQ > div > ul > li.Show > div i:before {
                            content: '\e91f';
                        }

                    .DHFAQ > div > ul > li.Show > p {
                        padding: 20px 30px 0;
                    }

/*#endregion */

/*#region Event */



.DHEventsTitle {
    background-image: url('../Images/EventBG.webp');
    background-position: right top;
    background-size: cover;
    background-repeat: no-repeat;
}

    .DHEventsTitle div {
        margin: 0 auto;
        padding: 90px 0;
        font-size: 16px;
        line-height: 28px;
        text-align: left;
        width: fit-content;
        text-align: center;
        position: relative;
    }

    .DHEventsTitle .HTitle {
        color: var(--c30);
        font-weight: normal;
    }

.DHEvents {
    width: var(--width);
    max-width: var(--max-width);
    margin: 0 auto;
    font-size: 16px;
    line-height: 28px;
    text-align: left;
    padding-bottom: 100px;
}

    .DHEvents > ul {
        text-transform: uppercase;
        background-color: var(--c30);
        padding: 15px 20px;
        border-radius: 50px;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        list-style: none;
        margin: -40px auto 40px;
        gap: 10px;
        width: fit-content;
        position: relative;
    }

        .DHEvents > ul > li {
            text-transform: uppercase;
            font-size: 18px;
            padding: 12px 35px;
            border-radius: 30px;
            font-weight: bold;
            cursor: pointer;
            transition: all 300ms;
            text-align: center;
        }

            .DHEvents > ul > li:hover {
                background-color: var(--c25);
            }

            .DHEvents > ul > li.Selected, .DHEvents > ul > li.Selected:hover {
                background-color: var(--c35);
            }

    .DHEvents > div > div {
        flex-direction: column;
        gap: 30px;
        width: 100%;
        display: none;
    }

        .DHEvents > div > div.Selected {
            display: flex;
        }

    .DHEvents > .AArrow {
        width: fit-content;
        margin: 40px auto 0;
    }

.DEvents {
    margin-top: 40px;
}

    .DEvents > ul {
        margin-top: 0 !important;
        background-color: var(--c41);
    }

        .DEvents > ul > li {
            color: var(--c30);
        }

            .DEvents > ul > li:hover {
                background-color: var(--c36);
            }

            .DEvents > ul > li.Selected {
                color: var(--c1);
            }

.DEvent {
    padding: 30px 60px;
    border-radius: 10px;
    border: 3px solid var(--c25);
    position: relative;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
}

    .DEvent > div {
        display: grid;
        grid-template-columns: 120px 1fr 1fr 1fr max-content;
        position: relative;
        z-index: 1;
        gap: 20px;
        align-items: center;
    }

        .DEvent > div > img {
            border-radius: 50%;
            grid-row: 1 / span 2;
            width: 100%;
            aspect-ratio: 1;
            margin: 0;
            box-sizing: border-box;
        }

        .DEvent > div > :is(h4,p) {
            grid-column: auto / span 3;
            font-weight: bold;
            font-size: 24px;
            line-height: 28px;
            margin: 0;
            padding: 0;
        }

        .DEvent > div > a {
            grid-column: 5 / span 1;
            font-weight: bold;
            font-size: 20px;
            text-transform: uppercase;
            grid-row: 1 / span 2;
            color: inherit;
            border-bottom: 2px solid var(--c1);
            transition: all 300ms;
        }

            .DEvent > div > a:hover {
                color: var(--c35);
                border-color: var(--c35);
            }

        .DEvent > div > div {
            display: grid;
            grid-template-columns: max-content 1fr;
            gap: 5px;
            align-items: center;
            line-height: 16px;
        }

            .DEvent > div > div > span:first-child {
                grid-column: 1 / -1;
                font-weight: bold;
            }

            .DEvent > div > div > i {
                color: var(--c35);
                font-size: 20px;
                line-height: 20px;
            }

    .DEvent > img,
    .DEvent:after {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        min-width: 100%;
        min-height: 100%;
        object-fit: cover;
        object-position: center;
        z-index: 0;
        bottom: 0;
        margin: auto;
        opacity: 0;
        transition: all 300ms;
    }

    .DEvent > img {
        height: auto;
    }

    .DEvent:after {
        content: "";
        height: 100%;
        background: rgba(0, 0, 0, .4);
    }

    .DEvent:hover, .DEvent:hover a {
        color: #fff;
        border-color: #fff;
    }

        .DEvent:hover > img, .DEvent:hover:after {
            opacity: 1;
        }

.AEventDetails {
    margin: 40px auto;
}

    .AEventDetails .DEvent {
        margin-bottom: 40px;
        padding: 30px;
        background-color: var(--c36);
        color: var(--c30);
        border: none;
    }

        .AEventDetails .DEvent:before {
            opacity: 0.4;
            position: absolute;
            content: 'HAPPENING';
            color: var(--c35);
            padding: 0;
            top: 0;
            right: 5px;
            border-radius: 10px;
            font-weight: bold;
            font-size: 50px;
            text-transform: uppercase;
            line-height: 50px;
            /*text-shadow: -2px 0 var(--c35), 0 2px var(--c35), 2px 0 var(--c35), 0 -2px var(--c35);*/
        }

        .AEventDetails .DEvent.Happening:before {
            opacity: 0.4;
        }


        .AEventDetails .DEvent.Upcoming:before {
            content: 'UPCOMING';
            color: var(--c38);
        }

        .AEventDetails .DEvent.Expired:before {
            content: 'Expired';
            color: var(--c7);
            opacity: 0.3;
            letter-spacing: 5px;
        }

        .AEventDetails .DEvent > div {
            grid-template-columns: 120px max-content max-content max-content;
            gap: 10px 40px;
        }

        .AEventDetails .DEvent img {
            border: 3px solid var(--c30);
        }




        .AEventDetails .DEvent:after {
            display: none;
        }
/*#endregion */
/*#region Oppurtunities */



.DHOppurtunities {
    width: var(--width);
    max-width: var(--max-width);
    margin: 0 auto;
    font-size: 16px;
    line-height: 28px;
    padding: 100px 0;
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 60px;
    text-align: left;
}

    .DHOppurtunities > div:first-child > h4 {
        font-size: 36px;
        line-height: 48px;
        margin-bottom: 60px;
    }

    .DHOppurtunities > div:first-child > a, a.AArrow, a.ABack {
        color: var(--c1);
        border-radius: 35px;
        padding: 20px 30px 20px 40px;
        text-transform: uppercase;
        font-size: 20px;
        border: 2px solid var(--c35);
        display: grid;
        grid-template-columns: 1fr max-content;
        gap: 10px;
        align-items: center;
        max-width: 80%;
        font-weight: 500;
    }

a.ABack {
    font-size: 14px;
    padding: 5px 15px 5px 10px;
    gap: 5px;
    background-color: var(--c13);
    border-color: var(--c13);
    color: var(--c31);
}

    .DHOppurtunities > div:first-child > a > i,
    a.AArrow > i, a.ABack > i {
        font-size: 30px;
        display: block;
        transform: rotate(180deg);
        transition: margin 300ms;
    }

    a.ABack > i {
        transform: rotate(0deg);
        font-size: 18px;
    }

        .DHOppurtunities > div:first-child > a > i:before,
        a.AArrow > i:before, a.ABack > i:before {
            content: '\e904';
        }

    .DHOppurtunities > div:first-child > a:hover,
    a.AArrow:hover, a.ABack:hover {
        background-color: var(--c35);
        border-color: var(--c35);
        color: var(--c1);
    }

        .DHOppurtunities > div:first-child > a:hover i,
        a.AArrow:hover i {
            margin-right: 10px;
        }

        a.ABack:hover i {
            margin-right: 10px;
        }

.DHOppurtunities > div > ul {
    display: flex;
    gap: 60px;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    padding: 0;
}

    .DHOppurtunities > div > ul > li {
        display: grid;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 10px 40px;
        grid-template-columns: 100px 1fr;
        text-align: left;
    }

        .DHOppurtunities > div > ul > li > h5 {
            font-weight: bold;
            font-size: 20px;
        }

        .DHOppurtunities > div > ul > li > img {
            width: 100px;
            grid-row: 1 / span 3;
        }

        .DHOppurtunities > div > ul > li > a {
            color: inherit;
            text-transform: uppercase;
            font-weight: 500;
            border: 2px solid var(--c35);
            border-radius: 15px;
            padding: 1px 15px;
            font-size: 13px;
            width: fit-content;
        }

            .DHOppurtunities > div > ul > li > a:hover {
                background-color: var(--c35);
                font-weight: bold;
            }
/*#endregion */
/*#region Consult */



.DConsult {
    background-image: url('../Images/ConsultBG.webp');
    background-position: left center;
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-color: #f7f7f7;
}

    .DConsult > div {
        width: var(--width);
        max-width: 500px;
        margin: 0 auto;
        font-size: 18px;
        line-height: 22px;
        padding: 100px 0;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .DConsult .HSubTitle {
        margin-top: -10px;
        margin-bottom: 0;
    }

    .DConsult p {
        margin-bottom: 20px;
    }

    .DConsult input {
        padding: 20px 30px;
        font-size: 18px;
        border-radius: 35px;
        border: none;
        text-align: center;
    }

        .DConsult input::placeholder {
            text-align: center;
        }

    .DConsult button {
        margin-top: 20px;
        padding: 20px 30px;
        font-size: 18px;
        border-radius: 35px;
        border: none;
        text-align: center;
        background-color: var(--c35);
    }

        .DConsult button:hover {
            letter-spacing: 5px;
            background-color: var(--c1);
            color: var(--c35);
        }
/*#endregion */
/*#region Article */



.DHArticle {
    width: var(--width);
    max-width: var(--max-width);
    margin: 0 auto;
    font-size: 16px;
    line-height: 28px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 60px;
    text-align: left;
}

    .DHArticle .HTitle {
        max-width: 600px;
        text-align: center;
        margin: 0 auto;
    }

    .DHArticle > div {
        display: grid;
        grid-template-columns: repeat(3,minmax(380px,1fr));
        gap: 30px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        /*scroll-snap-points-y: repeat(100vw);
        scroll-snap-type: x mandatory;*/
    }

    .DHArticle .AArticle {
        scroll-snap-align: center;
    }

/*#endregion */
/*#region Title */



.DTitle {
    padding: 80px 0 60px;
    display: flex;
    gap: 10px;
    flex-direction: column;
    width: fit-content;
    margin: 0 auto;
}

    .DTitle > * {
        margin: 0;
        padding: 0;
    }

        .DTitle > *:nth-child(1) {
            font-weight: 600;
            font-size: 28px;
            line-height: 36px;
        }

        .DTitle > *:nth-child(2) {
            font-weight: 500;
            font-size: 18px;
            line-height: 24px;
        }

    .DTitle:not(:has(a)):after {
        width: 40px;
        background-color: var(--c35);
        height: 2px;
        content: '';
        transition: all 300ms;
        margin: 10px auto;
    }

    .DTitle:hover:after {
        width: 150px;
    }

    .DTitle a {
        background-color: var(--c35);
        color: var(--c1);
        border-radius: 5px;
        width: fit-content;
        padding: 7px 7px 7px 12px;
        margin: 10px auto;
        font-size: 16px;
        text-transform: uppercase;
        font-weight: 500;
        gap: 2px;
    }

        .DTitle a.ARegister {
            background-color: var(--c40);
            border-color: var(--c40);
            color: var(--c30);
        }

        .DTitle a i {
            font-size: 20px;
        }

        .DTitle a:hover {
            color: var(--c35);
            background-color: var(--c1);
            border-color: var(--c1);
        }

article .DTitle {
    margin: 0 auto 0 0;
}

    article .DTitle:after {
        margin: 10px auto 0 0;
    }
/*#endregion */
/*#region Form */



.DForm {
    display: flex;
    flex-direction: column;
    text-align: left;
    grid-gap: 20px;
    justify-content: center;
    margin: 40px auto;
    max-width: var(--max-width);
    width: var(--width);
}

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

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

    .DForm :is(input,textarea,select) {
        padding: 20px 40px;
        border: 2px solid #eaeaea;
        transition: all 300ms;
        border-radius: 50px;
        color: var(--c1);
        font-size: 18px;
        line-height: 18px;
    }

    .DForm select {
        line-height: 22px;
    }


        .DForm :is(input,textarea):not(:placeholder-shown),
        .DForm select.VS {
            border-color: var(--c31);
            color: var(--c1);
        }

        .DForm select:not(.VS):not(.ValErr) {
            color: var(--c12);
        }

            .DForm select:not(.VS):not(.ValErr) option {
                color: var(--c1);
            }

    .DForm :is(input,textarea,select):focus {
        background-color: #fff !important;
        border-color: var(--c34);
        border-left-width: 10px;
        border-radius: 10px;
        /*box-shadow: -17px 0 60px #d3dcdc;*/
    }



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

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

    .DForm:not(.Inline) > div:not(.PUMDiv) > div:has(.ADark,.AArrow) {
        grid-column: var(--cf-btn);
        justify-self: flex-end;
    }

.DCol2 {
    text-align: justify;
    max-width: var(--max-width);
    width: var(--width);
    margin: 0 auto;
    font-size: 18px;
    line-height: 30px;
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 40px;
}

    .DCol2 article {
        width: initial;
    }

.DForm.Inline {
    --cf-div: initial;
    --cf-captcha: initial;
    --cf-btn: initial;
}

.DForm.Inline {
    margin: -50px auto 50px;
    color: #fff;
    position: relative;
    padding: 70px 40px 40px;
    border-radius: 10px 0 10px 10px;
    background-image: linear-gradient(to bottom left, transparent 50%, var(--c38) 50%), linear-gradient(var(--c38), var(--c38)), linear-gradient(var(--c38), var(--c38));
    background-size: 50px 50px, 100% 100%, 100% 100%;
    background-position: 100% 100%, -50px 0%, 100% 50px;
    background-repeat: no-repeat;
    z-index: 7;
    box-sizing: border-box;
    width: 100%;
}

    .DForm.Inline:before {
        position: absolute;
        content: "";
        width: 0;
        height: 0;
        top: 0;
        right: 0;
        border-right: 50px solid transparent;
        border-bottom: 50px solid #fff;
    }

    .DForm.Inline > div {
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 20px;
        width: 100%;
    }

    .DForm.Inline :is(input,textarea,select) {
        padding: 15px 20px;
        border-radius: 10px;
        width: 100%;
    }

    .DForm.Inline select {
        padding: 15px 40px 15px 20px;
        border-radius: 10px;
    }

    .DForm.Inline a.AArrow {
        background-color: var(--c35);
    }

        .DForm.Inline a.AArrow:hover {
            border-color: var(--c30);
            background-color: var(--c30);
            color: var(--c38);
        }
/*#endregion */
/*#region Team */



.DTeam {
    width: var(--width);
    max-width: var(--max-width);
    margin: 0 auto;
    font-size: 18px;
    line-height: 22px;
    padding: 0 0 100px;
    text-align: left;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 80px;
    align-items: flex-start;
    justify-content: center;
    color: var(--c12);
    font-weight: 500;
}

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

    .DTeam img {
        border-radius: 50%;
        max-width: 430px;
    }

    .DTeam > div div {
        position: relative;
        margin-bottom: 20px;
    }

        .DTeam > div div:after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            display: block;
            opacity: 0.8;
            transform: scale(0);
            transition: all 0.5s;
            border-radius: 50%;
            z-index: 1;
            width: 100%;
        }

    .DTeam > div:hover div:after {
        background-color: var(--c35);
        transform: scale(1);
    }

    .DTeam h4 {
        font-size: 20px;
        line-height: 25px;
        font-weight: 600;
        color: var(--c36);
    }

    .DTeam h5 {
        text-align: center;
    }
/*#endregion */
/*#region Classes */



.DClasses {
    width: var(--width);
    max-width: var(--max-width);
    margin: 0 auto;
    font-size: 18px;
    line-height: 22px;
    padding: 0 0 40px;
    text-align: left;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0 30px;
    align-items: flex-start;
    justify-content: center;
    color: var(--c12);
    font-weight: 500;
}

.AClass {
    display: flex;
    gap: 10px;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    transition: all 300ms;
    text-align: center;
    color: var(--c1);
}

    .AClass.AArticle {
        gap: 20px;
    }

    .AClass .DImage {
        transition: all 300ms;
        border-radius: 10px;
        overflow: hidden;
        height: 300px;
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
    }

        .AClass .DImage:after,
        .AClass .DImage:before {
            content: "";
            position: absolute;
            left: 25%;
            right: 0;
            top: 0;
            bottom: 0;
            display: block;
            opacity: 0.9;
            transform: scale(0);
            transition: all 300ms;
            z-index: 1;
            border-radius: 50%;
            margin: auto;
            width: 150%;
            aspect-ratio: 1;
        }

        .AClass .DImage:before {
            width: 200%;
            opacity: 0.8;
            left: -25%;
            transition: all 600ms;
        }

        .AClass .DImage img {
            transform: scale(1.2);
            aspect-ratio: 1;
            transition: all 300ms;
        }

        .AClass .DImage i {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            background-color: #fff;
            border-radius: 50%;
            width: 70px;
            height: 70px;
            line-height: 70px;
            font-size: 30px;
            z-index: 2;
            transition: all 300ms;
            transform: scale(0);
            opacity: 0;
        }

            .AClass .DImage i:before {
                content: '\e903';
            }

    .AClass > div:not(.DImage) {
        display: flex;
        gap: 5px;
        justify-content: center;
        align-items: center;
        line-height: 1;
        font-size: 16px;
    }

        .AClass > div:not(.DImage) > span {
            font-weight: 300;
        }

        .AClass > div:not(.DImage) i {
            font-size: 22px;
            color: var(--c38);
        }

    .AClass h3 {
        font-size: 18px;
        line-height: 30px;
        font-weight: 600;
        padding: 0 10px;
        margin-top: 10px;
    }

    .AClass h4 {
        font-size: 18px;
        line-height: 30px;
        font-weight: 600;
        padding: 0 10px;
    }

    .AClass h3 + h4 {
        font-size: 16px;
        color: var(--c17);
        margin-top: -12px;
    }

    .AClass > p {
        font-weight: 500;
        font-size: 14px;
        color: var(--c15);
        line-height: 18px;
        margin-bottom: 10px;
    }

    .AClass > span {
        border-bottom: 2px solid var(--c1);
        text-transform: uppercase;
        font-weight: 500;
        transition: all 300ms;
        transform: scale(0);
    }


    .AClass:hover .DImage {
        height: 250px;
    }

        .AClass:hover .DImage:after {
            background-color: var(--c39);
            transform: scale(1);
        }

        .AClass:hover .DImage:before {
            background-color: var(--c35);
            transform: scale(1);
        }

        .AClass:hover .DImage img {
            transform: scale(1);
            width: 100%;
        }

        .AClass:hover .DImage i {
            transform: scale(1) rotate(180deg);
            opacity: 1;
        }

    .AClass:hover > span {
        transform: scale(1);
    }
/*#endregion */

/*#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;
    }

    .DHAbout .DAbout {
        padding: 100px 40px 0;
    }

    .DClasses {
        gap: 0 20px;
    }
}

@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;
        --grid-stats: 1fr 1fr;
        --stat-align: center;
        --nav-padding: 5px 15px;
        --nf-img-width: 350px;
        --nf-bg-size: 50% auto;
        --faq-width: 70%;
    }

    .DStats > div > div > span:last-of-type {
        right: 0;
    }

    .DStats > div > div:before, .DStats > div > div:after,
    .DStats > div > div:before, .DStats > div > div:before {
        left: 0;
        right: 0;
        margin: 0 auto;
        transform: translateX(-20px);
    }

    .DStats > div > div:before, .DStats > div > div:before {
        transform: translateX(20px);
    }

    .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;
    }



    .DEvent {
        padding: 30px;
    }

    .DHEvents .DEvent > div {
        grid-template-columns: 120px auto auto auto auto;
        justify-content: space-between;
    }

    .AEventDetails .DEvent > div {
        gap: 10px 25px;
    }

    .DHAbout > div {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .DHAbout .DAbout {
        padding: 0;
    }

    .DHAbout .DDonate {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        align-items: center;
    }

        .DHAbout .DDonate > *:nth-child(-n+2) {
            grid-column: 1 / -1;
        }

        .DHAbout .DDonate > div {
            margin: 0;
        }

        .DHAbout .DDonate > button {
            grid-column: 1 / -1;
            justif-self: center;
            max-width: 200px;
        }

    .DClasses {
        grid-template-columns: 1fr 1fr;
    }

    .DCol2 {
        grid-template-columns: 1fr 1fr;
    }

    .DTeam {
        grid-template-columns: 1fr 1fr;
    }
}

@media(max-width:900px) {
    :root {
        --test-gap: 60px;
        --test-grid: 1fr;
        --nav-padding: 5px 12px;
        --logo-width: 78px;
        --test-margin: 56px 56px 100px 0;
        --test-img-r: 20px;
        --t-grid: 1fr max-content;
        --t-position: initial;
        --t-padding: 16px 0;
        --top-height: 104px;
        --nav-top: 104px;
        --m-margin-right: 0;
        --m-position: initial;
        --m-margin: 0 20px;
        --m-shadow: none;
    }

    nav {
        width: 100%;
        height: calc(100vh - var(--nav-top));
        grid-column: 1 / -1;
        position: absolute;
        right: 0;
        z-index: 5;
        align-items: flex-start;
        padding-top: 30px;
        transform: translateX(100vw);
        transition: transform 300ms ease;
        top: var(--nav-top);
        background-color: var(--c36);
    }

    :has(.TopDiv.Hide,.TopDiv.Show) nav {
        --nav-top: 88px;
    }

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

    ul#cm-nav li {
        float: none;
        text-align: center;
        display: grid;
    }

        ul#cm-nav li:has(ul) {
            padding-right: 0 !important;
        }

    #cm-nav a {
        text-align: center;
        width: fit-content;
        margin: 0 auto !important;
        color: var(--c30);
    }

    ul#cm-nav ul {
        border: none;
        background-color: var(--c37);
    }

    ul#cm-nav li:has(ul):after {
        display: none;
    }

    ul#cm-nav li:has(ul) > a {
        display: grid;
        grid-template-columns: 1fr max-content;
        gap: 5px;
    }

        ul#cm-nav li:has(ul) > a:after {
            font-family: fontIcon;
            font-size: 20px;
            content: '\e904';
            transform: rotate(-90deg);
            font-weight: bold;
            line-height: 40px;
        }


    #cm-nav ul.arrow-pad > li > a {
        text-align: center;
    }

    .plate {
        display: block !important;
    }


    .DHOppurtunities {
        grid-template-columns: 1fr;
        text-align: center;
    }

        .DHOppurtunities > div:first-child > a {
            width: fit-content;
            margin: 0 auto;
        }

    .DHEvents .DEvent > div {
        grid-template-columns: 120px auto auto auto;
    }

        .DHEvents .DEvent > div > img {
            grid-row: 1 / span 3;
        }

    .DEvent > div > a {
        grid-column: 2 / span 3;
        grid-row: 3 / span 1;
        justify-self: flex-end;
    }

    .AEventDetails .DEvent > div {
        grid-template-columns: 100px auto auto auto;
    }
}

@media(max-width:800px) {
    :root {
        --grid3: 1fr;
        --contact-grid: 1fr;
        --dir-grid: 1fr 1fr;
        --ssh-height: 104px;
        --ssh-padding: 0;
        --nl-grid: 1fr;
        --test-margin: 56px 30px 120px 0;
        --test-br: 0 70px;
        --test-img-l: 58px;
        --test-width: calc(100vw - 40px);
        --test-text-m: 0 20px 0 136px;
        --test-text-size: 16px;
        --test-text-lh: 25px;
        --a-f-size: 14px;
        --a-padding: 15px 31px;
        --a-mw: 120px;
        --a-right: 10px;
        --a-top: 9px;
        --expert-grid: 1fr 1fr;
        --profit-grid: 1fr;
        --logo-width: 74px;
        --sh-height: calc(60vh);
        --a-height: 400px;
        --faq-width: 100%;
    }

    .DHFAQ > div > ul > li > p {
        background: var(--c30);
        border-radius: 10px;
    }

    .DHFAQ > div > ul > li.Show > p {
        padding: 20px 30px;
    }

    .SSlideShow .splide__slide[aria-label="2 of 2"] img {
        object-position: right;
    }

    #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;
    }



    #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;
    }

    .DHEvents .DEvent > div {
        grid-template-columns: 80px auto auto auto auto;
    }

    .DEvent > div > :is(h4,p) {
        grid-column: auto / span 4;
    }

    .AEventDetails .DEvent > div {
        grid-template-columns: 80px auto auto auto;
        gap: 20px;
    }

        .AEventDetails .DEvent > div > p {
            grid-column: auto / span 3;
        }


        .DHEvents .DEvent > div > img,
        .AEventDetails .DEvent > div > img {
            grid-row: 1 / span 1;
        }

    .DEvent > div > div {
        grid-column: auto / span 1;
        grid-row: auto/ span 1;
    }

        .DEvent > div > div:first-of-type {
            grid-column: auto / span 2;
        }

    .DEvent > div > a {
        grid-column: 1 / -1;
        grid-row: 3 / span 1;
        justify-self: center;
    }

    .DHFAQ {
        background-position: right 30% bottom;
    }

    .DCol2 {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .DCol2 {
    }

        .DCol2 .DForm {
            margin: auto auto 40px;
        }

            .DCol2 .DForm.Inline:before {
                border-bottom: 50px solid #eaeaea;
            }
}

@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;
    }


    .DHEvents > ul > li {
        font-size: 16px;
    }
}

@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-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;
    }

    .AEventDetails .DEvent {
        padding: 45px 30px 30px;
    }

        .AEventDetails .DEvent > div {
            grid-template-columns: 80px auto auto;
        }

            .AEventDetails .DEvent > div > p {
                grid-column: auto / span 2;
            }

    .DHEvents .DEvent > div {
        grid-template-columns: 80px auto auto auto;
    }

    .DEvent > div > :is(h4,p) {
        grid-column: auto / span 3;
    }


    .DEvent > div > div:nth-of-type(3) {
        grid-column: 1 / span 2;
    }

    .DEvent > div > a {
        grid-row: 4 / span 1;
    }

    .DHEvents > ul {
        padding: 10px;
        margin: -34px auto 40px;
    }

        .DHEvents > ul > li {
            padding: 12px 20px;
        }

    .DHAbout .DDonate {
        padding: 85px 30px 60px;
    }

    .DClasses {
        grid-template-columns: 1fr;
    }

    .DTeam {
        grid-template-columns: 1fr;
    }
}

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

    .DHEvents .DEvent > div {
        grid-template-columns: 1fr;
    }

    .AEventDetails .DEvent > div {
        grid-template-columns: 1fr;
    }

    .AEventDetails .DEvent:before {
        left: 0;
        right: 0;
        text-align: center;
    }

    .DEvent > div > img {
        max-width: 200px;
    }

    .DEvent > div > * {
        grid-column: 1 / -1 !important;
        justify-self: center;
        text-align: center;
    }

    .DEvent > div > a {
        grid-row: 6 / span 1;
    }

    .DHAbout .DDonate {
        display: block;
    }

        .DHAbout .DDonate > div {
            margin-top: 10px;
        }

    .DHAbout .DAbout ul {
        grid-template-columns: 1fr 1fr;
    }

        .DHAbout .DAbout ul li {
            align-items: center;
        }
}

@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;
        --a-height: 350px;
    }

    .TopInfo {
        display: none;
    }

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

        .DHOppurtunities > div > ul > li :is(img,a) {
            margin: 0 auto;
        }

    .DHArticle > div {
        grid-template-columns: repeat(3, 320px);
    }

    .DHEvents > ul {
        gap: 0;
        margin: -30px auto 40px;
    }

        .DHEvents > ul > li {
            padding: 8px 10px;
            font-size: 14px;
        }

    .DHAbout .DDonate ul {
        grid-template-columns: repeat(4, 1fr);
    }

        .DHAbout .DDonate ul li:last-child {
            grid-column: 1 / -1;
        }

    .DForm.Inline {
        padding: 70px 20px 20px;
    }
}

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

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

    .Top {
        height: 96px;
    }
}

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

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


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

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

    .DHEvents > ul {
        gap: 10px;
        grid-template-columns: 1fr;
        border-radius: 20px;
    }

    .DHAbout .DDonate > ul > li {
        padding: 10px 4px;
    }
}
/*#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;
}