/* Custom CSS rules here */

:root {
    --bs-primary: #0078C2;
    --bs-secondary: #26704E;
    --bs-dark: #222;
    --bs-light: #F8F9FA;
    --bs-body-color: #000;
    --bs-link-color: #26704E;
    --bs-link-hover-color: #26704E;
}

.hero-bg-slider {position: static; height: 70vh;}
.hero-bg-slider .swiper-slide::before {content: ''; display: block; position: absolute; inset: 0; background: rgba(0, 0, 0, .6);}
.hero-bg-slider-container {opacity: 0; transform: translateX(2rem); transition: opacity 1.5s ease, transform 1.5s ease; transition-delay: 1s;}
.swiper-slide-active .hero-bg-slider-container {opacity: 1; transform: translateX(0);}
.hero-bg-slider-content p:first-child strong:first-child {display: block; font-weight: 900; font-size: 2rem; line-height: 1;}
.hero-bg-slider-bullets {position: absolute; bottom: 0; left: 0; width: 100%; z-index: 1;}
.hero-bg-slider-bullets .swiper-pagination-bullet {width: 1rem; height: 1rem; background: #FFF; border-radius: 100%; margin-left: .5rem;}

@media (min-width: 768px) {
    .hero-bg-slider-content {font-size: 1.25rem;}
    .hero-bg-slider-content p:first-child strong:first-child {font-size: 3rem;}
}