@import url('./global.css');
@import url('./fonts.css');

/* header */
.main-header {
    min-height: 70px;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 10;
}
.main-header .container {
    position: relative;
}
.main-header.dark-header {
    background-color: #242424;
    --bs-navbar-color: #fff;
}
.main-header.dark-header .nav-link {
    color: #FFF;
}
.main-header.light-header {
    background-color: #fff;
    --bs-navbar-color: #242424;
}
.main-header.light-header .nav-link {
    color: #242424;
}
.main-header.light-header .navbar-collapse.collapse.show .nav-link {
    color: #fff;
}
.main-header .navbar {
    width: 100%;
    --bs-navbar-color: rgba(255, 255, 255, 0.65);
    --bs-navbar-hover-color: rgba(255, 255, 255, 0.8);
    --bs-navbar-disabled-color: rgba(255, 255, 255, 0.3);
    --bs-navbar-active-color: rgba(255, 255, 255, 1);
    --bs-nav-link-padding-x: 7px;
}
.navbar-toggler .navbar-toggler-icon {
    background-image: unset;
}
.navbar-toggler {
    border-color: #fff;
    z-index: 11;
    right: 0;
} 
.navbar-toggler-icon {
    position: relative;
    width: 24px;
    height: 2px;
    background-color: #fff;
    display: inline-block;
    transition: all 0.3s;
}

.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 2px;
    background-color: #fff;
    transition: all 0.3s;
}

.navbar-toggler-icon::before {
    top: -8px;
    left: 0;
}

.navbar-toggler-icon::after {
    top: 8px;
    left: 0;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
    background-color: transparent !important;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
    transform: rotate(45deg);
    top: 0;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
    transform: rotate(-45deg);
    top: 0;
}
.main-header.light-header .navbar-toggler { 
    background-color: #fff;
}
.main-header.light-header .navbar-toggler .navbar-toggler-icon{
    background-color: #000;
}
.main-header.light-header .navbar-toggler .navbar-toggler-icon::before,
.main-header.light-header .navbar-toggler .navbar-toggler-icon::after {
    background-color: #000;
}

.main-header .navbar-nav {
    display: flex;
    align-items: center;
    gap: 14px;
}
.main-header .nav-link {
    color: #FFF;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    border-bottom: 1px solid transparent;
    border-radius: 5px;
    --bs-navbar-nav-link-padding-x: 0;
    --bs-nav-link-padding-y: 0;
}
.main-header .nav-link:hover {
    border-color: #0688FF;
}
.main-header .nav-link.active {
    border-color: #0688FF;
}
.main-header.dark-header .dark-header-logo { display: block;}
.main-header.dark-header .light-header-logo { display: none;}
.main-header.light-header .light-header-logo { display: block;}
.main-header.light-header .dark-header-logo { display: none;}
.main-section {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    background: 
        url('../images/elements/left-blue-smoke.svg') no-repeat left bottom,
        url('../images/elements/right-blue-smoke.svg') no-repeat right center,
        #242424;
    background-size: auto;
    background-repeat: no-repeat;
    margin-top: -70px;
}
.nav-button.white {
    border-radius: 118px;
    background: #F5FAFF;
    display: flex;
    padding: 6px 24px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #0688FF;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 22px;
}
.nav-button.white:hover {
    background-color: #d7d7d7;
}
.main-section-text-bloc {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 14px;
}
.main-section-text-bloc h1 {
    color: #fff;
    font-family: 'Netron';
    font-size: 50px;
    font-style: normal;
    font-weight: 400;
    line-height: 92px;
    margin-bottom: 0;
    z-index: 9;
    text-align: center;
    max-width: 977px;
}
.main-section-text-bloc h6 {
    color: #D9D9D9;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; 
    max-width: 399px;
}
.home-main-section-button {
    color: #FFF;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 22px;
    border-radius: 118px;
    background: linear-gradient(181deg, rgba(4, 82, 153, 0.00) 5.56%, #0688FF 98.92%);
    display: flex;
    padding: 6px 24px;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    transition: .3s;
}
.home-main-section-button:hover {
    transform: scale(1.01); 
    filter: drop-shadow(.5px .5px 5px #ffffff50) brightness(1.15);
}
.comet-bg {
    position: relative;
    overflow: hidden;
    height: 500px;
    background-color: #242424;
}
.comet {
    position: absolute;
    width: 169px;
    height: 158px;
    animation: fly 8s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}
.comet.comet-1 {
    top: -50px;
    left: 35%;
    animation-duration: 4s;
}

.comet.comet-2 {
    top: 65%;
    left: -100px;
    animation-duration: 5.5s;
}

.comet.comet-3 {
    top: 75%;
    left: 45%;
    animation-duration: 35s;
}

.comet.comet-4 {
    top: 50%;
    left: 75%;
    animation-duration: 7s;
}

.comet.comet-5 {
    top: 10%;
    left: 10%;
    animation-duration: 6.5s;
    animation-delay: 2s;
}

.comet.comet-6 {
    top: 90%;
    left: 5%;
    animation-duration: 8s;
    animation-delay: 1s;
}

.comet.comet-7 {
    top: -30px;
    left: 80%;
    animation-duration: 4.5s;
    animation-delay: 0.5s;
}

.comet.comet-8 {
    top: 30%;
    left: 55%;
    animation-duration: 9s;
    animation-delay: 0s;
}

@keyframes fly {
    0% {
        transform: translate(0, 0) scale(0.8);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translate(-600px, 600px) scale(0.6);
        opacity: 0;
    }
}
.title-row {
    display: flex;
    justify-content: center;
    margin-bottom: 110px;
}

.section-title{
    color: #242424;
    font-family: 'Netron';
    font-size: 50px;
    font-style: normal;
    font-weight: 400;
    line-height: 74px;
    margin-bottom: 0;
    text-align: center;
}

/* services */
@keyframes slideDown {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(317px);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes slideUp {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-317px);
    }
    100% {
        transform: translateY(0);
    }
}
.services-section {
    padding-top: 110px;
    padding-bottom: 110px;
    background-color: #F5F5F5;
    border-top-left-radius: 38px;
    border-top-right-radius: 38px;
    margin-top: -40px;
    position: relative;
}
.services-row {
    display: flex;
}
.services-item-bloc {
    flex: 1 1 33%;
    position: relative;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    gap: 3.5rem;
}
.services-item-bloc.first-bloc-border {
    border-right: 1px solid #D9D9D9;
}
.services-item-bloc.first-bloc-border::after {
    content: '';
    height: 17px;
    width: 2px;
    background-color: #0688FF;
    position: absolute;
    top: 0;
    right: -2px;
    animation: slideDown 15s ease-in-out infinite; 
}
.services-item-bloc.last-bloc-border {
    border-left: 1px solid #D9D9D9;
}
.services-item-bloc.last-bloc-border:before {
    content: '';
    height: 17px;
    width: 2px;
    background-color: #0688FF;
    position: absolute;
    bottom: 0;
    left: -2px;
    animation: slideUp 15s ease-in-out infinite;
}
.services-item-image-box {
    display: flex;
    justify-content: start;
}
.services-item-content-box h5 {
    color: #000;
    font-size: 21px;
    font-style: normal;
    font-weight: 700;
    line-height: 32px;
}
.services-item-content-box p {
    color: #707070;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    margin-bottom: 0;
}
/* about section */
.about-section {
    padding-top: 110px;
    padding-bottom: 110px;
    /* background: 
        url('../images/home/about-bg.svg') no-repeat 7.5% 100%,
        #F5F5F5; */
    border-bottom-left-radius: 38px;
    border-bottom-right-radius: 38px;
    position: relative;
    z-index: 9;
    min-height: 1050px;
    position: relative;
}
.about-section-bg {
    position: absolute;
    z-index: 8;
    top: 25%;
    left: 2.5%;
}
.about-section-bg svg {
    transform-style: preserve-3d;
    animation: rotate 7s infinite linear;
    opacity: .3;
}
#center-of-circle {
    transform-origin: center center;
    transform-box: fill-box;
    transform-style: preserve-3d;
    animation: rotateY 5s linear infinite;
    opacity: 0.85;
}
@keyframes rotateY {
    0% {
        transform: rotateY(0deg);
    }
    50% {
        transform: rotateY(30deg);
    }
    100% {
        transform: rotateY(0deg);
    }
}

