/* ABOUT */
.about_maven{
display: flex;
align-items: stretch; /* equal height columns */
margin-top: 30px;
margin-bottom: 40px;
gap: 30px;
}

.about_text_col{
width: calc((100% - 30px) / 2);
padding:0;
}

.about_text_col h2{
color:black;
}

.about_text_col p{
line-height: 30px;
}

.about_image_col{
display: flex;
width: calc((100% - 30px) / 2);
padding:0;
}

.about_image_col img{
width: 100%;
height: 100%;
object-fit: cover;   /* crop nicely */
display: block;      /* remove inline-gap quirks */	
}

/* ABOUT END */

/* CAREERS  */
.careers_text_col{
width:100%;
padding:0;
}

.careers_text_col h2{
color:black;
}

.careers_grey_box{
background-color: #E6E6E6;
width:100%;
margin:40px 0px 40px 0px;
padding:40px 0px 40px 0px;
}

.careers_grey_intro{
width:100%;
padding:0;
margin:0;
}

.careers_grey_intro h2{
color: black;
}

/*grey we're hring box */
.were_hiring_wrapper{
margin:50px 0px 20px 0px;
}

.were_hiring_image_wrapper{
padding: 0px 0px 0px 0px;
margin: 10px 0px 10px 0px;
width:100%;
}

.were_hiring_image_layot {
display: flex;
flex-wrap: wrap;
gap: 20px; /* 20px between all items */
}

.were_hiring_col {
width: calc((100% - 40px) / 3);
display: flex;
flex-direction: column;
align-items: center;
}

.were_hiring_col i{
font-size:40px;
margin-bottom: 15px;
}

/* Resume */
.resume_col{
width:100%;
padding:0;
}

.resume_col h2{
color:black;
}

.resume_form{
gap:30px;
padding-left: 5px;
}

/* Labels */
.resume_col label {
  font-size: 14px;
  font-weight: 600; /* optional */
}

/* Input + textarea text */
.resume_col .form-control {
  font-size: 14px;
}

/* Placeholder text — modern browsers */
.resume_col input::placeholder,
.resume_col textarea::placeholder {
  font-size: 13px;
  color: #777;
}

/* Placeholder text — WebKit (older Safari, iOS) */
.resume_col input::-webkit-input-placeholder,
.resume_col textarea::-webkit-input-placeholder {
  font-size: 13px;
  color: #777;
}

/* Placeholder text — Firefox (older) */
.resume_col input::-moz-placeholder,
.resume_col textarea::-moz-placeholder {
  font-size: 13px;
  color: #777;
}

/* Placeholder text — IE / old Edge */
.resume_col input:-ms-input-placeholder,
.resume_col textarea:-ms-input-placeholder {
  font-size: 13px;
  color: #777;
}

.resume_info_col{
width: calc((100% - 60px) / 3);
}

.resume_file_col{
width:inherit;
}

.resume_file_col input[type="file"],
.resume_file_col input[type="file"]::-webkit-file-upload-button{
  cursor: pointer;
}

.resume_submit_button{
display: flex;
justify-content: flex-start; /* left aligned */
padding-top: 20px;
}

/* END Resume */

/* Benefits  */
/* career page hero banner */
.careers_page_hero{
background-image: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)), url("/static/image/careers/asphalt-careers2.jpg");
height:inherit;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
margin:40px 0px 0px 0px;
padding-bottom: 60px;
}

.careers_page_hero_row{
display: flex;
align-items: center;
width: 100%;
}

.careers_page_hero_text_content{
flex: 0 0 auto;         /* text keeps its natural width */
margin:20px 0px 60px 0px;
padding: 5px 0px 5px 0px;
background-color: white;
height:auto;
text-align: center;
}

.careers_page_hero_title_line{
flex: 1;                /* ← this makes it stretch */
height: 38.8px;
background-color: #29A8E2;
margin:20px 0px 60px 0px;
border:solid 13.5px white;
}

