/* GLOBAL STYLES */
html, body{
  font-family: 'Open Sans', sans-serif;
  font-style: normal;
  background: #F2F2F2;
  color: #0F0E0D;
}

/* HEADERS */
h1{
  color: #F2F2F2;
  font-size: 1.3rem;
}
h1 span{
  color: #F2F2F2;
  font-size: 2.5rem !important;
  font-weight: 600;
}
h2{
  font-size: 2rem;
  font-weight: 600;
}
h3{
  color: #F2F2F2;
  font-size: 20px;
  font-weight: 600;
}

/* BUTTONS */
.btn {
  background: #F8CB43;
  color: #0F0E0D;
  border-radius: 20px;
  border: 0;
  font-weight: 600;
  width: 240px;
}
.btn:hover {
  color: #F2F2F2;
}

/* NAVIGATION */
nav{
  background: rgba(15, 14, 13, 0.0);
  transition: all 0.2s;
}
nav.change-bg{
  background: rgba(15, 14, 13, 0.9);
}

.dropdown-menu{
  margin-top: 11px;
  background: rgba(15, 14, 13, 0.85);
  border-radius: 0px;
}
.dropdown #dropdown-toggle .dropdown-icon{
  transform: rotateZ(0deg);
  transform-origin: center;
  transition: all 0.2s linear;
}
.dropdown.show #dropdown-toggle .dropdown-icon{
  transform: rotateZ(180deg);
  transform-origin: center;
}
@media screen and (min-width: 321px) {
  nav .phone{
    padding-left: 48px;
  }

}

/* NAVIGATION LINKS */
.nav-link{
  color: #F2F2F2;
}
.nav-link:hover{
    color: #F8CB43;
}
.nav-link.active{
    color: #F8CB43;
}
@media screen and (min-width: 769px){
  .navbar-nav .nav-link::after{
    content:'';
    display: block;
    background-color: #F8CB43;
    height: 4px;
    width: 0%;
    margin-left: -10%;
    transition: all ease-in-out 250ms;
  }
  .navbar-nav .nav-link:hover::after{
    width: 120%;
  }
  .navbar-nav .nav-link.active::after{
    width: 120% !important;
  }
}

.dropdown-item{
  color: #F2F2F2;
}
.dropdown-item:hover{
  background: none;
  color: #F8CB43;
}
.dropdown-item.active{
  background: none;
  color: #F8CB43;
}
.navbar-text a{
  color: #F2F2F2;
  text-decoration: none;
}
.navbar-text i{
  color: #F8CB43;
}

/* ALL BANNERS CHANGE IMAGE IN HTML */
#banner{
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  width: 100%;
}
.banner-container{
  position: relative;
  overflow: hidden;
}
.banner-container .banner-image{
  width: 100%;
  height: 720px;
  object-fit: cover;
}

#banner .radial-overlay {
  position: absolute;
  top: 0;
  left: 0;
  min-height: inherit;
  background: radial-gradient(circle, rgba(15,14,13,0.3) 0%, rgba(15,14,13,0.6) 100%);
  width: inherit;
  display: flex;
  align-items: center;
}
#banner .gradient-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: inherit;
  min-height: inherit;
  background: linear-gradient(0deg, rgba(75,70,65,0) 0%, rgba(29,27,25,0) 70%, rgba(0,0,0,1) 100%);
  display: flex;
  align-items: center;
}
#banner-info{
  opacity: 0;
  transform: translateY(50px);
  transition: all 1s ease-in-out;
}
#banner-info.fade-in{
  transform: translateY(0px);
  opacity: 1;
}
/* TESTIMONIALS SECTION */
.testimonials{
  background: url("../img/caddis-excavation-banners/trench-testimonial-bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  min-height: 340px;
  color: #F2F2F2;
}
.testimonials > .radial-overlay {
  top: 0;
  left: 0;
  width: 100%;
  min-height: 340px;
  background: radial-gradient(rgba(15,14,13,0.3) 0%, rgba(15,14,13,0.9) 100%);
}
#review-container{
  padding: 0px 15px 0px 15px;
  overflow: hidden;
  height: 220px;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1s ease-in-out, transform 1s ease-in-out;
}
#review-container.fade-in{
  opacity: 1;
  transform: translateY(0px);
}
#review-column{
  opacity: 0;
}


