/* OpenSans & Raleway Fonts Family */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&family=Raleway:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Chilanka&display=swap');

/* ===========
   Global CSS 
============ */
body{
   font-family: 'Open Sans', sans-serif;
   color: #686868;
}
h1, h2, h5{
   font-family: 'Open Sans', sans-serif;
}
h3, h4, h6{
   font-family: 'Raleway', sans-serif;
}
a{
   text-decoration: none;
}
ul{
   padding: 0;
}
ul li{
   list-style: none;
}


/* ================
   Navigation Menu 
=================== */
header{
   border-bottom: 2px solid #0096ff;
}
.navbar{
   padding: 0;
}
.navbar-light .navbar-nav .nav-link.active, 
.navbar-light .navbar-nav .show>.nav-link {
   background: #0096ff;
   text-transform: uppercase;
   color: #fff;
}
.navbar-expand-lg .navbar-nav .nav-link {
   padding-right: 1rem;
   padding-left: 1rem;
}
.navbar-light .navbar-nav .nav-link {
   padding: 20px;
   margin: 0 10px;
   font-weight: 600;
   text-transform: uppercase;
   color: #3f3f3f;
   
}
.navbar-light .navbar-nav .btn-signup{
   display: block;
   padding: 5px 20px;
   margin: 13px 10px;
   border: 2px solid #00c9b7;
   text-transform: uppercase;
   color: #00c9b7;
}
.navbar-light .navbar-nav .btn-signup:hover{
   background: #00c9b7;
   color: #fff
}

/* ================
   Navigation Menu 
=================== */
.hero-section{
   background: url(../img/banner.png) no-repeat center;
   background-size: cover;
   position: relative;
   padding: 150px 0 250px;
   z-index: 1;
}
.hero-section::after{
   content:"";
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   background: rgba(0, 150, 255, .35);
   z-index: -1;
}
.hero-section h1{
   /* font-size: 48px; */
   font-size: 42px;
   font-weight: 700;
   color: #fff;
}
.hero-section span{
   color: #f08200;
}
.hero-section p{
   padding: 15px 0;
   font-size: 20px;
   font-family: 'Raleway', sans-serif;
   color: #fff;
}
.hero-section ul li{
   display: inline;
   margin: 0 15px 0 0;
}


/* ================
   Features Section 
=================== */
.features-area{
   background: #edf7fe;
}
.features-header{
   padding: 25px;
   border: 1px solid #efefef;
   background: #fff;
   margin-top: -93px;
   position: relative;
   z-index: 1;
}
.features-header h4{
   font-family: 'Open Sans', sans-serif;
   text-align: center;
   color: #5e5e5e;
}
.features-body{
   padding: 35px;
   border-left: 1px solid #efefef;
   border-right: 1px solid #efefef;
   background: #f7fcff;
}
.feature-item{
   text-align: center;
   transition: 0.5s ease-in-out;
}
.feature-item .fa{
   background: #fff;
   width: 100px;
   height: 100px;
   line-height: 100px;
   border: 2px solid #0096ff;
   border-radius: 50%;
   font-size: 44px;
   color: #0096ff;
   transition: 0.5s ease-in-out;
}
.feature-item h5{
   padding: 20px 0 0;
   font-weight: 600;
   color: #2e2e2e;
   transition: 0.5s ease-in-out;
}
.feature-item:hover .fa{
   background: #0096ff;
   color: #fff;
   cursor: pointer;
}
.feature-item:hover h5{
   color: #0096ff;
   cursor: pointer;
}
.features-footer{
   padding: 25px;
   border: 1px solid #efefef;
   background: #fff;
   margin-bottom: -93px;
   position: relative;
}
.btn-features{
   background: #fff;
   display: block;
   margin: 0 auto;
   border: 2px solid #0096ff;
   padding: 20px 45px;
   transition: 0.5s ease-in-out;
   color: #0096ff;
}
.features-footer:hover .btn-features{
   background: #0096ff;
   color: #fff;
   cursor: pointer;
}


