/* Home Hero */
.hero_bg{
position: relative;
padding:0;
width: calc((100%) / 3);
}

.home_hero1{
background-image: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)), url("/static/image/repairs/Repair2.jpg");
height:343px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
}
.home_hero2{
background-image: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)), url("/static/image/crack_repair/pavement-crack-repair.jpg");
height:343px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
}
.home_hero3{
background-image: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)), url("/static/image/sealing/parking-lot-sealing-ottawa-3.jpg");
height:343px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
}

.home_hero_text_content {
display: flex;
flex-direction: column;
align-items: center;
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;
}

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

/* Wrap subtitle + button together */
.subtitle_button_wrap {
display: flex;
flex-direction: column;
align-items: center;
}

/* Subtitle */
.home_hero_subtitle {
margin:0;
text-align: center;
letter-spacing: 0em;
line-height: 1.6;
letter-spacing:;
font-size: 30px;
font-family: Montserrat,sans-serif;
color: white;
}

.hero_bg button {
position: absolute;
  top: 50%; /* start at vertical center of column */
  left: 50%;
  transform: translate(-50%, 120px); /* horizontally center, 60px below center initially */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.hero_bg :hover button {
opacity: 1;
transform: translate(-50%, calc(50% + 15px)); /* ends 15px below subtitle */
pointer-events: auto;
}

.hero_bg  button {
position: absolute;
  top: 50%; /* start at vertical center of column */
  left: 50%;
  transform: translate(-50%, 120px); /* horizontally center, 60px below center initially */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.65s ease, transform 0.65s ease;
}

.hero_bg:hover .home_hero_text_content{
background-color: rgba(0, 0, 0, 0.6);
transition: background-color 0.3s ease;
}
.hero_bg:hover .home_hero_text_content3{
background-color: rgba(0, 0, 0, 0.35);
transition: background-color 0.3s ease;
}

/* Top Banner */
.home_top_banner{
background-color: black;
height: auto;
margin:0px auto 50px auto;
text-align: center;
padding-bottom: 25px;
}

.home_top_banner h1{
font-size: 22px;
color: white;
font-weight: normal;
margin:30px 0px 0px 0px;
}

.home_top_banner p{
font-size: 17px;
color: white;
padding:5px 0px 5px 0px;
}

/* Home Titles */
.home_title{
margin:0;
color:black;
}

/* Who We Are */
.who_we_are_row{
margin:0px 0px 50px 0px;
}

.who_we_are{
padding: 0px 0px 0px 0px;
margin: 10px 0px 10px 0px;
width:100%;
}
.who_we_are_wrapper{
width:100%;
display: flex;
flex-direction: row;
align-items: stretch;
}
.who_we_are_col_1{
display: flex;
width:50%;
margin:0px 0px 0px 0px;
overflow: hidden;
}
.who_we_are img{
width:100%;
margin: 0px 0px 0px 0px;
height: 100%;
object-fit: cover;   /* keep aspect ratio, crop if needed */
display: block;
}
.who_we_are_col_2{
display: flex;
width:50%;
flex-direction: column;
margin:0px 0px 0px 0px;
background-color: #E6E6E6;
padding: 40px;
}
.who_we_are_col_2 h2{
font-size: 18px;
font-weight: normal;
margin-bottom: 20px;
color:black;
}
.who_we_are_col_2 p{
font-size: 15px;
font-family: Montserrat;
}
.who_we_are_col_2 button{
margin:30px 0px 0px 0px;
}

/* Reviews */
/* Full-width grey background */
.review_row{
  background-color: #E6E6E6;
  width: 100%;
  padding: 50px 0;
  margin-bottom: 50px;
}
/* Inner wrapper */
.reviews_container{
  width: 100%;
}
/* Flex layout */
.reviews{
  display: flex;
  gap: 30px;
  width: 100%;
  margin-top:5px;
}
/* 3 equal columns */
.review{
  flex: 0 0 calc((100% - 60px) / 3);
}
/* Text styles */
.review_stars{
  font-size: 20px;
  margin: 0 0 20px 0;
}
.review_text{
  font-family: Montserrat, sans-serif;
  font-size: 15px;
  color: #000;
  margin: 0 0 15px 0;
}
.review_name{
  font-family: Montserrat, sans-serif;
  font-size: 15px;
  font-weight: 400;
  margin: 0;
}

/* Home Services */


.home_services_wrapper {
display: flex;
flex-wrap: wrap;
gap: 30px; /* 30px between all items */
margin-top:10px;
}

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

.services_col_image{
display: flex;
width: 100%;
}
.services_col_image img{
width: 100%;
}

.services_col_text{
background-color: black;
padding:35px;
}

.services_col_text h2{
font-size: 18px;
font-weight: normal;
margin-bottom: 20px;
color:white;
}

.services_col_text p{
font-size: 15px;
font-family: Montserrat;
color:white;
}

.services_col_text button{
margin:30px 0px 0px 0px;
}

.services_col_text button:hover{
background-color: white;
color:black;
}

.services_col_text i{
margin:0px 0px 0px 5px;
}

/* Careers */
.careers_hero{
background-image: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)), url("/static/image/careers/asphalt-careers1.jpg");
height:350px;
background-position: right center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
margin:40px 0px 0px 0px;
}

