@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300;500;600;700;900&family=Geologica:wght@300;400;500;600;700&family=Roboto:ital,wght@0,500;0,700;1,400&display=swap');
html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    position: relative;
    width: 100vw;
    max-width: 100%;
    padding: 4px;
    background: url("../img/noise.png") repeat #262626;
    color: #666;
    font-weight: 200;
    font-size: 16px;
    font-family: 'Fira Sans', sans-serif;
}
html{
    overflow-y: auto;
}
/* html::before {
    content: '';
    position: fixed;
    z-index: 9999;
    width: 100vw;
    max-width: 100%;
    height: 4px;
    box-sizing: border-box;
    background-color: #109BB4;
    pointer-events: none;
}
html::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100vw;
    max-width: 100%;
    height: 100vh;
    box-sizing: border-box;
    border-width: 4px;
    border-style: solid;
    border-color: #109BB4;
    pointer-events: none;
} */

body::before {
    content: '';
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 9999;
    width: 100vw;
    max-width: 100%;
    height: 4px;
    background-color: #109BB4;
}
body::before, body::after, body ::before, body ::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
@font-face {
    src: url('../pontiac/Pontiac-Regular.otf');
    font-family:"Pontiac";
    font-weight:400;
    font-style:normal
}

@font-face {
  src:url("../pontiac/Pontiac Bold.otf");
  font-family:"Pontiac";
  font-weight:700;
}
@font-face {
  font-family:"Pontiac";
  src:url("../pontiac/Pontiac_Light.otf");
  font-weight:200;
  font-style:normal
}

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

a,
a:visited,
a:focus,
a:active,
a:hover {
    text-decoration: none;
    outline: none;
}
a{
    color: #666;
    text-decoration: none;
    font-family:"Pontiac";
}
a,
button {
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

button {
    cursor: pointer;
    background: none;
    border: none;
}

button:focus {
    outline: 0;
}

a {
    color: #2c3e50;
    font-size: 16px;
}
a:hover{
    color: #109BB4;
}
h1 {
    font-size: 70px;
    line-height: 80px;
    color: #333;
}

h2 {
    font-size: 45px;
    line-height: 55px;
    color: #333;
    font-family:"Pontiac";
}

h3 {
    font-size: 24px;
    line-height: 34px;
    color: #333;
    font-family:"Pontiac";
}

h4 {
    font-size: 22px;
    line-height: 32px;
}

h5 {
    font-size: 18px;
    line-height: 28px;
}

h6 {
    margin: auto;
    padding: 0 24px;
    color: #ccc;
    font-style: italic;
    font-weight: 300;
    font-size: 24px;
}

p {
    color: #ccc;
    font-style: normal;
    font-weight: 300;
    font-size: 16px;
    margin-bottom: 5px;
}
/*.container {
    max-width: 1240px;
}*/
.container-menu {
  max-width: 1728px;
  margin: 0 auto;
  height: 100%;
}

.overlay {
    position: relative
}

.overlay:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(19, 15, 64, 0.8)
}



.shadow-none {
    -webkit-box-shadow: 0 0 !important;
    box-shadow: 0 0 !important
}

.bg-cover {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover
}

/*--------------------------------------------------------------------
    Preloader
---------------------------------------------------------------------*/
.preloader {
    background-color: #109BB4;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999999;
}

.preloader .spinner {
    width: 60px;
    height: 60px;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 100%;
    -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
    animation: sk-scaleout 1.0s infinite ease-in-out;
}

@-webkit-keyframes sk-scaleout {
    0% {
        -webkit-transform: scale(0)
    }

    100% {
        -webkit-transform: scale(1.0);
        opacity: 0;
    }
}

@keyframes sk-scaleout {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    100% {
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
        opacity: 0;
    }
}

.d-table {
    width: 100%;
    height: 100%
}

.padding-section{
    padding: 70px 0;
}
/*-------------------------------------------------------------------------------------
    scroll-area
---------------------------------------------------------------------------------------*/
.scroll-area {
    position: fixed;
    bottom: 30px;
    right: 40px;
    z-index: 1;
    display: none;
    z-index: 99;
}
.scroll-area i {
    width: 55px;
    height: 55px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: #109BB4;
    font-size: 21px;
    border-radius: 50%;
    border: 1px solid #109BB4;
}
/*-------------------------------------------------------------------------------------
    Header
---------------------------------------------------------------------------------------*/

.header-top-area {
    background-color: #0e0a38;
    overflow: hidden;
    padding: 15px 0;
}

.header-top-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}


/* .header-btm-area {
    -webkit-transition: 0.5s;
    transition: 0.5s;
    position: relative;
    border-bottom: 1px solid #373737;
    height: 124px;
} */

.main-menu-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%;
}
/* .separator-dense {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: -0;
    margin-right: -0;
    position: relative;
    z-index: 100;
    height: 1px;
    pointer-events: none;
    background-color: #d74b0f61;
} */
.separator-dense::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: -4px;
    width: 1px;
    height: 9px;
    background-color: #109BB4;
}

.separator-dense::before{
    content: "";
   display: table;
}
.separator-dense__cell {
    width:100%;
    position: relative;
/*    border-bottom: 1px solid rgba(255,78,0,0.25);*/
    background-color: transparent;

}
/* .separator-dense__cell::before {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 1px;
    height: 9px;
    background-color: rgba(255,78,0,0.5);
}
.separator-dense__cell::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 100%;
    height: 5px;
    background-image: linear-gradient(to right, transparent, transparent 11%, rgba(255,78,0,0.15) 11%, rgba(255,78,0,0.15) calc(11% + 1px), transparent calc(11% + 1px), transparent 22%, rgba(255,78,0,0.15) 22%, rgba(255,78,0,0.15) calc(22% + 1px), transparent calc(22% + 1px), transparent 33%, rgba(255,78,0,0.15) 33%, rgba(255,78,0,0.15) calc(33% + 1px), transparent calc(33% + 1px), transparent 44%, rgba(255,78,0,0.15) 44%, rgba(255,78,0,0.15) calc(44% + 1px), transparent calc(44% + 1px), transparent 55%, rgba(255,78,0,0.15) 55%, rgba(255,78,0,0.15) calc(55% + 1px), transparent calc(55% + 1px), transparent 66%, rgba(255,78,0,0.15) 66%, rgba(255,78,0,0.15) calc(66% + 1px), transparent calc(66% + 1px), transparent 77%, rgba(255,78,0,0.15) 77%, rgba(255,78,0,0.15) calc(77% + 1px), transparent calc(77% + 1px), transparent 88%, rgba(255,78,0,0.15) 88%, rgba(255,78,0,0.15) calc(88% + 1px), transparent calc(88% + 1px), transparent 100%);
    background-color: transparent;
} */

.site-logo {
    -ms-flex-preferred-size: 20%;
    flex-basis: 20%;
    position: relative;
    height: 100px;
    padding-top: 12px;
    padding-bottom: 12px;
    transition: opacity 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}
.site-logo::after {
    content: '';
    position: absolute;
    top: 0;
    right: -1px;
    width: 1px;
    height: 100%;
    /* background-color: #373737; */
    transition: background-color 0.3s ease;
}
.site-logo::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 100%;
    /* background-color: #373737; */
    transition: background-color 0.3s ease;
}
.site-logo img {
    max-width: 180px;
    height: 80px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
}

.main-menu-area {
    -ms-flex-preferred-size: 76%;
    flex-basis: 76%;
    z-index: 99;
    margin-left: 8.33333%;
    position: relative;
    padding: 0;
}
.main-menu-area::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 100%;
    /* background-color: #373737; */
    transition: background-color 0.3s ease;
}
.header-cart {
    -ms-flex-preferred-size: 6%;
    flex-basis: 6%;
}

.header-log-reg {
    -ms-flex-preferred-size: 19%;
    flex-basis: 19%;
}

.main-menu-area ul li {
    display: inline-block;
    position: relative;
    width: 11.11111%;
    max-width: 11.11111%;
    height: 100%;
}
.header-log-reg,
.main-menu-area ul li{
    position: relative;
}


.main-menu-area ul li a {
    font-size: 14px;
    font-weight: 400;
    color: #8c8b99;
    font-family:"Pontiac";
    text-transform: lowercase;
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 124px;
    position: relative;
}
.header-log-reg .overly-main_icon,
.main-menu-area ul li .overly-main_icon {
    position: absolute;
    content: '';
    bottom: 100%;
    overflow: hidden;
    left: 0; 
    right: 0; 
    width: 100%;
    height:0%;
    background-image: url('../img/banner/nav.png');
    background-size: cover;
    background-repeat: no-repeat;
    transition:all .3s ease-out;
}
.header-log-reg:hover .overly-main_icon,
.main-menu-area ul li:hover .overly-main_icon {
     bottom: 0;
    height: 100%;
    transition:all .3s ease-in;
}
.main-menu__drawer {
    position: absolute;
    right: 0;
    bottom: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.main-menu__drawer.icon-socials::before {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
}
.main-menu__path {
    transition-property: stroke-dashoffset;
}
.main-menu-area ul li a.active {
    color: #FF630E;
}

.main-menu-area ul li a:hover {
    color: #109BB4;
}
.main-menu-area .sub-menu {
    position: absolute;
    top: 90px;
    z-index: 1;
    width: 200px;
    background-color: #212121;
    text-align: left;
    -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    -webkit-transition: 0.5s;
    transition:all 0.5s ease-in;
    opacity: 0;
    visibility: hidden;
    border: 1px solid #FF630E;
}

.main-menu-area .sub-menu li {
    border-bottom: 1px solid #373737;
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

.ang-btn {
    margin-left: 5px;
}

.main-menu-area .sub-menu li:last-child {
    border-bottom: 0px;
}

.main-menu-area ul .sub-menu li a {
    display: block;
    padding: 10px 5px;
    font-size: 14px;
    font-weight: 400;
    color: #8c8b99;
    font-family:"Pontiac";
    height: auto;
}
.main-menu-area ul li:hover ul {
    visibility: visible;
    opacity: 1;
    transition:all 0.5s ease-out;
}

/******mega sub-menu************/
.sub-menu_mega {
    position: absolute;
    top: 100%;
    left: -200%;
    opacity: 0;
    width: 1000px;
    height: 385px;
    padding: 25px 0 0;
    transition: opacity 0.4s, padding 0.3s ease, transform 0.4s;
    transform: translate(0,-150%);
}
.main-menu-area ul li:hover .sub-menu_mega{
    opacity: 1;
    transform: translate(0,0);
}
.sub-menu__wrapper {
    display: -ms-flexbox;
    display: flex;
    height: 385px;
    border: 1px solid #109BB4;
    background-color: #212121;
}
.sub-menu__wrapper--left {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 33%;
    padding: 22px;
    background-color: #1a1a1a;
}
.sub-menu__wrapper--left h4 {
    font-weight: 400;
    font-size: 16px;
    text-align: center;
}
.left_box {
    display: block;
    margin-top: 20px;
    text-align: center;
    transition: opacity 0.4s;
}

.left_box .icon a{
    width: 44px;
    height: auto;
    margin: 0 auto;
}
.left_box .icon a img {
    max-width: 40px;
    width: 100%;
    height: auto;
}

.left_box h4 a {
    height: 0px !important;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    margin-top: 22px;
    padding-bottom: 6px;
}
.left_box p {
    font-size: 12px;
    font-weight: 300;
    font-style: italic;
    width: 100%;
    margin-bottom: 0px;
    color: #666;
}
.sub-menu__title {
    font-weight: 400;
    font-size: 16px;
    text-align: start;
}
.sub-menu__wrapper--right {
    width: 100%;
    padding: 30px 45px;
}
.sub-nav_right {
    margin-top: 2px;
    overflow: hidden;
}
.sub-nav_right > ul > li {
    max-width: 50% !important;
    width: 100%;
    float: left;
    margin-bottom: 18px;
}
.sub-nav_right > ul > li > a {
    display: block;
    text-align: start;
    height: 55px;
    display: flex;
    justify-content: start;
}
.sub-nav_right > ul > li > a i {
    color: #109BB4;
    font-size: 25px;
    margin-right: 12px;
}

.sub-nav_bottom{
    display: flex;
    flex-wrap: wrap;
}
.nav-bottom-left {
    width: 30%;
}
.nav-bottom-left ul{
    margin-top: 20px;
    margin-bottom: 25px;
    text-align: start;
}
.nav-bottom-left ul li {
    max-width: 100%;
    height: auto;
    width: 100%;
}
.nav-bottom-left ul li a{
    display: block;
    height: 30px;
}
.nav-bottom__right {
    display: flex;
    min-width: 280px;
}
.sub-menu__bottom-thumbnail{
    position: relative;
    overflow: hidden;
}
.sub-menu__bottom-thumbnail img {
    max-width: 275px;
    height: auto;
    border-radius: 5px;
}

.sub-menu__bottom-thumbnail .technology-video a {
    width: 40px;
    height: 40px;
    position: absolute;
    z-index: 9999;
    background: #109BB4;
    top: 30%;
    right: 43%;
    opacity: 1;
    color: #ffff;
}


.video_des{
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: end;
    align-items: flex-end;
   
   
}
.video_des p{
    padding-bottom: 35px;
    font-style: italic;
    font-size: 12px;
    width: 120px;
    color: #666;
    margin-bottom:0;
}
/******mega sub-menu************/
.header-log-reg {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    border: 1px solid #109BB4;
    border-top: none;
    border-right: none;
    height: 100%;
}
.header-log-reg a{
    color: #109BB4;
    font-weight: 500;
    font-size: 110%;
    z-index: 1;
}
.header-log-reg::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background: #109BB4;
}

.sidebar-inner {
    position: relative;
    padding: 18px 45px;
}
.sidebar-close {
    position: absolute;
    top: 20px;
    right: 45px;
}

.sidebar-logo {
    padding-bottom: 10px;
    border-bottom: 1px solid #f000;
}

.sidebar-logo img {
    max-width: 140px;
}

.sidebar-wrap {
    position: fixed;
    right: -485px;
    top: 0;
    width: 445px;
    height: 100%;
    background: black;
    overflow-y: scroll;
    -webkit-box-shadow: -5px 0 20px -5px rgba(0, 0, 0, 0.5);
    box-shadow: -5px 0 20px -5px rgba(0, 0, 0, 0.5);
    z-index: 9999999;
    -webkit-transition: all 0.5s ease-out 0s;
    transition: all 0.5s ease-out 0s;
}

.sidebar-wrap.sidebar-opened {
    right: 0px;
    width: 100vw;
    height: 100vh;
    background-color: black;
    border: 5px solid transparent;
    overflow: hidden;
}

.header-toggle-btn {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease;
    position: fixed;
    top: 40px;
    right: 40px;
    z-index: 104;
}
/*sticky*/
.header-toggle-btn.sticky {
   visibility: visible;
   opacity: 1;
   animation: sticky 0.3s ease-in;
}

@keyframes sticky {
    0% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%); 
         transition: all 0.3s ease-out;
    }
    100% {
        -webkit-transform: translateY(0%);
        transform: translateY(0%); 
        transition: all 0.3s ease-in;
    } 
}
.header-toggle-btn a {
    text-align: center;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-width: 5px;
    color: #fff;
    width: 140px;
    height: 60px;
    background: #109BB4;
    line-height: 20px;
    cursor: pointer;
    
}
.header-toggle-btn a i{
    padding-left: 10px;
}


.header-icon {
    width: 25%;
    height: 100%;
    /* border-right: 1px solid #109BB4;
    border-left: 1px solid #109BB4; */
    display: none;
}
.header-icon a {
    color: #FEFEFE;
    cursor: pointer;
    display: block;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.mean-container .mean-nav > ul {
    padding: 0;
    margin: 0;
    width: 100%;
    list-style-type: none;
    display: block !important;
}

.mean-container a.meanmenu-reveal {
    display: none !important;
}

.mean-container .mean-bar {
    padding: 0;
    min-height: auto;
    background: none;
}

.mean-container .mean-nav {
    background: transparent;
    margin-top: 0;
}

.mean-container .mean-nav ul li a {
    width: 100%;
    padding: 10px 0;
    color: #fff;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 700;
}

.mean-container .mean-nav > ul > li:first-child > a {
    border-top: 0 !important;
}

.mean-container .mean-nav ul li a.mean-expand:hover {
    background: transparent;
}

.sidebar-close-btn {
    width: 40px;
    height: 40px;
    border: 1px solid;
    text-align: center;
    line-height: 40px;
    border-radius: 50%;
    font-size: 16px;
    color: #fff;
    cursor: pointer;
}
.mean-container .mean-nav ul li li a {
    opacity: 1;
}

.mean-container .mean-nav ul li a.mean-expand {
    margin-top: -6px;
    font-size: 32px !important;
}

.mobile-menu.mean-container {
    overflow: hidden;
}

.sidebar-content .search-form {
    margin: 20px 0 25px;
}

.sidebar-content .search-form span {
    position: absolute;
    right: 20px;
    top: 14px;
    font-size: 20px;
    color: #a19e9e;
}

.sidebar-content .contact-info {
    padding: 0;
    position: absolute;
    top: 70%;
}
.contact_info_hidden{
    display:none;
}
.sidebar-content .contact-info li {
    margin: 0;
    padding: 6px 0;
    color: #fff;
}

.sidebar-content .social-icon li {
    display: inline-block;
}

.sidebar-content .social-icon li a {
    margin: 0 52px 0 0;
    font-size: 17px;
    color: #fff;
}
.sidebar-content .social-icon {
    margin: 8px 0 12px;
    display: flex;
    justify-content: space-between;
}
.contact_now_btn{
    z-index: 1;
}

.contact_now_btn a {
    border: none;
    background-color: #000;
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    line-height: 24px;
    white-space: nowrap;
    transition: all 0.3s ease;
    padding: 19px 30px;
    text-decoration: none;
    text-transform: uppercase;
    border-radius: 3px;
}
.contact_now_btn span{
    padding-left: 6px;
}
.overly_contact{
 display: none;
}
.sidebar-content .social-icon li span {
    margin-right: 10px;
    font-size: 21px;
    font-weight: 600;
    color: #fff;
}
.sidebar-content .header-log-reg {
    margin-bottom: 30px;
}


/*overfly menu*/
.sidebar-opened.sidebar-opened_full {
    background-color: #000;
    border: 5px solid #109BB4;
}
.sidebar-opened.sidebar-opened_full .contact_now_btn a {
    background-color: #109BB4;
    color: #fff;
    border-radius: 5px;
}
.overlay-menu__inner {
    position: relative;
    width: 100%;
    height: 100%;
}
.sidebar-opened .overlay-menu__content {
    opacity: 1;
    transition-property: opacity, transform;
    transition-duration: 0.15s;
    transition-timing-function: ease, ease;
    transform: scale(.9);
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: start;
    align-items: start;
    max-width: 2080px;
    height: 100%;
    margin: 0 auto;
    padding:5px 0;
    transition-delay: 0s;
}
.overlay-menu__content {
    opacity: 0;
    transition-property: opacity, transform;
    transition-duration: 0.15s;
    transition-timing-function: ease, ease;
    transform: scale(.9);
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    max-width: 2080px;
    height: 100%;
    margin: 0 auto;
    padding: 85px 0;
    transition-delay: 0s;
}
.overlay-menu__main-menu {
    -ms-flex: 0 0 430px;
    flex: 0 0 430px;
    transition: transform 0.2s ease;
    transform: translateX(50%);
}
.overlay-menu--expanded .overlay-menu__main-menu {
    transform: translateX(0);
    transition: transform 0.2s ease-out;
}
.overlay-menu__main-item {
    margin-top: 21px;
    width: 100%;
}
.overlay-menu--expanded .menu_item_link.active {
    color: #109BB4;
    opacity: 1;
}
.overlay-menu--expanded .menu_item_link {
    color: #827d7d;
    opacity: 0.5;
}
.overlay-menu__main-item a {
    color: #fff;
    font-weight: 700;
    font-size: 55px;
    transition: color 0.2s ease;
    font-family:"Pontiac";
    background-color: transparent;
    border-color:transparent;
}


 .overlay-menu__content .nav-tabs .nav-link.active {
    color:#fff;
    background-color: transparent;
    
}


.overlay-menu--expanded .overlay-menu__content .nav-tabs .nav-item.show .nav-link{
    background-color: transparent;
    color: #109BB4;
}
.nav-tabs {
    border-bottom: none;
}
.overlay-menu__content .nav-tabs .nav-link {
    border: none;
}
.overlay-menu__main-item a.overly-menu_item_small {
    font-size: 24px;
}
.overlay-menu__main-item a.overly-menu_item_small i {
    font-size: 14px;
}
.overlay-menu__main-item a span i {
    display: inline-block;
    width: 32px;
    height: 32px;
    margin-bottom: 3px;
    margin-left: -6px;
    font-size: 24px;
}


.overlay-submenu {
    display: block;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    margin-left: 40px;
    transition: all .5s ease;
}
@keyframes fadeIntab {
  0% {
    opacity: 0;
    transform: translateY(20px);
    transition: all .5s ease;
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
    transition: all .5s ease;
  }
}
.overlay-submenu__item {
    display: -ms-flexbox;
    display: flex;
}
.overlay-submenu__item.overlay-submenu__item--show{
    display: flex;
} 
.overlay-submenu__item--hidden {
    display: none;
}
.overlay-submenu__column--content {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: start;
    align-items: flex-start;
}
.overlay-submenu__column {
    -ms-flex: 0 1 42%;
    flex: 0 1 42%;
}

.overlay-categories {
    margin-bottom: 30px;
}
.overlay-categories p {
    margin: 0;
    padding-bottom: 10px;
    line-height: 30px;
    font-weight: 700;
}
.overlay-categories__label {
    margin-bottom: 16px;
    color: rgba(255,255,255,0.2);
    color: #fff;
    font-weight: 700;
    font-size: 20px;
    line-height: 32px;
}
.overlay-categories__menu li {
    margin-top: 10px;
}
.overlay-categories__menu li a {
    color: rgba(255,255,255,0.4);
    font-size: 14px;
    line-height: 28px;
    transition: color 0.3s ease;
    font-family: 'Geologica', sans-serif;
}

.animated-icon{
    border: none;
    outline: none;
    background: none;
    margin-bottom: 20px;
}
 .overlay-icon i{
    color: #109BB4;
    font-size: 35px;
}
.overlay-submenu__column--thumb {
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 0 0 315px;
    flex: 0 0 315px;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    margin-left: 46px;
}
.overlay-submenu__column--thumb img {
    display: block;
    max-width: 100%;
}

.map-image {
    position: absolute;
    cursor: url("../img/partnership/hexagon.png") 2 2,auto;
    z-index: -1;
    right: -1072px;
}
.overlay-submenu__column--thumb .world_main-img{
    max-width: 920px;
}

.map-image__pin {
    position: absolute;
    height: 6%;
}
.map-image__pin:nth-of-type(1) {
    top: 29.5%;
    left: 38%;
    min-width: 6%;
}
.map-image__pin:nth-of-type(2) {
    top: 28.5%;
    left: 68.5%;
    min-width: 5%;
}
.map-image__pin:nth-of-type(3) {
    top: 26.5%;
    left: 74%;
    min-width: 5%;
}
.map-image__pin:nth-of-type(4) {
    top: 25.5%;
    left: 79.5%;
    min-width: 5%;
}
.map-image__hex {
    visibility: hidden;
    position: absolute;
    width: 220px;
    height: 190px;
    top: 10px;
    transform: translate(-50%, -100%);
    left: 50%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
}
.map-image__hex-title {
    color: #109BB4;
    font-family: Pontiac;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 24px;
    text-align: center;
    max-width: 107px;
    margin-bottom: 8px;
}
.map-image__hex-text {
    color: #FFFFFF;
    font-family: "Fira Sans";
    font-size: 16px;
    letter-spacing: 0;
    line-height: 24px;
    text-align: center;
    max-width: 140px;
}
.map-image__hex > img {
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.map-image__pin:hover .map-image__hex {
    visibility: visible;
}
.overly_subbtn .main_button {
    max-width: 100%;
    margin: 11px 0;
    width: 285px;
}

.overlay-submenu__animated-row {
    opacity:0;
    transition-property: opacity, transform;
    transition-duration: 2s;
    transition-timing-function: ease, ease;
    transform: translateY(20px);
}
.overlay-submenu--expanded .overlay-submenu__animated-row {
    opacity: 1;
    transition-property: opacity, transform;
    transition-duration: .5s;
    transition-timing-function: ease, ease;
    transform: translateY(0);
}

.overlay-submenu__animated-row:nth-child(1) {
    transition-delay: 200ms,200ms;
}
.overlay-submenu--expanded .overlay-submenu__animated-row:nth-child(1) {
    transition-delay: 0ms,0ms;
}
.overlay-submenu__animated-row:nth-child(2) {
    transition-delay: 150ms,150ms;
}
.overlay-submenu--expanded .overlay-submenu__animated-row:nth-child(2) {
    transition-delay: 50ms,50ms;
}
.overlay-submenu__animated-row:nth-child(3) {
    transition-delay: 100ms,100ms;
}
.overlay-submenu--expanded .overlay-submenu__animated-row:nth-child(3) {
    transition-delay: 100ms,100ms;
}
.overlay-submenu__animated-row:nth-child(4) {
    transition-delay: 50ms,50ms;
}
.overlay-submenu--expanded .overlay-submenu__animated-row:nth-child(4) {
    transition-delay: 150ms,150ms;
}
.overlay-submenu__animated-thumb {
    opacity: 0;
    transition-property: opacity, transform;
    transition-duration: 0.15s;
    transition-timing-function: ease, ease;
    transform: scale(.9);
    will-change: transform;
    transition-duration: 0.25s;
    transition-delay: 0.1s;
}
.overlay-submenu--expanded .overlay-submenu__animated-thumb {
    opacity: 1;
    transition-property: opacity, transform;
    transition-duration: 0.15s;
    transition-timing-function: ease, ease;
    transform: scale(1);
    transition-duration: 0.25s;
    transition-delay: 0s;
}

#custom_scroll1,
#custom_scroll2,
#custom_scroll3,
#custom_scroll4 {
    height: 430px;
    width: 82%;
}
#insight_scroll{
    height: 400px;
}
.all_related_video{
    width: 100%!important;
}

/*-------------------------------------------------------------------------------------
    heor area start
---------------------------------------------------------------------------------------*/
/* .main-page{
     background-image: url("../img/banner/clouds_top_left.png"),
    url("../img/banner/clouds_top_right.png"),
    url("../img/banner/clouds_bottom_right.png"),
    url("../img/banner/clouds_bottom_left.png");
    background-position: top left, top right, bottom right, bottom left;
    background-size: auto, auto, 0, 0;
    background-repeat: no-repeat;
} */
.hero-area {
    position: relative;
    padding-top: 30px;
    padding-bottom: 40px;
    overflow: hidden;
}

.home-intro__overheading {
    width: 100%;
    margin-top: auto;
    text-align: center;
}
.underlined-heading {
    color: #fff;
    font-weight: 500;
    font-size: 18px;
    font-family:"Pontiac";
    text-align: center;
    letter-spacing: 1px;
}
.underlined-heading__wrapper {
    position: relative;
    display: inline-block;
    padding: 10px 20px;
}
.underlined-heading__wrapper::before {
    right: 0%;
    left: 0%;
    opacity: 1;
    height: 8px;
    transition: opacity 0.15s ease 0.25s,left 0.3s ease-in-out 0.3s,right 0.3s ease-in-out 0.3s,height 0.3s ease-in-out 0.6s;
    content: '';
    position: absolute;
    right: 50%;
    bottom: 0;
    left: 50%;
    opacity: 0;
    height: 0;
    border: 1px solid #109BB4;
      border-top-width: 1px;
    border-top-width: 0;
    transition: height 0.3s ease-in-out,left 0.3s ease-in-out 0.3s,right 0.3s ease-in-out 0.3s,opacity 0.15s ease 0.55s;
}
.underlined-heading--animate .underlined-heading__wrapper::after,
 .underlined-heading--animated .underlined-heading__wrapper::after {
    height: 8px;
    transition: height 0.3s ease-in-out;
}

.underlined-heading__wrapper::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    width: 1px;
    height: 0;
    background: #109BB4;
    transition: height 0.3s ease-in-out 0.65s;
}
.underlined-heading--animate .underlined-heading__wrapper::before,
 .underlined-heading--animated .underlined-heading__wrapper::before {
    right: 0%;
    left: 0%;
    opacity: 1;
    height: 8px;
    transition: opacity 0.15s ease 0.25s,left 0.3s ease-in-out 0.3s,right 0.3s ease-in-out 0.3s,height 0.3s ease-in-out 0.6s;
}
.underlined-heading__content {
    opacity: 0;
    display: block;
    transition: all 0.5s ease-out 0.6s;
    transform: translateY(50%);
}
.underlined-heading--animate .underlined-heading__content,
 .underlined-heading--animated .underlined-heading__content {
    opacity: 1;
    transition-delay: 0s;
    transform: translateY(0%);
}
.slider-main {
    max-width:1000px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}
.hero-slider{
    text-align: center;
}
.hero-single img {
    width: 100%;
    height: auto;
    max-width: 940px;
}
.hero-slider .owl-nav {
    display: flex;
    justify-content: center;
    color: #109BB4;
    margin-top: 50px;
}
.hero__text_more {
    text-align: center;
    position: relative;
    color: #ccc;
}
.hero__text_more::before {
    content: '';
    position: absolute;
    bottom: -13px;
    left: 0;
    width: 100%;
    height: 11px;
    background-image: url("../img/banner/wave.png");
    background-position: left bottom;
    background-size: cover;
    background-repeat: no-repeat;
}
.hero__subtitle {
    margin-bottom: 20px;
    margin-top: 15px;
    font-size: 24px;
    font-style: italic;
}
.down-butn a {
    color: #109BB4;
    font-size: 19px;
}
/*-------------------------------------------------------------------------------------
    heor area end
---------------------------------------------------------------------------------------*/

/*-------------------------------------------------------------------------------------
    service area start
---------------------------------------------------------------------------------------*/
.service-area {
    overflow: hidden;
}

.service-head {
    width: 100%;
}
.service-title{
    font-size: 18px;
    font-weight: 200;
    color: #fff;
    text-align: center;
    line-height: 1.5;
    margin: 0 0 100px;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    font-family: "Pontiac",sans-serif;
}
.home-services__title {
    margin: 0 0 100px;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
}
.service-area .transparent-grid {
    z-index: -1;
}

.transparent-grid {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    opacity: 0.3;
    width: 100%;
    padding-right: 80px;
    padding-left: 80px;
}
.transparent-grid::after{
   content: "";
  display: table;
  clear: both;
}
.transparent-grid__container {
    max-width: 1728px;
    margin: 0 auto;
    position: relative;
    height: 100%;
    pointer-events: none;
    border-right: 1px solid rgba(153,153,153,0.2);
}
.transparent-grid__row {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: -0;
    margin-right: -0;
    position: relative;
    z-index: 1;
    height: 100%;
}
.transparent-grid__row::before{
    content: "";
   display: table;
}

.transparent-grid__column {
    width: 8.33333%;
    position: relative;
    height: 100%;
}
.transparent-grid__column::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(153,153,153,0.4);
    left: 0;
}

