/*================
04. HEADER MENU CSS
05. HERO SECTION CSS

/

/*==================================
        05. HERO SECTION CSS
==================================*/
#hero-shap-1 {
    top: 0;
}
.hero-content-left h1{
    font-size: 40px;
    line-height: 50px;
}
svg {
    overflow: hidden;
}

svg:root {
    width: 100%;
    height: 100%;
}

svg.shape-bg, svg.promo-bg {
    position: absolute;
    width: 100%;
    left: 0;
    z-index: -1;
}
/*animation background image*/
@keyframes animatedBackground {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 100% 0;
    }
}

.bg-animate {
    background-position: 0 0;
    background-repeat: repeat-x;
    animation: animatedBackground 30s linear infinite;
}

.hero-image {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
}

#promo-shape {
    top: 3.5%;
    width: 100%;
    right: 0;
}

.main-with-padding{
    padding-top: 105px;
}

/*hero equal height*/
.hero-equal-height {
    position: relative;
    min-height: 660px;
    -js-display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}
/*hero default*/


.animation-image-wrap{
    position: relative;
}

.animation-icon-img {
    position: absolute;
    left: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-animation: bounce 1s ease-in-out 0s infinite alternate;
    animation: bounce 1s ease-in-out 0s infinite alternate
}

.animation-icon-img.animation-icon-1 {
    left: 15%;
    top: 30%;
}

.animation-icon-img.animation-icon-2 {
    left: inherit;
    right: 45%;
    top: 0;
    -webkit-animation-delay: .4s;
    animation-delay: .4s
}

.animation-icon-img.animation-icon-3{
    top: 30%;
    left: 75%;
    -webkit-animation-delay: .6s;
    animation-delay: .6s
}

.animation-icon-img.animation-icon-4 {
    left: inherit;
    right: 45%;
    top: 60%;
    -webkit-animation-delay: .8s;
    animation-delay: .8s
}
.animation-icon-img.animation-icon-5{
    left: 42%;
    top: 24%;
}

@-webkit-keyframes bounce {
    0% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px)
    }
    to {
        -webkit-transform: translateY(-25px);
        transform: translateY(-25px)
    }
}

@keyframes bounce {
    0% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px)
    }
    to {
        -webkit-transform: translateY(-25px);
        transform: translateY(-25px)
    }
}


/*animation background image*/
@keyframes animatedBackground {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 100% 0;
    }
}

.bg-animate {
    background-position: 0 0;
    background-repeat: repeat-x;
    animation: animatedBackground 30s linear infinite;
}

.highlight-list li{
    border-radius: 4px;
    text-align: center;
    padding: 1rem;
    margin-bottom: 0.75rem;
    min-width: 140px;
    background: #1A2C79;
}
.highlight-list li h5{
    font-size: 32px;
    font-weight: 700;
}
.highlight-list li h6{
    font-size: 13px;
}



.build-icon-list li{
    background: #ffffff;
    width: 50px;
    height: 50px;
    line-height: 50px;
    display: inline-flex;
    align-items: center;
}
.build-icon-list li img{
    display: block;
    margin: auto;
    padding: 5px;
}

/*hero section 2*/
.two-col-list{
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -js-display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.two-col-list li{
    -webkit-box-flex: 1;
    -ms-flex: 1 1 50%;
    flex: 1 1 50%;
    max-width: 50%;
    padding: 0 12px 8px 0;
    font-size: 14px;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}
@media screen and (max-width: 768px) and (min-width: 320px){
    .two-col-list li {
        max-width: 100%;
        flex: 1 1 100%;
    }
}

.shape-bottom img.bottom-shape {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    width: 100%;
    margin: 0 auto;
}


/*hero offer section*/
.offer-countdown{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 20px;
    color: #fff;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.left-arrow, .right-arrow {
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
}
.left-arrow {
    border-left: 20px solid #fff;
    margin-right: 25px;
}
.right-arrow{
    border-right: 20px solid #fff;
    margin-left: 25px;
}

/*video background css*/
.background-video-overly{
    background-image: linear-gradient(to left, rgba(0, 115, 236, 0.45), rgba(48, 97, 228, 0.45), rgba(75, 77, 217, 0.45), rgba(96, 52, 203, 0.45), rgba(113, 0, 185, 0.45));
}


/*background bg slider*/
.hero-slider-section{
    position: relative;
    overflow: hidden;
}
.gradient-overly-right, .gradient-overly-left, .gradient-overly-bottom, .gradient-overly-top{
    z-index: 1;
    width: 100%;
    min-width: 100%;
    position: relative;
    overflow: hidden;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}
.gradient-overly-right:before, .gradient-overly-left:before, .gradient-overly-bottom:before, .gradient-overly-top:before{
    content: "";
    z-index: -1;
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
.gradient-overly-right:before {
    background: -webkit-gradient(linear, left top, right top, color-stop(0, #f1592b), to(transparent));
    background: linear-gradient(to right, #17a79d 30%, #f1592b29 100%)
}
.gradient-overly-left:before {
    background: -webkit-gradient(linear, left top, right top, color-stop(0, #0059ec), to(transparent));
    background: linear-gradient(to left, #0059ec 30%, rgba(114, 2, 187, 0.25) 100%);
}
.gradient-overly-bottom:before {
    background: -webkit-gradient(linear, left top, right top, color-stop(0, #0059ec), to(transparent));
    background: linear-gradient(to bottom, #0059ec 45%, rgba(114, 2, 187, 0.25) 100%);
}
.gradient-overly-top:before {
    background: -webkit-gradient(linear, left top, right top, color-stop(0, #0059ec), to(transparent));
    background: linear-gradient(to top, #0059ec 35%, rgba(114, 2, 187, 0.25) 100%);
}
.header-content {
    position: relative;
    padding: 0 0 50px 50px;
    overflow: hidden;
}
.header-content .line {
     content: "";
     display: inline-block;
     width: 100%;
     height: 100%;
     left: 0;
     top: 0;
    z-index: -1;
     position: absolute;
     border: 2px dashed #ebebeb;
     -webkit-clip-path: polygon(0 0, 0% 0, 35% 100%, 0 100%);
     clip-path: polygon(0 0, 0% 0, 35% 100%, 0 100%);
 }
.hero-slider-one .owl-item.active h1 {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    animation-name: fadeInDown;
    animation-delay: 0.3s;
}
.hero-slider-one .owl-item.active .cros-animation {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    animation-name: fadeInDown;
    animation-delay: 0.3s;
}
.hero-slider-one .owl-item.active .action-btns {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    animation-name: fadeInUp;
    animation-delay: 0.3s;
}
.hero-slider-one .owl-item.active .line {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    animation-name: fadeInLeft;
    animation-delay: 0.3s;
}

.hero-slider-one .owl-carousel.effects .cros-animation[data-delay-transtion="1"] {
    -webkit-transition-delay: 100ms;
    transition-delay: 100ms;
}
.hero-slider-one .owl-carousel .cros-animation{
    -webkit-transform: translateY(70%);
    transform: translateY(70%);
    filter: alpha(opacity=0);
    -webkit-transition: all 1.3s;
    transition: all 1.3s;
    -webkit-transition-property: transform,opacity;
    -webkit-transition-property: opacity,-webkit-transform;
    transition-property: opacity,-webkit-transform;
    transition-property: transform,opacity;
    transition-property: transform,opacity,-webkit-transform;
}

.hero-slider-one.owl-carousel .owl-item .domain-search-list li a img, .hero-content-slider.owl-carousel .owl-item .domain-search-list li a img{
    width: 65px !important;
    margin-bottom: 5px;
}