/*--------------------------------------------------------------
# Intro Section
--------------------------------------------------------------*/

#intro {
    width: 100%;
    position: relative;
    background: url("assets/images/intro-bg.png") ;
    background-size: cover;
    padding: 100px 0 120px 0;
  }
  
  #intro .intro-img {
    width: 50%;
    float: right;
  }
  
  #intro .intro-info {
    width: 50%;
    float: left;
  }
  
  #intro .intro-info h2 {
    color: #fff;
    margin-bottom: 40px;
    font-size: 48px;
    font-weight: 700;
    padding-top: 60px;
    line-height: 60px;
  }
  
  #intro .intro-info h2 span {
    color: #74b5fc;
    text-decoration: underline;
  }
  #intro .intro-info h2 span a{
      margin-top: 50px;
  }
  
  #intro .intro-info .btn-get-started,
  #intro .intro-info .btn-services {
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    display: inline-block;
    padding: 10px 32px;
    border-radius: 50px;
    transition: 0.5s;
    margin: 0 20px 20px 0;
    color: #fff;
  }
  
  #intro .intro-info .btn-get-started {
    background: #007bff;
    border: 2px solid #007bff;
    color: #fff;
  }
  
  #intro .intro-info .btn-get-started:hover {
    background: none;
    border-color: #fff;
    color: #fff;
  }
  
  #intro .intro-info .btn-services {
    border: 2px solid #fff;
  }
  
  #intro .intro-info .btn-services:hover {
    background: #007bff;
    border-color: #007bff;
    color: #fff;
  }
  /* Services Section
--------------------------------*/