.home-services {
 position:relative;
 padding:0 0 100px;
 -ms-flex:0 0 100%;
 flex:0 0 100%;
 width:100%;
 max-width:100%
}
.home-services .transparent-grid {
 z-index:-1
}
.transparent-grid__column {
display: inline-block;
min-height: 1px;
float: left;
box-sizing: border-box;
vertical-align: top;
}
.home-services .grid__wrapper {
 display:-ms-flexbox;
 display:flex;
 -ms-flex-flow:row wrap;
 flex-flow:row wrap;
 -ms-flex-pack:center;
 justify-content:center;
 -ms-flex-align:start;
 align-items:flex-start
}
 .home-services__splitter::before {
 animation:0.5s linear forwards scale-in
}
 .home-services__splitter::after {
 animation:1s linear 0.5s forwards scale-in
}
 .home-services__item-link::before {
 animation:0.5s linear 1.5s forwards scale-in
}
 .home-services__item-name {
 animation:0.25s linear 2s forwards opacify
}
.home-services__cutoff {
 position:absolute;
 top:-100px;
 left:0;
 overflow:hidden;
 height:100px;
 -ms-flex:0 0 25%;
 flex:0 0 25%;
 width:25%;
 max-width:25%
}
.home-services__cutoff>.transparent-grid {
 width:100vw
}
.home-services__title {
 margin:0 0 100px;
 -ms-flex:0 0 100%;
 flex:0 0 100%;
 width:100%;
 max-width:100%
}
.home-services__splitter {
    position: relative;
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    width: 75%;
    max-width: 75%;
    margin: 0 auto;
}
.home-services__splitter::before {
 content:'';
 position:absolute;
 bottom:0;
 left:50%;
 width:2px;
 height:67px;
 background-color:#109BB4;
 transition:transform 1s;
 transform:translateX(-50%) scale(1, 0);
 transform-origin:top
}
.home-services__splitter::after {
 content:'';
 position:absolute;
 bottom:0;
 left:50%;
 width:calc(100% + 2px);
 height:2px;
 background-color:#109BB4;
 transition:transform 2s;
 transform:translateX(-50%) scale(0, 1)
}
.home-services__wrapper {
     display: -ms-flexbox; 
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-align: start;
    align-items: flex-start;
    -ms-flex: 0 0 100%;
    flex: 4 0 100%;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}
.home-services__item {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    width: 25%;
    max-width: 25%;
    /* margin: 0 auto; */
    text-align: center;
}
figure {
    margin: 0;
}
.home-services__item-figure img{
 opacity:0;
 width:90px;
 height:90px;
 transition:opacity 0.4s, transform 0.4s;
 transform:scale(0)
}

.home-services__item-link {
 position:relative;
 display:-ms-flexbox;
 display:flex;
 -ms-flex-direction:column;
 flex-direction:column;
 -ms-flex-pack:start;
 justify-content:flex-start;
 -ms-flex-align:center;
 align-items:center;
 width:100%;
 padding:67px 0;
 transition:padding 0.4s;
 pointer-events:auto;
}
.home-services__item-link::before {
 content:'';
 position:absolute;
 top:0;
 left:50%;
 width:2px;
 height:67px;
 background-color:#109BB4;
 transition:height 0.4s, transform 1s;
 transform:translate(-50%) scale(1, 0);
 transform-origin:top
}
.home-services__item-link:hover::before {
 height:37px
}
.home-services__item-link:hover .home-services__item-link {
 padding:104px 0 67px
}
.home-services__item-link:hover .home-services__item-name {
 color:#109BB4;
 transform:translate3d(0, 37px, 0)
}
.home-services__item-link:hover .home-services__item-name-wrapper::after {
 opacity:1;
 transform:translate3d(0, -50%, 0)
}
.home-services__item-link:hover .home-services__item-figure img{
 opacity:1;
 transform:scale(1)
}
.home-services__item-link:hover .home-services__item-name-wrapper {
    color: #109BB4;
}
.home-services__item-name {
 position:relative;
 opacity:0;
 width:100%;
 padding:0 24px;
 line-height:1.3;
 transition:color 0.4s, opacity 0.5s, transform 0.4s
}
.home-services__item-name-wrapper {
    position: relative;
    display: inline-block;
    font-size: 16px;
    color: #fff;
    font-weight: 400;
    font-family: "Pontiac";
}
.home-services__item-name-wrapper::after {
 content:'';
 position:absolute;
 top:50%;
 left:calc(100% + 20px);
 opacity:0;
 border-width:8px 0 8px 8px;
 border-style:solid;
 border-color:transparent transparent transparent #109BB4;
 transition:opacity 0.4s, transform 0.4s;
 transform:translate3d(-200%, -50%, 0)
}
@media screen and (max-width: 1368px) {
  .home-services__item-link:hover::before {
  height:67px
 }
  .home-services__item-link:hover .home-services__item-link {
  padding:67px 0
 }
  .home-services__item-link:hover .home-services__item-name {
  color:#109BB4;
  transform:translate3d(0, 0, 0)
 }
  .home-services__item-link:hover .home-services__item-name-wrapper::after {
  opacity:1;
  display:none;
  transform:translate3d(0, 0, 0)
 }
  .home-services__item-link:hover .home-services__item-figure {
  opacity:1;
  transform:scale(1)
 }
  .home-services__item-figure {
  opacity:1;
  transition-delay:2s;
  transform:scale(1)
 }
}

@keyframes scale-in {
 to {
  transform:translateX(-50%) scale(1, 1)
 }
}
@keyframes opacify {
 to {
  opacity:1
 }
}

/*-------------------------------------------------------------------------------------
    service area end
---------------------------------------------------------------------------------------*/


/*-------------------------------------------------------------------------------------
    clients area start
---------------------------------------------------------------------------------------*/
.work_client{
    background-color: #fff;
    padding-top: 80px;
    padding-bottom: 50px;
    position: relative;
}
.work_client::before {
    position: absolute;
    content: '';
    width: 100%;
    height: 210px;
    top: -133px;
    left: 0;
    background: url('../img/insight/top.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.work_client::after {
    position: absolute;
    content: '';
    width: 100%;
    height: 210px;
    bottom: -52px;
    left: 0;
    background: url('../img/insight/bottom.png');
     background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.client-video {
    position: relative;
    z-index: 9;
}
.client-video img{
    width: 100%;
    height: auto;
}
.client-video .technology-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -moz-box-pack: center;
    justify-content: center;
    -moz-box-align: center;
    align-items: center;
    display: -moz-box;
    display: flex;
    border: 4px solid #109BB4;
}
.video-btn {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    color: #109BB4;
    position: relative;
    z-index: 1;
    background-color: #000;
    opacity: 0.6;
    font-size: 38px;
    border: 3px solid #109BB4;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,0.5);
}
.client-content {
    padding: 40px;
    overflow: hidden;
}
.client-content .icon-title h2 {
    margin: 0 0 10px;
    font-size: 32px;
    color: #fff;
    font-weight: 700;
    font-family:"Pontiac";
    line-height: 1.5;
    text-transform: capitalize;
}
.client-animation{
    margin-top: 60px;
}

 
.image-fader {
    position: relative;
    width: 100%;
    /* float: center; */
    overflow: hidden;
    padding: 55px 0;
}

.image-fader img {
  position: absolute;
  width: 300px;
  max-width: 100%;
  height: auto;
  top: 0px;
  left: 0px;
  animation-name: imagefade;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-duration:3s;
  transition: all 0.3s ease-in-out;
}

@keyframes imagefade {
  0% {
/*    opacity:1;*/
    visibility: visible;
    transition: all 0.5s ease;
  }
  17% {
/*    opacity:1;*/
    visibility: visible;
    transition: all 0.5s ease;
  }
  25% {
/*    opacity:0;*/
    visibility: hidden;
    transition: all 0.5s ease;
  }
  92% {
/*    opacity:0;*/
    visibility: hidden;
    transition: all 0.5s ease;
  }
  100% {
/*    opacity:1;*/
    visibility: visible;
    transition: all 0.5s ease;
  }
}

.image-fader img:nth-of-type(1) {
  animation-delay: 0s;
/*  position: relative;*/
}
.image-fader img:nth-of-type(2) {
  animation-delay: 1s;
  position: absolute;
  /*top:0;
  left: 0;
  width: 100%;
  height: 100%;*/
}

/*-------------------------------------------------------------------------------------
    clients area start
---------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------
    work area start
---------------------------------------------------------------------------------------*/
.work-area {
    background-color: #fff;
    position: relative;
    margin-top: -15px;
    padding-bottom: 129px;
    padding-top: 40px;
}
.work_area-developent{
    padding-top: 40px;
}
.project_develo::before,
.project_develo::after{
    display: none!important;
}
.work_area-developent::before{
    display: none;
}

.work-area::before {
    position: absolute;
    top: -211px;
    left: 0;
    content: '';
    background-image: url('../img/work/top.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 234px;
}
.work-area::after {
    position: absolute;
    bottom: -125px;
    left: 0;
    content: '';
    background-image: url('../img/work/bottom.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 234px;
    z-index: -1;
}
.service_work-area {
    margin-top: 0px;
    padding-top: 7px;
    padding-bottom: 50px;
    z-index: 1;
}
.service_work-area::after{
    display: none;
}
.service_work-area::before {
    position: absolute;
    top: -180px;
    left: 0;
    content: '';
    background-image: url('../img/service/service.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 234px;
    z-index: 9;
}
.work-left .work-item:nth-child(1) {
    margin-top: 168px;
}
.work-left .work-item:nth-child(2n) {
    margin-top: 145px;
}
.work-left .work-item:nth-child(2n+2) {
    margin-top: 168px;
}
.work-left .work-item:last-child {
    margin-bottom: 0;
}
.work-item {
    margin: 105px 0;
}
.work-img {
     overflow: hidden;
     position: relative;
}
.title-image {
    position: absolute;
    top: 40px;
    left: 32px;
    max-width: calc(100% - 64px);
    height: auto;
    max-height: 40px;
}
.work-img .main-image{
    width: 100%;
    height: auto;
    filter: grayscale(1%);
    opacity: 0.9;
    transform: scale(1,1);
    transition: all 2s ease;
}


.work-item:hover .work-img .main-image{
    transform: scale(1.2,1.2);
    filter:none;
    opacity:1;
    transition: all 2s ease;
}
.count-image {
    position: absolute;
    bottom: 32px;
    left: 32px;
    width: 34px;
}
.work-content {
    border-right: 1px solid #eeeded;
    border-left: 1px solid #eeeded;
}
.work-title {
    border-bottom: 1px solid #109BB4;
     padding: 21px 11px;
}

.work-title span.title a {
    font-size: 20px;
    font-family: "Pontiac",sans-serif;
    font-weight: 700;
     display: flex;
    justify-content: space-between;
    align-items: center
}
.work-title span.title .arrow{
    color:#109BB4;
}
.work-des {
    min-height: 63px;
    border-bottom: 1px solid #ccc;
    padding: 10px 11px;
    position: relative;
}
.work-des::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 0;
    width: 100%;
    height: 9px;
    border-right: 1px solid #109BB4;
    border-left: 1px solid #109BB4;
    background: none;
}
.work-des::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 9px;
    border-right: 1px solid #ccc;
    border-left: 1px solid #ccc;
    background: none;
}
.work-des p{
    color:#666;
    font-weight: 400;
    font-family: "Pontiac",sans-serif;
}
.work-tag{
    min-height: 64px;
    padding: 10px 10px;
    background: rgba(0,0,0,0.05);
}
.work-tag ul{
    display: flex;
    justify-content: start;
}
.work-tag ul li{
    margin:5px;
}
.work-tag ul li a{
    display: block;
    color:#666;
    border: 1px solid rgba(255,78,0,0.35);
    border-radius: 8px;
    padding: 3px 7px 4px;
    font-size: 14px;
    text-transform: lowercase;
    transition: border-color 0.3s, background-color 0.3s, color 0.3s;
    cursor: auto;
}
.work-tag ul li a:hover{
    background-color: #109BB4;
    color: #fff;
}

.text-dark {
    color: #333 !important;
}
.work_more {
    text-align: center;
    margin-top: 70px;
    width: 100%;
}
.work_more .title a{
    font-weight: 500;
    color: #109BB4;
    font-size: 18px;
    padding: 0 15px;
}
.main_button {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: stretch;
    align-items: stretch;
     width: calc(100% + 17px); 
    min-width: 90px;
    max-width: 710px;
    height: 71px;
    margin-left: -17px;
    border: none;
    background: none;
    color: #109BB4;
    font-weight: 400;
    font-size: 18px;
    font-family:"Pontiac";
    cursor: pointer;
    max-width: 25.667%;
    margin: 40px auto 120px;
}
.main_button::before, .main_button::after {
    content: "";
    position: absolute;
    top: 0;
    height: 70px;
    background-position-y: 0;
    background-size: 170px 70px;
    background-repeat: no-repeat;
    pointer-events: none;
}
.main_button::before{
    right: 50%;
    left: 0;
    background-image: url('../img/work/btn1.png');
    background-position-x: 0;
}
.main_button::after{
    right:0;
    left: 50%;
    background-image: url('../img/work/btn2.png');
    background-position-x: 100%;
}
.button__label {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 17px 17px 17px 18px;
    transition: transform 0.2s ease-out;
    transform: translate(0, 0);
}
.main_button:hover .button__label {
    transform: translate(-1px, 1px);
}
.main_button:active .button__label {
    transform: translate(2px, -1px);
}
/*-------------------------------------------------------------------------------------
    work area end
---------------------------------------------------------------------------------------*/

/*-------------------------------------------------------------------------------------
    patnar area start
---------------------------------------------------------------------------------------*/
.patnar_area {
    position: relative;
    padding-top: 167px;
    padding-bottom: 147px;
    background-size: 0%;
    z-index: 2;
}
.patnar_area::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    opacity: 0.05;
    width: 100%;
    height: 100%;
    background-image: inherit;
    background-position: top -210px center;
    background-size: cover;
    background-repeat: no-repeat;
    pointer-events: none;
}

.patnar_item {
    text-align: center;
}
.patnar_item .image {
    margin-bottom: 36px;
    height: 121px;
}
.patnar_item .image img {
    max-width: 95px;
    width: 100%;
    height: auto;
}
.patnar-content h5 {
    width: 90%;
    margin:0 auto;
}
.patnar-content h5 a{
    color: #fff;
    font-size: 16px;
    line-height: 32px;
    text-align: center;
    font-weight: 400;
}
/*-------------------------------------------------------------------------------------
    patnar area end
---------------------------------------------------------------------------------------*/

/*-------------------------------------------------------------------------------------
    solution area start
---------------------------------------------------------------------------------------*/
.solution-area {
    overflow: hidden;
    padding-bottom: 110px;
}
.solution-head p {
    max-width: 670px;
    margin: auto;
    padding: 0 24px;
    color: #ccc;
    font-style: italic;
    font-weight: 300;
    font-family: 'Fira Sans', sans-serif;
    text-align: center;
    position: relative;
    font-size: 20px;
    line-height: 29px;
}
.solution-head {
    width: 100%;
}
.solution_title{
  color: #fff;
  font-size: 28px;
  line-height: 2.5rem;
  margin: 30px 0 20px;
  text-align: center;
  font-weight: 700;
}

.solution-head.solution-head2 {
    margin-top: -170px;
}
.soluiton_line{
    position: relative;
    width: 25%;
    margin: 0 auto;
    transform: translateX(-50%);
    margin: 140px auto 100px;
}
.soluiton_line::before, .soluiton_line::after {
    content: '';
    position: absolute;
    opacity: 0;
    display: block;
    width: 2px;
    background-color: #109BB4;
    animation: 0.5s linear forwards line;
}
.soluiton_line::before {
    right: 0;
    bottom: 0;
    height: 70px;
    transform-origin: top;
}

.soluiton_line::after {
    top: 0;
    height: 100px;
    transform-origin: top;
    animation-delay: 1.5s;
}
.solution-height {
    opacity: 0;
    width: 100%;
    height: 2px;
    background-color: #109BB4;
    transform: scale(0);
    transform-origin: right;
    animation: 1s linear 0.5s forwards line;
}
.soluiton_line_bottom {
    margin: 100px auto 140px;
}
.soluiton_line_bottom::before {
    right: initial;
    left: 0;
    height: 100px;
    animation-delay: 2s;
}
.soluiton_line_bottom .solution-height {
    transform-origin: left;
    animation-delay: 2.5s;
}
.soluiton_line_bottom::after {
    right: 0;
    height: 70px;
    animation-delay: 3.5s;
}


@keyframes line{
    0% {
  opacity: 1;
  transform: scale(0);
}
100% {
  opacity: 1;
  transform: scale(1);
}
}

.solution_nav {
    width: 33.33333%;
    margin-left: 8.33333%;
    display: inline-block;
    float: left;
    box-sizing: border-box;
    vertical-align: top;
}
.all_solution_slider {
    width: 33.33333%;
    margin-left: 16.66667%;
    position: relative;
    margin-top: -120px;
}
.solution_nav ul{
    padding: 30px 0;
    text-align: center;
    display: block;
}
.solution_nav ul li {
    margin: 30px 0;
}
.solution_nav ul li a {
    display: inline-block;
    outline: none;
    border: none;
    background: transparent;
    color: #fff;
    font-size: 20px;
    transition: color 0.4s ease-in-out;
}
.solution_nav .nav-tabs .nav-link {
    border: none;
}
.solution_nav ul li a::after {
    content: '';
    opacity: 0;
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid #109BB4;
    transition: all 0.4s ease-in-out;
}
.solution_nav ul li a:hover, .solution_nav ul li a.active {
    color: #109BB4;
}
.solution_nav ul li a:hover::after, .solution_nav ul li a.active::after {
    opacity: 1;
    transform: translateX(20px);
}

.solution_nav .nav-tabs .nav-item.show .nav-link, .solution_nav  .nav-tabs .nav-link.active {
    background: none;
    border: none;
    color: #109BB4;
}
.solution_nav .nav-tabs {
    border-bottom: none;
}
.solution_nav ul li a:not([href]):not([tabindex]) {
    color: #fff;
}
.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {
    border: none;
}

.solution_slide_image{
    position: relative;
    width: 368px;
    height: 413px;

}
.solution_slide_image img {
    opacity: 1;
    clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
    height: auto;
    width: 100%;
    padding-right: 60px;
}

.overlay-video {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
  opacity: 0;
  transition: .5s ease;
  background-color: rgba(0,0,0,0.4);
}

.solution_slide_image{
    position: relative;
}
.solution_slide_image::before {
    position: absolute;
    content: '';
    top: -12%;
    background-image: url('../img/solution/shape1.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    max-width: 300px;
    height: 300px;
    display: block;
    opacity: 0.5;
    width: 100%;
    z-index: -1;
    left: 33px;
}
.solution_slide_image::after {
    position: absolute;
    content: '';
    bottom: -3%;
    background-image: url('../img/solution/shape2.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    max-width: 150px;
    height: 150px;
    display: block;
    width: 100%;
    z-index: -1;
    right: -13%;
    opacity: 0.5;
}
.solution_slide_image:hover .overlay-video {
  opacity: 1;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.video-btn2 {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    color: #109BB4;
    position: relative;
    z-index: 1;
    background-color: #000;
    opacity: 0.6;
    font-size: 22px;
    border: 3px solid #109BB4;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,0.5);
}
.technology-video span{
    display: none;
}
.solution_slide_content {
    margin-bottom: -40px;
    position: relative;
    z-index: 3;
    margin-top: 0px;
    margin-left: 40px;
    width: 100%;
}
.solution_slide_content h3{
    font-size: 24px;
    padding-right: 70px;
    line-height: 2.5rem;
    margin: 40px 0 20px;
    color: #fff;
    font-weight: 700;
    font-family: 'Geologica', sans-serif;
}
.solution_slide_content p{
    /* max-width: 670px; */
    margin: 20px auto 0;
    padding: 0;
    padding-right: 70px;
    color: #ccc;
    font-style: italic;
    font-weight: 200;
    font-size: 16px;
    font-family: 'Fira Sans', sans-serif;
    text-align: left;
}
.solution_btn{
    font-size: 18px;
    position: relative;
    display: inline-block;
    margin-top: 20px;
    font-weight: 400;
    color: #109BB4;
}
.solution_btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: calc(100% + 10px);
    border-width: 8px 0 8px 8px;
    border-style: solid;
    border-color: transparent transparent transparent #109BB4;
    transform: translate3d(0, -50%, 0);
}
/*-------------------------------------------------------------------------------------
    solution area end
---------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------
    solution area start
---------------------------------------------------------------------------------------*/
.solution-page {
    position: relative;
    padding: 118px 0 135px;
}
.soluction-head {
    margin-bottom: 90px;
}
.soluction_nav {
    display: flex;
    flex-direction: column;
}
.soluction_nav ul li{
    display: block;
    width: 100%;
}
.soluction_nav-link{
    width: 100%;
    border-width: 1px 1px 0 1px;
    border-style: dashed;
    border-color: #999;
    padding: 40px 60px;
    color: #fff;
    font-size: 20px;
    line-height: 1em;
    cursor: pointer;
    background: transparent;
    outline: none;
   display: block;
}
.soluction_nav-link span{
     position: relative;
     display: flex;
}
.soluction_nav-link span::after {
    position: relative;
    content: '';
    display: block;
    width: 0;
    height: 0;
    margin-left: 15px;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid #109BB4;
    display: none;
}
.soluction_nav-link.active span::after{
    display: block;
    color: #109BB4;
}
.soluction_nav-link.active {
    color: #109BB4;
}
.soluction_nav-link:last-child {
    border-width: 1px 1px 1px 1px;
}


.solution_video{
    max-width: 400px;
}
.tabs-box h5{
   
  color: #fff;
  font-size: 40px;
  font-family:"Pontiac";
}
.tabs-box p{
    padding-top: 15px;
}
.solution_more{
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-align: center;
    align-items: center;
    margin: 16px 0 0;
    color: #109BB4;
    font-weight: 400;
    font-size: 18px;
    font-family:"Pontiac";
    line-height: 10px;
}
.solution_more::after{
    content: '';
    display: block;
    width: 0;
    height: 0;
    margin-left: 8px;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid #109BB4;
}
.tab-pane.fade {
    transition: all 0.6s ease-out;
    transform: translateY(1rem);
}
.tab-pane.fade.show {
    transform: translateY(0rem);
}
/*-------------------------------------------------------------------------------------
    soluction area end
---------------------------------------------------------------------------------------*/

/*-------------------------------------------------------------------------------------
    footer area start
---------------------------------------------------------------------------------------*/
.footer_area{
    position: relative;
    overflow: hidden;
    padding-bottom: 4px;
}
.footer_item {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 25%;
    border-left: 1px solid #000;
    padding: 0;
    font-weight: 200;
    font-size: 14px;
}
.footer_item:last-child {
    border-right: 1px solid #000;
}

.footer_heading {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    height: 70px;
    padding: 0 32px;
    color: #109BB4;
    font-weight: 400;
    font-size: 14px;
    font-family:"Pontiac";
}

.footer_heading::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 100vw;
    height: 70px;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    background-color: transparent;
    transform: translateX(-50%);
}

.footer_item_content{
     -ms-flex: 1;
     flex: 1; 
    padding: 21px 32px;
}
.footer_address ul li{
     font-weight: 200;
    font-size: 14px;
    color: #adadad;
    margin: 10px 0;
}
.footer_address ul li a{
    color: #adadad;
     font-weight: 200;
    font-size: 14px;
}
.country_name {
    display: inline-block;
    min-width: 24px;
    color: #eee;
    font-weight: 300;
    font-size: 14px;
}
.footer_social{
    border-top: 1px solid #000;
}
.footer_social ul{
    display: flex;
     height: 70px;
}
.footer_social ul li{
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    border-right: 1px solid #000;
    color: #109BB4;
}
.footer_social ul li {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    border-right: 1px solid #000;
    color: #109BB4;
    text-align: center;
}
.footer_social ul li:last-child {
    border-right-width: 0;
}
.footer_social ul li a i {
    width: 30px;
    transition: all 0.3s;
    color: #109BB4;
    font-size: 19px;
}
.footer_social ul li a:hover i{
    color: #fff;
}
.footer_item_content .footer_link ul li a {
    color: #666;
    font-weight: 200;
    font-size: 14px;
    display: inline-block;
    padding: 4px 0;
    line-height: 1.4;
    font-family: 'Fira Sans', sans-serif;
}
.footer_item_content .footer_link ul li a:hover {
    color: #109BB4;
}
/*-------------------------------------------------------------------------------------
    footer area end
---------------------------------------------------------------------------------------*/


/*-------------------------------------------------------------------------------------
    about home start
---------------------------------------------------------------------------------------*/
.about-home_section{
    background-position: center;
    background-size: cover;
    background-color: #232323;
    background-repeat: no-repeat;
}

.about-home_main {
    position: relative;
}
.about-section_title h2{
    z-index: 15;
    padding-top: calc(6vh + 81px);
    color: #fff;
    font-weight: normal;
    font-size: 45px;
    font-family:"Pontiac";
    position: absolute;
    top: 0;
    left: 0;
}
.about-home-content{
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100vh;
    padding: 52px 0;
    text-align: center;
    transition: height 0.8s ease, padding-bottom 0.8s ease;
    padding-top: 124px;
}
.about-section__title h1 {
    font-size: 85px;
    color: #fff;
    font-weight: bold;
    font-family: 'Geologica', sans-serif;
}
.about-section__desc{
    margin: 2em 0 0;
    color: #ccc;
    font-style: italic;
    font-weight: 300;
    font-size: 26px;
    position: relative;
    padding-bottom: 10px;
}
.about-section__desc::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 8px;
    background-image: url("../img/banner/wave.png");
    background-position: 50%;
    background-size: contain;
    background-repeat: repeat-x;
}
.about__intro__button {
    position: absolute;
    top: 70%;
    z-index: 1;
    width: 28px;
    height: 48px;
    border: none;
    background: url(../img/about/mouse.png) no-repeat;
}
.about__intro__button::after {
    content: '';
    position: absolute;
    right: 9px;
    bottom: -28px;
    display: inline-block;
    width:10px;
    height: 18px;
    opacity: 1;
    background: url(../img/about/arrow.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition:all .5s ease-in-out;
    transform: rotateZ(90deg);
    animation: arrow-animation 2s infinite ease-in-out;
}
@keyframes arrow-animation{
    0%{
        transform: translateY(-10px)rotateZ(90deg);
          opacity: 0;
    }
     20%{
        transform: translateY(10px)rotateZ(90deg);
    }
     40%{
        transform: translateY(-10px)rotateZ(90deg);
        opacity: 0;
    }
}
/*-------------------------------------------------------------------------------------
    about home end
---------------------------------------------------------------------------------------*/

/*-------------------------------------------------------------------------------------
    about service start
---------------------------------------------------------------------------------------*/
.about-home_service{
    background-color: #fff;
    position: relative;
    z-index: 1;
}
.main_service{
    position: relative;
}
.about-service{
    width: 75%;
    text-align: start;
    margin: 0 auto;
    transform: translate(50px,50px);
}
.about-service h2 {
    color: #109BB4;
    font-weight: 600;
    font-size: 60px;
}

.about-service p {
    font-size: 18px;
    line-height: 36px;
    color: #494747;
}
.about-service p span {
    font-size: 20px;
    color: #000;
    font-weight: 500;
}
.service_video{
    transform: translate(50px,50px);
}

/*-------------------------------------------------------------------------------------
    about service end
---------------------------------------------------------------------------------------*/

/*-------------------------------------------------------------------------------------
    about Value start
---------------------------------------------------------------------------------------*/
.value_section{
    background-color: #FFFF;
}
.main_value{
    position: relative;
    width: 100%;
    z-index: 1;
}
.values_box{
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: end;
    justify-content: flex-end;
    transform: translate(50px,50px);
}
.value_left-box {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    padding-top: 52px;
    color: #000;
    width: 33.33333%;
    margin-left: 8.33333%;
}
 .value_left-content {
    position: absolute;
    width: 100%;
    min-width: 100%;
    margin-top: 14vh;
}

 .value_left-content.inactive {
    visibility: hidden;
    opacity: 0;
}

.value_left-title h3 {
    margin-bottom: 10px;
    font-weight: 400;
    font-size: 60px;
    font-family:"Pontiac";
}
.value_left-title h3 span {
    color: #109BB4;
}
.values__single_title{
    position: relative;
}

.value_left-dec {
    padding-top: 16px;
}
.value_left-dec p {
    font-size: 17px;
    line-height: 30px;
    color: #333;
    font-weight: 300;
    font-family: 'Fira Sans', sans-serif;
}
 .values__line {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%;
    width: 8.33333%;
}
 .values__right-box {
    position: relative;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    margin: auto 0;
    padding-right: 150px;
    padding-left: 120px;
    width: 50%;
}
.values__right-single{
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    position: relative;
}

.values__right-info {
    width: 332px;
    position: absolute;
    top: calc(100% - 3%);
    right: 0px;
    padding: 20px 20px;
    border:1px solid #e1d2cc;
    border-radius: 8px;
    box-shadow: 0 20px 40px 0 rgba(0,0,0,.1);
    transform: scale(0);
    -moz-transform: scale(0);
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform-origin: top;
    -moz-transform-origin: top;
    -webkit-transform-origin: top;
    -ms-transform-origin: top;
    -o-transform-origin: top;
    transition: all .5s;
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    z-index: 1;
    background-image: linear-gradient(45deg, #109BB4 15%, rgba(240, 82, 12, 0.75) 100%);
    font-size: 17px;
    line-height: 30px;
    color: #fff;
    font-weight: 300;
    font-family: 'Fira Sans', sans-serif;
}
.values__right-info::after {
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    background: #109BB4;
    transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    top: -10px;
    right: 30px;
    border: 1px solid rgba(0,0,0,.1);
    border-width: 0 1px 1px 0;
}
.values__right-single:hover .values__right-info {
    transform: scale(1);
}
 .values__right-single:nth-child(1) {
    padding-left: 40px;
}
.values__right-single:nth-child(2) {
    -ms-flex-pack: end;
    justify-content: flex-end;
    margin: 40px 0;
}
.values__right-single:nth-child(4) {
    -ms-flex-pack: end;
    justify-content: flex-end;
}
.values__right-single:nth-child(5) {
    -ms-flex-pack: center;
    justify-content: center;
    
}
.values__single_title a {
    color: #000;
    font-size: 60px;
    font-family:"Pontiac";
    cursor: pointer;
}
 .values__line img {
    max-height: 70vh;
}
/*-------------------------------------------------------------------------------------
    about Value end
---------------------------------------------------------------------------------------*/

/*-------------------------------------------------------------------------------------
    section dot start
---------------------------------------------------------------------------------------*/
.pg-dots {
    position: fixed;
    bottom: 50%;
    left: 80px;
    z-index: 10;
    transform: translate3d(0, 50%, 0);
}
.pg-dots ul {
    margin-left: -6px;
    padding: 0;
}
.pg-dots li {
    width: 14px;
    height: 14px;
    margin-bottom: 30px;
}
.pg-dots li > a {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 100%;
}
.pg-dots li > a > span {
    top: 50%;
    left: 50%;
    z-index: 1;
    display: block;
    width: 4px;
    height: 4px;
    margin: auto;
    border: 0;
    border-width: 3px;
    border-style: solid;
    border-color: #a6a6a6;
    /* border-radius: 50%; */
    border-radius: 100%;
    background: #a6a6a6;
    text-decoration: none;
    transition: all ease-in-out 0.2s;
    cursor: pointer;
}
.pg-dots li.current > a > span{
  box-shadow: 0 0 0 3px rgba(255,78,0,0.21);
  border-color: #109BB4;
  background-color: #109BB4!important;
}


/*-------------------------------------------------------------------------------------
    section dot start
---------------------------------------------------------------------------------------*/

/*-------------------------------------------------------------------------------------
    team work start
---------------------------------------------------------------------------------------*/
.team_work-main {
    position: relative;
    width: 100%;
}
.team_work-content {
    max-width: 800px;
    width: 100%;
    margin:15vh auto;
    text-align: right;
}
.team_video {
    position: relative;
    max-width: 700px;
    width: 100%;
}
.team_video video {
    opacity: 0.2;
    width: 100%;
    height: auto;
    border: 4px solid #109BB4;
}
.team_video .technology-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -moz-box-pack: center;
    justify-content: center;
    -moz-box-align: center;
    align-items: center;
    display: -moz-box;
    display: flex;
}
.video-btn {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    color: #109BB4;
    position: relative;
    z-index: 1;
    background-color: #000;
    opacity:1;
    font-size: 38px;
    border: 3px solid #109BB4;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,0.5);
}
.team_work-info {
    position: absolute;
    right: 0;
    bottom: 30%;
    text-align: right;
    width: 35%;
}
.team_work-info h3 {
    margin-bottom: 10px;
    font-weight: 300;
    font-size: 60px;
    font-family: 'Geologica', sans-serif;
    color: #fff;
    padding-bottom: 10px;
}
.team_work-info h3 strong {
    color: #109BB4;
    font-weight: 400;
}
.team_work-info p {
    font-size: 17px;
    line-height: 36px;
    color: #fff;
    font-family: 'Geologica', sans-serif;
    font-weight: 400;
}
/*-------------------------------------------------------------------------------------
    team work end
---------------------------------------------------------------------------------------*/
.bottom-content {
    position: fixed;
    bottom: 4px;
    left: 4px;
    z-index: 10;
    overflow: hidden;
    width: calc(100% - 8px);
    transform-origin: 50% 100%;
    align-items: center;
    min-height: 54px;
    background-color: #101010;
   
}
.bottom-content{
     display: flex;
    justify-content: center;
    align-items: center;
}
.bottom-content p{
    text-align: center;
    font-weight: 200;
    font-family: 'Geologica', sans-serif;
}
.bottom-content p a{
    font-weight: 400;
    color: #109BB4;
    padding-left: 5px;
}
.bottom-content p span.arrow-btm {
    font-size: 18px;
    font-weight: 300;
    color: #109BB4;
    padding-left:5px ;
}

/*-------------------------------------------------------------------------------------
    team mate area start
---------------------------------------------------------------------------------------*/
.main-testimonial{
    position: relative;
    width: 100%;
}
.testimonials {
     position: relative;
}
.inner-testimonials {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh ;
}
#slide-testimonal .owl-nav {
    display: none;
}
#slide-testimonal .owl-dots {
     display: block;
}
#slide-testimonal .owl-dots {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-top: 0px;
}
#slide-testimonal .owl-dots .owl-dot {
    margin: 2px 8px;
    border: 0;
    background: none;
    cursor: pointer;
}
#slide-testimonal .owl-dots .owl-dot span::after {
    position: absolute;
    content: "";
    top: -4px;
    left: -4px;
    border: 1px solid #ed4700;
    box-shadow: 0 0 0 3px rgba(255,78,0,0.21);
    border-radius: 50%;
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#slide-testimonal .owl-dots .owl-dot span {
    display: block;
    border-radius: 50%;
    background-color: #a6a6a6;
    width: 8px;
    height: 8px;
    position: relative;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#slide-testimonal .owl-dots .owl-dot.active span{
    background-color: #ed4700;
}
#slide-testimonal .owl-dots .owl-dot.active span::after {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
     transform: scale(1); 
}
.custome_slide.owl-carousel .owl-item.active.center .main-reviewimage {
     border: 2px solid #ed4700;
}
.main-reviewimage {
     width: 100%;
     height: auto;
     background: #000;
     position: relative;
}
.main-reviewimage img {
     opacity: 0.3;
}
#slide-testimonal .active.center .main-reviewimage img {
     opacity: 1;
}
.test_img {
     position: relative;
     opacity: 1;
     -webkit-transition: .4s ease all;
     transition: .4s ease all;
     margin: 0 -48px;
     margin-top: 40px;
}

