:root {
    --green-color: #87ce3f;
    --brown-color: #b89e4f;
    --light-orange-color: #ebc660;
    --blue-color: #69c9cd;
    --dark-blue-color: #12cbde;
    --orange-color: #ef846c;
    --navy-blue-color: #6060eb;
    --dark-orange-color: #fa8b26;
    --sand-color: #bdaa8a;
    --leaf-green-color: #99a54f;
    --teal-color: #00b5a6;
    --grey-color: #6a757b;
    --light-red-color: #f27863;
    --light-blue-color: #058cce;
    --brown-bgcolor: #8f784f;
    --brown2-bgcolor: #bd4425;
    --drinkmate-color: #d2465a;
    --fret-color: #7e32ef;
    --grindr-color: #f3b420;
    --squirrel-color: #5e9fd6;
    --strata-color: #46a663;
    --futurebricks-color: #f60;
    --smilepass-color-bg: #e0b250;
    --uber-color: #6777ea;
    --python-color: #f85f73;
    --react-color: #59a985;
    --smilepass-color: #72c6d8;
    --feelshare-color: #a440bc;
    --veromuse-color: #00ccd2;
    --stratomatic-color: #fb7339;
    --fullstack-color: #f5cd79;
    --about-color: #70c9f3;
    --webinar-color: #c0aff0;
    --osc-color: #5460a3;
    --uiux-color: #ffc651;
    --carribean-green: #07c28e;

    --global-font: "Satoshi", sans-serif;
}

/* Satoshi Light */
@font-face {
    font-family: "Satoshi";
    src: url("../fonts/Satoshi-Light.otf") format("opentype");
    font-weight: 300;
    font-style: normal;
}

/* Satoshi Light Italic */
@font-face {
    font-family: "Satoshi";
    src: url("../fonts/Satoshi-LightItalic.otf") format("opentype");
    font-weight: 300;
    font-style: italic;
}

/* Satoshi Regular */
@font-face {
    font-family: "Satoshi";
    src: url("../fonts/Satoshi-Regular.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
}

/* Satoshi Italic */
@font-face {
    font-family: "Satoshi";
    src: url("../fonts/Satoshi-Italic.otf") format("opentype");
    font-weight: 400;
    font-style: italic;
}

/* Satoshi Medium */
@font-face {
    font-family: "Satoshi";
    src: url("../fonts/Satoshi-Medium.otf") format("opentype");
    font-weight: 500;
    font-style: normal;
}

/* Satoshi Medium Italic */
@font-face {
    font-family: "Satoshi";
    src: url("../fonts/Satoshi-MediumItalic.otf") format("opentype");
    font-weight: 500;
    font-style: italic;
}

/* Satoshi Bold */
@font-face {
    font-family: "Satoshi";
    src: url("../fonts/Satoshi-Bold.otf") format("opentype");
    font-weight: 700;
    font-style: normal;
}

/* Satoshi Bold Italic */
@font-face {
    font-family: "Satoshi";
    src: url("../fonts/Satoshi-BoldItalic.otf") format("opentype");
    font-weight: 700;
    font-style: italic;
}

/* Satoshi Black */
@font-face {
    font-family: "Satoshi";
    src: url("../fonts/Satoshi-Black.otf") format("opentype");
    font-weight: 900;
    font-style: normal;
}

/* Satoshi Black Italic */
@font-face {
    font-family: "Satoshi";
    src: url("../fonts/Satoshi-BlackItalic.otf") format("opentype");
    font-weight: 900;
    font-style: italic;
}

body {
    padding: 0;
    margin: 0;
    font-family: var(--global-font);
    overflow-x: hidden;
}

body.inner-page {
    background-color: #f2f2f2;
    padding-top: 150px;
}
input, input:active, input:focus, select, select:active, select:focus, textarea, textarea:active, textarea:focus {
    font-family: inherit;
}
.d-block {
    display: block;
}

@media (min-width:1400px) {
    .big-container {
        max-width: 1365px !important;
        width: 100%;
    }
}

@media (min-width: 992px) {
    .burger {
        padding-bottom: 100px;
        padding-top: 100px;
    }
    .b-burger {
        padding-bottom: 100px;
    }
    .t-burger {
        padding-top: 100px;
    }
    .container {
        max-width: 1175px;
        width: 100%;
    }
    .desktop-menu__list-item-link:hover,
    .desktop-menu__list-item.selected .desktop-menu__list-item-link {
        color: var(--emerald-green) !important;
    }
}
@media (max-width: 991px) {
    .burger {
        padding-bottom: 60px;
        padding-top: 60px;
    }
    .b-burger {
        padding-bottom: 60px;
    }
    .t-burger {
        padding-top: 60px;
    }
    
    .card-case-study {
        padding: 30px;
    }
}
.home .container {
    max-width: 80%;
    width: 100%;
}

.pagepiling-slider__slide--a h3.translate,
.pagepiling-slider__slide--g h3.translate,
.pagepiling-slider__slide--o h3.translate {
    margin-top: 75px;
}

/* p {
    font-family: var(--global-font);
} */



h1,
h2.heading-copy {
    font-family: var(--global-font);
    color: #fff;
    font-weight: 700;
    font-size: 85px;
    line-height: 85px;
    letter-spacing: 1px;
}

h3 {
    color: #2a2a2a;
    font-weight: 600;
    /* letter-spacing: 1px; */
    font-size: 25px;
    margin: 0;
}

li,
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

li,
ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

a,
a:focus,
a:hover {
    text-decoration: none;
}

a:focus,
a:hover {
    color: #ccc;
    outline: 0;
}

p a {
    color: grey;
    font-weight: 600;
}

button {
    /* font-family: "Century Gothic" */
}

button:active,
button:focus,
button:hover {
    outline: 0 !important;
}

.mtop10 {
    margin-top: 10px;
}

.mtop20 {
    margin-top: 20px !important;
}

.txt-white {
    color: #fff !important;
}

.mtop30 {
    margin-top: 30px !important;
}

.mbottom20 {
    margin-bottom: 20px !important;
}

.mbottom30 {
    margin-bottom: 30px;
}

.mbottom50 {
    margin-bottom: 50px;
}

.mleft0 {
    margin-left: 0;
}

.mleft10 {
    margin-left: 10px;
}

.mleft50 {
    margin-left: 50px;
}

.mright0 {
    margin-right: 0;
}

.mright15 {
    margin-right: 15px;
}

.mright20 {
    margin-right: 20px;
}

.pad-40 {
    padding: 40px;
}

.pad-80 {
    padding: 80px 0;
}

.pad-left-0 {
    padding-left: 0;
}

.pad-right-0 {
    padding-right: 0;
}

.pl-30 {
    padding-left: 30px !important;
}

.pr-30 {
    padding-right: 30px !important;
}

.pad-right-50 {
    padding-right: 50px;
}

.spacer10 {
    display: flex;
    height: 10px;
}

.spacer30 {
    display: flex;
    height: 30px;
}

.spacer50 {
    display: flex;
    height: 50px;
}

.white-bg {
    background-color: #fff;
}

.grey-bg {
    background-color: #2a2a2a;
}

.green-bg {
    background-color: var(--green-color) !important;
}

.brown-bg {
    background-color: var(--brown-color) !important;
}

.light-orange-bg {
    background-color: var(--light-orange-color) !important;
}

.blue-bg {
    background-color: var(--blue-color) !important;
}

.dark-blue-bg {
    background-color: var(--dark-blue-color) !important;
}

.dark-blue {
    color: var(--dark-blue-color) !important;
}

.orange-bg {
    background-color: var(--orange-color) !important;
}

.dark-orange-bg {
    background-color: var(--dark-orange-color) !important;
}

.orange {
    color: var(--orange-color) !important;
}

.dark-orange {
    color: var(--dark-orange-color) !important;
}

.navy-blue-bg {
    background-color: var(--navy-blue-color) !important;
}

.squirrel-color-bg {
    background-color: var(--squirrel-color) !important;
}

.black-color {
    color: #2a2a2a !important;
}

.dark-black-color {
    color: #000 !important;
}

.sand-color-bg {
    background-color: var(--sand-color) !important;
}

.sand-color {
    color: var(--sand-color) !important;
}

.leaf-green-bg {
    background-color: var(--leaf-green-color) !important;
}

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

.teal-bg {
    background-color: var(--teal-color) !important;
}

.teal {
    color: var(--teal-color) !important;
}

.grey-bgcolr {
    background-color: var(--grey-color) !important;
}

.grey-color {
    color: var(--grey-color) !important;
}

.light-red-bg {
    background-color: var(--light-red-color) !important;
}

.light-red-color {
    color: var(--light-red-color) !important;
}

.light-blue-bg {
    background-color: var(--light-blue-color) !important;
}

.light-blue-color {
    color: var(--light-blue-color) !important;
}

.brown-bgcolr {
    background-color: var(--brown-bgcolor) !important;
}

.brown-color {
    color: var(--brown-bgcolor) !important;
}

.brown2-bgcolr {
    background-color: var(--brown2-bgcolor) !important;
}

.brown2-color {
    color: var(--brown2-bgcolor) !important;
}

.drinkmate-bg {
    background-color: var(--drinkmate-color) !important;
}

.drinkmate-color {
    color: var(--drinkmate-color) !important;
}

.fret-bg {
    background-color: var(--fret-color) !important;
}

.fret-color {
    color: var(--fret-color) !important;
}

.grindr-bg {
    background-color: var(--grindr-color) !important;
}

.grindr-color {
    color: var(--grindr-color) !important;
}

.strata-bg {
    background-color: var(--strata-color) !important;
}

.strata-color {
    color: var(--strata-color) !important;
}

.futurebricks-bg {
    background-color: var(--futurebricks-color) !important;
}

.smilepass-back-bg {
    background-color: var(--smilepass-color-bg) !important;
}

.uber-bg {
    background-color: var(--uber-color) !important;
}

.uber-color {
    color: var(--uber-color) !important;
}

.python-bg {
    background-color: var(--python-color) !important;
}

.python-color {
    color: var(--python-color) !important;
}

.react-bg {
    background-color: var(--react-color) !important;
}

.react-color {
    color: var(--react-color) !important;
}

.smilepass-bg {
    background-color: var(--smilepass-color) !important;
}

.smilepass-color {
    color: var(--smilepass-color) !important;
}

.feelshare-bg {
    background-color: var(--feelshare-color) !important;
}

.feelshare-color {
    color: var(--feelshare-color) !important;
}

.veromuse-bg {
    background-color: var(--veromuse-color) !important;
}

.veromuse-color {
    color: var(--veromuse-color) !important;
}

.stratomatic-bg {
    background-color: var(--stratomatic-color) !important;
}

.stratomatic-color {
    color: var(--stratomatic-color) !important;
}

.fullstack-bg {
    background-color: var(--fullstack-color) !important;
}

.fullstack-color {
    color: var(--fullstack-color) !important;
}

.about-bg,
.about-bg.footer-contact-section>div {
    background-color: var(--about-color) !important;
}

.about-color {
    color: var(--about-color) !important;
}

.webinar-bg {
    background-color: var(--webinar-color) !important;
}

.webinar-color {
    color: var(--webinar-color) !important;
}

.osc-bg {
    background-color: var(--osc-color) !important;
}

.osc-color {
    color: var(--osc-color) !important;
}

.uiux-bg {
    background-color: var(--uiux-color) !important;
}

.uiux-color {
    color: var(--uiux-color) !important;
}

.carribean-green-bg {
    background-color: var(--carribean-green) !important;
}

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

.full-width {
    width: 100%
}

.white-bg {
    background: #fff;
}

.disabled-tag {
    pointer-events: none;
}

.w-auto {
    width: auto !important;
}

.btn {
    display: inline-block;
    background: 0 0;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 500;
    border-radius: 36px;
    padding: .75rem 1.9rem;
    line-height: 1;
}

.btn.focus,
.btn:focus {
    outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #b0b0b0;
}

.txt-white {
    color: #fff;
}

.white-btn {
    border: 2px solid #fff;
    color: #fff;
    transition: all .2s ease-in;
}

.btnBlack {
    background: #2a2a2a;
    width: 175px;
    border: none !important;
    font-weight: 600;
}
.btnBlack-new {
    background: #fff;
    color: #2a2a2a;
    width: 175px;
    border: none !important;
    font-weight: 600;
}

.white-filled-btn:hover,
.white-btn:hover  {
    background: #fff;
    color: #000;
}

.white-filled-btn {
    background-color: #fff;
    border-color: #fff;
    color: #000;
    text-transform: capitalize;
    font-weight: 600;
    height: 50px;
    padding-top: 12px;
    letter-spacing: 2px;
    transition: all .2s ease-in;
}

.black-btn {
    background-color: #2a2a2a;
    text-transform: capitalize;
    color: white;
}

.black-btn:hover {
    background: #2a2a2a;
    color: #fff;
}

.primary-btn {
    color: #b0b0b0;
    border: 2px solid #b0b0b0;
    font-weight: 600;
    transition: all .2s ease-in;
}

.primary-btn.active,
.primary-btn:hover {
    background-color: #2a2a2a;
    border-color: #2a2a2a;
    color: #fff;
}

.vertical-center {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.vertical-center.space {
    justify-content: space-around;
}

.vertical-center.center {
    align-items: center;
}

.relative {
    position: relative;
}

.logo {
    display: block;    
    max-width: 190px;
}
 
footer .logo {    
    margin: 0 auto;    
}

.logo-color,
.logo-dark {
    display: none !important;
}

header.inner.scrollDown .logo-color {
    display: block !important;
}

header.inner.scrollDown .logo-dark {
    display: none !important;
}

header.inner .logo-white {
    display: none !important;
}

header.inner .logo-dark {
    display: none !important;
}

header.inner .logo-color {
    display: block !important;
}

.home:not(.group-blog) .social-navigation.social-inner li {
    color: #fff;
}

.home:not(.group-blog) .social-navigation.social-inner li.last:before {
    background: #fff;
}

.home:not(.group-blog) .social-navigation.social-inner li a svg circle,
.home:not(.group-blog) .social-navigation.social-inner li a svg path {
    fill: #fff;
}

.pp-section {
    padding: 40px 30px;
    top: 0;
}

#pp-nav {
    display: none;
}

header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    /* height: 100px; */
    /* padding: 40px 30px 0; */
    width: 100%;
    transition: all .5s;
}

header.scrollDown {
    background-color: #fff;
    padding-top: 20px;
    height: 85px;
    box-shadow: 0 8px 30px -6px rgba(42, 42, 42, .3);
}

header.scrollDown .menu {
    margin-top: 10px;
    transition: all .5s;
}

header.scrollUp {
    transform: translateY(-100px);
}

.social-navigation {
    position: fixed;
    bottom: 20px;
    left: 30px;
    z-index: 99;
    transition: all .5s;
}

#social-navigation.hide {
    left: -40px;
}

.social-navigation li {
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    display: block;
}

.social-navigation.social-inner li {
    color: #2a2a2a;
}

.social-navigation li a {
    position: relative;
    color: #0b7;
    display: inline-block;
    height: 30px;
    width: 30px;
    line-height: 60px;
    text-align: center;
    transition: .5s;
    padding: 0;
    cursor: pointer;
    border: 2px solid #fff;
}

.social-navigation.social-inner li a svg {
    width: 11.8px;
    display: block;
    margin: auto;
    margin-top: 8px;
}

.social-navigation li a.gitlab svg {
    width: 18px;
}

.social-navigation li a.custom-blog svg {
    width: 15px;
}

.social-navigation.social-inner li a svg path {
    fill: #2a2a2a;
}

.inner-page .social-navigation li a {
    border-color: #2a2a2a;
}

.social-navigation li a img {
    display: block;
    margin: 5px auto;
}

.social-navigation li a:hover {
    border: 2px solid rgba(0, 160, 80, 0);
    color: #fff;
}

.social-navigation li a::after,
.social-navigation li a::before {
    width: 100%;
    height: 100%;
    z-index: 3;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    transform: scale(0);
    transition: .5s;
}

.social-navigation li a:hover::before {
    border-bottom: 3px solid transparent;
    border-left: 3px solid transparent;
    transform-origin: 0 100%;
    transform: scale(1);
}

.social-navigation li a:hover::after {
    border-top: 3px solid transparent;
    border-right: 3px solid transparent;
    transform-origin: 100% 0;
    transform: scale(1);
}

.social-navigation li.last {
    position: relative;
    height: 135px;
    font-weight: 700;
    letter-spacing: .4px;
}

.social-navigation li.last:before {
    content: "";
    height: 55px;
    width: 2px;
    background: #fff;
    position: absolute;
    top: 7px;
    left: 13px;
}

.social-navigation.social-inner li.last:before {
    background: #2a2a2a;
}

.social-navigation li.last span {
    transform: rotate(-90deg);
    position: absolute;
    bottom: 14px;
    white-space: nowrap;
    right: -19px;
}

#contact-navigation {
    position: fixed;
    z-index: 9999;
    bottom: 0;
    right: -50%;
    top: 0;
    width: 50%;
    transition: all .3s ease-in;
}

#contact-navigation.hide {
    right: -54%
}

#contact-navigation.active {
    right: 0;
}

.form-contact {
    display: flex;
    height: 100vh;
    background: #2a2a2a !important;
    padding: 0 15%;
    flex-direction: column;
    justify-content: center;
}

.contactus-btn {
    position: absolute;
    right: 100%;
    bottom: 100px;
    background: #2a2a2a;
    color: #fff !important;
    padding: 7px 10px;
    text-align: center;
    max-width: 40px;
    width: 100%;
    font-weight: 600;
    font-size: 14px;
    transition: all .2s ease-in;
}

#contact-link {
    cursor: pointer !important;
}

.contactus-btn:hover {
    color: #fff;
    padding-right: 20px;
    max-width: 45px;
}

.contactus-btn span:nth-of-type(1) {
    margin-bottom: 10px;
    display: block;
}

.flying-link {
    position: absolute;
    left: -29px;
    top: 115px;
    z-index: 999;
}

