@import url(https://fonts.googleapis.com/css?family=Rubik:300,300i,400,400i,500,500i,700,700i,900,900i&subset=cyrillic,hebrew,latin-ext);@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:400,400i,600,600i,700,700i,800,800i,900,900i&display=swap);:root {
    --blue: #2497f2;
    --green: #00d00e;
    --purple:#7b34ee;
    --white: #fff;
    --grey: #f9f9f9;
    --grey-snd: #f6f9fb;
    --grey-trd: #edeeef;
    --grey-fth: #f8fbfe;
    --grey-fifth: #c6d3dd;
    --dark: #11132f;
    --dark-2: #10142f;
    --yellow: #ffbf19;
    --yellow-snd: #ffdc0b;
    --bali-hai: #889eaa
}

:root,body {
    font-size: 20px
}

/* Loader styles */
.loader {
    position: fixed;
    z-index: 9999;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
}

.loader::before {
    content: '';
    border: 6px solid #f3f3f3;
    border-top: 6px solid #3498db;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Hide the loader by default */
body.loading .main-content {
    display: none;
}
body.loading #loader {
    display: flex;
}


body {
    line-height: 32px;
    font-family: Rubik,sans-serif;
    font-weight: 400;
    color: var(--dark);
    background-color: var(--white);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

body,p {
    letter-spacing: .2px
}

p {
    font-size: 16px
}

.h2,.h3,.h4,.h5,h2,h3,h4,h5 {
    font-family: Rubik,sans-serif;
    margin-bottom: .6rem;
    line-height: 1.25;
    color: var(--dark);
    font-weight: 500;
    letter-spacing: .2px
}

.h2,h2 {
    font-size: 40px
}

.h3,h3 {
    font-size: 30px;
    line-height: 44px
}

.h4,h4 {
    font-size: 24px;
    line-height: 36px
}

.h5,h5 {
    font-size: 20px;
    line-height: 30px
}

::selection {
    color: var(--white);
    background-color: var(--blue)
}

::-moz-selection {
    color: var(--white);
    background-color: var(--blue)
}

strong {
    font-weight: 700
}

.progress-container {
    width: 100%;
    background-color: transparent;
    position: fixed;
    top: 0;
    left: 0;
    height: 4px;
    z-index: 1000000;
    display: block
}

.progress-bar-top {
    background-color: transparent!important;
    background-image: -webkit-gradient(linear,right top,left top,from(#3ed0fe),to(#085fe5))!important;
    background-image: linear-gradient(270deg,#3ed0fe,#085fe5)!important;
    width: 0;
    display: block;
    height: inherit
}

.animsition-loading,.animsition-loading:after {
    width: 36px;
    height: 36px;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -18px;
    margin-left: -18px;
    border-radius: 50%;
    z-index: 100
}

.animsition-loading {
    opacity: .2;
    background-color: transparent;
    border: none;
    background-color: var(--blue);
    -webkit-animation: loaderAnim .7s linear infinite alternate forwards;
    animation: loaderAnim .7s linear infinite alternate forwards
}

@-webkit-keyframes loaderAnim {
    to {
        opacity: 1;
        -webkit-transform: scale3d(.5,.5,1);
        transform: scale3d(.5,.5,1)
    }
}

@keyframes loaderAnim {
    to {
        opacity: 1;
        -webkit-transform: scale3d(.5,.5,1);
        transform: scale3d(.5,.5,1)
    }
}

.cbp-af-header,.cbp-af-header.cbp-af-header-shrink {
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out
}

.cbp-af-header.cbp-af-header-shrink {
    background-color: var(--white);
    -webkit-box-shadow: 0 10px 20px 0 rgba(0,0,0,.05);
    box-shadow: 0 10px 20px 0 rgba(0,0,0,.05)
}

.cbp-af-header.cbp-af-header-shrink .padding-on-scroll {
    border-bottom: 1px solid hsla(210,6%,93%,0)
}

.cbp-af-header.cbp-af-header-shrink .padding-on-scroll,.padding-on-scroll {
    padding: 20px 0;
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out
}

.padding-on-scroll {
    border-bottom: 1px solid hsla(210,6%,93%,.2)
}

.cbp-af-header.cbp-af-header-shrink .navbar-brand {
    background-image: url("/img/devhirehub.png");
    background-size: 133px 101px;
    background-position: 0;
    background-repeat: no-repeat;
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out
}

.cbp-af-header.cbp-af-header-shrink .btn-nav {
    border-color: transparent!important;
    border-width: 0!important;
    padding: 0 42px;
    -webkit-box-shadow: 0 4px 10px 0 rgba(0,0,0,.1);
    box-shadow: 0 4px 10px 0 rgba(0,0,0,.1)
}

.cbp-af-header.cbp-af-header-shrink .btn-nav,.cbp-af-header.cbp-af-header-shrink .btn-nav:hover {
    color: var(--white);
    background-image: linear-gradient(281deg,#0575e6,#021b79);
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out
}

.cbp-af-header.cbp-af-header-shrink .btn-nav:hover {
    -webkit-box-shadow: 0 4px 10px 0 rgba(0,0,0,.3);
    box-shadow: 0 4px 10px 0 rgba(0,0,0,.3)
}

.cbp-af-header.cbp-af-header-shrink .nav-link {
    color: var(--bali-hai)!important;
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out
}

.cbp-af-header.cbp-af-header-shrink .nav-link:hover {
    color: var(--blue)!important
}

.cbp-af-header.cbp-af-header-shrink .nav-item.active .nav-link {
    color: var(--bali-hai)!important
}

.cbp-af-header.cbp-af-header-shrink .nav-item:hover .nav-link {
    background-color: var(--grey-fth)!important
}

.cbp-af-header.cbp-af-header-shrink .nav-link:after {
    background-color: transparent;
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out
}

.cbp-af-header.cbp-af-header-shrink .nav-item.active .dropdown-menu .nav-link.active,.cbp-af-header.cbp-af-header-shrink .nav-item.active .dropdown-menu .nav-link:hover,.cbp-af-header.cbp-af-header-shrink .nav-item.active .nav-link {
    color: var(--blue)!important;
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out
}

.cbp-af-header.cbp-af-header-shrink .nav-item.active .nav-link {
    background-color: var(--grey-fth)!important
}

.cbp-af-header.cbp-af-header-shrink .nav-item.active:hover .nav-link,.cbp-af-header.cbp-af-header-shrink .nav-item:hover .nav-link {
    color: var(--blue)!important;
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out
}

.cbp-af-header.cbp-af-header-shrink .nav-item:hover .dropdown-menu .nav-link {
    color: var(--bali-hai)!important
}

.cbp-af-header.cbp-af-header-shrink .nav-item:hover .dropdown-menu .nav-link:hover {
    color: var(--blue)!important
}

.cbp-af-header.cbp-af-header-shrink .nav-item.active .dropdown-menu .nav-link,.cbp-af-header.cbp-af-header-shrink .nav-item:hover .dropdown-menu .nav-link {
    background-color: transparent!important;
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out
}

.cbp-af-header.cbp-af-header-shrink .nav-item:hover .dropdown-menu .nav-link:hover {
    background-color: var(--grey-fth)!important;
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out
}

.cbp-af-header.cbp-af-header-shrink .dropdown-menu .nav-link:hover,.cbp-af-header.cbp-af-header-shrink .nav-item.active .dropdown-menu .nav-link:hover,.cbp-af-header.cbp-af-header-shrink .nav-item .dropdown-menu .nav-link.active {
    color: var(--blue)!important;
    background-color: var(--grey-fth)!important;
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out
}

.cbp-af-header.cbp-af-header-shrink .dropdown-menu .nav-link:after,.cbp-af-header.cbp-af-header-shrink .nav-item.active .dropdown-menu .nav-link:after {
    display: none;
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out
}

.navigation-wrap {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 10000
}

.navbar {
    padding: 0
}

.navbar-brand {
    height: 77px;
    width: 96px;
    background-image: url(/img/devhirehub.png);
    background-size: 117px 107px;
    background-position: 0;
    background-repeat: no-repeat;
    display: block;
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out
}

.navbar-brand:hover {
    opacity: .85
}

.navbar-toggler {
    float: right;
    border: none;
    padding-right: 0
}

.navbar-toggler:active,.navbar-toggler:focus {
    outline: none
}

.navbar-light .navbar-toggler-icon {
    width: 24px;
    height: 17px;
    background-image: none;
    position: relative;
    border-bottom: 1px solid var(--dark);
    -webkit-transition: all .3s linear;
    transition: all .3s linear
}

.navbar-light .navbar-toggler-icon:after,.navbar-light .navbar-toggler-icon:before {
    width: 24px;
    position: absolute;
    height: 1px;
    background-color: var(--dark);
    top: 0;
    left: 0;
    content: "";
    z-index: 2;
    -webkit-transition: all .3s linear;
    transition: all .3s linear
}

.navbar-light .navbar-toggler-icon:after {
    top: 8px
}

.navbar-toggler[aria-expanded=true] .navbar-toggler-icon:after {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

.navbar-toggler[aria-expanded=true] .navbar-toggler-icon:before {
    -webkit-transform: translateY(8px) rotate(-45deg);
    transform: translateY(8px) rotate(-45deg)
}

.navbar-toggler[aria-expanded=true] .navbar-toggler-icon {
    border-color: transparent
}

.nav-link {
    font-size: 16px;
    font-weight: 500;
    color: var(--white)!important;
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out
}

.nav-item:hover .nav-link {
    background-color: rgba(247,249,251,.1)
}

.nav-item.active .nav-link {
    background-color: hsla(0,0%,100%,.13)!important;
    color: var(--white)!important;
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out
}

.nav-link {
    position: relative;
    padding: 0;
    padding-left: 20px!important;
    padding-right: 20px!important;
    border-radius: 4px;
    height: 44px;
    line-height: 44px;
    display: inline-block
}

.nav-link:after {
    position: absolute;
    bottom: 5px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    content: "";
    background-color: transparent;
    opacity: 0;
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out
}

.nav-link:hover:after {
    opacity: 1;
    width: calc(100% - 50px)
}

.nav-item.active .nav-link:hover:after {
    opacity: 0
}

.nav-item {
    position: relative;
    margin-left: 5px;
    margin-right: 5px
}

.nav-item .dropdown-menu {
    -webkit-transform: translate3d(0,20px,0);
    transform: translate3d(0,20px,0);
    visibility: hidden;
    opacity: 0;
    max-height: 0;
    display: block;
    min-width: 250px;
    padding: 0;
    margin: 0;
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out
}

.nav-item .dropdown-menu.long {
    min-width: 400px
}

.nav-item.show .dropdown-menu {
    opacity: 1;
    visibility: visible;
    max-height: 999px;
    -webkit-transform: translate3d(0,10px,0);
    transform: translate3d(0,10px,0)
}

.dropdown-menu {
    padding: 15px 20px!important;
    margin: 0;
    left: -20px;
    font-size: 16px;
    background-color: var(--white);
    border: none;
    border-radius: 4px;
    -webkit-box-shadow: 0 8px 20px 0 rgba(0,0,0,.1);
    box-shadow: 0 8px 20px 0 rgba(0,0,0,.1);
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out
}

.dropdown-menu:before {
    position: absolute;
    content: "";
    z-index: 2;
    border-bottom: 10px solid var(--white);
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    left: 40px;
    top: -10px;
    width: 100%;
    opacity: 0
}

.dropdown-menu .nav-link {
    color: var(--dark)!important;
    margin-top: 5px;
    margin-bottom: 5px;
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out
}

.dropdown-menu .nav-link:hover {
    color: var(--blue)!important
}

.dropdown-toggle:after {
    display: none
}

.dropdown-toggle {
    padding-right: 35px!important
}

.dropdown-toggle:before {
    position: absolute;
    content: "\E916";
    font-family: glagoljica!important;
    top: 50%;
    margin-top: -4px;
    right: 20px;
    font-size: 8px;
    line-height: 8px;
    z-index: 2;
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out
}

.nav-item:hover .dropdown-toggle:before {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

.dropdown-menu .nav-link {
    height: 40px;
    line-height: 40px;
    font-size: 15px;
    width: 100%
}

.nav-item.active .dropdown-menu .nav-link {
    background-color: transparent!important;
    color: inherit!important;
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out
}

.dropdown-menu .nav-link:hover,.nav-item.active .dropdown-menu .nav-link:hover {
    color: var(--blue)!important;
    background-color: var(--grey-fth)!important;
    border-radius: 4px
}

.dropdown-menu .nav-link:after,.nav-item.active .dropdown-menu .nav-link:after {
    display: none
}

.nav-item.active .dropdown-menu .nav-link.active {
    color: var(--blue)!important;
    background-color: var(--grey-fth)!important
}

.nav-item.active .dropdown-menu .nav-link.active:after {
    display: none
}

.nav-item:hover .dropdown-menu .nav-link {
    color: var(--bali-hai)!important;
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out
}

.nav-item:hover .dropdown-menu .nav-link:hover {
    color: var(--blue)!important;
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out
}

.btn {
    border-radius: 4px;
    height: 44px;
    font-size: 16px;
    -webkit-transition: all .2s linear;
    transition: all .2s linear;
    padding: 0 20px;
    display: -ms-inline-flexbox;
    display: -webkit-inline-box;
    display: inline-flex;
    -moz-align-items: center;
    -ms-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    -webkit-box-pack: center;
    justify-content: center;
    -ms-flex-pack: center;
    text-align: center;
    border: none
}

.btn:active,.btn:focus {
    -webkit-box-shadow: none;
    box-shadow: none
}

.btn-fluid {
    width: 100%!important
}

.btn-fluid-half {
    width: calc(100% - 10px);
    margin-right: 10px;
    float: left
}

.btn-padding-40 {
    padding: 0 40px
}

.btn-240 {
    width: 100%;
    max-width: 240px
}

.btn-260 {
    width: 100%;
    max-width: 260px
}

.btn-280 {
    width: 100%;
    max-width: 280px
}

.btn-h-34 {
    height: 34px
}

.btn-h-40 {
    height: 40px
}

.btn-h-48 {
    height: 48px
}

.btn-h-50 {
    height: 50px
}

.btn-nav {
    color: var(--white);
    font-weight: 500;
    border: 3px solid var(--white)!important
}

.btn-nav,.btn-nav:hover {
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out
}

.btn-nav:hover {
    background-color: var(--white);
    color: var(--black)
}

.btn-linear-blue {
    -webkit-box-shadow: 0 4px 10px 0 rgba(0,0,0,.1);
    box-shadow: 0 4px 10px 0 rgba(0,0,0,.1);
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out
}

.btn-linear-blue,.btn-linear-blue:hover {
    color: var(--white);
    background-image: linear-gradient(280deg,#3ed0fe,#085fe5)
}

.btn-linear-blue:hover {
    -webkit-box-shadow: 0 4px 10px 0 rgba(0,0,0,.3);
    box-shadow: 0 4px 10px 0 rgba(0,0,0,.3)
}

.btn-linear-blue-dark {
    -webkit-box-shadow: 0 4px 10px 0 rgba(0,0,0,.1);
    box-shadow: 0 4px 10px 0 rgba(0,0,0,.1);
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out
}

.btn-linear-blue-dark,.btn-linear-blue-dark:hover {
    color: var(--white);
    background-image: linear-gradient(284deg,#0575e6,#021b79)
}

.btn-linear-blue-dark:hover {
    -webkit-box-shadow: 0 4px 10px 0 rgba(0,0,0,.3);
    box-shadow: 0 4px 10px 0 rgba(0,0,0,.3)
}

.btn-tags {
    float: left;
    padding: 0 16px;
    color: var(--bali-hai);
    background-color: var(--grey-snd)
}

.btn-tags,.btn-tags:hover {
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out
}

.btn-tags:hover {
    background-color: var(--blue);
    color: var(--white)
}

.btn-blog-tags {
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    padding: 0 20px;
    color: var(--bali-hai);
    background-color: var(--grey-snd)
}

.btn-blog-tags,.btn-blog-tags:hover {
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out
}

.btn-blog-tags:hover {
    background-color: transparent;
    -webkit-box-shadow: 0 4px 10px 0 rgba(0,0,0,.1);
    box-shadow: 0 4px 10px 0 rgba(0,0,0,.1);
    color: var(--white)
}

.btn-blog-tags:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    z-index: -1;
    vidibility: hidden;
    opacity: 0;
    background-image: linear-gradient(291deg,#3ed0fe,#085fe5);
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out
}

.btn-blog-tags:hover:before {
    vidibility: visible;
    opacity: 1
}

.btn-soc {
    color: var(--bali-hai);
    background-color: transparent;
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out
}

.btn-soc.active {
    background-color: var(--grey-snd);
    color: var(--blue)
}

.btn-soc:hover {
    background-color: var(--grey-fth);
    color: var(--blue)
}

.btn-hero-transparent {
    color: var(--white);
    font-weight: 500;
    background-color: hsla(0,0%,100%,.1);
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out
}

.btn-hero-transparent:hover {
    color: var(--white);
    background-color: var(--blue);
    -webkit-box-shadow: 0 4px 30px 0 rgba(0,0,0,.15);
    box-shadow: 0 4px 30px 0 rgba(0,0,0,.15)
}

.btn-hero-transparent-dark {
    color: var(--dark);
    font-weight: 500;
    background-color: rgba(16,20,47,.1);
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out
}

.btn-hero-transparent-dark:hover {
    color: var(--white);
    background-color: var(--blue);
    -webkit-box-shadow: 0 4px 30px 0 rgba(0,0,0,.15);
    box-shadow: 0 4px 30px 0 rgba(0,0,0,.15)
}

.btn-hero-border {
    color: var(--white);
    font-weight: 500;
    border: 3px solid var(--white)!important
}

.btn-hero-border,.btn-hero-border:hover {
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out
}

.btn-hero-border:hover {
    background-color: var(--white);
    color: var(--black)
}

.btn-project-border-dark {
    color: var(--dark-2);
    font-weight: 500;
    border: 3px solid var(--dark-2)!important;
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out
}

.btn-project-border-dark:hover {
    background-color: var(--dark-2)
}

.btn-grey-project,.btn-project-border-dark:hover {
    color: var(--white);
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out
}

.btn-grey-project {
    background-color: var(--bali-hai)
}

.btn-grey-project:hover {
    color: var(--white);
    background-color: var(--dark);
    -webkit-box-shadow: 0 4px 10px 0 rgba(0,0,0,.3);
    box-shadow: 0 4px 10px 0 rgba(0,0,0,.3)
}

.btn-alert {
    padding: 0 20px
}

.btn-alert,.btn-project {
    height: 28px;
    font-size: 13px
}

.btn-project {
    padding: 4px 20px;
    color: var(--white);
    line-height: 1;
    background-color: hsla(0,0%,100%,.1);
    font-weight: 500;
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out
}

.btn-project:hover {
    background-color: var(--white);
    color: var(--black)
}

.btn-project-dark {
    padding: 4px 20px;
    color: var(--dark-2);
    font-size: 13px;
    line-height: 1;
    height: 28px;
    background-color: rgba(16,20,47,.1);
    font-weight: 500;
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out
}

.btn-project-dark:hover {
    background-color: var(--dark-2);
    color: var(--white)
}

.btn-services-transparent {
    position: relative;
    overflow: hidden;
    color: var(--white);
    font-weight: 500;
    background-color: hsla(0,0%,100%,.1);
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out
}

.btn-services-transparent:hover {
    color: var(--white);
    background-color: transparent;
    -webkit-box-shadow: 0 4px 30px 0 rgba(0,0,0,.15);
    box-shadow: 0 4px 30px 0 rgba(0,0,0,.15)
}

.btn-services-transparent:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    z-index: -1;
    background-image: linear-gradient(281deg,#0575e6,#021b79);
    opacity: 0;
    -webkit-transition: all .2s linear;
    transition: all .2s linear
}

.btn-services-transparent:hover:before {
    opacity: 1
}

.btn-cookie-transparent {
    position: relative;
    overflow: hidden;
    color: var(--white);
    font-weight: 500;
    background-color: hsla(0,0%,100%,.1);
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out
}

.btn-cookie-transparent:hover {
    color: var(--white);
    background-color: transparent;
    -webkit-box-shadow: 0 4px 30px 0 rgba(0,0,0,.15);
    box-shadow: 0 4px 30px 0 rgba(0,0,0,.15)
}

.btn-cookie-transparent:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    z-index: -1;
    background-image: linear-gradient(281deg,var(--yellow),var(--yellow-snd));
    opacity: 0;
    -webkit-transition: all .2s linear;
    transition: all .2s linear
}

.btn-cookie-transparent:hover:before {
    opacity: 1
}

.btn-soc .icon-on-hover {
    opacity: 0;
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out
}

.btn-soc:hover .icon-on-hover {
    opacity: 1
}

.btn-soc.footer:hover {
    color: var(--blue)
}

.btn-line-white {
    color: var(--white);
    border: 3px solid var(--white)!important
}

.btn-line-white,.btn-line-white:hover {
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out
}

.btn-line-white:hover {
    background-color: var(--white);
    color: var(--black)
}

.btn-stretch {
    -webkit-box-pack: justify!important;
    justify-content: space-between!important;
    -ms-flex-pack: distribute!important
}

.link-white {
    -webkit-transition: all .2s linear;
    transition: all .2s linear;
    display: -ms-inline-flexbox;
    display: -webkit-inline-box;
    display: inline-flex;
    -moz-align-items: center;
    -ms-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    -webkit-box-pack: center;
    justify-content: center;
    -ms-flex-pack: center;
    text-align: center;
    color: var(--white)
}

.link-white:hover {
    opacity: .6;
    text-decoration: none;
    color: var(--white)
}

.ref-link {
    position: relative;
    color: var(--bali-hai);
    padding-bottom: 4px;
    margin-left: 18px;
    border-bottom: 2px solid transparent;
    line-height: 2;
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out
}

.ref-link:hover {
    color: var(--dark);
    border-color: var(--blue);
    text-decoration: none
}

.ref-link:before {
    position: absolute;
    content: "";
    left: -20px;
    top: 5px;
    width: 8px;
    background-color: var(--bali-hai);
    height: 8px;
    border-radius: 50%;
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out
}

.ref-link:hover:before {
    background-color: var(--dark)
}

.color-bali-hai {
    color: var(--bali-hai)
}

.color-yellow {
    color: var(--yellow)
}

.color-blue {
    color: var(--blue)
}

.color-green {
    color: var(--green)
}

.color-white {
    color: var(--white)
}

.color-grey-fifth {
    color: var(--grey-fifth)
}

.color-dark-2 {
    color: var(--dark-2)
}

.color-pb {
    color: #cbdeed
}

.color-yellow-hover {
    color: var(--yellow);
    -webkit-transition: all .2s linear;
    transition: all .2s linear
}

.color-yellow-hover:hover {
    color: #3ed0fe
}

.color-orange {
    color: #ff6d2e
}

.bg-white {
    background-color: var(--white)
}

.bg-color-blue-linear-gradient-2 {
    background-image: -webkit-gradient(linear,left bottom,left top,from(#3ed0fe),to(#085fe5));
    background-image: linear-gradient(0deg,#3ed0fe,#085fe5)
}

.bg-color-blue-linear-gradient-2nd {
    background-image: url("/img/sep-gradient@2x.jpg");
    background-size: cover;
    background-position: 50%
}

.bg-color-grey-fth {
    background-color: var(--grey-fth)
}

.size-12 {
    font-size: 12px
}

.size-13 {
    line-height: 20px
}

.size-13,.size-13-line-same {
    font-size: 13px
}

.size-15 {
    font-size: 15px
}

.size-16 {
    font-size: 16px
}

.size-18 {
    font-size: 18px
}

.size-19 {
    font-size: 19px
}

.size-20 {
    font-size: 20px
}

.size-22 {
    font-size: 22px
}

.size-23 {
    font-size: 23px
}

.size-24 {
    font-size: 24px
}

.size-28 {
    font-size: 28px
}

.size-30 {
    font-size: 30px
}

.widht-18 {
    width: 18px
}

.line-height-24 {
    line-height: 24px
}

.line-height-26 {
    line-height: 26px
}

.line-height-28 {
    line-height: 28px
}

.height-28 {
    height: 28px
}

.line-height-34 {
    line-height: 34px
}

.box-shadow-40 {
    -webkit-box-shadow: 0 20px 40px 0 rgba(0,0,0,.05);
    box-shadow: 0 20px 40px 0 rgba(0,0,0,.05)
}

.box-shadow-20 {
    -webkit-box-shadow: 0 10px 20px 0 rgba(0,0,0,.15);
    box-shadow: 0 10px 20px 0 rgba(0,0,0,.15)
}

.box-shadow-10 {
    -webkit-box-shadow: 0 4px 10px 0 rgba(0,0,0,.05);
    box-shadow: 0 4px 10px 0 rgba(0,0,0,.05)
}

.border-4 {
    border-radius: 4px
}

.z-bigger {
    z-index: 20
}

.v-align-middle {
    vertical-align: middle
}

.box-shadow {
    -webkit-box-shadow: 0 10px 20px 0 rgba(0,0,0,.15);
    box-shadow: 0 10px 20px 0 rgba(0,0,0,.15)
}

.padding-30-40 {
    padding: 30px 40px
}

.opacity-50 {
    opacity: .5
}

.opacity-65 {
    opacity: .65
}

.font-italic {
    font-style: italic
}

.hightlight-top {
    padding: 20px 40px;
    z-index: 2;
    padding-bottom: 0
}

.hightlight-middle,.hightlight-top {
    border-radius: 4px;
    background-color: var(--grey-fth);
    display: inline-block
}

.hightlight-middle {
    position: relative;
    padding: 0 40px
}

.hightlight-middle:before {
    position: absolute;
    border-radius: 4px;
    background-color: var(--grey-fth);
    top: -20px;
    left: 0;
    content: "";
    z-index: -1;
    width: 100%;
    height: calc(100% + 40px);
    display: block
}

.hightlight-bottom {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    background-color: var(--grey-fth);
    padding: 20px 40px;
    display: inline-block;
    padding-top: 0
}

.font-weight-bold {
    font-weight: 500!important
}

.blog-post a {
    color: var(--dark)!important;
    padding-bottom: 2px!important;
    border-bottom: 2px solid var(--blue)!important;
    -webkit-transition: all .3s ease-out!important;
    transition: all .3s ease-out!important
}

.blog-post a:hover {
    color: var(--dark)!important;
    text-decoration: none!important;
    border-color: var(--yellow)!important
}

.blog-post h2,.blog-post h3,.blog-post h4 {
    text-align: center
}

.blog-post img {
    margin: 0 auto;
    text-align: center;
    max-width: 100%;
    height: auto;
    display: block
}

.link {
    color: var(--dark);
    padding-bottom: 2px;
    border-bottom: 2px solid var(--blue);
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out
}

.link:hover {
    color: var(--dark);
    text-decoration: none;
    border-color: var(--yellow)
}

.link-light {
    color: var(--grey-fifth);
    padding-bottom: 2px;
    border-bottom: 2px solid var(--blue);
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out
}

.link-light:hover {
    color: var(--grey-fifth);
    text-decoration: none;
    border-color: var(--yellow)
}

.link-blue,.link-blue:hover {
    color: var(--blue);
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out
}

.link-blue:hover {
    text-decoration: none;
    opacity: .8
}

.img-wrap img {
    width: 100%;
    height: auto;
    display: block;
    -webkit-transition: all .2s linear;
    transition: all .2s linear
}

.img-wrap.with-hover:hover img {
    -webkit-box-shadow: 0 10px 20px 0 rgba(0,0,0,.15);
    box-shadow: 0 10px 20px 0 rgba(0,0,0,.15)
}

.hero-img {
    width: 238px;
    height: auto;
    display: block
}

.section {
    display: block
}

.section,.section-900 {
    position: relative;
    width: 100%
}

.section-900 {
    max-width: 900px;
    margin: 0 auto
}

.over-hide {
    overflow: hidden
}

.full-height {
    height: 100vh
}

.padding-top-bottom {
    padding-top: 100px;
    padding-bottom: 100px
}

.padding-top {
    padding-top: 100px
}

.padding-bottom {
    padding-bottom: 100px
}

.padding-bottom-big {
    padding-bottom: 140px
}

.background-cover-hero-home {
    background-image: url("/img/hero@2x.jpg")
}

.background-cover-hero-home,.background-cover-hero-techday {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-size: cover;
    background-position: 50%
}

.background-cover-hero-techday {
    background-image: url("")
}

.background-cover-hero-techday-la {
    background-image: url("")
}

.background-cover-hero-london,.background-cover-hero-techday-la {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-size: cover;
    background-position: 50%
}

.background-cover-hero-london {
    background-image: url("")
}

.background-cover-hero-amsterdam {
    background-image: url("")
}

.background-cover-hero-amsterdam,.background-cover-hero-dubai {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-size: cover;
    background-position: 50%
}

.background-cover-hero-dubai {
    background-image: url("")
}

.background-cover-hero-techday-over {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background-image: linear-gradient(289deg,#0575e6,#021b79);
    opacity: .85
}

.hero-text-section {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    z-index: 1000;
    margin-top: -20px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.animation-from-top {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: all .7s linear;
    transition: all .7s linear;
    -webkit-transition-delay: 1.5s;
    transition-delay: 1.5s
}

body.hero-anime .animation-from-top {
    opacity: 0;
    -webkit-transform: translateY(-70px);
    transform: translateY(-70px)
}

.animation-from-top-2nd {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: all .4s linear;
    transition: all .4s linear;
    -webkit-transition-delay: 1.1s;
    transition-delay: 1.1s
}

body.hero-anime .animation-from-top-2nd {
    opacity: 0;
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px)
}

.eclipse-top:after {
    position: absolute;
    content: "";
    height: 60px;
    background-color: var(--white);
    z-index: 25
}

.eclipse-top:after {
    bottom: -20px;
    left: -10%;
    width: 120%;
    -webkit-box-shadow: 0 0 25px 0 rgba(42,34,64,.25);
    box-shadow: 0 0 25px 0 rgba(42,34,64,.25);
    -webkit-clip-path: ellipse(50% 100% at 50% 100%);
    clip-path: ellipse(50% 100% at 50% 100%)
}

.ocean {
    height: 50px;
    width: 100%;
    bottom: 0;
    left: 0;
    background-image: -webkit-gradient(linear,left bottom,left top,from(#fff),to(hsla(0,0%,100%,.2)));
    background-image: linear-gradient(0deg,#fff,hsla(0,0%,100%,.2));
    z-index: 2;
    -webkit-transform: translateY(50px);
    transform: translateY(50px)
}

.ocean {
    position: absolute
}

@-webkit-keyframes wave {
    0% {
        margin-left: 0
    }

    to {
        margin-left: -1600px
    }
}

@keyframes wave {
    0% {
        margin-left: 0
    }

    to {
        margin-left: -1600px
    }
}

@-webkit-keyframes swell {
    0%,to {
        -webkit-transform: translate3d(0,-40px,0);
        transform: translate3d(0,-40px,0)
    }

    50% {
        -webkit-transform: translate3d(0,-25px,0);
        transform: translate3d(0,-25px,0)
    }
}

@keyframes swell {
    0%,to {
        -webkit-transform: translate3d(0,-40px,0);
        transform: translate3d(0,-40px,0)
    }

    50% {
        -webkit-transform: translate3d(0,-25px,0);
        transform: translate3d(0,-25px,0)
    }
}

.curve-down {
    height: 60px;
    bottom: -1px;
    z-index: 2;
    background-image: url("/img/curve.svg");
    background-position: bottom;
    background-size: 100%
}

.curve-down,.section-hero-bottom {
    width: 100%;
    position: absolute;
    left: 0
}

.section-hero-bottom {
    display: block;
    bottom: 60px;
    z-index: 10000
}

.c-scroll-down {
    position: relative;
    display: inline-block;
    margin: 0 auto;
    text-align: center;
    color: var(--white);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer
}

.c-scroll-down:hover {
    text-decoration: none;
    color: var(--white)
}

.c-scroll-down-icon {
    position: relative;
    height: 30px;
    display: block;
    text-align: center;
    margin: 0 auto;
    width: 20px;
    border-radius: 8px;
    border: 2px solid var(--white)
}

.c-scroll-down-icon:before {
    position: absolute;
    top: 5px;
    left: 50%;
    height: 4px;
    width: 4px;
    margin-left: -2px;
    border-radius: 50%;
    -webkit-animation-name: scroll;
    animation-name: scroll;
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    background-color: var(--yellow-snd);
    content: ""
}

@-webkit-keyframes scroll {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        -webkit-transform: translateY(10px);
        transform: translateY(10px)
    }
}

@keyframes scroll {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        -webkit-transform: translateY(10px);
        transform: translateY(10px)
    }
}

.logo-block {
    position: relative;
    width: 100%;
    border-radius: 4px;
    display: block;
    height: 220px;
    background-repeat: no-repeat;
    background-position: 50%;
    background-color: var(--grey-snd);
    overflow: hidden;
    -webkit-transition: all .3s linear;
    transition: all .3s linear
}

.logo-block.techday {
    background-image: url();
    background-size: 158px 80px
}

.logo-block.techday:hover {
    background-image: url("");
    background-size: 158px 80px
}

.logo-block.lk-net {
    background-image: url("");
    background-size: 114px 84px
}

.logo-block.lk-net:hover {
    background-image: url();
    background-size: 114px 84px
}

.logo-block.lk-net-2 {
    background-image: url();
    background-size: 114px 84px
}

.logo-block.lk-net-2:hover {
    background-image: url("");
    background-size: 114px 84px
}

.logo-block.zpatch {
    background-image: url();
    background-size: 130px 84px
}

.logo-block.zpatch:hover {
    background-image: url("");
    background-size: 130px 84px
}

.logo-block.thenextweb {
    background-image: url("");
    background-size: 176px 42px
}

.logo-block.thenextweb:hover {
    background-image: url("");
    background-size: 176px 42px
}

.logo-block.seamless {
    background-image: url("");
    background-size: 176px 42px
}

.logo-block.seamless:hover {
    background-image: url("");
    background-size: 176px 42px
}

.logo-block.novohub {
    background-image: url("");
    background-size: 110px 66px
}

.logo-block.novohub:hover {
    background-image: url("");
    background-size: 110px 66px
}

.logo-block.pb {
    background-image: url("");
    background-size: 89px 45px
}

.logo-block.pb:hover {
    background-image: url("");
    background-size: 89px 45px
}

.logo-block:hover {
    background-color: transparent;
    -webkit-box-shadow: 0 10px 20px 0 rgba(0,0,0,.15);
    box-shadow: 0 10px 20px 0 rgba(0,0,0,.15);
    background-repeat: no-repeat;
    background-position: 50%
}

.logo-block:after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    z-index: -1;
    border-radius: 4px;
    background-image: linear-gradient(301deg,#3ed0fe,#085fe5);
    opacity: 0;
    -webkit-transition: all .3s linear;
    transition: all .3s linear
}

.logo-block:hover:after {
    opacity: 1
}

.border-block {
    position: relative;
    width: 100%;
    border-radius: 4px;
    display: block;
    border: 1px solid var(--grey-trd);
    padding-left: 20px;
    padding-right: 20px
}

.team-slider-wrap {
    display: block
}

#owl-team,.team-slider-wrap {
    position: relative;
    width: 100%
}

#owl-team {
    margin: 0 auto
}

#owl-team .item {
    position: relative;
    margin-left: 10px;
    margin-right: 10px;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer
}

#owl-team .item .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: -webkit-gradient(linear,left top,left bottom,from(rgba(48,43,99,.15)),color-stop(46%,rgba(44,40,86,.56)),to(#24243e));
    background-image: linear-gradient(180deg,rgba(48,43,99,.15),rgba(44,40,86,.56) 46%,#24243e);
    z-index: 2;
    opacity: .7;
    -webkit-transition: all .3s linear;
    transition: all .3s linear
}

#owl-team .item:hover .mask {
    opacity: 1
}

#owl-team .item .text {
    position: absolute;
    bottom: 30px;
    left: 0;
    width: 100%;
    z-index: 4;
    -webkit-transition: all .3s linear;
    transition: all .3s linear
}

#owl-team .item:hover .text {
    bottom: 105px
}

#owl-team .item p {
    position: absolute;
    bottom: -30px;
    left: 0;
    width: 100%;
    z-index: 6;
    opacity: 0;
    -webkit-transition: all .3s linear;
    transition: all .3s linear
}

#owl-team .item:hover p {
    bottom: 20px;
    opacity: 1
}

#owl-team .item img {
    width: 100%;
    height: auto;
    display: block
}

#owl-team.owl-theme .owl-controls {
    position: absolute;
    left: 0;
    text-align: center;
    bottom: 0;
    z-index: 100;
    width: 100%;
    z-index: 20
}

#owl-team.owl-theme .owl-controls .owl-page span {
    position: relative;
    background-color: var(--grey-trd);
    border-radius: 0;
    width: 20px;
    height: 6px;
    margin-left: 5px;
    margin-right: 5px;
    -webkit-transition: all .3s linear;
    transition: all .3s linear
}

#owl-team.owl-theme .owl-controls .owl-page span:hover {
    background-color: var(--blue)
}

#owl-team.owl-theme .owl-controls .owl-page.active span {
    background-color: var(--blue);
    width: 38px
}

