/*======================================
=           General Styles            =
======================================*/
body {
	font-family: "Montserrat", sans-serif!important;
	background-color : white;
	margin           : auto;
	font-size        : 16px;
	font-weight      : 300;
	color            : #333;
	line-height      : 24px;
}

h3, h4, h5, h6, p {
	letter-spacing : -0.5px;
}

h1 {
	letter-spacing : -2px;
	font-weight: 700!important;
}

h1::after {
	content : "";
	display : block;
	width   : 150px;
	border  : 0.5px solid #CCC;
	margin  : 15px auto;
	padding : 0px;
}

h1 span {
	color : #999;
}

h2 {
	font-size      : 40px;
	letter-spacing : -1px;
}

h2 span {
	color : #999;
}

h3 {
	font-size : 30px
}

h4 {
	font-size   : 24px;
	font-weight : 700!important;
	line-height : 36px;
}

h5 {
	font-size   : 18px;
	font-weight : 400;
	
}

a:link {
	text-decoration : none;
}

a.text-warning {
	color : #FF0!important;
}

a.text-warning:focus, a.text-warning:hover {
	color : #FFFF8C!important;
}

u {
	font-weight: 500;
}

hr {
	clear : both;
}

.icon {
	color        : #999;
	font-size    : 21px;
	margin-right : 10px;
}

.btn-warning {
	background-color : #FF0!important;
	border-color     : #D9D900!important;
	color            : #333;
	margin-bottom    : 15px;
	letter-spacing: -0.5px;
	font-weight: 600;
}

.img-thumbnail {
	padding    : 6px;
	box-shadow : 0 0 10px #CCC;
	border     : none;
}

.container-fluid {
	padding : 0px;
}

.center-mid {
	margin    : 0;
	position  : absolute;
	top       : 50%;
	left      : 50%;
	transform : translate(-50%, -50%);
}

.body-logo {
	max-width: 200px;
	margin: 25px auto;
}

/*======================================
=               DIVIDERS               =
======================================*/

.divider {
	border-bottom    : 1px solid #FFF;
	background-color : #E2E2E2;
	height           : 4px;
	margin           : 0.5em 0px 1.5em;
}

.divider span {
	display          : block;
	width            : 150px;
	height           : 4px;
	background-color : #125B7F;
}

.divider span.small {
	display          : block;
	width            : 100px;
	height           : 4px;
	background-color : #125B7F;
	margin           : 20px auto;
}


/*======================================
=           Navigation Top Bar           =
======================================*/

.navbar {
	border-radius : 0px;
	margin        : 0px;
	padding       : 15px 0px;
}

.nav > li {
	display    : block;
	text-align : center;
}

.mainLogo, .footerLogo {
	max-width : 200px;
}

@media (min-width : 768px) {
	.mainLogo {
		margin : 0 auto;
	}
	
	.nav > li {
		display : inline-block;
	}
}

/*======================================
=            Main Hero            =
======================================*/

.index-hero {
	background-image    : linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url("../img/mainbg.jpg");
	background-position : center center;
	background-repeat   : no-repeat;
	background-size     : cover;
}

.index-heroblock {
	min-height : 450px;
	margin     : 0px;
	text-align : center;
	position   : relative;
}

.index-heroblock h6 {
	text-transform : uppercase;
	letter-spacing : 3px;
}

.index-heroblock h3 {
	font-size   : 24px;
	font-weight : 400;
}

.pg-hero {
	background-position : center center;
	background-repeat   : no-repeat;
	background-size     : cover;
}

.pg-heroblock {
	text-align : center;
	position   : relative;
}

.pg-heroblock h6 {
	text-transform : uppercase;
	letter-spacing : 3px;
}

.pg-heroblock h3 {
	font-size   : 24px;
	font-weight : 400;
}

@media (min-width : 768px) {
	.index-heroblock {
		min-height : 500px;
	}
	
	.index-heroblock h3 {
		font-size   : 30px;
		font-weight : 400;
	}
	
}

.hero-bullet {
	margin: 10px;
	display: inline;
}


.hero-logo {
	max-width : 250px;
	margin    : 0 auto;
}

.headline-active {
	display : block;
}

.headline-inactive {
	display : none;
}

.headline a {
	margin-top : 30px;
}

.navbar-nav > li > a {
	font-size : 14px;
}

/*======================================
=            Main Body            =
======================================*/

.mainWrapper, .mainFooter {
	max-width : 1400px;
	margin    : 0 auto;
	padding   : 0 20px;
}


/*======================================
=              Section 1            =
======================================*/
#section1 {
	margin-bottom : 30px;
}

#section1 .info-block {
	margin : 15px 0px;
}

/*======================================
=              Section 2            =
======================================*/
#section2 {
	margin-bottom : 30px;
}

