* {
    margin: 0;
    padding: 0;
}

body {
    overflow-x: hidden !important;
    box-sizing: border-box;
    padding: 0;
    margin: 0
}

/*creating css custom font for raisonne*/

@font-face{
    font-family: 'raisonne';
    src: url('../webfonts/raisonne-demibold.ttf');

}

/*creating css custom font for trajan*/

@font-face{
    font-family: 'trajan';
    src: url('../webfonts/trajan.ttf');

}

.trajan-font{
    font-family: 'trajan';
}

h1,h2,h3,h4,h5,h6{
    font-family: trajan;
    text-align: center;
}

ul, li {
    list-style: none;
}

a:hover {
    text-decoration: none;
}

p{
    text-align: center;
}

a.nav-hover {
     transition: all .3s ease-in-out;
}
a.nav-hover:hover {
    margin-top: 5px;
    padding-bottom: 10px;
    border-bottom: 2px solid #dc3545;
}

.banner {
    background: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url('../images/slide1.jpg');
    width: 100%;
    height: 85vh;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.icons {
   border-radius: 100%;
   font-size: 3em; 
   padding: 10px; 
   background: #ddd4d4; 
   color: #dc3545;
}

.price-icon-planA {
    width: 150px;
    height: 150px;
    border-radius: 100%;
    border: 2px #fff solid;
    margin: 9px auto;
}

.price-icon-planB {
    border: 2px #333 solid;
}

img{
    max-height: 100%;
    max-width: 100%;
}

.brand{
	width: 7em; 
	float: left;
	position: relative;
	z-index: 3;
}


.four-col-section h1{
    padding: 20px 0;
}

.four-col-section h1::after{
    content: '';
    background: #0a3b60;
    display: block;
    height: 3px;
    width: 400px;
    margin: 1px auto;
}


.icon{
    width: 7em; 
    height: 7em; 
    border-radius: 100%; 
    margin: 1em auto;
    padding: 25px;
    border: 2px #1f578a solid;
}

.calculate {
    padding: 10px;
    border-radius: 5px;
    outline: none;
    border: 0;
    font-size: 100%;
    background: gainsboro;
    font-weight: bold;
}

.cal_top {
    font-weight: bold;
}

/*=======================================styling for why choose-us===================================================================*/

.choose-us{
    height: 60vh;
    background-image:linear-gradient(rgba(0,0,0,0.9), rgba(0,0,0,0.8)), url('../images/bg3.jpg');
    background-size: cover;
    background-position: center;
    /*background-attachment: fixed;*/
    overflow: hidden;
}

.col-lady{
    height: 60vh;
    padding: 18px;	
}

.choose-us-reason h3{ 
    color: #fff;
    padding: 10px; 
    text-align: center;
}

.choose-us-reason h3::after{
    content: '';
    background: #efefef;
    display: block;
    height: 3px;
    width: 100px; 
    margin: 1px auto;
}

.choose-us-reason-txt{
    background: #fff;
    padding: 3px; 
    margin: 5px 0;
    border-radius: 5px;
}

.fade-in-choose{
    opacity: 1;
    transform: translateX(0);
}

.best-option{
    height: auto;
    background: url(../images/b-opt.jpg) no-repeat;
    background-size: cover;
    color: #fff;
    padding: 0 0 2em 0;
}

@media (max-width: 992px) {
    .slider {
        font-size: 0.5em !important;
    }
    
    .slider h4 {
        font-size: 2.5em !important;
    }
}

.col-count-up{
    width: 11.5em;
    height: 11.5em;
    border: 2px solid #fff; 
    border-radius: 50%; 
    margin: 0 auto;
}

.count-up-icon{
    font-color: #fff;
    font-size: 5em;
    margin: .3em .6em;
    text-align: center;
}

.t-u{
    margin: 5px 0;
}

.pay-met-img{
    width: 7.8em; 
    height: 8em;
}

.footer{
    background: url('../images/bg2.jpg') no-repeat;
    background-color: #03031f;
    background-position: center;
    background-size: cover;
    color:#fff;
    font-size: .8em;
    padding: 10px;
}

.fade-in-footer{

	opacity: 1;

	/*transform: translate(0) rotate(0);*/

}

.quick-link{

}

.pay-met-img{

	width: 7.8em; 

	height: 8em;

}


/*==========================styling for the pricing section ================================*/

.price-package{

	background: linear-gradient(rgba(0,0,0,0.9),rgba(0,0,0,0.9)), url(../images/bg4.jpg) no-repeat center center;

	height: auto;

	color: #fff;

	margin: 80px 0 20px 0;

}

.pricing-head{

	background: url(../images/bg2-pricing.jpg);

}

.price-package h3{

	padding: 50px; 

}

.price-package h3::after{

	content: '';

    background: #efefef;

    display: block;

    height: 3px;

    width: 400px;

    margin: 1px auto;

    transition: .8s ease-in-out;

}

.price-package h3:hover::after{

	content: '';

    background: #070c3d;

    display: block;

    height: 3px;

    width: 400px;

    margin: 1px auto;



}

.price-icon-planA {

	width: 150px; 

	height: 150px; 

	border-radius: 100%;

	border: 2px #fff solid; 

	margin: 9px auto;

}

.price-icon-planB {

	width: 150px; 

	height: 150px; 

	border-radius: 100%;

	border: 2px #333 solid; 

	margin: 9px auto;

}

.price-sec{

	border-radius: 30px; 

	

	margin-bottom: 40px;

	opacity: 0;

	transform: translateX(200%);



}

.fade-in-price{

	opacity: 1;

	transform: translateX(0);

}

.price-sec:hover{

	cursor: pointer;

	background: #0d1d37 ;

}

.price-sec p{

	font-size: .8em;

}

.pricing-btn{

	margin: 2px auto;

}

/* ===============================styling for FAQ starts here =================================*/

.faq h3{

	padding: 0 0 30px 0;

}

.faq h3::after{

	content: '';

	background: #fff; 

	display: block;

	height: 3px; 

	width: 100px; 

	margin: 1px auto; 

}

.faq-icon{

	display: block;

}

.faq-head{

	background: url('../images/bg2-faq.jpg');

}



/*===================================contact us styling starts here=================================*/



.col-contact-side{

	margin: 20px 0 0 0;

}

.col-contact-side-i{

	font-size: 3em;

	padding-top: 10px;

}

.col-contact-side b{

	padding-left: 45px;

}.col-contact-side p{

	padding-left: 90px;

}

.bg-contact-us{

	background: url(../images/bg-contact.jpg);

}



/*=============================styling for sign-up section in the area ====================================*/

.sign-up-bg{

	background: url(../images/b-opt.jpg);

	background-position: center; 

	background-size: cover;

	height:auto;

}

.btn-submit{

	width: 10em;

	background: #dc3545 ;

	border: 0 solid;

}

.col-form{

	margin: 2px auto; 

	padding: 30px;

}

.form-main-sec{

	background: #fff; 

	border-radius: 10px;

    padding: 1em;

}

.sign-up-col-txt p, h3{

	text-align: left;

}

#message {

	width: 80px;

	margin: 20px auto;

	color: #fff;

}