#owl-team-2 {
    position: relative;
    width: 100%;
    margin: 0 auto
}

#owl-team-2 .item {
    position: relative;
    margin-left: 10px;
    margin-right: 10px;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer
}

#owl-team-2 .item .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: -webkit-gradient(linear,left top,left bottom,from(rgba(48,43,99,.15)),color-stop(46%,rgba(44,40,86,.56)),to(#24243e));
    background-image: linear-gradient(180deg,rgba(48,43,99,.15),rgba(44,40,86,.56) 46%,#24243e);
    z-index: 2;
    opacity: .7;
    -webkit-transition: all .3s linear;
    transition: all .3s linear
}

#owl-team-2 .item:hover .mask {
    opacity: 1
}

#owl-team-2 .item .text {
    position: absolute;
    bottom: 30px;
    left: 0;
    width: 100%;
    z-index: 4;
    -webkit-transition: all .3s linear;
    transition: all .3s linear
}

#owl-team-2 .item:hover .text {
    bottom: 105px
}

#owl-team-2 .item p {
    position: absolute;
    bottom: -30px;
    left: 0;
    width: 100%;
    z-index: 6;
    opacity: 0;
    -webkit-transition: all .3s linear;
    transition: all .3s linear
}

#owl-team-2 .item:hover p {
    bottom: 20px;
    opacity: 1
}