#slide-testimonal .center .test_img:before {
     content: none;
     transition: 0.7s ease-in-out;
}
.test_img img {
     overflow: hidden;
     margin: 0 auto;
     width: 100%;
     height: 100%;
     object-fit: cover;
}

.custome_slide.owl-carousel .owl-item.active.center {
     transform: scale(1.3);
     margin-top: 0 !important;
     position: relative;
     z-index: 999;
     -webkit-transform: scale(1);
     transform: scale(1);
}
.custome_slide.owl-carousel .owl-item {
     transform: scale(0.7);
     padding: 10px 0px;
     transition: all 0.5s;
}
 .testimonial_detail {
     text-align: center;
     position: absolute;
     width: 100%;
     bottom: 0;
}

 .testimonial_detail {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    padding: 30px;
    background-color: rgba(0,0,0,0.5);
    color: #fff;
    font-size: 28px;
    line-height: 38px;
    text-align: center;
    transition: opacity ease-in-out 0.2s;
}
.testimonial_detail h4 {
     font-size: 38px;
     margin: 0;
}
 .testimonial_detail p {
     color: #ccc;
     font-size: 26px;
}
.custome_slide.owl-carousel .active .testimonial_detail {
     display: none;
}
.custome_slide.owl-carousel .active.center .testimonial_detail {
     display: block !important;
}

@media only screen and (max-width:767px){
  .main-reviewimage {
    height: 400px;
    width: 425px;
    margin: 0 auto;
    display: block;
  }
  .testimonial_detail {
    left: inherit;
    width: 100%;
  }
}

/*-------------------------------------------------------------------------------------
    event area start
---------------------------------------------------------------------------------------*/
.main-event{
    position: relative;
    width: 100%;
    height: 100%;
}
.event_content{
    display: flex;
    flex-wrap: wrap;
    height: 100%;
}
.event_left-box {
    width: 32%;
    margin: 0 auto;
    margin-left: 8%;
    margin-right: 8%;
}
.event_right-box {
    width: 50%;
    display: block;
    overflow: hidden;
}
.event_slider-single img{
    width: 100%;
    height: 100%;
}
.event_left-title {
    margin-bottom: 14px;
    display: inline-block;
}
.event_left-title h3{
    margin-bottom: 10px;
    font-weight: 400;
    font-size: 60px;
    color: #fff;
}
.event_left-title h3 span {
    color: #109BB4;
}
.event_left-dec p{
    font-size: 20px;
    line-height: 36px;
    width: 100%;
    color: #bfbfbf;
}

.event_slider{
    position: relative;
}
.event_slider .owl-dots {
    display: flex;
    justify-content: center;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    /* bottom: 110px; */
    bottom: 30%;
}

.event_slider .owl-dots .owl-dot {
    margin: 2px 8px;
    border: 0;
    background: none;
    cursor: pointer;
}
.event_slider .owl-dots .owl-dot span::after {
    position: absolute;
    content: "";
    top: -4px;
    left: -4px;
    border: 1px solid #ed4700;
    box-shadow: 0 0 0 3px rgba(255,78,0,0.21);
    border-radius: 50%;
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.event_slider .owl-dots .owl-dot span {
    display: block;
    border-radius: 50%;
    background-color: #a6a6a6;
    width: 8px;
    height: 8px;
    position: relative;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.event_slider .owl-dots .owl-dot.active span{
    background-color: #ed4700;
}
.event_slider .owl-dots .owl-dot.active span::after {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
     transform: scale(1); 
}
.event_slider .owl-nav {
    position: absolute;
    content:'' ;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: 32%;
    text-align: center;
}

.event_slider .owl-nav .owl-prev {
    position: absolute;
    content: '';
    left: 30%;
    color: #109BB4;
    font-size: 18px;
     z-index: 99;
     background:transparent;
}
.event_slider .owl-nav .owl-next {
    position: absolute;
    content: '';
    right: 30%;
    color: #109BB4;
    font-size: 18px;
    z-index: 99;
    background:transparent;
}
.event_slider.owl-theme .owl-nav [class*=owl-]:hover {
    background: transparent;
}
.owl-theme .owl-nav [class*="owl-"] {
	color: #109BB4;
	background: transparent;
    padding: 0;
    margin: 0;
}
.owl-theme .owl-nav [class*="owl-"]:hover {
	color: #109BB4;
	background: transparent;
}
/*-------------------------------------------------------------------------------------
    event area end
---------------------------------------------------------------------------------------*/

.page-header {
    background-position: 50%;
    background-size: cover;
    display: flex;
    max-height: 330px;
    height: 25vw;
    display: flex;
    justify-content:center;
    align-items: center;
    position: relative;
}
.page-header::before {
    position: absolute;
    content: '';
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: #1a1a1a;
    opacity: 0.88;
}
/*-------------------------------------------------------------------------------------
    service area start
---------------------------------------------------------------------------------------*/
.service_page-services{
    position: relative;
    padding-top: 40px;
    background-color: #fff;
    z-index: 1;
}
.service_page-services::before {
    position: absolute;
    top: -30px;
    left: 0;
    content: '';
    background-image: url('../img/work/top.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 234px;
}
.service-box-single{
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: column wrap;
    flex-flow: column wrap;
    border: 1px solid #ccc;
    padding: 36px 24px;
    background-color: #fff;
    transition: border-color 0.4s, box-shadow 0.4s, transform 0.4s;
    margin-bottom: 50px;
}
.service-box-single:hover {
    box-shadow: 0 0 59px rgba(255,78,0,0.19);
    border-color: #109BB4;
}
.service-box-single:hover .services-list__single-item-url {
    opacity: 1;
}
.service-box-icon{
    margin-bottom: 20px;
}
.service-box-icon i{
    font-size: 40px;
    color:#109BB4;
}
.service-box-title h4 a{
    padding: 18px 0;
    color: #333;
    font-weight: bold;
    font-size: 16px;
   font-family: 'Geologica', sans-serif;
}
.service-box-nav ul li+li{
    padding: 8px 0 0;
}
.service-box-nav ul li{
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    color: #333;
    font-weight: normal;
    font-family: 'Geologica', sans-serif;
    font-size: 12px;
    line-height: 24px;
}
.service-box-nav ul li::before {
    content: '';
    width: 4px;
    height: 4px;
    margin: 7px 11px 0 0;
    background-color: #109BB4;
}
.service_box-single2{
    top: -100px;
}
.service-box-right img{
    width: 100%;
    height: auto;
}
.service-full-back {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    opacity: 1;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -ms-flex-align: start;
    align-items: flex-start;
    width: 100%;
    background-position: top 160px right;
    background-size: 100%;
    background-repeat: no-repeat;
    transition: opacity 0.4s;
}
.services-list__single-item-url {
    overflow: hidden;
    opacity: 0;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-item-align: end;
    align-self: flex-end;
    color: #109BB4;
    font-weight: 400;
    font-size: 18px;
    font-family:"Pontiac";
    transition: transform 0.4s, opacity 0.4s;
}
.services-list__single-item-url a{
    color: #109BB4;
}
.services-list__single-item-url::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    margin: 0 0 0 16px;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid #109BB4;
}
/*-------------------------------------------------------------------------------------
    service area end
---------------------------------------------------------------------------------------*/



/*-------------------------------------------------------------------------------------
    deliver area start
---------------------------------------------------------------------------------------*/
.deliver-area{
    background-color: #fff;
    padding-top: 60px;
    padding-bottom: 60px;
    position: relative;
    z-index: 1;
}

.deliver-single {
    max-width: 337px;
    min-height: 411px;
    border: 1px solid #ccc;
    padding: 46px 41px;
    background-color: #fff;
    transition: box-shadow 0.4s, border-color 0.4s;
    overflow: hidden;
    display: block;
}
.deliver-single:hover {
    box-shadow: 0 0 59px rgba(255,78,0,0.19);
    border-color: #109BB4;
}
.deliver-single .icon i{
      color: #109BB4;
      font-size: 25px;
}
.deliver-title {
    padding: 20px 0;
    color: #333;
    font-weight: bold;
    font-size: 18px;
}
.deliver-text p, .deliver_more-item {
    font-style: italic;
    font-weight: 200;
    font-size: 14px;
    font-family: "Fira Sans";
    line-height: 24px;
    color: #666;
}

.deliver_more-item {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.4s;
}
.deliver-single:hover .deliver_more-item {
    max-height: 450px;
}
.deliver-nav ul > li{
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    margin: 10px 0 0;
    line-height: 24px;
}
.deliver-nav ul > li::before {
    content: "*";
    margin-right: 18px;
    color: #109BB4;
}

.deliver_item-url {
    overflow: hidden;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-item-align: end;
    align-self: flex-end;
    color: #109BB4;
    font-weight: 400;
    font-size: 18px;
    font-family:"Pontiac";
    transition: transform 0.4s, opacity 0.4s;
    margin-top: 20px;
}
.deliver_item-url a{
    color: #109BB4;
}
.deliver_item-url::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    margin: 0 0 0 16px;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid #109BB4;
}
/*-------------------------------------------------------------------------------------
    deliver area end
---------------------------------------------------------------------------------------*/
.service_tool-area{
    position: relative;
    padding: 60px 0;
    overflow: hidden;
}
.service_tool-single {
    -ms-flex: 0 0 16.66667%;
    flex: 0 0 16.66667%;
    width: 16.66667%;
    max-width: 16.66667%;
    position: relative;
    opacity: 0.6;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: center;
    align-items: center;
    margin: 103px 0 20px;
    text-align: center;
    transition: opacity 0.4s ease;
}
.service_tool-icon {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    height: 80px;
    margin-bottom: 30px;
}
.service_tool-icon img {
    display: block;
    width: auto;
    min-width: 51px;
    max-width: 51px;
    height: auto;
    min-height: 50px;
    max-height: 70px;
    object-fit: contain;
    object-position: inherit;
}
.service_tool-line {
    width: 1px;
    height: 20px;
    margin: auto;
    margin-bottom: 0;
    background: #109BB4;
}

.service_tool-link {
    display: block;
    
    color: #eee;
    font-weight: 300;
    font-family: 'Fira Sans', sans-serif;
}
.service_tool-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-left: 15px;
    border: 1px solid #109BB4;
    border-radius: 50%;
    background: url("../img/about/arrow.png") no-repeat;
    background-position: 51% 50%;
    background-size: 40%;
    font-weight: 200;
    font-size: 14px;
    line-height: 22px;
    text-align: center;
}
.service_tool-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}



/*clients-single*/
/*-------------------------------------------------------------------------------------
    deliver area end
---------------------------------------------------------------------------------------*/

.testimonail-client-area {
    position: relative;
    padding: 300px 0;
}
.testimonail-client-area::before{
    content: '';
    position: absolute;
    top: -150px;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -2;
    opacity: 0.5;
    background-image: url("../img/client-testi/BG.png");
    background-position: 50% 50%;
    background-size: cover;
    background-repeat: no-repeat;
}
.testimonail-client-area_two {
    padding-top: 326px;
    padding-bottom: 263px;
    position: relative;
    z-index: 1;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.clients-single {
    position: relative;
    top: 0;
    opacity: 0;
    display: flex;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    width: 100%;
    transition: opacity 500ms ease 0s;
}
.owl-item.active .clients-single {
  opacity: 1;
}


.owl-item.active .client_item-single-left {
    opacity: 1;
    transition-delay: 0.4s;
}

.client_testimonail-left {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    text-align: center;
    height: 100%;
}

.client_testimonail-left h4{
    font-weight: 200;
    font-size: 24px;
    color: #fff;
}
.client_testimonail-left h4 span{
    font-weight: 400;
}
.client_item-single-left{
    position: relative;
    opacity: 0;
    width: 28.57143%;
    height: 160px;
    padding: 25px 0 25px 25px;
    font-size: 0;
}
.client_item-single-left::after {
    content: '“';
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    color: rgba(255,78,0,0.58);
    font-weight: 900;
    font-size: 300px;
    line-height: 154px;
    transform: translate(100px, 45px);
}
.testimonials-slider__avatar-figure {
    overflow: hidden;
    width: 110px;
    height: 110px;
    transition: all 0.4s;
    transform: rotate(135deg);
}

.owl-item.active .testimonials-slider__avatar-figure {
    transition-delay: 0.4s;
    transform: rotate(45deg);
}
.client_t-img {
    position: relative;
    opacity: 0;
    width: 60%;
    height: 160px;
    padding: 25px 0 25px 25px;
    font-size: 0;
}

.owl-item.active .client_t-img{
    opacity: 1;
}
.slider_img_avatar {
    position: relative;
    top: 50%;
    left: 50%;
    transition: all 0.4s;
    transform: translate(-50%, -50%) rotate(-45deg);
}
.owl-item.active .slider_img_avatar  {
    opacity: 1;
    transition-delay: 0.4s;
}

.client-rating ul{
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-align: center;
    align-items: center;
    margin: 25px 0 0;
}
.client-rating ul li {
    color: #ccc;
    padding: 0 4px;
}
.clients-company h4,
.clients-name h4{
    font-family: 'Fira Sans', sans-serif;
    color: #ddd;
    font-size: 22px;
    width: 100%;
    margin-top: 20px;
    font-weight: 300;
}
.clients-descrip p {
    flex: 1 1 71.42857%;
    padding-right: 7.14286%;
    color: #eee;
    font-style: italic;
    font-size: 24px;
   font-family: 'Fira Sans', sans-serif;
    line-height: 1.35;
}

.client_item-single-right {
    position: relative;
    width: 71.42857%;
    color:#ddd;
}
.client_item-single-right > *{
    opacity: 0;
    transition: all 0.4s;
    transform: translateY(25px);
}

.owl-item.active .client_item-single-right > * {
    opacity: 1;
    transform: none;
}
.owl-item.active .client_item-single-right > :nth-child(1) {
    transition-delay: .3s;
}
.owl-item.active .client_item-single-right > :nth-child(2) {
    transition-delay: .4s;
}
.owl-item.active .client_item-single-right > :nth-child(3) {
    transition-delay: .5s;
}
.owl-item.active .client_item-single-right > :nth-child(4) {
    transition-delay: .6s;
}

.client-testimonial-slider .owl-dots {
    display: flex;
    justify-content: center;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: -2%;
}
.client-testimonial-slider .owl-dots .owl-dot {
    margin: 2px 8px;
    border: 0;
    background: none;
    cursor: pointer;
}
.client-testimonial-slider .owl-dots .owl-dot span::after {
    position: absolute;
    content: "";
    top: -4px;
    left: -4px;
    border: 1px solid #ed4700;
    box-shadow: 0 0 0 3px rgba(255,78,0,0.21);
    border-radius: 50%;
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.client-testimonial-slider .owl-dots .owl-dot span {
    display: block;
    border-radius: 50%;
    background-color: #a6a6a6;
    width: 8px;
    height: 8px;
    position: relative;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.client-testimonial-slider .owl-dots .owl-dot.active span{
    background-color: #ed4700;
}
.client-testimonial-slider .owl-dots .owl-dot.active span::after {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
     transform: scale(1); 
}
.client-testimonial-slider .owl-nav {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 60px;
    align-self: center;
}

.client-testimonial-slider .owl-nav .owl-prev {
    position: absolute;
    content: '';
    left: 40%;
    color: #109BB4;
    font-size: 24px;
     z-index: 99;
     border: none;
     outline: none;
     background: none;
     line-height: 0;
}
.client-testimonial-slider .owl-nav .owl-next {
    position: absolute;
    content: '';
    right: 40%;
    color: #109BB4;
    font-size: 24px;
    z-index: 99;
    border: none;
    outline: none;
    background: none;
    line-height: 0;
}

/*estimate-content*/
/*-------------------------------------------------------------------------------------
    deliver area srart
---------------------------------------------------------------------------------------*/
.estimate-area{
    padding: 80px 0;
    background-color: #fff;
    position: relative;
}
.estimate-area::before {
    position: absolute;
    top: -180px;
    left: 0;
    content: '';
    background-image: url('../img/service/service.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 234px;
    z-index:9;
}
.estimate-content{
    text-align: center;
}
.estimate_title-header p{
  color: #333;
  font-weight: 400;
  font-size: 48px;
  font-family: 'Fira Sans', sans-serif;
  line-height: 72px;
  text-align: center;
}
.estimate_title-header p span{
    color: #109BB4;
    font-weight: 500;
}
.estimate__header-subtitle {
    color: #666;
    font-weight: 200;
    font-size: 24px;
    font-family: 'Fira Sans', sans-serif;
    text-align: center;
}

/*work-all*/
.work-page{
    overflow: hidden;
}
.work-all{
    padding-top: 124px;
    position: relative;
    background-size: 0;
}
.work-all::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: 98;
    opacity: 0.12;
    width: 100%;
    height:100%;
    background-image: inherit;
    background-position: 50% 0;
    background-size: cover;
    background-repeat: no-repeat;
    pointer-events: none;
    height: 360px;
}
.work-head {
    left: 50%;
    width: 33.33333%;
    font-size: 20px;
    text-align: center;
    margin: 0 auto;
    margin-top: 70px;
}
.work-head ul{
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
}

.work-head ul li a {
    position: relative;
    z-index: 10;
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    min-height: 40px;
    padding: 12px 51px 12px;
    color: #999;
    font-weight: 200;
    text-align: center;
    text-transform: lowercase;
    transform: translateX(1px);
    cursor: pointer;
    font-weight: 300;
}
.work-head ul li a::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: -1px;
    border: 1px solid;
    color: inherit;
}
.work-head ul li a:hover {
    color: #109BB4;
}
.filter_nav-tabs.nav-tabs .nav-link {
    border: 1px solid #666;
}
.filter_nav-tabs.nav-tabs .nav-link.active {
    color: #fff;
    background-color: #109BB4;
    border-color: transparent; 
     border: 1px solid #e54905!important; 
}
.work-filters {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 97;
    margin-top: 65px;
    background: url("../img/noise.png") repeat #262626;
}
.work-filters-nav{
  margin-top: 65px;
}

.work-filter_nav2{
    width: 100%;
    margin-top: 65px;
    margin-bottom: 30px;
    display: none;
}
.work-filter_nav2 button {
    width: 100%;
    height: 62px;
    border: 1px solid #e55719;
    background-color: transparent;
    color: #999;
    font-size: 14px;
    text-align: center;
}
.work-filter_nav2 button:hover {
    background: none;
}

.work-filter_nav2 .dropdown-menu{
    width: 100%;
    text-align: center;
    background: #262626;
    border: 1px solid #e55719;
}
.work-filter_nav2 .dropdown-menu li a{
  color: #fff;
  display: block;
  -ms-flex: 1;
  flex: 1;
  padding: 24px 16px 20px;
  color: #999;
  font-size: 14px;
  text-align: center;
  transition: all 0.5s;
  cursor: pointer;
}
.work-filter_nav2 .dropdown-menu li a:hover{
    background-color: unset;
    color: #109BB4;
}
.works-filters__select option{
    background: #262626;
    opacity: 0.4;
    color: #109BB4;
    height: 100%;
    text-align: center;
    width: 100%;
    margin: 0 auto;
}


.works-filters__list {
    height: 100%;
    position: relative;
    border-bottom: 1px solid #e55719;
    padding-bottom: 0;
    margin: 0 4em;
}
.works-filters__list span {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    padding: 0 50px;
    font-family:"Pontiac";
}
.works-filters__list li {
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 1;
    flex: 1;
    -ms-flex-align: center;
    align-items: center;
    height: 100%;
}
.works-filters__list li a {
    display: block;
    -ms-flex: 1;
    flex: 1;
    padding: 24px 16px 20px;
    color: #999;
    font-size: 14px;
    text-align: center;
    transition: all 0.5s;
    cursor: pointer;
}

.works-filters__list li a.active,
.works-filters__list li a:hover{
    color: #109BB4;
}


#marker {
    position: absolute;
    bottom: -8px;
    z-index: 2;
    margin-left: -5px;
    transition: 0.5s;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
}
#marker::after {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 7.5px 0 7.5px;
    border-color: #109BB4 rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0);
    display: block;
    text-align: center;
    left: 0;
    right: 0;
    margin: 0 auto;
}
.works-filters__list.clearfix:before,
.works-filters__list.clearfix:after {
  content: " ";
  display: table;
}

.works-filters__list.clearfix:after {
  clear: both;
}

.works-filters__list.clearfix {
  zoom: 1;
}

.csstransitions .detect:after {
  content: "transtion fail";
  color: green;
  font-weight: bold;
  background-color: white;
}

.no-js .detect:after {
  content: "JS fail";
  color: red;
  font-weight: bold;
  background-color: white;
}

.detect:after {
  content: "jQuery.animate()";
  color: red;
  font-weight: bold;
  background-color: white;
}

.works_work-area{
    background-color: #fff;
    padding-bottom: 40px;
}



/*-------------------------------------------------------------------------------------
    deliver area srart
---------------------------------------------------------------------------------------*/
/*service_btn-area*/
.position-header-area {
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    content: '';
    clear: both;
    z-index: 99;
}
.service_btn-area{
    position: relative;
    overflow: hidden;
    background-color: rgba(0,0,0,0.3);
    color: #eee;
}

.section_btn-content {
    display: block;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    transform: translate(50px,50px);
}
.section_btn-content h3 {
    margin: 10px 0;
    color: #ededed;
    font-weight: 300;
    font-size: 30px;
    text-align: center;
}
.service_btn {
    max-width: 317px;
    margin: 20px auto 0;
    text-align: center;
}
.service_btn .service_btn_main {
    min-width: 317px;
}

.pagination {
  width: 900px;
  margin: 0 auto;
}
.pagination a {
  float: left;
  list-style: none;
  margin-left: 15px;
  color: black;
  text-decoration: none;
  cursor: pointer;
}

a.jp-current {
  color: red;
}
/*-------------------------------------------------------------------------------------
   coantct area star
---------------------------------------------------------------------------------------*/
.all_page-header{
    position: relative;
    background-size: 0;
    overflow: hidden;
}
.all_page-header::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: '';
    opacity: 0.18;
    background-image: inherit;
    background-position: 50% 25%;
    background-size: cover;
    background-repeat: no-repeat;
    pointer-events: none;
}
.all_page-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px 0;
    text-align: center;
    padding-top: 204px;
    margin: 0 auto;
}
.all_page-text{
    text-align: center;
}
.all_page-text h2 {
    color: #fff;
    font-size: 55px;
    font-weight: 200;
    font-family: 'Geologica', sans-serif;
    width: 80%;
    margin: 0 auto;
    line-height: 80px;
}
.all_page-text h2 span{
    font-weight: 400;
    color: #109BB4;
}
.all_page-text p{
    margin: 3em 0 0;
    color: #ccc;
    font-style: italic;
    font-weight: 300;
    font-size: 14px;
    position: relative;
    width: 210px;
    margin: 0 auto;
}
.all_page-text p::before{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-image: url("../img/banner/wave.png");
    background-position: 50%;
    background-size: contain;
    background-repeat: repeat-x;
}

/*-------------------------------------------------------------------------------------
    contact form srart
---------------------------------------------------------------------------------------*/

.contact_form-page{
    padding: 60px 0;
    background-color: #fff;
    position: relative;
    z-index: 1;
}
.contact-form {
    padding: 60px 25%;
    width: 100%;
}
.contact_form-row {
    display: flex;
    flex-wrap: wrap;
}
.contact_form-single {
    -ms-flex: 1 1 50%;
    flex: 1 1 50%;
    padding: 0 34px 0 16px;
    margin-bottom: 20px;
}

.contact_form-single:first-child {
    padding-left: 0;
}
.contact_form-single:last-child {
    padding-right: 0;
}
.form-input__input::before, .form-input__input::after {
    content: '';
    display: table;
}
.form-input__input::after {
    clear: both;
}
.boxed-input {
    position: relative;
    display: block;
    min-height: 71px;
    padding-top: 16px;
}

.boxed-input__wrapper {
    position: relative;
    display: block;
}

.input {
    position: relative;
    height: 56px;
    border: none;
    padding: 16px;
    background: none;
    font-size: 16px;
    font-family: 'Geologica', sans-serif;
    width: 100%;
}
.boxed-input__input {
    position: relative;
    z-index: 1;
    display: block;
    transition: transform .25s ease-in-out;
    transform: translate(0, 0);
}
.boxed-input__textarea .boxed-input__input, .boxed-input__textarea .boxed-input__box {
    height: 100%;
     min-height: 120px; 
}
 .input_textarea{
    min-height: 120px;
    height: 100%;
}
.input_textarea:focus,
.boxed-input__wrapper input:focus{
    box-shadow: none;
    border: none;
    outline: none;
}
.boxed-input:not(.boxed-input--static) .boxed-input__input:focus, 
.boxed-input:not(.boxed-input--static) .boxed-input__input:focus ~ .boxed-input__box,
.boxed-input:not(.boxed-input--static) .boxed-input__input:focus ~ .boxed-input__errors {
    transform: translate(-16px, 16px);
}
.form_label {
    display: block;
    margin: 15px 0;
    color: #333;
    font-weight: 300;
    font-size: 14px;
     font-family: 'Geologica', sans-serif;
    line-height: 1.5;
}
.label_start {
    color: #109BB4;
    font-weight: 200;
}
.boxed-input__box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    height: 55px;
    transition: transform .25s ease-in-out,opacity .25s ease;
    transform: translate(0, 0);
    pointer-events: none;
}
.boxed-input__side {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    top: 0;
    background: #e6e6e6;
    transform-origin: 0 0;
}
.boxed-input__side--rear {
    top: -16px;
    right: -16px;
    left: auto;
    height: calc(100% + 1px);
    border-right: 1px solid transparent;
    background: #ededed;
}
.boxed-input__side--top {
    top: -16px;
    border-top: 1px solid transparent;
    border-left: 1px solid transparent;
}
.boxed-input__side--bottom {
    top: auto;
    bottom: 0;
    border-right: 1px solid transparent;
}
.boxed-input__side--top, .boxed-input__side--bottom {
    height: 16px;
    background: #d9d9d9;
    transform: skewX(-45deg);
    transform-origin: 0 100%;
}
.boxed-input__side--front {
    border-bottom: 1px solid transparent;
    border-left: 1px solid transparent;
}
.contact_form-row2{
    display: block;
}
.remembar-group {
    display: flex;
    justify-content: space-between;
    font-family: 'Geologica', sans-serif;
}
.remembar-group span a{
     font-family: 'Geologica', sans-serif;
}

.ajax-response{
    font-family: 'Geologica', sans-serif;
    color: #109BB4;
    font-weight: 400;
    font-size: 18px;
}
/*-------------------------------------------------------------------------------------
    .contact_map-area srart
---------------------------------------------------------------------------------------*/
.contact_map-area {
    height: 0;
    padding-top: 58.107784%;
    position: relative;
    overflow: hidden;
    z-index: 1;
}
.contact_map-area .transparent-grid{
    z-index: -1;
}