.form-action{

    width: 80%;

    height: 10vh;

    margin: 3px auto;

    color: #fff;

}

.cen{

	text-align: center;

}

/*========= styling for the google select language============*/



/*Extra small devices (portrait phones', less than 576px)*/

/*// No media query for `xs` since this is the default in Bootstrap*/





/*===========Responsiveness========================*/

/*// Small devices (landscape phones, 576px and up)*/

@media screen and (max-width:576px ){

/*-----------------------for the nav-----------------------*/
.four-col-section h1{
    font-size:1.3em;

}

.choose-us{
    height: auto;
}

	.col-lady{

	    margin: 0 auto;

	}

	.trade-option-1{

		overflow: scroll;

	}

	.text-bg{

		margin: 3em 0;

	}

	.text-bg h2{

		font-size: 2em;

	}.text-bg h5{

		font-size: 1em;

	}

	.learn-more{

		font-size: 1em;

		transition: .8s ease;

	}

	.learn-more:hover{

		font-size: 1.2em;

	}



	.pay-met-img {

	    width: 3.8em;

	}

	.text-bg{
            margin: 5em 0;
	}
	/* ============================contact us styling starts here ============================*/

	.abt-us-txt h2{
		padding: 80px 20px;
		font-size: 2em;
	}
	/*================FAQ===========================*/
	.faq-icon{
		width: 100px; 
		height: 100px;
	}
	.col-faq-show{
		display: block;
	}
}

