@import url('https://fonts.googleapis.com/css?family=Raleway');

html,body{
    font-size: 1rem;
    font-family: 'Raleway', sans-serif !important;

}
a, a:hover{
    color: inherit;
}
li{
    list-style: none;
}
.navbar-brand{
    color:#ba10a5 !important;
}
.form-control {
    background-color: rgba(0,0,0, 0.1) !important;
}
.form-control:focus{
    background: rgba(0,0,0, 0.2) !important
}
.navbar{
    -webkit-transition: all 500ms; /* Safari */
    transition: all 500ms;
    padding: 25px 0;
}
.nav-item{     
    margin-right: 30px;
    padding: 0; 
}
.nav-link {    
    color: #fff !important;
}
.navbar-nav .active, .nav-item:hover{
    color: #00f !important;
    border-bottom: 1px solid #00f;
}
.header{
    padding: 10px 0;
    background: rgba(0,0,0,0.9); 
}
.header .active .nav-link{
    color: #00f !important;
}
.margin-top{
    top: 200px;
}
/*banner*/
.banner{
    background: #eee url(../images/banner.png) no-repeat;
    background-size: cover;
    min-height: 100vh;
}
.inner{
    position: relative;
    padding-top: 100px;
    color: #fff;
    padding-bottom: 180px;
    overflow-x: hidden;
}
.logo{
   padding-top: 100px; 
   position: relative;
}
.logo-pos img{
    position: absolute;
    left: 50%;
    /*top: 90px;*/
    margin-left: -53px;
    -webkit-transition: all 2s;
    -moz-transition: all 2s;
    -o-transition: all 2s;
    transition: all 2s  
}
.logoMagic{
    /*top: 950px;*/
    -webkit-transform: scale(0.9) rotate(0.01deg);
    transform: scale(0.9) rotate(0.01deg);
    /*left: 43%;*/
}
.banner h4 span{
    padding: 0 20px;
    position: relative;
}
.banner h4 span:before, .banner h4 span:after{
    content: "";
    position: absolute;
    width: 75%;
    top: 14px;
    border-bottom: 1px solid #fff;
}
.banner h4 span:before{
    right: 100%;
}
.banner h4 span:after{
    left: 100%;
}
.banner h1{
    font-size: 5rem;
    font-weight: 700;
    margin:15px 0 30px 0;
}
.banner p{
    letter-spacing: 2px;
}

.main-section .intro .button{
    display:inline-block;
    width:191px;
    height:56px;
    left:50%;
    margin:0 0 90px -95px;
    position:relative;
    vertical-align:middle;
    text-align:center;
    font-size:16px;
    line-height:56px;
    color:#000;
    background:url(../images/btn-border.png) 0 0 no-repeat transparent;
    background-position:center;
    background-size:100%;
    -webkit-animation:breathBtn 2s ease infinite;
    -moz-animation:breathBtn 2s ease infinite;
    -o-animation:breathBtn 2s ease infinite;animation:breathBtn 2s ease infinite
}
@keyframes breathBtn{from{
    background-size:100%}50%{background-size:90%}to{background-size:100%}}
@-moz-keyframes breath{from{background-size:100%}50%{background-size:90%}to{background-size:100%}}
@-webkit-keyframes breath{from{background-size:100%}50%{background-size:90%}to{background-size:100%}}
@-o-keyframes breath{from{background-size:100%}50%{background-size:90%}to{background-size:100%}}

.main-section .intro .button:hover{
    font-size:18px;
    -webkit-transition:font .4s;
    -moz-transition:font .4s;
    -o-transition:font .4s;
    transition:font .4s
}



.hbtn {
    margin-top: 50px;
}
.hbtn a{
    padding: 10px 30px;
    border: 1px solid #FFFFFE;
    font-size: 1.3rem;
    color: #FFFFFE;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s; 
}
.hbtn a:hover{
    background: #fff;
    color: #58d2e1;
    text-decoration: none;
}
.go {
    width: 33px;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -22.5px;
    cursor: pointer;
}
.go .arrow {
    display: inline-block;
    width: 33px;
    height: 33px;
    background: url(../images/banner-arrow.png) -6px -2px no-repeat transparent;
    -webkit-animation: breath 2s infinite;
    -moz-animation: breath 2s infinite;
    -o-animation: breath 2s infinite;
    animation: breath 2s infinite;
}
.go .dot {
    display: inline-block;
    width: 33px;
    height: 100px;
    background: url(../images/banner-arrow.png) -6px -49px no-repeat transparent;
}


 /*What we do */
.wedo{
    padding: 30px 0;
}
.wedo p{
    padding: 10px 0;
}

