@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap');

* {
box-sizing: border-box;
}

body {
font-family: "Roboto", sans-serif;
font-size: 16px;
color: #808080;
margin:0;
}
header{
position: fixed;
top: 0;
left: 0;
background-color: #fff;
width: 100%;
z-index: 2;
display: flex;
justify-content: space-between;
padding: 16px 0;
box-shadow: 0px 4px 5px #00000030;
}
.logo{
width: auto;
height: 98px;
display: inline-block;
margin-left: 24px;
}
.btn-green {
background-color: #49c100; 
border: none; 
color: white; 
padding: 12px 16px;
font-size: 16px; 
cursor: pointer;
border-radius: 6px;
}

.btn-green:hover {
background-color: #389500;
}
.btn-blue {
background-color: #008ee9; 
border: none; 
color: white; 
padding: 12px 24px;
margin: 24px 8px;
font-size: 16px; 
cursor: pointer;
border-radius: 6px;
}

.btn-blue:hover {
background-color: #0076c2;
}
.btn-white {
background-color: #fff; 
border: none; 
color: #003d79; 
padding: 12px 24px;
margin: 24px 8px;
font-size: 16px; 
cursor: pointer;
border-radius: 6px;
}

.btn-white:hover {
background-color: #d0edff;
}
ul {
list-style-type: none;
padding: 0;
margin: 8px 0;
}
nav {
margin-right: 24px;
}
.fa {
margin-right: 8px;
}
#hero_header {
width: 100%;
height: 450px;
background-image: url("../img/hero_header.jpg");
background-size: cover;
background-position: right center;
color: #fff;
text-align: center;
margin-top:120px;
display: table;
}
.hero_content {
display: table-cell;
vertical-align: middle;
padding: 0px 50px;
}
h1 {
font-family: "Montserrat", sans-serif;
font-weight: 700;
font-size: 54px;
line-height: 54px;
margin: 0;
}
h2 {
font-family: "Montserrat", sans-serif;
font-weight: 700;
font-size: 32px;
margin: 0;
}
h3 {
font-family: "Montserrat", sans-serif;
font-weight: 700;
font-size: 22px;
margin: 0;
}
h4 {
font-family: "Montserrat", sans-serif;
font-weight: 700;
font-size: 18px;
margin: 0;
}
footer {
margin-right: 24px;
background-color: #00437e;
text-align: center;
width: 100%;
height: 110px;
color:#4087c6;
display: table;
}
#footer_content {
display: table-cell;
vertical-align: middle;
}
#footer_content a {
color: #fff;
text-decoration: none;
}
#footer_content a:hover {
color: #61b4fd;
}
#footer_content ul {
display: inline-flex;
margin-top: 0;
}
#footer_content ul li {
padding: 0 4px;
}
#footer_content p {
margin: 0;
}
#benefits {
text-align: center;
padding: 64px 32px;
}
.dark-blue {
color: #0a457e;
}
.light-blue {
color: #008ee9;
}

.green {
color: #0fa100;
}
.columns {
display: grid;
grid-auto-flow: column;
padding: 32px 0 0;
}
.col {
padding: 0px 50px;
}
#providers {
text-align: center;
padding: 120px 60px;
background-color: #f8f8f8;
}
.logos {
display: grid;
grid-auto-flow: column;
padding: 32px 0;
}
.logos img{
align-self: center;
justify-self: center;
}
img{
width: auto;
height: 98px;
max-width: 100%;
}
#cta{
display: flex;
width: 100%;
color: #fff;
text-align: center;
}
.content-left {
width: 50%;
height: 550px;
background-image: url("../img/bg_light_blue.jpg");
background-size: cover;
background-position: center center;
padding: 4%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.content-right {
width: 50%;
height: 550px;
background-image: url("../img/bg_dark_blue.jpg");
background-size: cover;
background-position: center center;
padding: 4%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#quote{
display: flex;
width: 100%;
}
.photo {
width: 50%;
height: 960px;
background-image: url("../img/photo-family.jpg");
font-size: 0;
background-size: cover;
background-position: center center;
}
.form {
width: 50%;
height: 960px;
background-color: #f0f0f0;
padding: 4%;
}
#bottom{
display: table;
width: 100%;
text-align: center;
}
#bottom h4{
width: 60%;
padding: 50px;
margin: 0 auto;
}
input[type=text] {
width: 100%;
max-width: 500px;
height: 40px;
text-indent: 10px;
font-size: 16px;
margin-bottom: 8px;
display: block;
background-color: #fff;
border: 1px solid #ccc;
}
.box {
margin-bottom: 8px;	
border: none;
height:40px;
overflow: hidden;
width: 100%;
max-width: 500px;
position:relative;
}
select {
background-color: #fff;
border: none;
font-size: 14px;
height: 40px;
padding: 5px;
width: 100%;
max-width: 500px;
display: block;
border: 1px solid #ccc;
margin-bottom: 8px;
}
select:focus{
outline: none;
}
.box::after{
content:"\025be";
display:table-cell;
padding-top:10px;
text-align:center;
width:30px;
height:40px;
background-color:#d9d9d9;
position:absolute;
top:0;
right:0px;	
pointer-events: none;
}
#quote h1 {
margin-bottom: 60px;
}
button[type=submit]{
width: 100%;
max-width: 500px;
height: 40px;
background-color: #11b800;
border: 0;
border-radius: 4px;
color: #fff;
margin-top: 32px;
font-family: "Montserrat", sans-serif;
font-size: 20px;
font-weight: 700;
}
#quote p {
width: 100%;
max-width: 500px;
margin: 24px 0;
text-align: justify;
font-size: 12px;
}