@media screen and (max-width:800px ){
/*-----------------------for the nav-----------------------*/
    .choose-us{
    height: auto;
    }
}

.learn-more{
    background: #dc3545;
    border: none;
    font-size: 1.3em;
    transition: .8s ease;
}

.learn-more:hover{
    font-size: 1.5em;
}

.social-media{
    font-size: 2em;
    color: #fff;
    transition: .8s ease;
}

.social-media:hover{
    color: #fcca00;
}

.abt-us, .faq-head, .pricing-head, .bg-contact-us{
    height: 40vh;
    position: relative;
    z-index: 0;
    background-position: center;
    background-size: cover; 
    margin: 0 0 10vh 0; 
}

.abt-us{
    background: url('../images/bg3.jpg');
}

.abt-us-txt h2{
    font-family: raleway;
    padding: 80px;
    font-weight: 400;
    text-align: left;
    color: #efefef;
    font-size: 3em;
}

.flying-man{
    width: 40vh;
    margin:50px 20px;
    float: right;
}

.abt-p-txt p{
    text-align: left;
    font-family: raleway;
    font-size: .9em;
}



/*==========================styling for the pricing section ================================*/

.price-package{
    background: linear-gradient(rgba(0,0,0,0.9),rgba(0,0,0,0.9)), url(../images/bg4.jpg) no-repeat center center;
    height: auto;
    color: #fff;
    margin: 80px 0 20px 0;
}

.pricing-head{
    background: url(../images/bg2-pricing.jpg);
}

.price-package h3{
    padding: 50px; 
}

.price-package h3::after{
    content: '';
    background: #efefef;
    display: block;
    height: 3px;
    width: 400px;
    margin: 1px auto;
    transition: .8s ease-in-out;
}

.price-package h3:hover::after{
    content: '';
    background: #070c3d;
    display: block;
    height: 3px;
    width: 400px;
    margin: 1px auto;
}

/*=====================================================styling for about us section =============================================*/

.abt-us, .faq-head, .pricing-head, .bg-contact-us{
    height: 40vh;
    position: relative;
    z-index: 0;
    background-position: center;
    background-size: cover; 
    margin: 0 0 10vh 0; 
}

.abt-us{
    background: url('../images/bg3.jpg');
}

.abt-us-txt h2{
    font-family: inherit;
    padding: 80px;
    font-weight: 400 !important;
    text-align: left !important;
    color: #efefef;
    font-size: 2.5em;

}

.flying-man{
    width: 40vh;
    margin:50px 20px;
    float: right;
}

.abt-p-txt p{
    text-align: justify !important;
    font-family: raleway;
    font-size: .9em;
}

/* ===============================styling for FAQ starts here =================================*/
.faq h3{
    padding: 0 0 30px 0;
}

.faq h3::after{
    content: '';
    background: #fff; 
    display: block;
    height: 3px; 
    width: 100px; 
    margin: 1px auto; 
}

.faq-icon{
    display: block;
}

.faq-head{
    background: url('../images/bg2-faq.jpg');
}

/*===================================contact us styling starts here=================================*/

.sign-up-bg{

	background: url(../images/b-opt.jpg);

	background-position: center; 

	background-size: cover;

	height:auto;

}

.btn-submit{

	width: 10em;

	background: #dc3545 ;

	border: 0 solid;

}

.col-form{

	margin: 2px auto; 

	padding: 30px;

}

.form-main-sec{

	background: #fff; 

	border-radius: 10px;

    padding: 1em;

}

.sign-up-col-txt p, h3{

	text-align: left;

}

#message {

	width: 80px;

	margin: 20px auto;

	color: #fff;

}

.form-action{

    width: 80%;

    height: 10vh;

    margin: 3px auto;

    color: #fff;

}

.cen{

    text-align: center;

}

#to-top {
    text-decoration: none;
    position: fixed;
    bottom: 24px;
    left: 2%;
    overflow: hidden;
    z-index: 999;
    width: 64px;
    height: 64px;
    border: none;
    text-indent: 100%;
    background: url(../images/whatsapp.png) no-repeat 0px 0px;
    background-size: 65px;
}

#toTopHover {
    width: 64px;
    height: 64px;
    display: block;
    overflow: hidden;
    float: left !important;
}
