:root {
    --font-global: "Plus Jakarta Sans", sans-serif;
    --font-alt: "Plus Jakarta Sans", sans-serif;
    --section-padding-y: 130px;
    --vkm-green: #22a699;
    --vkm-blue: #1e2432;
    --linkedin-blue: #0072b1;
    --linkedin-light-blue: #1688c7;
    --color-dark-1: #1e2432;
    --color-dark-2: #282e3c;
    --color-dark-3: #303747;
    --color-dark-3a: #3e485e;
    --color-dark-4: #555960;
    --color-gray-1: #697582;
    --color-gray-2: #747f8c;
    --color-gray-3: #8a95a2;
    --color-primary-1: #1872e8;
    --color-primary-1-a: #2b87ff;
    --color-primary-light-1: #e3effe;
    --color-primary-light-1-a: #bcd1f1;
    --color-primary-2: #7752e7;
    --color-primary-light-2: #e7defe;
    --color-primary-3: #b947d9;
    --color-primary-light-3: #f7defe;
    --color-primary-4: #e748b1;
    --color-primary-light-4: #ffe1f5;
    --color-secondary-1: #fbe3a1;
    --color-gray-light-1: #f5f7fa;
    --color-gray-light-2: #f7f9fc;
    --color-gray-light-3: #cad0d7;
    --color-gray-light-4: #d5d7d8;
    --color-gray-light-5: #cccdcf;
    --color-gray-light-6: #bbbdbf;
    --gradient-gray-light-1: linear-gradient(0deg, #f7f9fc 0%, #fff 100%);
    --gradient-gray-light-2: linear-gradient(0deg, #fff 0%, #f7f9fc 100%);
    --border-radius-default: 10px;
    --box-shadow: 0px 5px 10px 0px rgba(30, 36, 50, 0.05), 0px 1px 1px 0px rgba(30, 36, 50, 0.03),
        0px 3px 5px 0px rgba(30, 36, 50, 0.03);
    --box-shadow-strong: 0px 5px 10px 0px rgba(30, 36, 50, 0.08), 0px 1px 1px 0px rgba(30, 36, 50, 0.06),
        0px 3px 5px 0px rgba(30, 36, 50, 0.06);
    --box-shadow-block: 0px 10px 30px 0px rgba(30, 36, 50, 0.07), 0px 0px 1px 0px rgba(30, 36, 50, 0.1);
    --box-shadow-block-strong: 0px 15px 50px 0px rgba(30, 36, 50, 0.14), 0px 0px 1px 0px rgba(30, 36, 50, 0.15);
}
.dark-mode {
    /* --color-primary-1: #3f92ff; */
    /*
    --color-dark-1: #07081f;
    --color-dark-2: #0b0d32;
    --color-dark-3: #0f1143;
    --color-dark-4: #131553; */
    --color-primary-1-a: #138378;
    --color-primary-4: #0e3542;
    --color-primary-3: #124951;
    --color-primary-2: #14595e;
    --color-primary-1: #22a699;

    --gradient-primary-1: linear-gradient(
        90deg,
        var(--color-primary-1) 0%,
        var(--color-primary-2) 33%,
        var(--color-primary-3) 67%,
        var(--color-primary-4) 100%
    );
    --gradient-primary-1-a: linear-gradient(
        90deg,
        var(--color-primary-1) 25%,
        var(--color-primary-2) 40%,
        var(--color-primary-3) 60%,
        var(--color-primary-4) 75%
    );
    --gradient-primary-1-b: linear-gradient(
        45deg,
        var(--color-primary-1) 0%,
        var(--color-primary-2) 33%,
        var(--color-primary-3) 67%,
        var(--color-primary-4) 100%
    );
    --gradient-primary-1-c: linear-gradient(
        0deg,
        var(--color-primary-1) 0%,
        var(--color-primary-2) 33%,
        var(--color-primary-3) 67%,
        var(--color-primary-4) 100%
    );
    --gradient-dark-alpha-1: linear-gradient(90deg, var(--color-dark-1) 40%, transparent 87%);
    --gradient-dark-alpha-2: linear-gradient(90deg, transparent 13%, var(--color-dark-1) 60%);
    --gradient-primary-alpha-1: linear-gradient(90deg, var(--color-primary-1) 40%, transparent 87%);
    --gradient-primary-alpha-2: linear-gradient(90deg, transparent 13%, var(--color-primary-1) 60%);
}
body {
    color: var(--color-dark-1);
    font-family: var(--font-global);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.725;
    letter-spacing: normal;
    word-spacing: 0.1em;
}
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-weight: 600;
}
h3,
.h3 {
    font-size: 28px;
    letter-spacing: -0.03em;
}
b,
strong {
    font-weight: 600;
}
.small {
    font-size: 0.8em;
}
hr:not([size]) {
    background: var(--color-dark-1);
    height: 1px;
    opacity: 0.1;
}
.bg-dark-alpha:before,
.bg-dark-alpha .YTPOverlay:before {
    background: #101828;
    opacity: 0.97;
}
.bg-dark-alpha-30:before,
.bg-dark-alpha-30 .YTPOverlay:before {
    background: #101828;
    opacity: 0.3;
}
.bg-dark-alpha-50:before,
.bg-dark-alpha-50 .YTPOverlay:before {
    background: #101828;
    opacity: 0.5;
}
.bg-dark-alpha-60:before,
.bg-dark-alpha-60 .YTPOverlay:before {
    background: #101828;
    opacity: 0.6;
}
.bg-dark-alpha-70:before,
.bg-dark-alpha-70 .YTPOverlay:before {
    background: #101828;
    opacity: 0.7;
}
.bg-dark-alpha-80:before,
.bg-dark-alpha-80 .YTPOverlay:before {
    background: #101828;
    opacity: 0.8;
}
.bg-dark-alpha-90:before,
.bg-dark-alpha-90 .YTPOverlay:before {
    background: #101828;
    opacity: 0.9;
}
.main-nav.dark {
    background-color: rgba(16, 24, 40, 0.8777);
}
.main-nav.dark-mode {
    /* background-color: rgba(55, 63, 78, 0.9); */
}
.inner-nav ul {
    font-size: 16px;
    letter-spacing: normal;
}
.inner-nav ul li {
    margin: 0 18px;
}
.inner-nav > ul > li > a {
    opacity: 0.7;
}
.inner-nav ul li a {
    position: relative;
}
.inner-nav > ul > li > a:not(.no-hover):before {
    content: "";
    position: absolute;
    top: calc(50% + 1.25em);
    left: 1px;
    display: block;
    width: 20px;
    height: 2px;
    background: var(--color-primary-1);
    border-radius: 1px;
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform 0.27s var(--ease-default);
}
.inner-nav > ul > li > a.active:before {
    transform: scaleX(1);
}
.main-nav.mobile-on .inner-nav > ul > li > a:not(.no-hover):before {
    display: none;
}
.mn-sub {
    background: rgba(55, 63, 78, 0.9927);
}
.mobile-on .desktop-nav ul {
    background: rgba(30, 36, 50, 0.99);
}
.mobile-on .desktop-nav ul li a,
.inner-nav ul li .mn-sub li a,
.mn-group-title {
    color: rgba(255, 255, 255, 0.9) !important;
}
.form label {
    margin-bottom: 15px;
    font-size: 18px;
    font-weight: 600;
}
.form .form-group {
    margin-bottom: 25px;
}
.form-tip,
.form-tip a {
    font-size: 13px;
    line-height: 1.53;
}
.form input[type="text"],
.form input[type="email"],
.form input[type="number"],
.form input[type="url"],
.form input[type="search"],
.form input[type="tel"],
.form input[type="password"],
.form input[type="date"],
.form input[type="color"],
.form select,
.form textarea {
    border-color: rgba(52, 61, 85, 0.183);
}
.form select:not([multiple]) {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="9px" height="5px"><path fill-rule="evenodd" fill="#343d55" d="M8.886,0.631 L8.336,0.117 C8.263,0.049 8.178,0.015 8.083,0.015 C7.988,0.015 7.903,0.049 7.830,0.117 L4.506,3.155 L1.183,0.117 C1.109,0.049 1.025,0.015 0.930,0.015 C0.834,0.015 0.750,0.049 0.677,0.117 L0.127,0.631 C0.053,0.699 0.017,0.778 0.017,0.867 C0.017,0.956 0.053,1.035 0.127,1.103 L4.253,4.892 C4.327,4.960 4.411,4.994 4.506,4.994 C4.602,4.994 4.686,4.960 4.759,4.892 L8.886,1.103 C8.959,1.035 8.996,0.956 8.996,0.867 C8.996,0.778 8.959,0.699 8.886,0.631 L8.886,0.631 Z"/></svg>');
}
.form input[type="text"]:hover,
.form input[type="email"]:hover,
.form input[type="number"]:hover,
.form input[type="url"]:hover,
.form input[type="search"]:hover,
.form input[type="tel"]:hover,
.form input[type="password"]:hover,
.form input[type="date"]:hover,
.form input[type="color"]:hover,
.form select:hover,
.form textarea:hover {
    border-color: rgba(52, 61, 85, 0.38);
}
.form input[type="text"]:focus,
.form input[type="email"]:focus,
.form input[type="number"]:focus,
.form input[type="url"]:focus,
.form input[type="search"]:focus,
.form input[type="tel"]:focus,
.form input[type="password"]:focus,
.form input[type="date"]:focus,
.form input[type="color"]:focus,
.form select:focus,
.form textarea:focus {
    border-color: rgba(52, 61, 85, 0.7);
    box-shadow: 0 0 3px rgba(52, 61, 85, 0.3);
}
.form input[type="text"]::placeholder,
.form input[type="email"]::placeholder,
.form input[type="number"]::placeholder,
.form input[type="url"]::placeholder,
.form input[type="search"]::placeholder,
.form input[type="tel"]::placeholder,
.form input[type="password"]::placeholder,
.form input[type="date"]::placeholder,
.form input[type="color"]::placeholder,
.form select::placeholder,
.form textarea::placeholder {
    color: var(--color-gray-3);
}
.form input[type="text"].input-md,
.form input[type="email"].input-md,
.form input[type="number"].input-md,
.form input[type="url"].input-md,
.form input[type="search"].input-md,
.form input[type="tel"].input-md,
.form input[type="password"].input-md,
.form input[type="date"].input-md,
.form input[type="color"].input-md,
.form select.input-md {
    height: 50px;
    font-size: 16px;
}
.form textarea.input-md {
    font-size: 16px;
}
.form input[type="text"].input-lg,
.form input[type="email"].input-lg,
.form input[type="number"].input-lg,
.form input[type="url"].input-lg,
.form input[type="search"].input-lg,
.form input[type="tel"].input-lg,
.form input[type="password"].input-lg,
.form input[type="date"].input-lg,
.form input[type="color"].input-lg,
.form select.input-lg {
    height: 54px;
    font-size: 17px;
}
.form textarea.input-lg {
    font-size: 17px;
}
.light-content input[type="text"],
.light-content input[type="email"],
.light-content input[type="number"],
.light-content input[type="url"],
.light-content input[type="search"],
.light-content input[type="tel"],
.light-content input[type="password"],
.light-content input[type="date"],
.light-content input[type="color"],
.light-content select,
.light-content textarea {
    border-color: rgba(255, 255, 255, 0.25);
}
.light-content input[type="text"]:hover,
.light-content input[type="email"]:hover,
.light-content input[type="number"]:hover,
.light-content input[type="url"]:hover,
.light-content input[type="search"]:hover,
.light-content input[type="tel"]:hover,
.light-content input[type="password"]:hover,
.light-content input[type="date"]:hover,
.light-content input[type="color"]:hover,
.light-content select:hover,
.light-content textarea:hover {
    border-color: rgba(255, 255, 255, 0.35);
}
.light-content input[type="text"]:focus,
.light-content input[type="email"]:focus,
.light-content input[type="number"]:focus,
.light-content input[type="url"]:focus,
.light-content input[type="search"]:focus,
.light-content input[type="tel"]:focus,
.light-content input[type="password"]:focus,
.light-content input[type="date"]:focus,
.light-content input[type="color"]:focus,
.light-content select:focus,
.light-content textarea:focus {
    border-color: rgba(255, 255, 255, 0.75);
}
.icon-info {
    top: 0.07em;
}
.btn-mod.btn-circle {
    border-radius: var(--border-radius-default);
}
.btn-mod,
a.btn-mod {
    font-weight: 500;
}
.btn-mod.btn-border-c {
    border-color: var(--color-primary-light-1-a);
}
.btn-mod.btn-border-c:hover,
.btn-mod.btn-border-c:focus {
    background: transparent;
    color: var(--color-primary-1);
    border-color: var(--color-primary-light-1-a);
}
.btn-mod.btn-small {
    padding: 10px 22px;
    font-size: 16px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}
.btn-mod.btn-medium {
    padding: 12px 22px;
    font-size: 16px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}
.btn-mod.btn-large {
    padding: 14px 36px;
    font-size: 16px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}
.big-icon {
    color: var(--color-primary-1);
}
.composition-4-image-1 {
    border-color: var(--color-gray-light-3);
}
.composition-4-image-2 {
    border-color: var(--color-gray-light-3);
}
.scroll-down-1-icon:before {
    opacity: 0.7;
}
.scroll-down-1-icon svg,
.scroll-down-1-icon img {
    opacity: 0.7;
}
.scroll-down-1-icon i {
    opacity: 0.7;
}
.scroll-down-1-text {
    font-weight: 500;
    opacity: 0.7;
    transition: opacity 0.4s ease, transform 0.4s var(--ease-elastic-2);
}
.typewrite .wrap:after {
    font-size: 0.9em;
}
.section-caption-slick {
    padding: 9px 12px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.1em;
}
.light-content .section-caption-slick {
    color: #fff;
    background-image: none;
    /* background-image: linear-gradient(45deg, rgba(5, 16, 38, 0.75) 0%, transparent 100%); */
    background-color: var(--color-primary-4);
}
.light-content .section-caption-fancy {
    background-image: linear-gradient(15deg, rgba(5, 16, 38, 0.75) 0%, transparent 100%);
}
.section-title {
    font-size: 48px;
    font-weight: 900;
    line-height: 1.25;
}
.section-title-small {
    font-size: 34px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.02em;
}
.section-title-tiny {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: normal;
}
.section-descr {
    font-size: 1rem !important;
    font-weight: 300;
    line-height: 1.7;
    letter-spacing: -0.005em;
}
.light-content .section-descr {
    color: var(--color-dark-mode-gray-1);
}
.light-content .toggle,
.light-content .toggle > dt > a,
.light-content .accordion,
.light-content .accordion > dt > a {
    border-color: rgba(255, 255, 255, 0.25);
}
.accordion > dt > a:after,
.toggle > dt > a:after {
    color: var(--color-primary-1);
}
.light-content .accordion > dt > a:after,
.light-content .toggle > dt > a:after {
    color: var(--color-primary-1);
}
a.link-hover-anim,
a.link-hover-anim:hover {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    color: var(--color-primary-1);
    font-size: 16px;
    font-weight: 600;
}
.link-strong i {
    position: relative;
    top: -0.05em;
    vertical-align: middle;
}
.link-strong-hovered {
    top: 0;
}
.light-content .link-strong,
.light-content .link-hover-anim {
    color: var(--color-primary-1);
}
.features-list {
    font-size: 17px;
}
.features-list-icon {
    top: 0.175em;
    color: var(--color-primary-1);
    background: var(--color-primary-light-1);
}
.light-content .features-list-icon {
    color: #fff;
    background: var(--color-primary-1);
}
.works-filter.works-filter-slick {
    font-size: 16px;
    font-weight: 600;
}
.works-grid.work-grid-fancy .work-title {
    margin-bottom: 10px;
    font-size: 22px;
    font-weight: 600;
}
.works-grid.work-grid-fancy .work-descr {
    font-size: 16px;
}
.work-img-bg {
    background: var(--color-gray-light-2);
}
.number-1-title {
    font-weight: 600;
}
.testimonials-3-text p {
    letter-spacing: -0.015em;
}
.testimonials-4-text p {
    color: var(--color-gray-1);
    line-height: 1.67;
}
.testimonials-4-author {
    font-weight: 500;
}
.testimonials-4-author .small {
    font-size: 15px;
    font-weight: 400;
}
.post-prev-container {
    overflow: hidden;
    background: #fff;
    border-radius: var(--border-radius-default);
    box-shadow: var(--box-shadow-block);
    isolation: isolate;
    transform: translateZ(0);
    transition: all 0.27s var(--ease-default);
}
.post-prev-container:before {
    display: none;
}
.post-prev-container:hover {
    transform: translateY(-5px);
    box-shadow: var(--box-shadow-block-strong);
}
.post-prev-title {
    font-size: 22px;
    font-weight: 600;
}
.post-prev-img a:hover {
    opacity: 1;
}
.post-prev-img a:hover img {
    transform: translateZ(0.1px);
}
.post-prev-title {
    padding-top: 30px;
}
.post-prev-title a:hover {
    opacity: 0.85;
}
.post-prev-text {
    line-height: 1.625;
}
.post-prev-info,
.post-prev-info a {
    font-size: 14px;
}
.post-prev-title,
.post-prev-text,
.post-prev-info {
    padding-left: 30px;
    padding-right: 30px;
}
.post-prev-container > *:last-child {
    padding-bottom: 30px;
}
.post-prev-3-text {
    line-height: 1.68;
}
.post-prev-3-title a:hover {
    opacity: 0.85;
}
.pagination a.active,
.pagination a.active:hover {
    border-color: var(--color-primary-1);
    color: var(--color-primary-1);
}
.tags a {
    border-radius: 50px;
}
.widget-body img {
    border-radius: var(--border-radius-default);
}
.tpl-minimal-tabs {
    display: flex;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.059em;
    text-transform: uppercase;
}
.tpl-minimal-tabs li {
    padding: 0;
}
.tpl-minimal-tabs > li > a,
.tpl-minimal-tabs > li > a:hover,
.tpl-minimal-tabs > li > a:focus {
    position: relative;
    margin: 0 !important;
    padding: 10px 20px;
    color: var(--color-gray-1);
    border: none !important;
    border-radius: 0 !important;
    isolation: isolate;
}
.tpl-minimal-tabs > li > a:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid var(--color-dark-1);
    opacity: 0.3;
    transition: var(--transition-default);
    z-index: -1;
}
.tpl-minimal-tabs > li > a:after,
.tpl-minimal-tabs > li > a:hover:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    background: var(--color-primary-1);
    transform: none;
    transition: all 0.2s var(--ease-out-short);
    z-index: -1;
}
.tpl-minimal-tabs > li:not(:first-child) > a:before,
.tpl-minimal-tabs > li:not(:first-child) > a:after {
    width: calc(100% + 1px);
    margin-left: -1px;
    border-left: none;
}
.tpl-minimal-tabs > li:first-child > a:before,
.tpl-minimal-tabs > li:first-child > a:after {
    border-top-left-radius: 100px;
    border-bottom-left-radius: 100px;
}
.tpl-minimal-tabs > li:last-child > a:before,
.tpl-minimal-tabs > li:last-child > a:after {
    border-top-right-radius: 100px;
    border-bottom-right-radius: 100px;
}
.tpl-minimal-tabs > li > a.active,
.tpl-minimal-tabs > li > a.active:hover {
    color: #fff !important;
    border: none !important;
}
.tpl-minimal-tabs > li > a.active:after {
    opacity: 1;
}
.light-content .tpl-minimal-tabs > li > a,
.light-content .tpl-minimal-tabs > li > a:hover,
.light-content .tpl-minimal-tabs > li > a:focus {
    color: #fff;
}
.light-content .tpl-minimal-tabs > li > a:before {
    border-color: #fff;
}
.light-content .tpl-minimal-tabs li a.active,
.light-content .tpl-minimal-tabs li a.active:hover {
    color: #fff;
    border: none !important;
}
.pricing-title {
    font-weight: 600;
    letter-spacing: -0.0175em;
}
.pricing-num {
    font-weight: 600;
}
.contact-item {
    padding-left: 69px;
}
.contact-item a.link-hover-anim,
.contact-item a.link-hover-anim:hover {
    font-size: 14px;
}
a.link-hover-anim i {
    top: -0.05em;
}
.ci-icon {
    width: 48px;
    height: 48px;
    color: var(--color-primary-1);
}
.ci-icon:before {
    background: var(--color-primary-light-1);
}
.ci-text {
    margin-bottom: 2px;
    font-size: 16px;
}
.light-content .ci-icon {
    color: var(--color-primary-1) !important;
}
.light-content .ci-icon:before {
    background: var(--color-primary-1);
    opacity: 0.25;
}
.mt-icon:before {
    background: var(--color-primary-1);
}