.flying-link a {
    color: #fff;
    background: url(https://web.archive.org/web/20230519063738im_/https://www.systango.com/img/flying-link-bg.png) no-repeat left 4px;
    padding-left: 22px;
    display: block;
    font-weight: 700;
    font-size: 18px;
    line-height: 22px;
    transition: all .2s ease-in;
}

.flying-link a:hover {
    padding-left: 27px;
}

.menu {
    display: block;
    position: relative;
    float: right;
    color: #fff;
    max-width: 74px;
    width: 100%;
    z-index: 999999;
}

.menu div {
    color: #fff;
    font-size: 17px;
    font-weight: 600;
    transition: all .8s cubic-bezier(.77, 0, .175, 1);
    transition-delay: .35s;
}

.inner .menu div {
    color: #2a2a2a;
}

.menu span {
    transition: all 350ms cubic-bezier(.77, 0, .175, 1);
    -webkit-transition: all 350ms cubic-bezier(.77, 0, .175, 1);
    -moz-transition: all 350ms cubic-bezier(.77, 0, .175, 1);
    -o-transition: all 350ms cubic-bezier(.77, 0, .175, 1);
    -webkit-transition-delay: .5s;
    -moz-transition-delay: .5s;
    -o-transition-delay: .5s;
    -ms-transition-delay: .5s;
    transition-delay: .5s;
    display: block;
    position: absolute;
    top: 48%;
    right: 0;
    width: 3px;
    height: 20px;
    background-color: #fff;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translate3d(0, -50%, 0) scale(1, 1) rotate(10deg);
    -moz-transform: translate3d(0, -50%, 0) scale(1, 1) rotate(10deg);
    -webkit-transform: translate3d(0, -50%, 0) scale(1, 1) rotate(10deg);
    -o-transform: translate3d(0, -50%, 0) scale(1, 1) rotate(10deg);
    -ms-transform: translate3d(0, -50%, 0) scale(1, 1) rotate(10deg);
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
}

.inner .menu span {
    background-color: #2a2a2a;
}

.menu span:nth-of-type(2) {
    right: 10px;
}

.menu.opened div {
    color: #000;
    transition-delay: 0s;
}

.menu.opened span {
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    -ms-transition-delay: 0s;
    transition-delay: 0s;
    top: 48%;
    right: 0;
    width: 3px;
    height: 24px;
    background-color: #fff;
    transform: translate3d(0, -50%, 0) scale(1, 1) rotate(225deg);
    -moz-transform: translate3d(0, -50%, 0) scale(1, 1) rotate(225deg);
    -webkit-transform: translate3d(0, -50%, 0) scale(1, 1) rotate(225deg);
    -o-transform: translate3d(0, -50%, 0) scale(1, 1) rotate(225deg);
    -ms-transform: translate3d(0, -50%, 0) scale(1, 1) rotate(225deg);
    background: #000;
}

.menu.opened span:nth-of-type(2) {
    transform: translate3d(0, -50%, 0) scale(1, 1) rotate(-225deg);
    -moz-transform: translate3d(0, -50%, 0) scale(1, 1) rotate(-225deg);
    -webkit-transform: translate3d(0, -50%, 0) scale(1, 1) rotate(-225deg);
    -o-transform: translate3d(0, -50%, 0) scale(1, 1) rotate(-225deg);
    -ms-transform: translate3d(0, -50%, 0) scale(1, 1) rotate(-225deg);
}

.slidenav {
    transition: all 1ms cubic-bezier(.455, .03, .515, .955);
    -webkit-transition: all 1ms cubic-bezier(.455, .03, .515, .955);
    -moz-transition: all 1ms cubic-bezier(.455, .03, .515, .955);
    -o-transition: all 1ms cubic-bezier(.455, .03, .515, .955);
    -webkit-transition-delay: 1s;
    -moz-transition-delay: 1s;
    -o-transition-delay: 1s;
    -ms-transition-delay: 1s;
    transition-delay: 1s;
    transform: scale(0, 1);
    -moz-transform: scale(0, 1);
    -webkit-transform: scale(0, 1);
    -o-transform: scale(0, 1);
    -ms-transform: scale(0, 1);
    -ms-transform-origin: 100% 0;
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
    z-index: 8000;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    position: fixed;
    background-color: transparent;
    color: #fff;
    overflow: visible;
}

.slidenav:before {
    content: "";
    transition: all .8s cubic-bezier(.77, 0, .175, 1);
    -webkit-transition: all .8s cubic-bezier(.77, 0, .175, 1);
    -moz-transition: all .8s cubic-bezier(.77, 0, .175, 1);
    -o-transition: all .8s cubic-bezier(.77, 0, .175, 1);
    transform: scale(0, 0) translate(50%, -50%);
    -moz-transform: scale(0, 0) translate(50%, -50%);
    -webkit-transform: scale(0, 0) translate(50%, -50%);
    -o-transform: scale(0, 0) translate(50%, -50%);
    -ms-transform: scale(0, 0) translate(50%, -50%);
    -webkit-transition-delay: .35s;
    -moz-transition-delay: .35s;
    -o-transition-delay: .35s;
    -ms-transition-delay: .35s;
    transition-delay: .35s;
    display: block;
    width: 370vw;
    height: auto;
    padding-top: 370vw;
    background-color: #fff;
    position: fixed;
    top: 0;
    right: 0;
    -ms-transform-origin: 100% 0;
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
    border-radius: 50%;
    z-index: 1;
}

.slidenav.active {
    transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    -ms-transition-delay: 0s;
    transition-delay: 0s;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.slidenav.active:before {
    transform: scale(1, 1) translate(50%, -50%);
    -moz-transform: scale(1, 1) translate(50%, -50%);
    -webkit-transform: scale(1, 1) translate(50%, -50%);
    -o-transform: scale(1, 1) translate(50%, -50%);
    -ms-transform: scale(1, 1) translate(50%, -50%);
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    -ms-transition-delay: 0s;
    transition-delay: 0s;
}

.slidenav .nav-img {
    z-index: 8250;
    position: absolute;
    height: auto;
    transform: translate(-5%, -50%) scale(.8);
    transform-origin: 50% 50% 0;
    opacity: 0;
    transition: all 350ms cubic-bezier(.455, .03, .515, .955) 0s;
    display: block;
    top: 50%;
    left: 10%
}

.slidenav.active .nav-img {
    transform: translate(0, -50%) scale(1);
    transition-delay: .6s;
    opacity: 1;
}

.navlinks-wrap {
    transform: translate(0, -50%);
    position: absolute;
    top: 50%;
    z-index: 8500;
    left: 50%;
    width: calc(100vw - 50%);
    transition: all 450ms cubic-bezier(.77, 0, .175, 1) 0s;
}

.slidenav .navlinks li {
    transform: scale(.8) translate(200px, 0);
    opacity: 0;
    position: relative;
    line-height: 1.2em;
    transform-origin: 100% 0 0;
    transition: all 650ms cubic-bezier(.77, 0, .175, 1);
    height: 90px;
    font-size: 60px;
}

.slidenav ul.navlinks {
    margin-top: 15px;
    width: auto;
    float: left;
}

.slidenav.active .navlinks li {
    opacity: 1;
    transform: scale(1) translate(0, 0);
}

.link-mask-wrap {
    position: absolute;
    overflow: hidden;
}

.link-mask,
.link-mask-wrap,
.link-mask>span {
    height: 90px;
}

.slidenav .navlinks li a {
    font-family: "Playfair Display", serif;
    display: inline-block;
    color: grey;
    font-weight: 800;
    white-space: nowrap;
}

.link-mask {
    position: absolute;
    width: 100%;
    height: 90px;
    transform: translateX(-102%);
    overflow: hidden;
    transition: all .6s cubic-bezier(.77, 0, .175, 1) 0s;
}

.slidenav li.selected .link-mask,
.slidenav li.selected .link-mask>span,
.slidenav li:hover .link-mask,
.slidenav li:hover .link-mask>span {
    transform: translateY(0);
    transition: all 350ms cubic-bezier(.77, 0, .175, 1) 0s;
}

.slidenav .navlinks li:hover {
    padding-left: 20px;
    transition-delay: 0s;
}

.link-mask>span {
    font-family: "Playfair Display", serif;
    position: absolute;
    color: #000;
    transform: translateX(102%);
    transition: all .6s cubic-bezier(.77, 0, .175, 1) 0s;
}

.slidenav ul.submenu {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateY(-50%);
    display: none;
}

.slidenav ul.submenu li a {
    font-family: "Century Gothic";
    font-size: 30px;
    white-space: nowrap;
    font-weight: 700;
}

.slidenav ul.submenu li {
    height: 60px;
}

.slidenav ul.submenu li a .link-mask>span {
    font-family: "Century Gothic"
}

.form-contact h1,
.section h1,
.section h2.heading-copy {
    width: auto;
    float: left;
    position: relative;
}

h1 .dot,
h2.heading-copy .dot {
    position: absolute;
    left: auto;
    bottom: -2px;
    margin-left: 7px;
}

h1 .dot:before,
h2.heading-copy .dot:before {
    content: "\A";
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: #2a2a2a;
    display: inline-block;
}

.section p {
    font-weight: 500;
    color: #fff;
    font-size: 14px;
    /* letter-spacing: 1px; */
    line-height: 20px;
}

@media screen and (min-width: 320px) and (max-width: 852px) {
    .section h2 {
        text-align: center;
    }
 
}

.section p.links {
    font-size: 23px;
    font-weight: 700;
    letter-spacing: 0;
}

.section p.links a {
    color: #000;
    display: inline-block;
    transition: all .2s ease-in;
}

@keyframes ticktock {
    0% {
        transform: rotate(2deg);
        transform-origin: center center;
    }

    50% {
        transform: rotate(-2deg);
        transform-origin: center center;
    }

    100% {
        transform: rotate(2deg);
        transform-origin: center center;
    }
}

@keyframes ticktock-alternate {
    0% {
        transform: rotate(-2deg);
        transform-origin: center center;
    }

    50% {
        transform: rotate(2deg);
        transform-origin: center center;
    }

    100% {
        transform: rotate(-2deg);
        transform-origin: center center;
    }
}

.section p.links a:hover {
    animation: none;
}

input,
input:active,
input:focus,
select,
select:active,
select:focus,
textarea,
textarea:active,
textarea:focus {
    outline: 0;
    color: #fff;
    font-family: "Century Gothic"
}

textarea {
    height: 100px;
}

.input-label {
    float: right;
    color: #fff;
    font-weight: 500;
    -moz-osx-font-smoothing: grayscale;
    -webkit-touch-callout: none;
    user-select: none;
}

.input-label-text {
    position: absolute;
    top: .95em;
    font-size: 17px;
    left: 0;
    display: block;
    width: 100%;
    text-align: left;
    padding: 0;
    pointer-events: none;
    transform-origin: 0 0;
    transition: transform .2s .15s, color 1s;
    transition-timing-function: ease-out;
}

.input-label sup {
    color: #000;
    font-size: 16px;
    font-weight: 700;
    margin-left: 1px;
    vertical-align: text-bottom;
}

.graphic {
    position: absolute;
    top: 0;
    left: 0;
    fill: none;
    stroke: #fff;
    pointer-events: none;
    transition: transform .7s, stroke .7s;
    transition-timing-function: cubic-bezier(0, .25, .5, 1);
}

.input-field {
    position: relative;
    display: block;
    float: right;
    border: none;
    border-radius: 0;
    font-weight: 400;
    -webkit-appearance: none;
    resize: none;
}

.input-field-text {
    padding: .5em 0 .25em;
    width: 100%;
    background: 0 0;
    color: #fff;
    font-size: 1.25em;
}

#contact .input-field-text {
    color: #2a2a2a;
}

.input-form {
    position: relative;
    z-index: 1;
    display: block;
    margin: 1em 0;
    max-width: 100%;
    width: 100%;
    vertical-align: top;
}

.input-text {
    overflow: hidden;
    padding-top: 1em;
}

.input-field-text:focus+.input-label-text,
.input-filled .input-label-text {
    transform: translate3d(0, -1.1em, 0) scale3d(.75, .75, 1);
}

.input-field-text:focus~.graphic,
.input-filled .graphic {
    transform: translate3d(-66.6%, 0, 0);
}

.clipping-section .letter-section {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 99;
    text-align: center;
}

.clipping-section img {
    max-width: 329px;
}

.clipping-section {
    display: flex;
    align-items: center;
    justify-content: center;
}

.section form {
    width: 100%
}

.translate span.letter {
    display: inline-block;
    transition: all .6s cubic-bezier(.38, 0, .32, 1);
    transform: translateX(-10vw) translateZ(0);
    opacity: 0;
    transition-delay: 0s;
}

.text-translate {
    width: 100%;
    transition: all .6s cubic-bezier(.38, 0, .32, 1);
    transform: translateY(40px) translateZ(0);
    opacity: 0;
    transition-delay: 0s;
}

.text-translate.active {
    transform: translateY(0) translateZ(0);
    opacity: 1;
    transition-delay: .5s;
}

.translate.active span.letter {
    transform: translateX(0) translateZ(0);
    opacity: 1;
}

.translate.out span.letter {
    transform: translateX(10vw) translateZ(0);
    opacity: 0;
}

.translate.in span.letter {
    transform: translateX(-10vw) translateZ(0);
    opacity: 0;
}

.translate span.letter:first-child {
    transition-delay: .34s;
}

.translate span.letter:nth-child(2) {
    transition-delay: .32s;
}

.translate span.letter:nth-child(3) {
    transition-delay: .3s;
}

.translate span.letter:nth-child(4) {
    transition-delay: .28s;
}

.translate span.letter:nth-child(5) {
    transition-delay: .26s;
}

.translate span.letter:nth-child(6) {
    transition-delay: .24s;
}

.translate span.letter:nth-child(7) {
    transition-delay: .22s;
}

.translate span.letter:nth-child(8) {
    transition-delay: .2s;
}

.translate span.letter:nth-child(9) {
    transition-delay: .18s;
}

.translate span.letter:nth-child(10) {
    transition-delay: .16s;
}

.translate span.letter:nth-child(11) {
    transition-delay: .14s;
}

.translate span.letter:nth-child(12) {
    transition-delay: .12s;
}

.translate span.letter:nth-child(13) {
    transition-delay: .1s;
}

.translate span.letter:nth-child(14) {
    transition-delay: .8s;
}

.translate span.letter:nth-child(15) {
    transition-delay: .6s;
}

.translate span.letter:nth-child(16) {
    transition-delay: .4s;
}

.translate span.letter:nth-child(18) {
    transition-delay: .2s;
}

.loader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    z-index: 999999;
    display: flex;
}

.loading-image {
    max-width: 88%;
    width: 100%;
    margin: auto;
    position: relative;
    height: 100vh;
}

.loader img {
    width: 100%;
    position: relative;
    display: block;
    top: 40%;
    max-width: 500px;
    margin: 0 auto;
    left: 6%;
    right: 0;
}

.loader.active img {
    transition-delay: .6s;
    opacity: 1;
}

header.inner {
    margin-bottom: 50px;
}

.banner {
    padding: 50px;
}

.banner h1,
.banner h2.heading-copy {
    font-size: 80px;
    letter-spacing: 0;
    position: relative;
}