.contact_map-area::before{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: '';
    background-image: url("../img/contact/map.png");
    background-position: 50% 0;
    background-size: cover;
    -webkit-mask-image: linear-gradient(rgba(0,0,0,0.3) 0%, #000 6%, #000 68%, rgba(0,0,0,0) 92%);
    mask-image: linear-gradient(rgba(0,0,0,0.3) 0%, #000 6%, #000 68%, rgba(0,0,0,0) 92%);
}

.map-dot {
    z-index: 1;
    overflow: visible;
    width: 0;
    height: 0;
}
.contact-footer__map-dot {
    position: absolute;
}

.map-dot--static {
    z-index: 2;
}
.map-dot::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #109BB4;
    transform: translate(-50%, -50%);
}
.map-dot--static::before {
    opacity: 1;
    background-color: #fff;
    animation: none;
}
.map-dot__info {
    position: absolute;
    top: 0;
    left: 1vw;
    width: 6vw;
    max-width: 80px;
    height: 1px;
    background: #666;
}
.map-dot__content {
    position: absolute;
    top: 0;
    left: 100%;
    border: 1px solid #666;
    color: #ccc;
    font-weight: 200;
    font-size: 14px;
    font-family: "Pontiac",sans-serif;
    text-shadow: 0 0 3px rgba(0,0,0,0.3);
    transform: translate(0, -50%);
}
.map-dot__header {
    display: block;
    padding: 10px 15px 0;
    color: #109BB4;
    font-weight: 400;
    font-size: 21px;
    white-space: nowrap;
}
.map-dot__address {
    display: block;
    padding: 5px 15px 10px;
    line-height: 1.75;
}
.map-dot--left-side .map-dot__info {
    right: 1vw;
    left: auto;
}
.map-dot--left-side .map-dot__content {
    right: 100%;
    left: auto;
}

.map-dot--top-side .map-dot__info {
    top: auto;
    bottom: 1vw;
    left: 0;
    width: 1px;
    height: 6vw;
    max-height: 80px;
}
.map-dot--top-side .map-dot__content {
    top: auto;
    bottom: 100%;
    left: 0;
    transform: translate(-50%, 0);
}

.map-dot--down-side .map-dot__info {
    top: 1vw;
    left: 0;
    width: 1px;
    height: 6vw;
    max-height: 80px;
}
.map-dot--down-side .map-dot__content {
    top: 100%;
    left: 0;
    transform: translate(-50%, 0);
}
.map-dot:nth-child(4)::before {
   animation: map-dot 7s ease-out infinite 2.58509s;
}
.map-dot:nth-child(4)::before {
  animation:map-dot 7s ease-out infinite 2.58509s
}
.map-dot:nth-child(5)::before {
  animation:map-dot 7s ease-out infinite 6.30156s
}
.map-dot:nth-child(6)::before {
  animation:map-dot 7s ease-out infinite 3.56575s
}
.map-dot:nth-child(7)::before {
  animation:map-dot 7s ease-out infinite 1.21216s
}
.map-dot:nth-child(8)::before {
  animation:map-dot 7s ease-out infinite 3.98017s
}
.map-dot:nth-child(9)::before {
  animation:map-dot 7s ease-out infinite 2.70265s
}


@keyframes map-dot {
  0% {
    opacity:0;
    box-shadow:0 0 0 0 rgba(255,78,0,0.5)
  }
  25% {
    opacity:1;
    box-shadow:0 0 0 20px rgba(255,78,0,0)
  }
  50% {
    opacity:0;
    box-shadow:0 0 0 20px rgba(255,78,0,0)
  }
}
.overly_subbtn.contact_button {
    z-index: 99;
}
/*-------------------------------------------------------------------------------------
    video page header srart
---------------------------------------------------------------------------------------*/
.video_page-header{
    position: relative;
}
.video_page-header::before {
    content: "";
    position: absolute;
    top: 0px;
    left: -1px;
    z-index: 1;
    opacity: 1;
    width: 74%;
    height: 100%;
    background: linear-gradient(to right, rgba(38, 38, 38, 0.7) 58%, rgba(38, 38, 38, 0) 100%);
}
.in_video video{
    width: 100%;
    height: auto;
}
.in_video{
    position: relative;
}
.video_page-content {
    min-height: 823px;
    display: flex;
    flex-direction: column;
    align-items: start;
    align-self: center;
    justify-content: center;
    width: 70%;
}

.video_page-text{
    width: 70%;
}
.insight_page-text h3,
.video_page-text h3 {
    color: #fff;
    font-weight: 400;
    font-size: 45px;
    font-family: 'Geologica', sans-serif;
    line-height: 55px;
}
.insight_page-text h2,
.video_page-text h2 {
    color: #109BB4;
    font-weight: 600;
    font-family: 'Geologica', sans-serif;
    font-size: 50px;
    padding-top: 10px;
}

.video_page-text p {
    font-size: 21px;
    color: #fff;
    line-height: 30px;
    font-weight: 500;
}
.insight_page-text p {
    font-size: 20px;
    color: #fff;
    line-height: 38px;
    font-weight: 400;
    width: 75%;
}

.insight_page-text {
    width: 70%;
}
.insight_page-content {
    position: absolute;
    left: 100px;
    top: 20%;
    content: '';
    z-index: 2;
}
.insight_page-content.video_page-content{
    position: absolute;
  left: 100px;
  top: -2%;
  content: '';
  z-index: 2;
}
.insight_page-header{
    position: relative;
}
.insight_page-header::before {
    content: "";
    position: absolute;
    top: 0px;
    left: -1px;
    z-index: 1;
    opacity: 1;
    width: 60%;
    height: 100%;
    background: linear-gradient(to right, rgba(19, 17, 17, 0.7) 58%, rgba(38, 38, 38, 0) 100%);
}
.insight_page-header::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.5;
    background-color: rgb(38,38,38);
}
/*-------------------------------------------------------------------------------------
    contact_footer-address area srart
---------------------------------------------------------------------------------------*/
.contact_footer-address {
    padding: 20px 0 80px 0;
}
.contact_footer-address .footer_content-text{
    text-align: center;
}
.contact_footer-address .footer_content-text h4 {
    font-size: 33px;
    color: #fff;
    font-weight: 700;
    font-family: "Pontiac",sans-serif;
    margin-bottom: 14px;
}
.contact_footer-address .footer_content-text h5 {
    font-size: 16px;
    line-height: 20px;
    font-weight: 400;
    color: #fff;
    font-family: "Pontiac",sans-serif;
}
.contact_footer-address .footer_content-text p {
    font-size: 14px;
    line-height: 23px;
    color: #707070;
    font-family: 'Geologica', sans-serif;
    padding: 7px 0;
}
/*-------------------------------------------------------------------------------------
    department area srart
---------------------------------------------------------------------------------------*/

.contact-department{
    padding: 60px 0;
}
.department-single2 {
    border-right: 1px solid #109BB4;
    border-left: 1px solid #109BB4;
}
.department-single{
    text-align: center;
}
.department-single .img img {
    max-width: 180px;
    height: 180px;
}
.department-content{
    margin-top: 60px;
}
.department-content h5{
    color: #fff;
    font-size: 22px;
    font-weight: 300;
    font-family: 'Fira Sans', sans-serif;
}
.department-content p{
    font-size: 19px;
    font-weight: 300;
    font-family: 'Fira Sans', sans-serif;
}
.department-content span{
    display: block;
    padding: 5px 0;
}
.department-content span a.email {
    font-size: 18px;
    font-weight: 200;
    color: #109BB4;
}
.department-content span a.email:hover{
    color:#fff;
}
.department-content span a.phone{
    color:#969090;
    font-size: 18px;
    font-family: 'Fira Sans', sans-serif;
}

/*-------------------------------------------------------------------------------------
    .ingsight_blog-page srart
---------------------------------------------------------------------------------------*/
.ingsight_blog-page{
    background-color: #fff;
    position: relative;
    
}
.ingsight_blog-page_two {
    background: linear-gradient(#212121, transparent);
    padding-bottom: 5px;
}
.ingsight_blog-page_two::before, 
.ingsight_blog-page_two::after{
    display: none;
} 
.ingsight_blog-page::before {
    position: absolute;
    top: -195px;
    left: 0;
    content: '';
    background-image: url('../img/insight/top.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 200px;
    z-index: 3;
}
.ingsight_blog-page::after {
    position: absolute;
    bottom: -166px;
    left: 0;
    content: '';
    background-image: url('../img/insight/bottom.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 236px;
    z-index: 3;
}
.insight-blog-single {
    box-shadow: rgba(0, 0, 0, 0.09) 0px 4px 20px;
    margin-bottom: 25px;
    margin-left: 1.76%;
    border-radius: 10px;
    padding: 20px;
    background-color: rgb(255, 255, 255);
    transition: all 0.3s ease;
}
.insight-blog-single.insight-blog-single_tow {
    box-shadow: none;
    background-color: transparent;
    padding: 10px;
}
.insight-blog-single_tow .insight-btn ul li a {
    color: #fff;
}
.insight-blog-single_tow h3 a{
    color: #fff;
}
.insight-blog-single .img{
    position: relative;
    
}
.insight-blog-single .img::before{
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    opacity: 0;
    position: absolute;
    content: '';
    transition: all 0.3s ease-out;
}
.insight-blog-single:hover .img::before{
    transition: all 0.3s ease-in;
    opacity: .8;
}
.insight-blog-single .img img{
    width: 100%;
    height: auto;
}
.read_more-now {
    position: absolute;
    top: 60%;
    left: 50%;
    z-index: 5;
    opacity: 0;
    display: flex;
    flex-direction: column;
    -moz-box-pack: center;
    justify-content: center;
    text-align: center;
    transition: all 0.4s ease 0s;
    transform: translate(-50%, -50%);
    color:#109BB4;
}
.read_more-now .icon i {
    font-size: 38px;
    color: #109BB4;
    font-weight: 500;
}
.read_more-now h4 a {
    color: #109BB4;
    display: inline-block;
}
.insight-blog-single:hover .read_more-now{
    top: 50%;
    opacity: 1;
}

 .insight-content h3{
    padding-top: 10px;
 }   
.insight-content h3 a {
    line-height: 27px;
    display: inline-block;
}
.insight-btn ul li {
    margin: 5px;
    display: inline-block;
}
.insight-btn ul li a {
    display: block;
    color: #666;
    border: 1px solid rgba(255,78,0,0.35);
    border-radius: 8px;
    padding: 3px 7px 4px;
    font-size: 13px;
    text-transform: lowercase;
    transition: border-color 0.3s, background-color 0.3s, color 0.3s;
    font-weight: 400;
}
.insight-btn ul li a:hover {
    background: #109BB4;
    color: #fff;
}

.read_more-now .technology-video {
    margin-bottom: 77px;
}
.read_more-now .technology-video a {
    width: 40px;
    height: 40px;
    position: absolute;
    z-index: 9999;
    background: #109BB4;
    top: 30%;
    right: 43%;
    opacity: 1;
    color: #ffff;
}
.read_more-now .technology-video a i{
    font-size: 12px;
}


.insight_blog-more{
    text-align: center;
    width: 100%;
}
.insight_blog-more p{
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 300;
    color: #000;
}
.progress_insight {
    margin: 16px auto;
    padding: 0;
    width: 18%;
    height: 5px;
    overflow: hidden;
    background: #dedcdc;
    border-radius: 12px;
}
.progress_insight .bar {
    position: relative;
    float: left;
    min-width: 1%;
    height: 100%;
    background: #109BB4;
}

.progress_insight .percent {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  margin:0;
  font-size:12px;
}
.insight-btn {
    max-width: 1200px;
    margin: 0 auto;
}
.inight_filter-list .form-select {
    align-items: center;
    background-color: hsl(0,0%,100%);
    border-color: hsl(0,0%,80%);
    border-radius: 10px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 4px 20px 0 rgba(0,0,0,0.09);
    cursor: default;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    outline: 0 !important;
    position: relative;
    -webkit-transition: all 100ms;
    transition: all 100ms;
    box-sizing: border-box;
    border: none;
    width: 100%;
    align-items: center;
    align-self: center;
    padding: 18px 15px;
}


.insight_filtering-top .search-top_form {
    box-sizing: border-box;
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
}
.total_show h5,
.popular_show h5,
.insight_filtering-top .search-top_form h5 {
    color: #000;
    font-size: 20px;
}
.inight_filter-list {
    -moz-box-flex: 1;
    flex-grow: 1;
    max-width: none !important;
    margin-left: 35px;
}
.search-bottom_form {
    display: flex;
    justify-content: space-between;
    margin-top: 37px;
}

.popular_show {
    display: flex;
    justify-content: end;
    align-items: center;
}
.popular_show {
    width: 24%;
}
/*-------------------------------------------------------------------------------------
    collection area srart
---------------------------------------------------------------------------------------*/
.collection-area{
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-top: 239px;
    padding-bottom: 200px;
    z-index: 1;
}
.transparent-grid {
    z-index: -1;
}
.tabs_collect-content{
    background:transparent;
}
.tabs_collect-content.ui-widget.ui-widget-content {
    border:none;
}
.tabs_collect-content ul {
    background: transparent;
    border: transparent;
    display: flex;
    justify-content: space-between;
}
.tabs_collect-content ul li{
    background-color: transparent;
}
.tabs_collect-content.ui-tabs .ui-tabs-nav {
    margin: 0;
    padding: .2em .2em 0;
    border: none;
}
.tabs_collect-content.ui-tabs .ui-tabs-nav li {
    background: none;
    border: none;
}
.tabs_collect-content.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
    position: relative;
    font-size: 16px;
    padding: 20px 10px;
    font-weight: 400;
    line-height: 24px;
    transition: all 0.3s ease 0s;
    cursor: pointer;
    text-decoration: none;
    color: #fff;
    font-family: 'Geologica', sans-serif;

}
.tabs_collect-content.ui-tabs .ui-tabs-nav .ui-tabs-anchor::after {
    content: "";
    position: absolute;
    right: 6px;
    bottom: 4px;
    left: 6px;
    opacity: 0;
    height: 4px;
    background-image: url("../img/banner/wave.png");
    background-position: center bottom;
    background-size: contain;
    background-repeat: repeat-x;
    transition: all 0.3s ease 0s;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor::after,
.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor, 
.ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor, 
.ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor {
    color: #109BB4;
    opacity: 1;
}
.tabs_slide-content-all {
    margin-top: 100px;
    margin-bottom: 60px;
}
.tabs_items{
    display: flex;
    -moz-box-pack: justify;
    justify-content: space-between;
}
.tabs_items .tabs_image {
    flex: 0 0 48.5%;
}
.tabs_items .tabs_image img{
    width: 100%;
    height: auto;
    border: 2px solid #109BB4;
}
.tabs_text {
    display: flex;
    flex: 0 0 48.5%;
    flex-direction: column;
    -moz-box-pack: center;
    justify-content: center;
    align-items: flex-start;
}
.tabs_text .tabs_title h4 {
    margin-bottom: 20px;
    color: rgb(255, 255, 255);
    font-weight: 500;
    font-size: 26px;
    line-height: 40px;
}
.tabs_text .tabs_button ul li {
    margin: 5px;
    display: inline-block;
}
.tabs_text .tabs_button ul li a {
    display: block;
    color: #fff;
    border: 1px solid #109BB4;
    border-radius: 8px;
    padding: 3px 7px 4px;
    font-size: 13px;
    text-transform: lowercase;
    transition: border-color 0.3s, background-color 0.3s, color 0.3s;
    font-weight: 400;
}
.tabs_text .tabs_button ul li a:hover {
    background: #109BB4;
    color: #fff;
}
.tabs_text .tabs_descrip p {
    margin-top: 20px;
    margin-bottom: 40px;
    color: rgb(150, 150, 150);
    font-size: 18px;
    line-height: 27px;
}
.more_now a {
    position: relative;
    display: inline-block;
    padding-right: 34px;
    color: rgb(255, 255, 255);
    font-weight: 500;
    font-size: 18px;
    line-height: 20px;
    transition: all 0.3s ease 0s;
}
.more_now a::after {
    content: "";
    position: absolute;
    top: 5px;
    right: 0px;
    display: block;
    width: 0px;
    height: 0px;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-left: 9px solid #109BB4;
    transition: all 0.3s ease 0s;
}

.tabs_sliders .owl-nav .owl-prev {
    position: absolute;
    top: 32%;
    left: -85px;
}
.tabs_sliders .owl-nav .owl-next {
    position: absolute;
    top: 32%;
    right: -85px;
}
.tabs-slider-nav {
    font-size: 56px;
    color: #109BB4;
    font-weight: 400;
}
.owl-nav .owl-prev.disabled .tabs-slider-nav,
.owl-nav .owl-next.disabled .tabs-slider-nav{
    color: #109BB4;
    opacity: 0.5;
}
.tabs_sliders.owl-theme .owl-dots{
    display: none;
}
/*--------------------------------------------------------------
# Our Experts chefs Section
--------------------------------------------------------------*/
.our_office-boss {
    position: relative;
    padding: 80px 0;
    margin-bottom:1px;
    background-color: #fff;
    z-index: 1;
}
.our_office-boss::before {
    position: absolute;
    top: -113px;
    left: 0;
    content: '';
    background-image: url('../img/insight/top.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 187px;
    z-index: 3;
}
.our_office-boss .transparent-grid{
    z-index: -1;
}
.membar-head {
    text-align: center;
    margin-bottom: 55px;
}
.membar-head h4 {
    font-size: 50px;
    line-height: 55px;
    text-align: center;
    width: 70%;
    margin: 0 auto;
}
.our_office-boss .experts-chefs-nav {
  position: absolute;
  right: 30px;
  top: 50%;
  list-style: none;
  padding-left: 0;
}
.our_office-boss .experts-chefs-nav li {
  position: relative;
}
.our_office-boss .experts-chefs-nav li .nav-image {
  width: 25px;
  height: 25px;
  overflow: hidden;
  border-radius: 100%;
  background: #000;
  margin-bottom: 15px;
  position: relative;
  display: inline-block;
}
.our_office-boss .experts-chefs-nav li .nav-image img{
    width: 25px;
    height: 25px;
    object-fit: contain;
}
.our_office-boss .experts-chefs-nav li.active:before {
  content: "";
  background-color: #ebebeb;
  position: absolute;
  width: 130px;
  height: 1px;
  right: 0;
  top: 13px;
  z-index: 0;
}
.our_office-boss .experts-chefs-nav li.active::after {
    content: "";
    width: 10px;
    height: 10px;
    display: inline-block;
    background: #109BB4;
    border-radius: 50px;
    position: absolute;
    left: -105px;
    top: 9px;
}
.our_office-boss .experts-chefs-nav li.active a {
  position: relative;
}
.our_office-boss .experts-chefs-nav li.active a:before {
  content: "";
  position: absolute;
  background-color: rgba(0, 0, 0, 0.45);
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: 100%;
}
.our_office-boss .tab-pane {
    position: relative;
    opacity: 1;
}
.our_office-boss .tab-pane .image-before {
  position: absolute;
  left: 8%;
  top: 16%;
  z-index: 0;
  max-width: 375px;
}
.our_office-boss .tab-pane .image-before h2 {
  font-size: 120px;
  font-weight: bold;
  font-family: inherit;
  line-height: 0.9;
  text-transform: capitalize;
  color: #d8a16c;
}
.our_office-boss .tab-pane .image-before h2 span {
  display: block;
}
.our_office-boss .tab-pane .image-before h2 span:nth-child(1) {
    font-size: 45px;
    color: #109BB4;
}
.our_office-boss .tab-pane .image-before h2 span:nth-child(2) {
  color: #5d5d5d;
}
.our_office-boss .tab-pane .image-content {
  position: relative;
  z-index: 10;
}
.our_office-boss .tab-pane .image-content img{
    max-width: 100%;
}
@media only screen and (max-width: 590px) {
  .our_office-boss .tab-pane .image-content {
    max-width: 280px;
    margin: auto;
  }
}
@media only screen and (max-width: 480px) {
  .our_office-boss .tab-pane .image-content {
    max-width: 175px;
    height: 345px;
  }
}
.our_office-boss .tab-pane .image-after {
  position: absolute;
  right: 4%;
  top: 16%;
  z-index: 0;
  max-width: 430px;
}
.our_office-boss .tab-pane .image-after h2 {
    font-size: 120px;
    font-weight: bold;
    font-family: inherit;
    line-height: 0.9;
    text-transform: capitalize;
    color: #109BB4;
}
.our_office-boss .tab-pane .image-after h2 span {
  display: block;
}
.our_office-boss .tab-pane .image-after h2 span:nth-child(1) {
  font-size: 45px;
  color: #d8a16c;
  position: relative;
  left: 30%;
}
.our_office-boss .tab-pane .image-after h2 span:nth-child(2) {
  color: #5d5d5d;
}
.our_office-boss .tab-pane .author-name {
  margin-top: 0;
  font-weight: bold;
  margin-bottom: 0;
  font-size: 30px;
  font-family: 'Fira Sans', sans-serif;
}
.our_office-boss .tab-pane .author-designation {
  font-family: inherit;
  font-size: 15px;
  margin-top: 0;
}

/*--------------------------------------------------------------
carrea page start
--------------------------------------------------------------*/

.careers_area {
    background-color: #fff;
    position: relative;
    z-index: 1;
    padding: 70px 0 90px 0;
}

.careers_area::before {
    position: absolute;
    top: -89px;
    left: 0;
    content: '';
    background-image: url('../img/message/top.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 130px;
    z-index: 3;
}
.modinaizer_main::before {
    background-image: url('../img/service/service.png');
    height: 258px;
    top: -235px;
}
/*message section*/
.message-sction{
    overflow: hidden;
}
.carrer_page-content {
    padding: 275px 0;
    padding-top: 254px;
    width: 210px;
     width: 100%;
}

.carrer_page-text p::before{
    display: none;
}

.message-left h2{
  font-size: 36px;
  color: #333;
  font-weight: 700;
  font-family: "Pontiac",sans-serif;
 line-height: 1.5;
  margin: 0 0 80px;
}
.message-left h2 span {
    color: #109BB4;
    font-weight: 200;
}
.message-left p{
    color: #333;
    line-height: 2;
}
.message-right {
    min-width: 159%;
    width: 50%;
    max-width: 50%;
}
.message-right img{
   display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
}


/*--------------------------------------------------------------
office-story
--------------------------------------------------------------*/
.section-padding{
    padding: 100px 0;
}
.job-single {
    position: relative;
    opacity: 1;
    max-height: 350px;
    border: 1px solid #109BB4;
    transition: box-shadow 0.4s, max-height 0.4s, opacity 0.4s, transform 0.4s;
    transform: scale(1,1);
    transform-origin: top;
    border-left: none;
}
.job-single2{
     border-left: 1px solid #109BB4;
}
.job_anchor-box {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: flex-start;
    height: 100%;
    padding: 57px 30px 57px 37px;
    background-color: #fff;
}
.job-single .job_anchor-box h4{
    font-size: 18px;
    font-weight: 300;
    color: #333;
    line-height: 1.5;
    font-family: 'Fira Sans', sans-serif;
    width: 100%;
}
.job-single .job_anchor-box h3{
    font-family: 'Fira Sans', sans-serif;
    font-weight: 400;
    position: relative;
    padding: 0 0 20px;
}
.job-single .job_anchor-box h3::before{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background-image: url("../img/banner/wave2.png");
    background-position: 50%;
    background-size: contain;
    background-repeat: repeat-x;
}

.job-single .job_anchor-box p {
    color: #109BB4;
    font-size: 14px;
    padding: 20px 0 0 0;
    font-family: 'Geologica', sans-serif;
}
.job-single .job_anchor-box p span{
    color: #666;
}
.padding_gap{
 padding-left: 0;
 padding-right: 0;
}
.job-single .job_anchor-box:hover {
    z-index: 1;
    box-shadow: 0 0 49px rgba(255,78,0,0.19);
}

/*--------------------------------------------------------------
    video text
--------------------------------------------------------------*/
.jobpromo-section {
    padding-top: 30px;
    padding-bottom: 144px;
}
.video_text-right h2{
    color: #333;
    font-weight: 700;
    font-family: "Pontiac",sans-serif;
    line-height: 1.5;
    padding: 0 0 40px 4.16667%;
    font-size: 36px;
    text-align: end;
}
.video_text-right p {
    color: #333;
    line-height: 2;
    text-align: right;
}
.contetn_btn{
    max-width: 51.667%;
    float:right ;
}

/*--------------------------------------------------------------
    meet-single
--------------------------------------------------------------*/

.meet-single h4{
    position: relative;
    padding: 0 0 20px;
    font-size: 20px;
    color: #333;
    font-weight: 700;
    font-family: "Pontiac",sans-serif;
    display: inline-block;
}
.meet-single h4::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 9px;
    background-image: url("../img/banner/wave2.png");
    background-position: 50%;
    background-size: cover;
    background-repeat: repeat-x;
}
.meet-single p{
    color: #333;
    line-height: 2;
}
/*--------------------------------------------------------------
    rules
--------------------------------------------------------------*/

.rules-section{
    padding: 100px 0;
    position: relative;
}

.rules-section::before{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    opacity: 0.05;
    width: 100%;
    height: 100%;
    background-image: url("../img/rules/bg1.png");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.rules-header h2{
    text-align: center;
    padding: 80px 0;
    font-size: 42px;
    font-weight: 200;
    color: #fff;
    font-family: "Pontiac",sans-serif
}
.rules-single{
    margin-bottom: 80px;
}
.rules-single h4{
    position: relative;
    padding:15px 0;
    font-size: 20px;
    color: #fff;
    font-weight: 700;
    font-family: "Pontiac",sans-serif;
    display: inline-block;
}
.rules-single p {
    color: #ccc;
    line-height: 2;
}
.rules-footer h3{
    font-size: 18px;
    color:#fff;
    font-weight: 400;
    text-align: center;
}

/*--------------------------------------------------------------
    benefit
--------------------------------------------------------------*/

.benefit-header h2{
    font-size: 55px;
    line-height: 60px;
}
.benefit-header h2 span{
    font-weight: 600;
}
.benefit-single {
    margin-bottom: 31px;
    text-align: center;
}
.benefit-single h6 {
    font-size: 14px;
    font-weight: 400;
    font-style: italic;
    font-family: 'Fira Sans', sans-serif;
    color: #666;
    padding: 0 0 19px;
}
.benefit-single h6 span {
    color: #109BB4;
}
.benefit-single:hover .benefit_title{
    color:#109BB4;
}

.benefit-single h4{
    display: block;
    padding: 5px 0;
}
.benefit-single h4 a{
    font-size: 25px;
    line-height: 40px;
    font-weight: 400;
    font-family: 'Fira Sans', sans-serif;
    color: #ccc;
    transition: all 0.4s ease;
}
.benefit-single h4 a:hover{
     color: #109BB4;
     transition: all 0.4s ease;
}
.benefit-tag ul li {
    margin: 5px;
    display: inline-block;
}
.benefit-tag ul li {
    color: #ccc;
    border: 1px solid #109BB4;
    border-radius: 8px;
    padding: 5px 15px 5px;
    text-transform: lowercase;
    transition: border-color 0.3s, background-color 0.3s, color 0.3s;
    font-weight: 400;
    font-size: 16px;
}
.benefit-tag ul li:hover {
    background: #109BB4;
    color: #fff;
}
.benefit-single p {
    font-size: 14px;
    font-weight: 300;
    font-family: 'Fira Sans', sans-serif;
    color: #ccc;
    padding-top: 20px;
}

/*--------------------------------------------------------------
    developemtn
--------------------------------------------------------------*/
.development-header{
    position: relative;
    overflow: hidden;
    min-height: 824px;
    background-image: inherit;
    background-position: 50%;
    background-size: cover;
    background-repeat: no-repeat;
}
.development-header::before {
    position: absolute;
    content: '';
    top: 0px;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: #212121;
    opacity: 0.88;
}
.development_text{
    z-index: 9;
}
.development_text h2 {
    padding-bottom: 13px;
    font-size: 54px;
    padding-top: 20px;
}
.development_text h2 span{
    color: #fff;
}
.development_text p{
    font-size: 22px;
    color: #fff;
    line-height: 37px;
    font-weight: 300;
}
.development-button{
    margin-top:60px;
}
.development_btn {
    max-width: 100%;
    margin: 0;
    width: 277px;
}
.name_of-company h5{
    line-height: 0;
    color:#333;
    margin-bottom: 0;
}
/*--------------------------------------------------------------
    review_left
--------------------------------------------------------------*/
.review-section{
    background-color: #fff;
}
.total-review_header {
    display: flex;
    width: 54%;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}
.total_start_rating {
    display: flex;
}
.avarage_point{
    padding-left: 10px;
}
.avarage_point small {
    color: #109BB4;
    font-size: 12px;
    font-weight: 300;
}
.review-single {
    background-color: #fff;
    border-radius: 3px;
    box-shadow: 0 3px 8px rgba(0,0,0,.08);
    margin-bottom: 20px;
    min-height: 215px;
    padding: 25px 20px 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.review-single:hover{
    box-shadow: 0 3px 8px rgba(0,0,0,.2);
    text-decoration: none;
}

.review-rating{
    display: flex;
}
.point span {
    color: #333;
    font-size: 20px;
    line-height: 23px;
    margin-right: 12px;
    font-weight: 500;
}
.rating_nav{
    display: flex;
    justify-content: start;
}
.rating_nav li{
    padding: 0 1px;
}
.rating_nav li i {
    color: #109BB4db;
}
.review_left h5{
    font-family: "Pontiac",sans-serif;
    font-size: 16px;
    font-weight: bold;
    line-height: 40px;
    color: #9b9b9b;
    text-transform: uppercase;
}
.review_left h2{
    font-size: 50px;
    font-weight: bold;
    line-height: 64px;
    font-family: "Pontiac",Arial,Helvetica,sans-serif;
    color: #333;
    padding-right: 10%;
}
.review-single .revie-des p{
    color: #000;
}
.review-single .review-ft span {
    color: #6a7a7e;
    font-size: 12px;
    line-height: 14px;
    margin-bottom: 0;
    display: block;
    font-weight: 300;
}
.review-single .review-ft span.author_name-rating{
    margin-bottom: 8px;
}
.review_left p {
    font-size: 18px;
    font-weight: 300;
    line-height: 36px;
    margin-top: 50px;
    margin-bottom: 70px;
    padding-right: 10%;
    color: #666;
}
.review_btn {
    color: #109BB4;
    font-family: "Pontiac",sans-serif;
    font-size: 18px;
    line-height: 24px;
    font-weight: normal;
    margin-bottom: 90px;
}
.review_btn::after {
    content: "";
    position: absolute;
    border-width: 8px 0 8px 8px;
    border-style: solid;
    border-color: transparent transparent transparent #109BB4;
    transform: translate(12px, 6px);
}

/*--------------------------------------------------------------
    expart slider
--------------------------------------------------------------*/
.expart_slider-section{
    background-color: #fff;
    padding-top: 120px;
    position: relative;
}

.expart_slider-section::before {
    position: absolute;
    content: '';
    width: 100%;
    height: 194px;
    top: -129px;
    left: 0;
    background: url('../img/developer/top.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.expart-title{
    text-align: center;
    width: 100%;
}
.expart-title h2{
  color: #333;
  font-weight: 700;
  font-family: "Pontiac",sans-serif;
  font-size: 36px;
}
.expart-title h2 span {
    color: #109BB4;
}
.expart-title p {
    color: #333;
    font-size: 16px;
    font-weight: 300;
}
.developer-single {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 100%;
}
.developer-header {
    position: relative;
    left: calc(-35vw + 50%);
    width: 70vw;
    height: 200px;
    margin: 40px 0 48px;
    opacity: 0;
    height: 200px;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
    transform: translateY(-20%);
    transform-origin: bottom;
    text-align: center;
}

 .developer-slider .owl-item.center > .developer-single > .developer-header{
    opacity: 1;
    filter: grayscale(0);
}

 .developer-slider .owl-item.center > .developer-single > .developer-header{
    transform: translateY(0);
}

 .developer-slider.owl-theme .owl-nav [class*="owl-"] {
    color:#109BB4;
    background: transparent;
}
.developer-slider.owl-theme .owl-nav [class*="owl-"]:hover {
    background: transparent;
    color: #109BB4;
}
.developer-header h3{
    font-size: 30px;
    line-height: 80px;
    color: #333;
    font-weight: 700;
    font-family: "Pontiac",sans-serif;
}

.developer-header .exprience_list {
    width: 50%;
    margin: 0 auto;
    font-size: 16px;
    display: block;
}
.developer_img {
    position: relative;
    padding: 10% 0 5% 0;
}
.developer_img-item{
    position: relative;
    height: 0;
    border-bottom: 1px solid #109BB4;
    padding-top: 60%
}
.developer_img-item img {
    position: absolute;
    bottom: 0;
    left: 50%;
    opacity: 0.5;
    filter: grayscale(100%);
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    transform: translateX(-50%);
    user-select: none;
    cursor: pointer;
}
.developer-slider .owl-item.center > .developer-single > .developer_img > .developer_img-item img{
    filter: grayscale(0%)!important;
    opacity: 1;
}
.developer-slider .owl-nav {
    display: none;
    position: absolute;
    top: 30%;
    right: 0;
    left: 0;
}
.developer-slider .owl-nav .owl-prev, .developer-slider .owl-nav .owl-next {
    position: absolute;
    height: 100px;
}
.developer-slider .owl-nav .owl-prev {
    left: 5%;
}
.developer-slider .owl-nav .owl-next {
    right: 5%;
}
.developer-slider .owl-nav .owl-prev span, .developer-slider .owl-nav .owl-next span {
    color: #109BB4;
    font-size: 26px;
}
/*--------------------------------------------------------------
   language
--------------------------------------------------------------*/

.language_description-section{
    background-color: #fff;
}

.language-img {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 38px 10% 0;
}
.language-img img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 155px;
}
.language-info {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 38px 10% 0;
}
.language-info p{
    color: #666;
}
.language-info p+p{
    margin-bottom: 30px;
}
.language-info h3 {
    margin: 0.5em 0;
    color: #333;
    font-weight: 400;
    font-family: "Pontiac",sans-serif;
}
.language-info ul > li {
    position: relative;
    padding: 15px 0 0 47px;
}
.language-info ul > li::before {
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-family: "Pontiac",sans-serif;
    line-height: 1;
    text-transform: none;
    content: "";
    position: absolute;
    top: 27px;
    left: 0;
    display: inline-block;
    color: #f84d10;
    font-size: 36px;
    line-height: 36px;
    vertical-align: middle;
    width: 28px;
    height: 1px;
    background: #109BB4;
}

/*--------------------------------------------------------------
   expart talents
--------------------------------------------------------------*/
.expart_talent-section {
    position: relative;
    padding: 80px 0 20px;
    background-color: #212121;
    z-index: -1;
}
.talent-single {
    text-align: center;
    margin-bottom: 40px;
}
.talent-single .icon {
    padding-bottom: 5px;
    color: #109BB4;
    font-size: 35px;
}
.talent-single .icon span img {
   width: auto;
  max-width: 100%;
  max-height: 75px;
}
.talent-single h4 {
    font-weight: 500;
    color: #fff;
    font-size: 18px;
    margin-bottom: 0px;
}
.talent-single p{
  margin-top: 26px;
  font-weight: bold;
  font-size: 13px;
  font-family: "Pontiac",sans-serif;
  line-height: 24px;
  text-align: center;
}

.talent-footer h2  {
    font-size: 23px;
    color: #fff;
    text-align: center;
    font-family: 'Fira Sans', sans-serif;
}
.talent-footer h2 span{
    font-weight: 600;
    font-family: 'Fira Sans', sans-serif;
}

/*--------------------------------------------------------------
   process area
--------------------------------------------------------------*/
.process-section {
    padding-top: 103px;
    padding-bottom: 164px;
    position: relative;
    background-color: #262626;
}

.bg_img{
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.process_all-content {
    display: flex;
    justify-content: center;
    width: 100%;
}
.prcess_icon-single {
    width: 50%;
    text-align: center;
}
.prcess_icon-single img{
  max-width: 65px;
  width: 100%;
  height: auto;
  margin-bottom: 25px;
}

.process-left-column {
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    height: 100%;
    position: relative;
}
.process_all-icon {
    position: absolute;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 50%;
    height: 480px;
}
 .hidden_process {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 0.2s, opacity 0.2s linear;
}
.visible_process {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.2s linear;
}

.chart--second, .chart--first {
    width: 100%;
    height: auto;
    max-width: 495px;
}
.process_all-icon {
    max-width: 495px;
}
.process-left-column:hover .hidden_process{
    visibility: visible;
    opacity: 1;
    transition: opacity 0.2s linear;
}
.process-left-column:hover .chart-img{
     visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s linear;
}

/*--------------------------------------------------------------
  technologoy detail
--------------------------------------------------------------*/
.work_detail-header{
    padding-top: 250px;
    position: relative;
    background-size: 0;
}
.work_detail-header::before{
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: -1;
  opacity: 0.08;
  height: 100%;
  background-image: inherit;
  background-position: 50%;
  background-size: cover;
  background-repeat: no-repeat;
}
.technology_detail-title{
    margin: 32px 0;
    color: white;
    font-weight: 200;
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -0.08px;
}
.hast_work {
    font-style: italic;
    display: inline-block;
    font-style: italic;
    font-weight: 200;
     font-family: 'Fira Sans', sans-serif;
     margin-top: 15px;
}
.hast_work span {
    color: #109BB4;
    padding-right: 5px;
}
.project_detail-technology {
    display: flex;
    flex-wrap: wrap;
    margin: 50px 0 45px;
    font-weight: 200;
    font-size: 14px;
     font-family: 'Fira Sans', sans-serif;
}
.technology-single {
    flex: 1 0 16.6%;
    border: 1px solid #373737;
    font-weight: 200;
    font-size: 14px;
     font-family: 'Fira Sans', sans-serif;
}
.technology-title{
    border-bottom: 1px solid #373737;
    padding: 13px 30px 9px;
    color: #109BB4;
}
.technology-list{
    padding: 4px 30px 7px;
    color: #999;
}
.technology-list ul li {
    display: flex;
    align-items: center;
    min-height: 32px;
    margin: 6.5px 0;
}
.technology-list ul li span img {
    display: block;
    max-width: 100%;
    max-height: 32px;
}
.technology-list ul li span {
    margin-right: 12px;
}
.project_detail-numbers {
    margin: 47px 0 65px;
}
.numbers-single {
    text-align: center;
}
.numbers-single h5 {
    position: relative;
    padding-bottom: 10px;
    color: white;
    font-weight: 700;
    font-size: 36px;
    display: inline-block;
}
.numbers-single h5::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0px;
    left: 0;
    width: 45px;
    height: 5px;
    margin: auto;
    background-image: url("../img/banner/wave.png");
    background-position: left bottom;
    background-size: contain;
    background-repeat: repeat-x;
}
/*--------------------------------------------------------------
  project_wise-content
--------------------------------------------------------------*/
.project_wise-content{
    background-color: #fff;
    padding-top: 30px;
    padding-bottom: 130px;
    position: relative;
    z-index: 1;
}

/*problem slove*/
.question_sloves-area {
    position: relative;
    padding-top: 25px;
    padding-bottom: 90px;
    z-index: 1;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.question_sloves-area::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: -1;
    opacity: 0.6;
    height: 100%;
    background-image: inherit;
    background-position: 50%;
    background-size: cover;
    background-repeat: no-repeat;
    background: black;
}

.slove-title h2{
    margin: 79px 0;
    font-size: 48px;
    color: #fff;
    font-weight: 700;
    font-family: "Pontiac",sans-serif;
    line-height: 1.5;
}
.slove-description p{
    margin-bottom: 2em;
    color: #fff;
}
/*--------------------------------------------------------------
  key features area
--------------------------------------------------------------*/
.key_feature-area{
    position: relative;
    overflow: hidden;
}
.key_feature-area::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: -1;
    opacity: 0.08;
    height: 100%;
    background-image: inherit;
    background-position: 50%;
    background-size: cover;
    background-repeat: no-repeat;
}
.key-header h2{
    margin: 79px 0;
    font-size: 48px;
    color: #fff;
    font-weight: 700;
    font-family: "Pontiac",sans-serif;
    line-height: 1.5;
}
.key-single{
  position: relative;
  margin: 66px 0;
  padding-left: 52px;
}
.key-single::before {
    content: '';
    position: absolute;
    top: 1.2rem;
    left: 0;
    width: 24px;
    height: 1px;
    background-color: rgba(255,78,0,0.5);
    font-size: 24px;
}
.key-single h3{
    font-weight: 400;
    font-size: 22px;
    color: #fff;
}
.key-single p{
    padding-top: 20px;
}

/*--------------------------------------------------------------
 example project
--------------------------------------------------------------*/
.project_example-title{
    text-align: center;
}
.project_example-title h3 {
    position: relative;
    display: inline-block;
    margin: 40px 0;
    color: #fff;
}
.example-img {
    text-align: center;
    margin-bottom: 20px;
}

.example-img a img {
    display: block;
    max-width: 323px;
    height: auto;
    width: 100%;
    transition: opacity 0.3s ease-out;
    cursor: pointer;
    text-align: center;
    margin: 0 auto;
    display: inline-block;
}
.project_example-title h3::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: -3px;
    left: 0;
    height: 5px;
    margin: auto;
    background-image: url("../img/banner/wave.png");
    background-position: left bottom;
    background-size: contain;
    background-repeat: repeat-x;
}
/*--------------------------------------------------------------
 serviece details
--------------------------------------------------------------*/
.what_we-develop{
    background-color: #fff;
}

.services-button{
    margin: 0 auto;
}
.service_detail-title {
    color: #fff;
    font-size: 25px;
    line-height: 2.5rem;
    margin: 30px 0 20px;
    text-align: center;
    font-weight: 700;
    width: 43%;
    margin: 0 auto;
    padding-top: 40px;
}

/*--------------------------------------------------------------
 we develop
--------------------------------------------------------------*/
.we_develop-title h3{
 color: #333;
  font-weight: 700;
  font-size: 36px;
  font-family:"Pontiac",sans-serif;
  text-transform: capitalize;
}
.we_develop-title p {
    margin: 34px 0 47px;
    padding: 0 103px 0 0;
    color: #666;
}
.whate_we-left{
     display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: -50px;
}

.whate_we-left .img img{
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  box-shadow: 0 0 45px rgba(71,59,14,0.15);
  border-radius: 15px;
}
.whate_we-left .img {
    width: 150px;
}


.moblie_develop-single {
    margin-bottom: 25px;
}
.moblie_develop-single2{
    margin-top: 40px;
}

.we_devlop-content-single .icon i {
    font-size: 24px;
    color: #109BB4;
}

.we_devlop-content-single {
    z-index: 10;
    width: 100%;
    border: 1px solid #ccc;
    padding: 55px 0 55px 45px;
    background-color: #fff;
    transition: box-shadow 0.4s, border-color 0.4s, padding 0.6s;
    margin-bottom: 30px;
}
.we_devlop-content-single:hover {
    box-shadow: 0 0 59px rgba(255,78,0,0.19);
    border-color: #109BB4;
}
.we_devlop-content-single h2{
    color: #333;
      font-weight: 700;
      font-size: 18px;
      font-family: "Pontiac",sans-serif;
      line-height: 63px;
}
.content_single-des{
    overflow: hidden;
    width: 241px;
    max-height: 0;
    color: #666;
    font-style: italic;
    font-size: 16px;
     font-family: 'Fira Sans', sans-serif;
    transition: max-height 0.4s;
}
.we_devlop-content-single:hover .content_single-des {
    max-height: 150px;
}

/*--------------------------------------------------------------
 moblie soluction
--------------------------------------------------------------*/
.mobile_solution-tool{
    position: relative;
    overflow: hidden;
    z-index: 1;
}
.mobile_solution-tool::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0.95;
    width: 100%;
    height: 100%;
    background-color: transparent;
    z-index: -1;
}
.mobile_solution-tool .star-field {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    perspective: 600px;
    -webkit-perspective: 600px;
    z-index: -1;
}
.mobile_solution-left {
    text-align: center;
}
.mobile_solution-left h4{
    font-size: 24px;
    color: #fff;
    font-weight:700;
    text-align: center;
    padding: 60px 10px;
}
.mobile_solution-left p{
    font-size: 20px;
    font-style: italic;
    color:#807e7e;
}
.mobile_solution-right .service_tool-single {
    flex: 0 0 16.66667%;
    width: 16.66667%;
    max-width: 16.66667%;
    position: relative;
    opacity: 0.6;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 13px 0 20px;
    
}
.mobile_solution-right .service_tool-single .service_tool-icon img {
    display: block;
    width: auto;
    min-width: 50px;
    max-width: 55px;
    height: auto;
    min-height: 50px;
    max-height: 66px;
}
.border-top {
    border-top: 1px solid #8585854f !important;
}

/*--------------------------------------------------------------
 desing skill area
--------------------------------------------------------------*/
.project_design-skill{
    background-color: #fff;
} 
.project_example-title2 h3 {
    margin: 0 0 45px 0px;
}
.project_desgin-single{
    position: relative;
}

.project_desgin-single a img{
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
    
}

.design_overly {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}
.zoom {
    color: #109BB4;
    opacity: 1;
}
.project_desgin-single:hover a img {
  opacity: 0.3;
}

.project_desgin-single:hover .design_overly {
  opacity: 1;
}
/*handle project*/
.handle-project{
    background: url("../img/noise.png");
}


/*--------------------------------------------------------------
 service-work gallery
--------------------------------------------------------------*/
.work_gallery-service {
    width: 100%;
    margin: 155px 0 135px;
}
.work_gallery{
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.gallery-single img {
    width: 100%;
    height: auto;
    border: 3px solid #109BB4;
    border-radius: 50px;
}
/*--------------------------------------------------------------
 service_requirements
--------------------------------------------------------------*/
.requirements-heding-title h2 {
    width: 446px;
    color: #fff;
    font-weight: bold;
    font-size: 36px;
    font-family: "Pontiac",sans-serif;
    line-height: 42px;
}
.requirements-heding-title p {
    margin: 49px 0 0;
    color: #999;
    font-style: italic;
    font-weight: 200;
    font-size: 20px;
    font-family: "Fira Sans",serif;
}
.requirements-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 800px;
  margin: 50px 0 0;
  color: #fff;
  font-size: 24px;
  font-family: "Pontiac",sans-serif;
}
.requirement_title {
    display: inline-block;
    border: 1px solid #109BB4;
    padding: 30px 65px;
    font-size: inherit;
    font-weight: 700;
    color: #fff;
    margin: 0 0 68px;
}
.default-anchor {
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-align: center;
    align-items: center;
    margin: 16px 0 0;
    color: #109BB4;
    font-weight: 400;
    font-size: 18px;
    font-family: "Pontiac",sans-serif;
    line-height: 10px;
}
.anchor_btn2{
    font-size: 15px;
}
.default-anchor::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    margin-left: 8px;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid #109BB4;
}
.requirement-daigram {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex: 4 0 100%;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}
.requirement_splitter {
    position: relative;
    flex: 0 0 67%;
    width: 67%;
    max-width: 67%;
    margin: 0 auto;
}
.requirement_splitter::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: calc(100% + 2px);
    height: 2px;
    background-color: #109BB4;
    transition: transform 2s;
    transform: translateX(-50%) scale(0, 1);
}
.requirement_splitter::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 2px;
    height: 67px;
    background-color: #109BB4;
    transition: transform 1s;
    transform: translateX(-50%) scale(1, 0);
    transform-origin: top;
}
.requirement_splitter::before {
    animation: 0.5s linear forwards scale-in;
}
.requirement_splitter::after {
    animation: 1s linear 0.5s forwards scale-in;
}
.daigram_item-single{
    position: relative;
    display: flex;
    justify-content: center;
    flex: 0 0 33%;
    width: 33%;
    max-width: 33%;
    text-align: center;
}

