/* Services Page */
.services_page_col{
position: relative;
padding:0px 0px 30px 0px;
}

.asphalt_repair_service_hero{
background-image: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)), url("/static/image/repairs/service-page-asphalt-repair-link.jpg");
height:225px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
}

.crack_repair_service_hero{
background-image: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)), url("/static/image/crack_repair/crack-repair-services-link.jpg");
height:225px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
}

.sealing_service_hero{
background-image: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)), url("/static/image/sealing/services-asphalt-sealing-link.jpg");
height:225px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
}

.paving_service_hero{
background-image: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)), url("/static/image/paving/services-page-paving-link.jpg");
height:225px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
}

.line_painting_service_hero{
background-image: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)), url("/static/image/line_painting/line-painting-service-link.jpg");
height:225px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
}

.concrete_repair_service_hero{
background-image: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)), url("/static/image/concrete_repair/concrete-repair-service-link.jpg");
height:225px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
}

/* Multi Service Page */
.multi_service_wrapper{
margin:30px 0px 40px 0px;
} /* used on services page + sealing & asphalt repair */

.multi_service_page_col{
position: relative;
width:50%;
}

.multi_service_page_col:nth-child(odd){
padding:0px 15px 30px 0px;
}

.multi_service_page_col:nth-child(even){
padding:0px 0px 30px 15px;
}

.multi_service_hero_cut_out{
background-image: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)), url("/static/image/repairs/asphalt-repair-multi-service-link.jpg");
height:225px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
}

.multi_service_hero_pothole{
background-image: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)), url("/static/image/repairs/pot-hole-repair-multi-service-link-2.jpg");
height:225px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
}

.multi_service_hero_parking_seal{
background-image: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)), url("/static/image/sealing/asphalt-sealing-page-parking-lot-link.jpg");
height:225px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
}

.multi_service_hero_driveway_seal{
background-image: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)), url("/static/image/sealing/asphalt-sealing-page-driveway-link.jpg");
height:225px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
}

.multi_service_content {
display: flex;
flex-direction: column;
align-items: left;
justify-content: center; /* vertical centering */
height: 100%;
position: relative;      /* for absolute positioning of button */
background-color: rgba(0, 0, 0, 0.5);
transition: background-color 0.3s ease;
padding-right: 50px;
padding-left: 50px;
}

.multi_service_content h2{
position: absolute;
top: 50%;
transform: translateY(-50%);
font-family: Montserrat;
font-size: 24px;
font-weight: normal;
color: white;
text-transform: uppercase;
margin:0;
}

.multi_service_content p{
position: absolute;
top: calc(50% + 60px); /* 20px below the vertically centered h2 */
transform: translateY(-50%);
font-size: 16px;
font-weight: normal;
color: white;
margin: 0;
}

.multi_service_content p:hover{
cursor: pointer;
color: #28A9E1;
}

.multi_service_content i{
padding-left:5px;
}

.multi_service_description{
background-color: #F4F4F4;
padding:30px 25px 30px 25px;
}
.multi_service_description p{
color: #828282;
}

.multi_service_description button{
margin:20px 0px 0px 0px;
}

/* SERVICE DETAIL PAGES */

.service_detail_head_wrapper{
display: flex;
align-items: stretch;
margin:30px 0px 20px 0px;
}

.service_detail_description{
width:50%;
background-color: #F4F4F4;
padding:100px 60px 30px 60px;
}
.service_detail_p1{
font-size: 16px;
color: #828282;
}
.service_detail_h2{
font-size: 30px;
margin:15px 0px 20px 0px;
color:black;
}
.service_detail_p2{
font-size: 15px;
color: #828282;
}
.service_detail_description button{
margin:30px 0px 0px 0px;
}

.service_detail_main_image{
padding:0;
display: flex;
width:50%;
}
.service_detail_main_image img{
width:100%;
height: 100%;
object-fit: cover;
}

.service_detail_tri_image_wrapper{
margin:0px 0px 20px 0px;
}

/*new*/
.service_detail_tri_image{
padding: 0px 0px 0px 0px;
margin: 10px 0px 10px 0px;
width:100%;
}

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

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

.tri_image_col_image{
display: flex;
width: 100%;
}
.tri_image_col_image img{
width: 100%;
}
/*new*/

/* Form  */
.services_contact_form_row{
padding:0px 0px 0px 15px !important;
}

.services_contact_form{
  box-shadow: 3px 3px 15px grey;
  padding: 20px 20px 20px 20px;
  margin: 0px 0px 10px 0px;
  overflow: hidden;
  width:inherit;
  background-color: white;
}

/* FAQ */
.faq_row{
margin:30px 0px 30px 0px;
}

.faq_col{
width:100%;
}

.faq_col h3{
font-size:30px ;
padding-bottom: 5px;
}

.faq_col h4{
font-size: 17px;
margin-top: 25px;
}

.faq_col p{
font-size:15px ;
}


/* Responsize */
@media only screen and (max-width: 1400px) {

}

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

}

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

.services_contact_form_row{
margin:50px 0px 0px 0px;
padding:0px 0px 0px 0px !important;
}

}


@media only screen and (max-width: 768px) {
/* Multi Service Page */
.multi_service_page_col{
width:100%;
}
.multi_service_page_col:nth-child(odd){
padding:0px 0px 30px 0px;
}
.multi_service_page_col:nth-child(even){
padding:0px 0px 30px 0px;
}
/* Service Detail */
.service_detail_head_wrapper {
flex-direction: column;
}
.service_detail_description{ 
width:100%;
}
.service_detail_main_image{
width:100%;
}
.service_detail_main_image img {
height: auto;
}
}

@media only screen and (max-width: 576px) {
/* Multi Service Page */
.multi_service_wrapper{
padding:0px 15px;
}
/* Service Detail */
.service_detail_head_wrapper{
padding:0px 15px;
}
.service_detail_tri_image_wrapper{
padding:0px 15px;  
}
/* Multi Service Page */
.faq_row{
padding:0px 15px;
}
}