/* ====================
   Video Calss Section 
======================= */
.video-section{
   background: #0096ff;
   padding: 175px 0 0;
}
.video-section h5 {
   position: relative ;
   color: #fff;
   font-size: 18px;
   font-weight: 600;
   padding-left: 15px;
}
.video-section h5::before{
   content: "";
   position: absolute;
   width: 3px;
   height: 15px;
   top: 2px;
   left: 0;
   background: #fff;
   transform: rotate(30deg);
}
.video-section h5::after{
   content: "";
   position: absolute;
   width: 3px;
   height: 15px;
   top: 2px;
   left: 5px;
   background: #fff;
   transform: rotate(30deg);
}
.video-section h1 {
   color: #fff;
   font-size: 38px;
   font-weight: 600;
   line-height: 42px;
   padding: 10px 0;
}
.video-section p{
   color: #fff;
   font-size: 14px;
}
.btn-video{
   position: relative;
   overflow: hidden;
   border: none;
   padding: 10px 40px;
   color: #0096ff;
   font-weight: 600;
   text-transform: uppercase;
   background: #fff;
   transition: 0.4s ease-in-out;
   z-index: 1;
}
.btn-video::before{
   content: "";
   position: absolute;
   top: 0;
   left: -100%;
   width: 100%;
   height: 100%;
   background: #333;
   transition: 0.4s ease-in-out;
   z-index: -1;
}
.btn-video:hover::before{
   left: 0;
}
.btn-video:hover{
   color: #fff;
}


/* ==============
   Promo Section 
=================*/
.promo-section{
   padding: 75px 0;
}
.promo-section h2{
   color: #484848;
   text-align: center;
   font-size: 32px;
}
.title-border{
   background: #0096ff;
   width: 50px;
   height: 3px;
   display: block;
   margin: 15px auto;

}
.promo-section p{
   text-align: center;
   font-family: 'Raleway', sans-serif;
   color: #7c7c7c;
   font-weight: 500;
}
.promo-content{
   padding-top: 50px;
}
.promo-content img{
   display: block;
   margin: 0 auto;
}
/* Promo Left Content */
.promo-left{
   text-align: right;
}
.promo-hover{
   margin-bottom: 50px;
}
.promo-left h3{
   color: #4f4f4f;
   font-size: 30px;
   transition: 0.4s ease-in-out;
}
.promo-left p{
   text-align: right;
   color: #797979;
   font-size: 16px;
}
.promo-left .fa{
   display: block;
   text-align: center;
   border: 2px solid #0096ff;
   width: 80px;
   height: 80px;
   border-radius: 50%;
   line-height: 75px;
   font-size: 36px;
   color: #0096ff;
   transition: 0.4s ease-in-out;
   cursor: pointer;
}
/* .promo-left .fa{
   display: block;
   text-align: center;
   border: 2px solid #0096ff;
   width: 80px;
   height: 80px;
   border-radius: 50%;
   line-height: 95px;
   font-size: 36px;
   color: #0096ff;
   transition: 0.4s ease-in-out;
   cursor: pointer;
} */
.promo-hover:hover h3{
   color: #0096ff;
}
.promo-hover:hover .fa{
   background: #0096ff;
   color: #fff;
}

/* Promo right Content */
.promo-right{
   text-align: left;
}
.promo-right h3{
   color: #4f4f4f;
   font-size: 30px;
   transition: 0.4s ease-in-out;
}
.promo-right p{
   text-align: left;
   color: #797979;
   font-size: 16px;
}
.promo-right .fa{
   display: block;
   text-align: center;
   border: 2px solid #0096ff;
   width: 80px;
   height: 80px;
   border-radius: 50%;
   line-height: 75px;
   font-size: 36px;
   color: #0096ff;
   transition: 0.4s ease-in-out;
   cursor: pointer;
}
/* .promo-right .fa{
   display: block;
   text-align: center;
   border: 2px solid #0096ff;
   width: 100px;
   height: 100px;
   border-radius: 50%;
   line-height: 95px;
   font-size: 36px;
   color: #0096ff;
   transition: 0.4s ease-in-out;
   cursor: pointer;
} */