#owl-team-2 .item img {
    width: 100%;
    height: auto;
    display: block
}

#owl-team-2.owl-theme .owl-controls {
    position: absolute;
    left: 0;
    text-align: center;
    bottom: 0;
    z-index: 100;
    width: 100%;
    z-index: 20
}

#owl-team-2.owl-theme .owl-controls .owl-page span {
    position: relative;
    background-color: var(--grey-trd);
    border-radius: 0;
    width: 20px;
    height: 6px;
    margin-left: 5px;
    margin-right: 5px;
    -webkit-transition: all .3s linear;
    transition: all .3s linear
}

#owl-team-2.owl-theme .owl-controls .owl-page span:hover {
    background-color: var(--blue)
}

#owl-team-2.owl-theme .owl-controls .owl-page.active span {
    background-color: var(--blue);
    width: 38px
}

#owl-team-five {
    position: relative;
    width: 100%;
    margin: 0 auto
}

#owl-team-five .item {
    position: relative;
    margin-left: 10px;
    margin-right: 10px;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer
}

#owl-team-five .item .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: -webkit-gradient(linear,left top,left bottom,from(rgba(48,43,99,.15)),color-stop(46%,rgba(44,40,86,.56)),to(#24243e));
    background-image: linear-gradient(180deg,rgba(48,43,99,.15),rgba(44,40,86,.56) 46%,#24243e);
    z-index: 2;
    opacity: .7;
    -webkit-transition: all .3s linear;
    transition: all .3s linear
}

#owl-team-five .item:hover .mask {
    opacity: 1
}

#owl-team-five .item .text {
    position: absolute;
    bottom: 30px;
    left: 0;
    width: 100%;
    z-index: 4;
    -webkit-transition: all .3s linear;
    transition: all .3s linear
}

#owl-team-five .item:hover .text {
    bottom: 105px
}

#owl-team-five .item:hover .text.nh {
    bottom: 75px
}

#owl-team-five .item .logo-img-pub {
    position: absolute;
    top: 30px;
    left: 0;
    width: 100%;
    z-index: 24;
    margin: 0 auto;
    text-align: center
}

#owl-team-five .item .logo-img-pub img {
    margin: 0 auto;
    text-align: center;
    display: block;
    width: 90px;
    height: auto
}

#owl-team-five .item p {
    position: absolute;
    bottom: -30px;
    left: 0;
    width: 100%;
    z-index: 6;
    opacity: 0;
    -webkit-transition: all .3s linear;
    transition: all .3s linear
}

#owl-team-five .item:hover p {
    bottom: 20px;
    opacity: 1
}

#owl-team-five .item img {
    width: 100%;
    height: auto;
    display: block
}

#owl-team-five.owl-theme .owl-controls {
    position: absolute;
    left: 0;
    text-align: center;
    bottom: 0;
    z-index: 100;
    width: 100%;
    z-index: 20
}

#owl-team-five.owl-theme .owl-controls .owl-page span {
    position: relative;
    background-color: var(--grey-trd);
    border-radius: 0;
    width: 20px;
    height: 6px;
    margin-left: 5px;
    margin-right: 5px;
    -webkit-transition: all .3s linear;
    transition: all .3s linear
}

#owl-team-five.owl-theme .owl-controls .owl-page span:hover {
    background-color: var(--blue)
}

#owl-team-five.owl-theme .owl-controls .owl-page.active span {
    background-color: var(--blue);
    width: 38px
}

.home-hero-logo {
    width: 472px
}

.home-hero-logo img {
    width: 100%;
    height: auto;
    display: block
}

.hero-hex {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: block;
    z-index: -1
}

.hero-main-img {
    position: relative;
    width: 100%;
    max-width: 456px;
    margin: 0 auto;
    text-align: center;
    display: block
}

.hero-main-img img {
    width: 100%;
    height: auto;
    display: block
}

.hero-main-img:after {
    width: 500px;
    height: 500px;
    background-image: url("/img/hexagon_main_gradient.svg");
    -webkit-animation: fadeRing 3s linear infinite;
    animation: fadeRing 3s linear infinite
}

.hero-main-img:after,.hero-main-img:before {
    position: absolute;
    content: "";
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    z-index: -1;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: 50%;
    display: block
}

.hero-main-img:before {
    width: 600px;
    height: 600px;
    opacity: .12;
    background-image: url("/img/hexagon_ring_1_shape.svg");
    -webkit-animation: fadeRing-1 3s linear infinite;
    animation: fadeRing-1 3s linear infinite
}

