/* GOOGLE FONTS */
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600;900&display=swap');

/* COLORS
NDM Red: #bd202f

FONTS:
font-family: 'Nunito Sans', sans-serif;
*/

/*
============
UNIVERSAL 
============
*/

html, body {
  font-family: 'Nunito Sans', sans-serif;
  overflow-x: hidden;
  }

a:hover, #refinance-contact .btn:hover, .btn-intro:hover,
 #refinance-contact-info a:hover .fa-phone, #refinance-contact-info a:hover .fa-envelope,
 footer a:hover, .modal .btn-close:hover, #thankyou .btn:hover, modal .btn-close:hover,
.fa-cloud-download-alt:hover {
    -webkit-transition: all ease .5s;
    -moz-transition: all ease .5s;
    transition: all ease .5s;
}

/*
============
HEADER
============
*/

#logo {
	box-shadow: 2px 2px 12px rgba(0,0,0,0.4);
	background: #fff;
	padding: 15px;
	position: relative;
	z-index: 9999;
}

#logo img {
	max-width: 500px; 
	height: auto;
}

#logo p {
	font-size: 1em;
	font-weight: 400;
	margin-left: 55px;
}


/*
===========
Intro SECTION
===========
*/

#intro {
	background: url("../img/home-hero-03.png") center no-repeat;
	background-size: cover;
	background-color: #bd202f;
	padding: 75px 15px;
}

#intro h1 {
    font-size: 2.5em;
    font-weight: 900;
    color: #fff;
    line-height: 1.5em;
    margin-bottom: 50px;
}

#intro h2 {
    font-size: 1.85em;
    font-weight: 900;
    color: #fff;
    line-height: 1.5em;
}

#intro h3 {
	margin-bottom: 25px;
	color: #fff;
	font-weight: 600;
	font-size: 1.25em;
}


#broker, #payment {
	border: 1px solid #fff;
	padding: 50px 10px;
	margin-bottom: 45px;
}

#intro a {
	background: #fff;
	color: #bd202f;
	padding: 10px 25px;
	font-size: 1.25em;
	font-weight: 600;
	border-radius: 5px;
	box-shadow: 2px 2px 12px rgba(0,0,0,0.4);
    text-decoration: none;
}

#intro a:hover, #intro a:focus, #intro a:active {
    background: #000;
}


/*
============
REFINANCE SECTION
============
*/

#refinance-header {
	background: #fafafa;
	text-align: left;
}

#refinance-header h2 {
	font-size: 3em;
	color: #bd202f;
	font-weight: bold;
}

#refinance-header h2:first-of-type {
	margin-top: 55px;
}

#refinance-header h2:last-of-type {
	margin-bottom: 35px;
}

#refinance-hero {
	background: url(../img/refinance/refinance-header.png) center no-repeat;
	background-size: cover;
	height: 550px;
	margin-top: 35px;
}

.btn-refinance {
	font-size: 2em;
	font-weight: 800;
	background: #bd202f;
	color: #fff;
	border-radius: 50px;
	padding: 15px 25px;
}

.btn-refinance:hover, .btn-refinance:focus, .btn-refinance:active {
    color: #bd202f;
    background: none;
    border: 2px solid #bd202f;
	text-decoration: none;
}


.btn-payment {
	background: #269b57;
	padding: 15px 20px;
	border-radius: 10px;
	box-shadow: 0px 0px 12px 0px #269b57;
	color: #fff;
	font-size: 1.25em;
	font-weight: 900;
	text-transform: uppercase;
	position: fixed;
	bottom: 0;
	right: 0;
}

.btn-payment:hover,.btn-payment:focus,
.btn-payment:active {
	text-decoration: none;
	background: #196d4e;
	color: #fff;
}

/*
============
SECTION 2
============
*/

#refinance-section2 {
	padding: 50px 0;
}

#refinance-section2 h3 {
	font-size: 2.75em;
	font-weight: 600;
	margin-top: 35px
}

#refinance-section2 p {
    color: #5d5d5d;
    font-size: 2em;
    line-height: 1.25em;
    margin-top: 25px;
    margin-bottom: 45px;
}

#refinance-section2 .btn {
	font-size: 1.5em;
	font-weight: 800;
	background: #bd202f;
	color: #fff;
	border-radius: 50px;
	padding: 15px 25px;
	margin-bottom: 35px;
}

#refinance-section2 .btn:hover, #refinance-section2 .btn:focus, #refinance-section2 .btn:active {
    color: #bd202f;
    background: none;
    border: 2px solid #bd202f;
	text-decoration: none;
}

/*
============
SECTION 3
============
*/

#refinance-section3{
	background: #EEE9E6;
}

#refinance-display img {
	padding-top: 25px;
	max-width: 225px;
}

#refinance-display p {
	font-weight: 600;
	font-size: 1.75em;
	line-height: 1.25em;
}

/*
============
CONTACT SECTION
============
*/

#refinance-contact .fa-power-off {
    margin-top: 45px;
    margin-bottom: 10px;
	font-size: 3em !important;
	color: #bd202f;
}

#refinance-contact h3 {
	font-size: 2.5em;
	font-weight: 900;
	color: #bd202f;
	margin-bottom: 35px;
}