/* Download Section */
.download-section{
   padding: 50px 0;
   background: #edf7fe;
   border-top: 2px solid #0096ff;
}
.download-content{
   background: #fff;
   text-align: center;
   border-top: 2px solid #eeeeee;
   border-bottom: 2px solid #eeeeee;
   padding: 25px;
}
.download-content h2{
   color: #4f4f4f;
   font-size: 30px;
   padding-bottom: 15px;
}
.btn-download{
   color: #fff;
   border: 2px solid #333;
   padding: 10px 45px;
   border-radius: 30px;
   background: #0096ff;
   font-size: 20px;
   text-transform: uppercase;
   display: block;
   width: 250px;
   margin: 0 auto 20px;
}
.btn-download:hover{
   background: #333;
   color: #fff;
}


/* =================
   Browsing Section 
====================*/
.browsing-section h5 {
   position: relative ;
   color: #696969;
   font-size: 20px;
   font-weight: 600;
   padding-left: 15px;
}
.browsing-section h5::before{
   content: "";
   position: absolute;
   width: 3px;
   height: 15px;
   top: 2px;
   left: 0;
   background: #0096ff;
   transform: rotate(30deg);
}
.browsing-section h5::after{
   content: "";
   position: absolute;
   width: 3px;
   height: 15px;
   top: 2px;
   left: 5px;
   background: #0096ff;
   transform: rotate(30deg);
}
.browsing-section{
   padding: 75px 0;
   background: #edf7fe;
}
.browsing-section h2{
   color: #525151;
   text-align: left;
   font-size: 35px;
}
.browsing-section p{
   text-align: left;
   font-family: 'Open Sans', sans-serif;
   color: #7c7c7c;
   font-weight: 500;
   padding: 25px 0 58px;
}
.btn-browsing{
   position: relative;
   overflow: hidden;
   border: none;
   padding: 10px 35px;
   color: #fff;
   font-weight: 600;
   text-transform: uppercase;
   background: #0096ff;
   transition: 0.4s ease-in-out;
   z-index: 1;
}
.btn-browsing::before{
   content: "";
   position: absolute;
   top: 0;
   left: -100%;
   width: 100%;
   height: 100%;
   background: #333;
   transition: 0.4s ease-in-out;
   z-index: -1;
}
.btn-browsing:hover::before{
   left: 0;
}
.btn-browsing:hover{
   color: #fff;
}


/* ====================
   Screenshots Section 
=======================*/
.screenshots-section{
   padding: 75px 0;
}
.screenshots-section h2{
   text-align: center;
}
.icon{
   display: block;
   width: 5%;
   margin: 0 auto;
}
.screenshots-slider{
   padding: 100px 0 0;
}
.slick-initialized .slick-slide:focus{
   outline: none;
}
.center img{
   transform: scale(.9);
   opacity: .3;
}
.center .slick-center img{
   transform: scale(1.1);
   margin: -43px 0 0;
   opacity: 1;
}
.slick-list{
   padding-top: 50px !important;
}


/* ================
   Counter Section 
===================*/
.counter-section{
   background: #0096ff;
   padding: 50px 0;
}
.counter-section .fa{
   color: #fff;
   font-size: 65px;
}
.counter-section h3{
   color: #fff;
   font-family: 'Open Sans', sans-serif;
   margin: 0;
}
.counter-section h6{
   color: #fff;
}