/* FOOTER SECTION */
.footer{
  background: #0F0E0D;
}
.footer{
  color: #F2F2F2;
}
.footer li {
  list-style: none;
}
.footer a{
  color: #F2F2F2;
  text-decoration: none;
}
.contact-info i{
  color: #F8CB43;
}
.footer a.active{
  color: #F8CB43;
}
.footer a:hover{
  background: none;
  color: #F8CB43;
}
#service-toggle .dropdown-icon{
  transform: rotateZ(180deg);
  transform-origin: center;
  transition: all 0.2s linear;
}
#service-toggle.collapsed .dropdown-icon{
  transform: rotateZ(0deg);
  transform-origin: center;

}
@media screen and (max-width: 551px){
  #banner{
    min-height: 520px;
  }
  .banner-container .banner-image{
    height: 520px;
  }
  #review-container{
    height: 320px;
  }
  .dropdown-menu{
    background: none;
  }
  .service-text{
    width: 150px;
  }

}
@media screen and (min-width: 552px) and (max-width: 768px){

  #review-container{
    height: 250px;
  }
  .dropdown-menu{
    background: none;
  }
}
@media screen and (min-width: 768px){
  #banner{
    min-height: 720px;
  }
  .banner-container .banner-image{
    height: 720px;
  }
  .service-text{
    width: 200px;
  }
  #review-container{
    height: 220px;
  }

}
/* PAGE STYLES */
/* HOME PAGE STYLES */
#services-section{
  overflow: hidden;
}
#services-container.fade-in{
  opacity: 1;
}
.service-container{
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  padding: 0px, 0px, 0px, 0px;
}
.service-container .service-image{
  object-position: left top;
  transform: scale(1.5);
  transition: transform 0.5s ease;
}
.service-container:hover .service-image{
  transform: scale(1.6);
  transition: transform 0.5s ease;
}
.service-overlay{
  position: absolute;
  background-color: rgba(0, 0, 0, 0.7);
  bottom: 0px;
  left: 0;
  width: 100%;
  height: 25%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.service-text{
  color: #F2F2F2;
  font-size: 16px;
  position: absolute;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.5s ease;
}

.service-container:hover .service-text{
  color: #F8CB43;
}
.sub-services-text a{
  color: #F8CB43;
}

#home-about{
  background: radial-gradient(rgba(75,70,65,1) 0%, rgba(0,0,0,1) 85%);
  color: #F2F2F2;
  overflow: hidden;
}
#home-about img{
  opacity: 0;
  transform: translateX(-200px);
  transition: all 1s ease-in-out;
}
#home-about.fade-in img{
  opacity: 1;
  transform: translateX(0px);
}
#home-about .home-about-text{
  opacity: 0;
  transform: translateX(200px);
  transition: all 1s ease-in-out;
}
#home-about.fade-in .home-about-text{
  opacity: 1;
  transform: translateX(0px);
}
#services-about{
  overflow: hidden;
}

#services-about .services-about-text{
  opacity: 0;
  transform: translateX(-200px);
  transition: all 1s ease-in-out;
}
#services-about.fade-in .services-about-text{
  opacity: 1;
  transform: translateX(0px);
}

#services-about img{
  opacity: 0;
  transform: translateX(200px);
  transition: all 1s ease-in-out;
}
#services-about.fade-in img{
  opacity: 1;
  transform: translateX(0px);
}

#sub-services{
  overflow: hidden;
  background: radial-gradient(rgba(75,70,65,1) 0%, rgba(0,0,0,1) 85%);
  color: #F2F2F2;
}

#sub-services .sub-services-text{
  opacity: 0;
  transform: translateX(200px);
  transition: all 1s ease-in-out;
}
#sub-services.fade-in .sub-services-text{
  opacity: 1;
  transform: translateX(0px);
}

#sub-services img{
  opacity: 0;
  transform: translateX(-200px);
  transition: all 1s ease-in-out;
}
#sub-services.fade-in img{
  opacity: 1;
  transform: translateX(0px);
}

#review-container{
  padding: 0px 15px 0px 15px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1s ease-in-out, transform 1s ease-in-out;
}
#review-container.fade-in{
  opacity: 1;
  transform: translateY(0px);
}
#review-column{
  opacity: 0;
}
#review-column.slide-right{
  opacity: 1;
  transform: translateX(0px);
  transition: all 0.5s cubic-bezier(0.680, 0, 0.265, 1);;
}
#review-column.slide-left{
  opacity: 1;
  transform: translateX(0px);
  transition: all 0.5s cubic-bezier(0.680, 0, 0.265, 1);;
}
.stars-outer{
  position: relative;
  display: inline-block;
}
.stars-outer::before{
  content: "\f005     \f005     \f005     \f005     \f005";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  color: #ccc;
}
.stars-inner{
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
  overflow: hidden;
}
.stars-inner::before{
  content: "\f005     \f005     \f005     \f005     \f005";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  color: #F8CB43;
}
.stars-inner-0{
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
  overflow: hidden;
}
.stars-inner-0::before{
  content: "\f005     \f005     \f005     \f005     \f005";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  color: #F8CB43;
}
.stars-inner-1{
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
  overflow: hidden;
}
.stars-inner-1::before{
  content: "\f005     \f005     \f005     \f005     \f005";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  color: #F8CB43;
}
.stars-inner-2{
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
  overflow: hidden;
}
.stars-inner-2::before{
  content: "\f005     \f005     \f005     \f005     \f005";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  color: #F8CB43;
}
.stars-inner-3{
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
  overflow: hidden;
}
.stars-inner-3::before{
  content: "\f005     \f005     \f005     \f005     \f005";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  color: #F8CB43;
}
.stars-inner-4{
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
  overflow: hidden;
}
.stars-inner-4::before{
  content: "\f005     \f005     \f005     \f005     \f005";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  color: #F8CB43;
}
.fa-quote-left{
  color: rgba(15,14,13,0.2)
}

.about-image{
  opacity: 0;
  transition: all 2s ease-in-out;
}
.about-image.fade-in{
  opacity: 1;
}
#home-about p a{
  color: #F8CB43;
}
#contact{
  overflow: hidden;
}
#contact-message{
  opacity: 0;
  transform: translateX(200px);
  transition: all 1s ease-in-out;
}
#contact-message.fade-in{
  opacity: 1;
  transform: translateX(0px);
}
.contact-info-section{
  opacity: 0;
  transform: translateX(-200px);
  transition: all 1s ease-in-out;
}
.contact-info-section.fade-in{
  opacity: 1;
  transform: translateX(0px);
}

.contact-info a{
  text-decoration: none;
  color: #0F0E0D;
}

.contact-info a:hover{
  color: #F8CB43;
}

footer .contact-info a{
  text-decoration: none;
  color: #F2F2F2;
}

footer .contact-info a:hover{
  color: #F8CB43;
}

.social-icons a{
  display: inline-block;
  width: 36px;
  height: 48px;
  margin-right: 0px;
}