.careers_page_hero_text_content p{
color:#28A9E1;
}

.careers_page_hero_text_content h2{
color:black;
margin:0px 0px 0px 0px;
font-size: 24px;
}

.benefits_row{
display: flex;
flex-wrap: wrap;
column-gap: 20px; 
row-gap: 50px;
margin:0;
padding:0px 50px 0px 50px;
}

.benefits_maven_col{
width: calc((100% - 80px) / 5);
text-align: center;
}

.benefits_maven_col i{
font-size: 90px;
color:white;
}

.benefits_maven_col p{
color:white;
margin-top: 30px;
font-size: 21px;
font-weight: bold;
}

/* CAREERS END */


/* CONTACT CSS */

.contact_row{
margin:40px 0px 40px 0px;
padding:0;
gap:30px;
}
.contact_info_col{
width: calc((100% - 30px) / 2);
padding:0;
}

.contact_info_col h2{
color:black;
}

.contact_form_col{
width: calc((100% - 30px) / 2);	
padding:0;
}

.contact_form_col h2{
color:black;
}
.contact_form_col .form-row{
margin-top: 30px;
}
.contact_form_col button{
margin-top: 15px;
margin-left: 5px;
}

/* Labels */
.contact_form_col label {
  font-size: 14px;
  font-weight: 600; /* optional */
}

/* Input + textarea text */
.contact_form_col .form-control {
  font-size: 14px;
}

/* Placeholder text — modern browsers */
.contact_form_col input::placeholder,
.contact_form_col textarea::placeholder {
  font-size: 13px;
  color: #777;
}

/* Placeholder text — WebKit (older Safari, iOS) */
.contact_form_col input::-webkit-input-placeholder,
.contact_form_col textarea::-webkit-input-placeholder {
  font-size: 13px;
  color: #777;
}

/* Placeholder text — Firefox (older) */
.contact_form_col input::-moz-placeholder,
.contact_form_col textarea::-moz-placeholder {
  font-size: 13px;
  color: #777;
}

/* Placeholder text — IE / old Edge */
.contact_form_col input:-ms-input-placeholder,
.contact_form_col textarea:-ms-input-placeholder {
  font-size: 13px;
  color: #777;
}

/* CONTACT END */

/* QUOTE CSS */

.quote_row{
margin:40px 0px 40px 0px;
padding:0;
}
.quote_form_col{
width:100%;
padding:0;
}
.quote_form_col h2{ 
color:black;
}
.quote_form_row{
display: -ms-flexbox;
-ms-flex-wrap: wrap;
display: flex;
flex-wrap: wrap;
gap: 15px;
width: 100%;
margin-top: 30px;
}
.quote_form_first_name{
width: calc((100% - 30px) / 4);
}
.quote_form_last_name{
width: calc((100% - 30px) / 4);
}
.quote_form_email{
width: calc((100% - 30px) / 2);
}
.quote_form_phone{  
width: calc((100% - 15px) / 2);
}
.quote_form_company{
width: calc((100% - 15px) / 2);
}
.quote_form_address{
width: calc((100% - 30px) / 3);
}
.quote_form_city{
width: calc((100% - 30px) / 3);
}
.quote_form_zip{
width: calc((100% - 30px) / 3);
}
.quote_form_service{
width: calc((100%) / 3);
}
.quote_form_images{
width: calc((100%) / 3);
}
.quote_form_message{
width: 100%;
}
.quote_form_marketing{
width: calc((100%) / 3);
}
.quote_form_button{
width:100%;
}
.quote_form_button button{
margin-top: 15px;
margin-left: 0px;
}