@keyframes rotate {
    0% {
        transform: rotateY(0deg);
    }
    50% {
        transform: rotateY(30deg);
    }
    100% {
        transform: rotateY(0deg);
    }
}

.about-content-container {
    z-index: 9;
    position: relative;
}
.about-row {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
}
.about-title-row {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin-bottom: 2rem;
}

.about-section-title{
    color: #242424;
    font-family: Netron;
    text-align: center;
    text-transform: uppercase;
    font-size: 50px;
    font-style: normal;
    font-weight: 400;
    line-height: 74px;
}
.about-section-subtitle {
    text-align: center;
    color: #424242;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
}
/* here-section */
.here-section {
    position: relative;
    min-height: 787px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #242424;
    overflow: hidden;
}
.background {
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
}
.background-static {
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
}
.background-static-1 { 
    background-image: url(../images/home/here-bg/1.svg); 
    top: 0; 
    left: 0%; 
    width: 423px;
    height: 500px;
}
.background-2 { 
    background-image: url(../images/home/here-bg/2.svg); 
    top: 20%; 
    left: 10%; 
    width: 30px;
    height: 30px;
}
.background-3 { 
    background-image: url(../images/home/here-bg/3.svg); 
    top: 85%; 
    left: 15%; 
    width: 100px;
    height: 100px;
}
.background-4 { 
    background-image: url(../images/home/here-bg/4.svg); 
    top: 13%; 
    right: 15%; 
    width: 65px;
    height: 65px;
}
.background-5 { 
    background-image: url(../images/home/here-bg/5.svg); 
    top: 70%; 
    right: 10%; 
    width: 55px;
    height: 55px;
}
.background-6 { 
    background-image: url(../images/home/here-bg/6.svg); 
    top: 20%; 
    left: 60%; 
    width: 65px;
    height: 65px;
}
.background-static-2 { 
    background-image: url(../images/home/here-bg/7.svg); 
    bottom: 0; 
    right: 0;
    width: 500px;
    height: 423px;
}