.daigram_item-single{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    padding: 67px 0;
    transition: padding 0.4s;
    pointer-events: auto;
}

.daigram_item-single::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 67px;
    background-color: #109BB4;
    transition: height 0.4s, transform 1s;
    transform: translate(-50%) scale(1, 0);
    transform-origin: top;
}
.daigram_item-single::before {
    animation: 0.5s linear 1.5s forwards scale-in;
}
.daigram_item-name h5 {
    border: 1px solid #109BB4;
    padding: 12px 40px;
    display: inline-block;
}

/*--------------------------------------------------------------
 personal
--------------------------------------------------------------*/

.work_with-us {
    background-color: #fff;
    position: relative;
    z-index: 1;
    padding-top: 10px;
}
.work_with-us::before {
    position: absolute;
    top: -227px;
    left: 0;
    content: '';
    background-image: url('../img/service/service.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 234px;
    z-index: 999;
}
.personal-info {
    position: relative;
    display: flex;
    width: 100%;
    height: 480px;
}
.personal-details {
    position: absolute;
    bottom: 30px;
    left: 66%;
    z-index: 1;
    width: 100%;
}
.are_you-content-right .personal-details {
    right: 66%;
    left: auto;
    text-align: right;
}
.personal-details h5 {
    display: block;
    color: #109BB4;
    font-weight: 700;
    font-size: 18px;
    font-family: "Pontiac",sans-serif;
}
.personal-details p{
    color: #666;
    display: inline-block;
}
.personal-img{
    height: 100%;
}
.personal-img img {
    display: block;
    width: auto;
    height: 100%;
}
.work_with-header h3 {
    font-size: 42px;
    color: #000;
    font-weight: 400;
    text-align: center;
    padding-bottom: 20px;
}
.work_with-header h3 span {
    color: #109BB4;
}
.work_with-header p {
    color: #666;
    padding-bottom: 40px;
    text-align: center;
}

/*--------------------------------------------------------------
 modinaztion page
--------------------------------------------------------------*/
.main_offers{
    position: relative;
}
.main_offers::after {
    position: absolute;
    bottom: -57px;
    left: 0;
    content: '';
    background-image: url('../img/why/bottom.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 133px;
    z-index: 3;
}
.modinaizer-content {
    padding: 240px 0;
    width: 40%;
    text-align: left;
    margin-left: 8.33333%;
}
.modinaizer-content h2 {
    font-size: 83px;
    font-weight: 700;
    color: #fff;
    font-family: "Pontiac",sans-serif;
    line-height: 112px;
}
.modinaizer-content h5 {
    font-size: 36px;
    font-weight: 400;
    color: #109BB4;
    margin-bottom: 40px;
    margin-top: 20px;
}
.modi_btn {
    max-width: 337px;
    margin: 20px 0;
    text-align: start;
}
.modinaizer-img {
    position: absolute;
    right: 3%;
    bottom: -67px;
    z-index: -1;
    width: 60%;
    max-width: 1036px;
    height: auto;
}
.modinaizer-img img{
    width: 100%;
    height: auto;
}

/*--------------------------------------------------------------
what_we-offer
--------------------------------------------------------------*/
.main_offers{
    position: relative;
    z-index: 1;
    padding: 39px 0 90px 0;
}

.we_offer-content p{
    font-size: 24px;
    color: #333;
    line-height: 2;
    font-size: 24px;
   font-family: 'Fira Sans', sans-serif;
}
.we_offer-content h3 {
    font-weight: 700;
    font-size: 32px;
    padding: 13px 12.5% 0 0;
    color: #333;
}



/*--------------------------------------------------------------
modernization table
--------------------------------------------------------------*/
.expart-title h2{
    color: #333;
}
.modernization-single {
    opacity: 1;
    border: 1px solid #109BB4;
    border-radius: 15px;
    padding: 26px 27px 60px 36px;
    background-color: #fff;
    transition: opacity .5s,transform .25s;
    width: 80%;
    margin: 0 auto;
}
.modernization-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
}
.modernization-des p{
    margin-bottom: 33px;
    font-size: 19px;
    line-height: 28px;
    color: #333;
}
.modernization-top .title h4 {
    color: #109BB4;
    font-size: 26px;
    font-family: "Pontiac",sans-serif;
}
.modernization-top .icon i {
    color: #109BB4;
    font-size: 68px;
}
.modernization-list .modernization_list-title{
  font-weight: 700;
  font-size: 18px;
  font-family: "Pontiac",sans-serif;
  line-height: 25px;
  color: #333;
}

.modernization-list ul{
    padding: 18px 40px 18px 22px;
}
.modernization-list li {
    position: relative;
    font-size: 20px;
    line-height: 28px;
    color: #333;
}
.modernization-list li::before {
    content: '\f00c';
    position: absolute;
    top: 4px;
    right: calc(100% + 13px);
    width: 16px;
    height: 16px;
    font-family: "Font Awesome 5 Free";
    font-weight: 700;
    display: block;
    color: #109BB4;
    font-size: 14px;
}


/*--------------------------------------------------------------
modernization__why
--------------------------------------------------------------*/

.modernization__why {
    padding-top: 126px;
    position: relative;
}
.why-single {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 5%;
    width: 100%;
    margin: 0 auto;
    padding-bottom: 112px;
}
.why-single .icon img{
    width: 100%;
    height: auto;
}
.why-content {
    padding-left: 22px;
}
.why-single .why-content p{
    color: #fff;
    font-size: 24px;
    line-height: 40px;
}
.why-single .icon i {
    font-size: 85px;
    font-weight: 700;
    color: #109BB4;
}

/*startup area*/
.startup-box {
    position: relative;
    display: flex;
    justify-content: space-between;
    margin: 0 -1px;
    border-top: 1px solid #109BB4;
    padding: 4%;
    background-image: linear-gradient(#109BB4, transparent),linear-gradient(#109BB4, transparent);
    background-position: 0 0, 100% 0;
    background-size: 1px 100%;
    background-repeat: no-repeat;
}
.startup_mask {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    opacity: 0.15;
    background: linear-gradient(#109BB4, transparent);
}
.startup-list ul li {
    font-size: 18px;
    font-weight: 300;
    color: #fff;
    font-family: 'Fira Sans', sans-serif;
    display: flex;
    align-items: center;
    color: #fff;
    margin-bottom: 50px;
    position: relative;
}
.startup-list {
    margin-left: 3%;
}
.startup-list ul li::before {
    content: '\f14a';
    position: absolute;
    top: -8px;
    right: calc(100% + 8px);
    font-family: "Font Awesome 5 Free";
    font-weight: 700;
    display: block;
    color: #109BB4;
    font-size: 29px;
    margin-right: 16px;
}

.modernization-list li::before {
    content: '\f00c';
    position: absolute;
    top: 4px;
    right: calc(100% + 13px);
    width: 16px;
    height: 16px;
    font-family: "Font Awesome 5 Free";
    font-weight: 700;
    display: block;
    color: #109BB4;
}
.startup-box .startup_img {
    align-self: flex-start;
    max-width: 35%;
    object-fit: scale-down;
    object-position: top;
}


/*--------------------------------------------------------------
startup-dna
--------------------------------------------------------------*/
.startup_dna-box {
    position: relative;
    border-top: 1px solid #109BB4;
    padding: 26px 20px 20px;
    background-image: linear-gradient(#109BB4, transparent),linear-gradient(#109BB4, transparent);
    background-position: 0 0, 100% 0;
    background-size: 1px 100%;
    background-repeat: no-repeat;
    color: #fff;
    text-align: center;
    min-height: 500px;
}
.startup_dna-box.startup_dna-box_center {
    height: 100%;
}

.startup_dna-box_center_container {
    display: -ms-flexbox;
    display: flex;
    margin: 35px 0;
}
.dna-box_center__item {
    width: 50%;
    padding: 0 20px;
}

.startup_dna-box_img img {
    width: 100%;
    height: auto;
    max-width: 401px;
    opacity: 0.5;
    position: absolute;
    right: 0;
    bottom: 7%;
}

.dna-box_center__item:first-child {
    border-right: 1px solid #109BB4;
}
.startup_dna-side{
    margin-top: 110px;
}
.startup_dna_mask {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background-image: linear-gradient(45deg, transparent 15%, rgba(255,78,0,0.2) 100%);
}

.startup_dna-box .dna-head h6{
  font-family: "Pontiac",sans-serif;
  line-height: 1.5;
  font-weight: 200;
  color:#109BB4;
  font-size: 16px;
}
.startup_dna-box_center .dna-head h6{
    font-size: 42px;
    font-weight: 700;
  font-family: "Pontiac",sans-serif;
  line-height: 1.5;
  font-style: normal;
}
.startup_dna-box .dna-head h4{
    position: relative;
    padding-top: 10px;
    padding-bottom: 7px;
    font-size: 28px;
}
.startup_dna-box .dna-head h4::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 70px;
    height: 1px;
    margin-left: calc(50% - 35px);
    border-top: 1px solid #109BB4;
}
.startup_dna-box .dna-head p{
    font-family: "Pontiac",sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #fff;
}

.startup_dna-box .dna-content{
    padding-top: 28px;
}

.startup_dna-box .dna-content h5{
    padding-bottom: 22px;
    font-weight: 700;
}

.startup_dna-box .dna-content ul li {
    padding-bottom: 6px;
    font-family: 'Fira Sans', sans-serif;
}
.startup_dna-box .dna-content ul li span{
  padding-right: 3px;
  color: #109BB4;
}
.border_box-bottom {
    position: relative;
    background-image: linear-gradient(to right, #109BB4, #ff7f00);
    border-bottom: 1px solid #109BB4;
}
.border_box-bottom::before {
    content: "";
    position: absolute;
    top: -4px;
    left: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #109BB4;
}
.border_box-bottom::after {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #109BB4;
    content: "";
    position: absolute;
    top: -4px;
    right: 0;
}

.why_title{
    position: relative;
}
.why_title::before {
    position: absolute;
    content: '';
    top: -51px;
    right: -75px;
    background: url('../img/service/question-mark.png');
    width: 69px;
    height: 94px;
    background-size: contain;
    background-repeat: no-repeat;
}
.creative_info-items ul{
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    font-size: 20px;
    font-family: "Pontiac",sans-serif;
}

.creative_info-items ul li {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 0 1 calc(25% + 1px);
    flex: 0 1 calc(25% + 1px);
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    width: calc(25% + 1px);
    min-height: 140px;
    margin-top: -1px;
    margin-right: -1px;
    border: 1px solid #109BB4;
    padding: 10px;
    text-align: center;
    transition: border-color 0.3s ease;
}


.creative_info-items{
    position: relative;
} 
.creative_info-items ul li p {
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
}

.creative_info-items ul li ::before, .creative_info-items ul li ::after {
    content: '';
    position: absolute;
    right: -1px;
    bottom: -1px;
    z-index: 1;
    background-color: transparent;
    transition: background-color 0.3s ease;
}
.creative_info-items ul li ::before {
    width: calc(100% + 2px);
    height: 1px;
}
.creative_info-items ul li::after {
    width: 1px;
    height: calc(100% + 2px);
}
.creative_info-items-musk {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background-image: linear-gradient(45deg, transparent 15%, rgba(255,78,0,0.2) 100%);
}
/*--------------------------------------------------------------
modernization-tool
--------------------------------------------------------------*/
.container_technology{
    max-width: 1300px;
}

.modernization_tools-area{
    position: relative;
}
.modernization_tool-single {
  padding: 40px 10px;
   height: 100%;
}

.modernization_tool-single2{
    background-image: none;
}
.modernization_tool-single2 .modernization_tool-nav {
    grid-template-columns: 1fr;
    place-items: center;
}
.modernization_tool-single .title {
    margin-bottom: 28px;
    color: #109BB4;
    font-weight: 100;
    font-size: 26px;
    font-family: "Pontiac",sans-serif;
    line-height: 32px;
    text-align: center;
} 
.modernization_tool-nav{
    display: grid;
    grid-template-columns: 1fr 1fr;
    place-items: center;
    position: relative;
    height: 100%;
}
 .modernization_tool-nav:not(:first-child)::before {
    content: '';
    position: absolute;
    top: -10%;
    bottom: 0;
    left: 0;
    width: 1px;
    height: 120%;
    background-image: linear-gradient(to top, #109BB4 0%, #109BB4 1px, transparent 1px);
    background-position: left 0;
    background-size: 1px 8%;
    background-repeat: repeat-y;
}

.modernization_tool-nav::before:first-child{
   background-image: none;
}
.modernization_tool-nav li {
    
    margin-bottom: 5px;
   
}

.modernization_tool-nav li img {
    max-width: 60px;
    width: 100%;
    height: auto;
    max-height: 100%;
}
/*--------------------------------------------------------------
insight_detail-area
--------------------------------------------------------------*/
.insight_detail-area{
    padding-top:90px;
    padding-bottom: 10px;
    background-color: #fff;
    position: relative;
}
.insight_detail-area::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: -127px;
    left: 0;
    opacity: 1;
    background-image: url("../img/insight/in_detail.png");
    background-position: 50% 50%;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 226px;
    z-index: 2;
}
.insight_video_filter{
    margin: 0 15px;
}
.insight_video-filter-item{
    margin: 0 15px;
}
.insight_video-single {
    margin: 15px;
}
.insight_video-single a {
    position: relative;
    display: flex;
    width: 100%;
    box-shadow: rgba(0, 0, 0, 0.09) 0px 5px 18px -1px;
    margin-bottom: 25px;
    border: 2px solid transparent;
    border-radius: 10px;
    background-color: rgb(255, 255, 255);
    pointer-events: auto;
    align-items: center;
    align-self: center;
    padding: 22px;
}
.insight_video-single a .img {
    position: relative;
    flex: 0 0 30%;
    width: 30%;
    margin-right: 5%;
}
.insight_video-single a .img img{
    width: 100%;
    height: auto;
}
.insight_video-single .video_content{
    flex: 1 0 auto;
    max-width: 65%;
    font-weight: bold;
    font-size: 13px;
    line-height: 18px;
    color: #000;
}
.in_detail-button a {
    display: block;
    margin-bottom: 28px;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    position: relative;
    color: #000;
    padding-left: 21px;
}
.in_detail-button a::before {
    position: absolute;
    content: '';
    display: inline-block;
    margin-right: 25px;
    border-top: 9px solid transparent;
    border-right: 9px solid #109BB4;
    border-bottom: 9px solid transparent;
    left: 0px;
    top: 4px;
}
.insight_video_filter h4{
    margin-bottom: 16px;
  font-weight: 700;
  font-size: 16px;
  color: #000;
}
.insight_video-filter-item span{
 display: inline-flex;
  margin-right: 16px;
  font-size: 14px;
  color: #000;
}
.insight_total-related {
    padding-top: 40px;
    margin: 0 15px;
}
.insight_total-related p {
    font-size: 16px;
     color: #000;
     font-weight: 400;
}
.active_video a{
    border:1px solid #109BB4;
}
.video_btn{
    max-width: 80.667%;
    margin: 20px 0 120px;
}
.all_related_video .mCSB_scrollTools .mCSB_draggerRail {
    display: none;
}
/*--------------------------------------------------------------
product desing
--------------------------------------------------------------*/

.product_design-work{
    background-color: #fff;
    position: relative;
}
.product_design-work::before {
    position: absolute;
    content: '';
    width: 100%;
    height: 210px;
    top: -133px;
    left: 0;
    background: url('../img/design/topbg.png');
}
.product_desing-single{
    display: flex;
    flex-direction: column;
    padding: 0 45px;
    transition: transform 0.4s ease-out;
    cursor: pointer;
    border: 1px solid #ccc;
    padding: 45px 45px 57px;
    transition: transform 0.4s ease-out, box-shadow 0.5s ease-in-out;
}
.product_desing-single:hover {
    transform: translateY(-15px);
    box-shadow: 0 0 59px 0 rgba(255,78,0,0.19);
    border: 1px solid #109BB4;
}
.product_header .title h3 {
    font-size: 18px;
    padding-top: 6px;
}
.product_header .icon span {
    font-weight: 700;
    font-size: 60px;
    opacity: .5;
    -webkit-text-stroke: 1px #109BB4;
    -webkit-text-fill-color: transparent;
    line-height: 60px;
}

.description-item {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    padding: 28px 0;
    color: #666;
    font-size: 14px;
}

.description-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #ccc;
}
.description-item:first-child::after {
    display: none;
}
.description-item .item-title {
    display: inline-block;
    flex: 1.2;
    font-family: "Pontiac",sans-serif;
    color: #109BB4;
}
.description-item .item-des  {
    display: inline-block;
    flex: 3;
    font-style: italic;
}
.product_desing-single_bottom {
    padding: 46px 33px 32px;
    margin-bottom: 33px;
}
.description-item_bottom {
    padding: 18px 0;
    display: block;
}
.product_header .icon img {
    max-width: 58px;
    height: auto;
}
.border-right{
    border-right: 1px solid #ccc;
}
.design_bottom-title{
    margin-bottom: 40px;
}
.design_bottom-title h3 {
    position: relative;
    display: inline-block;
}
.design_bottom-title h3::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: -3px;
    left: 0;
    height: 5px;
    margin: auto;
    background-image: url("../img/banner/wave.png");
    background-position: left bottom;
    background-size: contain;
    background-repeat: repeat-x;
}
/*--------------------------------------------------------------
developer slider
--------------------------------------------------------------*/
.dev_slider-two{
    background-color: #fff;
    padding-top: 80px;
}
.dev_single-item {
    position: relative;
    opacity: 1;
    display: flex;
    flex: 0 0 100%;
    width: 100%;
    transition: opacity 500ms ease 0s;
}

.dev_img-avatar {
    position: relative;
    opacity: 1;
    flex: 0 0 50%;
    transition: all 0.3s;
}
.dev_img-avatar::after {
    content: '“';
    position: absolute;
    top: 50%;
    right: -7%;
    color: #109BB4;
    font-weight: 900;
    font-size: 250px;
    line-height: 125px;
    transform: translate(-50%, 0);
}
.dev_img-avatar img{
    width: 100%;
    height: auto;
}
.dev_all-content {
    display: flex;
    flex: 0 0 50%;
    flex-direction: column;
    justify-content: center;
}
.dev_all-content p{
  font-size: 18px;
  color: #999;
  font-style: italic;
  font-size: 20px;
  line-height: 1.5em;
}
.dev_all-content .author_name{
    color: #000;
    font-weight: 700;
    padding-top: 65px;
    font-size: 24px;
    font-family: "Pontiac",sans-serif;
}

.dev_all-content .author_des{
    color: #333;
    font-weight: 400;
    padding-top: 15px;
    font-size: 24px;
    font-family: "Pontiac",sans-serif;
}

.dev-slider .owl-dots {
    display: flex;
    justify-content: center;
    position: absolute;
    left: 40%;
    right: 0;
    margin: 0 auto;
    bottom: 5%;
}
.dev-slider .owl-dots .owl-dot {
    margin: 2px 8px;
    border: 0;
    background: none;
    cursor: pointer;
}
.dev-slider .owl-dots .owl-dot span::after {
    position: absolute;
    content: "";
    top: -4px;
    left: -4px;
    border: 1px solid #ed4700;
    box-shadow: 0 0 0 3px rgba(255,78,0,0.21);
    border-radius: 50%;
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.dev-slider .owl-dots .owl-dot span {
    display: block;
    border-radius: 50%;
    background-color: #a6a6a6;
    width: 8px;
    height: 8px;
    position: relative;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.dev-slider .owl-dots .owl-dot.active span{
    background-color: #ed4700;
}
.dev-slider .owl-dots .owl-dot.active span::after {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
     transform: scale(1); 
}
.dev-slider .owl-nav {
    position: absolute;
    content:'' ;
    left: 40%;
    right: 0;
    margin: 0 auto;
    bottom: 9%;
    text-align: center;
}

.dev-slider .owl-nav .owl-prev {
    position: absolute;
    content: '';
    left: 40%;
    color: #109BB4;
    font-size: 18px;
     z-index: 99;
     border: none;
     outline: none;
     background: none;
}
.dev-slider .owl-nav .owl-next {
    position: absolute;
    content: '';
    right: 40%;
    color: #109BB4;
    font-size: 18px;
    z-index: 99;
    border: none;
    outline: none;
    background: none;
}
.dev-slider.owl-theme .owl-nav [class*="owl-"]:hover {
	background: transparent;
	color: #FF7133;
	text-decoration: none;
}
/*--------------------------------------------------------------
faq-question
--------------------------------------------------------------*/
.question-faq{
    background-color: #fff;
    position: relative;
    z-index: 1;
}
.question-faq .accordion-button {
    background-color: transparent;
    color: #1a1a1a;
    font-size: 21px;
    width: 100%;
    display: block;
}
.question-faq .accordion-button::after {
    display: none;
}

.question-faq .accordion-item {
    background-color: transparent;
    border-bottom: 1px solid rgba(255, 78, 0, 0.37);
}
.accordion-flush .accordion-item:first-child {
    border-top:1px solid rgba(255, 78, 0, 0.37);
}
.accordion-button:not(.collapsed) {
    color: #109BB4;
    background-color: transparent;
    box-sizing: border-box;
    box-shadow: none;
}
.accordion-button:focus{
    box-shadow: none;
    outline: none;
}

/*--------------------------------------------------------------
small word
--------------------------------------------------------------*/
.desing_small-word{
    position: relative;
    z-index: 1;
    background-size: 0;
}
.desing_small-word::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: '';
    opacity: 0.1;
    background-image: inherit;
    background-position: 50%;
    background-size: cover;
    background-repeat: no-repeat;
    pointer-events: none;
}
.small_word-single{
    display: flex;
  flex-direction: column;
  align-items: center;
}
.small_word-single .img img {
    max-width: 90px;
    height: auto;
}
.small_word-single h5 {
    max-width: 75%;
    padding-top: 40px;
    font-size: 18px;
    color: #fff;
}

/*--------------------------------------------------------------
404
--------------------------------------------------------------*/
.error-page{
  background: #000;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1000px;
 font-family: 'Roboto', sans-serif;
}
.wall,
.box,
.forward,
.world,
.stamp,
.rail {
  transform-style: preserve-3d;
}

.rail {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: rotateX(-30deg) rotateY(-30deg);
}
.rail .stamp {
  position: absolute;
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #141414;
  color: #fff;
  font-size: 7rem;
}
.rail .stamp:nth-child(1) {
  -webkit-animation: stampSlide 40000ms -2300ms linear infinite;
          animation: stampSlide 40000ms -2300ms linear infinite;
}
.rail .stamp:nth-child(2) {
  -webkit-animation: stampSlide 40000ms -4300ms linear infinite;
          animation: stampSlide 40000ms -4300ms linear infinite;
}
.rail .stamp:nth-child(3) {
  -webkit-animation: stampSlide 40000ms -6300ms linear infinite;
          animation: stampSlide 40000ms -6300ms linear infinite;
}
.rail .stamp:nth-child(4) {
  -webkit-animation: stampSlide 40000ms -8300ms linear infinite;
          animation: stampSlide 40000ms -8300ms linear infinite;
}
.rail .stamp:nth-child(5) {
  -webkit-animation: stampSlide 40000ms -10300ms linear infinite;
          animation: stampSlide 40000ms -10300ms linear infinite;
}
.rail .stamp:nth-child(6) {
  -webkit-animation: stampSlide 40000ms -12300ms linear infinite;
          animation: stampSlide 40000ms -12300ms linear infinite;
}
.rail .stamp:nth-child(7) {
  -webkit-animation: stampSlide 40000ms -14300ms linear infinite;
          animation: stampSlide 40000ms -14300ms linear infinite;
}
.rail .stamp:nth-child(8) {
  -webkit-animation: stampSlide 40000ms -16300ms linear infinite;
          animation: stampSlide 40000ms -16300ms linear infinite;
}
.rail .stamp:nth-child(9) {
  -webkit-animation: stampSlide 40000ms -18300ms linear infinite;
          animation: stampSlide 40000ms -18300ms linear infinite;
}
.rail .stamp:nth-child(10) {
  -webkit-animation: stampSlide 40000ms -20300ms linear infinite;
          animation: stampSlide 40000ms -20300ms linear infinite;
}
.rail .stamp:nth-child(11) {
  -webkit-animation: stampSlide 40000ms -22300ms linear infinite;
          animation: stampSlide 40000ms -22300ms linear infinite;
}
.rail .stamp:nth-child(12) {
  -webkit-animation: stampSlide 40000ms -24300ms linear infinite;
          animation: stampSlide 40000ms -24300ms linear infinite;
}
.rail .stamp:nth-child(13) {
  -webkit-animation: stampSlide 40000ms -26300ms linear infinite;
          animation: stampSlide 40000ms -26300ms linear infinite;
}
.rail .stamp:nth-child(14) {
  -webkit-animation: stampSlide 40000ms -28300ms linear infinite;
          animation: stampSlide 40000ms -28300ms linear infinite;
}
.rail .stamp:nth-child(15) {
  -webkit-animation: stampSlide 40000ms -30300ms linear infinite;
          animation: stampSlide 40000ms -30300ms linear infinite;
}
.rail .stamp:nth-child(16) {
  -webkit-animation: stampSlide 40000ms -32300ms linear infinite;
          animation: stampSlide 40000ms -32300ms linear infinite;
}
.rail .stamp:nth-child(17) {
  -webkit-animation: stampSlide 40000ms -34300ms linear infinite;
          animation: stampSlide 40000ms -34300ms linear infinite;
}
.rail .stamp:nth-child(18) {
  -webkit-animation: stampSlide 40000ms -36300ms linear infinite;
          animation: stampSlide 40000ms -36300ms linear infinite;
}
.rail .stamp:nth-child(19) {
  -webkit-animation: stampSlide 40000ms -38300ms linear infinite;
          animation: stampSlide 40000ms -38300ms linear infinite;
}
.rail .stamp:nth-child(20) {
  -webkit-animation: stampSlide 40000ms -40300ms linear infinite;
          animation: stampSlide 40000ms -40300ms linear infinite;
}

@-webkit-keyframes stampSlide {
  0% {
    transform: rotateX(90deg) rotateZ(-90deg) translateZ(-200px) translateY(130px);
  }
  100% {
    transform: rotateX(90deg) rotateZ(-90deg) translateZ(-200px) translateY(-3870px);
  }
}

@keyframes stampSlide {
  0% {
    transform: rotateX(90deg) rotateZ(-90deg) translateZ(-200px) translateY(130px);
  }
  100% {
    transform: rotateX(90deg) rotateZ(-90deg) translateZ(-200px) translateY(-3870px);
  }
}
.world {
  transform: rotateX(-30deg) rotateY(-30deg);
}
.world .forward {
  position: absolute;
  -webkit-animation: slide 2000ms linear infinite;
          animation: slide 2000ms linear infinite;
}
.world .box {
  width: 200px;
  height: 200px;
  transform-origin: 100% 100%;
  -webkit-animation: roll 2000ms cubic-bezier(1, 0.01, 1, 1) infinite;
          animation: roll 2000ms cubic-bezier(1, 0.01, 1, 1) infinite;
}
.world .box .wall {
  position: absolute;
  width: 200px;
  height: 200px;
  background: rgba(10, 10, 10, 0.8);
  border: 1px solid #fafafa;
  box-sizing: border-box;
}
.world .box .wall::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 7rem;
}
.world .box .wall:nth-child(1) {
  transform: translateZ(100px);
}
.world .box .wall:nth-child(2) {
  transform: rotateX(180deg) translateZ(100px);
}
.world .box .wall:nth-child(3) {
  transform: rotateX(90deg) translateZ(100px);
}
.world .box .wall:nth-child(3)::before {
  transform: rotateX(180deg) rotateZ(90deg) translateZ(-1px);
  -webkit-animation: zeroFour 4000ms -2000ms linear infinite;
          animation: zeroFour 4000ms -2000ms linear infinite;
}
.world .box .wall:nth-child(4) {
  transform: rotateX(-90deg) translateZ(100px);
}
.world .box .wall:nth-child(4)::before {
  transform: rotateX(180deg) rotateZ(-90deg) translateZ(-1px);
  -webkit-animation: zeroFour 4000ms -2000ms linear infinite;
          animation: zeroFour 4000ms -2000ms linear infinite;
}
.world .box .wall:nth-child(5) {
  transform: rotateY(90deg) translateZ(100px);
}
.world .box .wall:nth-child(5)::before {
  transform: rotateX(180deg) translateZ(-1px);
  -webkit-animation: zeroFour 4000ms linear infinite;
          animation: zeroFour 4000ms linear infinite;
}
.world .box .wall:nth-child(6) {
  transform: rotateY(-90deg) translateZ(100px);
}
.world .box .wall:nth-child(6)::before {
  transform: rotateX(180deg) rotateZ(180deg) translateZ(-1px);
  -webkit-animation: zeroFour 4000ms linear infinite;
          animation: zeroFour 4000ms linear infinite;
}

@-webkit-keyframes zeroFour {
  0% {
    content: "4";
  }
  100% {
    content: "0";
  }
}

@keyframes zeroFour {
  0% {
    content: "4";
  }
  100% {
    content: "0";
  }
}
@-webkit-keyframes roll {
  0% {
    transform: rotateZ(0deg);
  }
  85% {
    transform: rotateZ(90deg);
  }
  87% {
    transform: rotateZ(88deg);
  }
  90% {
    transform: rotateZ(90deg);
  }
  100% {
    transform: rotateZ(90deg);
  }
}
@keyframes roll {
  0% {
    transform: rotateZ(0deg);
  }
  85% {
    transform: rotateZ(90deg);
  }
  87% {
    transform: rotateZ(88deg);
  }
  90% {
    transform: rotateZ(90deg);
  }
  100% {
    transform: rotateZ(90deg);
  }
}
@-webkit-keyframes slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-200px);
  }
}
@keyframes slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-200px);
  }
}
/*login page*/
.login-page{
    background-color: #fff;
}
.login-form{
    padding: 60px 25%;
}