/* =============
   News Section 
================*/
.news-section{
   background: #edf7fe;
   padding:75px 0;
}
.news-section h2{
   text-align: center;
   color: #3e3e3e;
   font-family: 'Raleway', sans-serif;
}
.section-title{
   background: #0096ff;
   height: 2px;
   width: 45px;
   margin: 10px auto;
}
.news-section p{
   text-align: center;
   color: #717272;
   font-family: 'Raleway', sans-serif;
}
.news-content{
   padding-top: 150px;
}
.widget{
   background: #fff;
   padding: 30px;
   border-top: 3px solid #0096ff;
}
.widget .user{
   display: block;
   margin: -100px auto 25px;
   border: 10px solid #edf7fe;
   border-radius: 50%;
}
.widget h1{
   font-family: 'Chilanka', cursive;
   color: #ff9600;
   text-align: center;
   margin: 0;
}
.widget h2{
   font-size: 34px;
   text-transform: uppercase;
   font-weight: 700;
   margin: 0;
   color: #0096ff;
}
.fa-quote-left{
   color: #ff9600;
   font-size: 36px;
   display: block;
   text-align: center;
   margin: 25px 0;
}
.widget p{
   color: #717272;
   font-weight: 500;
   line-height: 30px;
   padding: 0 0 35px;
}
.widget-image-content{
   background: url(../img/news-one.png) no-repeat center;
   background-size: cover;
   position: relative;
   margin: 25px 0;
   padding: 20px;
   z-index: 1;
}
.widget-image-content::after{
   content: "";
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   background: rgba(0, 150, 255, .7);
   z-index: -1;
}
.widget-image-content p{
   color: #fff;
   text-align: center;
   font-size: 16px;
}
.widget-image-content .btn-readmore{
   display: block;
   margin: 0 auto;
   border: none;
   color: #0096ff;
   padding: 6px 30px;
   border-radius: 25px;
   font-weight: 600;
   transition: 0.4s ease-in-out;
}
.btn-readmore:hover{
   background: #0096ff;
   color: #fff;
}
.widget-image{
   background: url(../img/news-two.png) no-repeat center;
   background-size: cover;
   position: relative;
   margin: 25px 0;
   padding: 20px;
   z-index: 1;
}
.widget-image::after{
   content: "";
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   background: rgba(0, 150, 255, .7);
   z-index: -1;
}
.widget-image p{
   padding: 30px 0px;
   color: #fff;
   text-align: center;
   font-size: 16px;
   font-weight: 500;
}
.widget-content{
   background: #fff;
   margin-top: -25px;
}
.widget-content p{
   text-align: center;
   padding: 30px 15px;
   font-size: 14px;
   line-height: 30px;
   font-weight: 500;
   margin-bottom: 30px;
}
.read{
   text-decoration: none;
   display: block;
   width: 150px;
   height: 75px;
   background: #f8f8f8;
   text-align: center;
   margin: 0 25px;
   padding: 15px;
   border-bottom: 3px solid #0d6efd;
   color: #0d6efd;
   font-weight: 600;
}
.read .fa{
    font-size: 20px;
    color: #4a4a4a;
}
.blog-share{
   padding: 15px 45px;
   text-align: right;
}
.blog-share ul{
   padding: 0;
}
.blog-share ul li{
   list-style: none;
   display: inline;
   margin-left: 15px;
}
.blog-share ul li a .fa{
   color: #a2a2a2;
   font-size: 26px;
}



.blog{
   background: #fff;
   border: 1px solid #dbdbdb;
   border-top: 3px solid #0096ff;
   margin-bottom: 20px;
}
.first-post{
   margin-top: -60px;
}
.blog h2{
   /* padding: 15px 25px; */
   padding: 25px 25px;
   text-align: left;
   font-size: 30px;
   font-weight: 600;
   margin: 0;
}
.blog-img{
   position: relative;
   overflow: hidden;
}
.blog-img img{
   transition: 0.4s ease-in-out;
}
.blog-img:hover img{
   transform: scale(1.1);
}
.blog p{
   /* padding: 15px 25px; */
   padding: 25px 25px;
   text-align: left;
   color: #505050;
   font-weight: 500;
   margin-bottom: 52px;
}
.read-more{
   text-decoration: none;
   display: block;
   width: 150px;
   height: 75px;
   background: #f8f8f8;
   text-align: center;
   margin: 0 25px;
   padding: 15px;
   border-bottom: 3px solid #0d6efd;
   color: #0d6efd;
   font-weight: 600;
}
.read-more .fa{
    font-size: 20px;
    color: #4a4a4a;
}
.blog-sharing{
   padding: 15px 45px;
   text-align: right;
}
.blog-sharing ul{
   padding: 0;
}
.blog-sharing ul li{
   list-style: none;
   display: inline;
   margin-left: 35px;
}
.blog-sharing ul li a .fa{
   color: #a2a2a2;
   font-size: 26px;
}