.clipping-section.mobile-bg {
    background-image: url(https://web.archive.org/web/20230519063738im_/https://www.systango.com/img/custom-mobile-app-development-services-by-systango.jpg);
    clip-path: url(https://web.archive.org/web/20230519063738im_/https://www.systango.com/css/style.css?v=123351);
    -webkit-clip-path: url(https://web.archive.org/web/20230519063738im_/https://www.systango.com/css/style.css?v=123351);
}

.clipping-section.contact-bg {
    background-image: url(https://web.archive.org/web/20230519063738im_/https://www.systango.com/img/contact-letter-bg.jpg);
    clip-path: url(https://web.archive.org/web/20230519063738im_/https://www.systango.com/css/style.css?v=123351);
    -webkit-clip-path: url(https://web.archive.org/web/20230519063738im_/https://www.systango.com/css/style.css?v=123351);
}

.clipping-section.ea-bg {
    background-image: url(https://web.archive.org/web/20230519063738im_/https://www.systango.com/img/ea-letter-bg.jpg);
    clip-path: url(https://web.archive.org/web/20230519063738im_/https://www.systango.com/css/style.css?v=123351);
    -webkit-clip-path: url(https://web.archive.org/web/20230519063738im_/https://www.systango.com/css/style.css?v=123351);
}

.content li,
.content p {
    font-size: 18px;
    color: grey;
    line-height: 33px;
}

.content p {
    margin-bottom: 30px;
}

.content h2,
.single-post .content h1 {
    font-size: 57px;
    font-weight: 600;
}

.content.green h2 {
    color: var(--green-color);
}

.content.brown h2 {
    color: var(--brown-color);
}

.content.light-orange h2 {
    color: var(--light-orange-color);
}

.content.blue .white-filled-btn {
    color: var(--blue-color);
}

.content.blue .white-filled-btn:hover {
    background-color: var(--blue-color);
    border-color: var(--blue-color);
}

.content.drinkmate .white-filled-btn {
    color: var(--drinkmate-color);
}

.content.drinkmate .white-filled-btn:hover {
    background-color: var(--drinkmate-color);
    border-color: var(--drinkmate-color);
}

.content.fret .white-filled-btn {
    color: var(--fret-color);
}

.content.fret .white-filled-btn:hover {
    background-color: var(--fret-color);
    border-color: var(--fret-color);
}

.content.grindr .white-filled-btn {
    color: var(--grindr-color);
}

.content.grindr .white-filled-btn:hover {
    background-color: var(--grindr-color);
    border-color: var(--grindr-color);
}

.content.strata .white-filled-btn {
    color: var(--strata-color);
}

.content.strata .white-filled-btn:hover {
    background-color: var(--strata-color);
    border-color: var(--strata-color);
}

.content.uber .white-filled-btn {
    color: var(--uber-color);
}

.content.uber .white-filled-btn:hover {
    background-color: var(--uber-color);
    border-color: var(--uber-color);
}

.content.smilepass .white-filled-btn {
    color: var(--smilepass-color);
}

.content.smilepass .white-filled-btn:hover {
    background-color: var(--smilepass-color);
    border-color: var(--smilepass-color);
}

.content.feelshare .white-filled-btn {
    color: var(--feelshare-color);
}

.content.feelshare .white-filled-btn:hover {
    background-color: var(--feelshare-color);
    border-color: var(--feelshare-color);
}

.content.veromuse .white-filled-btn {
    color: var(--veromuse-color);
}

.content.veromuse .white-filled-btn:hover {
    background-color: var(--veromuse-color);
    border-color: var(--veromuse-color);
}

.content.stratomatic .white-filled-btn {
    color: var(--stratomatic-color);
}

.content.stratomatic .white-filled-btn:hover {
    background-color: var(--stratomatic-color);
    border-color: var(--stratomatic-color);
}

.content h3 {
    font-weight: 700;
    font-size: 35px;
    line-height: 45px;
    margin-bottom: 20px;
}

.content h3.small {
    font-size: 28px;
}

.features-coverbox.offset-sm-2.col-sm-10 {
    margin-left: 14.5%
}

.features-coverbox.col-sm-10 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 85.5%;
    -ms-flex: 0 0 85.5%;
    flex: 0 0 85.5%;
    max-width: 85.5%
}

.features-box {
    padding: 35px 20px 15px;
    position: relative;
}

.features-box.right {
    padding-right: 0;
    padding-left: 40px;
}

.features-box .feature-sequence {
    position: absolute;
    bottom: 0;
    font-size: 200px;
    color: #d5d4d4;
    right: calc(100% - 40px);
    font-weight: 600;
    line-height: 152px;
}

.features-box.right .feature-sequence {
    right: auto;
    left: calc(100% - 77px);
}

.form-contact h3 {
    color: #fff;
}

.form-contact h1 .dot:before {
    background-color: #fff;
}

.stack-content>img {
    margin-bottom: -70px;
}

.stack-content .stackbox {
    padding-left: 100px;
    padding-right: 100px;
    padding-bottom: 40px;
}

.stack-content .stackbox.pad-50 {
    padding-left: 50px;
    padding-right: 50px;
    padding-top: 60px;
}

.stack-content .stackbox li {
    padding-left: 40px;
    margin-bottom: 0;
    position: relative;
}

.stack-content .stackbox li:before {
    content: "";
    height: 2px;
    width: 21px;
    background: var(--green-color);
    display: block;
    position: absolute;
    left: 0;
    top: 15px;
}

.python-theme .stack-content .stackbox li:before {
    background: var(--python-color);
}

.fullstack-theme .stack-content .stackbox li:before {
    background: var(--fullstack-color);
}

.industries-content {
    padding-top: 20px;
}

.industries-content p {
    font-size: 20px;
    margin-top: 10px;
    margin-bottom: 0;
    line-height: 25px;
}

.work-carousel {
    height: 415px;
    margin-bottom: 170px;
}

.work-image-carousel {
    max-width: 269px;
    width: 100%;
    height: 534px;
    background: url(https://web.archive.org/web/20230519063738im_/https://www.systango.com/img/mobile-slider-bg.png) no-repeat;
    background-size: 100%;
    background-position: center center;
    float: left;
}

.work-image-carousel.laptop-image-carousel {
    max-width: 796px;
    height: 505px;
    background-image: url(https://web.archive.org/web/20230519063738im_/https://www.systango.com/img/laptop-slider-bg.png);
}

.work-image-carousel:first-child {
    margin-right: -112px;
    margin-top: -50px;
}

.work-image-carousel:last-child {
    margin-top: -90px;
    position: relative;
    z-index: 9;
}

.work-image-carousel.laptop-image-carousel {
    margin-top: -35px;
}

.work-image-carousel * {
    width: 100%;
    height: 100%
}

.work-carousel-inner {
    max-width: 240px;
    margin: auto;
    margin-top: 14px;
    overflow: hidden;
    max-height: 508px;
    border-radius: 30px;
}

.work-image-carousel.laptop-image-carousel .work-carousel-inner {
    max-width: 627px;
    margin-top: 33px;
    border-radius: 0;
    padding-bottom: 95px;
}

.work-carousel-inner.owl-carousel .owl-item img {
    border-radius: 30px;
}

.work-image-carousel.laptop-image-carousel .work-carousel-inner .owl-item img {
    border-radius: 0;
}

.work-carousel li {
    font-size: 14px;
    background-position: left center;
    padding-left: 20px;
    color: var(--green-color);
    font-weight: 600;
    background-size: 14px 3px;
    position: relative;
}

.work-carousel li:before {
    content: "";
    height: 1.9px;
    width: 12px;
    background: var(--green-color);
    display: block;
    position: absolute;
    left: 0;
    top: 16px;
}

.work-carousel.blue-theme li {
    color: var(--dark-blue-color);
}

.work-carousel.blue-theme li:before {
    background: var(--dark-blue-color);
}

.work-carousel.sand-theme li {
    color: var(--sand-color);
}

.work-carousel.sand-theme li:before {
    background: var(--sand-color);
}

.work-carousel.teal-theme li {
    color: var(--teal-color);
}

.work-carousel.teal-theme li:before {
    background: var(--teal-color);
}

.work-carousel.grey-theme li {
    color: var(--grey-color);
}

.work-carousel.grey-theme li:before {
    background: var(--grey-color);
}

.work-carousel.light-red-theme li {
    color: var(--light-red-color);
}

.work-carousel.light-red-theme li:before {
    background: var(--light-red-color);
}

.work-carousel.light-blue-theme li {
    color: var(--light-blue-color);
}

.work-carousel.light-blue-theme li:before {
    background: var(--light-blue-color);
}

.work-carousel.brown-theme li {
    color: var(--brown-bgcolor);
}

.work-carousel.brown-theme li:before {
    background: var(--brown-bgcolor);
}

.work-carousel.brown2-theme li {
    color: var(--brown2-bgcolor);
}

.work-carousel.brown2-theme li:before {
    background: var(--brown2-bgcolor);
}

.work-carousel.python-theme li {
    color: var(--python-color);
}

.work-carousel.python-theme li:before {
    background: var(--python-color);
}

.work-carousel.react-theme li {
    color: var(--react-color);
}

.work-carousel.react-theme li:before {
    background: var(--react-color);
}

.work-carousel.fullstack-theme li {
    color: var(--fullstack-color);
}

.work-carousel.fullstack-theme li:before {
    background: var(--fullstack-color);
}

#carousel-controls button {
    background: 0 0;
    border: 0;
    padding: 0;
    cursor: pointer;
}

#carousel-controls button:focus,
#carousel-controls button:hover {
    outline: 0;
}

#carousel-controls button.owl-prev {
    margin-right: 30px;
}

.dark-text h1 {
    color: #2a2a2a;
    width: 100%;
    float: none;
}

.section span.date-day,
.section span.date-month {
    color: #b0b0b0;
    font-size: 24px;
    font-weight: 700;
}

.blog-item {
    display: block;
    width: 100%
}

.blog-item span.date-day {
    font-size: 50px;
}

.right-border {
    border-right: 2px solid #f2f2f2;
}

.blog-item .column-1 {
    flex: 0 0 12.666667%;
    max-width: 12.666667%
}

.blog-item .column-2 {
    flex: 0 0 45.666667%;
    max-width: 45.666667%
}

.pagination {
    position: absolute;
    width: 100%;
    bottom: -100px;
    margin-bottom: 50px;
}

.pagination .nav-links,
.pagination ul {
    flex-direction: row;
    width: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
}

.pagination .nav-links a,
.pagination .nav-links>span,
.pagination li {
    display: inline-flex;
    max-width: 50px;
    width: 100%;
    height: 50px;
    align-items: center;
    justify-content: center;
    color: #b0b0b0;
    margin-left: 10px;
    transition: all .2s ease-in;
}

.pagination .nav-links a.next,
.pagination .nav-links a.prev,
.pagination li.next,
.pagination li.prev {
    max-width: 58px;
    border: 1px solid #b0b0b0;
}

.pagination .nav-links span.current,
.pagination li.active,
.pagination li:hover {
    background-color: #fff;
    font-weight: 700;
}

.pagination .nav-links a:hover,
.pagination .nav-links span.current,
.pagination li.active a,
.pagination li:hover a {
    color: #2a2a2a;
}

.pagination .nav-links a.next,
.pagination li.next {
    margin-left: 0;
}

.pagination li a {
    width: 100%;
    text-align: center;
    color: #b0b0b0;
    transition: all .2s ease-in;
}

.contactus-form {
    padding: 20px 30px 40px;
}

.contactus-form form .input-label {
    color: #b0b0b0;
}

.contactus-form form .graphic {
    stroke: #b0b0b0;
}

.contactus-form form .input-label sup {
    color: var(--brown-color);
}

.contactus-form form textarea {
    height: 248px;
}

.contactus-form input[type=submit] {
    height: 50px;
    max-width: 167px;
    width: 100%
}

.address-box h3 {
    margin-bottom: 0;
    font-size: 28px;
}

.address-box p {
    background: url(https://web.archive.org/web/20230519063738im_/https://www.systango.com/img/icon-phone.png) no-repeat left 8px;
    padding-left: 25px;
    margin-bottom: 0;
}

.address-box p.address {
    background-image: url(https://web.archive.org/web/20230519063738im_/https://www.systango.com/img/icon-map.png);
}

.address-box .column-1 {
    min-height: 195px;
}

.address-box .column-1.setHeight {
    min-height: inherit;
}

.address-box .column-2 {
    padding-left: 30px;
}

#architecture-system {
    padding: 20px 0;
}

#architecture-system .architecture-box {
    max-width: 800px;
    width: 100%;
    height: 640px;
    margin: auto;
    background: url(https://web.archive.org/web/20230519063738im_/https://www.systango.com/img/center-circle.png) no-repeat center center;
    background-size: auto 100%;
    position: relative;
}

.arch-box {
    display: flex;
    position: absolute;
}

.arch-box.row {
    flex-direction: row;
}

.arch-box .icon-box {
    width: 80px;
    height: 80px;
    border-radius: 50%
}

.arch-box p {
    color: #fff;
    font-weight: 700;
    line-height: 18px;
    margin-bottom: 8px;
}

.arch-box.row.right p {
    margin-right: 13px;
}

.arch-box.row.left p {
    margin-left: 13px;
}

.arch-box.box-01 {
    left: 364px;
    top: 12px;
}

.arch-box.box-02 {
    right: 100px;
    top: 130px;
}

.arch-box.box-03 {
    right: 45px;
    top: 268px;
}

.arch-box.box-04 {
    bottom: 130px;
    right: 100px;
}

.arch-box.box-05 {
    bottom: 12px;
    left: 364px;
}

.arch-box.box-06 {
    left: 150px;
    bottom: 130px;
}

.arch-box.box-07 {
    left: 48px;
    top: 268px;
}

.arch-box.box-08 {
    top: 130px;
    left: 125px;
}

.arch-box.box-09 {
    top: 50%;
    left: 53%;
    transform: translate(-50%, -50%);
}

#architecture-system .architecture-box h3 {
    text-align: center;
    font-size: 50px;
    font-weight: 700;
}

.accordion * {
    transition: all .2s ease-in;
}

.accordion .accordion-image {
    flex: 0 0 21%;
    max-width: 21%
}

.accordion .accordion-text {
    min-height: 250px;
    padding: 30px 0 30px 30px;
    flex: 0 0 79%;
    max-width: 79%
}

.accordion .accordion-text.minheight-auto {
    min-height: auto !important;
}

#customFintech .accordion .accordion-text {
    min-height: auto !important;
}

#customFintech .accordion .accordion-text p {
    margin: 0;
}

#customFintech .accordion .accordion-image svg {
    max-width: 70px;
}

#customFintech .accordion .accordion-image svg path {
    fill: var(--brown2-bgcolor);
}

.accordion img.active,
.accordion.active img.inactive {
    display: none;
}

.accordion img.inactive,
.accordion.active img.active {
    display: inline-block;
}

.accordion .inner-accordionbox {
    max-height: 194px;
    overflow: hidden;
}

#customFintech .accordion .inner-accordionbox {
    max-height: inherit;
}

.accordion .accordion-text h3 {
    margin-bottom: 6px;
}

.accordion .accordion-text p {
    line-height: 24px;
}

.accordion.active .accordion-image {
    background-color: var(--light-orange-color);
}

.accordion.active .inner-accordionbox {
    max-height: 200vh;
}

.accordion-toOpen {
    height: 45px;
    width: 45px;
    text-align: center;
    color: #fff;
    background-color: #2a2a2a;
    border-radius: 50%;
    font-size: 42px;
    font-weight: 100;
    position: absolute;
    right: -22px;
    top: calc(50% - 20px);
    z-index: 99;
}

.accordion-toOpen.active {
    justify-content: flex-end;
    line-height: 53px;
}

.accordion-toOpen:focus,
.accordion-toOpen:hover {
    color: #fff;
}

.project-laptop {
    background: url(https://web.archive.org/web/20230519063738im_/https://www.systango.com/img/laptop-bg.png) no-repeat;
    background-size: 100%;
    background-position: center center;
    max-width: 800px;
    width: 100%;
    min-height: 500px;
    margin: auto;
    padding-top: 44px;
}

.project-laptop .project-screen {
    max-width: 622px;
    width: 100%;
    height: 389px;
    margin: auto;
    overflow-y: scroll;
}

.project-screenshots {
    padding: 100px 0;
}

.project-milestones {
    padding: 50px 0;
}

.project-milestones .milestones-box {
    height: 190px;
}

.project-milestones .milestones-box h3,
.project-milestones .milestones-box span,
.project-milestones h2,
.project-milestones p {
    color: #fff;
}

.project-milestones .milestones-box h3 {
    margin-bottom: 0;
}

.project-milestones .primary-btn {
    margin-right: 35px;
    display: inline-flex !important;
    letter-spacing: 1px;
    font-weight: 500;
    font-family: Montserrat, sans-serif;
    height: 45px;
    padding-top: 10px;
}

.project-milestones .primary-btn img {
    margin-right: 5px;
    margin-top: -4px;
}

.project-links {
    padding: 60px 0 50px;
}

.project-links p {
    font-size: 35px;
    margin: 0;
    font-weight: 600;
    line-height: 45px;
    letter-spacing: 1px;
}

.project-links p a {
    color: #fff;
    transition: all .2s ease-in-out;
}

.project-links p a:hover {
    padding-left: 15px;
    color: #2a2a2a;
}

.testimonial {
    padding: 25px 30px 1px;
}

.testimonial p::before {
    content: url(https://web.archive.org/web/20230519063738im_/https://www.systango.com/img/testimonial-left.png);
    display: inline-block;
    vertical-align: sub;
    margin-right: 5px;
}

.testimonial p::after {
    content: url(https://web.archive.org/web/20230519063738im_/https://www.systango.com/img/testimonial-right.png);
    display: inline-block;
    margin-left: 7px;
    vertical-align: text-top;
}

.principle-about {
    padding: 0 40px 0 30px;
}

.principle-about li {
    padding-left: 30px;
    position: relative;
    margin-bottom: 20px;
}

.principle-about li:before {
    content: "";
    height: 2px;
    width: 17px;
    background: var(--orange-color);
    display: block;
    position: absolute;
    left: 0;
    top: 15px;
}

.principle-about.dark-orange-links li:before {
    background: var(--dark-orange-color);
}

.recentblog-content {
    padding: 30px 27px;
    background-color: #fff;
}

.recentblog-content h3 {
    font-size: 25px;
    line-height: 31px;
    letter-spacing: 0;
    font-weight: 600;
    margin-bottom: 10px;
}

.recentblog-top {
    height: 172px;
}

.blog-box-4 .recentblog-top {
    height: 130px;
}

.recentblog-content p.date {
    font-size: 20px;
    font-weight: 700;
    color: #b0b0b0;
}

#portfolio-slider .banner {
    padding-bottom: 0;
    padding-top: 70px;
}

#portfolio-slider .banner h1,
#portfolio-slider .banner h2.heading-copy {
    font-size: 50px;
    line-height: 55px;
}

#portfolio-slider .banner h1 .dot:before,
#portfolio-slider .banner h2.heading-copy .dot:before {
    width: 18px;
    height: 18px;
}

#portfolio-slider .banner p {
    font-size: 18px;
    line-height: 31px;
}

#portfolio-slider .banner .btn {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 1px;
    padding: 12px 22px;
}

#portfolio-slider .owl-nav,
#testimonialSlider .owl-nav {
    text-align: center;
    margin-top: 30px;
}

#portfolio-slider .owl-nav .owl-prev,
#testimonialSlider .owl-nav .owl-prev {
    margin-right: 36px;
}

footer:not(.comment-meta) {
    background-color: #0b0b0b;
}

footer h6 {
    color: grey;
    font-size: 14px;
}

footer .footer-navigation ul {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-right: 20px;
    flex-wrap: wrap;
}

footer .footer-locations h5,
footer .footer-navigation li {
    /* font-family: "Playfair Display", serif; */
    font-size: 24px;
    font-weight: 800;
    line-height: 37px;
    letter-spacing: .4px;
}

footer .footer-navigation li span {
    font-size: 39px;
    line-height: 0;
}

footer .footer-locations p {
    color: #b5b5b5;
    font-size: 12px;
}

footer .footer-navigation li {
    color: #b5b5b5;
}

footer .footer-navigation li a {
    color: #b5b5b5;
    transition: all .2s ease-in;
}

footer .footer-contacts li a:hover,
footer .footer-copyright li a:hover,
footer .footer-navigation li a:hover,
footer .footer-navigation li.active a {
    color: #fff;
}

footer .footer-navigation li ul.submenu {
    display: none;
    position: absolute;
    left: 13px;
    width: 100%;
    text-align: center;
}

footer .footer-navigation li ul.submenu li {
    font-family: "Century Gothic";
    margin-right: 35px;
    font-size: 18px;
    display: inline-block;
}

footer .footer-contacts li {
    font-size: 20px;
    color: #bfbfbf;
    line-height: 40px;
}

footer .footer-locations h5 {
    color: #b5b5b5;
    margin-bottom: 0;
    font-size: 20px;
}

footer .footer-navigation {
    padding: 20px 20px 0 0;
}

footer .footer-locations {
    padding: 40px 20px 40px 0 !important;
}

footer .left-border {
    border-right: 1px solid #444;
}

footer .footer-locations {
    border-top: 1px solid #444;
}

footer .footer-contacts {
    padding: 0 0 0 20px;
    /* margin-top: 15px; */
}

footer .footer-contacts li a {
    color: #bfbfbf;
    transition: all .2s ease-in;
}

footer .footer-copyright {
    padding: 20px 0 0;
    border-top: 1px solid #444;
}

footer .footer-copyright li {
    font-size: 12px;
    color: grey;
    display: inline-flex;
    font-weight: 500;
    margin-right: 35px;
}

footer .footer-copyright li:last-child {
    margin-right: 0;
}

footer .footer-copyright.padleft {
    padding-left: 35px;
}

footer .footer-copyright li a {
    color: grey;
    transition: all .2s ease-in;
}

footer .footer-copyright svg {
    width: 22px;
    height: 22px;
}

footer .footer-copyright li.gitlab svg {
    width: 27px;
    height: 20px;
}

footer .footer-copyright a svg circle,
footer .footer-copyright a svg path {
    transition: all .2s ease-in;
}

footer .footer-copyright a:hover svg circle,
footer .footer-copyright a:hover svg path {
    fill: #fff;
}

#lottie {
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
    transform: translate3d(0, 0, 0);
    text-align: center;
    opacity: 1;
}

#web-development-slider .owl-dots {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 40px;
    display: flex;
    flex-direction: column;
    z-index: 999;
}

#web-development-slider button.owl-dot {
    width: 30px;
    height: 30px;
    background: #fff !important;
    transform: rotate(45deg);
    margin-bottom: 30px;
    position: relative;
    margin-top: 10px;
}

#web-development-slider button.owl-dot:after {
    content: "";
    width: 4px;
    height: 40px;
    position: absolute;
    top: 16px;
    left: 54px;
    transform: rotate(-45deg);
    transform-origin: bottom;
    z-index: 99;
    background: #fff;
}

#web-development-slider button.owl-dot:last-child:after {
    display: none;
}

#web-development-slider button.owl-dot.active span {
    width: 18px;
    height: 18px;
    display: block;
    background: var(--dark-blue-color);
    margin-left: 6px;
}

#web-development-slider .left-image {
    padding-left: 70px;
    padding-right: 0;
}

.theme-links li {
    font-weight: 700;
    padding-left: 28px;
    position: relative;
}

.theme-links li:before {
    content: "";
    height: 2px;
    width: 18px;
    background: var(--dark-blue-color);
    display: block;
    position: absolute;
    left: 0;
    top: 15px;
}

.theme-links.black li {
    font-weight: 400;
}

.theme-links.black li:before {
    background: #2a2a2a;
}

.theme-links.sand li:before {
    background: var(--sand-color);
}

.theme-links.leaf-green li:before {
    background: var(--leaf-green-color);
}

.theme-links.teal li:before {
    background: var(--teal-color);
}

.theme-links.light-blue-color li:before {
    background: var(--light-blue-color);
}

.theme-links.drinkmate li:before {
    background: var(--drinkmate-color);
}

.theme-links.fret li:before {
    background: var(--fret-color);
}

.theme-links.grindr li:before {
    background: var(--grindr-color);
}

.theme-links.strata li:before {
    background: var(--strata-color);
}

.theme-links.uber li:before {
    background: var(--uber-color);
}

.theme-links.smilepass li:before {
    background: var(--smilepass-color);
}

.theme-links.feelshare li:before {
    background: var(--feelshare-color);
}

.theme-links.veromuse li:before {
    background: var(--veromuse-color);
}

.theme-links.stratomatic li:before {
    background: var(--stratomatic-color);
}

#web-development-slider .owl-item:not(.active) .right-content {
    background: 0 0 !important;
}

.portfolio {
    margin-top: 70px;
}

.portfolio .element-item {
    display: flex;
}

.portfolio-item {
    min-height: 259px;
    padding: 30px;
    margin-bottom: 40px;
    transition: all .2s ease-in !important;
}

.portfolio-item p>img {
    opacity: 0;
}

.portfolio-item:hover h3,
.portfolio-item:hover p {
    color: #fff;
}

.portfolio-item:hover p>img {
    opacity: 1;
}

.portfolio-item.orange:hover {
    background-color: var(--dark-orange-color);
}

.portfolio-item.green:hover {
    background-color: var(--green-color);
}

.portfolio-item.brown:hover {
    background-color: var(--brown-color);
}