.careers_hero_text_content{
margin:70px 0px 70px 0px;
padding: 40px 20px 0px 20px;
background-color: rgba(225, 225, 225, 0.85);
height:210px;
width:25%;
}

.careers_hero_text_content p{
color:#28A9E1;
}

.careers_hero_text_content h2{
color:black;
margin:15px 0px 30px 0px;
font-size: 24px;
font-weight: normal;
}

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

.careers_hero_text_content i{
margin:0px 0px 0px 5px;
}

/*  Resposiveness ################################################*/
/*  ##############################################################*/
/*  ##############################################################*/
/*  ##############################################################*/

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

}

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

}

@media only screen and (max-width: 992px) {
  /* Reviews */
  .reviews{
    flex-wrap: wrap;
  }
  .review{
    flex: 0 0 calc((100%));
  }
  /* Services */
  .services_col {
  width: calc((100% - 30px) / 2);
  display: flex;
  flex-direction: column;
  }
  /* Careers */
  .careers_hero_text_content{
  width:60%;
  }
}


@media only screen and (max-width: 768px) {
  /* Home Hero */
  .hero_bg{
    width:100%;
  }
  .home_hero_text_content,
  .home_hero_text_content3 {
    position: relative;
    height: 100%;
  }
  .hero_bg button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%); /* no Y translate */
    opacity: 1;
    pointer-events: auto;
  }
  .hero_bg:hover button {
    transform: translateX(-50%);
    opacity: 1;
    pointer-events: auto;
  }
  .home_hero_subtitle {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(50% + 15px); /* 15px above the button top */
    margin: 0;
    width: 100%;
    text-align: center;
  }

  /* Home Top Banner */
  .home_top_banner h1{
  font-size: 20px;
  color: white;
  font-weight: normal;
  margin:30px 0px 0px 0px;
  }
  .home_top_banner p{
  font-size: 15px;
  color: white;
  padding:5px 0px 5px 0px;
  }

  /* Who We Are */
  .home_title{
  margin:0;
  color:black;
  }
  .who_we_are{
  padding: 0px 0px 0px 0px;
  margin: 10px 0px 10px 0px;
  width:100%;
  }
  .who_we_are_wrapper{
  width:100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  }
  .who_we_are_col_1{
  display: flex;
  width:100%;
  margin:0px 0px 0px 0px;
  overflow: hidden;
  }
  .who_we_are img{
  width:100%;
  margin: 0px 0px 0px 0px;
  height: 100%;
  object-fit: cover;   /* keep aspect ratio, crop if needed */
  display: block;
  }
  .who_we_are_col_2{
  display: flex;
  width:100%;
  flex-direction: column;
  margin:0px 0px 0px 0px;
  background-color: #e6e6e6;
  padding: 40px;
  }
  .who_we_are_col_2 h2{
  font-size: 18px;
  font-weight: normal;
  margin-bottom: 20px;
  color:black;
  }
  .who_we_are_col_2 p{
  font-size: 15px;
  font-family: Montserrat;
  }
  .who_we_are_col_2 button{
  margin:30px 0px 0px 0px;
  }
  .grey-box{
  background-color: #E6E6E6;
  height:300px;
  width:100%;
  margin:40px 0px 40px 0px;
  }

  /* Services */
  .services_col {
  width: calc((100%) / 1);
  display: flex;
  flex-direction: column;
  }
}

@media only screen and (max-width: 576px) {
/* Who We Are */
.who_we_are_row{
padding-right:15px;
padding-left:15px;
}
/* Reviews */
.reviews_container{
padding-right:15px;
padding-left:15px;
}
/* Services */
.services_row{
padding-right:15px;
padding-left:15px; 
}
/* Careers */
.careers_row{
padding-right:15px;
padding-left:15px; 
}
.careers_hero_text_content{
width:75%;
}
}