/**
 * Hero Block Styles
 * 
 * Modern hero section with Bootstrap integration
 * Supports background images/videos, overlay gradients, and service cards
 */

/* Base Hero Styles */
.hero {
  position: relative;
  min-height: 25vh;
}
.hero.withImages {
  position: relative;
  min-height: 75vh;
}

/* Dark Overlay Gradient */
.hero .background::before {
  content: '';
  position: absolute;
  top:0;
  right:0;
  bottom:50px;
  left:0;
  background: linear-gradient(90deg, rgba(0,0,0,1) 25%, rgba(0,0,0,0) 100%);
  z-index: 4;
  pointer-events: none;
  opacity: 0.75;
}

.hero .background{
  position: absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index: 1;
}
.hero .background .hero-slider__wrapper{
  height:100%;
}
.hero .background .hero-slider__wrapper .swiper{
  height:100%;
  padding-bottom:50px;
}
.hero .background .hero-slider__wrapper .swiper-slide{
  height:100%;
}
.hero .background .hero-slider__wrapper .swiper-slide > *{
  height:100%;
  width:100%;
  object-fit:cover;
  object-position:center;
}
.hero .background .hero-slider__wrapper .swiper-pagination{
  position:absolute;
  bottom:15px!important;
  right:15%;
  left:unset;
  transform:unset;
  z-index:5;
  text-align:center;
  width:250px!important;
}
.hero .background .hero-slider__wrapper .swiper-pagination .swiper-pagination-bullet{
  transform:none;
  width:40px;
  height:10px;
  border-radius:5px;
  background:var(--brand-secondary-color);
  transition:all 0.3s ease;
  left:0!important;
  opacity:1;
}
.hero .background .hero-slider__wrapper .swiper-pagination .swiper-pagination-bullet-active{
  width:80px;
  background:var(--brand-accent-color);
  transition:all 0.3s ease;
}
.hero .background .hero-slider__wrapper .swiper-button-prev{
  top:unset;
  left:unset;
  bottom:0;
  right:30%;
  background:url('../../assets/img/arrow-left-slider.svg') no-repeat center center;
  width:55px;
  height:40px;
  box-shadow:none;
}
.hero .background .hero-slider__wrapper .swiper-button-next{
  top:unset;
  left:unset;
  bottom:0;
  right:10%;
  background:url('../../assets/img/arrow-right-slider.svg') no-repeat center center;
  width:55px;
  height:40px;
  box-shadow:none;
}
.hero .background .hero-slider__wrapper .swiper-button-prev:after,
.hero .background .hero-slider__wrapper .swiper-button-next:after{
  display:none;
}


/* Hero Content */

.hero-content{
  padding:50px 0;
}
.hero-title{
  font-size:400%;
}
.hero-title span{
  display:block;
  color:var(--brand-secondary-color);
}

.hero-content.hero-content--with-slider {
  position:absolute;
  bottom:20%;
  z-index: 9;
  width: 50%;
  padding:0;
}

.hero-content.hero-content--with-slider .hero-topline {
  color: var(--white)!important;
}

.hero-content.hero-content--with-slider .hero-title {
  color: var(--white);
  line-height: 1;
  font-weight:800;
}
.hero-content.hero-content--with-slider .hero-buttonwrapper{
  display:flex;
  gap:25px;
  margin-top:50px;
 }
.hero-content.hero-content--with-slider .hero-buttonwrapper .btn:last-child{
  background:transparent;
  border:2px solid var(--white);
  transition:all 0.3s ease;
 }
.hero-content.hero-content--with-slider .hero-buttonwrapper .btn:last-child:hover{
  background:var(--white);
  color:var(--brand-primary-color);
  transition:all 0.3s ease;
}


.singleimage img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius: var(--bs-border-radius, 0.375rem);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* -------------------------------------------------------------------------------------------------------------------------------- */

@media (max-width: 1480px) {

  .hero .background .hero-slider__wrapper .swiper-button-next{right: 11%;}
  .hero .background .hero-slider__wrapper .swiper-button-prev{right: 35%;}
  
}

@media (max-width: 1199px) {

  .hero-title{font-size: 350%;}
  .hero-content.hero-content--with-slider .hero-buttonwrapper{margin-top: 25px;}
  .hero .background .hero-slider__wrapper .swiper-button-prev{right: 39%;}

  .hero-content{padding: 0;}
  .hero .singleimage{margin-top: 0;}

}

@media (max-width: 991px) {

  .hero-content.hero-content--with-slider{width: 75%;}
  .hero-title{font-size: 300%;}
  .hero .background .hero-slider__wrapper .swiper-button-prev{right: 45%;}

}

@media (max-width: 767px) {

  .hero-title{font-size: 250%;}
  .hero .background .hero-slider__wrapper .swiper-button-prev{right: 53%;}
  .hero .background .hero-slider__wrapper .swiper-button-next{right: 9%;}

}

@media (max-width: 600px) {

  .hero-content.hero-content--with-slider .hero-buttonwrapper{flex-direction: column;gap: 15px;}
  .hero-content.hero-content--with-slider{width: 96%;}
  .hero .background .hero-slider__wrapper .swiper-button-prev{right: calc(95% - 55px);}
  .hero .background .hero-slider__wrapper .swiper-button-next{right: 5%;}
  .hero .background .hero-slider__wrapper .swiper-pagination{right:0;width:100%!important;}
  .hero-title{font-size: 225%;}

  .hero-content{padding-top: 30px;}

}

@media (max-width: 400px) {

  .hero .background .hero-slider__wrapper .swiper-button-next{right: 7%;}
  .hero .background .hero-slider__wrapper .swiper-button-prev{right: 77%;}

}