/* ============================================================

 Theme Name: Xipper – HTML Landing Page Template for App & Saas Products
 Theme URI: https://themeforest.net/user/pixelcurve/portfolio
 Description: Xipper – HTML Landing Page Template for App & Saas Products
 Author: Pixelcurve
 Author URI: https://wpsprite.com/
 Version: 5.0
 
 main Font: Open Sans 

============================================================== */



/*
  ========================================
  Google Fonts
  ========================================
*/

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800&display=swap');

/*
  ========================================
  Aos, Slick, 
  ========================================
*/

@import "css_plugins/aos.css";
@import "css_plugins/magnific-popup.css";
@import "css_plugins/owl.carousel.min.css";
@import "css_plugins/owl.theme.default.min.css";

/*
  ========================================
  Reset, Typography, Custom Animation 
  ========================================
*/

@import "css_plugins/reset.css";
@import "css_plugins/typography.css";
@import "css_plugins/custom-animation.css";

/*
  ========================================
        Css Style
        
  ========================================
*/

@import "css_section/menu.css";
@import "css_section/blog.css";
@import "css_section/contact.css";
@import "css_section/footer.css";
@import "css_section/home_1.css";
@import "css_section/home_2.css";
@import "css_section/home_3.css";
@import "css_section/home_4.css";
@import "css_section/home_5.css";

::-webkit-scrollbar-thumb{background-color: #10ace3}
.topnav{background:#fff;}
.top-nav.topnav #cssmenu>ul>li>a{color:#30323d;}
.logo{padding:22px 0 0}
.btn-s2, .btn-s5, .top-btn a, .btn-m2{background:#0face3}
.logo, .btn-m2:hover, .btn-s2:hover{color:#0face3}
.home1-hero-content .btn-m2, .top-nav .btn-s2{border:1px solid #fff;}
.how-works-content .section-title h2{line-height:1.4;}
.how-works-item h4{line-height:1.25}
.how-works-item .top-line {
  font-size: 36px;
  color: #10ace3;
  font-weight: 500;
  padding: 21px;
}
.how-works-item{padding:22px}
.overview-title h2{margin-bottom:20px}
.side-wrapper{margin-bottom:120px}
#how-works-area{padding-top:0}
.home1-how-works-area::before{content:none}
.how-works-content{
  padding-top: 100px;
  padding-bottom: 110px;
}
.overview-top{padding:180px 0 0}
#overview-area{padding-bottom:20px}
#home1-services-area {
  background-color: #fff;
  margin-top: -200px;
  padding-top: 200px;
}
.col-lg-3 .how-works-item img {padding:37px 0 32px;}
.col-lg-3 .how-works-item .top-line{background:#f5f5f5; margin-bottom:16px}
.col-lg-3:nth-child(3) .top-bor::before{content:none}
.overview-top .how-works-content h3{margin-top:30px}
.overview-top .top-bor::before, .overview-top .top-bor::after{top:33%; background-color:#f1f1f1}
.overview-top .col-lg-3:nth-child(3) .top-bor::after{top:28.5%}
.overview-top .how-works-content .fas{
  font-size: 100px;
  margin-bottom: 20px;
  margin-top: 40px;
  color: #10ace3;
}
.how-works-content h3, h2{font-weight:400}
.counter-item p{font-size:22px}
.overview-text-item i.fas.fa-file-alt{color:#ff9a00}  /* #10ace3 #8960ef */
.overview-text-item i.fas.fa-chart-pie{color:#ff9a00}
.overview-text-item i.fas.fa-comments{color:#ff9a00}
.overview-text-item i.fas.fa-chart-line{color:#ff9a00}
.overview-text-item i.fas.fa-bullhorn{color:#ff9a00}
#overview-area .overview-text-item i.fas{color:#01ddc2}
.copy-right{border-top:none; padding:50px 0}
.copy-right p{color:#33313273; font-size:15px}
.footer-app{background:linear-gradient(146deg, #1b74c3, #00a0d8)}

@media screen and (max-width: 1000px){
  .top-nav.topnav .button:before{background:#0face3}
  .top-nav.topnav .button:after{border-top:2px solid #0face3; border-bottom:2px solid #0face3}
  .top-nav.topnav .button.menu-opened:after{border-bottom:none}
  #cssmenu ul li{border-top:1px solid #444; background-color:#fff; border-top:1px solid #eaeaea;}
}
@media screen and (max-width: 991px){
    #cssmenu ul{margin-top:14px}
    #cssmenu>ul>li>a{color:#30323d; font-size:16px}
    #cssmenu>ul>li>a:hover{background-color:#fff;}
    .home1-hero-content .btn-m2, .top-nav .btn-s2{border:1px solid #0face3}
    #home1-services-area .overview-text{margin-top:80px}
    .overview-top{padding:100px 0 0 !important}
    #overview-area{padding-bottom:40px !important}
    .copy-right{padding:36px 0 36px !important}
    #home1-services-area{padding-bottom:80px !important}
    .how-works-content{padding-top:0px !important}
    .overview-top .how-works-content h3{margin-top:85px}
    .home1-hero{background:linear-gradient(146deg, #1970b1, #06306f) !important}
}
@media (max-width: 575.98px){
  .logo img {
      margin-top:10px !important;
      margin-left:8px !important;
  }
  .overview-top{padding:100px 0 0 !important}
  #overview-area{padding-bottom:40px !important}
  .copy-right{padding:36px 0 36px !important}
  .home1-hero-content, .overview-title{text-align:center}
  .overview-text-item{padding:30px 30px 0}
  .how-works-item img{display:none}
  .how-works-item .top-line{margin-bottom:16px}
  .how-works-item{padding-bottom:12px !important}
  .top-nav{background-color:rgba(255,255,255,1)}
    .top-nav .button:before{background:#0face3}
    .top-nav .button:after{border-top:2px solid #0face3; border-bottom:2px solid #0face3}
    .top-nav .button.menu-opened:after{border-bottom:none}
  .home1-hero{background:linear-gradient(146deg, #1970b1, #06306f) !important}
  }