.portfolio-item.navy-blue:hover {
    background-color: var(--navy-blue-color);
}

.portfolio-item.blue:hover {
    background-color: var(--blue-color);
}

.portfolio-item.strata:hover {
    background-color: var(--strata-color);
}

.portfolio-item.drinkmate:hover {
    background-color: var(--drinkmate-color);
}

.portfolio-item.fret:hover {
    background-color: var(--fret-color);
}

.portfolio-item.uber:hover {
    background-color: var(--uber-color);
}

.portfolio-item.grindr:hover {
    background-color: var(--grindr-color);
}

.portfolio-item.stratomatic:hover {
    background-color: var(--stratomatic-color);
}

.portfolio-item.smilepass:hover {
    background-color: var(--smilepass-color);
}

.portfolio-item.feelshare:hover {
    background-color: var(--feelshare-color);
}

.portfolio-item.veromuse:hover {
    background-color: var(--veromuse-color);
}

.portfolio-item.webinar-box:hover {
    background-color: var(--webinar-color);
}

#winning-section .stack-content>img {
    margin-bottom: -55px;
}

#winning-section h3 {
    letter-spacing: 0;
}

#testimonial-slider {
    margin-top: 100px;
    padding: 60px 0;
    min-height: 600px;
}

#testimonial-slider p {
    line-height: 35px;
    font-size: 24px;
    position: relative;
}

#testimonial-slider .testimonial {
    max-width: 720px;
    margin: auto;
    padding: 0 30px;
}

#testimonial-slider .testimonial p:after,
#testimonial-slider .testimonial p:before {
    position: absolute;
}

#testimonial-slider .testimonial p:before {
    content: url(https://web.archive.org/web/20230519063738im_/https://www.systango.com/img/testimonial-left-big.png);
    top: -23px;
}

#testimonial-slider .testimonial p::after {
    right: 0;
    bottom: -28px;
    content: url(https://web.archive.org/web/20230519063738im_/https://www.systango.com/img/testimonial-right-big.png);
}

#testimonial-slider .testimonial h6 {
    font-size: 24px;
    font-weight: 600;
    margin-top: 40px;
}

#testimonialSlider .owl-item>div {
    padding-top: 28px;
}

.pagination .primary-btn {
    padding: 12px 35px;
    font-size: 19px;
    letter-spacing: 1px;
}

.single-post .content:not(.recent-blog) h1,
.single-post .content:not(.recent-blog) h2 {
    margin-bottom: 50px;
}

.single-post .content ul {
    padding-left: 30px;
}

.single-post .content ol {
    padding-left: 43px;
}

.single-post .content ul li {
    padding-left: 28px;
    position: relative;
}

.single-post .content ul li:before {
    content: "";
    height: 8px;
    width: 8px;
    display: block;
    position: absolute;
    left: 0;
    top: 12px;
    border-radius: 50%
}

.single-post .content ol li {
    padding-left: 5px;
    margin-bottom: 20px;
    list-style-type: decimal;
}

a.tag {
    border: 2px solid #fff;
    background: #fff;
    color: #2a2a2a;
    padding: 10px 20px;
    font-weight: 600;
    letter-spacing: 1.3px;
    font-size: 18px;
    transition: all .3s ease-in;
    margin-right: 15px;
    white-space: nowrap;
    margin-bottom: 10px;
}

a.tag:hover {
    border-color: #2a2a2a;
}

.single-post .author-info {
    border-top: 2px solid #dedede;
    padding-top: 32px;
    padding-bottom: 5px;
    border-bottom: 2px solid #dedede;
}

.single-post .content:not(.recent-blog) h3 {
    font-size: 39px;
}

.single-post .comments h5 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
}

.single-post .comments p {
    margin-bottom: 20px;
}

.single-post .comments .date span {
    font-size: 13px;
}

.single-post .comments .comment-block {
    padding-bottom: 4px;
    border-bottom: 2px solid #dedede;
    margin-bottom: 25px;
}

.single-post .comments .comment-block.inner-child {
    padding-bottom: 0;
    border-top: 2px solid #dedede;
    border-bottom: 0 !important;
    margin-bottom: 0;
    padding-top: 20px;
}

.form-control {
    border: 0;
    border-radius: 0;
    padding: 18px;
    height: 70px;
    padding-left: 24px;
    margin-bottom: 40px;
}

@media (max-width: 1024px) {
    .responsive-center {
        margin: 0 auto;
        float: none;
    }
    .stack-list {
        margin-top: 0 !important;
    }
}

textarea.form-control {
    height: 215px;
}

.orange-btn {
    background: #f2794e;
    border-color: #f2794e;
    color: #fff;
    padding: 16px 20px;
    max-width: 200px;
    width: 100%
}

#contact-navigation .close-btn {
    position: absolute;
    right: 5%;
    top: 40px;
    z-index: 99;
}

.careers-accordion {
    border-left: 12px solid var(--dark-orange-color);
}

.accordion.careers-accordion .inner-accordionbox {
    max-height: 90px;
}

.accordion.careers-accordion .accordion-text {
    padding-left: 50px;
    flex: 0 0 98%;
    max-width: 98%;
    min-height: 100px;
}

.accordion.careers-accordion.active .inner-accordionbox {
    max-height: 200vh;
}

.theme-links.dark-orange-links li {
    font-weight: 400;
}

.theme-links.dark-orange-links li:before {
    background: var(--dark-orange-color);
}

.accordion.careers-accordion .black-btn {
    font-size: 18px;
    text-transform: inherit;
    padding-left: 10px;
    padding-bottom: 4px;
}

.recent-blog-box,
.recent-blog-box .recentblog-top {
    overflow: hidden;
}

.recent-blog-box img {
    transition: all .2s ease-in;
}

.recent-blog-box:hover img {
    transform: scale(1.2);
}

.recent-blog-box:hover {
    box-shadow: 0 0 30px 2px rgba(0, 0, 0, .2);
    transition: all .2s ease-in;
}

.content .content svg {
    width: 80px;
    height: 80px;
}

.leaf-green.content .content.industries-content svg path,
.leaf-green.content .content.industries-content svg polygon,
.leaf-green.content .content.industries-content svg rect {
    fill-rule: evenodd;
    clip-rule: evenodd;
    fill: var(--leaf-green-color);
}

.light-red-color.content .content.industries-content svg path,
.light-red-color.content .content.industries-content svg polygon,
.light-red-color.content .content.industries-content svg rect {
    fill-rule: evenodd;
    clip-rule: evenodd;
    fill: var(--light-red-color);
}

.brown-color.content .content.industries-content svg path,
.brown-color.content .content.industries-content svg polygon,
.brown-color.content .content.industries-content svg rect {
    fill-rule: evenodd;
    clip-rule: evenodd;
    fill: var(--brown-bgcolor);
}

.sand.content .content.industries-content svg path,
.sand.content .content.industries-content svg polygon,
.sand.content .content.industries-content svg rect {
    fill-rule: evenodd;
    clip-rule: evenodd;
    fill: var(--sand-color);
}

.light-blue-color.content .content.industries-content svg path,
.light-blue-color.content .content.industries-content svg polygon,
.light-blue-color.content .content.industries-content svg rect {
    fill-rule: evenodd;
    clip-rule: evenodd;
    fill: var(--light-blue-color);
}

.fullstack-theme.content .content.industries-content svg path,
.fullstack-theme.content .content.industries-content svg polygon,
.fullstack-theme.content .content.industries-content svg rect {
    fill-rule: evenodd;
    clip-rule: evenodd;
    fill: var(--fullstack-color);
}

.grey-color svg path,
.grey-color svg polygon,
.grey-color svg rect {
    fill: var(--grey-color);
}

.python-theme svg path,
.python-theme svg polygon,
.python-theme svg rect {
    fill: var(--python-color);
}

.react-theme svg path,
.react-theme svg polygon,
.react-theme svg rect {
    fill: var(--react-color);
}

.brown2-color svg path,
.brown2-color svg polygon,
.brown2-color svg rect {
    fill: var(--brown2-bgcolor);
}

.project-laptop .grindr-screen {
    background: url(https://web.archive.org/web/20230519063738im_/https://www.systango.com/img/grindr-screen-02.jpg) no-repeat;
    background-size: 100%;
    background-position: top center;
}

.project-laptop .uber-screen {
    background: url(https://web.archive.org/web/20230519063738im_/https://www.systango.com/img/uber-site.png) no-repeat;
    background-size: 100%;
    background-position: top center;
}

.project-laptop .drinkmate-screen {
    background: url(https://web.archive.org/web/20230519063738im_/https://www.systango.com/img/drinkmate-site.png) no-repeat;
    background-size: 100%;
    background-position: top center;
}

.project-laptop .fret-screen {
    background: url(https://web.archive.org/web/20230519063738im_/https://www.systango.com/img/fret-site.png) no-repeat;
    background-size: 100%;
    background-position: top center;
}

.project-laptop .strat-screen {
    background: url(https://web.archive.org/web/20230519063738im_/https://www.systango.com/img/strat-site.png) no-repeat;
    background-size: 100%;
    background-position: top center;
}

.blog-item {
    transition: all .3s ease-in;
    box-shadow: 0 0 50px rgba(0, 0, 0, .05);
}

.blog-item:hover {
    box-shadow: 0 0 30px 2px rgba(0, 0, 0, .2);
}

.blog-item .blog-item-image {
    overflow: hidden;
}

.blog-item .blog-item-image img {
    transition: all .3s ease-in;
}

.blog-item:hover .blog-item-image img {
    transform: scale(1.2);
}

h6.text-masking {
    background: 0 0;
    position: relative;
    z-index: 200;
    -webkit-transition: all .2s ease;
    -moz-background-clip: padding;
    -webkit-background-clip: padding;
    background-clip: padding-box;
    position: relative;
    display: none !important;
}

h6.text-masking span {
    width: 960px;
    margin: 0 auto;
    font-size: 660px;
    line-height: 660px;
    top: -10px;
    font-family: Montserrat, sans-serif;
    text-transform: uppercase;
    font-weight: 900;
    display: block;
    position: relative;
    background: url(https://web.archive.org/web/20230519063738im_/https://www.systango.com/img/systango-your-specialised-software-studio.jpg) -100px -40px no-repeat;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;
}

.client-logo {
    margin-right: 15px;
}

.client-logo img {
    height: 50px;
    width: 131px !important;
    object-fit: contain;
}

.client-logo.small-logo img {
    height: 40px;
}

.input-cover {
    position: relative;
}

label.error {
    color: red;
    position: absolute;
    font-size: 14px;
    bottom: -25px;
    left: 0;
}

.group-blog article h1 {
    font-size: 50px;
    line-height: 60px;
    color: #000;
    letter-spacing: 0;
}

input[type=submit] {
    cursor: pointer;
}

#contactus .input-field-text,
#contactus input.input-field,
#contactus input.input-field:active,
#contactus input.input-field:focus,
#contactus textarea,
#contactus textarea:active,
#contactus textarea:focus {
    color: #2a2a2a;
}

.pagination h2.screen-reader-text {
    display: none !important;
}

.input-field-text:focus+.input-label-text,
.input-filled .input-label-text {
    transform: translate3d(0, -1.1em, 0) scale3d(.75, .75, 1);
    -ms-transform: translate3d(0, -1.1em, 0) scale3d(.75, .75, 1);
    -webkit-transform: translate3d(0, -1.1em, 0) scale3d(.75, .75, 1);
    -moz-transform: translate3d(0, -1.1em, 0) scale3d(.75, .75, 1);
    -o-transform: translate3d(0, -1.1em, 0) scale3d(.75, .75, 1);
}

#commentform {
    display: flex;
    flex-wrap: wrap;
}

#commentform .comment-reply-title {
    font-weight: 600;
    letter-spacing: 0;
    font-size: 30px;
}

#commentform .comment-form-author,
#commentform .comment-form-comment,
#commentform .comment-form-email,
#commentform .comment-form-url {
    display: flex;
    flex: 0 0 33.33%;
    flex-direction: column;
    max-width: 33.33%;
    margin-bottom: 35px;
}

#commentform .comment-form-author,
#commentform .comment-form-email,
#commentform .comment-form-url {
    padding: 0 15px;
}

#commentform .comment-form-author {
    padding-left: 0;
    order: 1;
}

#commentform .comment-form-email {
    order: 2;
}

#commentform .comment-form-url {
    order: 3;
}

#commentform .comment-form-url {
    padding-right: 0;
}

#commentform .comment-form-comment {
    flex: 0 0 100%;
    max-width: 100%;
    order: 4;
}

#commentform .gglcptch.gglcptch_v2 {
    order: 5;
    width: calc(100% - 206px);
}

#commentform p.form-submit {
    text-align: right;
    order: 6;
    width: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.comment-reply-title {
    font-size: 30px;
    letter-spacing: 0;
    font-weight: 600;
}

.comment-author {
    margin: 10px 10px 0 0;
    display: inline-block;
}

.comment-author b.fn {
    text-transform: capitalize;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: .4px;
}

.comment-author b.fn a {
    color: #292b2c;
}

.comment-metadata {
    margin: 0;
    display: inline-block;
}

#commentform .comment-form-author label,
#commentform .comment-form-comment label,
#commentform .comment-form-email label,
#commentform .comment-form-url label,
#commentform .comment-notes.smallPart,
.comment-author span.says,
.comment-awaiting-moderation {
    display: none;
}

#commentform input[type=submit] {
    background: var(--light-red-color);
    border-color: var(--light-red-color);
    padding: 15px 40px;
    transition: all .2s ease-in-out;
    font-weight: 600;
    text-transform: uppercase;
}

#commentform input[type=submit]:hover {
    background: 0 0;
    color: var(--light-red-color);
}

#commentform .comment-form-author input,
#commentform .comment-form-comment textarea,
#commentform .comment-form-email input,
#commentform .comment-form-url input {
    border: 0;
    padding: 15px;
    box-shadow: 0 0 9px 0 rgba(0, 0, 0, .05);
    color: #2a2a2a;
}

.comment-reply-title,
.comments-title {
    font-weight: 600;
    font-size: 2.5rem;
    letter-spacing: .7px;
    margin-bottom: 30px;
}

.comment-content p {
    font-size: 18px;
    color: grey;
    line-height: 31px;
}

.comment-metadata a time {
    font-size: 13px;
    color: grey;
}

#cancel-comment-reply-link,
.comment-reply-link {
    color: #2a2a2a;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    font-size: 18px;
    text-decoration: underline;
}

.comment-body {
    padding-bottom: 20px;
    border-bottom: 2px solid #ddd;
    margin-bottom: 20px;
}

#comments ol.comment-list.show-more {
    padding: 0;
    margin-bottom: 80px;
}

.scroll-top {
    position: fixed;
    bottom: 10px;
    right: 52px;
    z-index: 99;
    cursor: pointer;
    display: none;
}

.scroll-top img {
    max-width: 55px;
}

.fileUpload {
    position: relative;
    cursor: pointer;
    height: 38px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.fileUpload input.upload {
    right: 0;
    padding-left: 180px !important;
}

.fileUpload>span {
    cursor: pointer;
    position: relative;
    z-index: 20;
}

.fileUpload svg {
    cursor: pointer;
    max-width: 23px;
}

.fileUpload svg path {
    fill: #fff;
}

.fileUpload input.upload {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    z-index: 999999;
    width: 100%;
    cursor: pointer;
    overflow: hidden;
    max-width: 190px;
    width: 100%
}

.fileUpload #upload-text {
    color: #fff;
    font-size: 1em;
    display: inline-block;
    vertical-align: super;
    margin-left: 0;
    cursor: pointer;
}

.home #contact .fileUpload:before {
    content: "";
    max-width: 210px;
    height: 30px;
    position: absolute;
    right: 25px;
    top: -4px;
    width: 100%;
    z-index: -1;
}

.home #contact .fileUpload #upload-text {
    max-width: 158px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

#removeUpload {
    color: #fff;
    width: 15px;
    height: 15px;
    text-align: center;
    line-height: 14px;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 700;
    position: absolute;
    right: -17px;
    top: -10px;
    margin-left: 5px;
    display: none;
    z-index: 99;
}

.fileUpload.dark svg path {
    fill: #b0b0b0;
}

.fileUpload.dark #upload-text {
    color: #b0b0b0;
}

.fileUpload.dark #removeUpload {
    color: #fff;
    background: #b0b0b0;
}

.home:not(.group-blog) #contact .fileUpload {
    z-index: 9;
}

.home #contact #attachment-error {
    bottom: -49px;
}

#recaptcha-error {
    bottom: -23px;
}

a.industries-content,
a.industries-content * {
    transition: all .3s ease-in-out;
}

a.industries-content:hover {
    background-color: #d5d4d4;
}

a.industries-content:hover p {
    color: rgba(0, 0, 0, .7);
}

#contactPopup .input-label sup {
    color: #ccc;
}

.clipping-section.bg-1,
.clipping-section.bg-2,
.clipping-section.bg-7 {
    background-position: -126px;
}

.clipping-section.bg-3 {
    background-position: -125px 30px;
}

.clipping-section.bg-4 {
    background-position: -38px;
    background-size: 74%
}

.clipping-section.bg-5 {
    background-position: -74px -40px;
}

.clipping-section.bg-6 {
    background-position: -102px 16px;
}

.clipping-section.bg-8 {
    background-position: -57px;
}

.loader .mobile-loader {
    display: none;
}

.contact-header-form #contactus textarea,
.home:not(.group-blog) #contact textarea {
    height: 208px;
}

.contact-header-form #contactus .fileUpload,
.home:not(.group-blog) #contact .fileUpload {
    margin-top: -65px;
    text-align: right;
}

.contact-header-form #contactus .btn.white-btn,
.home:not(.group-blog) #contact .btn.white-btn {
    max-width: 200px;
    width: 100%
}

.home-contact-box {
    border-right: 2px solid #fff;
    margin-top: 25px;
}

.home-contact-box h3 {
    font-size: 24px;
    font-weight: 600;
}

.home-contact-box p {
    font-size: 12px;
    line-height: 20px;
}

.home #contact .fileUpload.input-filled>span {
    padding-right: 22px;
}

.single-post .content img {
    width: 100%;
    height: auto !important;
}

.light-orange-text {
    color: var(--light-orange-color);
}

#contactus .recaptcha-box {
    display: inline-block;
    position: relative;
    margin-top: 15px;
}

#contactPopup .recaptcha-box {
    position: relative;
    margin-top: 0;
    max-width: 240px;
    width: 100%
}

.col-md-6.text-left.mobCapHeight {
    padding-right: 0;
}

.textual-content.banner h1 {
    font-size: 60px;
    line-height: 68px;
}

.textual-content h1 .dot:before {
    width: 16px;
    height: 16px;
}

.textual-content h6 {
    font-size: 20px;
    font-weight: 600;
}

.textual-content li,
.textual-content p {
    font-size: 18px;
    color: #fff;
    font-weight: 500;
}

.textual-content ul.black-color li {
    color: #2a2a2a;
}

.textual-content .theme-links li:before {
    height: 1px;
    width: 12px;
    background: #292b2c;
    top: 12px;
}

.black-btn.custom-theme {
    background: #2a2a2a;
    color: #fff;
    font-size: 18px;
    max-width: 187px;
    width: 100%;
    padding-top: 13px;
    padding-bottom: 13px;
}

.black-btn.custom-theme img {
    max-width: 21px;
    margin-top: 4px;
    float: right;
}

.black-btn.custom-theme:hover {
    background: 0 0;
    color: #2a2a2a;
}

.ppc-testimonial.testimonial {
    max-width: 900px;
    width: 100%;
    margin: auto;
}

