/* ==========================================================
   Homepage (front-page.php)
   Colours / fonts / buttons live in main.css (:root + .btn-theme).
   Responsive rules: home-responsive.css
   ========================================================== */


/* ---------- hero ---------- */
.home-hero {
    background: url(../img/home-v2/hero-bg.jpg) center / cover no-repeat;
    padding-top: 98px;
    margin-bottom: 110px;
}
.home-hero h1 {
    text-shadow: 0 35px 24px rgba(0, 0, 0, 0.25);
}
.home-hero .benefit + .benefit {
    border-left: 1px solid rgba(255, 255, 255, 0.3);
}
.home-hero .suppliers {
    margin-bottom: -94px;
}


/* ---------- about ---------- */
.about-section {
    padding: 50px 0 140px;
}
.about-section .checks li {
    position: relative;
    padding-left: 58px;
}
.about-section .checks li::before {
    content: "";
    position: absolute;
    left: -13px;
    top: 4px;
    width: 52px;
    height: 29px;
    background: url(../img/home-v2/check.svg) center / contain no-repeat;
}


/* ---------- benefits ---------- */
.benefits-section {
    background: var(--color-dark) url(../img/home-v2/advantages-bg.jpg) center / cover no-repeat;
    padding: 68px 0 90px;
}


/* ---------- gallery ---------- */
.gallery-section {
    padding: 76px 0 70px;
}
.gallery-section .nav-pills {
    --bs-nav-pills-link-active-bg: var(--color-primary);
    --bs-nav-pills-link-active-color: var(--color-white);
}
/* !important only to beat the legacy global ".nav-link { color: #fff !important }" in main.css */
.gallery-section .nav-pills .nav-link {
    border: 2px solid var(--color-border);
    color: var(--color-primary) !important;
}
.gallery-section .nav-pills .nav-link.active {
    border-color: var(--color-primary);
    color: var(--color-white) !important;
}
.gallery-section .owl-dots,
.testimonials-section .owl-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 30px;
}
.gallery-section .owl-dot,
.testimonials-section .owl-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: var(--color-white) !important;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
.gallery-section .owl-dot.active,
.testimonials-section .owl-dot.active {
    background-color: var(--color-primary) !important;
}


/* ---------- process ---------- */
.process-section {
    padding: 77px 0 60px;
}
.process-section .step .arrow {
    top: -33px;
    right: -50px;
    z-index: 2;
}
.process-section .step .icon {
    width: 72px;
    height: 64px;
    background-color: var(--color-primary);
    border-radius: 25px 0 10px 0;
}


/* ---------- testimonials ---------- */
.testimonials-section {
    padding: 64px 0 50px;
}
.testimonials-section .heading-area {
    padding-top: 94px;
}
.testimonials-section .heading-area::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 386px;
    height: 386px;
    transform: translateX(-50%);
    background: url(../img/home-v2/google-bg.png) center / contain no-repeat;
    z-index: -1;
}
.testimonials-section .customer-badge {
    background-color: var(--color-secondary);
}
.testimonials-section .owl-stage-outer {
    padding: 70px 0 60px;
}
.testimonials-section .owl-stage {
    display: flex;
    align-items: center;
}
.testimonials-section .review-card {
    border: 3px solid var(--color-white);
    background: linear-gradient(109.55deg, var(--color-primary) 2.63%, #434242 98.76%);
    box-shadow: 0 0 35px rgba(0, 0, 0, 0.25);
}
.testimonials-section .owl-item {
    transition: transform 0.4s ease;
}
.testimonials-section .owl-item.center {
    transform: scale(1.22);
    z-index: 3;
}
.testimonials-section .quote {
    display: none;
}
.testimonials-section .owl-item.center .quote {
    display: block;
}
.testimonials-section .review,
.testimonials-section .name {
    opacity: 0.5;
}
.testimonials-section .review {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.testimonials-section .owl-item.center .review {
    -webkit-line-clamp: 8;
}
.testimonials-section .owl-item.center .review,
.testimonials-section .owl-item.center .name {
    opacity: 1;
}


/* ---------- service areas (live-site design; image now covers the taller section) ---------- */
.home .service-areas {
    background-color: var(--color-dark);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}