/*--------------------------------------------------------------
partanar
--------------------------------------------------------------*/
.partnar_button {
    width: 60.667%;
    text-align: start;
    margin: 40px 0;
    max-width: 500px;
}

.partanar-header_icon ul li{
    display: inline-block;
    padding: 20px 20px 0;
}
.partanar-header_icon ul li img {
    max-width: 86px;
    height: auto;
}


/*essential partanership*/
.partnar_essential-area{
    background-color: #fff;
    position: relative;
    z-index: 1;
}
.partnar_essential-area::before {
    position: absolute;
    content: '';
    width: 100%;
    height: 160px;
    top: -103px;
    background: url('../img/partnership/top.png');
    z-index: 3;
    background-position: center;
     background-size: cover; 
    background-repeat: no-repeat;
}
.partnar_essential-area::after{
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top:0;
    left: 0;
    opacity: 0.2;
    background: url('../img/partnership/world.png');
    z-index: -1;
    background-position: center;
     background-size: cover; 
    background-repeat: no-repeat;
}
.partnarship-heading{
    padding-bottom: 80px;
    display: block;
    text-align: center;
}
.partnarship-heading h2{
  color: #333;
  font-weight: 700;
  font-family: "Pontiac",sans-serif;
  line-height: 1.5;
  font-size: 42px;
}
.essential-left {
    width: 80%;
    margin: 0 auto;
}
.essential-left .essential-head h3{
  font-size: 32px;
  padding-bottom: 34px;
  letter-spacing: 0;
   color: #333;
  font-weight: 400;
  font-family: "Pontiac",sans-serif;
  line-height: 1.5;
}
.essential_des-nav ul li,
.essential-left .essential-description p{
  color: #333;
  font-family: 'Fira Sans', sans-serif;
  font-size: 22px;
  font-weight: 300;
}
.essential_des-nav ul li{
  letter-spacing: 0;
  list-style-type: disc;
  list-style-position: inside;
}
.essential_key{
    margin-top: 0px;
}
.essential_key p,
.essential_key h3{
    color:#333;
}

/*--------------------------------------------------------------
partnarship-skill
--------------------------------------------------------------*/
.partnership_skill-area{
    overflow: hidden;
}
.partnar_skill-heading h2 {
    font-size: 42px;
    color: #fff;
    font-weight: 700;
    font-family: "Pontiac",sans-serif;
    line-height: 1.5;
    width: 80%;
}
.partnership_skil-navs{
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
}
.partnership_skill-list h4{
    color: #fff;
      font-weight: 500;
      font-size: 18px;
      line-height: 40px;
      font-family: 'Fira Sans', sans-serif;
}
.partnership_skill-list ul li {
    color: #fff;
    font-weight: 300;
    font-size: 18px;
    line-height: 40px;
    list-style: circle inside;
}
.partnership_skill-list ul li::marker {
    color: #109BB4;
}
.our_partnership-tool{
  display: flex;
  flex-wrap: wrap;
  width: 380px;
  margin-top: 23px;
}
.partnership_tool-single {
  display: flex;
  flex-direction: column;
  flex: 1 1 70px;
  margin: 0 10px 25px;
}
.partnership_tool-single .img{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  border: 1px solid #9b9b9b;
}
.partnership_tool-single .img img{
    width: 50%;
    height: 50%;
    filter: grayscale(100%);
}
.partnership_tool-single span {
    padding-top: 10px;
    color: #F0F0F0;
    font-size: 14px;
    letter-spacing: 0;
    text-align: center;
}


.partnership__competencies__content--right {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex: 2;
    flex: 2;
    width: auto;
    margin-top: 4%;
}
.partnership_skill-area .hex--big-bg-bg {
    height: 762px;
    width: 678px;
    background-image: url("../img/partnership/neumorphic-hexagon-big-3.png");
    background-repeat: no-repeat;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
}
.partnership_skill-area .hex--big-bg {
    width: 500px;
    height: 562px;
    background-image: url("../img/partnership/neumorphic-hexagon-big-2.png");
    background-repeat: no-repeat;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
}
.partnership_skill-area .hex--big {
    width: 382px;
    height: 430px;
    background-image: url("../img/partnership/neumorphic-hexagon-big.png");
    background-repeat: no-repeat;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
}
.partnership_skill-area .hex--big div:first-of-type::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 2px;
    background-color: #109BB4;
    transform: translate(85px, -100px);
}
.partnership_skill-area .hex--big div:first-of-type {
    height: 50%;
    text-align: center;
    border-right: 2px solid #109BB4;
}
.partnership_skill-area .hex--big div:first-of-type {
    text-align: center;
}
.partnership_skill-area .hex--big div {
    width: 50%;
}

.partnership_skill-area .hex--big div:first-of-type::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 2px;
    background-color: #109BB4;
    transform: translate(85px, -104px);
}
.partnership_skill-area .list-item {
    color: #fff;
    font-weight: normal;
    font-size: 16px;
    line-height: 30px;
    margin-left: 16px;
    margin-top: 6px;
}
.partnership_skill-area .list-item::before {
    content: "";
    position: absolute;
    width: 10px;
    height: 2px;
    background-color: #109BB4;
    transform: translate(-18px, 12px);
}
.partnership_skill-area .hex__container--vertical {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    transform: translate(-52px, 24px);
}
.partnership_skill-area .hex__container--horizontal {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 450px;
    height: 186px;
    transform: translate(-32px, -64px);
}
.partnership_skill-area .hex--small {
    width: 165px;
    height: 195px;
    background-image: url("../img/partnership/neumorphic-hexagon-small.png");
    background-repeat: no-repeat;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
}
.partnership_skill-area .hex--small:nth-of-type(1) {
    transform: translate(-100px, 60px);
    width: 605px;
}
.partnership_skill-area .hex--small:nth-of-type(1) h4, .partnership_skill-area .hex--small:nth-of-type(1) h3 {
    transform: translateY(-5px);
}
.partnership_skill-area .hex--small:nth-of-type(2) h4, .partnership_skill-area .hex--small:nth-of-type(2) h3 {
    width: 46%;
    transform: translateY(-40px);
}
.partnership_skill-area .hex--small h4 {
    width: 66%;
}
.partnership_skill-area .hex--small:nth-of-type(2) {
    width: 1000px;
    height: 395px;
    background-image: url("../img/partnership/neumorphic-hexagon-small-with-bg.png");
    transform: translateX(-60px);
}
.partnership_skill-area .hex--medium {
    width: 273px;
    height: 306px;
    background-image: url("../img/partnership/neumorphic-hexagon-medium.png");
    background-repeat: no-repeat;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    z-index: 2;
}
.partnership_skill-area .hex--medium div {
    width: 50%;
}
.partnership_skill-area .hex--medium div:first-of-type {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    height: 47%;
    text-align: center;
    border-right: 2px solid #109BB4;
}
.partnership_skill-area .hex--medium div:first-of-type::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 2px;
    background-color: #109BB4;
    transform: translate(125px, 1px);
}
.header--size-5 {
    font-size: 18px;
}
.header--size-3 {
    font-size: 30px;
}
.header--light-color {
    color: #fff;
}
.header--size-2 {
    font-size: 40px;
}
.title-skill-partner{
    color: #333;
    font-weight: 700;
    font-family: "Pontiac",sans-serif;
    line-height: 1.5;
}
.header__accent {
    color: #109BB4;
}
/*--------------------------------------------------------------
recommendation-partnership
--------------------------------------------------------------*/
.recommendation-partnership{
    padding-top: 100px;
}
.recommendation-partnership .recom-img img{
    width: 100%;
    height: auto;
}

.recom-single {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    margin-top: 75px;
}
.recom-single .recom_single-img{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin-right: 20px;
}
.recom-single .recom_single-img .recom_second-img {
    position: absolute;
    top: 70px;
}
.recom-single .recom_single-img span {
    position: absolute;
    color: #109BB4;
    font-family: "Pontiac",sans-serif;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 0;
}
.recom-single .step_label {
    color: #fff;
    font-family: "Pontiac",sans-serif;
    font-size: 30px;
    letter-spacing: 0;
    line-height: 32px;
}

/*step think*/
.all_partnership-think {
    display: flex;
    overflow-x: auto;
    padding-bottom: 20px;
    text-align: center;
    margin: 0 auto;
}
.think_step-arrow {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 400px;
    height: 100px;
}
.step_think-label {
    position: relative;
    z-index: 1;
    color: #fff;
    font-family: "Pontiac",sans-serif;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 0;
    text-align: start;
    padding: 0 60px;
    white-space: nowrap;
}
.think_step-shape {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    background: #109BB4;
    -webkit-clip-path: polygon(calc(100% - 40px) 0, 100% 50%, calc(100% - 40px) 100%, 0 100%, 40px 50%, 0 0);
    clip-path: polygon(calc(100% - 40px) 0, 100% 50%, calc(100% - 40px) 100%, 0 100%, 40px 50%, 0 0);
}
.think_step-shape_1{
    transform: translateX(0);
    clip-path: polygon(calc(100% - 40px) 0, 100% 50%, calc(100% - 40px) 100%, 0 100%, 0 50%, 0 0);
}
.think_step-shape_2{
    transform: translateX(-20px);
    opacity: 0.7;
}
.think_step-shape_3 {
    transform: translateX(-40px);
    opacity: 0.5;
}
.think_step-shape_4 {
    transform: translateX(-60px);
    opacity: 0.3;
}
.think_step-single .think_desc{
    max-width: 350px;
    padding: 60px 50px 0;
    color: #fff;
    font-family: 'Fira Sans', sans-serif;
    font-size: 22px;
    font-weight: 300;
    letter-spacing: 0;
    line-height: 36px;

}
.think_step-single .think_desc_orange{
   padding-top: 20px;
  color: #109BB4;
  font-weight: 700;
}


/*--------------------------------------------------------------
reaward partnership
--------------------------------------------------------------*/
.partnership-reaward-area{
    background-color: #fff;
    position: relative;
    z-index: 1;
}
.reaward-single{
  position: relative;
  padding: 40px 70px 40px;
  border: 1px solid rgba(151,151,151,0.3);
  height: 100%;
}
.reaward-single h3 {
    color: #333;
    font-family: "Pontiac",sans-serif;
    font-size: 46px;
    font-weight: 700;
    letter-spacing: 0;
    display: block;
    line-height: 86px;
    height: 175px;
    white-space: nowrap;
}
.reaward-single__badge {
    position: absolute;
    top: 30px;
    right: 30px;
}
.reaward-single h3 span{
    font-size: 110px;
   font-weight: 400;
}
.reaward-single p {
    padding: 30px 0 15px;
    font-family: 'Fira Sans', sans-serif;
    font-size: 16px;
    letter-spacing: 0;
    color: #666;
}
.reaward-single ul li {
    list-style: inside url("../img/partnership/hexagon.png");
    color: #1a1818;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0;
    margin-bottom: 20px;
}
.reaward_padding {
    padding-left: 0;
    padding-right: 0;
}
.arrow_img{
    position: absolute;
    top: 50%;
    right: -30px;
}

/*--------------------------------------------------------------
partnership_video
--------------------------------------------------------------*/
.partnership_video-descrip{
    margin-top: 40px;
}
.partnership_video-descrip p.first_descrip{
    font-size: 32px;
    font-weight: 300;
    padding-bottom: 40px;
}
.partnership_video-descrip p{
    font-size: 18px;
    font-weight: 300;
 
}
strong {
    color: #109BB4;
}
.partnership-badges {
    margin-top: 40px;
}
.partnership-badage-single {
    text-align: center;
}
.partnership-badage-single img {
    max-width: 100px;
    height: auto;
    margin: 0 auto;
}  
.partnership-badage-single {
    text-align: center;
    margin-bottom: 40px;
}

/*--------------------------------------------------------------
partnership-developers
--------------------------------------------------------------*/

.partnership-developers{
    background-color: #fff;
    padding-top: 100px;
    position: relative;
    z-index: 1;
}
.partnership_row{
    display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.partnership_developers-content {
    -ms-flex: 1 1 35%;
    flex: 1 1 35%;
    padding-bottom: 40px;
    padding-left: 5%;
}
.partnership_developers-content h2 {
    padding-bottom: 70px;
    color: #000;
    font-family: "Pontiac",sans-serif;
    font-size: 60px;
    font-weight: 600;
    letter-spacing: 0;
    max-width: 400px;
    line-height: 81px;
}
.partnership_choose-nav ul li {
    display: -ms-flexbox;
    display: flex;
    min-height: 55px;
    margin-bottom: 40px;
    color: #000;
    font-family: "Pontiac",Fira Sans,sans-serif;
    font-size: 22px;
    letter-spacing: 0;
    align-items: center;
}
.partnership_choose-nav ul li span {
    font-size: 40px;
    margin-right: 40px;
    color: #109BB4;
}
.partnership_developers-info {
    -ms-flex: 1 1 65%;
    flex: 1 1 65%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: end;
    align-items: flex-end;
}

.partnership_developers-info{
    display: flex;
    align-items: flex-end;
}
.info_developer {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 250px;
    -ms-flex: 0 0 250px;
    flex: 0 0 250px;
}
.info_developer h4{
    color: #000;
    font-family: "Pontiac",sans-serif;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0;
    padding-bottom: 15px;
    word-spacing: 100vw;
}
.info_developer.info_developer-left {
    text-align: right;
    margin-bottom: 28px;
}
.info_developer.info_developer-right {
    text-align: left;
    margin-bottom: 28px;
}
.partnership_developer-middle{
    -ms-flex: 1;
    flex: 1;
    margin: 0 auto;
    padding: 0 44px;
}
.partnership_developer-middle img{
    display: block;
    max-width: 100%;
    max-height: 100%;
}
.linkdine_info span{
padding-right: 11px;
}
.developer-button{
    width: 850px;
}
.info_developer p{
    color: #000;
    font-family: 'Fira Sans', sans-serif;
    font-size: 20px;
    font-weight: 300;
    letter-spacing: 0;
    padding-bottom: 30px;
}
.linkdine_info {
    display: flex;
    justify-content: end;
}
.info_developer-right .linkdine_info {
    display: flex;
    justify-content: start;
}
.developer_button {
    max-width: 64%;
    margin: 0;
}
.main_button.developer_button2 {
    max-width: 65%;
    text-align: start;
    margin: 0;
}
/*--------------------------------------------------------------
blog page
--------------------------------------------------------------*/
.blog_page-header{
    position: relative;
    background-size: 0;
    padding-top: 40px;
}
.blog_page-header::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -2;
  opacity: 0.2;
  background-image: inherit;
  background-position: center bottom;
  background-size: cover;
  background-repeat: no-repeat;
}
.blog-header-top{
    padding-top: 120px;
}
.blog-single{
    margin-bottom: 31px;
    text-align: start;
}

.blog-single .blog-title a{
    line-height: 1.36;
    font-size: 22px;
    font-weight: 400;
    color: #fff;
}
.blog-header-top .blog-title a{
    font-size: 42px;
    color: #fff;
}
.blog-single .blog-title a:hover {
    color: #109BB4;
}
.blog-single .category-item p{
display: inline-block;
  font-style: italic;
  font-weight: 200;
  font-family: "Fira Sans",serif;
  color: #eee;
}
.blog-single .category-item p{
  display: inline-block;
  font-style: italic;
  font-weight: 200;
}
.blog-single .category-item p span {
    color: #109BB4;
}
.blog-single .blog-title{
    color: #eee;
    line-height: 30px;
    font-size: 48px;
    font-weight: 400;
}

.blog-single .author_and-position p {
    padding-bottom: 11px;
    font-size: 14px;
    margin-top: 8px;
    display: block;
    color: #666;
}
.blog-date p{
 font-size: 14px;
  color: #666;
}
.blog-single .author_and-position p span{
   position: relative;
}
.blog-single .author_and-position p span::before {
    content: '';
    position: absolute;
    bottom: -7px;
    left: 0;
    width: 100%;
    height: 3px;
    background-image: url("../img/banner/wave.png");
    background-position: 50%;
    background-size: contain;
    background-repeat: repeat-x;
}

/*--------------------------------------------------------------
all blog 
--------------------------------------------------------------*/
.all-blog-area{
    background-color: #fff;
    position: relative;
    z-index: 1;
}
.blog_nav-sidebar {
   /* padding-top: 60px;
    padding-bottom: 60px;*/
    position: relative;
    display: flex;
    justify-content: start;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #109BB4;
    padding: 28px 45px 32px 16px;
    background-color: white;
}
.blog_nav-sidebar ul li{
    margin: 27px 0;
}
.blog_nav-sidebar ul li{
  position: relative;
  display: block;
  color: #999;
  font-style: italic;
  font-size: 14px;
  transition: color 0.3s;
  cursor: pointer;
}
.blog_nav-sidebar ul li::before {
    content: '#\0020';
    color: #109BB4;
}

.mixitup-control-active span::before {
    content: '';
    position: absolute;
    top: calc(50% - 1px);
    left: 100%;
    width: 94px;
    height: 1px;
    background: #999;
    background: linear-gradient(90deg, #fff 0%, #999 100%);
    transform: translateY(-50%);
}
.mixitup-control-active > span::after {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 4px 0 4px 4px;
    border-color: rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) #999;
    content: '';
    position: absolute;
    top: calc(50% - 1px);
    left: 100%;
    transform: translate3d(94px, -50%, 0);
}
.post_blog-article .blog-single .blog-title a{
    font-size: 40px;
}
.post_blog-article .blog-single .category-item p {
    color: #666;
}
.post_blog-article .blog-single .benefit-tag ul li {
     color: #666;
     font-size: 14px;
     font-weight: 300;
}
.post_blog-article .blog-single .benefit-tag ul li:hover{
    color: #fff;
}

/*--------------------------------------------------------------
blog detail
--------------------------------------------------------------*/
.blog_detail-header {
    position: relative;
    background-size: 0;
    overflow: hidden;
}
.blog_detail-header::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: '';
    opacity: 0.18;
    background-image: inherit;
    background-position: 50% 25%;
    background-size: cover;
    background-repeat: no-repeat;
    pointer-events: none;
}
.blog_detail-concept{
    background-color: #fff;
    position: relative;
    z-index: 1;
}
.post-profile {
    margin-top: 8px;
    padding: 5px 3px;
    font-size: 14px;
}
.post-profile_profile{
    padding-top: 132px;
}
.post-avater {
    display: flex;
    justify-content: space-between;
    padding-left: 70px;
}

.avatar-img {
    position: relative;
    overflow: hidden;
    width: 97px;
    height: 97px;
    border: 1px solid #109BB4;
    border-radius: 50%;
}
.avatar-img img {
    display: block;
    width: 100%;
}
.meta-content {
    width: 60%;
    font-size: 14px;
}
.meta-content p {
    position: relative;
    display: inline-block;
    padding-bottom: 11px;
    font-size: 14px;
    font-weight: 200;
    color: #8e8e8e;
    font-family: 'Fira Sans', sans-serif;
}
.meta-content p::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-image: url("../images/ui/wave.svg");
    background-position: 50%;
    background-size: contain;
    background-repeat: repeat-x;
}