.footer b,
.footer strong {
    font-weight: 500;
}
.fw-title {
    margin-bottom: 25px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: normal;
}
.fw-menu li:not(:last-child) {
    margin-bottom: 9px;
}
.appear-animate .linesAnimIn .word {
    transform: translateY(37px) translateZ(0) scale(1) rotate(0.02deg);
    transition: all 0.8s var(--ease-out-short);
    transition-delay: calc(0.065s * var(--line-index));
}
@media (prefers-reduced-motion: reduce), print {
    .appear-animate .linesAnimIn .word {
        opacity: 1 !important;
        transform: none !important;
    }
}
.linesAnimIn.animated .word,
.mobile .linesAnimIn .word {
    opacity: 1;
    transform: none;
}
.mfp-bg {
    background: var(--color-dark-1);
}
.steps-1-number {
    background: var(--color-primary-1);
}
.light-content .steps-1-number {
    color: #fff;
    background: var(--color-primary-1);
}
.light-content .map-section {
    background: rgba(16, 24, 40, 0.92);
}
.light-content .map-section:hover {
    background: rgba(16, 24, 40, 0.88);
}
@media only screen and (max-width: 1366px) {
    .container {
        max-width: var(--container-width);
    }
    .section-title {
        font-size: calc(1.041rem + 2.29vw);
    }
    .section-title-small {
        font-size: calc(1.635rem + 0.57vw);
    }
    .section-descr {
        font-size: calc(0.948rem + 0.57vw);
    }
    .features-list,
    .number-1-descr {
        font-size: calc(0.962rem + 0.19vw);
    }
    .works-grid.work-grid-fancy .work-title,
    .post-prev-title {
        font-size: calc(0.967rem + 0.48vw);
    }
}
@media only screen and (max-width: 1200px) {
    .inner-nav ul li {
        margin: 0 12px;
    }
}
@media only screen and (max-width: 767px) {
    .tpl-minimal-tabs > li {
        margin: 2px !important;
        width: 46%;
    }
    .tpl-minimal-tabs > li > a.active:after,
    .tpl-minimal-tabs > li > a:hover:after {
        transform: none;
    }
    .tpl-minimal-tabs > li > a:before,
    .tpl-minimal-tabs > li > a:after {
        width: 100%;
        margin-left: 0;
    }
    .tpl-minimal-tabs > li > a:before {
        border: 1px solid var(--color-dark-1) !important;
    }
    .tpl-minimal-tabs > li > a:before,
    .tpl-minimal-tabs > li > a:after {
        border-radius: 100px;
    }
}
@media only screen and (max-width: 480px) {
    .tpl-minimal-tabs > li {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

.stable-description-size {
    font-size: 1.1rem !important;
}

.c-intro-large-title {
    letter-spacing: -5px;
    text-shadow: 5px 5px 0 rgba(14, 53, 66, 1);
    font-weight: bold;
    font-family: "DM Sans", sans-serif;
}
.c-intro-title {
    white-space: nowrap;
    font-weight: bold;
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    align-items: center;
    justify-content: center;
}

.c-intro-title .cl-v,
.c-intro-title .cl-k,
.c-intro-title .cl-m {
    padding: 5px 10px;
    flex-grow: 1;
    text-align: left;
}
.c-intro-title .cl-v {
    background-color: var(--color-primary-4);
}
.c-intro-title .cl-k {
    background-color: var(--color-primary-2);
}
.c-intro-title .cl-m {
    background-color: var(--color-primary-4);
}

.mobile .c-intro-large-title {
    font-size: 80pt;
}
.mobile .c-intro-title {
    white-space: normal !important;
    flex-direction: column;
}

.mobile .c-intro-title .cl-v,
.mobile .c-intro-title .cl-k,
.mobile .c-intro-title .cl-m {
    padding: 15px 20px;
    width: 100%;
}

.home-content .vkm-dot {
    color: var(--color-primary-1);
}
.home-content h1 {
    font-weight: bold;
    margin-bottom: 30px;
    text-transform: none;
    /* text-align: center !important; */
}
.home-content h1 > span:nth-child(1) {
    /* font-size: 70%; */
    /* color: var(--color-primary-1); */
}

.home-content h1 > span:nth-child(2) {
    letter-spacing: -5px;
}

@media only screen and (max-width: 640px) {
    .home-content h1 > span:nth-child(2) {
        letter-spacing: normal;
    }
}

.home-content h1 > span:nth-child(3) {
    /* font-size: 70%; */
    /* color: var(--color-primary-1-a); */
}

.home-content h1 > span:nth-child(1) span,
.home-content h1 > span:nth-child(3) span {
    /* background: -webkit-linear-gradient(var(--color-primary-1), var(--color-primary-4)); */
    /* -webkit-background-clip: text; */
    /* -webkit-text-fill-color: transparent; */
}

.home-content h1 > span:nth-child(1) span::selection,
.home-content h1 > span:nth-child(3) span::selection {
    background: var(--color-primary-4) !important;
    color: white !important;
}

.home-content .hs-paragraph-3 {
    color: var(--color-gray-light-6);
}

.mobile .home-content h1 {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 40px !important;
}

.mobile .home-content > div {
    margin-top: 50px;
}

.page-section-xlinks .small-section {
    padding-top: 80px !important;
    padding-bottom: 60px !important;
}
.page-section-xlinks .small-section .descriptive {
    font-size: 85%;
}

.form input.input-circle,
.form select.input-circle,
.form textarea.input-circle {
    border-radius: var(--border-radius-default);
}

.section-title-links {
    font-size: 1.4em;
}

@media only screen and (min-width: 640px) {
    .section-title-links {
        background: -webkit-linear-gradient(var(--color-primary-1), var(--color-primary-3));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 2.7rem;
    }
}

.c-composition-5-image-1 {
    border-radius: var(--border-radius-default) !important;
}
.c-composition-5-image-1-inner {
    border-radius: var(--border-radius-default) !important;
}
.c-mark-decoration-11 {
    text-underline-offset: 7.5px;
    text-decoration-color: var(--color-primary-1) !important;
    text-decoration: underline;
}

.c-alt-features-title-1 {
    font-size: 1.5rem !important;
}

.c-section-title-1 {
    font-size: 2.5rem;
}
.c-section-title-2 {
    font-size: 2.5rem;
}

.c-services-caption-1 {
    font-size: 1.3rem;
    font-weight: bold;
}

.c-services-title-1 {
    font-size: 1rem;
}

.form input.newsletter-field-1:focus {
    color: #fff !important;
}

.cookie-banner-title {
    justify-content: space-between;
    align-items: center;
}
.cookie-banner-triangle {
    flex-shrink: 0 !important;
    width: 32px !important;
    height: 32px !important;
    opacity: 0.5;
    margin-top: -5px;
}

.single-header-istanbul {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    opacity: 0.3;
    bottom: 0;
    top: auto;
    background: url(http://localhost/vkmdigital.com/www-dev/public/assets/images/backgrounds/istanbul.png);
    height: 300px;
    background-size: contain;
    background-position: bottom;
    background-repeat: repeat-x;
}

.cursor-pointer {
    cursor: pointer;
}

.application-form-section .fake-input-div {
    padding: 0.8rem 1.5rem;
    border-radius: 5px !important;
    background-color: var(--color-dark-2);
    border: 1px solid #000;
}
.application-form-section .fake-input-div:hover {
    border-color: #000;
    box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.3);
}

.application-form-section select option {
    background-color: var(--color-dark-1, #1e2432) !important;
    color: #fff !important;
}
.application-form-section textarea,
.application-form-section input[type="email"],
.application-form-section input[type="text"]:not(.form-field__input--with-prefix),
.application-form-section input[type="tel"]:not(.form-field__input--with-prefix),
.application-form-section input[type="url"]:not(.form-field__input--with-prefix),
.application-form-section input[type="number"]:not(.form-field__input--with-prefix),
.application-form-section input[type="date"],
.application-form-section select {
    padding: 0.85rem 1rem !important;
    border-radius: 8px !important;
    background-color: var(--color-dark-1, #1e2432) !important;
    border: 1px solid var(--color-dark-3, #303747) !important;
    color: #fff !important;
    font-size: 0.95rem !important;
}

/* Input with prefix (phone number, etc.) */
.application-form-section input.form-field__input--with-prefix {
    padding: 0.85rem 1rem !important;
    border-radius: 0 8px 8px 0 !important;
    border: 1px solid var(--color-dark-3, #303747) !important;
    border-left: none !important;
    background-color: var(--color-dark-1, #1e2432) !important;
    color: #fff !important;
    font-size: 0.95rem !important;
}
.application-form-section textarea:hover,
.application-form-section input[type="email"]:hover,
.application-form-section input[type="text"]:hover,
.application-form-section input[type="tel"]:hover,
.application-form-section input[type="url"]:hover,
.application-form-section input[type="number"]:hover,
.application-form-section input[type="date"]:hover,
.application-form-section select:hover {
    border-color: var(--color-gray-3, #8a95a2) !important;
    box-shadow: none !important;
}
.application-form-section textarea:focus,
.application-form-section input[type="email"]:focus,
.application-form-section input[type="text"]:focus,
.application-form-section input[type="tel"]:focus,
.application-form-section input[type="url"]:focus,
.application-form-section input[type="number"]:focus,
.application-form-section input[type="date"]:focus,
.application-form-section select:focus {
    outline: none !important;
    border-color: var(--vkm-green, #22a699) !important;
    box-shadow: 0 0 0 3px rgba(34, 166, 153, 0.15) !important;
    background-color: var(--color-dark-1, #1e2432) !important;
}
.application-form-section textarea::placeholder,
.application-form-section input::placeholder {
    color: var(--color-gray-3, #8a95a2) !important;
    opacity: 0.7 !important;
}
.application-form-section input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
}
.application-form-section input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    accent-color: var(--vkm-green, #22a699) !important;
}

.application-form-section label:not(.--unstyled) {
    color: #aaa;
    font-size: 0.95rem !important;
    font-weight: bold;
}

.application-form-section label.required::after {
    content: "*";
    padding-left: 5px;
    color: rgb(255, 87, 87);
    /* font-weight: bold; */
}

.application-form-row-header {
    background: rgb(34, 166, 153);
    background: -moz-linear-gradient(135deg, rgba(34, 166, 153, 0.2) 0%, rgba(7, 8, 31, 1) 100%);
    background: -webkit-linear-gradient(135deg, rgba(34, 166, 153, 0.2) 0%, rgba(7, 8, 31, 1) 100%);
    background: linear-gradient(135deg, rgba(34, 166, 153, 0.2) 0%, rgba(7, 8, 31, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#22a699",endColorstr="#07081f",GradientType=1);
    color: #eee;
    padding: 0.8rem 1.2rem;
    font-weight: bold;
    border-radius: 5px;
    border: 1px solid #000;
}

.application-form-section .--field-error {
    border: 1px solid #dc2626 !important;
    background-color: #450a0a !important;
}

.--application-card {
    padding-left: 5px !important;
    padding-right: 5px !important;
    padding-bottom: 20px !important;
    transition: all 0.3s ease-in-out;
}
.--application-card:hover {
    transform: scale(1.05) !important;
}
.--application-card > button {
    width: 100%;
    height: 100%;
}
.--application-card > button > .services-3-item {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.--application-card > button > .services-3-item > div {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.--application-card .services-3-text {
    flex: 1;
    justify-content: space-between;
}

.alert-link:hover {
    color: var(--color-primary-1) !important;
}

#application-form .services-3-location {
    position: absolute;
    top: 0.8rem;
    right: 2.5rem;
    font-size: 0.8rem;
    text-align: right;
    z-index: 9999 !important;
    color: var(--color-gray-light-6);
    opacity: 0.5;
}

#application-form .services-3-type {
    position: absolute;
    top: 0.8rem;
    left: 2.5rem;
    font-size: 0.8rem;
    text-align: left;
    z-index: 9999 !important;
    color: var(--color-gray-light-6);
    opacity: 0.5;
}

#application-form h2 {
    margin-top: 0 !important;
}

.btn-light:hover {
    background-color: var(--color-dark-2) !important;
}

.text-vkm-green {
    color: var(--vkm-green) !important;
}

.btn.btn-linkedin {
    background-color: var(--linkedin-blue) !important;
    color: #fff !important;
}

.btn-mod.btn-hover-anim.btn-linkedin {
    border-color: var(--linkedin-blue) !important;
}
.btn-mod.btn-hover-anim.btn-linkedin:before {
    border-color: var(--linkedin-blue) !important;
    background-color: var(--linkedin-light-blue) !important;
    color: #fff !important;
}

.services-3-icon-2 {
    width: 100%;
    border-radius: 100%;
    max-width: 96px;
    padding: 1rem;
    margin: 0 auto;
}

/** width of the banner added */
:root {
    --awd-banner-height: 64px;
}

/* Banner acikken header'in GERCEK yuksekligi banner + menu seridi kadardir.
   .main-nav yuksekligi menu seridine sabitlendigi icin (style.css) banner
   elemanin disina tasiyor, sayfa icerigi de yalnizca banner kadar asagi
   itiliyordu: icerigin ust ~85px'i menu seridinin arkasinda kaliyordu.

   Yukseklik banner'in VARLIGINA degil olculen degiskene baglanir: banner
   kapatilinca degisken 0px olur ve header ayni anda menu seridine iner.
   Sinifa baglaninca header 'banner var' yuksekliginde kalip icerigin ustune
   biniyordu. :not(.small-height) sart: kaydirinca kucuk header kurali gecerli
   kalmali. */
.main-nav:not(.small-height) {
    height: calc(var(--awd-banner-height, 0px) + var(--menu-bar-height)) !important;
}

/* Element bagimsiz: bazi sayfalar <main id="main">, bazilari <div id="main">
   yaziyor; padding ikisinde de uygulanmali yoksa header icerigin ustune biner. */
#main {
    padding-top: calc(var(--awd-banner-height) + var(--menu-bar-height));
}

/* Banner kapatildiginda degisken 0px'e duser; padding menu seridi kadar kalir. */

/* Kaydirmaya baslayinca duyuru banner'i gizlenir, yalniz menu seridi kalir.
   Onceki kural banner yuksekligini menuye EKLIYORDU: header sayfa ustunde 85px
   iken kaydirilinca 129px'e cikiyor, ekranin ustunde surekli buyuyen bir serit
   olusuyordu. Yukari donunce banner geri gelir. */
.main-nav.main-nav-with-banner.small-height.body-scrolled {
    height: var(--menu-bar-height-scrolled) !important;
}

/* !important sart: banner'da Bootstrap'in d-flex sinifi var, o da !important. */
.main-nav.main-nav-with-banner.small-height.body-scrolled #awd-banner {
    display: none !important;
}

/* Banner acikken menu seridi banner ile ayni duz arkaplani alir; yoksa
   yari saydam nav ile duz banner ust uste iki farkli ton olusturuyor. */
/* Menu seridi banner'dan AYRI bir ton alir. Ikisine de #07081f verilince
   (banner rengi) iki serit tek blok gibi birlesip sinir kayboluyordu; ana
   sayfada nav saydam oldugu icin sorun gorulmuyor, ic sayfalarda goruluyordu. */
.main-nav.main-nav-with-banner:not(.transparent) {
    background-color: #1e2432;
}

#awd-banner {
    background-color: #07081f;
}
#awd-banner #x-box {
    position: absolute;
    right: 10px;
}
#awd-banner #x-box button {
    padding: 6px 6px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
#awd-banner #x-box button svg {
    width: 16px;
    height: 16px;
}

#awd-banner-content {
    width: 100%;
    color: white;
    /* Sabit yukseklik degil taban yukseklik: mobilde metin uc satira sarabilir,
       gercek yukseklik JS ile olculup --awd-banner-height'e yazilir. */
    min-height: 64px;
    /* Affiliate World satiri masaustunde tek satirda sigsin diye 620 -> 760 */
    max-width: 760px;
    padding: 6px 10px;
    gap: 10px;
    line-height: 1.4;
    /* Kutu ortali ama icindekiler sola yaslaniyordu: blok gercekten ortalansin */
    justify-content: center;
}
#awd-banner .v-line {
    background: #fff;
    height: 38px !important;
    width: 1px;
    opacity: 0.2;
}
#awd-banner .awd-logos {
    gap: 10px;
    flex: 0 0 auto;
}
#awd-banner .awd-logos .awd-logo {
    height: 38px !important;
    width: auto;
}
/* Mobilde logo daha kucuk; cok dar ekranda metne yer acmak icin gizlenir */
#awd-banner .awd-logos-mobile .awd-logo {
    height: 30px !important;
}
@media (max-width: 359px) {
    #awd-banner .awd-logos-mobile {
        display: none !important;
    }
}