#refinance-contact form {
	max-width: 9000px;
	margin-left: auto;
	margin-right: auto;
}

#refinance-contact form input, #refinance-contact form textarea{
	border: 2px solid #bd202f;
	background-color: white;
	font-size: 1.5rem;
	padding: 15px;

}

#btn-submit {
	background: #bd202f !important;
	color: #fff;
	font-weight: 900;
	text-transform: uppercase;
	font-size: 1.5em;
	text-align: center;
	width: 100%;
	border: 2px solid #bd202f;
	padding: 15px 0;
}


#btn-submit:hover, #btn-submit:focus, #btn-submit:active {
	color: #bd202f !important;
	background: #fff !important;
	border: 2px solid #bd202f;
}


/*
============
REVIEWS SECTION
============
*/

#reviews {
	padding: 75px 20px;
	background: #fafafa;
}

.stars {
    width: 300px;
    height: 50px;
    }

#reviews p {
	margin-top: 25px;
    text-align: left;
    font-size: 1em;
    line-height: 1.75em;
}

#reviews h3 {
	color: #bd202f;
	font-size: 1.25em;
	font-weight: 600;
}

#reviews hr {
	border: 1px solid #e3e3e3;;
}

@media (min-width:1024px) {
	.stars {
		width: 450px;
		height: auto;
	}
}

/*
============
APPROVED STATES SECTION
============
*/

#states-header {
	margin-top: 75px;
	text-align: left;
}

.txt-red {
	color: #bd202f;
}

#states-header a {
	color: #bd202f;
}

/*
============
FOOTER SECTION
============
*/

footer {
	padding-top: 55px;
	color: rgba(0,0,0,0.4);
}

.brawl-logo {
	width: 150px;
	height: auto;
}

footer a {
	width: 50px;
	height: auto;
	margin: auto;
	padding-bottom: 10px;
}

#social {
	left: 0;
	right: 0;
	margin: auto;
	margin-bottom: 25px;
}

#social a {color: #fff;}

#social .rounded-circle {
	background: #bd202f;
	padding: 10px;
	border-radius: 50%;
	width: 50px;
	height: 50px;
}

#social .fa-facebook-f, #social .fa-instagram, #social .fa-linkedin {
	font-size: 1.25em;
	margin-top: 5px;
}

footer p {
	font-size: 0.9em !important;
	text-align: left;
}


footer p {
	font-size: 1.5em;
	padding: 5px 5px 0 5px;
}

footer h4 {	font-size: 2em;}

footer a {
	color: rgba(0,0,0,0.8);
	font-weight: 600;
}

footer a:hover, footer a:focus, footer a:active {
	color: #bd202f;
	opacity: 1;
}


/*
=============
THANK YOU
=============
*/

#thankyou {
	background: rgba(250, 250, 250, 0.65);
	z-index: 9999;
}

#thankyou p {
	padding: none;
}

#thankyou .modal-dialog-centered {
	border: 2px solid #bd202f;
	border-radius: 10px;
	background: rgba(250, 250, 250, 1);
}

#thankyou h2 {
	position: relative;
	margin-top: 50px;
	margin-bottom: 25px;
	text-align: center;
	text-transform: uppercase;
	font-weight: 700;
	font-size: 1.8em;
	line-height: 1.25em;
}

#thankyou .btn-secondary {
	background: #bd202f;
	color: #fff;
	font-weight: 900;
	text-transform: uppercase;
	font-size: 1em;
	text-align: center;
	left: 0;
	right: 0;
	margin: auto;
	margin-bottom: 50px;
	width: 50%;
	border: 2px solid #bd202f;
	border-radius: 50px;
	padding: 15px 0;
}

#thankyou .btn-secondary:hover, #thankyou .btn-secondary:focus, 
#thankyou .btn-secondary:active {
	color: #bd202f;
	background: #fff;
	border: 2px solid #bd202f;
}



/*
============
MEDIA QUERIES 
============
*/

@media (min-width: 768px) {
    #logo p {
    	font-size: 1.35em;
    }

    #refinance-header h2:first-of-type {
	margin-top: 75px;
    }

    #refinance-hero {
    	margin-top: 0;
    }

    .btn-payment {
    	position: fixed;
        max-height: 65px;
        top: 0;
        right: 0;
    }
}

@media (min-width:1024px) {

    #intro {
    	position: relative;
    	height: 100vh;
    }

    #intro h1 {
    	font-size: 5em;
    }
    
    #display {
    	position: relative;
    	margin: auto;
    }

    #logo p {
    	font-size: 1.5em;
    }

    #broker {
    	position: absolute;
        width: 450px;
        left: 50px;
        padding: 150px 0;
        font-size: 1.5em;
    }

    #payment {
    	position: absolute;
        width: 450px;
        right: 50px;
        padding: 150px 0;
        font-size: 1.5em;
    }

}

@media (min-width:1200px) {

#intro {
	background: url("../img/home-hero-03.png") fixed no-repeat;
	background-size: cover;
	background-position: center;
	position: relative;
    }
    
      #refinance-header h2 {
    	font-size: 4.5em;
    }
    
}


@media (min-width:1400px) {
	.refinance-callout {
		margin-left: 15%;
	}
}