/* ================
   Contact Section 
===================*/
.contact-section{
   background: url(../img/contact-bg.png) no-repeat center;
   background-size: cover;
   padding: 75px 0;
}
.contact-section h2{
   text-align: center;
   color: #fff;
   font-family: 'Raleway', sans-serif;
}
.contact-section p{
   text-align: center;
   color: #fff;
   font-family: 'Raleway', sans-serif;
}
.contact-area{
   margin-top: 75px;
}
.contact-box{
   position: relative;
   background: rgba(0,0,0,0.6);
   padding: 25px;
}
.contact-box::before{
   content: "";
   position: absolute;
   background: #0096ff;
   width: 20%;
   height: 3px;
   top: 0;
   left: 40%;
}
.contact-box h3{
   color: #fff;
   text-align: center;
   font-size: 26px;
}
.social-media{
   margin: 30px 0;
}
.social-media ul{
   padding: 0;
}
.social-media ul li{
   list-style: none;
   display: inline;
   margin: 10px 5px;
}
.social-media ul li a .fa{
   background: #fff;
   width: 35px;
   height: 35px;
   text-align: center;
   line-height: 35px;
   color: #333;
   border-radius: 50%;
   font-size: 22px;
   transition: 0.4s ease-in-out;
}
.social-media ul li a .fa:hover{
   background: #0096ff;
   color: #333;
}
.contact-box p{
   color: #fff;
   text-align: left;
   font-size: 16px;
   margin-bottom: 30px;
}
.contact-box-hr{
   background: #5d5d5d;
   height: 1px;
   margin-bottom: 30px;
}
.address-info ul li{
   color: #fff;
   line-height: 34px;
   font-size: 15px;
}
.contact-box .form-control{
   border: 2px solid #0096ff;
   border-radius: 0;
   background: #212529;
   color: #fff;
}
.contact-box .contact-input{
   height: 54px;
}
.btn-send{
   background: #0096ff;
   color: #fff;
   padding: 17px 45px;
   text-transform: uppercase;
   border-radius: 3px;
   margin: 15px 0;
}
.btn-send:hover{
   background: #f08200;
   color: #fff;
}


/* Footer */
footer{
   background: #0b0d1b;
   padding: 30px;
}
.footer-logo{
   padding: 5px;
   border: 2px solid #fff;
   width: 250px;
   text-align: center;
   margin: 0 auto;
}
.footer-content{
   padding: 5px;
   border: 5px solid #fff;
}
footer p{
   text-align: center;
   color: #fff;
   margin: 20px 0 0;
}







/* ======================
   Note Book Media Query 
========================*/
@media (min-width: 769px) and (max-width: 992px)
{
header{ padding: 20px 0; }
.hero-section{ padding: 75px 0 150px; }
.hero-section h1 { font-size: 28px; text-align: center; }
.hero-section p{ text-align: center; }
.hero-section ul{ text-align: center; }
.hero-section ul li img{ width: 150px; }
.feature-item{ margin-bottom: 30px; }
.video-section{ text-align: center; }
.video-section h1 { font-size: 28px; line-height: 32px; }
.video-section h5{ width: 120px; margin: 0 auto; }
.btn-video{margin-bottom: 22px;}
.promo-section { padding: 50px 0; }
.promo-section h2{ font-size: 28px; }
.promo-left h3, .promo-left p, .promo-right h3, .promo-right p{ text-align: center; }
.promo-left .fa, .promo-right .fa{ margin: 0 auto;width: 60px;height: 60px;line-height: 60px;}
.promo-content img { margin: 0 auto 50px; margin-left: 14px !important;}
.promo-hover { margin-bottom: 20px; }
.download-content h2{ font-size: 26px; }
.screenshots-section { padding: 50px 0; }
.center .slick-center img{ display: block; margin: 0 auto; }
.counter-section{ text-align: center; }
.news-content { padding-top: 75px; }
.blog-sharing { padding: 15px 20px;text-align: right; }
.blog-share{padding: 103px 0px;margin: 0 0 -75px -115px;text-align: center;}

}