.ppc-testimonial.testimonial p::before {
    content: url(https://web.archive.org/web/20230519063738im_/https://www.systango.com/img/testimonial-left-ppc.png);
}

.ppc-testimonial.testimonial p::after {
    content: url(https://web.archive.org/web/20230519063738im_/https://www.systango.com/img/testimonial-right-ppc.png);
    vertical-align: middle;
    margin-top: 10px;
}

.ppc-testimonial.testimonial p {
    line-height: 25px;
    text-align: center;
}

.ppc-testimonial.testimonial h6 {
    font-size: 18px;
    text-align: center;
    font-weight: 700;
}

#contactus .fileUpload {
    margin-top: 13px;
}

ul.kiwi-floating-bar {
    z-index: 99 !important;
}

ul.kiwi-floating-bar li a:first-of-type {
    height: 40px !important;
    line-height: 42px !important;
    min-width: 40px !important;
    font-size: 20px !important;
    border-radius: 50% !important;
}

ul.kiwi-floating-bar.right>li:hover>.network-label {
    opacity: 0 !important;
    display: none !important;
}

.home.group-blog ul.kiwi-floating-bar {
    display: none !important;
}

.animation-column {
    overflow: hidden;
}

.animation-column .clipping-section.slidein {
    animation-name: slidein;
    animation-duration: 1s;
    animation-iteration-count: 1;
}

@keyframes slidein {
    0% {
        transform: translate(100%);
    }

    50% {
        transform: translate(50%);
    }

    100% {
        transform: translate(0);
    }
}

.animation-column .clipping-section.slideout {
    animation-name: slideout;
    animation-duration: 1s;
    animation-iteration-count: 1;
}

@keyframes slideout {
    0% {
        transform: translate(0);
    }

    50% {
        transform: translate(50%);
    }

    100% {
        transform: translate(100%);
    }
}

@keyframes letter-animation {
    0% {
        stroke-dashoffset: 2600;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

.line {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 3px;
    width: 100%;
    background-color: #402d2d;
    transform-origin: center center;
    transition: all .3s ease-in-out;
    opacity: 0;
}

.line-1 {
    animation: lineanimation-in 1s linear 1 4s, move-top .6s linear 1 5s;
    animation-fill-mode: forwards;
}

.line-2 {
    animation: lineanimation-in 1s linear 1 4s, move-bottom .6s linear 1 5s;
    animation-fill-mode: forwards;
}

.letter-animation-2 {
    animation: letteranimation-in .6s linear 1 5s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes letteranimation-in {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes lineanimation-in {
    0% {
        transform: scaleX(0);
    }

    100% {
        transform: scaleX(1);
        opacity: 1;
    }
}

@keyframes move-top {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-270px);
    }
}

@keyframes move-bottom {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(270px);
    }
}

.inner-page .banner h3 {
    line-height: 38px;
}

.single-post article p a {
    color: #2a2a2a;
    text-decoration: underline;
}

.single-post article p a:hover {
    color: grey;
}

.about-featurebox {
    min-height: 570px;
    padding-right: 60px;
    padding-left: 40px;
}

.about-featurebox.first {
    padding-right: 100px;
    padding-left: 0;
}

.about-featurebox.last {
    padding-right: 0;
    padding-left: 60px;
}

.about-featurebox h3 {
    position: relative;
}

.about-featurebox h3:after {
    position: absolute;
    content: "";
    width: 2px;
    height: 107px;
    left: 1px;
    top: calc(100% - 6px);
    background: var(--about-color);
}

.stats-box {
    border: 3px solid #fff;
    transform: scale(1);
    cursor: default;
    height: 212px;
    transition: all .1s ease-in-out;
}

.stats-box.active,
.stats-box:hover {
    transform: scale(1.1);
    background: #2a2a2a;
    border-color: #2a2a2a;
}

.stats-box h4 {
    font-size: 50px;
    line-height: 50px;
    font-weight: 700;
    color: #2a2a2a;
}

.stats-box p {
    font-size: 25px;
    color: #2a2a2a;
    margin-bottom: 0;
    margin-top: 8px;
}

.stats-box.active h4,
.stats-box.active p,
.stats-box:hover h4,
.stats-box:hover p {
    color: var(--about-color);
}

.about-award p {
    color: #000;
    line-height: 30px;
    margin-top: 15px;
}

.embedded-video {
    position: relative;
}

.embedded-video img {
    width: 100%
}

.embedded-video iframe {
    position: absolute;
    max-width: 772px;
    width: 100%;
    max-height: 444px;
    height: 100%;
    left: 50.1%;
    top: 0;
    transform: translateX(-50%);
    margin-top: 9px;
    display: none;
}

.embedded-video.play iframe {
    display: block;
}

.screen-video {
    position: relative;
}

.screen-video img {
    width: 100%
}

.screen-video a img {
    width: 70%
}

.screen-video .play-btn {
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 99;
    max-width: 95px;
    cursor: pointer;
}

.screen-video.center .play-btn {
    top: 42%
}

.embedded-video.play .play-btn {
    display: none;
}

#myModal .modal-body {
    padding: 0;
}

button.close {
    position: absolute;
    background: #000;
    opacity: 1;
    color: #fff;
    width: 30px;
    z-index: 9;
    right: 0;
}

#myModal .modal-content {
    background-color: #000;
}

.webinar-about .screen-video .play-btn {
    top: 50%;
    max-width: 70px;
}

.webinar-about p {
    font-weight: 600;
    color: #2a2a2a;
    line-height: 30px;
    margin-top: 15px;
}

.portfolio-item.webinar-box {
    min-height: 277px;
}

.portfolio-item.webinar-box h3 {
    line-height: 41px;
    margin-top: 20px;
}

.portfolio-item.webinar-box.middle {
    margin-top: -50px;
}

.embedded-video.large iframe {
    max-width: 968px;
    max-height: 566px;
}

.banner p.text-content {
    font-weight: 600;
    font-size: 19px;
}

.box-animation {
    text-transform: uppercase;
    display: inline-block;
    width: 40em;
}

.box-animation .box-with-text {
    font: 900 660px Montserrat;
    display: block;
    margin: 0 auto;
    background: url(https://web.archive.org/web/20230519063738im_/https://www.systango.com/img/systango-your-specialised-software-studio.jpg) no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: aitf 1s linear 1;
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@-webkit-keyframes aitf {
    0% {
        background-position: -103% 0;
    }

    100% {
        background-position: 100% 50%
    }
}

.clipping-section {
    overflow: hidden;
}

.covered-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    background: #fa8b26;
    transition: all .6s ease-in;
}

.covered-layer.move-out {
    left: 100%
}

.layer-2 {
    background: #87ce3f;
}

.layer-3 {
    background: #12cbde;
}

.layer-4 {
    background: #a284f5;
}

.layer-5 {
    background: #ebc660;
}

.layer-6 {
    background: #6060eb;
}

.layer-7 {
    background: #ef846c;
}

.layer-8 {
    background: #b89e4f;
}

.demo-3 .clipping-section.hidden {
    transform: scale3d(0, 0, 0);
    transition: all .3s ease-out;
}

.demo-3 .clipping-section {
    transform: scale3d(1, 1, 1);
    transform-origin: center center;
    transition: all .5s ease-out;
}

.demo-4 .clipping-section.hidden {
    opacity: 0;
    transition: all .3s ease-out;
}

.demo-4 .clipping-section {
    opacity: 1;
    transition: all .5s ease-out;
}

.slidenav ul.navlinks[data-nav-for=about] {
    margin-top: -235px;
}

.slidenav ul.navlinks[data-nav-for=blog] {
    top: 76%
}

p.trusted-text {
    color: #2a2a2a;
    font-size: 20px;
}

.upcoming-box {
    width: 100%;
    background: #2a2a2a;
    padding: 20px 30px;
}

.upcoming-box h2,
.upcoming-box p {
    color: #fff;
}

.upcoming-box p {
    font-size: 21px;
}

.upcoming-box .black-btn.custom-theme {
    background: var(--webinar-color);
    max-width: 100%;
    font-size: 20px;
    letter-spacing: 1px;
    padding-left: 7px;
    padding-right: 11px;
    margin-right: 0;
}

.upcoming-box .black-btn.custom-theme img {
    margin-top: 6px;
}

.single-post .content:not(.recent-blog) h1 {
    font-family: "Century Gothic";
    color: #292b2c;
}

.group-blog .es_shortcode_form .es_lablebox {
    display: none;
}

.group-blog .es_shortcode_form {
    margin: auto;
    max-width: 550px;
    display: flex;
}

.group-blog .es_shortcode_form .es_textbox {
    width: 75%
}

.group-blog .es_shortcode_form .es_textbox input {
    padding: 10px;
    width: 100%;
    height: 60px;
    font-size: 19px;
    padding-left: 20px;
    color: #2a2a2a;
}

.group-blog .es_shortcode_form .es_textbox input:active,
.group-blog .es_shortcode_form .es_textbox input:focus,
.group-blog .es_shortcode_form .es_textbox input:hover {
    outline: 0;
}

.group-blog .es_shortcode_form .es_button {
    padding: 0;
    width: 25%
}

#form-subscription-success h3 {
    margin-bottom: 2px;
}

#form-subscription-success p {
    font-size: 29px;
    line-height: 37px;
    margin: 0;
}

#form-subscription-success h6 {
    color: var(--python-color);
    font-weight: 600;
    font-size: 40px;
    letter-spacing: 2px;
}

.custom-table .table thead th {
    background: #2a2a2a;
    color: #fff;
    border-right: 2px solid #f2f2f2;
}

.custom-table .table tbody td,
.custom-table .table thead th {
    padding: 1.2rem 1.5rem;
}

.custom-table .table tbody td {
    color: grey;
    background: #fff;
    border-bottom: 2px solid #f2f2f2;
    border-right: 2px solid #f2f2f2;
    border-top: 0 !important;
}

.custom-table .table tbody td a {
    color: grey;
    font-weight: 600;
}

.textual-content .list-style-unique {
    padding-left: 20px;
}

.textual-content .list-style-unique li {
    color: #000;
    list-style-type: disc;
    padding-left: 0;
}

.textual-content .list-style-unique li:before {
    display: none;
}

.uiux-box {
    position: relative;
    padding: 30px 0;
}

.uiux-box:before {
    content: "";
    left: 0;
    top: 0;
    bottom: 0;
    background: #fff;
    right: 31%;
    position: absolute;
}

.uiux-box li {
    color: #000;
    font-weight: 600;
    border-bottom: 1px solid var(--uiux-color);
    padding: 7px 0;
}

.uiux-box li:last-child {
    border-bottom: 0;
}

.uiux-box.box-right:before {
    left: 31%;
    right: 0;
}

.footer-contact-section>div {
    transition: all .1s ease-in;
}

.footer-contact-section .contact-click {
    display: flex;
    min-height: 265px;
    justify-content: center;
    align-items: center;
}

.footer-contact-section .contact-click span {
    font-size: 60px;
    font-family: "Playfair Display", serif;
    color: #fff;
    font-weight: 600;
}

.footer-contact-section .contact-click span>span {
    display: inline-block;
    transition: all .1s ease-in;
}

.footer-contact-section .contact-click span img {
    max-width: 45px;
    opacity: 0;
    transform: translateX(-10px);
    transition: all .1s ease-in;
}

.footer-contact-section:hover>div {
    background: #2a2a2a !important;
}

.footer-contact-section:hover .contact-click span img {
    opacity: 1;
    transform: translateX(0);
}

.footer-contact-section:hover .contact-click span>span {
    transform: translateX(-10px);
}

.content.privacy-content li,
.content.privacy-content p {
    font-size: 16px;
    line-height: 23px;
    letter-spacing: .6px;
    color: grey !important;
    margin-bottom: 15px;
}

.slidenav ul.navlinks[data-nav-for=contact] {
    top: 89%
}

.spacer20 {
    min-height: 20px;
}

.desktop-menu {
    width: 100%
}

.desktop-menu__list {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
}

.desktop-menu__list-item:not(:first-child) {
    margin-left: 45px;
}

.desktop-menu__list-item-link {
    display: block;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.5;
    padding: 6px 5px;
    color: var(--white, #fff);
    position: relative;
    transition: color 10ms linear;
    letter-spacing: 1px;
}

.desktop-menu__list-item-link:focus {
    color: var(--white, #fff);
}

.desktop-menu__list-item-link:hover,
.desktop-menu__list-item.selected .desktop-menu__list-item-link {
    color: #2a2a2a;
    transition: color 20ms ease-in;
}

.desktop-menu__list-item-link:after {
    content: "";
    position: absolute;
    bottom: -3px;
    width: 0;
    height: 3px;
    transform: scale(0) translateX(-50%);
    left: 50%;
    background: #2a2a2a;
}

.desktop-menu__list-item-link:hover::after,
.desktop-menu__list-item.selected .desktop-menu__list-item-link::after {
    width: 20px;
    transform: scale(1) translateX(-50%);
    transition: all .35s cubic-bezier(.77, 0, .175, 1);
}

header.inner .desktop-menu__list-item-link {
    color: #2a2a2a;
    /* font-family: Muli, sans-serif; */
}

.desktop-menu__list-item-link {
    /* font-family: Muli, sans-serif; */
}

.contactus-form form textarea.small-career {
    height: 171px;
}

.career-custom-row {
    display: flex;
    width: 100%;
    justify-content: space-evenly;
    align-items: center;
}

.career-logo {
    min-width: 140px;
    max-width: 140px;
    height: auto;
}

.career-logo img {
    max-width: 100%;
    height: auto;
}

.pagepiling-slider__slide {
    min-height: 100vh;
    max-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.slide-1 {
    background-color: #fa8b26;
}

/* .slide-2 {
    background-color: #87ce3f;
} */
.slide-3 {
    background-color: #12cbde;
}

.slide-4 {
    background-color: #a284f5;
}

.slide-5 {
    background-color: #ebc660;
}

.slide-6 {
    background-color: #6060eb;
}

.slide-7 {
    background-color: #ef846c;
}

.slide-8 {
    background-color: #b89e4f;
}

.slide-8 .vertical-center {
    margin-top: 35px;
}

.slide-2 h2.heading-copy {
    /* font-size: 55px !important; */
}

input:-internal-autofill-selected {
    background: 0 0 !important;
}

.home-page-navigation {
    position: fixed;
    left: 20px;
    max-width: 200px;
    top: 58%;
    transform: translateY(-50%);
    z-index: 90;
}

.home-page-navigation li {
    height: 60px;
    transition: all .1s ease-in-out;
}

.home-page-navigation a {
    font-size: 17px;
    line-height: 12px;
    color: #fff;
    font-weight: 600;
    display: block;
    position: relative;
}

.home-page-navigation a .nav-line {
    display: block;
    width: 40px;
    height: 1px;
    background: #fff;
    transition: all .1s ease-in-out;
}

.home-page-navigation a .nav-text {
    visibility: hidden;
    display: block;
    font-family: Montserrat, sans-serif;
    font-weight: 800;
    transition: all .1s ease-in-out;
}

.home-page-navigation li:hover {
    transition: all .3s ease-in-out;
}

.home-page-navigation li.active a .nav-text,
.home-page-navigation li:hover a .nav-text {
    visibility: visible;
    transform: translateY(8px);
    transition: all .3s ease-in-out;
}

.home-page-navigation li.active a .nav-line,
.home-page-navigation li:hover a .nav-line {
    width: 55px;
    height: 3px;
    transition: all .3s ease-in-out;
    background-color: #2a2a2a;
}

.home-page-navigation li.active {
    margin-bottom: 30px;
    transition: all .3s ease-in-out;
    height: 35px !important;
}

.home-page-navigation li .sub-text {
    font-size: 11px;
    font-weight: 100;
    display: block;
    line-height: 16px;
    visibility: hidden;
    position: relative;
    top: 10px;
}

.home-page-navigation li.active .sub-text,
.home-page-navigation li:hover .sub-text {
    visibility: visible;
    color: #2a2a2a;
}

.home-page-navigation li.active a .nav-text {
    font-size: 48px;
    transform: translateY(18px);
}

.typewrite {
    margin-right: 25px;
}

.typewrite .wrap {
    position: relative;
}

.typewrite .wrap:after {
    content: "";
    position: absolute;
    width: 25px;
    height: 7px;
    background: #fff;
    right: -25px;
    bottom: 11px;
    animation: heartbeat 1s infinite;
}

.fw-600 .typewrite .wrap:after {
    content: "";
    position: absolute;
    width: 15px;
    height: 5px;
    background: #fff;
    right: -25px;
    bottom: 0;
    animation: heartbeat 1s infinite;
}

@keyframes heartbeat {
    0% {
        opacity: .75;
    }

    20% {
        opacity: 1;
    }

    40% {
        opacity: 0;
    }

    50% {
        opacity: .75;
    }

    60% {
        opacity: 1;
    }

    70% {
        opacity: 0;
    }

    80% {
        opacity: .75;
    }

    100% {
        opacity: .75;
    }
}

.muli-family {
    font-family: Muli, sans-serif !important;
}

.apd-banner .service-content h1 {
    font-size: 28px;
    font-weight: 600;
}

.apd-banner .service-content h1 span {
    display: block;
    font-size: 50px;
    font-weight: 800;
}

.apd-banner .service-content p {
    font-family: Muli, sans-serif !important;
    color: #75757a;
    line-height: 27px;
    font-size: 16px !important;
}

.colored-full-width .icon-circle {
    width: 74px;
    height: 74px;
    margin-bottom: 30px;
}

.colored-full-width h6 {
    font-weight: 700;
    font-size: 17px;
    line-height: 22px;
    color: #fff;
}

.colored-full-width p {
    font-family: Muli, sans-serif !important;
    font-size: 16px;
    line-height: 25px;
    color: #fff;
    margin-top: 20px;
}

.black-btn.filled-btn {
    background: #212126;
    color: #fff;
    font-size: 16px;
    line-height: 30px;
}

.black-btn.filled-btn:hover {
    transition: all .2s ease-in;
    background: 0 0;
    color: #212126;
}

.black-btn.filled-btn svg {
    max-width: 22px;
    max-height: 11px;
    margin-left: 5px;
    fill: #fff;
    transition: all .1s ease-in-out;
}

.black-btn.filled-btn:hover svg {
    fill: #212126 !important;
    transform: translateX(10px);
    transition: all .2s ease-in;
}

.alternate-section.banner h3 {
    font-size: 41px;
    line-height: 50px;
    margin-bottom: 10px;
}

.alternate-section p {
    font-size: 16px;
    line-height: 26px;
}

.alternate-section a.tag {
    letter-spacing: .4px;
    white-space: initial;
    padding: 4px 20px;
}

.alternate-section a.tag:last-child {
    margin-right: 0;
}

.alternate-section .bordered-box {
    min-height: 230px;
    max-height: 230px;
    border: 2px solid #f2f2f2;
}

.alternate-section .bordered-box .hovered-box {
    padding: 0 30px;
    position: relative;
    transition: all .1s ease-in;
}

.alternate-section .bordered-box .hovered-box h2 {
    font-size: 26px;
    line-height: 32px;
    text-align: center;
    color: #fff;
    font-weight: 700;
}

.alternate-section .bordered-box:hover .hovered-box {
    background: #f2f2f2;
    transition: all .2s ease-in;
    transform: translate(-20px, -20px);
}

.alternate-section .bordered-box:hover .hovered-box h2 {
    color: var(--carribean-green);
    transition: all .1s ease-in;
}

.alternate-section .bordered-box .hovered-box .black-btn.filled-btn {
    position: absolute;
    right: 0;
    bottom: 0;
    margin: 0;
}

.alternate-section .bordered-box .hovered-box .black-btn.filled-btn svg {
    max-width: 32px;
    max-height: 15px;
    margin-left: 0;
}

.alternate-section .bordered-box .hovered-box .black-btn.filled-btn:hover svg {
    transform: none;
}

.home-testimonials {
    max-width: 100%;
    padding-top: 20px;
}

.home-testimonials .client-say {
    position: relative;
    padding-left: 40px;
    font-size: 16px!important;
    margin-top: 10px;
}
.home-testimonials p.client-say {
     font-size: 14px!important;
    line-height: 20px!important;
}

.quotes {
    display: block;
    width: 20px;
    height: 20px;
    background: url(https://web.archive.org/web/20230519063738im_/https://www.systango.com/img/white-commas.png);
    position: absolute;
    left: 0;
    top: 0;
    background-size: contain;
    background-repeat: no-repeat;
}

.quotes2 {
    display: block;
    width: 20px;
    height: 20px;
    background: url(https://web.archive.org/web/20230519063738im_/https://www.systango.com/img/white-commas-end.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
    top: 7px;
    left: 10px;
}

.home-testimonials .apd-client-detail {
    padding-left: 40px;
}

.fw-600 span {
    font-weight: 700;
    font-size: 20px;
}

.d-sm-blocks {
    display: none;
    max-width: 290px !important;
}

.single-testimonial {
    display: none;
}

.section h2.heading-copy.contactFold {
    margin-bottom: 20px;
}

#hide,
#txt,
#txt1,
#txt2,
#txt3 {
    font: inherit;
    margin: 0;
    padding: 0;
}

#txt,
#txt1,
#txt2,
#txt3 {
    border: none;
    min-width: 10px;
    background-color: transparent;
    border-bottom: 1px solid;
}

.w-210 {
    width: 210px;
}

#hide {
    display: none;
    white-space: pre;
}

.flex-items {
    display: block;
    width: 50%;
    position: relative;
    color: #fff;
}

input#txt,
input#txt1,
input#txt2,
input#txt3 {
    color: #000;
    border-color: #fff;
    font-weight: 600;
    letter-spacing: .05rem;
}

input#txt::placeholder,
input#txt1::placeholder,
input#txt2::placeholder,
input#txt3::placeholder {
    color: rgba(255, 255, 255, .35);
    padding-left: 10px; 
    font-weight: 700 !important;
}