#services {
    padding: 0px 0 20px 0;
    /* box-shadow: inset 0px 0px 12px 0px rgba(0, 0, 0, 0.1); */
  }
  
  #services .box {
    padding: 30px;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    margin: 0 10px 40px 10px;
    background: #fff;
    box-shadow: 0 10px 29px 0 rgba(68, 88, 144, 0.1);
    transition: all 0.3s ease-in-out;
  }
  
  #services .box:hover {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
  }
  
  #services .icon {
    position: absolute;
    left: 0px;
    top: calc(50% - 32px);
  }
  
  #services .icon i {
    font-size: 64px;
    line-height: 1;
    transition: 0.5s;
  }
  
  #services .title {
   text-align: center;
    font-weight: 700;
    margin-bottom: 15px;
    font-size: 18px;
    text-decoration: underline;
  }
  
  #services .title a {
    color: #111;
  }
  
  #services .box:hover .title a {
    color: #007bff;
  }
  
  #services .description {
    font-size: 14px;
    margin-left: 50px;
    line-height: 24px;
    margin-bottom: 0;
    
  }
  .demo{ background-color: #ffd8d8; }
.form-horizontal{
    background-color: #fff;
    /* font-family: 'Blinker', sans-serif; */
    text-align: center;
     padding: 20px 20px 20px 20px; 
    margin: 0px 0px 0px 150px;
    border: 2px solid #d63031;
    /* border-radius: 50px; */
    height: 420px;
    width: 350px;
}
.form-horizontal .form-icon{
    color: #fff;
    background-color: #d63031;
    font-size: 60px;
    line-height: 120px;
    height: 120px;
    width: 130px;
    margin: -80px auto 20px;
    border-radius: 50%;
    box-shadow: 0 0 13px -5px #000;
}
.form-horizontal .form-group{ margin: 0 0 20px; }
.form-horizontal label{
    color: #555;
    font-size: 15px;
    font-weight: 500;
    text-align: left;
    padding: 0;
    display: block;
}
.form-horizontal .form-control{
    color: #555;
    font-size: 16px;
    height: 35px;
    padding: 10px 8px 10px 5px;
    border-radius: 5px;
    width: 100%;
    border: 1px solid grey;
}
.form-control::placeholder{ color: rgba(0,0,0,0.2); }
.form-horizontal .form-control:focus{
    box-shadow: none;
    border: 1px solid #d63031;
}
/* .form-horizontal .btn{
    color: #fff;
    background-color: #d63031;
    font-size: 16px;
    font-weight: 700;
    text-transform: capitalize;
    width: 60%;
    padding: 7px 10px;
    margin: 0 auto 15px;
    border: none;
    border-radius: 5px;
    display: block;
    overflow: hidden;
    position: relative;
    z-index: 1;
    transition: all 0.3s;
} */
.form-horizontal .btn:hover{ color: #555; }
/* .form-horizontal .btn:after{
    content: '';
    background-color: #fff;
    height: 100%;
    margin: 0 auto;
    border-radius: 25px;
    transform: translateY(-100%);
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    z-index: -1;
    transition: all 0.2s;
} */
.form-horizontal .btn:hover:after{ transform: translateY(0) scaleX(0.85); }
.form-horizontal .forgot{
    color: #555;
    font-size: 14px;
}
.form-horizontal .forgot:hover{
    color: #d63031;
    text-decoration: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {}
a,
a:hover,
a:focus,
a:active {
    text-decoration: none;
    outline: none;
}

a,
a:active,
a:focus {
    color: #333;
    text-decoration: none;
    transition-timing-function: ease-in-out;
    -ms-transition-timing-function: ease-in-out;
    -moz-transition-timing-function: ease-in-out;
    -webkit-transition-timing-function: ease-in-out;
    -o-transition-timing-function: ease-in-out;
    transition-duration: .2s;
    -ms-transition-duration: .2s;
    -moz-transition-duration: .2s;
    -webkit-transition-duration: .2s;
    -o-transition-duration: .2s;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
img {
max-width: 100%;
height: auto;
}
span, a, a:hover {
/* display: inline-block; */
text-decoration: none;
color: inherit;

}
.section-head {
margin-bottom: 15px;
}
.section-head h4 {
  margin-top: 30px;
position: relative;
padding:0;
color:#19BFE7;
line-height: 1;
letter-spacing:0.3px;
font-size: 25px;
font-weight: 700;  
text-align:center;
text-transform:none;
margin-bottom:30px;
}
.section-head h4:before {
content: '';
width: 60px;
height: 3px;
background: #19BFE7;
position: absolute;
left: 0px;
bottom: -10px;
right:0;  
margin:0 auto;
}
.section-head h4 span {
font-weight: 700;
padding-bottom: 5px;
color:#2f2f2f
}
p.service_text{
color:#cccccc !important;
font-size:16px;
line-height:28px;
text-align:center;    
}
.section-head p, p.awesome_line{
color:#818181;
font-size:16px;
line-height:28px;
text-align:center;  
}

.extra-text {
font-size:34px;
font-weight: 700;
color:#2f2f2f;
margin-bottom: 25px;
position:relative;
text-transform: none;
}
.extra-text::before {
content: '';
width: 60px;
height: 3px;
background: #19BFE7;
position: absolute;
left: 0px;
bottom: -10px;
right: 0;
margin: 0 auto;
}
.extra-text span {
font-weight: 700;
color:#19BFE7;
}
.item {
background: #fff;
text-align: center;
padding: 30px 25px;
-webkit-box-shadow:0 0px 25px rgba(0, 0, 0, 0.07);
box-shadow:0 0px 25px rgba(0, 0, 0, 0.07);
border-radius: 20px;
border:5px solid rgba(0, 0, 0, 0.07);
margin-bottom: 30px;
-webkit-transition: all .5s ease 0;
transition: all .5s ease 0;
transition: all 0.5s ease 0s;
}
.item:hover{
background:#19BFE7;
box-shadow:0 8px 20px 0px rgba(0, 0, 0, 0.2);
-webkit-transition: all .5s ease 0;
transition: all .5s ease 0;
transition: all 0.5s ease 0s;
}
.item:hover .item, .item:hover span.icon{
/* background:#fff; */
border-radius:10px;
-webkit-transition: all .5s ease 0;
transition: all .5s ease 0;
transition: all 0.5s ease 0s;
}
.item:hover h6, .item:hover p{
color:#fff;
-webkit-transition: all .5s ease 0;
transition: all .5s ease 0;
transition: all 0.5s ease 0s;
}
.item .icon {
font-size: 40px;
margin-bottom:25px;
color: #19BFE7;   
width: 90px;
height: 90px;
line-height: 96px;
border-radius: 50px;
}
.item .feature_box_col_one{
/* background:rgba(247, 198, 5, 0.20); */
color:#19BFE7
}
.item .feature_box_col_two{
/* background:rgba(255, 77, 28, 0.15); */
color:#19BFE7
}
.item .feature_box_col_three{
/* background:rgba(0, 147, 38, 0.15); */
color:#19BFE7
}
.item .feature_box_col_four{
/* background:rgba(0, 108, 255, 0.15); */
color:#19BFE7
}
.item .feature_box_col_five{
/* background:rgba(127, 125, 129, 0.15); */
color:#19BFE7
}
.item .feature_box_col_six{
/* background:rgba(23, 39, 246, 0.15); */
color:#19BFE7
}
.item p{
font-size:15px;
line-height:26px;
}
.item h6 {
margin-bottom:20px;
color:#2f2f2f;
font-size: 15px;
}
.mission p {
margin-bottom: 10px;
font-size: 15px;
line-height: 28px;
font-weight: 500;
}
.mission i {
display: inline-block;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
background: #19BFE7;
border-radius: 50%;
color: #fff;
font-size: 25px;
}
.mission .small-text {
margin-left: 10px;
font-size: 13px;
color: #666;
}
.skills {
padding-top:0px;
}
.skills .prog-item {
margin-bottom: 25px;
}
.skills .prog-item:last-child {
margin-bottom: 0;
}
.skills .prog-item p {
font-weight: 500;
font-size: 15px;
margin-bottom: 10px;
}
.skills .prog-item .skills-progress {
width: 100%;
height: 10px;
background: #e0e0e0;
border-radius:20px;
position: relative;
}
.skills .prog-item .skills-progress span {
position: absolute;
left: 0;
top: 0;
height: 100%;
background: #19BFE7;
width: 10%;
border-radius: 10px;
-webkit-transition: all 1s;
transition: all 1s;
}
.skills .prog-item .skills-progress span:after {
content: attr(data-value);
position: absolute;
top: -5px;
right: 0;
font-size: 10px;
font-weight:600;    
color: #fff;
background:rgba(0, 0, 0, 0.9);
padding: 3px 7px;
border-radius: 30px;
}
  
  @media only screen and (max-width: 900px) and (min-width: 320px) {
   
  
    #intro {
      padding: 10px 0 60px 0;
    }
  
    #intro .intro-img {
      width: 80%;
      float: none;
      margin: 0 auto 25px auto;
    }
  
    #intro .intro-info {
      width: 80%;
      float: none;
      margin: auto;
      text-align: center;
    }
    .title{
        text-align: center;
       
    }
    .form-bg{
     display: none;
    }
    #intro .intro-info h2{
      font-size: 33px;
    }
    
  
  }
  
  .partner-area{
    padding-top: 30px;
      padding-bottom: 30px;
      background: #19BFE7;
      margin: 40px 100px 40px 100px;
  }
  .partner-title{
    color: black;
    text-align: center;
  }
  @media only screen and (max-width: 900px) and (min-width: 320px) {
    .partner-area{
     
        margin: 40px 10px 40px 10px;
    }

  }
  .rainbow {
    background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
    background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
    color:transparent;
    -webkit-background-clip: text;
    background-clip: text;
  }