.pst__date{
    display: block;
    margin-top: 13px;
    color: #8e8e8e;
}
.pst__time p{
    margin: 16px 0;
    color: #999;
    font-size: 18px;
    font-family: "Pontiac",sans-serif;
}
.pst__time p span {
    color: #eee;
    font-weight: 700;
    font-size: 24px;
}
.detail_content-des p{
    color: #666;
    font-weight: 200;
    font-size: 16px;
    font-family: "Fira Sans",serif;
    line-height: 1.5;
}
.blog_post_bottom .meta-content p,
.blog_post_bottom .pst__date{
    color: #666;
}
.detail_content-des blockquote {
    position: relative;
    padding: 0 0 0 81px;
    color: #777;
    font-style: italic;
    line-height: 1.75;
    margin: 35px 0;
}
.detail_content-des blockquote strong {
    color: #333;
    font-weight: 600;
}
.detail_content-des blockquote::before {
    content: open-quote;
    position: absolute;
    top: 0;
    left: 0;
    color: #109BB4;
    font-style: normal;
    font-size: 107px;
    line-height: 1;
}
.detail_content-des blockquote::after {
    content: close-quote;
    position: absolute;
    top: 0.25rem;
    bottom: 0.65rem;
    left: 55px;
    width: 1px;
    background-color: #ccc;
    color: transparent;
}
.detail_content-des ul>li {
    position: relative;
    padding: 15px 0 0 24px;
}
.detail_content-des ul > li::before {
    font-style: normal;
    font-variant: normal;
    font-family: "Font Awesome 5 Free";
    font-weight: 700;
    display: block;
    line-height: 1;
    text-transform: none;
    speak: none;
    content: "\f105";
    position: absolute;
    top: 10px;
    left: 0;
    display: inline-block;
    color: #f84d10;
    font-size: 16px;
    line-height: 36px;
    vertical-align: middle;
}
.detail_content-des ul>li > a {
    color: #109BB4;
    text-decoration: none;
}
.blog_des-img {
    
}
.blog_des-img img{
    max-width: 100%;
    height: auto;
}



.blog_post_bottom {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: start;
    align-items: flex-start;
    margin: 35px 0 49px;
    justify-content: space-between;
}
.blog_post_bottom .post-avater {
    padding-left:0px;
}

.blog_author-social p{
    margin: 10px 0;
    font-weight: 700;
    text-align: center;
    color: #666;
}
.author_social_link ul{
    display: flex;
}
.author_social_link ul li {
    display: block;
    border: 1px solid #ccc;
    border-right-width: 0;
    transition: border-color 0.3s ease;
}
.author_social_link ul li:last-of-type {
    border-right-width: 1px;
}
.author_social_link ul li a{
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    justify-content: center;
    width: 71px;
    height: 69px;
    
    background: transparent;
    transition: background-color 0.3s ease;
}
.author_social_link ul li a i{
    color: #109BB4;
    font-size: 18px;
}
.author_social_link ul li a:hover i {
    background-color: #109BB4;
    color: #fff;
}
.author_social_link ul li a:hover{
    background-color: #109BB4;
    color: #fff;
    border: 1px solid #109BB4;
}

/*--------------------------------------------------------------
ai meching detail
--------------------------------------------------------------*/
.mechine_header{
    padding: 200px 0;
}
.mechine_header_top.clients-single {
    position: relative;
    top: 0;
    opacity: 1;
    display: flex;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    width: 100%;
    transition: opacity 500ms ease 0s;
}
.mechine_header_top .client_item-single-left {
    opacity: 1;
    width: 14.571%;
    height: 160px;
    padding: 25px 0 25px 25px;
}
.mechine_header_top .slider_img_avatar {
    position: relative;
    top: 50%;
    left: 50%;
    transition: all 0.4s;
    transform: translate(-50%, -50%) rotate(230deg);
    max-width: 165px;
}
.mechine_header_top .client_t-img {
    position: relative;
    opacity: 1;
    width: 60%;
    height: 160px;
    padding: 25px 0 25px 25px;
    font-size: 0;
}
.mechine_header_top .client_item-single-left::after {
    font-size: 271px;
    line-height: 154px;
    opacity: 0.7;
}
.mechine_header_top .client_item-single-right > * {
    opacity: 1;
    transition: all 0.4s;
    transform: translateY(25px);
}
.mechine_header_top .clients-descrip p {
    flex: 1 1 71.42857%;
    padding-right: 20px;
    width: 40%;
    line-height: 33px;
    font-size: 14px;
    font-style: normal;
}
.mechine_header_top .clients-company h4, .mechine_header_top .clients-name h4 {
    font-size: 17px;
    margin-top: 2px;
    font-weight: 300;
}
.modinaizer-content.meching_content {
    padding: 61px 0;
}

/*--------------------------------------------------------------
consulting builders
--------------------------------------------------------------*/
.builders_left-content h3{
  font-size: 72px;
  font-family: "Pontiac",sans-serif;
  line-height: 1.1;
  color: #333;
  font-weight: 700;
}
.builders_left-content h2{
  font-size: 120px;
  font-family: "Pontiac",sans-serif;
  line-height: 1.1;
  color: #333;
  font-weight: 900;
}
.builders_left-content p{
    margin: 40px 0 40px;
    color: #333;
}
.builders-right {
     display: flex; 
     flex-direction: column; 
     justify-content: flex-end; 
}
.builders-right .builders-img{
    position: relative;
}
.builders-right .builders-img img {
    width: 100%;
    border-bottom: 3px solid #109BB4;
}
.builders-caption {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    color: #333;
}
.builders-caption .position {
    text-align: center;
}
.builders-caption .position p:last-child{
    color: #333;
}

/*--------------------------------------------------------------
consulting_delivar-area
--------------------------------------------------------------*/
.consulting_delivar-area{
    position: relative;
    background-color: #fff;
    z-index: 1;
}
.consulting_all-content {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -ms-flex-pack: justify;
    justify-content: space-between;
    border: 1px solid #ddd;
}
.consulting-single {
    border: 1px solid rgba(192,192,192,0.2);
    padding: 85px 70px 85px 85px;
    background-color: #fff;
    flex: 0 0 25%;
    width: 25%;
    max-width: 25%;
}
.consulting-single .icon i {
    color: #109BB4;
    border: 1px solid #109BB4;
    padding: 10px;
    border-radius: 10px;
    font-size: 24px;
}
.consulting-single h5{
   padding-top: 23px;
   padding-bottom: 13px;
  color: #333;
  font-size: 18px;
  font-family: "Pontiac",sans-serif;
}
.consulting-single p{
  font-style: italic;
  font-size: 14px;
  color: #666;
  font-weight: 200;
}

/*--------------------------------------------------------------
lets talks area
--------------------------------------------------------------*/
.talks-area {
    position: relative;
    padding: 100px 0;
    background-size: cover;
    background-color: #000;
    overflow: hidden;
}
.talks-content p{
    font-size: 24px;
    color: #fff;
    font-weight: 700;
    font-family: "Pontiac",sans-serif;
    line-height: 1.5;
}

/*--------------------------------------------------------------
about area
--------------------------------------------------------------*/
.fullpage-wrapper {
  width: 100% !important;
  transform: none !important;
}
.fullpage-wrapper .fp-section {
  width: 100% !important;
  position: absolute;
  left: 0;
  top: 0;
  visibility: hidden;
  opacity: 0;
  z-index: 0;
  transition: all 0.7s ease-in-out;
}
.fullpage-wrapper .fp-section.active {
  visibility: visible;
  opacity: 1;
  z-index: 1;
}
.fullpage-wrapper .fp-section .fp-slidesContainer {
  width: 100% !important;
  transform: none !important;
}
.fullpage-wrapper .fp-section .fp-slidesContainer .fp-slide {
  width: 100% !important;
  position: absolute;
  left: 0;
  top: 0;
  visibility: hidden;
  opacity: 0;
  z-index: 0;
  transition: all 0.7s ease-in-out;
}
.fullpage-wrapper .fp-section .fp-slidesContainer .fp-slide.active {
  visibility: visible;
  opacity: 1;
  z-index: 1;
}



/*rain page */


.rain {
  background: white;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #109BB4 100%);
  height: 50px;
  position: absolute;
  width: 1.5px;
}

.rain:nth-of-type(1) {
  animation-name: rain-1;
  animation-delay: 12s;
  animation-duration: 8s;
  animation-iteration-count: infinite;
  left: 6%;
  opacity: 0.38;
  top: -99%;
}

@keyframes rain-1 {
  from {
    left: 6%;
    opacity: 0.38;
    top: -99%;
  }
  to {
    opacity: 0;
    top: 139%;
  }
}
.rain:nth-of-type(2) {
  animation-name: rain-2;
  animation-delay: 7s;
  animation-duration: 9s;
  animation-iteration-count: infinite;
  left: 86%;
  opacity: 0.54;
  top: -96%;
}

@keyframes rain-2 {
  from {
    left: 86%;
    opacity: 0.54;
    top: -96%;
  }
  to {
    opacity: 0;
    top: 136%;
  }
}
.rain:nth-of-type(3) {
  animation-name: rain-3;
  animation-delay: 0s;
  animation-duration: 9s;
  animation-iteration-count: infinite;
  left: 23%;
  opacity: 0.4;
  top: -81%;
}

@keyframes rain-3 {
  from {
    left: 23%;
    opacity: 0.4;
    top: -81%;
  }
  to {
    opacity: 0;
    top: 121%;
  }
}
.rain:nth-of-type(4) {
  animation-name: rain-4;
  animation-delay: 9s;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  left: 55%;
  opacity: 0.51;
  top: -57%;
}

@keyframes rain-4 {
  from {
    left: 55%;
    opacity: 0.51;
    top: -57%;
  }
  to {
    opacity: 0;
    top: 97%;
  }
}
.rain:nth-of-type(5) {
  animation-name: rain-5;
  animation-delay: 0s;
  animation-duration: 8s;
  animation-iteration-count: infinite;
  left: 6%;
  opacity: 0.42;
  top: -95%;
}

@keyframes rain-5 {
  from {
    left: 6%;
    opacity: 0.42;
    top: -95%;
  }
  to {
    opacity: 0;
    top: 135%;
  }
}
.rain:nth-of-type(6) {
  animation-name: rain-6;
  animation-delay: 10s;
  animation-duration: 8s;
  animation-iteration-count: infinite;
  left: 56%;
  opacity: 0.55;
  top: -61%;
}

@keyframes rain-6 {
  from {
    left: 56%;
    opacity: 0.55;
    top: -61%;
  }
  to {
    opacity: 0;
    top: 101%;
  }
}
.rain:nth-of-type(7) {
  animation-name: rain-7;
  animation-delay: 9s;
  animation-duration: 9s;
  animation-iteration-count: infinite;
  left: 64%;
  opacity: 0.48;
  top: -56%;
}

@keyframes rain-7 {
  from {
    left: 64%;
    opacity: 0.48;
    top: -56%;
  }
  to {
    opacity: 0;
    top: 96%;
  }
}
.rain:nth-of-type(8) {
  animation-name: rain-8;
  animation-delay: 13s;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  left: 28%;
  opacity: 0.48;
  top: -90%;
}

@keyframes rain-8 {
  from {
    left: 28%;
    opacity: 0.48;
    top: -90%;
  }
  to {
    opacity: 0;
    top: 130%;
  }
}
.rain:nth-of-type(9) {
  animation-name: rain-9;
  animation-delay: 11s;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  left: 43%;
  opacity: 0.45;
  top: -72%;
}

@keyframes rain-9 {
  from {
    left: 43%;
    opacity: 0.45;
    top: -72%;
  }
  to {
    opacity: 0;
    top: 112%;
  }
}
.rain:nth-of-type(10) {
  animation-name: rain-10;
  animation-delay: 10s;
  animation-duration: 7s;
  animation-iteration-count: infinite;
  left: 86%;
  opacity: 0.42;
  top: -79%;
}

@keyframes rain-10 {
  from {
    left: 86%;
    opacity: 0.42;
    top: -79%;
  }
  to {
    opacity: 0;
    top: 119%;
  }
}
.rain:nth-of-type(11) {
  animation-name: rain-11;
  animation-delay: 13s;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  left: 56%;
  opacity: 0.4;
  top: -56%;
}

@keyframes rain-11 {
  from {
    left: 56%;
    opacity: 0.4;
    top: -56%;
  }
  to {
    opacity: 0;
    top: 96%;
  }
}
.rain:nth-of-type(12) {
  animation-name: rain-12;
  animation-delay: 1s;
  animation-duration: 7s;
  animation-iteration-count: infinite;
  left: 74%;
  opacity: 0.52;
  top: -76%;
}

@keyframes rain-12 {
  from {
    left: 74%;
    opacity: 0.52;
    top: -76%;
  }
  to {
    opacity: 0;
    top: 116%;
  }
}
.rain:nth-of-type(13) {
  animation-name: rain-13;
  animation-delay: 4s;
  animation-duration: 7s;
  animation-iteration-count: infinite;
  left: 89%;
  opacity: 0.49;
  top: -98%;
}

@keyframes rain-13 {
  from {
    left: 89%;
    opacity: 0.49;
    top: -98%;
  }
  to {
    opacity: 0;
    top: 138%;
  }
}
.rain:nth-of-type(14) {
  animation-name: rain-14;
  animation-delay: 12s;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  left: 100%;
  opacity: 0.39;
  top: -88%;
}

@keyframes rain-14 {
  from {
    left: 100%;
    opacity: 0.39;
    top: -88%;
  }
  to {
    opacity: 0;
    top: 128%;
  }
}
.rain:nth-of-type(15) {
  animation-name: rain-15;
  animation-delay: 13s;
  animation-duration: 8s;
  animation-iteration-count: infinite;
  left: 18%;
  opacity: 0.37;
  top: -51%;
}

@keyframes rain-15 {
  from {
    left: 18%;
    opacity: 0.37;
    top: -51%;
  }
  to {
    opacity: 0;
    top: 91%;
  }
}
.rain:nth-of-type(16) {
  animation-name: rain-16;
  animation-delay: 13s;
  animation-duration: 8s;
  animation-iteration-count: infinite;
  left: 26%;
  opacity: 0.44;
  top: -84%;
}

@keyframes rain-16 {
  from {
    left: 26%;
    opacity: 0.44;
    top: -84%;
  }
  to {
    opacity: 0;
    top: 124%;
  }
}
.rain:nth-of-type(17) {
  animation-name: rain-17;
  animation-delay: 18s;
  animation-duration: 8s;
  animation-iteration-count: infinite;
  left: 90%;
  opacity: 0.49;
  top: -83%;
}

@keyframes rain-17 {
  from {
    left: 90%;
    opacity: 0.49;
    top: -83%;
  }
  to {
    opacity: 0;
    top: 123%;
  }
}
.rain:nth-of-type(18) {
  animation-name: rain-18;
  animation-delay: 5s;
  animation-duration: 7s;
  animation-iteration-count: infinite;
  left: 53%;
  opacity: 0.56;
  top: -87%;
}

@keyframes rain-18 {
  from {
    left: 53%;
    opacity: 0.56;
    top: -87%;
  }
  to {
    opacity: 0;
    top: 127%;
  }
}
.rain:nth-of-type(19) {
  animation-name: rain-19;
  animation-delay: 16s;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  left: 58%;
  opacity: 0.57;
  top: -85%;
}

@keyframes rain-19 {
  from {
    left: 58%;
    opacity: 0.57;
    top: -85%;
  }
  to {
    opacity: 0;
    top: 125%;
  }
}
.rain:nth-of-type(20) {
  animation-name: rain-20;
  animation-delay: 5s;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  left: 29%;
  opacity: 0.57;
  top: -77%;
}

@keyframes rain-20 {
  from {
    left: 29%;
    opacity: 0.57;
    top: -77%;
  }
  to {
    opacity: 0;
    top: 117%;
  }
}
.rain:nth-of-type(21) {
  animation-name: rain-21;
  animation-delay: 16s;
  animation-duration: 7s;
  animation-iteration-count: infinite;
  left: 29%;
  opacity: 0.5;
  top: -91%;
}

@keyframes rain-21 {
  from {
    left: 29%;
    opacity: 0.5;
    top: -91%;
  }
  to {
    opacity: 0;
    top: 131%;
  }
}
.rain:nth-of-type(22) {
  animation-name: rain-22;
  animation-delay: 14s;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  left: 49%;
  opacity: 0.59;
  top: -68%;
}

@keyframes rain-22 {
  from {
    left: 49%;
    opacity: 0.59;
    top: -68%;
  }
  to {
    opacity: 0;
    top: 108%;
  }
}
.rain:nth-of-type(23) {
  animation-name: rain-23;
  animation-delay: 17s;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  left: 5%;
  opacity: 0.39;
  top: -67%;
}

@keyframes rain-23 {
  from {
    left: 5%;
    opacity: 0.39;
    top: -67%;
  }
  to {
    opacity: 0;
    top: 107%;
  }
}
.rain:nth-of-type(24) {
  animation-name: rain-24;
  animation-delay: 17s;
  animation-duration: 8s;
  animation-iteration-count: infinite;
  left: 31%;
  opacity: 0.32;
  top: -57%;
}

@keyframes rain-24 {
  from {
    left: 31%;
    opacity: 0.32;
    top: -57%;
  }
  to {
    opacity: 0;
    top: 97%;
  }
}
.rain:nth-of-type(25) {
  animation-name: rain-25;
  animation-delay: 14s;
  animation-duration: 7s;
  animation-iteration-count: infinite;
  left: 93%;
  opacity: 0.55;
  top: -55%;
}

@keyframes rain-25 {
  from {
    left: 93%;
    opacity: 0.55;
    top: -55%;
  }
  to {
    opacity: 0;
    top: 95%;
  }
}
.rain:nth-of-type(26) {
  animation-name: rain-26;
  animation-delay: 15s;
  animation-duration: 9s;
  animation-iteration-count: infinite;
  left: 55%;
  opacity: 0.52;
  top: -58%;
}

@keyframes rain-26 {
  from {
    left: 55%;
    opacity: 0.52;
    top: -58%;
  }
  to {
    opacity: 0;
    top: 98%;
  }
}
.rain:nth-of-type(27) {
  animation-name: rain-27;
  animation-delay: 5s;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  left: 63%;
  opacity: 0.39;
  top: -75%;
}

@keyframes rain-27 {
  from {
    left: 63%;
    opacity: 0.39;
    top: -75%;
  }
  to {
    opacity: 0;
    top: 115%;
  }
}
.rain:nth-of-type(28) {
  animation-name: rain-28;
  animation-delay: 6s;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  left: 34%;
  opacity: 0.32;
  top: -79%;
}

@keyframes rain-28 {
  from {
    left: 34%;
    opacity: 0.32;
    top: -79%;
  }
  to {
    opacity: 0;
    top: 119%;
  }
}
.rain:nth-of-type(29) {
  animation-name: rain-29;
  animation-delay: 4s;
  animation-duration: 7s;
  animation-iteration-count: infinite;
  left: 91%;
  opacity: 0.32;
  top: -56%;
}

@keyframes rain-29 {
  from {
    left: 91%;
    opacity: 0.32;
    top: -56%;
  }
  to {
    opacity: 0;
    top: 96%;
  }
}
.rain:nth-of-type(30) {
  animation-name: rain-30;
  animation-delay: 13s;
  animation-duration: 8s;
  animation-iteration-count: infinite;
  left: 79%;
  opacity: 0.46;
  top: -88%;
}

@keyframes rain-30 {
  from {
    left: 79%;
    opacity: 0.46;
    top: -88%;
  }
  to {
    opacity: 0;
    top: 128%;
  }
}
.rain:nth-of-type(31) {
  animation-name: rain-31;
  animation-delay: 8s;
  animation-duration: 9s;
  animation-iteration-count: infinite;
  left: 10%;
  opacity: 0.37;
  top: -95%;
}

@keyframes rain-31 {
  from {
    left: 10%;
    opacity: 0.37;
    top: -95%;
  }
  to {
    opacity: 0;
    top: 135%;
  }
}
.rain:nth-of-type(32) {
  animation-name: rain-32;
  animation-delay: 6s;
  animation-duration: 8s;
  animation-iteration-count: infinite;
  left: 100%;
  opacity: 0.56;
  top: -86%;
}

@keyframes rain-32 {
  from {
    left: 100%;
    opacity: 0.56;
    top: -86%;
  }
  to {
    opacity: 0;
    top: 126%;
  }
}
.rain:nth-of-type(33) {
  animation-name: rain-33;
  animation-delay: 8s;
  animation-duration: 9s;
  animation-iteration-count: infinite;
  left: 7%;
  opacity: 0.43;
  top: -51%;
}

@keyframes rain-33 {
  from {
    left: 7%;
    opacity: 0.43;
    top: -51%;
  }
  to {
    opacity: 0;
    top: 91%;
  }
}
.rain:nth-of-type(34) {
  animation-name: rain-34;
  animation-delay: 8s;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  left: 90%;
  opacity: 0.38;
  top: -60%;
}

@keyframes rain-34 {
  from {
    left: 90%;
    opacity: 0.38;
    top: -60%;
  }
  to {
    opacity: 0;
    top: 100%;
  }
}
.rain:nth-of-type(35) {
  animation-name: rain-35;
  animation-delay: 7s;
  animation-duration: 7s;
  animation-iteration-count: infinite;
  left: 65%;
  opacity: 0.33;
  top: -88%;
}

@keyframes rain-35 {
  from {
    left: 65%;
    opacity: 0.33;
    top: -88%;
  }
  to {
    opacity: 0;
    top: 128%;
  }
}
.rain:nth-of-type(36) {
  animation-name: rain-36;
  animation-delay: 2s;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  left: 98%;
  opacity: 0.43;
  top: -71%;
}

@keyframes rain-36 {
  from {
    left: 98%;
    opacity: 0.43;
    top: -71%;
  }
  to {
    opacity: 0;
    top: 111%;
  }
}
.rain:nth-of-type(37) {
  animation-name: rain-37;
  animation-delay: 10s;
  animation-duration: 9s;
  animation-iteration-count: infinite;
  left: 28%;
  opacity: 0.42;
  top: -95%;
}

@keyframes rain-37 {
  from {
    left: 28%;
    opacity: 0.42;
    top: -95%;
  }
  to {
    opacity: 0;
    top: 135%;
  }
}
.rain:nth-of-type(38) {
  animation-name: rain-38;
  animation-delay: 19s;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  left: 53%;
  opacity: 0.36;
  top: -51%;
}

@keyframes rain-38 {
  from {
    left: 53%;
    opacity: 0.36;
    top: -51%;
  }
  to {
    opacity: 0;
    top: 91%;
  }
}
.rain:nth-of-type(39) {
  animation-name: rain-39;
  animation-delay: 8s;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  left: 37%;
  opacity: 0.47;
  top: -75%;
}

@keyframes rain-39 {
  from {
    left: 37%;
    opacity: 0.47;
    top: -75%;
  }
  to {
    opacity: 0;
    top: 115%;
  }
}
.rain:nth-of-type(40) {
  animation-name: rain-40;
  animation-delay: 19s;
  animation-duration: 7s;
  animation-iteration-count: infinite;
  left: 99%;
  opacity: 0.56;
  top: -55%;
}

@keyframes rain-40 {
  from {
    left: 99%;
    opacity: 0.56;
    top: -55%;
  }
  to {
    opacity: 0;
    top: 95%;
  }
}
.rain:nth-of-type(41) {
  animation-name: rain-41;
  animation-delay: 2s;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  left: 80%;
  opacity: 0.31;
  top: -73%;
}

@keyframes rain-41 {
  from {
    left: 80%;
    opacity: 0.31;
    top: -73%;
  }
  to {
    opacity: 0;
    top: 113%;
  }
}
.rain:nth-of-type(42) {
  animation-name: rain-42;
  animation-delay: 14s;
  animation-duration: 9s;
  animation-iteration-count: infinite;
  left: 62%;
  opacity: 0.51;
  top: -65%;
}

@keyframes rain-42 {
  from {
    left: 62%;
    opacity: 0.51;
    top: -65%;
  }
  to {
    opacity: 0;
    top: 105%;
  }
}
.rain:nth-of-type(43) {
  animation-name: rain-43;
  animation-delay: 1s;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  left: 79%;
  opacity: 0.47;
  top: -60%;
}

@keyframes rain-43 {
  from {
    left: 79%;
    opacity: 0.47;
    top: -60%;
  }
  to {
    opacity: 0;
    top: 100%;
  }
}
.rain:nth-of-type(44) {
  animation-name: rain-44;
  animation-delay: 2s;
  animation-duration: 8s;
  animation-iteration-count: infinite;
  left: 2%;
  opacity: 0.41;
  top: -77%;
}

@keyframes rain-44 {
  from {
    left: 2%;
    opacity: 0.41;
    top: -77%;
  }
  to {
    opacity: 0;
    top: 117%;
  }
}
.rain:nth-of-type(45) {
  animation-name: rain-45;
  animation-delay: 10s;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  left: 40%;
  opacity: 0.4;
  top: -55%;
}

@keyframes rain-45 {
  from {
    left: 40%;
    opacity: 0.4;
    top: -55%;
  }
  to {
    opacity: 0;
    top: 95%;
  }
}
.rain:nth-of-type(46) {
  animation-name: rain-46;
  animation-delay: 19s;
  animation-duration: 8s;
  animation-iteration-count: infinite;
  left: 10%;
  opacity: 0.43;
  top: -96%;
}

@keyframes rain-46 {
  from {
    left: 10%;
    opacity: 0.43;
    top: -96%;
  }
  to {
    opacity: 0;
    top: 136%;
  }
}
.rain:nth-of-type(47) {
  animation-name: rain-47;
  animation-delay: 6s;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  left: 46%;
  opacity: 0.42;
  top: -91%;
}

@keyframes rain-47 {
  from {
    left: 46%;
    opacity: 0.42;
    top: -91%;
  }
  to {
    opacity: 0;
    top: 131%;
  }
}
.rain:nth-of-type(48) {
  animation-name: rain-48;
  animation-delay: 17s;
  animation-duration: 7s;
  animation-iteration-count: infinite;
  left: 35%;
  opacity: 0.5;
  top: -97%;
}

@keyframes rain-48 {
  from {
    left: 35%;
    opacity: 0.5;
    top: -97%;
  }
  to {
    opacity: 0;
    top: 137%;
  }
}
.rain:nth-of-type(49) {
  animation-name: rain-49;
  animation-delay: 8s;
  animation-duration: 9s;
  animation-iteration-count: infinite;
  left: 81%;
  opacity: 0.45;
  top: -53%;
}

@keyframes rain-49 {
  from {
    left: 81%;
    opacity: 0.45;
    top: -53%;
  }
  to {
    opacity: 0;
    top: 93%;
  }
}
.rain:nth-of-type(50) {
  animation-name: rain-50;
  animation-delay: 18s;
  animation-duration: 8s;
  animation-iteration-count: infinite;
  left: 68%;
  opacity: 0.51;
  top: -89%;
}

@keyframes rain-50 {
  from {
    left: 68%;
    opacity: 0.51;
    top: -89%;
  }
  to {
    opacity: 0;
    top: 129%;
  }
}
.rain:nth-of-type(51) {
  animation-name: rain-51;
  animation-delay: 14s;
  animation-duration: 7s;
  animation-iteration-count: infinite;
  left: 5%;
  opacity: 0.58;
  top: -89%;
}

@keyframes rain-51 {
  from {
    left: 5%;
    opacity: 0.58;
    top: -89%;
  }
  to {
    opacity: 0;
    top: 129%;
  }
}
.rain:nth-of-type(52) {
  animation-name: rain-52;
  animation-delay: 0s;
  animation-duration: 7s;
  animation-iteration-count: infinite;
  left: 95%;
  opacity: 0.55;
  top: -90%;
}

@keyframes rain-52 {
  from {
    left: 95%;
    opacity: 0.55;
    top: -90%;
  }
  to {
    opacity: 0;
    top: 130%;
  }
}
.rain:nth-of-type(53) {
  animation-name: rain-53;
  animation-delay: 17s;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  left: 37%;
  opacity: 0.47;
  top: -63%;
}

@keyframes rain-53 {
  from {
    left: 37%;
    opacity: 0.47;
    top: -63%;
  }
  to {
    opacity: 0;
    top: 103%;
  }
}
.rain:nth-of-type(54) {
  animation-name: rain-54;
  animation-delay: 18s;
  animation-duration: 7s;
  animation-iteration-count: infinite;
  left: 85%;
  opacity: 0.5;
  top: -61%;
}

@keyframes rain-54 {
  from {
    left: 85%;
    opacity: 0.5;
    top: -61%;
  }
  to {
    opacity: 0;
    top: 101%;
  }
}
.rain:nth-of-type(55) {
  animation-name: rain-55;
  animation-delay: 1s;
  animation-duration: 8s;
  animation-iteration-count: infinite;
  left: 32%;
  opacity: 0.43;
  top: -68%;
}

@keyframes rain-55 {
  from {
    left: 32%;
    opacity: 0.43;
    top: -68%;
  }
  to {
    opacity: 0;
    top: 108%;
  }
}
.rain:nth-of-type(56) {
  animation-name: rain-56;
  animation-delay: 16s;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  left: 40%;
  opacity: 0.41;
  top: -53%;
}

@keyframes rain-56 {
  from {
    left: 40%;
    opacity: 0.41;
    top: -53%;
  }
  to {
    opacity: 0;
    top: 93%;
  }
}
.rain:nth-of-type(57) {
  animation-name: rain-57;
  animation-delay: 2s;
  animation-duration: 7s;
  animation-iteration-count: infinite;
  left: 82%;
  opacity: 0.52;
  top: -93%;
}

@keyframes rain-57 {
  from {
    left: 82%;
    opacity: 0.52;
    top: -93%;
  }
  to {
    opacity: 0;
    top: 133%;
  }
}
.rain:nth-of-type(58) {
  animation-name: rain-58;
  animation-delay: 7s;
  animation-duration: 7s;
  animation-iteration-count: infinite;
  left: 41%;
  opacity: 0.37;
  top: -51%;
}

@keyframes rain-58 {
  from {
    left: 41%;
    opacity: 0.37;
    top: -51%;
  }
  to {
    opacity: 0;
    top: 91%;
  }
}
.rain:nth-of-type(59) {
  animation-name: rain-59;
  animation-delay: 6s;
  animation-duration: 7s;
  animation-iteration-count: infinite;
  left: 66%;
  opacity: 0.39;
  top: -73%;
}

@keyframes rain-59 {
  from {
    left: 66%;
    opacity: 0.39;
    top: -73%;
  }
  to {
    opacity: 0;
    top: 113%;
  }
}
.rain:nth-of-type(60) {
  animation-name: rain-60;
  animation-delay: 6s;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  left: 89%;
  opacity: 0.52;
  top: -70%;
}

@keyframes rain-60 {
  from {
    left: 89%;
    opacity: 0.52;
    top: -70%;
  }
  to {
    opacity: 0;
    top: 110%;
  }
}
.rain:nth-of-type(61) {
  animation-name: rain-61;
  animation-delay: 0s;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  left: 86%;
  opacity: 0.57;
  top: -72%;
}

@keyframes rain-61 {
  from {
    left: 86%;
    opacity: 0.57;
    top: -72%;
  }
  to {
    opacity: 0;
    top: 112%;
  }
}
.rain:nth-of-type(62) {
  animation-name: rain-62;
  animation-delay: 11s;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  left: 38%;
  opacity: 0.51;
  top: -67%;
}

@keyframes rain-62 {
  from {
    left: 38%;
    opacity: 0.51;
    top: -67%;
  }
  to {
    opacity: 0;
    top: 107%;
  }
}
.rain:nth-of-type(63) {
  animation-name: rain-63;
  animation-delay: 1s;
  animation-duration: 7s;
  animation-iteration-count: infinite;
  left: 59%;
  opacity: 0.54;
  top: -100%;
}

@keyframes rain-63 {
  from {
    left: 59%;
    opacity: 0.54;
    top: -100%;
  }
  to {
    opacity: 0;
    top: 140%;
  }
}
.rain:nth-of-type(64) {
  animation-name: rain-64;
  animation-delay: 12s;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  left: 42%;
  opacity: 0.6;
  top: -59%;
}