/*about*/
.about{
    padding: 30px 0;
}
.about-logo{
}
.about-subtitle{
    margin-bottom: 40px;
}
.about .button {
    display: inline-block;
    width: 191px;
    height: 56px;
    
    margin: 50px 0 90px 0px;
    position: relative;
    vertical-align: middle;
    text-align: center;
    font-size: 16px;
    line-height: 56px;
    color: #000;
    background: url(../images/btn-border.png) 0 0 no-repeat transparent;
    background-position: center;
    background-size: 100%;
    -webkit-animation: breathBtn 2s ease infinite;
    -moz-animation: breathBtn 2s ease infinite;
    -o-animation: breathBtn 2s ease infinite;
    animation: breathBtn 2s ease infinite;
}
@keyframes breath{from{transform:scale(0.8);
    opacity:.8}50%{transform:scale(1);
    opacity:1}to{transform:scale(0.8);
        opacity:.8}}
@-moz-keyframes breath{from{-moz-transform:scale(0.8);
    opacity:.8}50%{-moz-transform:scale(1);
        opacity:1}to{-moz-transform:scale(0.8);
        opacity:.8}}
@-webkit-keyframes breath{from{-webkit-transform:scale(0.8);
    opacity:.8}50%{-webkit-transform:scale(1);
        opacity:1}to{-webkit-transform:scale(0.8);
        opacity:.8}}
@-o-keyframes breath{from{
    -o-transform:scale(0.8);
opacity:.8}50%{-o-transform:scale(1);
    opacity:1}to{-o-transform:scale(0.8);
        opacity:.8}
}
/*carasoul*/
.carasoul{
    padding: 10px 0;
}
.carasoul .text{
    /*background: #000;*/
    padding-bottom: 60px;
    padding-top: 60px;
    padding-right: 10px;
    min-height: 400px;
    background: url(../images/bg-logo.png) no-repeat right bottom;
}
.owl-carousel{
    position: relative;
}
.owl-stage-outer {
    position: relative;
    overflow: hidden;
    -webkit-transform: translate3d(0,0,0);
}
.owl-stage{
    transform: translate3d(0px, 0px, 0px); 
    transition: all 0s ease 0s; 
    width: 2376px;
}
.owl-carousel .owl-item {
    background:#1d242a; 
    min-height: 1px;
    float: left;
    -webkit-backface-visibility: hidden;
    -webkit-touch-callout: none;
    color: #fff;
}
.owl-carousel .owl-item p{
    font-size: 0.7em;
    padding-right: 10px;
}
.owl-btn{
    display: block;
   font-size: 0.7em;
   margin-top: 60px; 
}
.owl-dots{
    display: none;
}
.owl-theme .owl-nav {
    margin-top: 10px;
    position: absolute;
    bottom: 0;
    right: -1px;
    /*max-width: 34.3333%;*/
    width: 100%;
}
@media (min-width: 768px){
.owl-theme .owl-nav {
    max-width: 34.333333%;
}
.owl-nav [class*=owl-] {
    color: #FFF;
    font-size: 2rem;
    margin: 0px;
    padding: 4px 7px;
    background: #58d2e1 !important;
    display: inline-block !important;
    cursor: pointer;
    border-radius: 0px !important;
    border:none;
    width: 50% !important;
}
.owl-nav [class*=owl-]:first-child{
    border-right: 1px solid #000;
}
/*team*/
.team{
    padding: 30px 0;
}
.team .col-md{
    /*border:1px solid red;*/
    padding: 1px;
}

/*Blog*/
.blog{
    padding: 40px 0;
}
.btn-custom{
    background: #58d2e1;
    width: 100%;
    border-radius: 0;
    color: #fff;
    margin-top: 10px;
}
.blog p{
    font-size: 0.8rem
}
.blog p a{
    color: #f00;
}
/*Testimonial*/
.bg{
    background: url(../images/dna-bg.jpg) no-repeat top;
    background-size: 100% auto;
    padding: 60px 0 0 0;
    color: #fff;
    /*height: 350px;*/
}
.testimonial .content{
    margin-top: 50px;
    background: #58d2e1;
    padding: 60px 0;
}
.quote{
    position: relative;
}
.quote-e{
    position: absolute;
    bottom: 0;
    left: 0;
}
/*partner*/
.partner{
    padding: 60px 0;
}
.partner li{
    padding: 10px 30px;
    display: inline-block;
    height: 50px;
    border:1px solid transparent;

}
.partner li img{
    height: 100%;
}
@media(max-width: 787px){
    .partner li{
    padding: 10px 30px;
    display: block;
    height: 30px;
    }
    .partner li img{
        height: 60%;
    }
}