/* Labels */
.quote_form_col label {
  font-size: 14px;
  font-weight: 600; /* optional */
}
/* Input + textarea text */
.quote_form_col .form-control {
  font-size: 14px;
}
/* Placeholder text — modern browsers */
.quote_form_col input::placeholder,
.quote_form_col textarea::placeholder {
  font-size: 13px;
  color: #777;
}
/* Placeholder text — WebKit (older Safari, iOS) */
.quote_form_col input::-webkit-input-placeholder,
.quote_form_col textarea::-webkit-input-placeholder {
  font-size: 13px;
  color: #777;
}
/* Placeholder text — Firefox (older) */
.quote_form_col input::-moz-placeholder,
.quote_form_col textarea::-moz-placeholder {
  font-size: 13px;
  color: #777;
}
/* Placeholder text — IE / old Edge */
.quote_form_col input:-ms-input-placeholder,
.quote_form_col textarea:-ms-input-placeholder {
  font-size: 13px;
  color: #777;
}

/* END QUOTE CSS */

@media only screen and (max-width: 1400px) {
}

@media only screen and (max-width: 1200px) {

}

@media only screen and (max-width: 992px) {
/* Careers */
.resume_form{
gap:20px;
}
.benefits_row{
justify-content: center;
}
.resume_form_col{
width: calc((100% - 40px) / 3);
}
.benefits_maven_col{
width: calc((100% - 40px) / 3);
}
/* Quote */
.quote_form_first_name{
width: calc((100% - 15px) / 2);
}
.quote_form_last_name{
width: calc((100% - 15px) / 2);
}
.quote_form_email{
width: calc((100% - 15px) / 2);
}
.quote_form_phone{  
width: calc((100% - 15px) / 2);
}
.quote_form_company{
width: calc((100% - 15px) / 2);
}
.quote_form_address{
width: calc((100% - 15px) / 2);
}
.quote_form_city{
width: calc((100% - 15px) / 2);
}
.quote_form_zip{
width: calc((100% - 15px) / 2);
}
.quote_form_service{
width: calc((100% - 15px) / 2);
}
.quote_form_images{
width: calc((100% - 15px) / 2 );
}
}
@media only screen and (max-width: 768px) {
/* About */
.about_maven{
flex-direction: column;
}
.about_text_col{
width:100%;
}
.about_image_col{
width:100%;
}
.about_image_col img{
height: auto;
}
/* Careers */
.were_hiring_col{
width:100%;
margin-top: 30px;
}
.were_hiring_wrapper{
margin:30px 0px 20px 0px;
}
.resume_info_col{
width:100%;
}
.benefits_maven_col{
width: calc((100% - 20px) / 2);
}

}

@media only screen and (max-width: 576px) {
/* About */
.about_maven{
padding:0px 15px;
}
/* Careers */
.careers_page_hero_title_line{
flex-wrap: wrap;
display: none;
visibility: hidden;
}
.careers_page_hero_text_content{
flex: 1 1 auto;         /* text keeps its natural width */
margin:20px 15px 60px 15px;
padding: 5px 15px 5px 15px;
background-color: white;
height:auto;
text-align: center;
}
.careers_grey_intro{
padding:0px 15px;
}
.were_hiring_image_wrapper{
padding: 0px 15px;
}
.benefits_maven_col{
width: 100%;
}
/* Contact */
.contact_row{
padding: 0px 15px;
}
.contact_info_col{
width:100%;
padding:0;
}
.contact_form_col{
width:100%; 
padding:0;
}
/* Quote */
.quote_row{
margin:40px 0px 40px 0px;
padding:0px 15px;
}
.quote_form_first_name{
width:100%;
}
.quote_form_last_name{
width:100%;
}
.quote_form_email{
width:100%;
}
.quote_form_phone{  
width:100%;
}
.quote_form_company{
width:100%;
}
.quote_form_address{
width:100%;
}
.quote_form_city{
width:100%;
}
.quote_form_zip{
width:100%;
}
.quote_form_service{
width:100%;
}
.quote_form_images{
width:100%;
}
.quote_form_message{
width: 100%;
}
.quote_form_marketing{
width:100%;
}
}