form .element {
width: 100%;
max-width: 500px;
margin: auto;
}

.phone{ float:right; background:url(../img/phone-icon.png) no-repeat left top; padding-left:60px; margin-top:20px;margin-right: 32px;}
.ptext{ color:#000; margin:0; padding:0; font-size:16px;}
.pnumber{ font-family: 'Montserrat', sans-serif; font-weight:700; font-size:26px; margin:0; padding:0;}
.phone_body{
height: 100px;
margin: 0;
text-align: left;
display: flex;
align-items: center;
}
.phone_body img {
margin-right: 24px;
}
.ptext_body{ color:#fff; margin:0; padding:0; font-size:24px;}
.pnumber_body{ font-family: 'Montserrat', sans-serif; font-weight:700; font-size:42px; margin:0; padding:0;}

p {
margin: 24px 0 0;
}

p:first-child {
margin: 0;
}

/* Sub Pages CSS */

/* Sub Pages */
.home-subpages-header{ background:#1564b0; padding:20px 0; margin-top:130px;}
.home-subpages-header h2{color:#FFF;font-family: 'Montserrat', sans-serif; font-size:32px; font-weight:700; line-height:1.2; margin-bottom:0; text-align:center;}
/* Sec2 Sub Pages */
.home-sec2-subpages{ background:#f0f0f0; padding:20px 15px;}
.home-sec2-subpages h2{ font-size:22px; margin-top:10px;}
.home-sec2-subpages p{ font-size:16px; color:#333;}
.home-sec2-subpages ul{ margin-top:20px;}
.home-sec2-subpages li{ list-style:disc; margin-bottom:20px;}
.home-sec2-subpages li p{margin-bottom:10px;}
@media (max-width: 767px) {.home-subpages-header h2{ font-size:22px;} .home-subpages-header{ background:#1564b0; padding:20px 0; margin-top:90px;}}

@media (min-width: 1400px) {
.container-fluid {
    max-width: 1370px; margin:0 auto;
	  }
}
/* End Sub Pages CSS */


/* Tablets ----------- */
@media only screen and (max-width : 1024px) {
.phone_body img {
width: 48px;
margin-right: 16px;
}
.ptext_body {
font-size: 16px;
}
.pnumber_body {
font-size: 24px;
}
#quote h1 {
font-size: 32px;
margin: 0 0 16px;
}
.form, .photo {
height: auto;
}
}

/* Smartphones ----------- */
@media only screen and (max-width : 768px) {
.logo{
height: 60px;
width: auto;
}
.logo img{
width: 194px;
}
#hero_header {
margin-top: 92px;
}
.pnumber {
font-size: 16px!important;
}
.ptext {
font-size: 12px!important;
}
.phone {
width: 195px;
background-size: 30px;
padding-left: 40px;
margin-top: 18px;
margin-right: 24px;
}
.columns {
grid-auto-flow: row;
}
.logos {
grid-auto-flow: row;
grid-gap: 16px;
padding-bottom: 0;
}
.photo	{
display: none;
}

#bottom h4 {
width: 100%;
padding: 48px 24px;
}

.form {
width: 100%;
padding: 24px;
}

#quote h1 {
text-align: center;
}

form .element, input[type=text], .box, select, button[type=submit], #quote p {
max-width: none;
}

.columns .col {
margin-bottom: 32px;
}

.columns .col:last-child {
margin-bottom: 0;
}

#cta {
flex-direction: column;
}

.content-left, .content-right {
width: 100%;
height: 300px;
}

}

/* Smartphones ----------- */
@media only screen and (max-width : 640px) {
	#providers {
		padding: 48px 24px;
	}
	.content-left, .content-right {
		height: 200px;
	}
	#bottom h4 {
		font-size: 16px;
	}
	nav {
		margin-right: 0;
	}
	.hero_content {
		padding: 0px 24px;
		background: rgba(0, 0, 0, 50%);
	}
	.hero_content h1 {
		font-size: 36px;
    	line-height: 40px;
	}
	.phone {
		width: 32px;
		padding: 0;
		height: 32px;
	}
	.phone span {
		display: none;
	}
}