.mbr-30 {
    margin-right: -30px;
}

.txt-white {
    color: #fff;
}

.contact-form-container p {
    margin-bottom: 10px;
    line-height: 33px;
}

.contact-slide input::placeholder {
    color: #fff;
}

.m-active {
    display: none !important;
}

.number_in {
    width: 60%
}

input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

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

footer .footer-navigation ul.quickLinks {
    display: flex;
    padding-right: 0;
    margin-top: 10px;
    justify-content: space-between;
    flex-wrap: wrap;
}

footer .footer-navigation ul.quickLinks>li>a {
    font-size: .91em;
}

ul.quickLinks:after {
    content: "";
    display: block;
    clear: both;
}

ul.quickLinks>li {
    width: 33.33%;
    float: left;
    line-height: 22px;
    padding-right: 30px;
}

@media (max-width:991px) {
    ul.quickLinks>li {
        margin-bottom: 30px;
    }
}

ul.quickLinks>li .sublinks {
    display: block;
    padding-right: 0;
    margin-top: 10px;
}

ul.quickLinks>li .sublinks>li a {
    font-size: 14px;
    color: grey;
    font-weight: 100;
    line-height: 23px;
}

ul.quickLinks>li .sublinks>li {
    line-height: .8em;
}

.myPagination a.pagenumbers {
    margin-left: 0 !important;
}

.myPagination {
    bottom: -116px;
    display: flex;
    justify-content: center;
}

.myPagination li.nav-links a.pagenumbers.active {
    background: #fff;
    color: #2a2a2a;
    font-weight: 600;
}

.postion-relative {
    position: relative;
}

.myPagination a.nextpage,
.myPagination a.previous {
    border: 1px solid #b0b0b0;
    font-size: 12px;
    line-height: 1;
}

.myPagination a.nextpage img,
.myPagination a.previous img {
    max-width: 100%
}

.myPagination .nav-links a,
.myPagination .nav-links>span,
.myPagination li {
    display: inline-flex;
    max-width: 50px;
    width: 100%;
    height: 50px;
    align-items: center;
    justify-content: center;
    color: #b0b0b0;
    margin-left: 10px;
    transition: all .2s ease-in;
}

.myPagination .nav-links,
.myPagination ul {
    flex-direction: row;
    width: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
}

.myPagination .nav-links a.next,
.myPagination .nav-links a.prev,
.myPagination li.next,
.myPagination li.prev {
    max-width: 58px;
    border: 1px solid #b0b0b0;
}

.myPagination .nav-links span.current,
.myPagination li.active,
.myPagination li:hover {
    background-color: #fff;
    font-weight: 700;
}

.myPagination .nav-links span.current,
.myPagination li.active,
.myPagination li:hover {
    background-color: #fff;
    font-weight: 700;
}

.myPagination .nav-links a:hover,
.myPagination .nav-links span.current,
.myPagination li.active a,
.myPagination li:hover a {
    color: #2a2a2a;
}

.myPagination .nav-links a.next,
.myPagination li.next {
    margin-left: 0;
}

.myPagination li a {
    width: 100%;
    text-align: center;
    color: #b0b0b0;
    transition: all .2s ease-in;
}

nav.blog_pagination.navigation.pagination {
    position: relative;
    bottom: auto;
}

.pagination.blog_pagination .nav-links .current {
    color: #2a2a2a;
    background-color: #fff;
    font-weight: 700;
}

.blog-item-image img {
    min-height: 230px;
    object-fit: cover;
}

.blog-pages h1 {
    font-size: 32px !important;
    line-height: 40px;
}

.blog-pages h2 {
    font-size: 28px !important;
    line-height: 40px;
}

.blog-pages h3 {
    font-size: 24px !important;
    line-height: 40px;
}

.blog-pages h4 {
    font-size: 22px !important;
    line-height: 40px;
}

.mobAdSystango ul li {
    text-align: left;
}

.search-panel input[type=search] {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #292b2c;
    font-family: "Century Gothic"
}

.search-panel input[type=submit] {
    background-color: #000;
}

.ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front {
    max-width: 350px;
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
}

.buzz-quote {
    background: rgba(250, 139, 38, .08);
}

body.blog.inner-page.group-blog {
    background: #fff !important;
}

.buzz-quote {
    padding: 55px 100px;
}

.buzz-quote h2 {
    font-size: 40px;
    line-height: 53px;
    color: #202333 !important;
    font-family: "Playfair Display"
}

.buzz-quote .black-btn.custom-theme {
    background: var(--python-color);
}

.buzz-quote .black-btn.custom-theme:hover {
    background: #ccc;
    color: var(--python-color);
}

.buzz-quote .black-btn.custom-theme.brown2-btn {
    background: var(--brown2-bgcolor);
}

.buzz-quote .black-btn.custom-theme.brown2-btn:hover {
    background: #ccc;
    color: var(--brown2-bgcolor);
}

.group-blog .es_shortcode_form .es_textbox input {
    padding: 10px;
    width: 100%;
    height: 60px;
    font-size: 19px;
    padding-left: 20px;
    color: #2a2a2a;
    border: 0;
}

.group-blog .es_shortcode_form .es_textbox input:active,
.group-blog .es_shortcode_form .es_textbox input:focus,
.group-blog .es_shortcode_form .es_textbox input:hover {
    outline: 0;
}

.group-blog .es_shortcode_form input[type=submit] {
    background: #fa8b26;
    border: #fa8b26;
    text-transform: uppercase;
    font-weight: 600;
    width: 100%;
    height: 60px;
    transition: all .2s ease-in;
}

.group-blog .es_shortcode_form input[type=submit]:active,
.group-blog .es_shortcode_form input[type=submit]:focus,
.group-blog .es_shortcode_form input[type=submit]:hover {
    background: #fff;
    border: 1px solid #fa8b26 !important;
    color: #fa8b26;
}

.group-blog .es_shortcode_form .es_textbox input::-webkit-input-placeholder {
    color: rgba(32, 35, 51, .3) !important;
}

.group-blog .es_shortcode_form .es_textbox input::-moz-placeholder {
    color: rgba(32, 35, 51, .3) !important;
}

.group-blog .es_shortcode_form .es_textbox input:-ms-input-placeholder {
    color: rgba(32, 35, 51, .3) !important;
}

.group-blog .es_shortcode_form .es_textbox input:-moz-placeholder {
    color: rgba(32, 35, 51, .3) !important;
}

.search-panel span.screen-reader-text {
    display: none;
}

.search-panel input[type=search].search-field {
    background: rgba(242, 242, 242, .08) !important;
    border: 1px solid rgba(32, 35, 51, .1) !important;
    height: 40px;
    padding: 0 36px 0 15px;
    width: 100%
}

.search_btn {
    background: rgba(242, 242, 242, .08) !important;
    border: 0;
    height: 40px;
    padding: 0;
    border-left: 0 !important;
    margin-left: 0;
    position: absolute;
    right: 10px;
    z-index: 10;
    cursor: pointer;
}

.search-form label {
    max-width: 300px;
    width: 100%;
    position: relative;
}

.menu-item>a {
    line-height: 40px;
}

.submenu {
    width: 100vw;
    position: absolute;
    left: 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    padding: 0 30px;
    background: #fff;
    border-top: 1px solid rgba(250, 139, 38, .35);
}

.submenu-item {
    padding: 0 15px;
    position: relative;
    z-index: 10;
}

.submenu-top {
    display: flex;
    justify-content: space-around;
}

.submenu-bottom {
    display: flex;
}

.submenu-bottom-item {
    flex: 1;
}

.submenu-top li {
    padding-left: 0;
}

.submenu a {
    color: #202333;
    font-size: 14px;
    line-height: 30px;
}

.submenu a:focus,
.submenu a:hover {
    color: #202333;
}

.home .desktop-menu__list-item:hover .desktop-menu__list-item-link {
    color: #fff;
}
.desktop-menu__list-item .desktop-menu__list-item-link.active {
    color: #00b894;
}

.dropdown li a.active {
    color: #00b894;
}



.submenu-top-item {
    max-width: 33.333%
}

.submenu .submenu-title {
    font-weight: 700;
    color: #483d8b;
}

.submenu .submenu-title:hover {
    text-decoration: none;
}

.submenu-bottom,
.submenu-list {
    margin-top: 10px;
}

.thumb-list .submenu-list>li {
    display: flex;
    align-items: center;
}

.submenu-thumbnail {
    margin-right: 10px;
}

.desc-list .submenu-list>li {
    display: flex;
    flex-direction: column;
}

.submenu-desc {
    margin-top: 10px;
    color: #555;
}

.submenu-icon {
    width: 32px;
}

.submenu-bottom-title {
    padding-left: 10px;
}

.submenu-bottom figcaption {
    margin-top: 5px;
    font-weight: 700;
}

.submenu-bottom a:hover {
    text-decoration: none;
}

.submenu {
    display: none;
    transform: translateY(-2em);
    z-index: -1;
    transition: all .3s ease-in-out 0s, visibility 0s linear .3s, z-index 0s linear 10ms;
    opacity: 0;
    background: #fff;
}

.menu-item:hover .submenu {
    display: flex;
    opacity: 1;
    z-index: 10;
    height: calc(100vh - 70px);
    transform: translateY(0);
    transition-delay: 0s, 0s, .3s;
    box-shadow: 5px 0 5px 4px rgba(0, 0, 0, .07);
}

ul.submenu:after {
    background: linear-gradient(to right, rgba(250, 139, 38, .1) 0, rgba(250, 139, 38, .1) 22.3%, #fff 22.3%, #fff 100%);
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    content: "";
    z-index: 1;
    top: 0;
}

.submenu-item ul.row {
    align-items: center;
}

.submenu a {
    font-family: Muli, sans-serif !important;
}

.listWithIcon>li.col-md-12 {
    padding: 10px 0;
    border-bottom: 1px solid rgba(250, 139, 38, .35);
}

.listWithIcon>li.col-md-12:last-child {
    border-bottom: 0;
}

.inner-sublist li.col-md-4 {
    line-height: 32px;
}

.iconText a {
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
}

.menuIcon {
    margin-right: 10px;
}

.desktop-menu__list-item:hover .desktop-menu__list-item-link {
    color: #fa8b26;
}

.desktop-menu__list-item-link {
    display: flex;
    align-items: center;
}

i.menu-icon.fas.fa-angle-down:before {
    content: none;
}

@media screen and (max-width:1280px) {
    .listWithIcon>li.col-md-12 {
        padding: 5px 0;
    }
}

.short-disc header.entry-header {
    position: inherit;
}

.archive .page-header {
    position: inherit;
    padding-left: 0 !important;
}

.short-disc .entry-header .entry-title {
    font-size: 1.5rem !important;
}

.archive .page-header .page-title {
    color: #2a2a2a;
    font-size: 32px !important;
}

.short-disc footer.entry-footer {
    margin-bottom: 20px;
    padding: 8px 20px 8px 0;
}

@media screen and (min-width:320px) and (max-width:767px) {
    .alignHeight img {
        height: 39px;
    }

    footer .footer-contacts {
        padding: 20px 0 0 0 !important;
        margin-top: 10px !important;
    }

    footer .footer-copyright {
        padding: 15px 0 !important;
    }

    .footer-copyright.padleft {
        padding: 20px 0 !important;
    }

    .slidenav .navlinks li:hover {
        padding-left: 0 !important;
    }

    .slidenav .navlinks li a {
        display: flex;
        align-items: center;
    }

    li.menu-item.link-mask-wrap.custom-dropdown {
        height: auto;
    }

    .mega-menu-section {
        position: fixed;
        left: 0;
        right: auto;
        top: 0;
        z-index: 1000;
        background: #fff;
        width: 100%;
        bottom: 0;
        padding: 0 15px;
        transition: all .2s ease-in-out;
        overflow-y: auto;
    }

    .link-site,
    .mega-menu-section .btn.btn-link {
        font-family: Muli, sans-serif !important;
        padding: 20px 0;
        border: 0 !important;
        text-transform: capitalize;
        color: #202333;
        font-size: 13px;
        line-height: 16px;
        font-weight: 700;
        align-items: center;
        width: 100%;
        justify-content: space-between;
        display: flex;
        margin: 0 -15px;
    }

    .mega-menu-section .btn.btn-link:focus,
    .mega-menu-section .btn.btn-link:hover {
        text-decoration: none !important;
        background-color: transparent !important;
    }

    .mega-menu-section .card-header {
        background: 0 0;
        padding: 0;
        border: 0;
        border-top: .75px solid rgba(250, 139, 38, .25);
        border-radius: 0 !important;
    }

    .tab-heading-link {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 20px 0;
        color: #fa8b26;
    }

    .tab-heading-link a {
        color: #fa8b26;
        font-weight: 700;
        font-size: 22px;
        line-height: 29px;
        font-family: "Playfair Display", serif !important;
    }

    .mega-menu-section .card {
        border: 0 !important;
        border-radius: 0;
    }

    .mega-menu-section .card-header:first-child {
        border-radius: 0 !important;
    }

    .mega-menu-section .card-header h5 {
        display: flex;
        justify-content: space-evenly;
        flex-direction: row;
    }

    .down_collapse.collapsed img {
        transform: rotate(180deg);
    }

    .mega-menu-section .card-body ul {
        display: flex;
        flex-direction: column;
        padding-left: 30px;
        margin: 10px 0;
    }

    .mega-menu-section .card-body ul li a {
        font-weight: 400;
        font-size: 12px;
        line-height: 28px;
        color: #202333;
        opacity: .86;
    }

    .btn.btn-link.down_collapse {
        position: relative;
    }

    .btn.btn-link.down_collapse:before {
        content: "";
        background: rgba(250, 139, 38, .08);
        position: absolute;
        height: 100%;
        bottom: 0;
        left: -100%;
        right: -15px;
    }

    .btn.btn-link.down_collapse.collapsed:before {
        content: none;
    }

    .btn.btn-link.down_collapse.collapsed {
        background-color: transparent;
    }

    .link-padd {
        padding-left: 0 !important;
    }

    i.menu-icon.fas.fa-angle-down {
        opacity: .7;
    }

    .slidenav .navlinks li a {
        color: grey !important;
    }

    a.link-site {
        padding: 20px 15px;
        width: 120%
    }

    .menuIcon img {
        transform: none !important;
        margin-right: 10px;
    }

    .mega-menu-section .card-body li.col-md-4 {
        padding-left: 0;
    }

    .slidenav .navlinks li {
        height: 65px !important;
    }

    .mega-menu-section .card-body ul li a:focus,
    .mega-menu-section .card-body ul li a:hover {
        background: 0 0 !important;
        color: #202333 !important;
        opacity: .86 !important;
    }
}

@media (max-width:800px) {
    .mobile-banner-content h1 {
        letter-spacing: 0;
    }
}

footer .footer-copyright.padleft {
    padding-left: 20px;
    border-top: 0 solid #000;
}

.pl-0 {
    padding-left: 0;
}

.col-md-5.offset-md-1.pl-0 {
    margin-left: 7%
}

.mega-menu-section .collapse.in {
    display: block;
}

.all_things {
    margin: 0;
}

.all_things .links a {
    color: #fff !important;
    height: 42px;
}

.all_things .links a {
    color: #fff !important;
    height: 42px;
    background: rgba(255, 255, 255, .12);
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    font-size: 16px;
    font-weight: 600;
    padding: 0 18px;
    font-family: Muli, sans-serif !important;
}

.mtop20.mt-custom {
    margin-top: 15px !important;
}

.marginBt-10 {
    margin-bottom: 10px;
}

.slide-captcha {
    width: 100%;
    height: 50px;
    margin: 0 auto;
    background: #fefefe;
    box-shadow: inset 0 0 20px #d0d0d8;
    border-radius: 15px;
    overflow: hidden;
    position: relative;
}

.slide-text {
    position: absolute;
    left: 115px;
    padding-top: 14px;
    color: #2c3e50;
    font-size: 14px;
}

.home .slide-text {
    left: 101px !important;
}

.slide-block,
.slide-target {
    width: 25%;
    height: 50px;
}

.slide-block {
    width: 105px;
    height: 50px;
    background: #212126;
    border-radius: 15px;
    padding: 15px;
    text-align: center;
    box-sizing: border-box;
    box-shadow: inset 0 0 20px #27303c;
    cursor: pointer;
    transition: #212126 .5s ease, inset 0 0 20px #27303c .5s ease;
    color: #fff !important;
}

.slide-block img {
    width: 22px;
}

.slide-block.processing {
    background: #212126;
    box-shadow: inset 0 0 20px #27303c;
}

.slide-block.done {
    background: #212126;
    box-shadow: inset 0 0 20px #27303c;
}

.slide-target {
    position: absolute;
    right: 0;
    top: 0;
}

.nomargin {
    margin: 0 !important;
}

.mobCapHeight input {
    height: 50px;
}

.all_things .links a img {
    margin-left: 10px;
    margin-top: 4px;
}

.slide-6 .vertical-center h2 {
    margin-bottom: 0;
}

#contactPopup .fileUpload {
    display: flex;
    flex-direction: column;
    align-items: unset !important;
    justify-content: unset !important;
    margin-top: 20px;
    overflow: hidden;
    max-width: 190px;
    width: 100%;
    cursor: pointer;
}