.here-main-card {
    padding: 2rem;
    border: 1px solid #707070;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(5px);
}
.here-card-title-row {
    display: flex;
    margin-bottom: 2rem;
}
.here-card-title-row h4 {
    color: #FFF;
    font-family: Netron;
    font-size: 35px;
    font-style: normal;
    font-weight: 400;
    line-height: 52px;
    text-transform: uppercase;
}
.here-card-content-row {
    display: flex;
}
.here-card-media-bloc {
    width: 57.5%;
}
.here-card-list-bloc {
    width: 42.5%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.here-card-list-icon-box {
     height: 44px;
     width: 44px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 4px;
}
.here-card-list-bloc ul{
    padding-left: 0;
    display: flex;
    flex-direction: column;
    gap: .8rem;
}
.here-card-list-bloc li  {
    display: flex;
    gap: 1rem;
    align-items: center;
}
.here-card-list-bloc li:nth-child(1) .here-card-list-icon-box, .here-card-list-bloc li:nth-child(5) .here-card-list-icon-box {
    background-color: #353535;
}
.here-card-list-bloc li:nth-child(2) .here-card-list-icon-box, .here-card-list-bloc li:nth-child(4) .here-card-list-icon-box {
    background-color: #4D4D4D;
}
.here-card-list-bloc li:nth-child(3) .here-card-list-icon-box {
    background-color: #0688FF;
}
.here-card-list-bloc li:nth-child(3) .here-card-list-text-box p {
    color: #fff;
}
.here-card-list-text-box p{
    margin: 0;
    color: #4C4C4C;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
}

/* percents section */
.percents-section {
    min-height: 893px;
    display: flex;
    align-items: center;
    background-color: #F5F5F5;
}
.percents-section-row {
    display: flex;
    flex-direction: column;
}
.percents-giant-logo-row img {
    width: 130%;
    margin-bottom: -7.5%;
    margin-left: -15%;
}
.percents-content-row {
    display: flex;
}
.percents-content-media-bloc img {
    margin-top: -18%;
}
.percents-content-texts-bloc{}
.percents-content-texts-card {
    border-radius: 10px;
    background: #FFF;
    box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.12);
    display: flex;
}
.percents-content-texts-part {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
}
.percents-content-texts-part.with-border {
    border-right: 1px solid #D9D9D9;
    border-left: 1px solid #D9D9D9;
}
.percents-content-texts-part h4 {
    color: #0688FF;
    font-family: Netron;
    font-size: 35px;
    font-style: normal;
    font-weight: 400;
    margin-bottom: 0;
}
.percents-content-texts-part hr {
    border-top: 2px solid #0688FF;
    opacity: 1;
    width: 50%;
}
.percents-content-texts-part h5 {
    color: #000;
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px;
}
.percents-content-texts-part p {
    color: #424242;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    margin-bottom: 0;
}
.percents-content-texts-part {
    width: 33%;
} 

/* posts section */
.posts-section {
    padding-top: 110px;
    padding-bottom: 110px;
    background-color: #F5F5F5;
    border-top-left-radius: 38px;
    border-top-right-radius: 38px;
    z-index: 9;
}
.posts-title-row {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 72px;
    flex-direction: column;
}
.posts-title-row a {
    color: #242424;
    font-family: Netron;
    font-size: 50px;
    font-style: normal;
    font-weight: 400;
    line-height: 74px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 1rem;
    text-transform: uppercase;
}
.posts-title-row small{
    color: #0688FF;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 22px;
}
.posts-row {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2rem;
}
.post-item {
    text-decoration: none;
    display: flex;
    flex: 1 1 48%;
    max-width: 48%;
    border-radius: 10px;
    background: #FFF;
    box-shadow: 0px 8px 94px 0px rgba(0, 0, 0, 0.08);
    -webkit-transition: transform 100ms linear;
    -ms-transition: transform 100ms linear;
    transition: transform 100ms linear;
}
.post-item:hover {
    transform: scale(1.001); 
}
.post-item-content-bloc {
    display: flex;
    flex-direction: column;
    padding: 2rem;
    gap: .5rem;
}
.post-item-content-category {
    display: flex;
    gap: .2rem;
}
.post-item-content-category-box {
    border-radius: 40px;
    background: #FFF;
    box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.08);
    padding: 4px 18px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.post-item-content-category .post-item-content-category-box small {
    color: #929292;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
}
.post-item-content-category .post-item-content-category-box small b {
    color: #000;
}