/* ==================
  Tablet Media Query 
====================*/
@media (min-width: 577px) and (max-width: 768px)
{
header{ padding: 20px 0; }
.hero-section{ padding: 75px 0 150px; }
.hero-section h1 { font-size: 28px; text-align: center; }
.hero-section p{ text-align: center; }
.hero-section ul{ text-align: center; }
.hero-section ul li img{ width: 150px; }
.feature-item{ margin-bottom: 30px; }
.video-section{ text-align: center; }
.video-section h1 { font-size: 28px; line-height: 32px; }
.video-section h5{ width: 120px; margin: 0 auto; }
.promo-section { padding: 50px 0; }
.promo-section h2{ font-size: 28px; }
.promo-left h3, .promo-left p, .promo-right h3, .promo-right p{ text-align: center; }
.promo-left .fa, .promo-right .fa{ margin: 0 auto; }
.promo-content img { margin: 0 auto 50px; }
.promo-hover { margin-bottom: 20px; }
.browsing-section img{width: 45%;display: block; margin: -55px auto 50px;}
.browsing-section h5{margin-left: 40%;}
.browsing-section h2{text-align: center;font-size: 24px;}
.browsing-section p{text-align: center;}
.btn-browsing{display: block;margin: 0 auto;}
.download-content h2{ font-size: 26px; }
.screenshots-section { padding: 50px 0; }
.center .slick-center img{ display: block; margin: 0 auto; }
.counter-section{ text-align: center; }
.news-content { padding-top: 75px; }
.blog-sharing { padding: 15px 20px; text-align: right; }

}




/* ==========================
   Mobile Device Media Query 
=============================*/
@media (min-width: 320px) and (max-width: 576px)
{
header{ padding: 20px 0; }
.hero-section{ padding: 75px 0 150px; }
.hero-section h1 { font-size: 28px; text-align: center; }
.hero-section p{ text-align: center; }
.hero-section ul{ text-align: center; }
.hero-section ul li img{ width: 150px; }
.feature-item{ margin-bottom: 30px; }
.video-section{ text-align: center; }
.video-section h1 { font-size: 28px; line-height: 32px; }
.video-section h5{ width: 120px; margin: 0 auto; }
.promo-section { padding: 50px 0; }
.promo-section h2{ font-size: 28px; }
.promo-left h3, .promo-left p, .promo-right h3, .promo-right p{ text-align: center; }
.promo-left .fa, .promo-right .fa{ margin: 0 auto; }
.promo-content img { margin: 0 auto 50px; }
.promo-hover { margin-bottom: 20px; }
.browsing-section img{width: 45%;display: block; margin: -55px auto 50px;}
.browsing-section h5{margin-left: 40%;}
.browsing-section h2{text-align: center;font-size: 24px;}
.browsing-section p{text-align: center;}
.btn-browsing{display: block;margin: 0 auto;}
.download-content h2{ font-size: 26px; }
.screenshots-section { padding: 50px 0; }
.center .slick-center img{ display: block; margin: 0 auto; }
.counter-section{ text-align: center; }
.news-content { padding-top: 75px; }
.blog-sharing { padding: 15px 20px; text-align: right; }
.blog-sharing ul{margin-bottom: 0px;}
.mbl{margin-top: -74px;}

}