.for-shape-1 {
    position: absolute;
    height: 100%;
    width: 500px; /* Increased width for a larger shape */
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.for-shape-1:before {
    width: 700px;
    height: 700px;
    opacity: 0.2; /* Increased opacity for better visibility */
    animation: spinRing-1 6s linear infinite; /* Adjusted animation duration */
}

.for-shape-1:after, .for-shape-1:before {
    position: absolute;
    content: "";
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    background-image: url("/img/hexagon_ring_1_shape.svg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
}

.for-shape-1:after {
    width: 800px;
    height: 800px;
    opacity: 0.15; /* Adjusted opacity for a subtle effect */
    animation: spinRing-2 7s linear infinite; /* Adjusted animation duration */
}

.for-shape-2 {
    position: absolute;
    height: 100%;
    width: 550px; /* Increased width for a larger shape */
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.for-shape-2:before {
    width: 850px;
    height: 850px;
    opacity: 0.18; /* Adjusted opacity for better balance */
    animation: spinRing-3 8s linear infinite; /* Adjusted animation duration */
}

.for-shape-2:after, .for-shape-2:before {
    position: absolute;
    content: "";
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    background-image: url("/img/hexagon_ring_1_shape.svg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
}

.for-shape-2:after {
    width: 950px;
    height: 950px;
    opacity: 0.12; /* Adjusted opacity for a subtle effect */
    animation: spinRing-4 9s linear infinite; /* Adjusted animation duration */
}

.for-shape-3 {
    position: absolute;
    height: 100%;
    width: 600px; /* Increased width for a larger shape */
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.for-shape-3:before {
    width: 1100px;
    height: 1100px;
    opacity: 0.2; /* Increased opacity for better visibility */
    animation: spinRing-5 10s linear infinite; /* Adjusted animation duration */
}

.for-shape-3:after, .for-shape-3:before {
    position: absolute;
    content: "";
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    background-image: url("/img/hexagon_ring_1_shape.svg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
}

.for-shape-3:after {
    width: 1200px;
    height: 1200px;
    opacity: 0.15; /* Adjusted opacity for a subtle effect */
    animation: spinRing-6 11s linear infinite; /* Adjusted animation duration */
}

@keyframes spinRing-1 {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes spinRing-2 {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(-360deg);
    }
}

@keyframes spinRing-3 {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes spinRing-4 {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(-360deg);
    }
}

@keyframes spinRing-5 {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes spinRing-6 {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(-360deg);
    }
}


@-webkit-keyframes fadeRing {
    0% {
        opacity: 1
    }

    8% {
        opacity: .4
    }

    16% {
        opacity: 1
    }

    to {
        opacity: 1
    }
}

@keyframes fadeRing {
    0% {
        opacity: 1
    }

    8% {
        opacity: .4
    }

    16% {
        opacity: 1
    }

    to {
        opacity: 1
    }
}

@-webkit-keyframes fadeRing-1 {
    0% {
        opacity: .12
    }

    15% {
        opacity: .12
    }

    20% {
        opacity: 0
    }

    25% {
        opacity: .12
    }

    to {
        opacity: .12
    }
}

@keyframes fadeRing-1 {
    0% {
        opacity: .12
    }

    15% {
        opacity: .12
    }

    20% {
        opacity: 0
    }

    25% {
        opacity: .12
    }

    to {
        opacity: .12
    }
}

@-webkit-keyframes fadeRing-2 {
    0% {
        opacity: .1
    }

    24% {
        opacity: .1
    }

    29% {
        opacity: 0
    }

    34% {
        opacity: .1
    }

    to {
        opacity: .1
    }
}

@keyframes fadeRing-2 {
    0% {
        opacity: .1
    }

    24% {
        opacity: .1
    }

    29% {
        opacity: 0
    }

    34% {
        opacity: .1
    }

    to {
        opacity: .1
    }
}

@-webkit-keyframes fadeRing-3 {
    0% {
        opacity: .08
    }

    33% {
        opacity: .08
    }

    38% {
        opacity: 0
    }

    43% {
        opacity: .08
    }

    to {
        opacity: .08
    }
}

@keyframes fadeRing-3 {
    0% {
        opacity: .08
    }

    33% {
        opacity: .08
    }

    38% {
        opacity: 0
    }

    43% {
        opacity: .08
    }

    to {
        opacity: .08
    }
}

@-webkit-keyframes fadeRing-4 {
    0% {
        opacity: .06
    }

    42% {
        opacity: .06
    }

    47% {
        opacity: 0
    }

    52% {
        opacity: .06
    }

    to {
        opacity: .06
    }
}

@keyframes fadeRing-4 {
    0% {
        opacity: .06
    }

    42% {
        opacity: .06
    }

    47% {
        opacity: 0
    }

    52% {
        opacity: .06
    }

    to {
        opacity: .06
    }
}

@-webkit-keyframes fadeRing-5 {
    0% {
        opacity: .04
    }

    51% {
        opacity: .04
    }

    56% {
        opacity: 0
    }

    61% {
        opacity: .04
    }

    to {
        opacity: .04
    }
}

@keyframes fadeRing-5 {
    0% {
        opacity: .04
    }

    51% {
        opacity: .04
    }

    56% {
        opacity: 0
    }

    61% {
        opacity: .04
    }

    to {
        opacity: .04
    }
}

@-webkit-keyframes fadeRing-6 {
    0% {
        opacity: .02
    }

    60% {
        opacity: .02
    }

    65% {
        opacity: 0
    }

    70% {
        opacity: .02
    }

    to {
        opacity: .02
    }
}

@keyframes fadeRing-6 {
    0% {
        opacity: .02
    }

    60% {
        opacity: .02
    }

    65% {
        opacity: 0
    }

    70% {
        opacity: .02
    }

    to {
        opacity: .02
    }
}

@-webkit-keyframes fadeRing-7 {
    0% {
        opacity: .005
    }

    69% {
        opacity: .005
    }

    74% {
        opacity: 0
    }

    79% {
        opacity: .005
    }

    to {
        opacity: .005
    }
}

@keyframes fadeRing-7 {
    0% {
        opacity: .005
    }

    69% {
        opacity: .005
    }

    74% {
        opacity: 0
    }

    79% {
        opacity: .005
    }

    to {
        opacity: .005
    }
}

.home-blue-logo {
    padding: 50px 20px;
    background-image: -webkit-gradient(linear,left bottom,left top,from(#3ed0fe),to(#085fe5));
    background-image: linear-gradient(0deg,#3ed0fe,#085fe5)
}

.home-blue-logo img {
    width: 125px;
    height: auto;
    display: block;
    margin: 0 auto;
    margin-bottom: 40px
}

.collaborate {
    padding: 72px 50px;
    background-image: url("/img/marketing.jpg");
    background-size: cover;
    background-position: 100%
}

.collaborate.on-work {
    background-image: url("/img/marketing.jpg")
}

.play-button-home {
    position: relative;
    display: block;
    width: 100px;
    margin: 0 auto;
    text-align: center;
    height: 100px;
    cursor: pointer;
    border-radius: 50%;
    background-color: rgba(16,20,47,.5);
    -webkit-transition: all .2s linear;
    transition: all .2s linear
}

.play-button-home .uil {
    line-height: 100px;
    color: var(--white);
    font-size: 30px;
    text-align: center
}

.play-button-home:hover {
    background-color: rgba(16,20,47,.8);
    -webkit-box-shadow: 0 10px 20px 0 rgba(0,0,0,.15);
    box-shadow: 0 10px 20px 0 rgba(0,0,0,.15)
}

.transform-story {
    position: relative;
    text-align: center;
    margin: 0 auto;
    padding: 0;
    display: block
}

.transform-story li {
    text-align: center;
    margin: 0 auto;
    margin-left: 60px;
    margin-right: 60px;
    list-style: none;
    display: inline-block;
    background-image: none!important
}

.transform-story li .hex-box {
    position: relative;
    text-align: center;
    margin: 0 auto;
    cursor: pointer;
    padding: 0;
    display: block;
    width: 122px;
    height: 132px;
    background-image: url("/img/hexagon_line_full.png");
    background-repeat: no-repeat;
    background-size: 122px 132px;
    background-position: 50%;
    background-color: var(--white);
    -webkit-transition: all .3s linear;
    transition: all .3s linear
}

.transform-story li .hex-box p {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.transform-story li .hex-box .uil,.transform-story li .hex-box p {
    font-size: 38px;
    color: var(--blue);
    -webkit-transition: all .3s linear;
    transition: all .3s linear
}

.transform-story li .hex-box .uil {
    line-height: 132px;
    text-align: center
}

.transform-story.pb-story li .hex-box .uil {
    line-height: 130px;
    font-size: 34px;
    color: #cbdeed
}

.transform-story li .hex-box .uil:before {
    margin-left: 0;
    margin-right: 0
}

.transform-story li .hex-box:hover .uil {
    color: var(--white)
}

.transform-story li .hex-box:hover {
    background-color: transparent
}

.transform-story li .hex-box:before {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    z-index: -1;
    width: 122px;
    height: 132px;
    background-image: url("/img/hexagon_filled_gradient.svg");
    background-repeat: no-repeat;
    background-size: 122px 132px;
    background-position: 50%;
    -webkit-filter: drop-shadow(0 5px 20px transparent);
    filter: drop-shadow(0 5px 20px rgba(0,0,0,0));
    -webkit-transition: all .3s linear;
    transition: all .3s linear
}

.transform-story.pb-story li .hex-box:before {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background-size: 130px 130px;
    -webkit-box-shadow: 0 16px 29px 0 rgba(0,0,0,.07);
    box-shadow: 0 16px 29px 0 rgba(0,0,0,.07);
    background-image: -webkit-gradient(linear,right top,left top,from(#073fe6),to(#0f61ff));
    background-image: linear-gradient(270deg,#073fe6,#0f61ff)
}

.transform-story li .hex-box:hover:before {
    -webkit-filter: drop-shadow(0 5px 20px rgba(0,0,0,.15));
    filter: drop-shadow(0 5px 20px rgba(0,0,0,.15))
}

.transform-story.pb-story li .hex-box:hover:before {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    -webkit-box-shadow: 0 16px 29px 0 rgba(0,0,0,.07);
    box-shadow: 0 16px 29px 0 rgba(0,0,0,.07);
    background-image: -webkit-gradient(linear,right top,left top,from(#073fe6),to(#0f61ff));
    background-image: linear-gradient(270deg,#073fe6,#0f61ff)
}

.transform-story.pb-story li.hovered .hex-box:after {
    opacity: 1
}

.transform-story li.hovered .hex-box {
    background-color: transparent;
    -webkit-transition: all .3s linear;
    transition: all .3s linear
}

.transform-story li.hovered .hex-box .uil {
    color: var(--white);
    -webkit-transition: all .3s linear;
    transition: all .3s linear
}

.transform-story li.hovered .hex-box:before {
    -webkit-filter: drop-shadow(0 5px 20px rgba(0,0,0,.15));
    filter: drop-shadow(0 5px 20px rgba(0,0,0,.15));
    -webkit-transition: all .3s linear;
    transition: all .3s linear
}

.transform-story.pb-story li.hovered .hex-box:before {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    -webkit-box-shadow: 0 16px 29px 0 rgba(0,0,0,.07);
    box-shadow: 0 16px 29px 0 rgba(0,0,0,.07);
    background-image: -webkit-gradient(linear,right top,left top,from(#073fe6),to(#0f61ff));
    background-image: linear-gradient(270deg,#073fe6,#0f61ff);
    -webkit-filter: none;
    filter: none
}

.transform-story.pb-story li .hex-box {
    background-image: none;
    width: 130px;
    height: 130px;
    background-size: 130px 130px;
    border-radius: 50%;
    background-image: -webkit-gradient(linear,right top,left top,from(#212d36),to(#2e3e49));
    background-image: linear-gradient(270deg,#212d36 0,#2e3e49)
}

.transform-story.pb-story li .hex-box:hover,.transform-story.pb-story li.hovered .hex-box {
    background-color: transparent;
    background-image: none
}

.transform-story li:first-child .hex-box:after,.transform-story li:nth-child(2) .hex-box:after,.transform-story li:nth-child(3) .hex-box:after {
    position: absolute;
    top: 0;
    right: -120px;
    content: "";
    z-index: 1;
    width: 120px;
    height: 100%;
    background-image: url("/img/steps-1.svg");
    background-repeat: no-repeat;
    background-size: 100px auto;
    background-position: 50%;
    -webkit-transition: all .3s linear;
    transition: all .3s linear
}

.transform-story li:nth-child(2) .hex-box:after {
    background-image: url("/img/steps-2.svg");
    background-position: bottom
}

.transform-story li:nth-child(3) .hex-box:after {
    background-image: url("/img/steps-3.svg");
    background-position: top
}

.transform-story.pb-story li:first-child .hex-box:after,.transform-story.pb-story li:nth-child(2) .hex-box:after {
    background-image: url("/img/steps-1-pb.svg");
    background-position: bottom
}

.transform-story.pb-story li:nth-child(2) .hex-box:after {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

.transform-story.pb-story li:nth-child(3) .hex-box:after {
    background-image: url("/img/steps-1-pb.svg");
    background-position: bottom
}

.transform-story.pb-story li.hovered:first-child .hex-box:after,.transform-story.pb-story li.hovered:nth-child(2) .hex-box:after,.transform-story.pb-story li.hovered:nth-child(3) .hex-box:after {
    background-image: url("/img/steps-1-pb-h.svg")
}

.transform-story.pb-story li.hovered:first-child .hex-box:hover:after {
    background-image: url("/img/hexagon_main_gradient.svg")
}

.bg-story-pb {
    background-image: -webkit-gradient(linear,right top,left top,from(#192229),to(#1b242b));
    background-image: linear-gradient(270deg,#192229,#1b242b)
}

.parallax-elements {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: perspective(300px);
    transform: perspective(300px)
}

.alert-style-fixed {
    position: fixed;
    background-image: -webkit-gradient(linear,left top,right top,from(#181818),to(#2f3640));
    background-image: linear-gradient(90deg,#181818,#2f3640);
    -webkit-box-shadow: 0 4px 10px 0 rgba(0,0,0,.1);
    box-shadow: 0 4px 10px 0 rgba(0,0,0,.1);
    z-index: 20000;
    width: 1110px;
    max-width: calc(100% - 40px);
    left: 50%;
    bottom: 0;
    padding: 10px 20px 10px 15px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    border-radius: 4px
}

.bottom-section-link {
    position: relative;
    width: 100%;
    height: 200px;
    border-radius: 4px;
    display: block;
    background-color: var(--grey-fth)
}

.bottom-section-link,.bottom-section-link p {
    -webkit-transition: all .2s linear;
    transition: all .2s linear
}

.bottom-section-link:hover {
    background-color: transparent
}

.bottom-section-link:hover p,.bottom-section-link p i {
    color: var(--dark)!important
}

.bottom-section-link p.snd-paragraph {
    opacity: 0;
    overflow: hidden;
    margin-top: 20px;
    -webkit-transition: all .2s linear;
    transition: all .2s linear
}

.bottom-section-link:hover p.snd-paragraph {
    opacity: 1;
    height: auto!important
}

.bottom-section-link:before {
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 4px;
    top: 0;
    left: 0;
    content: "";
    background-image: linear-gradient(99deg,#ffbf1a,#ffed0a);
    z-index: -1
}

.bottom-section-link-center {
    margin-top: 30px;
    position: absolute;
    width: 100%;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 2;
    -webkit-transition: all .2s linear;
    transition: all .2s linear
}

.bottom-section-link:hover .bottom-section-link-center {
    margin-top: 0
}

.project-wrap {
    position: relative;
    display: block;
    width: 100%;
    padding: 40px;
    border-radius: 4px
}

.project-wrap.blue {
    background-image: -webkit-gradient(linear,left bottom,left top,from(#3ed0fe),to(#085fe5));
    background-image: linear-gradient(0deg,#3ed0fe,#085fe5)
}

.project-wrap.purple {
    background-image: -webkit-gradient(linear,left bottom,left top,from(#5b1bf1),to(#5847af));
    background-image: linear-gradient(0deg,#5b1bf1,#5847af)
}

.project-wrap.pink {
    background-image: -webkit-gradient(linear,left bottom,left top,from(#d04a8e),to(#d04a8e));
    background-image: linear-gradient(0deg,#d04a8e,#e76c8e);
}

.project-wrap.relauncherpurple {
    background-image: -webkit-gradient(linear,left bottom,left top,from(#7D45A3),to(#7D45A3));
    background-image: linear-gradient(0deg,#7D45A3,#7D45A3);
}

.project-wrap.eduboardWhite {
    background-image: -webkit-gradient(linear,left bottom,left top,from(#8df074),to(#46b9eb));
    background-image: linear-gradient(0deg,#86ed6d,#46b9eb);
}

.project-wrap.designtelblue {
    background: linear-gradient(135deg, #f8f3fc, #e6f0ff, #dceffb, #f2d1e9);
}



.project-wrap.purple2 {
    background-image: -webkit-gradient(linear, left bottom, left top, from(#ba54f5), to(#8a2c8c));
    background-image: linear-gradient(0deg, #ba54f5, #8a2c8c);
}


.project-wrap.blue-light {
    background-image: -webkit-gradient(linear,left bottom,left top,from(#ddeaf5),to(#c6d3dd));
    background-image: linear-gradient(0deg,#ddeaf5,#c6d3dd)
}

.project-wrap.red {
    background-image: -webkit-gradient(linear,left top,left bottom,from(#e75735),to(#ff7c5d));
    background-image: linear-gradient(180deg,#e75735,#ff7c5d)
}

.project-wrap.dark {
    background-image: -webkit-gradient(linear,left bottom,left top,from(#263541),to(#141d23));
    background-image: linear-gradient(0deg,#263541,#141d23)
}

.project-wrap.dark.with-shadow {
    -webkit-box-shadow: 0 5px 15px 0 rgba(27,36,43,.3);
    box-shadow: 0 5px 15px 0 rgba(27,36,43,.3)
}

.project-wrap.blue img {
    -webkit-filter: drop-shadow(0 10px 30px rgba(138,155,165,.65));
    filter: drop-shadow(0 10px 30px rgba(138,155,165,.65))
}

.project-wrap.red img {
    -webkit-filter: drop-shadow(0 10px 30px rgba(138,155,165,.35));
    filter: drop-shadow(0 10px 30px rgba(138,155,165,.35))
}

.project-wrap.dark img {
    -webkit-filter: drop-shadow(37px -5px 58px rgba(0,0,0,.2));
    filter: drop-shadow(37px -5px 58px rgba(0,0,0,.2))
}

.blog-carousel {
    height: 386px;
    border-radius: 6px;
    background-size: cover;
    background-position: 50%;
    overflow: hidden;
    -webkit-transition: all .25s linear;
    transition: all .25s linear
}

.blog-carousel:hover {
    -webkit-box-shadow: 0 10px 20px 0 rgba(0,0,0,.15);
    box-shadow: 0 10px 20px 0 rgba(0,0,0,.15)
}

.blog-wrap-shadow-linear {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: -webkit-gradient(linear,left bottom,left top,from(#181818),to(rgba(47,54,64,0)));
    background-image: linear-gradient(0deg,#181818,rgba(47,54,64,0));
    z-index: 1
}

.blog-wrap-center {
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.blog-wrap-bottom,.blog-wrap-center {
    position: absolute;
    left: 0;
    width: 100%;
    padding: 40px;
    z-index: 3
}

.blog-wrap-bottom {
    bottom: 0;
    -webkit-transform: translateY(52px);
    transform: translateY(52px)
}

.blog-wrap-bottom,.blog-wrap-bottom p {
    -webkit-transition: all .25s linear;
    transition: all .25s linear
}

.blog-wrap-bottom p {
    opacity: 0;
    visibility: hidden
}

.blog-carousel:hover .blog-wrap-bottom p {
    opacity: 1;
    visibility: visible
}

.blog-carousel:hover .blog-wrap-bottom {
    -webkit-transform: translateY(0);
    transform: translateY(0)
}

.blog-carousel a:hover {
    text-decoration: none
}

.blog-carousel a h4 {
    -webkit-transition: all .25s linear;
    transition: all .25s linear
}

.blog-carousel a h4:hover {
    opacity: .8
}

.blog-share {
    position: absolute;
    top: 40px;
    right: 40px;
    width: 56px;
    height: 28px;
    font-size: 15px;
    line-height: 28px;
    text-align: center;
    color: var(--white);
    cursor: pointer;
    z-index: 5;
    border-radius: 4px;
    background-color: hsla(0,0%,100%,.1);
    -webkit-transition: all .2s linear;
    transition: all .2s linear
}

.blog-share:hover {
    background-color: hsla(0,0%,100%,.2);
    color: var(--white)
}

.blog-share-tooltip {
    position: absolute;
    width: 300px;
    right: 0;
    top: calc(100% + 10px);
    padding: 20px;
    border-radius: 4px;
    -webkit-box-shadow: 0 8px 20px 0 rgba(0,0,0,.1);
    box-shadow: 0 8px 20px 0 rgba(0,0,0,.1);
    background-color: var(--white);
    visibility: hidden;
    opacity: 0;
    -webkit-transform: translateY(15px);
    transform: translateY(15px);
    -webkit-transition: all .2s linear;
    transition: all .2s linear
}

.blog-share:hover .blog-share-tooltip {
    visibility: visible;
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0)
}

.blog-share-tooltip:before {
    position: absolute;
    content: "";
    top: -10px;
    right: 0;
    height: 10px;
    width: 100%;
    background-color: transparent
}

.blog-carousel .blog-share {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px)
}

.blog-carousel:hover .blog-share {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0)
}

.blog-wrap-blue-linear-dark {
    background-image: -webkit-gradient(linear,left bottom,left top,from(#0575e6),to(#021b79));
    background-image: linear-gradient(0deg,#0575e6,#021b79)
}

.blog-wrap-blue-linear-light {
    background-image: -webkit-gradient(linear,left bottom,left top,from(#3ed0fe),to(#085fe5));
    background-image: linear-gradient(0deg,#3ed0fe,#085fe5)
}

.uil:before {
    margin-left: 0;
    margin-right: 0
}

.filter-blog {
    position: relative;
    display: block;
    list-style: none
}

.filter-blog,.filter-blog li {
    padding: 0;
    margin: 0 auto;
    text-align: center
}

.filter-blog li {
    display: inline-block
}

.btn-blog-tags.active {
    background-color: transparent;
    -webkit-box-shadow: 0 4px 10px 0 rgba(0,0,0,.1);
    box-shadow: 0 4px 10px 0 rgba(0,0,0,.1);
    color: var(--white);
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out
}

.btn-blog-tags.active:before {
    vidibility: visible;
    opacity: 1
}

.mix {
    display: none
}

#Container {
    -webkit-backface-visibility: hidden
}

#Container:after {
    content: "";
    display: inline-block;
    width: 100%
}

.post-share {
    position: relative;
    width: 56px;
    height: 28px;
    font-size: 15px;
    line-height: 28px;
    display: block;
    margin: 0 auto;
    text-align: center;
    color: var(--white);
    cursor: pointer;
    z-index: 5;
    border-radius: 4px;
    background-color: hsla(0,0%,100%,.1);
    -webkit-transition: all .2s linear;
    transition: all .2s linear
}

.post-share:hover {
    background-color: var(--dark);
    color: var(--white)
}

.post-share .blog-share-tooltip {
    left: 50%;
    right: auto;
    margin-left: -150px;
    top: auto;
    bottom: 38px;
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px)
}

.post-share .blog-share-tooltip:before {
    top: auto;
    bottom: -10px
}

.post-share:hover .blog-share-tooltip {
    visibility: visible;
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0)
}

.post-avatar,.post-avatar img {
    margin: 0 auto;
    text-align: center
}

.post-avatar img {
    width: 40px;
    height: 40px;
    border-radius: 2px;
    -webkit-box-shadow: 0 4px 10px 0 rgba(0,0,0,.1);
    box-shadow: 0 4px 10px 0 rgba(0,0,0,.1)
}

.blog-post-image {
    background-size: cover;
    background-position: 50%
}

.uil-no-margin:before {
    width: auto;
    margin-right: 0;
    margin-left: 0
}

.partners {
    position: relative;
    width: 100%;
    height: 180px;
    border-radius: 4px;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: auto;
    background-color: transparent;
    -webkit-transition: all .2s linear;
    transition: all .2s linear
}

.partners:hover {
    background-color: var(--grey-fth)
}

.partners.logo-1 {
    background-image: url("/img/clients/emslogo1\ \(1\).png")
}

.partners.logo-2 {
    background-image: url("/img/clients/techlearn.png")
}

.partners.logo-3 {
    background-image: url("/img/clients/founderstudio.jfif");
}

.partners.logo-4 {
    background-image: url("/img/clients/image\ \(11\).png")
}

.partners.logo-5 {
    background-image: url("/img/clients/finder_GBT.png")
}

.partners.logo-6 {
    background-image: url("/img/clients/revision_2_R-NoBG.png");
   background-size: contain;
    background-position: bottom;
    width: 101px;
    height: 147px;
    border-radius: 50%;
}


.partners.logo-1:hover {
    background-image: url("/img/clients/emslogo1\ \(1\).png")
}

.partners.logo-2:hover {
    background-image: url("/img/clients/techlearn.png")
}

.partners.logo-3:hover {
    background-image: url("/img/clients/founderstudio.jfif")
}

.partners.logo-4:hover {
    background-image: url("/img/clients/image\ \(11\).png")
}

.partners.logo-5:hover {
    background-image: url("/img/clients/finder_GBT.png")
}

.partners.logo-6:hover {
    background-image: url("/img/clients/cropped-cropped-newlogo.png");
    background-size: contain;
    background-position: bottom;
    width: 101px;
    height: 147px;
    border-radius: 50%;
}

.word-about {
    position: relative;
    width: 100%;
    padding: 60px;
    border-radius: 4px;
    -webkit-box-shadow: 0 10px 20px 0 rgba(0,0,0,.15);
    box-shadow: 0 10px 20px 0 rgba(0,0,0,.15);
    background-image: -webkit-gradient(linear,left bottom,left top,from(#3ed0fe),to(#085fe5));
    background-image: linear-gradient(0deg,#3ed0fe,#085fe5);
    -webkit-transition: all .2s linear;
    transition: all .2s linear
}

.word-about img {
    width: 273px;
    height: auto;
    display: block;
    margin: 0 auto;
    text-align: center
}

.about-hover-list {
    border-radius: 4px;
    border: solid 1px var(--grey-trd);
    padding: 30px 40px;
    cursor: pointer;
    overflow: hidden;
    background-color: var(--white);
    -webkit-transition: all .2s linear;
    transition: all .2s linear
}

.about-hover-list .uil:before {
    margin-left: 0;
    margin-right: 0;
    width: 22px
}

.about-hover-list:before {
    position: absolute;
    content: "";
    border-radius: 4px;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: -webkit-gradient(linear,left top,left bottom,from(#ffbf1a),to(#ffed0a));
    background-image: linear-gradient(180deg,#ffbf1a,#ffed0a);
    z-index: -1
}

.about-hover-list:hover {
    border-color: transparent;
    background-color: transparent;
    -webkit-box-shadow: 0 5px 10px 0 rgba(0,0,0,.05);
    box-shadow: 0 5px 10px 0 rgba(0,0,0,.05)
}

.about-hover-list p {
    margin-left: 33px;
    color: var(--bali-hai);
    -webkit-transition: all .2s linear;
    transition: all .2s linear
}

.about-hover-list:hover p {
    color: var(--dark)
}

.about-cof-wrap {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    border-radius: 4px;
    cursor: pointer;
    -webkit-transition: all .2s linear;
    transition: all .2s linear
}

.about-cof-wrap:hover {
    -webkit-box-shadow: 0 10px 20px 0 rgba(0,0,0,.15);
    box-shadow: 0 10px 20px 0 rgba(0,0,0,.15)
}

.about-cof-wrap img {
    width: 100%;
    height: auto;
    display: block
}

.about-cof-wrap-over {
    height: 100%;
    top: 0;
    z-index: 1;
    background-image: -webkit-gradient(linear,left top,left bottom,from(rgba(48,43,99,0)),color-stop(46%,rgba(44,40,86,.36)),to(#24243e));
    background-image: linear-gradient(180deg,rgba(48,43,99,0),rgba(44,40,86,.36) 46%,#24243e)
}

.about-cof-wrap-over,.about-cof-wrap-over-text {
    position: absolute;
    display: block;
    width: 100%;
    left: 0;
    -webkit-transition: all .2s linear;
    transition: all .2s linear
}

.about-cof-wrap-over-text {
    bottom: -80px;
    z-index: 2
}

.about-cof-wrap-over-text h3 {
    padding-bottom: 40px;
    -webkit-transition: all .2s linear;
    transition: all .2s linear
}

.about-cof-wrap:hover .about-cof-wrap-over-text h3 {
    padding-bottom: 0
}

.about-cof-wrap:hover .about-cof-wrap-over-text {
    bottom: 40px
}

.linear-grad-yellow-icon .icon-love:before {
    vertical-align: text-bottom;
    -webkit-filter: drop-shadow(0 2px 10px rgba(11,20,34,.3));
    filter: drop-shadow(0 2px 10px rgba(11,20,34,.3));
    background-image: linear-gradient(132deg,#ffb52d,#ffed0a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.linear-grad-yellow-icon .icon-love {
    vertical-align: text-bottom
}

.modal-content {
    width: 100%;
    max-width: 580px;
    -webkit-font-smoothing: subpixel-antialiased
}

.modal-body .close {
    position: absolute;
    width: 54px;
    height: 34px;
    border-radius: 4px;
    top: 20px;
    right: 20px;
    padding: 0;
    margin: 0;
    opacity: 1;
    line-height: 34px;
    font-size: 18px;
    text-shadow: none;
    font-weight: 400;
    background-color: var(--grey-fth);
    color: var(--bali-hai);
    cursor: pointer;
    z-index: 100;
    -webkit-transition: all .2s linear;
    transition: all .2s linear
}

.modal-body .close:hover {
    background-color: var(--blue);
    color: var(--white)
}

.modal-body .close:active,.modal-body .close:focus {
    border: none;
    outline: none;
    -webkit-box-shadow: none;
    box-shadow: none
}

.modal-dialog {
    position: absolute;
    width: auto;
    top: 50%;
    left: 50%;
    margin: 0 auto;
    pointer-events: none;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    width: 100%;
    max-width: 580px;
    margin: 0;
    padding: 0;
    border-radius: 4px;
    max-height: 100vh
}

.modal.fade .modal-dialog {
    transition: -webkit-transform .3s ease-out;
    -webkit-transition: -webkit-transform .3s ease-out;
    transition: transform .3s ease-out;
    transition: transform .3s ease-out,-webkit-transform .3s ease-out;
    -webkit-transform: translate(-50%,-55%);
    transform: translate(-50%,-55%)
}

@media (prefers-reduced-motion:reduce) {
    .modal.fade .modal-dialog {
        -webkit-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%)
    }
}

.modal {
    z-index: 1121050;
    margin: 0;
    padding: 0;
    border-radius: 4px
}

.modal-backdrop {
    z-index: 1121040;
    background-color: var(--dark)
}

.modal-backdrop.show {
    opacity: .4
}

.modal.show .modal-dialog {
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%)
}

.modal-body {
    margin: 0;
    padding: 60px 35px;
    border-radius: 4px
}

.modal-content {
    border: none;
    margin: 0;
    padding: 0
}

.modal-content {
    poasition: relative;
    overflow: hidden;
    -webkit-box-shadow: 0 0 40px 0 rgba(0,0,0,.15);
    box-shadow: 0 0 40px 0 rgba(0,0,0,.15);
    background-color: var(--white);
    border-radius: 4px
}

[type=checkbox]:checked,[type=checkbox]:not(:checked),[type=radio]:checked,[type=radio]:not(:checked) {
    position: absolute;
    left: -9999px;
    width: 0;
    height: 0;
    visibility: hidden
}

.checkbox-contact:checked+label,.checkbox-contact:not(:checked)+label {
    position: relative;
    display: inline-block;
    float: left;
    padding: 20px 0;
    width: calc(33.333333333% - 10px);
    font-size: 16px;
    line-height: 24px;
    letter-spacing: .2px;
    margin: 0 auto;
    margin-left: 5px;
    margin-right: 5px;
    text-align: center;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    color: var(--bali-hai);
    -webkit-transition: all .3s linear;
    transition: all .3s linear
}

.checkbox-contact:not(:checked)+label {
    background-color: var(--grey-fth)
}

.checkbox-contact:checked+label {
    background-color: transparent;
    color: var(--white);
    -webkit-box-shadow: 0 10px 20px 0 rgba(0,0,0,.15);
    box-shadow: 0 10px 20px 0 rgba(0,0,0,.15)
}

.checkbox-contact:not(:checked)+label:hover {
    -webkit-box-shadow: 0 10px 20px 0 rgba(0,0,0,.05);
    box-shadow: 0 10px 20px 0 rgba(0,0,0,.05)
}

.checkbox-contact:checked+label:before,.checkbox-contact:not(:checked)+label:before {
    position: absolute;
    content: "";
    top: 0;
    display: block;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    background-image: -webkit-gradient(linear,left bottom,left top,from(#3ed0fe),to(#085fe5));
    background-image: linear-gradient(0deg,#3ed0fe,#085fe5);
    z-index: -1;
    visibility: visible;
    -webkit-transition: all .2s linear;
    transition: all .2s linear
}

.checkbox-contact:not(:checked)+label:before,.for-company {
    visibility: hidden
}

.for-company {
    opacity: 0;
    max-height: 0;
    padding-top: 0!important;
    -webkit-transition: all .25s linear;
    transition: all .25s linear
}

#contact-project:checked~.for-company {
    visibility: visible;
    opacity: 1;
    max-height: 200px;
    padding-top: 30px!important
}

.for-career {
    visibility: hidden;
    opacity: 0;
    max-height: 0;
    padding-top: 0!important;
    -webkit-transition: all .25s linear;
    transition: all .25s linear
}

#career:checked~.for-career {
    visibility: visible;
    opacity: 1;
    max-height: 200px;
    padding-top: 30px!important
}

.nice-select {
    -webkit-tap-highlight-color: var(--white);
    background-color: var(--white)!important;
    border: 1px solid #edeeef!important;
    border-radius: 4px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    clear: both;
    cursor: pointer;
    display: block;
    color: var(--bali-hai);
    float: left;
    overflow: hidden;
    font-family: inherit;
    font-size: 16px;
    line-height: 32px;
    letter-spacing: .2px;
    outline: none;
    padding: 14px 20px;
    padding-top: 15px;
    padding-bottom: 13px;
    padding-left: 60px;
    height: 60px;
    position: relative;
    text-align: left!important;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    white-space: nowrap;
    width: auto
}

.nice-select.open {
    overflow: visible
}

.nice-select.open,.nice-select:hover {
    background-color: var(--white);
    border: none
}

.nice-select:after {
    border-bottom: 2px solid var(--grey-fifth);
    border-right: 2px solid var(--grey-fifth);
    content: "";
    display: block;
    height: 8px;
    width: 8px;
    margin-top: -4px;
    pointer-events: none;
    position: absolute;
    right: 20px;
    top: 50%;
    -webkit-transform-origin: 66% 66%;
    transform-origin: 66% 66%;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: all .15s ease-in-out;
    transition: all .15s ease-in-out
}

.nice-select.open:after {
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg)
}

.nice-select.open .list {
    opacity: 1;
    pointer-events: auto;
    -webkit-transform: translateY(0);
    transform: translateY(0)
}

.nice-select.disabled {
    color: var(--black);
    pointer-events: none
}

.nice-select.disabled,.nice-select.disabled:after {
    border-color: var(--grey);
    border: none
}

/* Styles for the .nice-select.wide list */
.nice-select.wide .list {
    left: 0!important;
    right: 0!important;
    border: none;
    max-height: 200px; /* Adjust as needed */
    overflow-y: auto;  /* Enable vertical scrolling */
    overflow-x: hidden; /* Prevent horizontal scrolling */
    position: absolute; /* Ensure the dropdown is positioned correctly */
    z-index: 1000; /* Ensure dropdown is on top of other elements */
    background-color: #fff; /* Ensure readability with background color */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Optional: Adds shadow for better visibility */
}

/* Webkit-based browsers (Chrome, Safari, Edge) */
.nice-select.wide .list::-webkit-scrollbar {
    width: 12px; /* Width of the scrollbar */
}

.nice-select.wide .list::-webkit-scrollbar-thumb {
    background-color: #888; /* Color of the scrollbar handle */
    border-radius: 6px; /* Rounded corners for the scrollbar handle */
}

.nice-select.wide .list::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* Color of the scrollbar handle on hover */
}

.nice-select.wide .list::-webkit-scrollbar-track {
    background-color: #f1f1f1; /* Color of the scrollbar track */
}




.nice-select.right {
    float: right;
    border: none
}

.nice-select.right .list {
    left: auto;
    right: 0;
    border: none
}

.nice-select.small {
    font-size: 12px;
    height: 36px;
    line-height: 34px;
    border: none
}

.nice-select.small:after {
    height: 4px;
    width: 4px;
    border: none
}

.nice-select.small .option {
    line-height: 34px;
    min-height: 34px;
    border: none
}

.nice-select .list {
    background-color: var(--white);
    border-radius: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-top: 3px;
    opacity: 0;
    overflow: hidden;
    overflow-y: auto;
    max-height: 213px;
    -webkit-box-shadow: 0 3px 8px 0 rgba(0,0,0,.04);
    box-shadow: 0 3px 8px 0 rgba(0,0,0,.04);
    padding: 0;
    pointer-events: none;
    position: absolute;
    width: 100%;
    left: 0;
    margin-left: 0;
    top: 100%;
    color: var(--bali-hai);
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
    -webkit-transition: all .3s linear,opacity .15s ease-out;
    transition: all .3s linear,opacity .15s ease-out;
    z-index: 9;
    border: 1px solid #edeeef!important;
    border-radius: 4px
}

.nice-select .list::-webkit-scrollbar {
    width: 5px
}

.nice-select .list::-webkit-scrollbar-track {
    background-color: var(-dark)
}

.nice-select .list::-webkit-scrollbar-thumb,.nice-select .list::-webkit-scrollbar-thumb:hover {
    background-color: var(--bali-hai)
}

.nice-select .option {
    cursor: pointer;
    list-style: none;
    font-size: 14px;
    color: var(--bali-hai);
    outline: none;
    padding: 11px 15px 11px 20px;
    text-align: left;
    -webkit-transition: all .2s;
    transition: all .2s;
    background-color: var(--white);
    border: none
}

.nice-select .option.focus,.nice-select .option.selected.focus,.nice-select .option:hover {
    background-color: var(--grey);
    border: none
}

.nice-select .option.selected:hover,.nice-select .option:hover {
    color: var(--bali-hai)
}

.nice-select .option.disabled {
    background-color: transparent;
    color: var(--black);
    cursor: default;
    border: none
}

.no-csspointerevents .nice-select .list {
    display: none
}

.no-csspointerevents .nice-select.open .list {
    display: block
}

.box-border-wrap {
    border-radius: 4px;
    border: 1px solid #edeeef;
    padding: 40px
}

.check-list-wrap {
    padding: 8px 10px;
    background-color: #f8fbfe
}

.check-list-wrap,.positions-wrap {
    position: relative;
    display: block;
    border-radius: 4px;
    width: 100%
}

.positions-wrap {
    overflow: hidden;
    height: 220px;
    background-color: transparent;
    cursor: pointer
}

.positions-wrap-center {
    position: absolute;
    left: 0;
    top: 50%;
    display: block;
    width: 100%;
    z-index: 3;
    padding-left: 25px;
    padding-right: 25px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.currently-text {
    background-color: hsla(0,0%,100%,.1);
    padding: 4px 20px
}

.positions-wrap:before {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 4px;
    content: "";
    -webkit-transition: all .2s linear;
    transition: all .2s linear;
    background-image: -webkit-gradient(linear,left bottom,left top,from(#3ed0fe),to(#085fe5));
    background-image: linear-gradient(0deg,#3ed0fe,#085fe5);
    z-index: -1;
    width: 100%;
    height: 100%;
    visibility: hidden;
    opacity: 0
}

.positions-wrap:hover:before {
    visibility: visible;
    opacity: 1
}

.positions-wrap:after {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 4px;
    content: "";
    -webkit-transition: all .2s linear;
    transition: all .2s linear;
    background-color: #f8fbfe;
    z-index: -1;
    width: 100%;
    height: 100%
}

.positions-wrap:hover:after {
    top: 2px;
    left: 2px;
    width: calc(100% - 4px);
    height: calc(100% - 4px)
}

.positions-wrap.active:after,.positions-wrap.active:hover:after {
    opacity: 0
}

.positions-wrap.active:before {
    visibility: visible;
    opacity: 1
}

.positions-wrap.active {
    -webkit-box-shadow: 0 10px 20px 0 rgba(0,0,0,.15);
    box-shadow: 0 10px 20px 0 rgba(0,0,0,.15)
}

.expert-wrap {
    border-radius: 4px;
    overflow: hidden;
    width: 100%;
    padding: 50px
}

.expert-wrap,.hex-box-expert {
    position: relative;
    display: block;
    background-color: #f8fbfe;
    cursor: pointer
}

.hex-box-expert {
    text-align: center;
    margin: 0 auto;
    padding: 0;
    width: 122px;
    height: 132px;
    background-image: url("/img/hexagon_line_full.png");
    background-repeat: no-repeat;
    background-size: 122px 132px;
    background-position: 50%;
    -webkit-transition: all .3s linear;
    transition: all .3s linear
}

.hex-box-expert p {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-size: 38px
}

.hex-box-expert .uil,.hex-box-expert p {
    color: var(--blue);
    -webkit-transition: all .3s linear;
    transition: all .3s linear
}

.hex-box-expert .uil {
    line-height: 132px;
    font-size: 36px;
    text-align: center
}

.hex-box-expert .uil:before {
    margin-left: 0;
    margin-right: 0
}

.expert-wrap:hover .hex-box-expert .uil {
    color: var(--white)
}

.expert-wrap:hover .hex-box-expert {
    background-color: transparent
}

.hex-box-expert:before {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    z-index: -1;
    width: 122px;
    height: 132px;
    background-image: url("/img/hexagon_filled_gradient.svg");
    background-repeat: no-repeat;
    background-size: 122px 132px;
    background-position: 50%;
    -webkit-filter: drop-shadow(0 5px 20px transparent);
    filter: drop-shadow(0 5px 20px rgba(0,0,0,0));
    -webkit-transition: all .3s linear;
    transition: all .3s linear
}

.expert-wrap:hover .hex-box-expert:before {
    -webkit-filter: drop-shadow(0 5px 20px rgba(0,0,0,.15));
    filter: drop-shadow(0 5px 20px rgba(0,0,0,.15))
}

.form-group {
    position: relative;
    display: block
}

.form-style {
    padding: 14px 20px;
    padding-top: 15px;
    padding-bottom: 13px;
    height: 60px;
    width: 100%;
    border-radius: 4px;
    font-size: 16px;
    line-height: 32px;
    letter-spacing: .2px;
    outline: none;
    border: 1px solid #edeeef;
    background-color: var(--white);
    -webkit-transition: all .2s linear;
    transition: all .2s linear
}

textarea.form-style {
    height: 120px
}

.form-style.message {
    height: 150px
}

.form-style:active,.form-style:focus {
    border: solid 1px var(--blue);
    outline: none;
    -webkit-box-shadow: none;
    box-shadow: none
}

.form-style-with-icon {
    padding-left: 60px
}

.input-icon {
    left: 0;
    width: 60px;
    font-size: 22px;
    color: var(--bali-hai)
}

.input-icon,.input-icon-right {
    position: absolute;
    top: 0;
    height: 60px;
    line-height: 60px;
    text-align: center;
    -webkit-transition: all .2s linear;
    transition: all .2s linear;
    z-index: 2
}

.input-icon-right {
    right: 15px;
    font-size: 16px;
    color: var(--grey-fifth)
}

.form-style-text-over {
    position: absolute;
    z-index: 2;
    top: -10px;
    left: 10px;
    height: 20px;
    font-size: 13px;
    line-height: 20px;
    font-weight: 500;
    padding: 0 10px;
    color: var(--dark);
    background-color: var(--white);
    -webkit-transition: all .2s linear;
    transition: all .2s linear
}

.form-group input:-ms-input-placeholder {
    color: var(--bali-hai);
    opacity: 1;
    -webkit-transition: all .2s linear;
    transition: all .2s linear
}

.form-group input:-moz-placeholder,.form-group input::-moz-placeholder {
    color: var(--bali-hai);
    opacity: 1;
    -webkit-transition: all .2s linear;
    transition: all .2s linear
}

.form-group input::-webkit-input-placeholder {
    color: var(--bali-hai);
    opacity: 1;
    -webkit-transition: all .2s linear;
    transition: all .2s linear
}

.form-group textarea:-ms-input-placeholder {
    color: var(--bali-hai);
    opacity: 1;
    -webkit-transition: all .2s linear;
    transition: all .2s linear
}

.form-group textarea:-moz-placeholder,.form-group textarea::-moz-placeholder {
    color: var(--bali-hai);
    opacity: 1;
    -webkit-transition: all .2s linear;
    transition: all .2s linear
}

.form-group textarea::-webkit-input-placeholder {
    color: var(--bali-hai);
    opacity: 1;
    -webkit-transition: all .2s linear;
    transition: all .2s linear
}

.form-group input:focus:-ms-input-placeholder {
    opacity: 0;
    -webkit-transition: all .2s linear;
    transition: all .2s linear
}

.form-group input:focus:-moz-placeholder,.form-group input:focus::-moz-placeholder {
    opacity: 0;
    -webkit-transition: all .2s linear;
    transition: all .2s linear
}

.form-group input:focus::-webkit-input-placeholder {
    opacity: 0;
    -webkit-transition: all .2s linear;
    transition: all .2s linear
}

.form-group textarea:focus:-ms-input-placeholder {
    opacity: 0;
    -webkit-transition: all .2s linear;
    transition: all .2s linear
}

.form-group textarea:focus:-moz-placeholder,.form-group textarea:focus::-moz-placeholder {
    opacity: 0;
    -webkit-transition: all .2s linear;
    transition: all .2s linear
}

.form-group textarea:focus::-webkit-input-placeholder {
    opacity: 0;
    -webkit-transition: all .2s linear;
    transition: all .2s linear
}

.form-group input:active:-ms-input-placeholder {
    opacity: 0;
    -webkit-transition: all .2s linear;
    transition: all .2s linear
}

.form-group input:active:-moz-placeholder,.form-group input:active::-moz-placeholder {
    opacity: 0;
    -webkit-transition: all .2s linear;
    transition: all .2s linear
}

.form-group input:active::-webkit-input-placeholder {
    opacity: 0;
    -webkit-transition: all .2s linear;
    transition: all .2s linear
}

.form-group textarea:active:-ms-input-placeholder {
    opacity: 0;
    -webkit-transition: all .2s linear;
    transition: all .2s linear
}

.form-group textarea:active:-moz-placeholder,.form-group textarea:active::-moz-placeholder {
    opacity: 0;
    -webkit-transition: all .2s linear;
    transition: all .2s linear
}

.form-group textarea:active::-webkit-input-placeholder {
    opacity: 0;
    -webkit-transition: all .2s linear;
    transition: all .2s linear
}

.form-group.form-group--error .form-style-text-over {
    color: red
}

.form-group.form-group--error input {
    border: 1px solid red;
    color: red;
    -webkit-transition: all .2s linear;
    transition: all .2s linear
}

.form-group.form-group--error .form-group--error-text {
    margin-bottom: 5px!important;
    max-height: auto;
    margin-top: 3px
}

.form-group .form-group--error-text,.form-group.form-group--error .form-group--error-text {
    color: red;
    font-size: 13px;
    line-height: 18px;
    -webkit-transition: all .2s linear;
    transition: all .2s linear
}

.form-group .form-group--error-text {
    margin-bottom: 0!important;
    max-height: 0
}

.btn-upload {
    position: relative;
    z-index: 1;
    padding: 14px 20px;
    padding-left: 60px;
    padding-top: 15;
    padding-bottom: 13px;
    height: 60px;
    width: 100%;
    border-radius: 4px;
    font-size: 16px;
    text-align: left;
    line-height: 32px;
    letter-spacing: .2px;
    outline: none;
    border: 1px solid #edeeef;
    -webkit-transition: all .2s linear;
    transition: all .2s linear
}

.btn-upload,.btn-upload:hover {
    color: var(--bali-hai);
    background-color: var(--white)
}

.btn-upload:active,.btn-upload:focus {
    border: 1px solid #edeeef;
    outline: none;
    -webkit-box-shadow: none;
    box-shadow: none
}

.for-file-upload {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 2000;
    cursor: pointer
}

.page-header-background {
    background-image: url("/img/page-h.jpg");
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: cover
}

.app-section {
    padding: 60px 80px;
    overflow: hidden;
    background-color: #f9f9fb
}

.road-back {
    background-image: url("");
    background-position: 100% 0;
    background-size: auto 380px
}

.nh-back,.road-back {
    background-repeat: no-repeat
}

.nh-back {
    background-image: url("");
    background-position: 50%;
    background-size: cover;
    background-color: #fff;
    border: 1px solid #edeeef
}

.pb-back {
    background-image: url();
    background-position: 100% 100%;
    background-size: auto 380px;
    background-repeat: no-repeat
}

.project-requirements {
    position: relative;
    overflow: hidden;
    padding: 12px 0;
    line-height: 24px;
    cursor: pointer;
    font-size: 16px;
    text-align: center;
    color: var(--bali-hai);
    background-color: var(--white);
    border-radius: 4px;
    border: 1px solid #edeeef;
    -webkit-transition: all .25s linear;
    transition: all .25s linear
}

.project-requirements.process {
    color: #11132f;
    font-weight: 500;
    border: 1px solid #c6d3dd;
    padding: 16px 0;
    line-height: 32px;
    padding-top: 19px
}

.project-requirements:hover {
    color: var(--white);
    -webkit-box-shadow: 0 10px 20px 0 rgba(0,0,0,.15);
    box-shadow: 0 10px 20px 0 rgba(0,0,0,.15);
    background-color: transparent;
    z-index: 2
}

.project-requirements:before {
    position: absolute;
    background-image: -webkit-gradient(linear,left top,left bottom,from(#ffbf1a),to(#ffed0a));
    background-image: linear-gradient(180deg,#ffbf1a,#ffed0a);
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    z-index: -1;
    height: 100%;
    border-radius: 4px;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all .25s linear;
    transition: all .25s linear
}

.project-requirements:hover:before {
    opacity: 1;
    visibility: visible
}

.img-shadow-1 {
    -webkit-box-shadow: 0 10px 30px 0 rgba(42,34,64,.1);
    box-shadow: 0 10px 30px 0 rgba(42,34,64,.1)
}

.img-shadow-in {
    -webkit-filter: drop-shadow(0 10px 30px rgba(138,155,165,.2));
    filter: drop-shadow(0 10px 30px rgba(138,155,165,.2))
}

.grad-img {
    width: 55px;
    padding-bottom: 15px
}

.grad-img img {
    height: auto
}

.grad-box,.grad-img img {
    width: 100%;
    display: block
}

.grad-box {
    position: relative;
    border-radius: 4px;
    padding: 20px;
    padding-left: 70px;
    background-color: #f9f9fb;
    margin-top: 10px;
    line-height: 24px;
    cursor: pointer;
    color: #889eaa!important;
    -webkit-transition: all .2s linear;
    transition: all .2s linear
}

.grad-box:hover {
    background-color: transparent;
    -webkit-box-shadow: 0 5px 15px 0 rgba(0,129,255,.3);
    box-shadow: 0 5px 15px 0 rgba(0,129,255,.3);
    color: var(--white)!important;
    z-index: 6
}

.grad-box:after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    z-index: -1;
    border-radius: 4px;
    background-image: linear-gradient(278deg,#72b8fe,#0081ff);
    opacity: 0;
    -webkit-transition: all .2s linear;
    transition: all .2s linear
}

.grad-box:hover:after {
    opacity: 1
}

.grad-box.left {
    padding-right: 70px;
    padding-left: 20px
}

.grad-box .icon {
    position: absolute;
    top: 50%;
    left: 0;
    width: 70px;
    height: 32px;
    font-size: 24px;
    line-height: 32px;
    margin-top: -15px;
    text-align: center;
    display: block
}

.grad-box.left .icon {
    left: auto;
    right: 0
}

.z-patch-back {
    padding: 80px 20px;
    border-radius: 4px;
    background-image: url("");
    background-size: cover;
    background-position: 50%
}

.z-patch-back img {
    width: 216px;
    height: auto;
    display: block;
    margin: 0 auto;
    text-align: center
}

.colors-zp-bg-1 {
    padding: 20px;
    border-radius: 4px;
    -webkit-box-shadow: 0 5px 15px 0 rgba(0,129,255,.3);
    box-shadow: 0 5px 15px 0 rgba(0,129,255,.3);
    background-image: -webkit-gradient(linear,left bottom,left top,from(#72b8fe),to(#0081ff));
    background-image: linear-gradient(0deg,#72b8fe,#0081ff)
}

.colors-zp-bg-2 {
    padding: 20px;
    border-radius: 4px;
    -webkit-box-shadow: 0 5px 15px 0 rgba(0,0,0,.3);
    box-shadow: 0 5px 15px 0 rgba(0,0,0,.3);
    background-image: -webkit-gradient(linear,left top,left bottom,from(#181818),to(#3a424e));
    background-image: linear-gradient(180deg,#181818,#3a424e)
}

.colors-zp-bg-3 {
    padding: 20px;
    border-radius: 4px;
    -webkit-box-shadow: 0 5px 15px 0 rgba(255,111,0,.3);
    box-shadow: 0 5px 15px 0 rgba(255,111,0,.3);
    background-image: -webkit-gradient(linear,left bottom,left top,from(#ffcc4c),to(#fd8408));
    background-image: linear-gradient(0deg,#ffcc4c,#fd8408)
}

.colors-zp-bg-4 {
    padding: 20px;
    border-radius: 4px;
    -webkit-box-shadow: 0 5px 15px 0 rgba(0,255,20,.3);
    box-shadow: 0 5px 15px 0 rgba(0,255,20,.3);
    background-image: -webkit-gradient(linear,left top,left bottom,from(#54d169),to(#aff57a));
    background-image: linear-gradient(180deg,#54d169,#aff57a)
}

.colors-zp-bg-5 {
    padding: 20px;
    border-radius: 4px;
    -webkit-box-shadow: 0 5px 15px 0 rgba(0,129,255,.3);
    box-shadow: 0 5px 15px 0 rgba(0,129,255,.3);
    background-color: #0080ff
}

.colors-zp-bg-6 {
    padding: 20px;
    border-radius: 4px;
    -webkit-box-shadow: 0 5px 15px 0 rgba(255,124,0,.3);
    box-shadow: 0 5px 15px 0 rgba(255,124,0,.3);
    background-color: #ff7c00
}

.colors-zp-bg-7 {
    padding: 20px;
    border-radius: 4px;
    -webkit-box-shadow: 0 5px 15px 0 rgba(86,215,0,.3);
    box-shadow: 0 5px 15px 0 rgba(86,215,0,.3);
    background-color: #56d700
}

.colors-zp-bg-8 {
    padding: 20px;
    border-radius: 4px;
    -webkit-box-shadow: 0 5px 15px 0 rgba(194,211,222,.3);
    box-shadow: 0 5px 15px 0 rgba(194,211,222,.3);
    background-color: #c2d3de
}

.colors-zp-bg-9 {
    padding: 20px;
    border-radius: 4px;
    -webkit-box-shadow: 0 5px 15px 0 rgba(37,37,37,.3);
    box-shadow: 0 5px 15px 0 rgba(37,37,37,.3);
    background-color: #252525
}

.colors-zp-bg-10 {
    padding: 20px;
    border-radius: 4px;
    -webkit-box-shadow: 0 5px 15px 0 rgba(85,85,85,.3);
    box-shadow: 0 5px 15px 0 rgba(85,85,85,.3);
    background-color: #555
}

.colors-zp-bg-11 {
    padding: 20px;
    border-radius: 4px;
    -webkit-box-shadow: 0 5px 15px 0 hsla(240,2%,46%,.3);
    box-shadow: 0 5px 15px 0 hsla(240,2%,46%,.3);
    background-color: #737377
}

.colors-zp-bg-12 {
    padding: 20px;
    border-radius: 4px;
    -webkit-box-shadow: 0 5px 15px 0 rgba(130,159,172,.3);
    box-shadow: 0 5px 15px 0 rgba(130,159,172,.3);
    background-color: #829fac
}

.colors-zp-bg-13 {
    padding: 20px;
    border-radius: 4px;
    -webkit-box-shadow: 0 5px 15px 0 rgba(136,158,170,.3);
    box-shadow: 0 5px 15px 0 rgba(136,158,170,.3);
    background-color: #f9f9fb
}

.colors-zp-bg-14 {
    padding: 20px;
    border-radius: 4px;
    -webkit-box-shadow: 0 5px 15px 0 rgba(198,211,221,.3);
    box-shadow: 0 5px 15px 0 rgba(198,211,221,.3);
    background-color: #fff
}

.colors-nh-bg-1 {
    padding: 20px;
    border-radius: 4px;
    -webkit-box-shadow: 0 5px 15px 0 rgba(255,109,46,.3);
    box-shadow: 0 5px 15px 0 rgba(255,109,46,.3);
    background-image: -webkit-gradient(linear,left top,left bottom,from(#ff6d2e),to(#ff9568));
    background-image: linear-gradient(180deg,#ff6d2e,#ff9568)
}

.colors-nh-bg-2 {
    padding: 20px;
    border-radius: 4px;
    -webkit-box-shadow: 0 5px 15px 0 rgba(0,0,0,.3);
    box-shadow: 0 5px 15px 0 rgba(0,0,0,.3);
    background-image: -webkit-gradient(linear,left bottom,left top,from(#302b63),to(#24243e));
    background-image: linear-gradient(0deg,#302b63,#24243e)
}

.colors-nh-bg-3 {
    padding: 20px;
    border-radius: 4px;
    -webkit-box-shadow: 0 5px 15px 0 rgba(255,109,46,.3);
    box-shadow: 0 5px 15px 0 rgba(255,109,46,.3);
    background-color: #ff6d2e
}

.colors-nh-bg-4 {
    padding: 20px;
    border-radius: 4px;
    -webkit-box-shadow: 0 5px 15px 0 rgba(48,43,99,.3);
    box-shadow: 0 5px 15px 0 rgba(48,43,99,.3);
    background-color: #302b63
}

.colors-nh-bg-5 {
    padding: 20px;
    border-radius: 4px;
    -webkit-box-shadow: 0 5px 15px 0 rgba(48,48,48,.3);
    box-shadow: 0 5px 15px 0 rgba(48,48,48,.3);
    background-color: #303030
}

.colors-nh-bg-6 {
    padding: 20px;
    border-radius: 4px;
    -webkit-box-shadow: 0 5px 15px 0 rgba(194,211,222,.3);
    box-shadow: 0 5px 15px 0 rgba(194,211,222,.3);
    background-color: #bcc9d6
}

.colors-nh-bg-7 {
    padding: 20px;
    border-radius: 4px;
    border: 1px solid #eeeeef;
    background-color: #f8fbfe
}

.bg-white-transparent {
    background-color: hsla(0,0%,100%,.1)
}

.max-700 {
    width: 100%;
    max-width: 700px;
    margin: 0 auto
}

.left-test-icon {
    left: 0;
    width: 24px;
    height: 18px;
    background-image: url("")
}

.left-test-icon,.right-test-icon {
    position: absolute;
    top: 0;
    z-index: 2
}

.right-test-icon {
    right: 0;
    opacity: .5;
    color: var(--white);
    cursor: pointer;
    -webkit-transition: all .2s linear;
    transition: all .2s linear
}

.right-test-icon:hover {
    opacity: 1
}

.right-test-icon:hover .blog-share-tooltip {
    visibility: visible;
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0)
}

.right-test-icon.cs-ver {
    right: 30px;
    top: 30px;
    opacity: 1;
    color: #889eaa
}

.circle-nh-logo-img img {
    width: 204px;
    display: block;
    height: auto
}

.box-shadow-cs {
    -webkit-box-shadow: 0 15px 40px 0 rgba(0,0,0,.15);
    box-shadow: 0 15px 40px 0 rgba(0,0,0,.15)
}

.box-shadow-cs-1 {
    -webkit-box-shadow: 0 10px 40px 0 rgba(0,0,0,.1);
    box-shadow: 0 10px 40px 0 rgba(0,0,0,.1)
}

.landing-left-side {
    position: absolute;
    top: 0;
    width: 700px;
    left: -740px;
    opacity: .5
}

.landing-left-side img {
    width: 100%;
    height: auto;
    display: block
}

.landing-right-side {
    position: absolute;
    top: 0;
    width: 700px;
    right: -740px;
    opacity: .5
}

.landing-right-side img {
    width: 100%;
    height: auto;
    display: block
}

.quote-img-cs {
    width: 24px;
    height: auto;
    display: block
}

.pb-dark-back {
    background-color: #12181d
}

.blue-icon-landing {
    position: relative;
    display: block;
    line-height: 50px;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    background-image: -webkit-gradient(linear,right top,left top,from(#073fe6),to(#0f61ff));
    background-image: linear-gradient(270deg,#073fe6,#0f61ff);
    color: #cbdeed;
    text-align: center
}

.pb-dark-back h4 {
    font-weight: 600;
    font-size: 22px;
    line-height: 40px;
    letter-spacing: -.41px;
    color: #cbdeed
}

.pb-dark-back h4,.pb-dark-back p {
    font-family: Nunito Sans,sans-serif
}

.pb-dark-back p {
    color: #54616b
}

.blue-dot {
    position: relative;
    display: inline-block;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    background-color: #0f61ff;
    border: 6px solid #1b242b
}

.center-content {
    display: -ms-inline-flexbox;
    display: -webkit-inline-box;
    display: inline-flex;
    -moz-align-items: center;
    -ms-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    -webkit-box-pack: center;
    justify-content: center;
    -ms-flex-pack: center
}

.font-weight-bold-pb {
    font-weight: 700!important
}

.plugb-img-back {
    padding: 80px 20px;
    border-radius: 4px;
    background-image: url("/img/pb-wel-back.jpg");
    background-size: cover;
    background-position: 50%
}

.plugb-img-back img {
    width: 64px;
    height: auto;
    display: block;
    margin: 0 auto;
    text-align: center
}

.rubic-pb-color {
    color: #dbebf9
}

.btn-pb {
    background-color: #2e3b45
}

.btn-pb:hover {
    background-color: #54616b
}

.colors-pb-bg-1 {
    -webkit-box-shadow: 0 5px 15px 0 rgba(7,66,231,.3);
    box-shadow: 0 5px 15px 0 rgba(7,66,231,.3);
    background-image: -webkit-gradient(linear,right top,left top,from(#073fe6),to(#0f61ff));
    background-image: linear-gradient(270deg,#073fe6,#0f61ff)
}

.colors-pb-bg-1,.colors-pb-bg-2 {
    padding: 10px 20px;
    border-radius: 4px
}

.colors-pb-bg-2 {
    -webkit-box-shadow: 0 5px 15px 0 rgba(27,36,43,.3);
    box-shadow: 0 5px 15px 0 rgba(27,36,43,.3);
    background-image: -webkit-gradient(linear,right top,left top,from(#192229),to(#1b242b));
    background-image: linear-gradient(270deg,#192229,#1b242b)
}

.colors-pb-bg-3 {
    -webkit-box-shadow: 0 5px 15px 0 rgba(35,47,57,.3);
    box-shadow: 0 5px 15px 0 rgba(35,47,57,.3);
    background-image: -webkit-gradient(linear,right top,left top,from(#212d36),to(#2e3e49));
    background-image: linear-gradient(270deg,#212d36 0,#2e3e49)
}

.colors-pb-bg-3,.colors-pb-bg-4 {
    padding: 10px 20px;
    border-radius: 4px
}

.colors-pb-bg-4 {
    -webkit-box-shadow: 0 5px 15px 0 rgba(53,216,177,.3);
    box-shadow: 0 5px 15px 0 rgba(53,216,177,.3);
    background-image: -webkit-gradient(linear,right top,left top,from(#35d8b1),to(#43ebc3));
    background-image: linear-gradient(270deg,#35d8b1,#43ebc3)
}

.colors-pb-bg-5 {
    -webkit-box-shadow: 0 5px 15px 0 rgba(15,97,255,.3);
    box-shadow: 0 5px 15px 0 rgba(15,97,255,.3);
    background-color: #0f61ff
}

.colors-pb-bg-5,.colors-pb-bg-6 {
    padding: 10px 20px;
    border-radius: 4px
}

.colors-pb-bg-6 {
    -webkit-box-shadow: 0 5px 15px 0 rgba(249,74,120,.3);
    box-shadow: 0 5px 15px 0 rgba(249,74,120,.3);
    background-color: #f94a78
}

.colors-pb-bg-7 {
    -webkit-box-shadow: 0 5px 15px 0 rgba(67,235,195,.3);
    box-shadow: 0 5px 15px 0 rgba(67,235,195,.3);
    background-color: #43ebc3
}

.colors-pb-bg-7,.colors-pb-bg-8 {
    padding: 10px 20px;
    border-radius: 4px
}

.colors-pb-bg-8 {
    -webkit-box-shadow: 0 5px 15px 0 rgba(203,222,237,.3);
    box-shadow: 0 5px 15px 0 rgba(203,222,237,.3);
    background-color: #cbdeed
}

.colors-pb-bg-9 {
    -webkit-box-shadow: 0 5px 15px 0 rgba(18,24,29,.3);
    box-shadow: 0 5px 15px 0 rgba(18,24,29,.3);
    background-color: #12181d
}

.colors-pb-bg-9,.colors-pb-bg-10 {
    padding: 10px 20px;
    border-radius: 4px
}

.colors-pb-bg-10 {
    -webkit-box-shadow: 0 5px 15px 0 rgba(38,49,58,.3);
    box-shadow: 0 5px 15px 0 rgba(38,49,58,.3);
    background-color: #26313a
}

.colors-pb-bg-11 {
    -webkit-box-shadow: 0 5px 15px 0 rgba(46,59,69,.3);
    box-shadow: 0 5px 15px 0 rgba(46,59,69,.3);
    background-color: #2e3b45
}

.colors-pb-bg-11,.colors-pb-bg-12 {
    padding: 10px 20px;
    border-radius: 4px
}

.colors-pb-bg-12 {
    -webkit-box-shadow: 0 5px 15px 0 rgba(84,97,107,.3);
    box-shadow: 0 5px 15px 0 rgba(84,97,107,.3);
    background-color: #54616b
}

.colors-pb-bg-13 {
    -webkit-box-shadow: 0 5px 15px 0 rgba(219,235,249,.3);
    box-shadow: 0 5px 15px 0 rgba(219,235,249,.3);
    background-color: #dbebf9
}

.colors-pb-bg-13,.colors-pb-bg-14 {
    padding: 10px 20px;
    border-radius: 4px
}

.colors-pb-bg-14 {
    -webkit-box-shadow: 0 5px 15px 0 rgba(198,211,221,.3);
    box-shadow: 0 5px 15px 0 rgba(198,211,221,.3);
    background-color: #fff
}

.project-requirements h5 {
    -webkit-transition: all .2s linear;
    transition: all .2s linear
}

.project-requirements:hover h5 {
    color: var(--white)
}

.blue-gradient-logo-section-services {
    position: relative;
    display: block;
    padding: 161px 20px;
    width: 100%;
    border-radius: 4px;
    -webkit-box-shadow: 0 10px 20px 0 rgba(0,0,0,.15);
    box-shadow: 0 10px 20px 0 rgba(0,0,0,.15);
    background-image: -webkit-gradient(linear,left bottom,left top,from(#3ed0fe),to(#085fe5));
    background-image: linear-gradient(0deg,#3ed0fe,#085fe5);
    margin: 0 auto;
    text-align: center
}

.blue-gradient-logo-section-services h3,.blue-gradient-logo-section-services h5 {
    color: var(--white)
}

.blue-gradient-logo-section-services img {
    width: 186px;
    height: auto;
    display: block;
    margin: 0 auto;
    text-align: center
}

.blue-gradient-logo-section-services.yellow {
    background-image: -webkit-gradient(linear,left top,left bottom,from(#ffbf1a),to(#ffed0a));
    background-image: linear-gradient(180deg,#ffbf1a,#ffed0a)
}

.blue-gradient-logo-section-services.yellow h3,.blue-gradient-logo-section-services.yellow h5 {
    color: var(--dark)
}

.home-grey-logo-section-services {
    position: relative;
    display: block;
    padding: 90px 20px;
    padding-bottom: 30px;
    width: 100%;
    border-radius: 4px;
    background-color: #f8fbfe;
    margin: 0 auto;
    text-align: center
}

.home-grey-logo-section-services img {
    width: 87px;
    height: auto;
    display: block;
    margin: 0 auto;
    text-align: center
}

.home-section-services-button,.home-section-services-button li {
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
    text-align: center;
    list-style: none
}

.home-section-services-button li {
    margin-top: 20px;
    border-radius: 4px;
    background-color: #f8fbfe;
    height: 90px;
    line-height: 90px;
    font-size: 30px;
    font-weight: 500;
    color: #11132f;
    cursor: pointer;
    -webkit-transition: all .2s linear;
    transition: all .2s linear
}

.home-section-services-button li.current,.home-section-services-button li:hover {
    background-color: transparent;
    color: #fff;
    -webkit-box-shadow: 0 10px 20px 0 rgba(0,0,0,.15);
    box-shadow: 0 10px 20px 0 rgba(0,0,0,.15)
}

.home-section-services-button li:before {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    width: 100%;
    height: 100%;
    z-index: -1;
    border-radius: 4px;
    background-image: linear-gradient(283deg,#3ed0fe,#085fe5)
}

.home-section-services-options {
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
    list-style: none
}

.home-section-services-options li.show {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    pointer-events: auto
}

.home-section-services-options li,.home-section-services-options li.show {
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
    -webkit-transition: all .3s linear;
    transition: all .3s linear
}

.home-section-services-options li {
    pointer-events: none;
    opacity: 0
}

.home-section-services-options li:nth-child(2) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%
}

.arrow-animation {
    -webkit-animation: fade-arrow-animation 1.7s linear infinite;
    animation: fade-arrow-animation 1.7s linear infinite
}

@-webkit-keyframes fade-arrow-animation {
    0% {
        opacity: .1
    }

    50% {
        opacity: 1
    }

    to {
        opacity: .1
    }
}

@keyframes fade-arrow-animation {
    0% {
        opacity: .1
    }

    50% {
        opacity: 1
    }

    to {
        opacity: .1
    }
}

.home-section-services-options li .project-requirements {
    opacity: 0;
    -webkit-transition: all .3s linear;
    transition: all .3s linear
}

.home-section-services-options li.show .project-requirements {
    opacity: 1
}

.home-section-services-options li.show .project-requirements:first-child {
    -webkit-transition-delay: .1s;
    transition-delay: .1s
}

.home-section-services-options li.show .project-requirements:nth-child(2) {
    -webkit-transition-delay: .25s;
    transition-delay: .25s
}

.home-section-services-options li.show .project-requirements:nth-child(3) {
    -webkit-transition-delay: .4s;
    transition-delay: .4s
}

.home-section-services-options li.show .project-requirements:nth-child(4) {
    -webkit-transition-delay: .55s;
    transition-delay: .55s
}

.home-section-services-options li.show .project-requirements:nth-child(5) {
    -webkit-transition-delay: .7s;
    transition-delay: .7s
}

.home-section-services-options li .project-requirements:hover,.home-section-services-options li.show .project-requirements:hover {
    -webkit-transition-delay: 0s!important;
    transition-delay: 0s!important;
    -webkit-box-shadow: none;
    box-shadow: none
}

.work-logo-folio {
    position: relative;
    width: 100%;
    cursor: pointer;
    border-radius: 4px;
    height: 540px;
    background-image: -webkit-gradient(linear,left bottom,left top,from(#3ed0fe),to(#085fe5));
    background-image: linear-gradient(0deg,#3ed0fe,#085fe5)
}

.work-logo-folio-content {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 0;
    text-align: center;
    z-index: 2;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.size-50-60 {
    font-size: 50px;
    line-height: 60px
}

.work-logo-folio p {
    opacity: 0;
    margin-top: 0;
    overflow: hidden;
    max-height: 0;
    -webkit-transition: all .25s linear;
    transition: all .25s linear
}

.work-logo-folio:hover p {
    opacity: 1;
    margin-top: 20px;
    max-height: 4000px
}

.work-folio-modal {
    max-width: 1400px
}

.process-step-wrap {
    height: 220px;
    border-radius: 4px;
    border: 1px solid rgba(198,211,221,.5);
    -webkit-transition: all .25s linear;
    transition: all .25s linear
}

.process-step-wrap:hover {
    border-color: transparent
}

.process-step-wrap h5 {
    color: #11132f;
    -webkit-transition: all .25s linear;
    transition: all .25s linear
}

.process-step-wrap:hover h5 {
    color: #fff
}

.process-step-wrap p {
    opacity: 0;
    margin-top: 0
}

.process-step-wrap:hover p,.process-step-wrap p {
    -webkit-transition: all .25s linear;
    transition: all .25s linear
}

.process-step-wrap:hover p {
    margin-top: 20px;
    opacity: 1
}

.process-step-wrap:before {
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    border-radius: 4px;
    opacity: 0;
    -webkit-box-shadow: 0 10px 20px 0 rgba(0,0,0,.15);
    box-shadow: 0 10px 20px 0 rgba(0,0,0,.15);
    background-image: linear-gradient(1deg,#3ed0fe,#085fe5);
    -webkit-transition: all .25s linear;
    transition: all .25s linear
}

.process-step-wrap:hover:before {
    opacity: 1
}

.process-step-center-wrap {
    position: absolute;
    width: 100%;
    left: 0;
    top: 50%;
    z-index: 2;
    margin-top: 16px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: all .25s linear;
    transition: all .25s linear
}

.process-step-wrap:hover .process-step-center-wrap {
    margin-top: 0;
    -webkit-transition: all .25s linear;
    transition: all .25s linear
}

.button-process-text {
    font-size: 13px;
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.54;
    letter-spacing: .2px;
    text-align: center;
    color: #fff
}

.button-process-text,.button-process-text span {
    -webkit-transition: all .25s linear;
    transition: all .25s linear
}

.button-process-text span {
    border-radius: 4px;
    background-color: rgba(16,20,47,.5);
    padding: 4px 20px
}

.process-step-wrap:hover .button-process-text span {
    background-color: hsla(0,0%,100%,.1)
}

.process-step-line-short {
    width: 20px;
    height: 4px;
    margin-top: -2px;
    position: absolute;
    right: -10px;
    top: 50%;
    display: block
}

.process-step-line-short img {
    width: 100%;
    height: auto;
    display: block
}

.process-step-line-long {
    width: 568px;
    position: relative;
    z-index: -2;
    display: block;
    margin-left: 367px
}

.process-step-line-long img {
    width: 100%;
    height: auto;
    display: block
}

.button-process-title {
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    border-radius: 4px;
    background-color: rgba(16,20,47,.5);
    padding: 4px 20px
}

.steps-linear-gradient-wrap {
    border-radius: 4px;
    -webkit-box-shadow: 0 10px 20px 0 rgba(0,0,0,.15);
    box-shadow: 0 10px 20px 0 rgba(0,0,0,.15);
    background-image: -webkit-gradient(linear,left bottom,left top,from(#3ed0fe),to(#085fe5));
    background-image: linear-gradient(0deg,#3ed0fe,#085fe5);
    padding: 60px 40px
}

.button-process-title-white {
    font-size: 13px;
    line-height: 20px;
    font-weight: 500;
    color: #fff;
    border-radius: 4px;
    background-color: hsla(0,0%,100%,.1);
    padding: 4px 20px
}

.slider-steps {
    height: 375px
}

.slider-steps-but {
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 0
}

.swiper-container-process .swiper-slide {
    opacity: 0!important;
    -webkit-transition: all .25s linear;
    transition: all .25s linear
}

.swiper-container-process .swiper-slide-active {
    opacity: 1!important;
    -webkit-transition: all .25s linear;
    transition: all .25s linear
}

.swiper-container-process .swiper-button-prev {
    position: absolute;
    width: 54px;
    height: 48px;
    top: 5px;
    left: 0;
    z-index: 4;
    border-radius: 4px;
    background-color: hsla(0,0%,100%,.1);
    color: var(--white);
    text-align: center;
    margin-top: 0;
    background-image: none;
    line-height: 48px;
    -webkit-transition: all .25s linear;
    transition: all .25s linear
}

.swiper-container-process .swiper-button-prev:hover {
    background-color: #10142f
}

.swiper-container-process .swiper-button-next {
    position: absolute;
    width: 54px;
    height: 48px;
    top: auto;
    bottom: 0;
    left: 0;
    z-index: 4;
    border-radius: 4px;
    background-color: hsla(0,0%,100%,.1);
    color: var(--white);
    text-align: center;
    margin-top: 0;
    background-image: none;
    line-height: 48px;
    -webkit-transition: all .25s linear;
    transition: all .25s linear
}

.swiper-container-process .swiper-button-next:hover {
    background-color: #10142f
}

.swiper-button-line {
    position: absolute;
    width: 0;
    height: 48px;
    top: 73px;
    left: 25px;
    height: calc(100% - 138px);
    border-right: 4px dotted #fff;
    z-index: 4
}

.swiper-container-process .swiper-button-next:active,.swiper-container-process .swiper-button-next:focus,.swiper-container-process .swiper-button-prev:active,.swiper-container-process .swiper-button-prev:focus {
    -webkit-box-shadow: none;
    box-shadow: none;
    border: none;
    outline: none
}

.button-process-title-gradient-blue {
    font-size: 13px;
    line-height: 20px;
    font-weight: 500;
    color: #fff;
    border-radius: 4px;
    -webkit-box-shadow: 0 4px 10px 0 rgba(0,0,0,.1);
    box-shadow: 0 4px 10px 0 rgba(0,0,0,.1);
    background-image: linear-gradient(281deg,#3ed0fe,#085fe5);
    padding: 4px 20px
}

.carousel-footer {
    position: relative;
    padding: 20px;
    padding-top: 28px;
    padding-bottom: 28px;
    background-repeat: no-repeat;
    background-position: right 30px;
    background-size: 159px auto;
    background-color: transparent;
    overflow: hidden;
    -webkit-box-shadow: 0 10px 30px 0 rgba(135,153,163,.25);
    box-shadow: 0 10px 30px 0 rgba(135,153,163,.25)
}

.carousel-footer,.carousel-footer:before {
    display: block;
    width: 100%;
    border-radius: 4px
}

.carousel-footer:before {
    position: absolute;
    content: "";
    height: 100%;
    background-image: -webkit-gradient(linear,left bottom,left top,from(#3ed0fe),to(#085fe5));
    background-image: linear-gradient(0deg,#3ed0fe,#085fe5);
    top: 0;
    left: 0;
    z-index: -1
}

#footer-sync1,#footer-sync1 .item {
    position: relative;
    display: block;
    width: 100%
}

#footer-sync2 {
    position: absolute;
    right: 20px;
    top: 22px;
    z-index: 10
}

#footer-sync2,#footer-sync2 .item {
    width: 120px!important;
    display: block!important
}

#footer-sync2 .item {
    margin-bottom: 12px;
    position: relative!important;
    -webkit-transition: all .3s linear;
    transition: all .3s linear
}

#footer-sync2 .owl-item {
    float: left;
    display: block;
    width: 100%!important
}

.btn-carousel-footer {
    position: relative!important;
    width: 120px!important;
    color: var(--white);
    background-color: rgba(16,20,47,.1);
    cursor: pointer;
    -webkit-transition: all .3s linear;
    transition: all .3s linear
}

.btn-carousel-footer:hover {
    -webkit-transition: all .3s linear;
    transition: all .3s linear
}

#footer-sync2 .synced .item .btn-carousel-footer,.btn-carousel-footer:hover {
    color: var(--white);
    background-color: #10142f;
    -webkit-box-shadow: 0 4px 10px 0 rgba(0,0,0,.2);
    box-shadow: 0 4px 10px 0 rgba(0,0,0,.2)
}

.border-footer-location {
    padding: 4px 15px;
    border-radius: 5px;
    background: hsla(0,0%,100%,.1)
}

.footer-line {
    border-top: 1px solid var(--grey-trd)
}

.footer-logo {
    width: 18px;
    height: auto;
    display: inline-block
}

.dropdown-hidden-1 {
    width: 100%;
    max-height: 0;
    overflow: hidden;
    -webkit-transition: max-height .25s ease-out;
    transition: max-height .25s ease-out
}

.dropdown-hidden-1 .btn {
    margin-top: 10px!important
}

body.dropdown-1-opened .dropdown-hidden-1 {
    max-height: 999px;
    -webkit-transition: max-height .25s ease-out;
    transition: max-height .25s ease-out
}

.dropdown-button-1 i {
    -webkit-transition: all .25s linear;
    transition: all .25s linear
}

body.dropdown-1-opened .dropdown-button-1 i {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg)
}

.dropdown-hidden-2 {
    width: 100%;
    max-height: 0;
    overflow: hidden;
    -webkit-transition: max-height .25s ease-out;
    transition: max-height .25s ease-out
}

.dropdown-hidden-2 .btn {
    margin-top: 10px!important
}

body.dropdown-2-opened .dropdown-hidden-2 {
    max-height: 999px;
    -webkit-transition: max-height .25s ease-out;
    transition: max-height .25s ease-out
}

.dropdown-button-2 i {
    -webkit-transition: all .25s linear;
    transition: all .25s linear
}

body.dropdown-2-opened .dropdown-button-2 i {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg)
}

.dropdown-hidden-3 {
    width: 100%;
    max-height: 0;
    overflow: hidden;
    -webkit-transition: max-height .25s ease-out;
    transition: max-height .25s ease-out
}

.dropdown-hidden-3 .btn {
    margin-top: 10px!important
}

body.dropdown-3-opened .dropdown-hidden-3 {
    max-height: 999px;
    -webkit-transition: max-height .25s ease-out;
    transition: max-height .25s ease-out
}

.dropdown-button-3 i {
    -webkit-transition: all .25s linear;
    transition: all .25s linear
}

body.dropdown-3-opened .dropdown-button-3 i {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg)
}

.half-footer {
    width: 50%;
    display: inline-block;
    float: left
}

@font-face {
    font-family: glagoljica;
    src: url(/fonts/glagoljica/glagoljica.ttf);
    src: url(/fonts/glagoljica/glagoljica.ttf) format("embedded-opentype"),url(/fonts/glagoljica/glagoljica.ttf) format("truetype"),url(/fonts/glagoljica/glagoljica.ttf) format("woff"),url(/fonts/glagoljica/glagoljica.ttf) format("svg");
    font-weight: 400;
    font-style: normal
}

[class*=" icon-"],[class^=icon-] {
    font-family: glagoljica!important;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-love:before {
    content: "\E900"
}

.icon-unlike:before {
    content: "\E90A"
}

.icon-facebook:before {
    content: "\E910"
}

.icon-like:before {
    content: "\E914"
}

.collaborate.home-coll {
    padding: 57px 40px;
    background-image: none;
    background: -webkit-gradient(linear,right top,left top,from(hsla(0,0%,77%,.75)),color-stop(.01%,rgba(254,190,40,.75)),to(#ffec0a));
    background: linear-gradient(270deg,hsla(0,0%,77%,.75),rgba(254,190,40,.75) .01%,#ffec0a)
}

.section-vid-coll {
    position: relative;
    width: 100%;
    display: block;
    border-radius: 4px;
    overflow: hidden
}

.section-vid-coll img {
    width: 100%;
    display: block;
    height: auto
}

.mask-video-home {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    display: block;
    background-color: var(--blue);
    opacity: 0;
    z-index: 2;
    -webkit-transition: all .25s linear;
    transition: all .25s linear
}

.section-vid-coll:hover .mask-video-home {
    opacity: .5
}

.mask-video-home-over {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    display: block;
    z-index: 4;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.section-vid-coll .play-button-home {
    width: 90px;
    height: 90px
}

.section-vid-coll .play-button-home .uil {
    line-height: 90px;
    font-size: 25px
}

.section-vid-coll:hover .play-button-home {
    background-color: rgba(16,20,47,.8);
    -webkit-box-shadow: 0 10px 20px 0 rgba(0,0,0,.15);
    box-shadow: 0 10px 20px 0 rgba(0,0,0,.15)
}

@media (min-width: 1920px) {
    .curve-down {
        height:99px
    }
}

@media (min-width: 991px) {
    .transform-on-desk {
        -webkit-transform:translateY(-110px);
        transform: translateY(-110px)
    }

    .section-hero-bottom.on-home {
        bottom: 140px
    }
}

@media (max-width: 1400px) {
    .hero-img {
        width:120px
    }
}

@media (max-width: 1199px) {
    .pb-back {
        background-image:none
    }

    .road-back {
        background-image: url("")
    }

    .home-hero-logo {
        width: 200px
    }

    .cbp-af-header,.cbp-af-header.cbp-af-header-shrink {
        background-color: var(--white);
        -webkit-box-shadow: 0 10px 20px 0 rgba(0,0,0,.05);
        box-shadow: 0 10px 20px 0 rgba(0,0,0,.05);
        -webkit-transition: all .3s ease-out;
        transition: all .3s ease-out
    }

    .cbp-af-header.cbp-af-header-shrink .dropdown-menu .nav-link:hover,.cbp-af-header.cbp-af-header-shrink .nav-item.active .dropdown-menu .nav-link,.cbp-af-header.cbp-af-header-shrink .nav-item.active .dropdown-menu .nav-link:hover,.cbp-af-header.cbp-af-header-shrink .nav-item .dropdown-menu .nav-link.active,.dropdown-menu .nav-link:hover,.nav-item.active .dropdown-menu .nav-link.active,.nav-item.active .dropdown-menu .nav-link:hover,.nav-item .dropdown-menu .nav-link.active {
        background-color: transparent!important
    }

    .cbp-af-header.cbp-af-header-shrink .btn-nav {
        padding: 0 40px
    }

    .cbp-af-header.cbp-af-header-shrink .padding-on-scroll,.padding-on-scroll {
        padding: 10px 0;
        border-bottom: 1px solid hsla(210,6%,93%,0);
        -webkit-transition: all .3s ease-out;
        transition: all .3s ease-out
    }

    .navbar-brand {
        background-image: url("/img/devhirehub.png");
        background-size: 82px 75px;
        background-position: 0;
        background-repeat: no-repeat;
        -webkit-transition: all .3s ease-out;
        transition: all .3s ease-out
    }

    .btn-nav {
        border-width: 0!important;
        -webkit-box-shadow: 0 4px 10px 0 rgba(0,0,0,.1);
        box-shadow: 0 4px 10px 0 rgba(0,0,0,.1)
    }

    .btn-nav,.btn-nav:hover {
        color: var(--white);
        background-image: linear-gradient(281deg,#0575e6,#021b79);
        -webkit-transition: all .3s ease-out;
        transition: all .3s ease-out
    }

    .btn-nav:hover {
        -webkit-box-shadow: 0 4px 10px 0 rgba(0,0,0,.3);
        box-shadow: 0 4px 10px 0 rgba(0,0,0,.3)
    }

    .nav-item.active .nav-link {
        color: var(--dark)!important;
        -webkit-transition: all .3s ease-out;
        transition: all .3s ease-out
    }

    .nav-link:hover {
        color: var(--blue)!important
    }

    .nav-link {
        color: var(--dark)!important
    }

    .nav-link,.nav-link:after {
        -webkit-transition: all .3s ease-out;
        transition: all .3s ease-out
    }

    .nav-link:after {
        background-color: var(--blue)
    }

    .nav-item .dropdown-menu,.nav-item.show .dropdown-menu {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }

    .dropdown-menu {
        padding: 0!important;
        left: 0;
        background-color: transparent;
        -webkit-box-shadow: 0 8px 16px 0 transparent;
        box-shadow: 0 8px 16px 0 transparent
    }

    .nav-item .dropdown-menu.long {
        min-width: 100%
    }

    .dropdown-menu .nav-link {
        display: block;
        text-align: center;
        height: 30px;
        line-height: 30px;
        font-size: 14px
    }

    .nav-link:after {
        display: none
    }

    .dropdown-menu .nav-link:hover {
        color: var(--blue)!important
    }

    .dropdown-toggle[aria-expanded=true]+.dropdown-menu {
        margin-top: 0!important;
        margin-bottom: 10px!important
    }

    .dropdown-toggle[aria-expanded=true]:before {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
        color: var(--blue)!important
    }

    .dropdown-toggle[aria-expanded=true] {
        color: var(--blue)!important
    }

    .dropdown-toggle:hover:before {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    .nav-item.active .dropdown-menu .nav-link:hover,.nav-item.active .nav-link {
        color: var(--blue)!important
    }

    .nav-item.active .nav-link {
        background-color: rgba(0,0,0,.04)!important
    }

    .nav-item.active .dropdown-menu .nav-link.active {
        color: var(--blue)!important
    }

    .collaborate {
        padding: 56px 50px
    }

    .transform-story li:nth-child(2) .hex-box:after {
        display: none
    }

    .partners {
        height: 140px;
        background-size: 50% 50%
    }

    .process-step-line-long {
        width: 480px;
        margin-left: 300px
    }
}

@media (max-width: 991px) {
    .slider-steps {
        height:auto
    }

    .slider-steps-but {
        position: relative;
        z-index: 1;
        bottom: auto;
        left: auto;
        margin-top: 30px
    }

    .swiper-container-process .swiper-button-prev {
        float: left
    }

    .swiper-container-process .swiper-button-next,.swiper-container-process .swiper-button-prev {
        position: relative;
        top: auto;
        left: auto;
        display: inline-block;
        -webkit-transition: all .25s linear;
        transition: all .25s linear
    }

    .swiper-container-process .swiper-button-next {
        bottom: auto;
        float: right;
        -webkit-transform: translateX(10px);
        transform: translateX(10px)
    }

    .section-width-arrows {
        position: relative;
        display: block;
        margin-top: 30px
    }

    .section-width-arrows:after {
        display: block;
        clear: both;
        content: ""
    }

    .swiper-button-line {
        height: 0;
        top: 22px;
        left: 72px;
        width: calc(100% - 143px);
        border-right: none;
        border-bottom: 4px dotted #fff
    }

    .steps-linear-gradient-wrap {
        padding: 30px
    }

    .home-hero-logo {
        width: 160px;
        margin: 0 auto;
        text-align: center
    }

    .hightlight-middle,.hightlight-top {
        background-color: transparent;
        padding: 0;
        display: initial
    }

    .hightlight-middle:before {
        display: none
    }

    .hightlight-bottom {
        background-color: transparent;
        padding: 0;
        display: initial
    }

    .collaborate {
        padding: 50px 20px;
        background-position: 100%
    }

    .partners {
        height: 100px;
        background-size: 50% 50%
    }

    .word-about img {
        width: 120px
    }

    .hero-main-img:after {
        background-image: none
    }
}

@media (max-width: 767px) {
    .btn-stretch.center-767 {
        -webkit-box-pack:center!important;
        justify-content: center!important;
        -ms-flex-pack: center!important
    }

    .btn-fluid-half {
        width: 100%;
        margin-right: 0
    }

    .half-footer {
        width: 100%;
        display: block;
        float: left
    }

    .word-about img {
        width: 160px
    }

    .word-about {
        padding: 30px
    }

    .hero-text-section {
        margin-top: 0
    }

    .section-hero-bottom {
        bottom: 40px
    }

    .hero-hex {
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%)
    }

    .btn-hero-transparent {
        background-color: var(--blue)
    }

    .grad-box.left {
        padding-right: 20px;
        padding-left: 70px
    }

    .grad-box.left .icon {
        left: 0;
        right: auto
    }
}

@media (max-width: 575px) {
    .modal-dialog {
        top:0;
        left: 0;
        width: 100%;
        max-width: 100%;
        min-height: 100vh;
        border-radius: 0
    }

    .modal-dialog,.modal.fade .modal-dialog {
        -webkit-transform: translate(0);
        transform: translate(0)
    }
}

@media (max-width: 575px) and (prefers-reduced-motion:reduce) {
    .modal.fade .modal-dialog {
        -webkit-transform:translate(0);
        transform: translate(0)
    }
}

@media (max-width: 575px) {
    .modal-body {
        min-height:100vh
    }

    .hero-main-img {
        max-width: 240px
    }

    .hero-main-img:after {
        width: 300px;
        height: 300px
    }

    .hero-main-img:before {
        width: 340px;
        height: 340px
    }

    .for-shape-1 {
        width: 240px
    }

    .for-shape-1:before {
        width: 380px;
        height: 380px
    }

    .for-shape-1:after {
        width: 420px;
        height: 420px
    }

    .for-shape-2 {
        width: 240px
    }

    .for-shape-2:before {
        width: 460px;
        height: 460px
    }

    .for-shape-2:after {
        width: 500px;
        height: 500px
    }

    .for-shape-3 {
        width: 240px
    }

    .for-shape-3:before {
        width: 540px;
        height: 540px
    }

    .for-shape-3:after {
        width: 580px;
        height: 580px
    }

    .transform-story li:first-child .hex-box:after,.transform-story li:nth-child(2) .hex-box:after,.transform-story li:nth-child(3) .hex-box:after {
        display: none
    }

    .project-wrap {
        padding: 20px
    }

    .border-block {
        padding-right: 20px;
        padding-left: 20px
    }

    .blog-wrap-bottom,.blog-wrap-center {
        padding: 20px
    }

    .blog-share {
        top: 20px;
        right: 20px
    }

    .about-hover-list,.word-about {
        padding: 20px
    }

    .modal-body {
        padding: 60px 15px
    }

    .checkbox-contact:checked+label,.checkbox-contact:not(:checked)+label {
        font-size: 13px;
        line-height: 18px
    }

    .app-section,.box-border-wrap,.expert-wrap {
        padding: 20px
    }

    .grad-img {
        width: 50px
    }
}

@media (-webkit-min-device-pixel-ratio: 2),(min-resolution:192dpi) {
    .logo-block.techday {
        background-image:url("");
        background-size: 158px 80px
    }

    .logo-block.techday:hover {
        background-image: url("");
        background-size: 158px 80px
    }

    .logo-block.lk-net {
        background-image: url("");
        background-size: 114px 84px
    }

    .logo-block.lk-net:hover {
        background-image: url();
        background-size: 114px 84px
    }

    .logo-block.lk-net-2 {
        background-image: url("");
        background-size: 114px 84px
    }

    .logo-block.lk-net-2:hover {
        background-image: url();
        background-size: 114px 84px
    }

    .logo-block.zpatch {
        background-image: url("");
        background-size: 130px 84px
    }

    .logo-block.zpatch:hover {
        background-image: url("");
        background-size: 130px 84px
    }

    .logo-block.thenextweb {
        background-image: url();
        background-size: 176px 42px
    }

    .logo-block.thenextweb:hover {
        background-image: url("");
        background-size: 176px 42px
    }

    .logo-block.seamless {
        background-image: url("");
        background-size: 176px 42px
    }

    .logo-block.seamless:hover {
        background-image: url("");
        background-size: 176px 42px
    }

    .logo-block.novohub {
        background-image: url("");
        background-size: 110px 66px
    }

    .logo-block.novohub:hover {
        background-image: url();
        background-size: 110px 66px
    }

    .background-cover-hero-home {
        background-image: url("/img/hero@2x.jpg")
    }

    .collaborate {
        background-image: url("/img/marketing.jpg")
    }

    .collaborate.on-work {
        background-image: url("/img/marketing.jpg")
    }

    .transform-story li {
        background-image: url("/img/steps-3.svg")
    }

    .page-header-background {
        background-image: url("/img/page-h@2x.jpg")
    }

    .blog-post-image {
        background-image: url()
    }

    .road-back {
        background-image: url("")
    }

    .z-patch-back {
        background-image: url()
    }

    .bg-color-blue-linear-gradient-2nd {
        background-image: url("/img/sep-gradient@2x.jpg")
    }

    .background-cover-hero-london {
        background-image: url()
    }

    .background-cover-hero-amsterdam {
        background-image: url()
    }

    .background-cover-hero-dubai {
        background-image: url()
    }

    .nh-back {
        background-image: url()
    }

    .pb-back {
        background-image: url()
    }

    .background-cover-hero-techday-la {
        background-image: url()
    }
}


/* Whatsapp Float CSS */

.float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    right: 40px;
    background-color: #25d366;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 3px #999;
    z-index: 100;
}

.my-float {
    margin-top: 16px;
}


@media (-webkit-min-device-pixel-ratio: 2) and (max-width:1199px),(min-resolution:192dpi) and (max-width:1199px) {
    .road-back {
        background-image:url()
    }
}



/* NEW HERO SECTION CSS */

/* -------------------------------------------------------
   FLAGSHIP BACKGROUND
------------------------------------------------------- */
.dh-flagship-hero {
  position: relative;
  padding: 150px 0;
  background: #070b18;
  overflow: hidden;
}

/* Animated mesh (CSS only) */
.mesh-bg {
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 20% 20%, #18263f 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, #132032 0%, transparent 50%);
  animation: meshMove 12s ease-in-out infinite alternate;
  filter: blur(50px);
  opacity: 0.4;
}

@keyframes meshMove {
  0% { transform: translateX(-20px); }
  100% { transform: translateX(20px); }
}

/* Beam */
.gradient-beam {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent, #00e0ff22, transparent);
  pointer-events: none;
  animation: beamSlide 6s linear infinite;
}

@keyframes beamSlide {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

/* tiny particles */
.particles {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(#ffffff22 1px, transparent 1px);
  background-size: 4px 4px;
  opacity: 0.15;
  animation: particleAnim 18s linear infinite;
}

@keyframes particleAnim {
  to { transform: translateY(-180px); }
}

/* -------------------------------------------------------
   LAYOUT
------------------------------------------------------- */
.hero-body {
  max-width: 1350px;
  margin: auto;
  padding: 0 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 50px;
  position: relative;
  z-index: 5;
}

.hero-text {
  max-width: 600px;
}

/* -------------------------------------------------------
   TEXT
------------------------------------------------------- */
.mini-heading {
  color: #ffffffaa;
  margin-bottom: 15px;
  font-size: 18px;
}

.hero-title {
  font-size: 64px;
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
}

/* glitch shimmer */
.hero-title .glitch {
  background: linear-gradient(90deg, #ffffff, #00d0ff, #ffffff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: glitchFlow 3.5s infinite alternate;
  background-size: 220% auto;
}

@keyframes glitchFlow {
  0% { background-position: 0%; }
  100% { background-position: 200%; }
}

.hero-subtext {
  color: #c9d2e9;
  margin: 25px 0 45px;
  font-size: 18px;
}

/* -------------------------------------------------------
   CTA BUTTONS
------------------------------------------------------- */
.hero-cta {
  display: flex;
  gap: 15px;
}

.cta-btn {
  padding: 14px 32px;
  border-radius: 50px;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-weight: 600;
  font-size: 16px;
  transition: 0.25s;
  text-decoration: none;
}

.cta-btn.primary {
  background: linear-gradient(135deg, #ffcc33, #ffb129);
  color: #121212;
  box-shadow: 0 8px 20px rgba(255,200,0,0.35);
}

.cta-btn.primary:hover {
  transform: translateY(-4px);
}

.cta-btn.secondary {
  border: 2px solid #ffffff33;
  color: #fff;
  backdrop-filter: blur(8px);
}

.cta-btn.secondary:hover {
  background: rgba(255,255,255,0.12);
  transform: translateY(-4px);
}

/* -------------------------------------------------------
   RIGHT SIDE VISUAL
------------------------------------------------------- */
.hero-visual {
  position: relative;
  width: 430px;
  height: 430px;
}

/* glowing orb */
.orb {
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, #00e0ff 0%, #0066ff 70%, transparent 90%);
  border-radius: 50%;
  position: absolute;
  top: 20%;
  left: 20%;
  filter: blur(20px);
  animation: floatOrb 7s ease-in-out infinite;
  opacity: 0.6;
}

@keyframes floatOrb {
  50% { transform: translateY(-20px); }
}

/* cyber hex */
.hex {
  width: 240px;
  height: 240px;
  background: linear-gradient(140deg, #1b2b47, #233b63);
  clip-path: polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);
  position: absolute;
  top: 18%;
  left: 18%;
  opacity: 0.35;
  filter: blur(2px);
  animation: rotateHex 12s linear infinite;
}

@keyframes rotateHex {
  to { transform: rotate(360deg); }
}

/* glowing aura */
.orb-glow {
  width: 350px;
  height: 350px;
  position: absolute;
  top: 10%;
  left: 5%;
  background: radial-gradient(circle, #00aaff44, transparent 80%);
  filter: blur(60px);
  animation: slowPulse 10s infinite ease-in-out;
}

@keyframes slowPulse {
  50% { opacity: 0.4; }
}

/* -------------------------------------------------------
   MOBILE RESPONSIVE
------------------------------------------------------- */
@media (max-width: 992px) {
  .hero-body {
    flex-direction: column;
    text-align: center;
  }

  .hero-visual {
    margin-top: 40px;
    width: 300px;
    height: 300px;
  }

  .hero-title {
    font-size: 44px;
  }

  .hero-subtext {
    font-size: 16px;
  }

  .hero-cta {
    justify-content: center;
    flex-wrap: wrap;
  }
}

@media (max-width: 600px) {
  .hero-title {
    font-size: 34px;
  }

  .hero-text {
    max-width: 100%;
  }

  .hero-visual {
    width: 250px;
    height: 250px;
  }

  .orb, .hex, .orb-glow {
    transform: scale(0.7);
  }
}

/* END OF NEW HERO SECTION CSS */