.post-item-content-text-line p {
    color: #000;
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px;
}
.post-item-content-button-line {
    display: flex;
}
.post-item-content-button{
    color: #0688FF;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    border-radius: 30px;
    border: 1px solid #0688FF;
    text-decoration: none;
    padding: 4px 32px;
    -webkit-transition: background-color 300ms linear;
    -ms-transition: background-color 300ms linear;
    transition: background-color 300ms linear;
}
.post-item-content-button:hover {
    background: #0688FF;
    color: #fff;
    box-shadow: 0px 8px 34px 0px rgba(6, 136, 255, 0.50);
}
/* newsletter section */
.newsletter-section {
    padding-top: 110px;
    padding-bottom: 110px;
    border-bottom-left-radius: 38px;
    border-bottom-right-radius: 38px;
    margin-bottom: -40px;
    position: relative;
}
.newsletter-section.light {
    background-color: #fff;
}
.newsletter-section.gray {
    background-color: #F5F5F5;
}
.newsletter-section.dark {
    background-color: #242424;
}
.newsletter-section.floating {
    padding-top: 0px;
    padding-bottom: 0px;
    background-color: #242424;
}
.newsletter-card {
    border-radius: 10px;
    background: #FFF;
    box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    padding: 24px 77px;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    z-index: 9;
    margin-bottom: -168px;
    position: relative;
}
.newsletter-section.floating .newsletter-card {
    top: -100px;
}
.newsletter-content-bloc {
    display: flex;
    flex-direction: column;
    max-width: 40%;
}
.newsletter-content-bloc h4 {
    color: #0688FF;
    font-family: Netron;
    font-size: 25px;
    font-style: normal;
    font-weight: 400;
    line-height: 48px;
}
.newsletter-content-bloc p {
    color: #000;
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px;
}
.newsletter-form-bloc  {
    max-width: 40%;
    width: 100%;
}
.newsletter-form-input-box {
    border-radius: 40px;
    background: #242424;
    padding: .8rem 1rem;
    border: 2px solid transparent;
    display: flex;
    align-items: center;
    height: 54px;
}
.newsletter-form-input-box:focus-within {
    border: 2px solid #0688FF;
}
.newsletter-form-input {
    color: #A5A5A5;
    background-color: transparent;
    border: none;
    width: 100%;
}
.newsletter-form-input:focus {
    outline: none;
}
.newsletter-form-button {
    border-radius: 118px;
    background: #F5FAFF;
    color: #0688FF;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 22px;
    border: 1px solid #fff;
    padding: 6px 24px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    -webkit-transition: transform 100ms linear;
    -ms-transition: transform 100ms linear;
    transition: .3s linear;
}
.newsletter-form-button:hover {
    transform: scale(1.005); 
    background: #0688FF;
    color: #fff;
    border: 1px solid #0688FF;
    cursor: pointer;
}
/* footer */
.main-footer {
    background-color: #242424;
    padding-top: 160px;
    padding-bottom: 90px;
}
.main-footer-row {
    display: flex;
    justify-content: space-between;
}
.main-footer-ul-box {
    width: 15%;
}
.main-footer-ul-title-box {
    margin-bottom: 1rem;
}
.main-footer-ul {
    padding-left: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.main-footer-link {
    color: #FFF;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 22px;
    text-decoration: none;
}
.main-footer-small {
    color: #BDC4C1;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 14px;
    text-transform: uppercase;
}
.footer-hr {
    border-top: 1px solid #BDC4C1;
    opacity: 1;
    margin: 2rem 0;
}
.copy-footer-row {
    display: flex;
    gap: 1rem;
}
.copy-footer-row {
    display: flex;
    align-items: center;
}
.copy-footer-logo-box img {}
.copy-footer-text-box p {
    color: #BDC4C1;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    margin-bottom: 0;
}
.about-cards-bloc {
    width: 40%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.about-card-with-point {
    border-radius: 10px 50px 10px 10px;
    border: 1px solid #fff;
    background: rgba(255, 255, 255, 0.01);
    box-shadow: 0px 4px 34px 0px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(11px);
    display: flex;
    padding: 16px;
    gap: 16px;
}
.about-card-with-point.with-blue-border{
    border: 1px solid #0688FF;
    transition: .3s;
}
.about-card-point-box {
    display: flex;
    align-items: start;
}
.about-card-point-box img {
    width: 28px;
}
.about-card-content-box {
    display: flex;
    flex-direction: column;
}
.about-card-content-box h6 {
    color: #000;
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px;
}
.about-card-content-box p {
    color: #424242;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    margin-bottom: 0;
}
.about-media-bloc {
    display: flex;
    gap: 1rem;
    width: 60%;
    justify-content: center;
}
.about-media-image-box {
    display: flex;
}
.about-media-image-box img  {
    filter: drop-shadow(0px 4px 20px rgba(0, 0, 0, 0.46));
    max-width: 100%;
}
.about-media-extra {
    display: none;
}
/* about main section */
.about-main-section {
    background: url('../images/about/main-bg-1.svg') no-repeat 0% 100%,
                url('../images/about/main-bg-2.svg') no-repeat 100% 0%,
                #F5F5F5;
    padding-top: 110px;
    padding-bottom: 110px;
    min-height: 870px;
}
.about-main-section-title-row {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 60px;
    gap: 1.5rem;
}
.about-main-section-title-badge {
    color: #FFF;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 14px;
    text-transform: uppercase;
    border-radius: 30px;
    background: #0688FF;
    box-shadow: 0px 4px 100px 0px rgba(0, 0, 0, 0.14);
    padding: 4px 1rem;
}
.about-main-section-title-row h4 {
    color: #242424;
    text-align: center;
    font-family: Netron;
    font-size: 35px;
    font-style: normal;
    font-weight: 400;
    line-height: 52px;   
    margin-bottom: 0;
}
.about-main-section-cards-row {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}
.about-main-section-card {
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-radius: 10px;
    background: #FFF;
    box-shadow: 0px 4px 44px 0px rgba(0, 0, 0, 0.12);
    flex: 1 1 48%;
    text-decoration: none;
    border: 1px solid transparent;
    transition: .3s;
}
.about-main-section-card:hover {
    border: 1px solid #E0F0FF;
    border: 1px solid #0688FF;

    box-shadow: none;
    cursor: pointer;
}
.about-main-section-card-icon-box {
    display: flex;
}
.about-main-section-card-icon {
    border-radius: 4px;
    border: 1px solid #0688FF;
    background: #E0F0FF;
    padding: 12px;
}
.about-main-section-card-content-box { 
    display: flex;
    flex-direction: column;
}
.about-main-section-card-content-box h5{
    color: #242424;
    font-size: 21px;
    font-style: normal;
    font-weight: 700;
    line-height: 32px;
}
.about-main-section-card-content-box p{ 
    color: #707070;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px; 
}
.believe-section {
    padding-top: 110px;
}
.believe-section-row {
    display: flex;
    gap: 1rem;
    align-items: center;
}
.believe-section-content-bloc {
    display: flex;
    flex-direction: column;
    flex: 1 1 48%;
    gap: 2rem;
}
.believe-section-content-bloc h4 {
    color: #0688FF;
    font-size: 35px;
    font-style: normal;
    font-weight: 400;
    line-height: 52px;
    font-family: Netron;
}
.believe-section-content-bloc p {
    color: #707070;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
}
.believe-section-media-bloc {
    flex: 1 1 48%;
}
/* restricted-section */
.restricted-section {
    background: linear-gradient(180deg, rgba(6, 136, 255, 0.00) 55%, rgba(6, 136, 255, 0.20) 100%), #242424;
    min-height: 80vh;
    display: flex;
}
.restricted-section-row {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
}
.restricted-section-icon-bloc {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}
.restricted-section-content-bloc {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.restricted-section-content-bloc h4 {
    color: #0688FF;
    text-align: center;
    font-family: Netron;
    font-size: 35px;
    font-style: normal;
    font-weight: 400;
    line-height: 52px;
}
.restricted-section-content-bloc p {
    color: #FFF;
    text-align: center;
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px;
}
.restricted-section-content-button {
    color: #FFF;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 22px;
    border-radius: 118px;
    background: #0688FF;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    padding: 6px 24px;
    text-decoration: none;
}
/* page-title-section */
.page-title-section {
    background: url('../images/about/page-title-bg-1.svg') no-repeat 0% 100%,
    url('../images/about/page-title-bg-2.svg') no-repeat 100% 0%,
    #F5F5F5;
    min-height: 355px;
    display: flex;
    align-items: center;
}
.page-title-section.next-rounded {
    min-height: 395px;   
}
.page-title-row {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    height: 100%;
    width: 100%;
}
.page-title-breadcrumb a {
    color: #707070;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 22px;
    text-decoration: none;
    display: flex;
    align-items: center; 
    gap: .5rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.page-title-breadcrumb a:hover {
    transform: translateY(-2px) translateX(-2px);
    filter: drop-shadow(0 4px 8px #ffffff20);
}
.page-title-breadcrumb a svg {
    transition: transform 0.2s ease;
}

.page-title-breadcrumb a:hover svg {
    transform: rotate(180deg);
}
.page-title-bloc {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
}
.page-title-badge {
    color: #FFF;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 14px;
    text-transform: uppercase;
    border-radius: 30px;
    background: #0688FF;
    box-shadow: 0px 4px 100px 0px rgba(0, 0, 0, 0.14);
    padding: 4px 1rem;
}
.page-title {
    color: #242424;
    text-align: center;
    font-family: Netron;
    font-size: 35px;
    font-style: normal;
    font-weight: 400;
    line-height: 52px;   
    margin-bottom: 0;
}
.page-title-text {
    color: #424242;
    text-align: start;
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px;
}
.page-title-text-bloc {
    max-width: 841px;
}
/* solutions page */
.solutions-main-section {
    background: linear-gradient(300deg, rgba(6, 136, 255, 0.00) 65.03%, rgba(6, 136, 255, 0.20) 100.46%), #242424;
    min-height: 800px;
    padding-top: 110px;
    padding-bottom: 110px;
}
.solutions-main-section-row {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}
.solutions-main-section-title-bloc {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.solutions-main-section-title-bloc h2 {
    color: #FFF;
    text-align: center;
    font-family: Netron;
    font-size: 36px;
    font-style: normal;
    font-weight: 400;
    line-height: 54px;
    margin-bottom: 0;
}
.solutions-main-section-title-bloc hr {
    border-top: 2px solid #0688FF;
    opacity: 1;
    width: 94px;
}

.solutions-main-section-title-bloc p {
    color: #D9D9D9;
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    max-width: 626px;
    margin-bottom: 0;
}
.solutions-main-section-cards-bloc {
    display: flex;
    gap: 2rem;
    justify-content: center;
}
.solutions-main-section-card {
    display: flex;
    padding: 28px 28px;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    flex: 0 1 auto;
    max-width: 360px;
    border-radius: 10px;
    border: 2px solid #FFF;
}
.solutions-main-section-card.white-bg {
    background-color: #fff;
}
.solutions-main-section-card h5 {
    color: #0688FF;
    text-align: center;
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px;
}
.solutions-main-section-card p {
    color: #D9D9D9;
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
}
.solutions-main-section-card.white-bg p{
    color: #242424;
}
/* cases page */
.cases-main-section {
    background: 
    linear-gradient(300deg, rgba(6, 136, 255, 0.00) 65.03%, rgba(6, 136, 255, 0.20) 100.46%), 
    url('../images/about/cases/bg-1.svg') no-repeat 10% 50%,
    url('../images/about/cases/bg-2.svg') no-repeat 75% 20%,
    url('../images/about/cases/bg-3.svg') no-repeat 100% 100%,
    #242424;
    padding-top: 110px;
    min-height: 1050px;
    padding-bottom: 110px;
}
.cases-cards-row {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}
.cases-card {
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
    box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(10px);
    display: flex;
    padding: 12px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    flex: 1 0 48%;
    transition: .3s;
}
.cases-card:hover {
    filter: drop-shadow(0px 4px 10px rgba(255, 255, 255, 0.1));
    -webkit-transform: scale(1.005);
    -ms-transform: scale(1.005);
    transform: scale(1.005);
}
.cases-card-media-bloc { display: flex; width: 100%;}
.cases-card-media-bloc img {  width: 100%;}
.cases-card-content-bloc {
    display: flex;
    flex-direction: column;
}
.cases-card-content-bloc h5 {
    color: #FFF;
    text-align: center;
    font-family: Netron;
    font-size: 25px;
    font-style: normal;
    font-weight: 400;
    line-height: 48px; 
}
.cases-card-content-bloc p {
    color: #D9D9D9;
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
}
/* vision and values page */
.vision-main-section {
    min-height: 1050px;
    padding-top: 110px;
    padding-bottom: 150px;
    border-radius: 38px 38px 0px 0px;
    margin-top: -40px;
    background: linear-gradient(300deg, rgba(6, 136, 255, 0.00) 65.03%, rgba(6, 136, 255, 0.20) 100.46%), #242424;
}
.vision-main-section-row {
    display: flex;
}

/* essence page */
.essence-main-section {
    margin-top: -40px;
    border-radius: 38px 38px 0px 0px;
    padding-top: 110px;
    padding-bottom: 150px;
    background: #242424;
}
.essence-main-section-row {
    display: flex;
    gap: 6rem;
    align-items: start;
}
.essence-main-section-media-bloc {
    flex: 1 1 48%;

}
.essence-main-section-content-bloc {
    flex: 1 1 48%;

}

.essence-main-section-media-bloc img {
    width: 100%;
}
.essence-main-section-content-bloc p {
    color: #FFF;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 22px;
}
.roadmap-section {
    background:
        url('../images/about/essence/bg-1.svg') no-repeat 0% 10%,
        url('../images/about/essence/bg-2.svg') no-repeat 100% 75%,
        url('../images/about/essence/bg-3.svg') no-repeat 0% 100%,
        #F5F5F5;
    min-height: 2000px;
    margin-top: -40px;
    border-radius: 38px 38px 0px 0px;
    padding-top: 110px;
    padding-bottom: 110px;
}
.roadmap-title-section-row {
    display: flex;
    justify-content: center;
    margin-bottom: 110px;
}
.roadmap-title-section-row h4 {
    color: #242424;
    text-align: center;
    -webkit-text-stroke-width: 0.5;
    -webkit-text-stroke-color: #242424;
    font-family: Netron;
    font-size: 36px;
    font-style: normal;
    font-weight: 400;
    line-height: 54px;
}
.roadmap-section-row {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.roadmap-section-item-bloc {
    display: flex;
    gap: 2rem;
}
.roadmap-section-item-content-box {
    display: flex;
    flex-direction: column;
    flex: 1 1 1 33%;
    gap: .62rem;
    text-align: right;
    justify-content: center;
}
/* .roadmap-section-item-content-box */
.roadmap-section-item-bloc .item-1 {}
.roadmap-section-item-bloc.item-2 .roadmap-section-item-year-box { order: 1;}
.roadmap-section-item-bloc.item-2 .roadmap-section-item-media-box { order: 2;}
.roadmap-section-item-bloc.item-2 .roadmap-section-item-content-box{ order: 3; text-align: left;}
.roadmap-section-item-bloc .item-3 {}
.roadmap-section-item-bloc .item-4 {}
.roadmap-section-item-bloc.item-4 .roadmap-section-item-year-box { order: 1;}
.roadmap-section-item-bloc.item-4 .roadmap-section-item-media-box { order: 2;}
.roadmap-section-item-bloc.item-4 .roadmap-section-item-content-box{ order: 3; text-align: left;}
.roadmap-section-item-bloc .item-5 {}
.roadmap-section-item-bloc .item-6 {}
.roadmap-section-item-bloc.item-6 .roadmap-section-item-year-box { order: 1;}
.roadmap-section-item-bloc.item-6 .roadmap-section-item-media-box { order: 2;}
.roadmap-section-item-bloc.item-6 .roadmap-section-item-content-box{ order: 3; text-align: left;}
.roadmap-section-item-content-box h5 {
    color: #242424;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px;
}
.roadmap-section-item-content-box p {
    color: #4C4C4C;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;  
}
.roadmap-section-item-content-box.align-right {
    text-align: right;
}
.roadmap-section-item-content-box.align-left {
    text-align: start;
}
.roadmap-section-item-media-box {
    border-radius: 12px;
    border: 1.4px solid #D4D4D4;
    padding: 10px;
    flex: 1 1 33%;
    transition: .3s;
}
.roadmap-section-item-media-box.active {
    border-color: #0688FF;
    box-shadow: rgba(13, 110, 253, 0.314) 0px 0px 10px 0px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.roadmap-section-item-year-box {
    display: flex;
    align-items: center;
    justify-content: center;
}
.roadmap-section-item-year-box.active svg path{
    fill: #0688FF;
    transition: fill 0.3s ease;
}
.roadmap-section-line-bloc {
    display: flex;
    justify-content: center;
}
.contact-main-section {
    padding-top: 110px;
    padding-bottom: 150px;
    background-image: url('../images/contact/contact-bg.png');
    min-height: 1150px;
    background-repeat: no-repeat;
    background-size: cover;
}
.contact-main-section-row {
    display: flex;
    justify-content: space-between;
}
.contact-main-section-address-card {
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.40);
    box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(7px);
    display: flex;
    flex-direction: column;
    padding: 20px;
    max-width: 405px;
    height: fit-content;

}
.contact-main-section-address-link {
    display: flex;
    gap: .5rem;
    align-items: center;
}
.contact-main-section-address-card ul {
    list-style: none;
    margin-bottom: 0;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.contact-main-section-address-link {
    text-decoration: none;
    color: #000;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
}
.contact-main-section-contact-form-card {
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.40);
    box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(7px);
    padding: 48px 48px 60px 48px;
    display: flex;
    flex-direction: column;
    gap: 49px;
    max-width: 547px;
    width: 100%;
}
.contact-main-section-contact-form-card h5 {
    color: #000;
    font-size: 21px;
    font-style: normal;
    font-weight: 700;
    line-height: 32px; 
}
.contact-main-section-contact-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.contact-form-row {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}
.contact-form-label {
    color: #000;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
}
.contact-form-input {
    border-radius: 10px;
    border: 1px solid #BDC4C1;
    background: #FFF;
    height: 46px;
    padding: .5rem 1rem;
}
.contact-form-textarea {
    border-radius: 10px;
    border: 1px solid #BDC4C1;
    background: #FFF;
    height: 46px;
    padding: .5rem 1rem;
    min-height: 92px;
}
.contact-form-button-row {
    display: flex;
    margin-top: 3rem;
}
.contact-form-button {
    display: flex;
    gap: .62rem;
    display: flex;
    padding: 6px 24px;
    justify-content: center;
    align-items: center;
    border-radius: 118px;
    background: #0688FF;
    border: 1px solid #0688FF;
    color: #fff;
    height: 54px;
    width: 100%;
    -webkit-transition: transform 100ms linear;
    -ms-transition: transform 100ms linear;
    transition: transform 100ms linear;
}
.contact-form-button:hover {
    transform: scale(1.005); 
    background: #0688FF;
    color: #fff;
    border: 1px solid #0688FF;
}
/* blog */
.blog-main-section {
    background:
        url('../images/blog/bg-1.svg') no-repeat 0% 30%,
        url('../images/blog/bg-2.svg') no-repeat 100% 0%,
        #F5F5F5;
    min-height: 800px;
    padding-top: 110px;
    padding-bottom: 110px;   
}
.blog-main-title-row {
    display: flex;
    justify-content: center;
    margin-bottom: 60px;
}
.blog-main-title-row h4 {
    color: #242424;
    text-align: center;
    -webkit-text-stroke-width: 0.5;
    -webkit-text-stroke-color: #242424;
    font-family: Netron;
    font-size: 35px;
    font-style: normal;
    font-weight: 400;
    line-height: 52px; 
}

/* blog post page */
.postpage-main-section {
    background:
    url('../images/blog/bg-1.svg') no-repeat 0% 30%,
    url('../images/blog/bg-2.svg') no-repeat 100% 0%,
    #F5F5F5;
    min-height: 800px;
    padding-top: 110px;
    padding-bottom: 110px;   
}
.postpage-title-row {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    align-items: center;
}
.postpage-title-row h4 {
    text-align: center;
    -webkit-text-stroke-width: 0.5;
    -webkit-text-stroke-color: #242424;
    font-family: Netron;
    font-size: 35px;
    font-style: normal;
    font-weight: 400;
    line-height: 52px; 
}
.postpage-title-row h4.black{ color: #242424;}
.postpage-title-row h4.blue { color: #0688FF; }
.postpage-title-row .blue-badge {
    padding: 4px 18px;
    border-radius: 40px;
    background: #0688FF;
    box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.08);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    color: #FFF;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    width: fit-content;
}
.postpage-content-row {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    margin-top: 3rem;
}
.postpage-content-banner-box img{
    width: 100%;
    border-radius: 10px;
}
.postpage-content-texts-box {
    display: flex;
    flex-direction: column;
}
.postpage-content-texts-box h5{
    color: #000;
    font-size: 21px;
    font-style: normal;
    font-weight: 700;
    line-height: 32px;
    margin-top: 3rem;
}
.postpage-content-texts-box hr{
    opacity: 1;
}
.postpage-content-texts-box p{
    color: #242424;
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px;
    margin-top: 1rem;
}

/* newsletter modal  */
.newsletter-modal .modal-dialog {
    max-width: 720px;
}
.custom-modal-close-button {
    background-color: #F6F6F6;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #F6F6F6;
    border-radius: 4px;
}
.custom-modal-close-button svg { width: 11px; height: 11px;}
.custom-modal-close-button:hover {
    transform: scale(1.01); 
    filter: drop-shadow(.5px .5px 5px #ffffff50) brightness(1.15);
}
.custom-modal-close-button:active {
    box-shadow:  7px 6px 28px 1px rgba(0, 0, 0, 0.24); 
    transform: translateY(1px); 
} 
.modal-top-row {
    display: flex;
    justify-content: end;
}
.custom-modal-content {
    padding: 34px;
    border-radius: 10px;
    background: linear-gradient(246deg, rgba(255, 255, 255, 0.00) 1.11%, rgba(0, 0, 0, 0.20) 99.19%), #242424;
    box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.32);
    display: flex;
    gap: 2rem;
}
.modal-body-row {
    display: flex;
    justify-content: end;
    gap: 3rem;
}
.modal-media-bloc{
    display: flex;
    width: 40%;
}
.modal-media-bloc img{
    width: 100%;
}
.modal-content-bloc {
    display: flex;
    flex-direction: column;
    width: 60%;
}
.modal-content-bloc h4 {
    color: #FFF;
    font-family: Netron;
    font-size: 25px;
    font-style: normal;
    font-weight: 400;
    line-height: 48px;
}
.modal-content-bloc p {
    color: #9B9B9B;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
}
.custom-modal-newsletter-label {
    border-radius: 40px;
    background: #FFF;
    display: flex;
    padding: 8px 12px;
    justify-content: space-between;
    align-items: center;
}
.custom-modal-newsletter-input {
    color: #2D2D2D;
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px;
    border: 0;

}
.custom-modal-newsletter-input:focus {
    outline: none;
}
.custom-modal-newsletter-form {
    margin-top: 37px;
}
.custom-modal-newsletter-button {
    display: flex;
    padding: .2rem 1rem;
    min-width: 120px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 118px;
    background: #0688FF;
    border: 1px solid #0688FF;
    color: #FFF;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 22px;
    transition: .3s;
}
.custom-modal-newsletter-button:hover {
    transform: scale(1.01); 
    filter: drop-shadow(.5px .5px 5px #ffffff50) brightness(1.15);
}
.custom-modal-newsletter-button:active { 
    box-shadow:  7px 6px 28px 1px rgba(0, 0, 0, 0.24); 
    transform: translateY(1px); 
} 
/* loader */
.section-loader {
    background: #242424;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100dvh;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    opacity: 1;
    transition: opacity 1s ease, transform 1s ease;
}
.section-loader .wrap-loader {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.section-loader .loader-logo {
    width: 200px;
    height: auto;
    fill: #cccccc;
    position: relative;
}
.section-loader .loader-logo-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    fill: none;
    -webkit-mask: linear-gradient(to right, #000 50%, transparent 50%);
    -webkit-mask-size: 200% 100%;
    animation: reveal 2s infinite linear;
}
.section-loader .loader-text {
    font-family: Netron;
    position: absolute;
    bottom: 5%;
    color: #bdbdbd;
}
.section-loader .loader-dots {
    display: inline-block;
}
.section-loader .loader-dots::after {
    content: " ";
    animation: dots 3s steps(3, end) infinite;
}
.fade-out {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 1s ease, transform 1s ease;
}

@keyframes reveal {
    0% { -webkit-mask-position: 100% 0; }
    100% { -webkit-mask-position: 0 0; }
}
@keyframes dots {
    0% {
    content: "";
    }
    33% {
    content: ".";
    }
    66% {
    content: "..";
    }
    100% {
    content: "...";
    }
}
/* form */
.error-message {
    color: rgb(255, 139, 139);
    margin-top: 0.2rem;
}
.loading-element-wrapper {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background-color: #00000060;
    cursor: not-allowed;
}
.loading-element {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}
.loading-element-wrapper .loading-element .loader {
  color: #ffffff;
  font-size: 45px;
  text-indent: -9999em;
  overflow: hidden;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  transform: translateZ(0);
  animation: mltShdSpin 1.7s infinite ease, round 1.7s infinite ease;
}

@keyframes mltShdSpin {
  0% {
    box-shadow: 0 -0.83em 0 -0.4em,
    0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
    0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  5%,
  95% {
    box-shadow: 0 -0.83em 0 -0.4em, 
    0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 
    0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  10%,
  59% {
    box-shadow: 0 -0.83em 0 -0.4em, 
    -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, 
    -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
  }
  20% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em,
     -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, 
     -0.749em -0.34em 0 -0.477em;
  }
  38% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em,
     -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, 
     -0.82em -0.09em 0 -0.477em;
  }
  100% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 
    0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
}

@keyframes round {
  0% { transform: rotate(0deg) }
  100% { transform: rotate(360deg) }
}
 
/* loader v2 */

/* loader styles:: */
.form-loader-overlay {
    display: none;
    opacity: 0;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    transition: opacity 0.5s ease;
    cursor: not-allowed;
}
.form-loader-overlay .spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #fff;
    border-top: 5px solid #bbb;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
.form-loader-overlay.show { 
    opacity: 1;
    display: flex;
}
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}