#contactPopup .captchaBox {
    display: flex;
    flex-direction: row;
    align-items: center;
}

#contactPopup .captchaBox .recaptcha-box {
    margin-top: 0 !important;
}

#contact-navigation .form-contact h2.heading-copy .dot:before {
    background: #fff !important;
}

h2.heading-copy {
    position: relative;
}

.evident-main {
    padding-bottom: 0 !important;
}

.input-cover.manage_flex {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    margin: 10px 0 20px;
}

@media screen and (min-width:320px) and (max-width:767px) {
    .social-navigation {
        display: none;
    }

    ;

    .all_things .links a img {
        max-width: 100% !important;
        width: auto !important;
    }

    .input-cover.manage_flex {
        flex-direction: column;
        justify-content: center !important;
        align-items: center;
    }

    #contactPopup .recaptcha-box {
        margin-bottom: 20px !important;
    }

    .mobCapHeight {
        margin-bottom: 15px !important;
    }
}

.inner-page header {
    height: 85px !important;
    padding-top: 0 !important;
}

header.inner img {
    margin-top: 10px;
}

.desktop-menu__nav .desktop-menu__list>li:nth-child(2) {
    margin-left: 0;
    padding-left: 45px;
}

.group-blog section.content.pad-80 {
    padding-top: 0 !important;
}

.inner-banner {
    margin-top: -30px;
}

.kiwi-article-bar {
    display: none;
}

.single-post .content ul li {
    list-style: disc;
}

span.menuIcon img {
    height: 24px;
}

.input-cover.manage_flex {
    align-items: center;
}

.menu-item:hover .submenu {
    overflow-y: auto;
}

.submenu-item {
    background: linear-gradient(to right, rgba(250, 139, 38, .1) 0, rgba(250, 139, 38, .1) 22.3%, #fff 22.3%, #fff 100%);
    padding: 0 45px !important;
}

.submenu {
    padding: 0 !important;
}

ul.submenu:after {
    content: none !important;
}

.title-footer-2 {
    font-size: 20px;
    margin-bottom: 20px !important;
    text-align: center;
    color: #fff;
    font-weight: 800 !important;
    font-family: var(--global-font) !important;
}

.align-items-stretch .left-border p {
    font-size: 14px !important;
    color: #fff !important;
    font-weight: 400;
    line-height: 20px;
}

.col-md-2.left-border.footer-locations {
    padding-right: 0;
}

.footer-contacts a {
    color: #fff;
}

/* ul.quickLinks>li {
    width: 25%!important;
} */
footer {
    background: url(https://web.archive.org/web/20230519063738im_/https://www.systango.com/img/footer/Frame.svg);
    background-position: center;
    background-repeat: no-repeat;
    min-height: 568px;
    align-items: center;
    display: flex;
}

ul.quickLinks>li .sublinks>li a {
    font-size: 14px !important;
    color: #fff !important;
    font-weight: 400;
    line-height: 20px;
    font-family: var(--global-font) !important;
}

@media(min-width: 576px) {
    .footer-locations h5.title-footer-2 {
        text-align: center !important;
    }
    .footer-locations.row p {
        margin-bottom: 0;
    }
    .footer-locations.row p, footer .footer-locations h5 {
        text-align: left !important;
    }
    .footer-locations .text-center {
        display: flex;
        align-items: flex-end;
        text-align: left !important;
        gap: 14px;
    }
}
footer .footer-locations h5 {
    color: #fff !important;
    font-family: ui-sans-serif;
}

.alignHeight {
    height: 100% !important;
}

.alignHeight img {
    margin-bottom: 25px;
}

.quickLinks a {
    color: #fff !important;
    font-size: 16px !important;
    font-family: var(--global-font) !important;
}



.footer-contacts.footer-copyright.padleft ul li {
    width: 33%;
    text-align: center;
    margin-right: 0 !important;
}

.footer-contacts.footer-copyright.padleft ul li a {
    display: block;
    width: 100%
}

.footer-contacts.footer-copyright.padleft ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.footer-contacts.footer-copyright.padleft {
    padding-top: 0;
    margin-top: 0;
}

.col-md-2.left-border.footer-locations .footer-contacts {
    margin-top: 0;
}

.col-md-2.left-border.footer-locations h5,
.footer-contacts.footer-copyright.padleft h5 {
    margin-bottom: 26px;
    text-align: center;
    font-weight: 600;
}

.footer-locations.row p {
    font-size: 12px !important;
    letter-spacing: 0.5px;
    line-height: 1.4;
}
@media screen and (min-width:1200px) and (max-width:1280px) {
    .footer-locations.row p {
        font-size: 9px !important;
    }
}

.footer-copyright-bg {
    background: #161616;
}

.footer-copyright-bg li,
.footer-copyright-bg li a {
    color: #fff;
    font-size: 14px;
    margin: 0 auto;
}

.footer-copyright-bg li a:hover,
.footer-copyright-bg li a:focus {
    color: #f5821f !important;
}

.footer-copyright-bg ul {
    margin: 5px auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 600px;
}

div#contact-navigation .contactus-btn {
    display: none;
}

.col-md-2.left-border.footer-locations a {
    margin-bottom: 10px;
    display: block;
    text-align: center;
}

.margin0 {
    margin: 0 !important;
}

.marginNew {
    margin: 8px 0;
}

li.managePP,
ul.quickLinks li.managePP {
    padding-left: 30px !important;
}

.padding-manage {
    padding: 0 !important;
}

@media screen and (min-width:320px) and (max-width:991px) {

    footer .footer-copyright-bg li:first-child {
        width: 100% !important;
    }

    footer {
        padding-top: 40px;
    }

    footer .title-footer-2 {
        margin-bottom: 0 !important;
    }

    li.managePP,
    ul.quickLinks li.managePP {
        padding-left: 0 !important;
        text-align: center;
    }

    ul.sublinks {
        margin-top: 0 !important;
    }

    footer .footer-locations {
        padding-top: 0;
    }

    .footer-copyright-bg li,
    .footer-copyright-bg li a {
        margin: 0 5px;
    }

    .footer-copyright-bg ul {
        flex-wrap: wrap;
        justify-content: center !important;
    }

    .col-md-7.left-border #footer-locations {
        padding-top: 30px;
    }

    .col-md-7.left-border #footer-locations .title-footer-2 {
        margin-bottom: 20px !important;
    }
}

.alignHeight.innerLink {
    height: auto !important;
    align-items: flex-start !important;
    padding-top: 59px;
}

#contact-link {
    cursor: pointer !important;
    display: none !important;
}

.recognize_logo img {
    height: 110px;
}

ul.list-achivment li {
    width: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
    margin-bottom: 25px;
}

ul.list-achivment {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0 !important;
    width: 100%;
    margin-top: 20px !important;
}

ul.list-achivment li img {
    height: 170px;
}

ul.quickLinks {
    margin-bottom: 22px;
}

.mbRelease {
    margin-bottom: 5px !important;
}

.marginTop3 {
    margin-top: 20px !important;
}

body .heightList {
    height: 67px !important;
}

.heightDivTitle {
    height: 35px;
}

.inner-page footer .footer-locations {
    padding-top: 40px !important;
}

.col-md-3.left-border.footer-locations {
    max-width: 21%;
    flex: 0 0 21%
}

.col-md-2.footer-locations {
    max-width: 21%;
    flex: 0 0 20%
}

h5.title-footer-2.mb-0 {
    margin-bottom: 0 !important;
}

.inner-page ul.quickLinks>li .sublinks>li {
    line-height: .5em !important;
}

.inner-page .footer-locations h5.title-footer-2 {
    margin-bottom: 10px !important;
}

@media (max-width: 1024px) {
    .tabletShowdiv {
        text-align: center;
    }
    .quickLinks li {
        text-align: center;
    }
}

@media screen and (min-width:320px) and (max-width:767px) {
    
    footer .footer-locations h5,
    footer .footer-navigation li {
        width: 100% !important;
        text-align: center;
    }


    .col-md-3.left-border.footer-locations.pr-0,
    .col-md-2.footer-locations {
        max-width: 100% !important;
        flex: 0 0 100% !important;
        border-right: 0 !important;
    }

    .col-md-7.left-border {
        border-right: 0 !important;
    }
}

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

    .col-md-3.left-border.footer-locations.pr-0,
    .col-md-2.footer-locations {
        max-width: 50% !important;
        flex: 0 0 50% !important;
    }

    .col-md-7.left-border {
        max-width: 100%;
        flex: 0 0 100%;
        border-right: 0 !important;
    }
}

.blog .desktop-menu__list-item:hover .desktop-menu__list-item-link {
    color: #fa8b26 !important;
}

button[data-filter=uncategorized] {
    display: none;
}

.heateor_sss_sharing_container {
    text-align: right;
    margin-bottom: 15px;
}

.portfolio .element-item:nth-child(1) a.portfolio-item:hover {
    background: #6060EB !important;
}

.portfolio .element-item:nth-child(2) a.portfolio-item:hover {
    background: #07c28e !important;
}

.portfolio .element-item:nth-child(3) a.portfolio-item:hover {
    background: #6060eb !important;
}

.portfolio .element-item:nth-child(4) a.portfolio-item:hover {
    background: #07c28e !important;
}

.portfolio .element-item:nth-child(5) a.portfolio-item:hover {
    background: #fa8b26 !important;
}

.portfolio .element-item:nth-child(6) a.portfolio-item:hover {
    background: #6060eb !important;
}

footer .footer-locations h6 {
    color: #ffffff !important;
    font-size: 20px;
    text-align: center;
    font-family: "Playfair Display", serif !important;
    font-weight: 800 !important;
}

input.error {
    border-bottom: 1px solid #f00 !important;
}

ul.recognize_logo>li:nth-child(5) img {
    height: 110px !important;
}

ul.recognize_logo>li img {
    height: 90px !important;
}

#commentform p.comment-form-cookies-consent {
    width: 100%
}

i.svg-menu {
    margin-left: 5px;
}

i.svg-menu svg {
    fill: #202333;
    stroke: #202333;
}

.desktop-menu__list-item:hover a i.svg-menu svg {
    fill: #fa8b26;
    stroke: #fa8b26;
}

.home i.svg-menu svg {
    fill: #fff;
    stroke: #fff;
}

.home .desktop-menu__list-item:hover a i.svg-menu svg {
    fill: #fff;
    stroke: #fff;
}

.home.blog i.svg-menu svg {
    fill: #202333;
    stroke: #202333;
}

.home.blog .desktop-menu__list-item:hover a i.svg-menu svg {
    fill: #fa8b26;
    stroke: #fa8b26;
}

.portfolio .element-item:nth-child(9) a.portfolio-item:hover {
    background: #6060eb !important;
}

.portfolio .element-item:nth-child(11) a.portfolio-item:hover,
.portfolio .element-item:nth-child(7) a.portfolio-item:hover,
.portfolio .element-item:nth-child(10) a.portfolio-item:hover {
    background: #fa8b26 !important;
}

.portfolio .element-item:nth-child(12) a.portfolio-item:hover,
.portfolio .element-item:nth-child(13) a.portfolio-item:hover,
.portfolio .element-item:nth-child(15) a.portfolio-item:hover,
.portfolio .element-item:nth-child(16) a.portfolio-item:hover {
    background: #07c28e !important;
}

.tags .entry-featuredImg a img {
    width: 100%;
    margin-bottom: 20px;
    height: auto;
}

.tags header.entry-header {
    height: auto !important;
    flex-direction: column;
    padding: 0;
    margin-bottom: 20px;
}

.tags h2.entry-title {
    width: 100%;
}

.tags h2.entry-title a {
    font-family: "Century Gothic";
    color: #292b2c;
    font-weight: 600;
}

.tags .entry-footer a {
    color: #fff;
}

.tags .lontano-excerpt.withShade {
    width: 100%;
    text-align: left;
}

.tags time.entry-date.published {
    display: none !important;
}

.tags .posted-on.col-4 {
    color: #fff;
}

.tags .byline.col-4 {
    color: #fff;
    padding-left: 30px;
}

a.desktop-menu__list-item-link.btn {
    background: #2a2a2a;
    color: #fff !important;
    text-transform: capitalize;
    font-size: 18px !important;
    padding: 10px;
    height: 40px;
}

.widthFooter {
    max-width: 180px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.desktop-menu li.desktop-menu__list-item.selected:last-child a::after,
.desktop-menu li.desktop-menu__list-item:last-child a:hover::after {
    content: none;
}

.desktop-menu li.desktop-menu__list-item:last-child a.desktop-menu__list-item-link.btn:after {
    content: none !important;
}

.desktop-menu li.desktop-menu__list-item:last-child a.desktop-menu__list-item-link.btn {
    position: relative;
    z-index: 9;
    cursor: pointer;
    text-align: center;
    overflow: hidden;
}

.desktop-menu li.desktop-menu__list-item:last-child a.desktop-menu__list-item-link.btn:before {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 800px;
    height: 800px;
    content: "";
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    -webkit-transform: translate(-50%, -50%) scale(0);
    transform-origin: center center;
    -webkit-transform-origin: center center;
    visibility: hidden;
    opacity: 0;
    z-index: -1;
}

.desktop-menu li.desktop-menu__list-item:last-child:hover a.desktop-menu__list-item-link.btn:before {
    animation-duration: 2s;
    animation-fill-mode: both;
    animation-name: btneffect;
    -webkit-animation-duration: 2s;
    -webkit-animation-fill-mode: both;
    -webkit-animation-name: btneffect;
}

.desktop-menu li.desktop-menu__list-item:last-child:hover a.desktop-menu__list-item-link.btn:before {
    position: absolute;
    -webkit-transition: all .35s ease;
    transition: all .35s ease;
}

@keyframes btneffect {
    from {
        transform: translate(-50%, -50%) scale(0);
        -webkit-transform: translate(-50%, -50%) scale(0);
        visibility: visible;
        opacity: 1
    }

    to {
        transform: translate(-50%, -50%) scale(1);
        -webkit-transform: translate(-50%, -50%) scale(1);
        visibility: hidden;
        opacity: 0
    }
}

@-webkit-keyframes btneffect {
    from {
        transform: translate(-50%, -50%) scale(0);
        -webkit-transform: translate(-50%, -50%) scale(0);
        visibility: visible;
        opacity: 1
    }

    to {
        transform: translate(-50%, -50%) scale(1);
        -webkit-transform: translate(-50%, -50%) scale(1);
        visibility: hidden;
        opacity: 0
    }
}

/* header.transparentBGAdd a.desktop-menu__list-item-link.btn:hover,
header.transparentBGAdd a.desktop-menu__list-item-link.btn:focus {}

.inner-page a.desktop-menu__list-item-link.btn:hover,
.inner-page a.desktop-menu__list-item-link.btn:focus {} */

span.menuIcon img {
    margin: 0 !important;
}

.col-md-4.iconText a,
.col-md-3.iconText a {
    display: flex;
    align-items: center;
    margin-top: 10px;
}

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

    .slidenav li.selected .link-mask,
    .slidenav li.selected .link-mask>span,
    .slidenav li:hover .link-mask,
    .slidenav li:hover .link-mask>span {
        transform: translateY(12%) !important;
        transition: all 350ms cubic-bezier(.77, 0, .175, 1) 0s;
    }

    html .inner-page header {
        height: 56px !important;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .slidenav .navlinks li:hover {
        padding-left: 0 !important
    }

    /* .card-stack {
        padding-bottom: 180px;
    } */
    .slidenav .navlinks li a {
        display: flex;
        align-items: center
    }

    li.menu-item.link-mask-wrap.custom-dropdown {
        height: auto
    }

    .mega-menu-section {
        position: fixed;
        left: 0;
        right: auto;
        top: 0;
        z-index: 1000;
        background: #fff;
        width: 100%;
        bottom: 0;
        padding: 0 15px;
        transition: all .2s ease-in-out;
        overflow-y: auto
    }

    .link-site,
    .mega-menu-section .btn.btn-link {
        font-family: Muli, sans-serif !important;
        padding: 20px 0;
        border: 0 !important;
        text-transform: capitalize;
        color: #202333;
        font-size: 13px;
        line-height: 16px;
        font-weight: 700;
        align-items: center;
        width: 100%;
        justify-content: space-between;
        display: flex;
        margin: 0 -15px
    }

    .mega-menu-section .btn.btn-link:focus,
    .mega-menu-section .btn.btn-link:hover {
        text-decoration: none !important;
        background-color: transparent !important
    }

    .mega-menu-section .card-header {
        background: 0 0;
        padding: 0;
        border: 0;
        border-top: .75px solid rgba(250, 139, 38, .25);
        border-radius: 0 !important
    }

    .tab-heading-link {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 20px 0;
        color: #fa8b26
    }

    .tab-heading-link a {
        color: #fa8b26;
        font-weight: 700;
        font-size: 22px;
        line-height: 29px;
        font-family: "Playfair Display", serif !important
    }

    .mega-menu-section .card {
        border: 0 !important;
        border-radius: 0
    }

    .mega-menu-section .card-header:first-child {
        border-radius: 0 !important
    }

    .mega-menu-section .card-header h5 {
        display: flex;
        justify-content: space-evenly;
        flex-direction: row
    }

    .down_collapse.collapsed img {
        transform: rotate(180deg)
    }

    .mega-menu-section .card-body ul {
        display: flex;
        flex-direction: column;
        padding-left: 30px;
        margin: 10px 0
    }

    .mega-menu-section .card-body ul li a {
        font-weight: 400;
        font-size: 12px;
        line-height: 28px;
        color: #202333;
        opacity: .86
    }

    .btn.btn-link.down_collapse {
        position: relative
    }

    .btn.btn-link.down_collapse:before {
        content: "";
        background: rgba(250, 139, 38, .08);
        position: absolute;
        height: 100%;
        bottom: 0;
        left: -100%;
        right: -15px
    }

    .btn.btn-link.down_collapse.collapsed:before {
        content: none
    }

    .btn.btn-link.down_collapse.collapsed {
        background-color: transparent
    }

    .link-padd {
        padding-left: 0 !important
    }

    i.menu-icon.fas.fa-angle-down {
        opacity: .7
    }

    .slidenav .navlinks li a {
        color: grey !important
    }

    a.link-site {
        padding: 20px 15px;
        width: 120%
    }

    .menuIcon img {
        transform: none !important;
        margin-right: 10px
    }

    .mega-menu-section .card-body li.col-md-4 {
        padding-left: 0
    }

    .slidenav .navlinks li {
        height: 65px !important
    }

    .mega-menu-section .card-body ul li a:focus,
    .mega-menu-section .card-body ul li a:hover {
        background: 0 0 !important;
        color: #202333 !important;
        opacity: .86 !important
    }
}

.coal-black-2 {
    color: #292b2c !important;
    font-weight: 400 !important;
}

.portfolio .element-item:nth-child(18) a.portfolio-item:hover,
.portfolio .element-item:nth-child(20) a.portfolio-item:hover,
.portfolio .element-item:nth-child(14) a.portfolio-item:hover {
    background-color: var(--purpleBg) !important;
}

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

    .col-md-3.left-border.footer-locations.pr-0,
    .col-md-2.footer-locations,
    .col-md-7.left-border #footer-locations {
        padding-right: 0 !important
    }
}