#section2 .alert {
	padding : 45px 25px;
}

#section2 .alert-dark {
	background-color : #333;
	border-color     : #333;
}

#section2 h4 {
	color      : #FFF;
	margin-top : 0;
	font-style : italic;
}

/*======================================
=              Section 3            =
======================================*/

#section3 {
	padding : 35px 0;
}


/*======================================
=              Section 4            =
======================================*/

#section4 {
	margin : 40px 0;
}


@media (max-width : 992px) {
	#section4 .icon {
		font-size : 30px;
	}
}

#section4 h5 {
	margin-bottom : 0px;
	color         : #999;
}

#section4 h4 {
	margin-top  : 0px;
	font-weight : 600;
	line-height : 25px;
}

#section4 h2 {
	margin-top  : 0;
	font-weight : 600;
}

#section4 h2::after {
	content : "";
	display : block;
	width   : 150px;
	border  : 0.5px solid #E2E2E2;
	margin  : 25px 0;
	padding : 0px;
}

#section4 h4::after {
	content : "";
	display : block;
	width   : 95%;
	border  : 0.5px solid #E2E2E2;
	margin  : 15px 0;
	padding : 0px;
}

#section4 .point {
	margin : 25px 0;
}

/*======================================
=            How it Works           =
======================================*/

.heroHow {
	background-image : linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url("../img/howbg.jpg");
}

/*======================================
=            Rates           =
======================================*/

.rates {
	background-image : linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url("../img/ratesbg.jpg");
}


/*======================================
=            Blog          =
======================================*/

.heroBlog {
	background-image : linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url("../img/blogbg.jpg");
}


/*======================================
=            FAQS           =
======================================*/

.faqs {
	background-image : linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url("../img/faqsbg.jpg");
}

.questions {
	margin : 0 0 30px 0;
}


.rep-title {
	font-weight      : bold;
	background-color : #FF0;
}

/*======================================
=            How to Steps            =
======================================*/

#whatyouneed {
	background : #333;
	color      : #FFF;
}

#whatyouneed .icon {
	color : #FFF;
}

#whatyouneed .btn {
	margin-top : 30px;
}

#whatyouneed h4 {
	font-size : 20px;
}

#contactUs h5 {
	color         : #FFDB79;
}

#contactUs h4, #contact-block h4 {
	font-weight : 600;
}

#contactUs h2 {
	margin-top  : 0;
	font-weight : 600;
}

#contactUs h2::after {
	content : "";
	display : block;
	width   : 150px;
	border  : 0.5px solid #E2E2E2;
	margin  : 25px 0;
	padding : 0px;
}

#contactUs .well, #contact-block .well {
	min-height   : 200px;
	background   : none;
	border-color : #D1D1D1;
}

.accordion-button:not(.collapsed) {
	color: #000000!important;
	background-color: #fffde7!important;
}

.accordion-button:not(.collapsed)::after {
	background-image: var(--bs-accordion-btn-icon)!important;
	transform: var(--bs-accordion-btn-icon-transform)!important;
}

/*======================================
=            FAQS           =
======================================*/

#contact-block {
	padding : 35px 0;
}

.contact {
	background-image : linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url("../img/contactbg.jpg");
}

.contact-form {
	margin-top : 45px;
}

.contact-form .form-control {
	border        : none;
	box-shadow    : none;
	border-radius : 0;
	border-bottom : 1px solid #CFD8DC;
	transition    : 1s ease;
}

.contact-form .form-control:focus {
	transition    : 1s ease;
	border-bottom : 1px solid #333;
}

/*======================================
=            Modal Windows            =
======================================*/

.modal-header {
	text-align : center;
	border     : none;
}

.modal-logo {
	margin    : 30px auto 0 auto;
	max-width : 250px;
}

.login-recover {
	margin     : 15px 0;
	text-align : center;
}

#login-modal .form-group {
	width  : 80%;
	margin : 0 auto 15px auto;
}

#login-modal .form-group .btn {
	margin-top : 15px;
}


/*======================================
=           Change Password           =
======================================*/

.pwd-wrapper {
	margin: 60px 0 0 0;
	min-height: 500px;
}

.pwd-wrapper h5 {
	font-weight: 600;
}

.pwd {
	background-image : linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url("../img/pwdbg.jpg");
}

/*======================================
=            Main Footer            =
======================================*/

footer {
	text-align : center;
	background : #000;
	margin-top : 30px;
	padding    : 40px 0px;
	font-size  : 14px;
	border-top : 3px solid #CCC;
	color      : #999;
}

footer ul {
	padding         : 0;
	list-style-type : none;
}

.footerLogo {
	margin : 15px auto;
}


@media (min-width : 768px) {
	footer {
		text-align : left;
	}
	
	.footerLogo {
		margin : 15px 0;
	}
	
}