body {
	    background-color: #fff;
	    font-size: 19px;
	}
	a:hover{
		text-decoration: none;
	}
	.home .logo{
		color: #fff;
	}
	.logo{
		font-size: 35px;
		color: #48ade0;
		font-weight: 600;
	}
	.navbar{
		font-family:Karla;
		font-size: 18px;
		z-index: 3;
	}
	.menu-button{
		background:#48ade0;
		color: #f8f9fa;
		border: 2px solid #48ade0;
		border-radius: 100px;
		padding:5px 25px;
		margin-left: 15px;
	}
	.mr-auto, .mx-auto{
		margin-left: auto!important;
		margin-right: 0 !important;

	}
	p{
		font-family:"Karla";
	}
	.jumbotron{
		border-radius: 0;
		margin-bottom: 0;
	}

/* ========= Homepage ========= */	
	/* main-bg */
	.main-bg {
	    height: 500px;
	    transform: rotate(20deg);
	    width: 500px;
	    border-radius: 701px 600px 500px;
	    background-image: linear-gradient(90deg, #36D1DC, #5B86E5);
	    position: absolute;
	    top: -340px;
	    left: -2%;
	    z-index: 1;
	}

	/* Hero Section  */
	.hero{
		background: #fff;
		position: relative;
	}
	.grey-cr{
		height: 500px;
		width: 500px;
		border-radius: 500px;
		position: absolute;
		bottom: -20%;
		left: -10%;
		background: #e1e1e12b;
	}
	.hero-desc{
		padding-top: 100px;
		z-index: 3;
		font-size: 21px;
	}
	.hero-img{
		width: 100%;
		position: relative;
		z-index: 2;
	}
	.hero-desc h1{
		font-family: Overpass;
		font-weight: 600;
	}
	.hero-desc p{
		margin: 30px 0;
	}
	.view-all{
		background:#fff;
		border:1px solid #4285f4;
		border-radius: 50px;
		padding:15px 25px;
		color:#4285f4;
		font-size: 19px;
		font-family: Overpass;
		font-weight: 600;
		box-shadow: 0 5px 20px -10px rgba(0,0,0,0.5);
	}
	.view-all .fa{
		margin-right: 10px;
	}
	.view-all:hover{
		background:#4285f4;
		color: #fff;
		transition: 0.3s;
	}
	.img-bg {
	    height: 400px;
	    transform: rotate(-90deg);
	    width: 400px;
	    border-radius: 100px 200px 400px;
	    background-image: linear-gradient(45deg, #36D1DC, #5B86E5);
	    position: absolute;
	    bottom: 0;
	    box-shadow:-30px 25px 50px -10px #6161614a;
	    right: -5%;
	}

	/* Tools Carousel */
	.tools-collection{
		background: #e6e6e6;
		position: relative;
	}
	.tools-collection .card {
	    border: 1px solid #bfbfbf;
	}
	.tools-collection .btn-block{
		border-radius: 100px;
		color: #519be2;
		border-color: #519be2;
		font-size: 16px;
		font-family: Muli;
		font-weight: 600;
	}
	.tools-collection .btn-block:hover{
		background: #519be2 ;
		color: #fff;
	}
	.tools-collection .card:hover {
	    border: 1px solid #fff;
	    transition: 0.3s; 
	}
	.carousel-indicators{
		bottom: -40px;
	}
	.carousel-indicators li {
	    width: 25px;
	    height: 30px;
	    border-radius: 50px;
	    border: 1px solid #000;
	    text-indent: 6px;
	    color:#3e3e3e;
	}
	.carousel-indicators .active {
	    background-color: #3e3e3e;
	    color: #fff;
	}

	.downloader-header {
	    margin-top: -20px;
	    margin-left: -20px;
	    margin-right: -20px;
	    margin-bottom: 20px;
	    padding: 20px;
	    background: #dcdcdc;
	    height: 150px;
	    position: relative;
	}
	.downloader-header img {
	    width: 80%;
	    position: absolute;
	    top: 0;
	    bottom: 0;
	    left: 0;
	    right: 0;
	    margin: auto;
	}
	.downloader-header .fa {
	    font-size: 100px;
	}

/* Fetaures Section */
	.features{
		background: #fff;
	}
	.features .col-sm-4{
		text-align: center;
	}
	.features .col-sm-4 img{
		margin: 0 auto;
		margin-bottom: 40px;
	}
	.features .col-sm-4 h3{
		font-size: 25px;
		font-weight: 400;
		font-family: "Josefin Sans";
	}
	.features .col-sm-4 p{
		font-size: 19px;
	}


/* ======== Download Page ============    */
	
	/* Tools Head  */
	.tools-head {
	    background-image: linear-gradient(130deg, #36D1DC, #5B86E5);
	    font-size: 19px;
	}
	.tools-head h1{
		margin-bottom: 30px;
		font-size: 35px;
		font-family: Overpass;
		font-weight: 600;
		color: #fff;
	}
	.tools-head .col-sm-6 img {
	    position: absolute;
	    max-width: 90%;
	    top: 30%;
	}

	/* Download section  */
	.download {
	    background: white;
	    padding-top: 20px;
	}
	.dl-form {
	    width: 80%;
	    margin: 0 auto;
	}
	.dl-form h3{
		font-family: Overpass;
		font-weight: 600;
	}
	.download-form {
	    display: flex;
	    margin:20px 0;
	}
	.dl-input {
	    padding: 25px 20px;
	    border-radius: 100px 0 0 100px;
	    border: 2px solid #48ade0;
	    border-right: none;
	}
	.dl-btn {
	    float: right;
	    border-radius: 0 100px 100px 0;
	    background: #48ade0;
	    color: #fff;
	    border:2px solid #48ade0;
	    border-left: none;
	}
	.dl-btn:hover{
		background: #000;
		transition: 0.3s;
	}
	.download hr{
		margin: 30px 0;
	}
	.dl-use{
		background: #f1f3ff;
		padding: 20px;
		font-family: Muli;
	}
	.dl-use h5{
		font-weight: 600;
	}
	.dl-use li{
		font-size: 17px;
	}
	.ads-top{
		background: #fff;
		padding:0;
		padding-top: 20px;
	}
	.ad-box{
		background: #000;
		color: #fff;
		max-width: 720px;
		width: 100%;
		height: 90px;
		margin: 0 auto;
		line-height: 90px;
		text-align: center;
		margin-top: 10px;
		margin-bottom: 10px;
	}

	/* FAQ Section   */
	.dl-faq{
		margin-top: 50px;
		font-size: 17px;
	}
	.dl-faq h4{
		font-weight: 600;
		margin-bottom: 20px;
	}
	.dl-faq .card {
	    margin-bottom: 10px;
	    border-bottom: none;
	}
	.dl-faq .card-body {
	    border-bottom: 1px solid rgba(0,0,0,.125);
	}
	.dl-faq .btn:hover , .dl-faq .btn:focus{
		text-decoration: none;
	}
	.dl-faq .card-header {
	    padding: 10px 0;
	}
	.dl-faq .btn{
		white-space: normal;
	}


/* ============== About Page ==========   */
	
	.abt-head{
		background-image: linear-gradient(-145deg, #87b2ff, #62ffbe);
	}
	.abt-head h1{
		font-size: 40px;
		font-family: Overpass;
		font-weight: 600;
		color: #000;
		text-align: center;
	}
	.abt-desc{
		background: #fff;
	}
	.abt-desc p{
		text-align: justify;
	}
	.abt-desc .abt-logo {
	    font-size: 50px;
	    font-weight: 600;
	    font-family: Muli;
	    color: #3498db;
	    text-align: center;
	    margin: 10% 0;
	}

/* =========== Contact Page ========	 */
	.contact-form{
		margin-top: 40px;
	}
	.contact-form .form-control {
	    margin: 15px 0;
	    padding: 22px 15px;
	    border-radius: 0;
	}
	.contact-btn {
	    background: #48ade0;
	    color: #fff;
	    font-family: muli;
	    font-size: 18px;
	    font-weight: 900;
	    border-radius: 0;
	}
	.contact-btn:hover{
		background: #000;
		transition: 0.3s;
	}

	.direct-box {
	    background: #48ade0;
	    padding: 30px;
	    margin-top: 40px;
	    color: #fff;
	}
	.direct-box h4{
		font-family: Overpass;
		font-weight: 600;
		text-align: center;
	}
	.direct-box .email , .direct-box .fb {
	    text-align: center;
	    margin-top: 40px;
	}
	.direct-box .email p, .direct-box .fb p{
		text-align: center;
	}
	.direct-box .fa{
		font-size: 50px;
	}
	.direct-box .fa-facebook{
		color: #fff;
	}


/* Footer */
	.mfooter{
		padding-top: 50px;
		background: #000;
		color: #fff;
		padding-bottom: 10px;
		margin-bottom: 0;
	}
	.mfooter .col-sm-4{
		margin-top: 15px;
		margin-bottom: 15px;
	}
	.mfooter ul{
		padding:0;
	}
	.mfooter li{
		list-style: none;
		font-size: 18px;
		font-family: Karla;
		line-height: 37px;
	}
	.mfooter li a{
		color: #e1e1e1;
	}
	.mfooter li a:hover{
		color: #ccc;
	}
	.ft-title {
	    font-size: 25px;
	    font-family: "Josefin Sans";
	}
	.footer-brand{
		position: relative;
	}
	.ft-contact{
		background: #3498db;
		color: #fff !important;
		border:2px solid #3498db;
		padding: 10px 25px;
		border-radius: 100px;
		font-weight: 600;
		margin-top: 100px;
	}
	.clear-fix{
		color: #e1e1e1;
		text-align: center;
		font-size: 17px;
	    margin-top: 30px;
	    padding-top: 25px;
	    border-top: 1px solid #d2cfcf;
	}
	.ft-social{
		font-size: 30px;
		padding: 0 10px;
		margin-top: 10px;
	}
	.fa-facebook{
		color: #3c579a;
	}
	.fa-twitter{
		color: #00acee;
	}
	.fa-twitter{
		color: #0077B5;
	}

	
 /*  bootstrap Modified  */
	 .form-control:focus{
	 	border: 1px solid #ced4da;
	 	box-shadow: none;
	 }


/* Media Rules   */
	@media only screen and (max-width: 768px){

	}
	@media only screen and (max-width: 576px){
		
	/* Homepage  */
	/* Hero  */
	.hero{
		overflow:hidden;
	}
	.main-bg {
	    left: -15%;
	    top: -300px;
	    width: 400px;
	    height: 400px;
	}
	.hero-desc{
		padding-top: 30px;
	}
	.img-bg{
		width: 200px;
		height: 200px;
		right: auto;
		left: 5%;
	}

	/* Downlaod Page  */
	.tools-head .col-sm-6 img{
		position: relative;
		margin: 40px 0;
	}
	}

	@media only screen and (max-width: 375px){
	.main-bg {
	    left: -34%;
	    top: -317px;
	    transform: rotate(-10deg);
	    border-radius: 83px;
	}
	}