.col-md-3.left-border.footer-locations.pr-0 {
    padding-left: 24px !important;
}

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


    html .inner-page header {

        height: 56px !important;

        align-items: center;

        display: flex;

        justify-content: space-between;

    }

    ul.list-achivment li {

        margin-bottom: -8px !important;

    }

    .footer-contacts.padleft.text-center.mb-2.mt-0 {

        padding-top: 0 !important;

    }

    .footer-contacts.footer-copyright.padleft.marginTop3 {

        padding-bottom: 0 !important;

    }

    #footer-locations .col-sm-4.text-center:nth-last-child(1) p {

        margin-bottom: 0;

    }

    footer .footer-navigation ul.quickLinks {

        margin-bottom: 40px !important
    }

    .alignHeight.innerLink {

        padding-top: 30px !important
    }

    a.link-site:focus {

        color: #2a2a2a !important
    }

    .section_heading br {

        display: none !important;

    }
}

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

    footer .footer-contacts {

        padding: 20px 0 20px 0;

    }

    .section_heading br {

        display: none !important;

    }

    a.link-site:focus {

        color: #2a2a2a !important
    }

    .mobile-banner-content h1 {

        font-family: 'Playfair Display' !important
    }

}

.tab-content-item {
    /* display: none; */
}

.tab-content-item.active {
    display: block;
}

.tab-button.active {
    background-color: #111;
    color: #fff;
}

.tab-button {
    cursor: pointer;   
}
.service-card {
    min-height: 480px;
    position: relative;
}
@media (max-width: 768px) {
    .service-card {
        min-height: 360px;
    }
}
.service-card img {
    transform: scale(0.6);
    transition: all ease 0.6s;
}
.service-card img.img-big {
    opacity: 0.2;
}
.tab-content-item.active .service-card img {
    transform: scale(1);
}
.tab-content-item {
    margin-bottom: 0px;
}
.img-small {
    width: 60px; 
    height: 60px;
    margin-bottom: 30px;
}
.img-big {
    width: 165px; 
    height: 165px;
    position: absolute;
    bottom: 20px;
    right: 10px;
}



.slidenav.responsive-menu {
    position: fixed;
    background: #0f172a;
    left: 0px;
    transform: scale(1);
}

.slidenav.responsive-menu > ul:not(.dropdown) {
    padding: 50px 20px;
    height: 100vh;
        display: flex;
    flex-wrap: wrap;
        display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

.slidenav.responsive-menu > ul li {
        display: block;
    width: 100%;
}

.d-none {
    display: none!important;
}

.slidenav.responsive-menu  > ul > li > a {
    font-size: 30px;
    font-weight: 500;
    display: block;
    padding: 20px 0px;
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    color: #fff;
}
.slidenav.responsive-menu > ul > li > a.active {
    color: var(--emerald-green);
}
/* .env-navigation {
    background: #000000;
    margin: 0 auto;
    border-radius: 100px;
    box-shadow: 0px 7px 10px #0a2c3459;
    margin-top: 20px !important;
    display: flex;
    align-items: center;
    padding: 12px 15px;
    width: auto !important;
    justify-content: space-between;
} */


/* --------------------
       Service page CSS
    --------------------- */
        
    :root {
    --cards: 3;
    --cardHeight: 87vh;
    --cardTopPadding: 3em;
    --cardMargin: 4vw;
    }

    .stack-list {
    list-style: none;
    padding-left: 0;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(var(--cards), var(--cardHeight));
    gap: var(--cardMargin);
    /* margin-bottom: var(--cardMargin); */
    }

    .stack-card:first-child {
    --index: 1;
    }
    .stack-card:nth-child(2) {
    --index: 2;
    }
    .stack-card:nth-child(3) {
    --index: 3;
    }

    .stack-card {
        position: sticky;
        top: 120px;
        padding-top: calc(var(--index) * var(--cardTopPadding));

    }
    .card-stack {
      color: var(--text-dark);
    }

    .stack-list {
      list-style: none;
      position: relative;
    margin-top: -3rem;
    }

    /* --------------------
       Card
    --------------------- */
    .card-case-study {
      background-color: #ffffff;
      border-radius: 16px;
      overflow: hidden;
      align-items: center;
      display: grid;
      grid-template-columns: 1.1fr 1fr;
      min-height: 440px;
      transform-origin: center top;
      padding: 50px;
        background-position: center;
        background-size: cover;
    }

    @media (max-width: 768px) {
      .card-case-study {
        grid-template-columns: 1fr;
        padding: 30px;
      }
    }

    .card__content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 1rem;
      align-items: flex-start;
    }

    .card-tag {
      font-size: 0.8rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .card__title {
      font-size: clamp(1.6rem, 3vw, 2.2rem);
      line-height: 1.2;
      font-weight: 600;
    }

    .card__descr {
      font-size: 1rem;
      line-height: 1.6;
      opacity: 0.7;
    }

    .card__link {
        text-transform: capitalize;
        letter-spacing: 0;
        height: auto;
    }

    .card__cover img {
      max-width: 100%;
      height: auto;
      object-fit: contain;
    }
    .stack-card:first-child .card-case-study {
        background-color: #000;
        background-image: url(../img/case-study-bg1.png);
        color: white;        
        /* background-color: #314400; */
    }
    .stack-card:nth-child(2) .card-case-study {
        background-image: url(../img/case-study-bg2.png);
        /* background-color: #78b722; */
    }
    .stack-card:nth-child(3) .card-case-study {
        background-image: url(../img/case-study-bg3.png);
        /* background-color: #ddd596; */

    }

    .text-translate.active h3 { 
    margin-bottom: 0px!important;
}



    /* ============================================
       SERVICES PAGE - EXACT UI MATCH
       ============================================ */
    
    :root {
        --emerald-green: #00B894;
        --dark-bg: #000000;
        --light-gray: #f8f9fa;
        --border-subtle: #e0e0e0;
        /* --text-dark: #2a2a2a; */
        --text-dark: #000;
        --text-muted: #6a757b;
    }

    /* Reset for services page */
    .services-page {
        background: #fff;
        overflow-x: hidden;
    }

    /* ============================================
       HERO SECTION
       ============================================ */
    .hero-services {
        background-color: var(--emerald-green); /* Solid color, not gradient */
        background-image: url(../img/service-banner.svg);
        min-height: 70vh;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 170px 20px 110px;
        position: relative;
        background-position: center;
        background-repeat: no-repeat;
    }

    .hero-content {
        max-width: 840px;
        margin: 0 auto;
        position: relative;
        z-index: 2;
    }

    .hero-services h1 {
        font-size: clamp(42px, 6vw, 56px);
        font-weight: 900;
        color: var(--text-dark);
        margin-bottom: 30px;
        line-height: 1.2 !important;
        letter-spacing: 0px;
    }

    .hero-services p {
        font-size: clamp(14px, 2vw, 16px);
        color: var(--text-dark);
        max-width: 700px;
        margin: 0 auto;
        line-height: 1.6;
        font-weight: 400;
    }

    /* ============================================
       PRODUCT SPOTLIGHT SECTION
       ============================================ */
    .product-spotlight {
        background: var(--dark-bg);
        padding: 100px 20px;
        position: relative;
    }

    .product-spotlight-container {
        max-width: 1200px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        align-items: center;
    }

    .spotlight-content h2 {
        font-size: clamp(32px, 4vw, 48px);
        font-weight: 900;
        color: #fff;
        margin-bottom: 20px;
        line-height: 1.2;
    }

    .spotlight-content p {
        font-size: 18px;
        color: rgba(255,255,255,0.8);
        line-height: 1.6;
        margin-bottom: 30px;
    }

    .spotlight-cta {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 14px 32px;
        background: var(--emerald-green);
        color: #fff;
        text-decoration: none;
        border-radius: 8px;
        font-weight: 600;
        transition: all 0.3s ease;
    }

    .spotlight-cta:hover {
        background: #00a07d;
        transform: translateX(5px);
    }

    .spotlight-image {
        position: relative;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 30px 80px rgba(0, 182, 148, 0.3);
    }

    .spotlight-image img {
        width: 100%;
        height: auto;
        display: block;
    }

    /* ============================================
       SYSTANGO DIFFERENTIATORS
       ============================================ */
    .differentiators {
        background: #fff;
        /* padding: 100px 20px; */
    }

    .differentiators-container {
        max-width: 1200px;
        margin: 0 auto;
    }

    .differentiators h2 {
        font-size: clamp(32px, 5vw, 56px);
        font-weight: 900;
        color: var(--text-dark);
        text-align: center;
        margin-bottom: 40px;
        line-height: 1.2;
    }

    .differentiators-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 30px;
    }
    @media (max-width: 768px) {
        .differentiators-grid {            
            gap: 20px;
        }
    }

    .diff-card {
        background: #EFEFEF;
        /* border: 1px solid var(--border-subtle); */
        border-radius: 20px;
        padding: 40px 30px;
        position: relative;
        transition: all 0.3s ease;
    }

    .diff-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    }

    .diff-icon {
        position: absolute;
        top: 6px;
        right: 6px;
        width: 70px;
        height: 70px;
    }

    .diff-number {
        font-size: 23px;
        font-weight: 900;
        color: var(--text-dark);
        margin-bottom: 10px;
        line-height: 1;

    }

    .diff-label {
        font-size: 14px;
        color: #31364E;
        line-height: 1.4;
    }

    /* ============================================
       AI DEVELOPMENT SERVICES (SCROLL-SYNCED TABS)
       ============================================ */
    .ai-services {
        background: var(--dark-bg);
        /* padding: 100px 20px; */
        position: relative;
    }

    .ai-services-container {
        max-width: 1200px;
        margin: 0 auto;
    }

    .ai-services h2 {
        font-size: clamp(32px, 5vw, 56px);
        font-weight: 900;
        color: #fff;
        text-align: center;
        margin-bottom: 20px;
        line-height: 1.2;
    }
    .ai-services-subtitle {
        font-size: 18px;
        color: #fff;
        text-align: center;
    }
    @media (max-width: 768px) {
        .ai-services-subtitle {
            font-size: 14px;
            line-height: 20px;
        }
    }
    .ai-services-subtitle:last-child {
        margin-bottom: 60px;        
    }
    @media (max-width: 768px) {
        .ai-services-subtitle:last-child {
            margin-bottom: 0px;        
        }
    }

    .ai-services-layout {
        display: grid;
        grid-template-columns: 300px 1fr;
        gap: 60px;
    }

    .tabs-nav {
        position: sticky;
        top: 120px;
        height: fit-content;
        counter-reset: tab-counter;
    }

    .tabs-nav .tab-button {
        display: block;
        width: 100%;
        cursor: pointer;
        text-align: left;
        padding: 16px 24px;
        background: transparent;
        border: none;
        /* border-left: 3px solid transparent; */
        color: #fff;
        font-size: 16px;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.4s ease;
        margin-bottom: 8px;
        counter-increment: tab-counter;
        position: relative;
        padding-left: 48px;

    }
    /* Number badge */
    .tabs-nav .tab-button::after {
        content: counter(tab-counter, decimal-leading-zero);
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        font-weight: 400;
        font-size: 14px;
    }

    .tabs-nav .tab-button.active,  .tabs-nav .tab-button:hover {
        color: var(--emerald-green);
        background-color: transparent;
        /* background: rgba(0, 182, 148, 0.1); */
    }

    .tabs-content {
        position: relative;
    }

    .tab-content-item {
        scroll-margin-top: 120px;
        margin-bottom: 80px;
    }
     @media (max-width: 1024px) {
         .tabs-content {
            grid-template-columns: 1fr 1fr;
            display: grid;
            gap: 30px;
        }
     }
    @media (max-width: 768px) {
        .tab-content-item {            
            margin-bottom: 40px;
        }
        .tabs-content {
            grid-template-columns:  1fr;
            display: grid;
            gap: 30px;
        }

    }
    /* .tab-content-item:not(:last-child) {
        padding-bottom: 30px;
    } */
     .ai-services, .benefits, .why-choose {
        padding-left: 24px;
        padding-right: 24px;
     }
    .service-card {
        background: linear-gradient(135deg, var(--emerald-green) 0%, #00d68f 100%);
        border-radius: 24px;
        padding: 50px;
        color: #fff;
    }
    @media (max-width: 768px) {
        .service-card {        
            padding: 30px;
        }
    }

    .service-card h3 {
        font-size: 36px;
        font-weight: 900;
        margin-bottom: 20px;
        line-height: 1.2;
    }

    .service-card p {
        font-size: 18px;
        line-height: 1.6;
        opacity: 0.95;
    }
    @media (max-width: 768px) {
        .service-card p {
        font-size:  14px !important;
        line-height: 20px;
        }
    }

    /* ============================================
       TRANSFORMATIVE BENEFITS
       ============================================ */
    .benefits {
        background: #fff;
        /* padding: 100px 20px; */
    }

    .benefits-container {
        max-width: 1200px;
        margin: 0 auto;
    }

    .benefits h2 {
        font-size: clamp(32px, 5vw, 56px);
        font-weight: 900;
        color: var(--text-dark);
        text-align: center;
        margin-bottom: 24px;
        line-height: 1.2;
    }
    @media (max-width: 768px) {
        .benefits h2 {            
            margin-bottom: 40px;
        }
    } 
    

    .benefits-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    .benefit-card {
        background: #EFEFEF;
        /* border: 1px solid var(--border-subtle); */
        border-radius: 20px;
        padding: 40px;
        transition: all 0.3s ease;
    }
    @media (max-width: 768px) {
        .benefit-card {       
            padding: 20px;
        }
        .benefits-grid {
            gap: 20px;
        }
    }

    .benefit-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    }

    .benefit-icon {
        width: 60px;
        height: 60px;
        background: var(--emerald-green);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 32px;
        margin-bottom: 20px;
    }

    .benefit-card h3 {
        font-size: 24px;
        font-weight: 700;
        color: var(--text-dark) !important;
        margin-bottom: 15px;
        letter-spacing: 0;
    }

    .benefit-card p {
        font-size: 16px;
        color: var(--text-muted);
        line-height: 1.6;
        margin-bottom: 0px;
    }
    @media (max-width: 768px) {
       .benefit-card p {
            font-size: 14px;
            line-height: 20px;
        }
    }

    /* ============================================
       WHY CHOOSE SYSTANGO
       ============================================ */
    .why-choose {
        background: var(--emerald-green);
        /* padding: 100px 20px; */
    }

    .why-choose-container {
        max-width: 1200px;
        margin: 0 auto;
    }

    .why-choose h2 {
        font-size: clamp(32px, 5vw, 56px);
        font-weight: 900;
        text-align: center;
        margin-bottom: 40px;
        line-height: 1.2;
        color: var(--text-dark);
    }

    .why-choose-subtitle {
        font-size: 18px;
        color: var(--text-dark);
        text-align: center;
        margin-bottom: 60px;
    }

    .why-choose-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 30px;
    }

    .why-card {
        background: #fff;
        border-radius: 16px;
        padding: 40px 30px;
        text-align: center;
        transition: all 0.3s ease;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: start;
    }

    .why-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    }

    .why-icon {
        width: 50px;
        height: 50px;
        margin-bottom: 20px;
    }

    .why-card h3 {
        font-size: 20px;
        font-weight: 700;
        color: var(--text-dark) !important;
        margin-bottom: 15px;
        line-height: 1.3;
    }

    .why-card p {
        font-size: 15px;
        color: var(--text-muted);
        line-height: 1.6;
        margin-bottom: 25px;
    }
    @media (max-width: 768px) {
        .why-card p  {        
            font-size:  14px !important;
            line-height: 20px;
        }
    }

    .why-cta {
        display: inline-block;
        padding: 12px 28px;
        background: var(--dark-bg);
        color: #fff;
        text-decoration: none;
        border-radius: 8px;
        font-weight: 600;
        font-size: 14px;
        transition: all 0.3s ease;
    }

    .why-cta:hover {
        background: #1a1a1a;
        transform: scale(1.05);
    }
    #contact-us {
        min-height: 100vh;
        height: auto;        
    }
    .footer-locations img {
        width: 60px;
        height: 60px;
    }

    /* ============================================
       RESPONSIVE DESIGN
       ============================================ */
    @media (max-width: 1024px) {
        .product-spotlight-container,
        .ai-services-layout {
            grid-template-columns: 1fr;
            gap: 40px;
        }

        .tabs-nav {
            position: static;
            display: flex;
            overflow-x: auto;
            gap: 10px;
            margin-bottom: 40px;
            display: none;
        }
        .tab-content-item:not(:last-child) {
            margin-bottom: 0;
        }   
        .service-card h3 {
            font-size: 30px;
        }

        .tab-button {
            white-space: nowrap;
            border-left: none;
            border-bottom: 3px solid transparent;
        }

        .tab-button.active {
            border-left: none;
            border-bottom-color: var(--emerald-green);
        }

        .differentiators-grid,
        .why-choose-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }
    @media (max-width: 767px) {
        /* .card-stack {
            padding-bottom: 60px;
        } */
        .card-stack .card__cover {
            margin-top: 40px;
         }
        ul.accordion-list {
            padding-right: 0 !important;
        }
        #section-7 {
            text-align: center;
        }
        .differentiators-grid,
        .benefits-grid,
        .why-choose-grid {
            grid-template-columns: 1fr;
        }
        .hero-services h1 {
            font-size: 32px !important;
        }
    }
    @media (max-width: 768px) {
       

        .hero-services {
            padding: 80px 20px 60px;
        }

        .product-spotlight,
        .differentiators,
        .ai-services,
        .benefits,
        .why-choose {
            padding: 60px 20px;
        }
        .slidenav.responsive-menu ul.dropdown {
            position: static;
            background: rgba(255, 255, 255, 0.03);
        }
        .has-dropdown.active {
            background-color: rgba(255, 255, 255, 0.04);
        }
    }
    @media (max-width: 480px) {
        .logo {
            max-width: 130px !important;
        }
        h3 {
            letter-spacing: 0 !important;
        }
    }

    .big-span {
        font-size: 60px;
        line-height: 0px;
    }

    .benefits .font-heading {
        font-size: clamp(24px, 5vw, 36px);
        font-weight: 500;
     
        font-size: 24px!important;
        text-align: center;
        margin-bottom: 24px;
        line-height: 1.2;
    }

    .confidence h3 {
        font-size: clamp(24px, 5vw, 36px);
        font-weight: 500;
        color: #000!important;
        font-size: 24px!important;
        text-align: center;
        margin-bottom: 24px;
        line-height: 1.2;
    }

    .why-choose-grid.teams { 
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        justify-items: center;
    }
    @media (max-width: 1200px) {
        .why-choose-grid.teams { 
            display: grid;
            grid-template-columns: repeat(3, 1fr);            
            justify-items: center;
        }
    }
    @media (max-width: 768px) {
        .why-choose-grid.teams { 
            display: grid;
            grid-template-columns: repeat(2, 1fr);            
            justify-items: center;
        }
    }
    @media (max-width: 480px) {
        .why-choose-grid.teams { 
            display: grid;
            grid-template-columns: repeat(1, 1fr);            
            justify-items: center;
        }
    }
    .teams .why-card {
        width: 100%;
        padding: 10px 10px 0px 10px;
    }
    .teams .why-card img {
        width: 100%;
        margin-bottom: 10px;
    }

    .benefits.partners {
        background: #000000;    
    color: white;
    }
    .benefits.partners .benefit-card {
        background: linear-gradient(135deg, var(--emerald-green) 0%, #00d68f 100%)
    }

     .benefits.partners .benefits-grid {
        margin-top: 40px;
     }
    .benefits.partners .benefit-card h3 {
        color: #fff!important;
    }
    .benefits.partners .benefit-card p {
        color: #fff;
    }
    
    .staff .benefit-card h3 {
        margin-bottom: 0px;
    }
    .staff .benefit-card {
        padding: 30px;
    }
    .staff .benefit-card h3 {
        font-size: 20px;
    }
    .staff .benefit-card:hover {
        transform: none;
    }

    .font-16 {
    font-size: 16px;
}