/*====================================
        PAGE BANNER
=====================================*/

.page-banner{

    position:relative;

    background:url("../banner.png") center center/cover no-repeat;

    padding:140px 0;

    overflow:hidden;

}

.page-banner::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:100%;

    background:linear-gradient(
        rgba(0,0,0,.65),
        rgba(0,0,0,.60)
    );

}

.page-banner .container{

    position:relative;

    z-index:2;

}

.page-banner-content{

    text-align:center;

}

.page-banner h1{

    color:#fff;

    font-size:58px;

    font-weight:800;

    margin-bottom:15px;

    text-transform:capitalize;

}

.page-banner .breadcrumb{

    background:transparent;

}

.page-banner .breadcrumb-item{

    font-size:17px;

    font-weight:500;

}

.page-banner .breadcrumb-item a{

    color:#ffffff;

    text-decoration:none;

    transition:.3s;

}

.page-banner .breadcrumb-item a:hover{

    color:#ffc107;

}

.page-banner .breadcrumb-item.active{

    color:#ffc107;

}

.page-banner .breadcrumb-item+.breadcrumb-item::before{

    color:#ffffff;

}

/*=============================
Responsive
==============================*/

@media(max-width:991px){

.page-banner{

padding:100px 0;

}

.page-banner h1{

font-size:42px;

}

}

@media(max-width:576px){

.page-banner{

padding:80px 0;

}

.page-banner h1{

font-size:32px;

}

.page-banner .breadcrumb-item{

font-size:14px;

}

}
/*=========================
GALLERY
=========================*/

.gallery-filter button {
  background: #fff;

  border: 2px solid #e31e24;

  padding: 10px 24px;

  margin: 6px;

  border-radius: 30px;

  font-weight: 600;

  transition: 0.3s;
}

.gallery-filter button.active,
.gallery-filter button:hover {
  background: #e31e24;

  color: #fff;
}

.gallery-card {
  position: relative;

  overflow: hidden;

  border-radius: 18px;

  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.gallery-card img {
  width: 100%;

  height: 280px;

  object-fit: cover;

  transition: 0.5s;
}

.gallery-card:hover img {
  transform: scale(1.12);
}

.gallery-overlay {
  position: absolute;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  background: rgba(253, 21, 13, 0.75);

  display: flex;

  justify-content: center;

  align-items: center;

  opacity: 0;

  transition: 0.35s;
}

.gallery-card:hover .gallery-overlay {
  opacity: 1;
}

.gallery-overlay i {
  font-size: 40px;

  color: #fff;
}

@media (max-width: 768px) {
  .gallery-card img {
    height: 220px;
  }

  .gallery-filter button {
    padding: 8px 18px;

    font-size: 14px;
  }
}

/*=========================
VIDEO GALLERY
=========================*/

.video-card {
  background: #fff;

  border-radius: 20px;

  overflow: hidden;

  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
}

.video-card iframe {
  width: 100%;

  height: 240px;

  border: 0;
}

.video-content {
  padding: 20px;

  text-align: center;
}

/*=========================
FLEET
=========================*/

.fleet-item {
  background: #fff;

  padding: 15px;

  border-radius: 18px;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);

  text-align: center;

  transition: 0.35s;

  height: 100%;
}

.fleet-item:hover {
  transform: translateY(-10px);
}

.fleet-item img {
  height: 220px;

  width: 100%;

  object-fit: cover;

  border-radius: 15px;

  margin-bottom: 15px;
}

/*=========================
BEFORE AFTER
=========================*/

.before-card {
  position: relative;

  overflow: hidden;

  border-radius: 20px;

  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
}

.before-card img {
  width: 100%;

  height: 350px;

  object-fit: cover;

  transition: 0.5s;
}

.before-card:hover img {
  transform: scale(1.08);
}

.before-card span {
  position: absolute;

  bottom: 20px;

  left: 20px;

  background: #e31e24;

  color: #fff;

  padding: 10px 22px;

  border-radius: 30px;

  font-weight: 600;
}

/*=========================
COUNTER
=========================*/

.gallery-counter {
  padding: 80px 0;

  background: linear-gradient(135deg, #e31e24, #003b80);

  color: #fff;
}

.gallery-counter h2 {
  font-size: 50px;

  font-weight: 800;

  color: #fff;
}

.gallery-counter p {
  font-size: 18px;

  color: #fff;
}

@media (max-width: 768px) {
  .video-card iframe {
    height: 220px;
  }

  .before-card img {
    height: 240px;
  }

  .fleet-item img {
    height: 180px;
  }
}

/*=========================
CUSTOMER WORK
=========================*/

.work-card {
  background: #fff;

  padding: 40px;

  border-radius: 20px;

  text-align: center;

  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);

  transition: 0.35s;

  height: 100%;
}

.work-card:hover {
  transform: translateY(-10px);
}

.work-card i {
  font-size: 55px;

  color: #e31e24;

  margin-bottom: 20px;
}

.work-card h4 {
  font-size: 38px;

  font-weight: 800;

  margin-bottom: 10px;
}

/*=========================
CTA
=========================*/

.gallery-cta {
  padding: 80px 0;

  background: linear-gradient(135deg, #e31e24, #003b80);

  color: #fff;
}

.gallery-cta h2 {
  font-size: 42px;

  font-weight: 800;

  margin-bottom: 15px;

  color: #fff;
}

.gallery-cta p {
  font-size: 18px;

  color: #fff;
}

.gallery-cta .btn {
  padding: 15px 35px;

  border-radius: 50px;

  font-weight: 700;
}

/*=========================
MAP
=========================*/

.gallery-map {
  overflow: hidden;

  border-radius: 20px;

  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
}

.gallery-map iframe {
  width: 100%;

  height: 520px;

  border: 0;
}

/*=========================
RESPONSIVE
=========================*/

@media (max-width: 991px) {
  .gallery-cta {
    text-align: center;
  }

  .gallery-cta .text-lg-end {
    margin-top: 25px;
  }
}

@media (max-width: 768px) {
  .gallery-cta h2 {
    font-size: 30px;
  }

  .gallery-map iframe {
    height: 300px;
  }

  .work-card {
    padding: 30px;
  }
}