@keyframes rain-64 {
  from {
    left: 42%;
    opacity: 0.6;
    top: -59%;
  }
  to {
    opacity: 0;
    top: 99%;
  }
}
.rain:nth-of-type(65) {
  animation-name: rain-65;
  animation-delay: 15s;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  left: 60%;
  opacity: 0.58;
  top: -83%;
}

@keyframes rain-65 {
  from {
    left: 60%;
    opacity: 0.58;
    top: -83%;
  }
  to {
    opacity: 0;
    top: 123%;
  }
}
.rain:nth-of-type(66) {
  animation-name: rain-66;
  animation-delay: 13s;
  animation-duration: 9s;
  animation-iteration-count: infinite;
  left: 10%;
  opacity: 0.52;
  top: -72%;
}

@keyframes rain-66 {
  from {
    left: 10%;
    opacity: 0.52;
    top: -72%;
  }
  to {
    opacity: 0;
    top: 112%;
  }
}
.rain:nth-of-type(67) {
  animation-name: rain-67;
  animation-delay: 5s;
  animation-duration: 7s;
  animation-iteration-count: infinite;
  left: 69%;
  opacity: 0.42;
  top: -81%;
}

@keyframes rain-67 {
  from {
    left: 69%;
    opacity: 0.42;
    top: -81%;
  }
  to {
    opacity: 0;
    top: 121%;
  }
}
.rain:nth-of-type(68) {
  animation-name: rain-68;
  animation-delay: 7s;
  animation-duration: 7s;
  animation-iteration-count: infinite;
  left: 49%;
  opacity: 0.54;
  top: -57%;
}

@keyframes rain-68 {
  from {
    left: 49%;
    opacity: 0.54;
    top: -57%;
  }
  to {
    opacity: 0;
    top: 97%;
  }
}
.rain:nth-of-type(69) {
  animation-name: rain-69;
  animation-delay: 1s;
  animation-duration: 7s;
  animation-iteration-count: infinite;
  left: 1%;
  opacity: 0.6;
  top: -53%;
}

@keyframes rain-69 {
  from {
    left: 1%;
    opacity: 0.6;
    top: -53%;
  }
  to {
    opacity: 0;
    top: 93%;
  }
}
.rain:nth-of-type(70) {
  animation-name: rain-70;
  animation-delay: 11s;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  left: 86%;
  opacity: 0.44;
  top: -72%;
}

@keyframes rain-70 {
  from {
    left: 86%;
    opacity: 0.44;
    top: -72%;
  }
  to {
    opacity: 0;
    top: 112%;
  }
}
.rain:nth-of-type(71) {
  animation-name: rain-71;
  animation-delay: 19s;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  left: 88%;
  opacity: 0.34;
  top: -78%;
}

@keyframes rain-71 {
  from {
    left: 88%;
    opacity: 0.34;
    top: -78%;
  }
  to {
    opacity: 0;
    top: 118%;
  }
}
.rain:nth-of-type(72) {
  animation-name: rain-72;
  animation-delay: 6s;
  animation-duration: 7s;
  animation-iteration-count: infinite;
  left: 27%;
  opacity: 0.49;
  top: -92%;
}

@keyframes rain-72 {
  from {
    left: 27%;
    opacity: 0.49;
    top: -92%;
  }
  to {
    opacity: 0;
    top: 132%;
  }
}
.rain:nth-of-type(73) {
  animation-name: rain-73;
  animation-delay: 10s;
  animation-duration: 9s;
  animation-iteration-count: infinite;
  left: 66%;
  opacity: 0.45;
  top: -73%;
}

@keyframes rain-73 {
  from {
    left: 66%;
    opacity: 0.45;
    top: -73%;
  }
  to {
    opacity: 0;
    top: 113%;
  }
}
.rain:nth-of-type(74) {
  animation-name: rain-74;
  animation-delay: 5s;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  left: 48%;
  opacity: 0.46;
  top: -70%;
}

@keyframes rain-74 {
  from {
    left: 48%;
    opacity: 0.46;
    top: -70%;
  }
  to {
    opacity: 0;
    top: 110%;
  }
}
.rain:nth-of-type(75) {
  animation-name: rain-75;
  animation-delay: 1s;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  left: 80%;
  opacity: 0.47;
  top: -63%;
}

@keyframes rain-75 {
  from {
    left: 80%;
    opacity: 0.47;
    top: -63%;
  }
  to {
    opacity: 0;
    top: 103%;
  }
}
.rain:nth-of-type(76) {
  animation-name: rain-76;
  animation-delay: 10s;
  animation-duration: 8s;
  animation-iteration-count: infinite;
  left: 45%;
  opacity: 0.53;
  top: -100%;
}

@keyframes rain-76 {
  from {
    left: 45%;
    opacity: 0.53;
    top: -100%;
  }
  to {
    opacity: 0;
    top: 140%;
  }
}
.rain:nth-of-type(77) {
  animation-name: rain-77;
  animation-delay: 9s;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  left: 47%;
  opacity: 0.4;
  top: -67%;
}

@keyframes rain-77 {
  from {
    left: 47%;
    opacity: 0.4;
    top: -67%;
  }
  to {
    opacity: 0;
    top: 107%;
  }
}
.rain:nth-of-type(78) {
  animation-name: rain-78;
  animation-delay: 19s;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  left: 90%;
  opacity: 0.59;
  top: -92%;
}

@keyframes rain-78 {
  from {
    left: 90%;
    opacity: 0.59;
    top: -92%;
  }
  to {
    opacity: 0;
    top: 132%;
  }
}
.rain:nth-of-type(79) {
  animation-name: rain-79;
  animation-delay: 16s;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  left: 23%;
  opacity: 0.55;
  top: -91%;
}

@keyframes rain-79 {
  from {
    left: 23%;
    opacity: 0.55;
    top: -91%;
  }
  to {
    opacity: 0;
    top: 131%;
  }
}
.rain:nth-of-type(80) {
  animation-name: rain-80;
  animation-delay: 0s;
  animation-duration: 9s;
  animation-iteration-count: infinite;
  left: 50%;
  opacity: 0.54;
  top: -66%;
}

@keyframes rain-80 {
  from {
    left: 50%;
    opacity: 0.54;
    top: -66%;
  }
  to {
    opacity: 0;
    top: 106%;
  }
}
.rain:nth-of-type(81) {
  animation-name: rain-81;
  animation-delay: 0s;
  animation-duration: 8s;
  animation-iteration-count: infinite;
  left: 85%;
  opacity: 0.34;
  top: -64%;
}

@keyframes rain-81 {
  from {
    left: 85%;
    opacity: 0.34;
    top: -64%;
  }
  to {
    opacity: 0;
    top: 104%;
  }
}
.rain:nth-of-type(82) {
  animation-name: rain-82;
  animation-delay: 5s;
  animation-duration: 9s;
  animation-iteration-count: infinite;
  left: 72%;
  opacity: 0.59;
  top: -89%;
}

@keyframes rain-82 {
  from {
    left: 72%;
    opacity: 0.59;
    top: -89%;
  }
  to {
    opacity: 0;
    top: 129%;
  }
}
.rain:nth-of-type(83) {
  animation-name: rain-83;
  animation-delay: 14s;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  left: 62%;
  opacity: 0.53;
  top: -61%;
}

@keyframes rain-83 {
  from {
    left: 62%;
    opacity: 0.53;
    top: -61%;
  }
  to {
    opacity: 0;
    top: 101%;
  }
}
.rain:nth-of-type(84) {
  animation-name: rain-84;
  animation-delay: 7s;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  left: 1%;
  opacity: 0.48;
  top: -81%;
}

@keyframes rain-84 {
  from {
    left: 1%;
    opacity: 0.48;
    top: -81%;
  }
  to {
    opacity: 0;
    top: 121%;
  }
}
.rain:nth-of-type(85) {
  animation-name: rain-85;
  animation-delay: 12s;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  left: 29%;
  opacity: 0.43;
  top: -65%;
}

@keyframes rain-85 {
  from {
    left: 29%;
    opacity: 0.43;
    top: -65%;
  }
  to {
    opacity: 0;
    top: 105%;
  }
}
.rain:nth-of-type(86) {
  animation-name: rain-86;
  animation-delay: 7s;
  animation-duration: 7s;
  animation-iteration-count: infinite;
  left: 48%;
  opacity: 0.53;
  top: -58%;
}

@keyframes rain-86 {
  from {
    left: 48%;
    opacity: 0.53;
    top: -58%;
  }
  to {
    opacity: 0;
    top: 98%;
  }
}
.rain:nth-of-type(87) {
  animation-name: rain-87;
  animation-delay: 14s;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  left: 27%;
  opacity: 0.46;
  top: -89%;
}

@keyframes rain-87 {
  from {
    left: 27%;
    opacity: 0.46;
    top: -89%;
  }
  to {
    opacity: 0;
    top: 129%;
  }
}
.rain:nth-of-type(88) {
  animation-name: rain-88;
  animation-delay: 6s;
  animation-duration: 8s;
  animation-iteration-count: infinite;
  left: 4%;
  opacity: 0.35;
  top: -81%;
}

@keyframes rain-88 {
  from {
    left: 4%;
    opacity: 0.35;
    top: -81%;
  }
  to {
    opacity: 0;
    top: 121%;
  }
}
.rain:nth-of-type(89) {
  animation-name: rain-89;
  animation-delay: 19s;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  left: 98%;
  opacity: 0.6;
  top: -57%;
}

@keyframes rain-89 {
  from {
    left: 98%;
    opacity: 0.6;
    top: -57%;
  }
  to {
    opacity: 0;
    top: 97%;
  }
}
.rain:nth-of-type(90) {
  animation-name: rain-90;
  animation-delay: 18s;
  animation-duration: 8s;
  animation-iteration-count: infinite;
  left: 11%;
  opacity: 0.6;
  top: -60%;
}

@keyframes rain-90 {
  from {
    left: 11%;
    opacity: 0.6;
    top: -60%;
  }
  to {
    opacity: 0;
    top: 100%;
  }
}
.rain:nth-of-type(91) {
  animation-name: rain-91;
  animation-delay: 6s;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  left: 79%;
  opacity: 0.31;
  top: -81%;
}

@keyframes rain-91 {
  from {
    left: 79%;
    opacity: 0.31;
    top: -81%;
  }
  to {
    opacity: 0;
    top: 121%;
  }
}
.rain:nth-of-type(92) {
  animation-name: rain-92;
  animation-delay: 6s;
  animation-duration: 7s;
  animation-iteration-count: infinite;
  left: 81%;
  opacity: 0.6;
  top: -62%;
}

@keyframes rain-92 {
  from {
    left: 81%;
    opacity: 0.6;
    top: -62%;
  }
  to {
    opacity: 0;
    top: 102%;
  }
}
.rain:nth-of-type(93) {
  animation-name: rain-93;
  animation-delay: 12s;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  left: 42%;
  opacity: 0.56;
  top: -98%;
}

@keyframes rain-93 {
  from {
    left: 42%;
    opacity: 0.56;
    top: -98%;
  }
  to {
    opacity: 0;
    top: 138%;
  }
}
.rain:nth-of-type(94) {
  animation-name: rain-94;
  animation-delay: 19s;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  left: 48%;
  opacity: 0.32;
  top: -66%;
}

@keyframes rain-94 {
  from {
    left: 48%;
    opacity: 0.32;
    top: -66%;
  }
  to {
    opacity: 0;
    top: 106%;
  }
}
.rain:nth-of-type(95) {
  animation-name: rain-95;
  animation-delay: 8s;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  left: 56%;
  opacity: 0.35;
  top: -84%;
}

@keyframes rain-95 {
  from {
    left: 56%;
    opacity: 0.35;
    top: -84%;
  }
  to {
    opacity: 0;
    top: 124%;
  }
}
.rain:nth-of-type(96) {
  animation-name: rain-96;
  animation-delay: 12s;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  left: 23%;
  opacity: 0.44;
  top: -85%;
}

@keyframes rain-96 {
  from {
    left: 23%;
    opacity: 0.44;
    top: -85%;
  }
  to {
    opacity: 0;
    top: 125%;
  }
}
.rain:nth-of-type(97) {
  animation-name: rain-97;
  animation-delay: 0s;
  animation-duration: 7s;
  animation-iteration-count: infinite;
  left: 93%;
  opacity: 0.52;
  top: -97%;
}

@keyframes rain-97 {
  from {
    left: 93%;
    opacity: 0.52;
    top: -97%;
  }
  to {
    opacity: 0;
    top: 137%;
  }
}
.rain:nth-of-type(98) {
  animation-name: rain-98;
  animation-delay: 15s;
  animation-duration: 8s;
  animation-iteration-count: infinite;
  left: 1%;
  opacity: 0.6;
  top: -55%;
}

@keyframes rain-98 {
  from {
    left: 1%;
    opacity: 0.6;
    top: -55%;
  }
  to {
    opacity: 0;
    top: 95%;
  }
}
.rain:nth-of-type(99) {
  animation-name: rain-99;
  animation-delay: 12s;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  left: 74%;
  opacity: 0.39;
  top: -81%;
}

@keyframes rain-99 {
  from {
    left: 74%;
    opacity: 0.39;
    top: -81%;
  }
  to {
    opacity: 0;
    top: 121%;
  }
}
.rain:nth-of-type(100) {
  animation-name: rain-100;
  animation-delay: 8s;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  left: 75%;
  opacity: 0.59;
  top: -80%;
}

@keyframes rain-100 {
  from {
    left: 75%;
    opacity: 0.59;
    top: -80%;
  }
  to {
    opacity: 0;
    top: 120%;
  }
}
.rain:nth-of-type(101) {
  animation-name: rain-101;
  animation-delay: 19s;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  left: 86%;
  opacity: 0.49;
  top: -62%;
}

@keyframes rain-101 {
  from {
    left: 86%;
    opacity: 0.49;
    top: -62%;
  }
  to {
    opacity: 0;
    top: 102%;
  }
}
.rain:nth-of-type(102) {
  animation-name: rain-102;
  animation-delay: 9s;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  left: 69%;
  opacity: 0.42;
  top: -70%;
}

@keyframes rain-102 {
  from {
    left: 69%;
    opacity: 0.42;
    top: -70%;
  }
  to {
    opacity: 0;
    top: 110%;
  }
}
.rain:nth-of-type(103) {
  animation-name: rain-103;
  animation-delay: 6s;
  animation-duration: 9s;
  animation-iteration-count: infinite;
  left: 63%;
  opacity: 0.41;
  top: -62%;
}

@keyframes rain-103 {
  from {
    left: 63%;
    opacity: 0.41;
    top: -62%;
  }
  to {
    opacity: 0;
    top: 102%;
  }
}
.rain:nth-of-type(104) {
  animation-name: rain-104;
  animation-delay: 2s;
  animation-duration: 7s;
  animation-iteration-count: infinite;
  left: 14%;
  opacity: 0.43;
  top: -71%;
}

@keyframes rain-104 {
  from {
    left: 14%;
    opacity: 0.43;
    top: -71%;
  }
  to {
    opacity: 0;
    top: 111%;
  }
}
.rain:nth-of-type(105) {
  animation-name: rain-105;
  animation-delay: 4s;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  left: 65%;
  opacity: 0.52;
  top: -64%;
}

@keyframes rain-105 {
  from {
    left: 65%;
    opacity: 0.52;
    top: -64%;
  }
  to {
    opacity: 0;
    top: 104%;
  }
}
.rain:nth-of-type(106) {
  animation-name: rain-106;
  animation-delay: 7s;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  left: 58%;
  opacity: 0.6;
  top: -96%;
}

@keyframes rain-106 {
  from {
    left: 58%;
    opacity: 0.6;
    top: -96%;
  }
  to {
    opacity: 0;
    top: 136%;
  }
}
.rain:nth-of-type(107) {
  animation-name: rain-107;
  animation-delay: 2s;
  animation-duration: 7s;
  animation-iteration-count: infinite;
  left: 39%;
  opacity: 0.35;
  top: -87%;
}

@keyframes rain-107 {
  from {
    left: 39%;
    opacity: 0.35;
    top: -87%;
  }
  to {
    opacity: 0;
    top: 127%;
  }
}
.rain:nth-of-type(108) {
  animation-name: rain-108;
  animation-delay: 0s;
  animation-duration: 8s;
  animation-iteration-count: infinite;
  left: 65%;
  opacity: 0.33;
  top: -62%;
}

@keyframes rain-108 {
  from {
    left: 65%;
    opacity: 0.33;
    top: -62%;
  }
  to {
    opacity: 0;
    top: 102%;
  }
}
.rain:nth-of-type(109) {
  animation-name: rain-109;
  animation-delay: 13s;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  left: 83%;
  opacity: 0.55;
  top: -65%;
}

@keyframes rain-109 {
  from {
    left: 83%;
    opacity: 0.55;
    top: -65%;
  }
  to {
    opacity: 0;
    top: 105%;
  }
}
.rain:nth-of-type(110) {
  animation-name: rain-110;
  animation-delay: 14s;
  animation-duration: 8s;
  animation-iteration-count: infinite;
  left: 4%;
  opacity: 0.51;
  top: -57%;
}

@keyframes rain-110 {
  from {
    left: 4%;
    opacity: 0.51;
    top: -57%;
  }
  to {
    opacity: 0;
    top: 97%;
  }
}
.rain:nth-of-type(111) {
  animation-name: rain-111;
  animation-delay: 16s;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  left: 49%;
  opacity: 0.31;
  top: -64%;
}

@keyframes rain-111 {
  from {
    left: 49%;
    opacity: 0.31;
    top: -64%;
  }
  to {
    opacity: 0;
    top: 104%;
  }
}
.rain:nth-of-type(112) {
  animation-name: rain-112;
  animation-delay: 4s;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  left: 89%;
  opacity: 0.55;
  top: -76%;
}

@keyframes rain-112 {
  from {
    left: 89%;
    opacity: 0.55;
    top: -76%;
  }
  to {
    opacity: 0;
    top: 116%;
  }
}
.rain:nth-of-type(113) {
  animation-name: rain-113;
  animation-delay: 0s;
  animation-duration: 8s;
  animation-iteration-count: infinite;
  left: 93%;
  opacity: 0.52;
  top: -92%;
}

@keyframes rain-113 {
  from {
    left: 93%;
    opacity: 0.52;
    top: -92%;
  }
  to {
    opacity: 0;
    top: 132%;
  }
}
.rain:nth-of-type(114) {
  animation-name: rain-114;
  animation-delay: 3s;
  animation-duration: 7s;
  animation-iteration-count: infinite;
  left: 43%;
  opacity: 0.5;
  top: -93%;
}

@keyframes rain-114 {
  from {
    left: 43%;
    opacity: 0.5;
    top: -93%;
  }
  to {
    opacity: 0;
    top: 133%;
  }
}
.rain:nth-of-type(115) {
  animation-name: rain-115;
  animation-delay: 17s;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  left: 81%;
  opacity: 0.46;
  top: -75%;
}

@keyframes rain-115 {
  from {
    left: 81%;
    opacity: 0.46;
    top: -75%;
  }
  to {
    opacity: 0;
    top: 115%;
  }
}
.rain:nth-of-type(116) {
  animation-name: rain-116;
  animation-delay: 15s;
  animation-duration: 8s;
  animation-iteration-count: infinite;
  left: 3%;
  opacity: 0.52;
  top: -78%;
}

@keyframes rain-116 {
  from {
    left: 3%;
    opacity: 0.52;
    top: -78%;
  }
  to {
    opacity: 0;
    top: 118%;
  }
}
.rain:nth-of-type(117) {
  animation-name: rain-117;
  animation-delay: 6s;
  animation-duration: 9s;
  animation-iteration-count: infinite;
  left: 7%;
  opacity: 0.36;
  top: -66%;
}

@keyframes rain-117 {
  from {
    left: 7%;
    opacity: 0.36;
    top: -66%;
  }
  to {
    opacity: 0;
    top: 106%;
  }
}
.rain:nth-of-type(118) {
  animation-name: rain-118;
  animation-delay: 8s;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  left: 81%;
  opacity: 0.46;
  top: -79%;
}

@keyframes rain-118 {
  from {
    left: 81%;
    opacity: 0.46;
    top: -79%;
  }
  to {
    opacity: 0;
    top: 119%;
  }
}
.rain:nth-of-type(119) {
  animation-name: rain-119;
  animation-delay: 15s;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  left: 93%;
  opacity: 0.34;
  top: -100%;
}

@keyframes rain-119 {
  from {
    left: 93%;
    opacity: 0.34;
    top: -100%;
  }
  to {
    opacity: 0;
    top: 140%;
  }
}
.rain:nth-of-type(120) {
  animation-name: rain-120;
  animation-delay: 14s;
  animation-duration: 9s;
  animation-iteration-count: infinite;
  left: 68%;
  opacity: 0.4;
  top: -55%;
}

@keyframes rain-120 {
  from {
    left: 68%;
    opacity: 0.4;
    top: -55%;
  }
  to {
    opacity: 0;
    top: 95%;
  }
}
.rain:nth-of-type(121) {
  animation-name: rain-121;
  animation-delay: 4s;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  left: 36%;
  opacity: 0.56;
  top: -91%;
}

@keyframes rain-121 {
  from {
    left: 36%;
    opacity: 0.56;
    top: -91%;
  }
  to {
    opacity: 0;
    top: 131%;
  }
}
.rain:nth-of-type(122) {
  animation-name: rain-122;
  animation-delay: 2s;
  animation-duration: 7s;
  animation-iteration-count: infinite;
  left: 39%;
  opacity: 0.51;
  top: -73%;
}

@keyframes rain-122 {
  from {
    left: 39%;
    opacity: 0.51;
    top: -73%;
  }
  to {
    opacity: 0;
    top: 113%;
  }
}
.rain:nth-of-type(123) {
  animation-name: rain-123;
  animation-delay: 16s;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  left: 95%;
  opacity: 0.51;
  top: -100%;
}

@keyframes rain-123 {
  from {
    left: 95%;
    opacity: 0.51;
    top: -100%;
  }
  to {
    opacity: 0;
    top: 140%;
  }
}
.rain:nth-of-type(124) {
  animation-name: rain-124;
  animation-delay: 2s;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  left: 45%;
  opacity: 0.45;
  top: -88%;
}

@keyframes rain-124 {
  from {
    left: 45%;
    opacity: 0.45;
    top: -88%;
  }
  to {
    opacity: 0;
    top: 128%;
  }
}
.rain:nth-of-type(125) {
  animation-name: rain-125;
  animation-delay: 9s;
  animation-duration: 8s;
  animation-iteration-count: infinite;
  left: 57%;
  opacity: 0.43;
  top: -74%;
}

@keyframes rain-125 {
  from {
    left: 57%;
    opacity: 0.43;
    top: -74%;
  }
  to {
    opacity: 0;
    top: 114%;
  }
}
.rain:nth-of-type(126) {
  animation-name: rain-126;
  animation-delay: 1s;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  left: 59%;
  opacity: 0.34;
  top: -77%;
}

@keyframes rain-126 {
  from {
    left: 59%;
    opacity: 0.34;
    top: -77%;
  }
  to {
    opacity: 0;
    top: 117%;
  }
}
.rain:nth-of-type(127) {
  animation-name: rain-127;
  animation-delay: 8s;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  left: 9%;
  opacity: 0.42;
  top: -53%;
}

@keyframes rain-127 {
  from {
    left: 9%;
    opacity: 0.42;
    top: -53%;
  }
  to {
    opacity: 0;
    top: 93%;
  }
}
.rain:nth-of-type(128) {
  animation-name: rain-128;
  animation-delay: 14s;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  left: 14%;
  opacity: 0.35;
  top: -64%;
}

@keyframes rain-128 {
  from {
    left: 14%;
    opacity: 0.35;
    top: -64%;
  }
  to {
    opacity: 0;
    top: 104%;
  }
}
.rain:nth-of-type(129) {
  animation-name: rain-129;
  animation-delay: 0s;
  animation-duration: 9s;
  animation-iteration-count: infinite;
  left: 80%;
  opacity: 0.51;
  top: -98%;
}

@keyframes rain-129 {
  from {
    left: 80%;
    opacity: 0.51;
    top: -98%;
  }
  to {
    opacity: 0;
    top: 138%;
  }
}
.rain:nth-of-type(130) {
  animation-name: rain-130;
  animation-delay: 18s;
  animation-duration: 8s;
  animation-iteration-count: infinite;
  left: 87%;
  opacity: 0.33;
  top: -95%;
}

@keyframes rain-130 {
  from {
    left: 87%;
    opacity: 0.33;
    top: -95%;
  }
  to {
    opacity: 0;
    top: 135%;
  }
}
.rain:nth-of-type(131) {
  animation-name: rain-131;
  animation-delay: 18s;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  left: 11%;
  opacity: 0.56;
  top: -77%;
}

@keyframes rain-131 {
  from {
    left: 11%;
    opacity: 0.56;
    top: -77%;
  }
  to {
    opacity: 0;
    top: 117%;
  }
}
.rain:nth-of-type(132) {
  animation-name: rain-132;
  animation-delay: 17s;
  animation-duration: 7s;
  animation-iteration-count: infinite;
  left: 46%;
  opacity: 0.47;
  top: -84%;
}

@keyframes rain-132 {
  from {
    left: 46%;
    opacity: 0.47;
    top: -84%;
  }
  to {
    opacity: 0;
    top: 124%;
  }
}
.rain:nth-of-type(133) {
  animation-name: rain-133;
  animation-delay: 7s;
  animation-duration: 9s;
  animation-iteration-count: infinite;
  left: 10%;
  opacity: 0.47;
  top: -97%;
}

@keyframes rain-133 {
  from {
    left: 10%;
    opacity: 0.47;
    top: -97%;
  }
  to {
    opacity: 0;
    top: 137%;
  }
}
.rain:nth-of-type(134) {
  animation-name: rain-134;
  animation-delay: 6s;
  animation-duration: 8s;
  animation-iteration-count: infinite;
  left: 73%;
  opacity: 0.41;
  top: -77%;
}

@keyframes rain-134 {
  from {
    left: 73%;
    opacity: 0.41;
    top: -77%;
  }
  to {
    opacity: 0;
    top: 117%;
  }
}
.rain:nth-of-type(135) {
  animation-name: rain-135;
  animation-delay: 4s;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  left: 58%;
  opacity: 0.34;
  top: -99%;
}

@keyframes rain-135 {
  from {
    left: 58%;
    opacity: 0.34;
    top: -99%;
  }
  to {
    opacity: 0;
    top: 139%;
  }
}
.rain:nth-of-type(136) {
  animation-name: rain-136;
  animation-delay: 12s;
  animation-duration: 8s;
  animation-iteration-count: infinite;
  left: 58%;
  opacity: 0.41;
  top: -95%;
}

@keyframes rain-136 {
  from {
    left: 58%;
    opacity: 0.41;
    top: -95%;
  }
  to {
    opacity: 0;
    top: 135%;
  }
}
.rain:nth-of-type(137) {
  animation-name: rain-137;
  animation-delay: 9s;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  left: 40%;
  opacity: 0.43;
  top: -70%;
}

@keyframes rain-137 {
  from {
    left: 40%;
    opacity: 0.43;
    top: -70%;
  }
  to {
    opacity: 0;
    top: 110%;
  }
}
.rain:nth-of-type(138) {
  animation-name: rain-138;
  animation-delay: 0s;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  left: 58%;
  opacity: 0.33;
  top: -66%;
}

@keyframes rain-138 {
  from {
    left: 58%;
    opacity: 0.33;
    top: -66%;
  }
  to {
    opacity: 0;
    top: 106%;
  }
}
.rain:nth-of-type(139) {
  animation-name: rain-139;
  animation-delay: 3s;
  animation-duration: 8s;
  animation-iteration-count: infinite;
  left: 10%;
  opacity: 0.41;
  top: -85%;
}

@keyframes rain-139 {
  from {
    left: 10%;
    opacity: 0.41;
    top: -85%;
  }
  to {
    opacity: 0;
    top: 125%;
  }
}
.rain:nth-of-type(140) {
  animation-name: rain-140;
  animation-delay: 16s;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  left: 16%;
  opacity: 0.48;
  top: -99%;
}

@keyframes rain-140 {
  from {
    left: 16%;
    opacity: 0.48;
    top: -99%;
  }
  to {
    opacity: 0;
    top: 139%;
  }
}
.rain:nth-of-type(141) {
  animation-name: rain-141;
  animation-delay: 11s;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  left: 78%;
  opacity: 0.32;
  top: -91%;
}

@keyframes rain-141 {
  from {
    left: 78%;
    opacity: 0.32;
    top: -91%;
  }
  to {
    opacity: 0;
    top: 131%;
  }
}
.rain:nth-of-type(142) {
  animation-name: rain-142;
  animation-delay: 18s;
  animation-duration: 7s;
  animation-iteration-count: infinite;
  left: 71%;
  opacity: 0.4;
  top: -64%;
}

@keyframes rain-142 {
  from {
    left: 71%;
    opacity: 0.4;
    top: -64%;
  }
  to {
    opacity: 0;
    top: 104%;
  }
}
.rain:nth-of-type(143) {
  animation-name: rain-143;
  animation-delay: 14s;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  left: 39%;
  opacity: 0.35;
  top: -94%;
}

@keyframes rain-143 {
  from {
    left: 39%;
    opacity: 0.35;
    top: -94%;
  }
  to {
    opacity: 0;
    top: 134%;
  }
}
.rain:nth-of-type(144) {
  animation-name: rain-144;
  animation-delay: 15s;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  left: 46%;
  opacity: 0.32;
  top: -80%;
}

@keyframes rain-144 {
  from {
    left: 46%;
    opacity: 0.32;
    top: -80%;
  }
  to {
    opacity: 0;
    top: 120%;
  }
}
.rain:nth-of-type(145) {
  animation-name: rain-145;
  animation-delay: 0s;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  left: 67%;
  opacity: 0.41;
  top: -52%;
}

@keyframes rain-145 {
  from {
    left: 67%;
    opacity: 0.41;
    top: -52%;
  }
  to {
    opacity: 0;
    top: 92%;
  }
}
.rain:nth-of-type(146) {
  animation-name: rain-146;
  animation-delay: 8s;
  animation-duration: 9s;
  animation-iteration-count: infinite;
  left: 98%;
  opacity: 0.44;
  top: -54%;
}

@keyframes rain-146 {
  from {
    left: 98%;
    opacity: 0.44;
    top: -54%;
  }
  to {
    opacity: 0;
    top: 94%;
  }
}
.rain:nth-of-type(147) {
  animation-name: rain-147;
  animation-delay: 4s;
  animation-duration: 7s;
  animation-iteration-count: infinite;
  left: 2%;
  opacity: 0.34;
  top: -65%;
}

@keyframes rain-147 {
  from {
    left: 2%;
    opacity: 0.34;
    top: -65%;
  }
  to {
    opacity: 0;
    top: 105%;
  }
}
.rain:nth-of-type(148) {
  animation-name: rain-148;
  animation-delay: 5s;
  animation-duration: 8s;
  animation-iteration-count: infinite;
  left: 37%;
  opacity: 0.46;
  top: -53%;
}

@keyframes rain-148 {
  from {
    left: 37%;
    opacity: 0.46;
    top: -53%;
  }
  to {
    opacity: 0;
    top: 93%;
  }
}
.rain:nth-of-type(149) {
  animation-name: rain-149;
  animation-delay: 8s;
  animation-duration: 8s;
  animation-iteration-count: infinite;
  left: 68%;
  opacity: 0.58;
  top: -98%;
}

@keyframes rain-149 {
  from {
    left: 68%;
    opacity: 0.58;
    top: -98%;
  }
  to {
    opacity: 0;
    top: 138%;
  }
}
.rain:nth-of-type(150) {
  animation-name: rain-150;
  animation-delay: 6s;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  left: 5%;
  opacity: 0.31;
  top: -57%;
}

@keyframes rain-150 {
  from {
    left: 5%;
    opacity: 0.31;
    top: -57%;
  }
  to {
    opacity: 0;
    top: 97%;
  }
}