@import url(https://fonts.googleapis.com/css?family=Open+Sans|Poppins:500,600,700|Work+Sans:600&display=swap);
*{
    padding:0;
    margin:0
}
.container{
    display:block
}
body{
    background-color:#fff;
    font-family:'Open Sans',sans-serif;
    font-size:15px;
    line-height:26px;
    color:#8d9aa8;
    font-weight:400;
    letter-spacing:-.2px;
    position:relative;
    overflow-x:hidden
}
::-webkit-scrollbar{
    width:8px;
    height:8px
}
::-webkit-scrollbar-thumb{
    cursor:pointer;
    background:#f22874
}
::selection{
    background-color:#f22874;
    color:#fff
}
::-moz-selection{
    background-color:#f22874;
    color:#fff
}
h1,h2,h3,h4,h5,h6{
    font-family:Poppins,sans-serif;
    -webkit-font-smoothing:antialiased;
    color:#263a4f
}
h1{
    font-size:45px;
    font-weight:400;
    line-height:55px;
    margin:0 0 10px;
    color:#263a4f
}
h2{
    font-size:32px;
    line-height:42px;
    color:#263a4f;
    margin:0 0 10px;
    font-weight:600;
    letter-spacing:-1px
}
h3,h4{
    margin:0 0 10px;
    font-weight:400;
    line-height:1.7;
    color:#263a4f;
    letter-spacing:-.5px
}
h3{
    font-size:20px
}
h4{
    font-size:16px
}
h5,h6{
    font-size:14px;
    margin:0 0 10px
}
img{
    border:none;
    outline:0;
    max-width:100%
}
ul{
    display:block;
    list-style:none;
    padding:0;
    margin:0
}
span{
    font-family:"Work Sans",sans-serif;
    font-size:12px;
    font-weight:600
}
p{
    font-size:15px;
    line-height:26px;
    margin-bottom:15px
}
a,a:hover{
    text-decoration:none
}
a:focus{
    outline:0;
    text-decoration:none
}
button{
    border:none;
    background:0 0
}
.padding{
    padding:100px 0
}
.no-padding{
    padding:0
}
.padding-15{
    padding:15px
}
.padding-20{
    padding:20px
}
.bd-bottom{
    border-bottom:1px solid #e5e5e5
}
.mb-10{
    margin-bottom:10px
}
.mb-15{
    margin-bottom:15px
}
.mb-20{
    margin-bottom:20px
}
.mb-25{
    margin-bottom:25px
}
.mb-30{
    margin-bottom:30px
}
.mb-35{
    margin-bottom:35px
}
.mb-40{
    margin-bottom:40px
}
.mb-45{
    margin-bottom:45px
}
.mb-50{
    margin-bottom:50px
}
.color-red{
    color:#ff4c4c!important
}
.color-blue{
    color:#0099e5!important
}
.color-yellow{
    color:#fd0!important
}
.color-green{
    color:#0abf53!important
}
.color-orange{
    color:#ff7900!important
}
.color-purple{
    color:#a560e8!important
}
.color-paste{
    color:#76d7c4!important
}
.color-ash{
    color:#5d6d7e!important
}
.bg-red{
    background-color:rgba(217,57,17,.1)!important
}
.bg-blue{
    background-color:rgba(0,153,229,.1)!important
}
.bg-yellow{
    background-color:rgba(255,221,0,.1)!important
}
.bg-green{
    background-color:rgba(10,191,83 ,.1)!important
}
.bg-orange{
    background-color:rgba(255,121,0,.1)!important
}
.bg-purple{
    background-color:rgba(165,96,232,.1)!important
}
.bg-paste{
    background-color:rgba(26,188,156,.1)!important
}
.bg-ash{
    background-color:rgba(93,109,126,.1)!important
}
.align-right{
    text-align:right
}
.align-center{
    text-align:center
}
.overlay{
    width:100%;
    position:relative;
    z-index:1
}
.overlay:before{
    content:'';
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    z-index:-1
}
@-webkit-keyframes sk-scaleout{
    0%{
        -webkit-transform:scale(0)
    }
    100%{
        -webkit-transform:scale(1);
        opacity:0
    }
}
@keyframes sk-scaleout{
    0%{
        -webkit-transform:scale(0);
        transform:scale(0)
    }
    100%{
        -webkit-transform:scale(1);
        transform:scale(1);
        opacity:0
    }
}
.default-btn{
    display:inline-block;
    background:#f22874;
    color:#fff;
    font-family:'Work Sans',sans-serif;
    font-size:12px;
    font-weight:600;
    text-transform:uppercase;
    height:45px;
    line-height:45px;
    padding:0 35px;
    letter-spacing:0;
    border-radius:2px;
    overflow:hidden;
    position:relative;
    transition:all ease .7s;
    -moz-transition:all ease .7s;
    -webkit-transition:all ease .7s;
    -ms-transition:all ease .7s;
    -o-transition:all ease .7s;
    z-index:1
}
.default-btn:hover{
    color:#fff
}
.default-btn span{
    background:#0b0829 none repeat scroll 0 0;
    border-radius:50%;
    display:block;
    height:0;
    position:absolute;
    transform:translate(-50%,-50%);
    -moz-transform:translate(-50%,-50%);
    -webkit-transform:translate(-50%,-50%);
    -ms-transform:translate(-50%,-50%);
    -o-transform:translate(-50%,-50%);
    transition:width .6s ease 0s,height .6s ease 0s;
    -moz-transition:width .6s ease 0s,height .6s ease 0s;
    -webkit-transition:width .6s ease 0s,height .6s ease 0s;
    -ms-transition:width .6s ease 0s,height .6s ease 0s;
    -o-transition:width .6s ease 0s,height .6s ease 0s;
    width:0;
    z-index:-1
}
.default-btn:hover span{
    height:562.5px;
    width:562.5px
}
.section-heading span{
    text-transform:uppercase;
    color:#f22874
}
.anim-elements{
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    overflow:hidden
}
.anim-elements .anim-element{
    position:absolute
}
.anim-elements .anim-element:nth-child(1){
    background:rgba(0,201,157,.6);
    width:10px;
    height:10px;
    border-radius:50%;
    top:12%;
    left:15%;
    animation:animTwo 13s infinite linear
}
.anim-elements .anim-element:nth-child(2){
    border:5px solid rgba(0,153,229,.3);
    width:25px;
    height:25px;
    border-radius:50%;
    top:15%;
    left:45%;
    -webkit-animation:animOne 15s infinite linear;
    animation:animOne 15s infinite linear
}
.anim-elements .anim-element:nth-child(3){
    border:5px solid rgba(244,34,104,.3);
    width:25px;
    height:25px;
    bottom:20%;
    left:30%;
    -webkit-animation:animFour 15s infinite linear alternate;
    animation:animFour 15s infinite linear alternate
}
.anim-elements .anim-element:nth-child(4){
    background:rgba(252,162,73,.8);
    width:10px;
    height:10px;
    border-radius:50%;
    bottom:15%;
    right:25%;
    -webkit-animation:animFive 15s infinite linear alternate;
    animation:animFive 15s infinite linear alternate
}
.anim-elements .anim-element:nth-child(5){
    background:rgba(100,45,250,.4);
    width:3px;
    height:20px;
    top:18%;
    right:25%;
    -webkit-animation:animFour 15s infinite linear alternate;
    animation:animFour 15s infinite linear alternate
}
.anim-elements .anim-element:nth-child(5):after,.anim-elements .anim-element:nth-child(5):before{
    content:"";
    display:block;
    width:100%;
    height:calc(50% - 2px);
    top:6px;
    background:inherit;
    position:absolute;
    -moz-transform:rotate(90deg);
    -o-transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
    transform:rotate(90deg)
}
.anim-elements .anim-element:nth-child(5):before{
    right:-6px
}
.anim-elements .anim-element:nth-child(5):after{
    left:-6px
}
@keyframes animOne{
    0%{
        transform:translate(0,0) rotate(0)
    }
    20%{
        transform:translate(73px,-1px) rotate(35deg)
    }
    40%{
        transform:translate(141px,72px) rotate(75deg)
    }
    60%{
        transform:translate(83px,122px) rotate(110deg)
    }
    80%{
        transform:translate(-40px,72px) rotate(145deg)
    }
    100%{
        transform:translate(0,0) rotate(0)
    }
}
@-webkit-keyframes animOne{
    0%{
        -webkit-transform:translate(0,0) rotate(0)
    }
    20%{
        -webkit-transform:translate(73px,-1px) rotate(35deg)
    }
    40%{
        -webkit-transform:translate(141px,72px) rotate(75deg)
    }
    60%{
        -webkit-transform:translate(83px,122px) rotate(110deg)
    }
    80%{
        -webkit-transform:translate(-40px,72px) rotate(145deg)
    }
    100%{
        -webkit-transform:translate(0,0) rotate(0)
    }
}
@keyframes animTwo{
    0%{
        transform:translate(0,0) rotate(0) scale(1)
    }
    20%{
        transform:translate(73px,-1px) rotate(36deg) scale(.9)
    }
    40%{
        transform:translate(141px,72px) rotate(72deg) scale(1)
    }
    60%{
        transform:translate(83px,122px) rotate(108deg) scale(1.2)
    }
    80%{
        transform:translate(-40px,72px) rotate(144deg) scale(1.1)
    }
    100%{
        transform:translate(0,0) rotate(0) scale(1)
    }
}
@-webkit-keyframes animTwo{
    0%{
        -webkit-transform:translate(0,0) rotate(0) scale(1)
    }
    20%{
        -webkit-transform:translate(73px,-1px) rotate(36deg) scale(.9)
    }
    40%{
        -webkit-transform:translate(141px,72px) rotate(72deg) scale(1)
    }
    60%{
        -webkit-transform:translate(83px,122px) rotate(108deg) scale(1.2)
    }
    80%{
        -webkit-transform:translate(-40px,72px) rotate(144deg) scale(1.1)
    }
    100%{
        -webkit-transform:translate(0,0) rotate(0) scale(1)
    }
}
@keyframes animThree{
    0%{
        transform:translate(165px,-179px)
    }
    100%{
        transform:translate(-346px,617px)
    }
}
@-webkit-keyframes animThree{
    0%{
        -webkit-transform:translate(165px,-179px)
    }
    100%{
        -webkit-transform:translate(-346px,617px)
    }
}
@keyframes animFour{
    0%{
        transform:translate(-300px,151px) rotate(0)
    }
    100%{
        transform:translate(251px,-200px) rotate(180deg)
    }
}
@-webkit-keyframes animFour{
    0%{
        -webkit-transform:translate(-300px,151px) rotate(0)
    }
    100%{
        -webkit-transform:translate(251px,-200px) rotate(180deg)
    }
}
@keyframes animFive{
    0%{
        transform:translate(61px,-99px) rotate(0)
    }
    21%{
        transform:translate(4px,-190px) rotate(38deg)
    }
    41%{
        transform:translate(-139px,-200px) rotate(74deg)
    }
    60%{
        transform:translate(-263px,-164px) rotate(108deg)
    }
    80%{
        transform:translate(-195px,-49px) rotate(144deg)
    }
    100%{
        transform:translate(-1px,0) rotate(180deg)
    }
}
@-webkit-keyframes animFive{
    0%{
        -webkit-transform:translate(61px,-99px) rotate(0)
    }
    21%{
        -webkit-transform:translate(4px,-190px) rotate(38deg)
    }
    41%{
        -webkit-transform:translate(-139px,-200px) rotate(74deg)
    }
    60%{
        -webkit-transform:translate(-263px,-164px) rotate(108deg)
    }
    80%{
        -webkit-transform:translate(-195px,-49px) rotate(144deg)
    }
    100%{
        -webkit-transform:translate(-1px,0) rotate(180deg)
    }
}
.overlay,a,a:hover,button,img{
    -webkit-transition:all .5s;
    -o-transition:all .5s;
    transition:all .5s
}
.hero-section{
    background-image:url(../img/hero-bg.webp);
    background-position:bottom left;
    background-size:95%;
    background-repeat:no-repeat;
    position:relative;
    width:100%;
    height:50vh
}
.hero-content span{
    color:#fff;
    display:block;
    font-size:14px;
    font-weight:600;
    margin-bottom:15px;
    text-transform:uppercase
}
.hero-content h1,.hero-content h2{
    color:#fff;
    font-size:44px;
    margin-bottom:25px;
    line-height:56px;
    text-transform:capitalize
}
.hero-content p{
    color:#fff;
    margin-bottom:30px
}
.content-wrap{
    display:flex;
    align-items:center
}
.feature-section{
    position:relative
}
.feature-section .section-heading span{
    color:#f22874;
    display:block;
    font-weight:600;
    margin-bottom:5px
}
.feature-content{
    text-align:center;
    padding:40px;
    border-radius:5px;
    background:#fff;
    cursor:pointer;
    transition:all .2s ease-in-out
}
.feature-content:hover{
    transform:scale(1.04);
    transition:all .2s ease-in-out
}
.feature-content i{
    font-size:40px;
    color:#2e93db;
    display:block;
    margin-bottom:20px
}
.team-content{
    margin-top:20px;
    text-align:center
}
.team-content h3{
    margin-bottom:0
}
.team-content span{
    font-size:12px;
    font-weight:600;
    display:block;
    text-transform:uppercase
}
.page-content h2{
    color:#fff
}
.page-content p{
    color:#fff;
    margin:0
}
.contact-section{
    position:relative;
    z-index:1
}
.cta-section{
    background-repeat:no-repeat;
    background-position:center center;
    background-size:cover;
    position:relative;
    height:100%;
    width:100%;
    margin-bottom:-100px;
    z-index:1
}
.cta-section .overlay{
    background-color:transparent;
    background-image:linear-gradient(-134deg,#c86dd7 0,#3023ae 100%);
    position:absolute;
    height:100%;
    width:100%;
    top:0;
    left:0;
    opacity:.8;
    z-index:-1
}
.cta-wrap{
    display:flex;
    align-items:center;
    margin-bottom:80px
}
.cta-content h2{
    color:#fff;
    line-height:50px;
    margin:0
}
.cta-btn{
    text-align:center
}
.footer-section{
    background-image:url(../img/footer-bg.webp);
    background-repeat:no-repeat;
    background-position:bottom center;
    background-size:100% 100%;
    padding-top:60px;
    position:relative;
    z-index:1
}
.footer-text{
    padding:30px 0
}
.footer-text p{
    color:#fff;
    margin:0
}