#awd-banner .texts {
    font-family: "Space Grotesk", sans-serif;
    min-width: 0;
}
#awd-banner .texts .line1 {
    font-size: 16px;
    white-space: nowrap;
}
#awd-banner .texts .line2 {
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}
#awd-banner .texts-short .line1,
#awd-banner .texts-short .line2 {
    white-space: normal;
}

#awd-banner .texts .line2 .middot {
    /* font-size: 30pt; */
}

/* ---- Affiliate World Bangkok 2026 tipografisi ---- */
/* "Affiliate World" pembe, "2026" mor: kart gorselindeki renk ayrimi */
#awd-banner .aw-name,
#awd-banner .aw-city,
#awd-banner .aw-year {
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
#awd-banner .aw-name,
#awd-banner .aw-city {
    background-image: linear-gradient(90deg, #ff7bbd, #e8459f);
}
#awd-banner .aw-year {
    background-image: linear-gradient(90deg, #cf7bff, #a855f7);
}
#awd-banner .texts-long .line1 .aw-name {
    font-size: 18px;
    font-weight: 700;
}
#awd-banner .texts-long .line1 .aw-year {
    font-size: 18px;
    font-weight: 700;
    margin-left: 6px;
}
/* BANGKOK wordmark: metin satirinin icinde, harf yuksekligiyle hizali */
#awd-banner .bangkok-logo {
    height: 15px;
    width: auto;
    margin: 0 2px 0 8px;
    vertical-align: -1px;
}
/* Mobilde wordmark yerine duz metin: ayni beyaz agirlik */
#awd-banner .aw-city-text {
    color: #fff;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
#awd-banner .awd-flag {
    vertical-align: -4px;
    margin: 0 2px;
}

/* ---- Mobil (< lg): iki satir 64px'e sigsin, X butonuna yer birak ---- */
@media (max-width: 991.98px) {
    #awd-banner-content {
        /* Mobilde blok sola yaslanir; sagda kapat butonuna yer birakilir */
        justify-content: flex-start;
        padding-right: 46px;
        gap: 8px;
    }
    #awd-banner .texts-short .line1 {
        font-size: 15px;
        line-height: 1.25;
    }
    #awd-banner .texts-short .line2 {
        font-size: 12.5px;
        line-height: 1.25;
    }
    #awd-banner .texts-short .aw-city-text {
        font-weight: 700;
    }
    #awd-banner .texts-short .aw-name,
    #awd-banner .texts-short .aw-year {
        font-weight: 700;
    }
    #awd-banner .texts-short .awd-flag {
        vertical-align: -3px;
    }
}

/* .lg- */
@media (min-width: 992px) {
    #awd-banner-content {
        gap: 20px;
    }
    #awd-banner #x-box {
        position: absolute;
        right: 20px;
    }
    #awd-banner #x-box button {
        padding: 5px 8px !important;
    }
}