/* Video hero background in home */
.page-title-home-2 .video-bg {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 700px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-title-home-2 .video-bg video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page-title-home-2 .content {
    z-index: 2;
}

/* Sound toggle for the hero background video. The video always starts
   muted (browsers only allow unmuted autoplay after a user gesture), so
   the sound comes on with the visitor's first interaction and this button
   is the explicit way to turn it off again. It sits with the hero copy,
   under the call to action, so it is never cut off by the fold. */
.page-title-home-2 .hero-sound-slot {
    display: flex;
    justify-content: center;
    margin-top: 26px;
}

.page-title-home-2 .hero-sound-toggle {
    width: 46px;
    height: 46px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.85);
    color: var(--Secondary);
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.page-title-home-2 .hero-sound-toggle:hover {
    background-color: var(--White);
}

.page-title-home-2 .hero-sound-toggle i {
    font-size: 18px;
    line-height: 1;
}

.page-title-home-2 .hero-sound-toggle.is-on {
    background-color: var(--Secondary);
    color: var(--White);
}

/* The toggle reveals with the rest of the hero copy. */
.slider-home-2 .swiper-slide-active .content .fade-item-6 {
    transform: translateY(0);
    visibility: visible;
    opacity: 1;
    transition-delay: 0.8s;
}

@media (max-width: 991.98px) {
    .page-title-home-2 .video-bg {
        min-height: 600px;
    }
}

@media (max-width: 575.98px) {
    .page-title-home-2 .video-bg {
        min-height: 480px;
    }

    /* Keep the toggle clear of the grass strip along the hero's bottom. */
    .page-title-home-2 .hero-sound-slot {
        margin-bottom: 70px;
    }
}

/* Keep tf-animate wrappers visible even when their scroll-triggered
   animate__animated class hasn't been applied yet (e.g. on first paint,
   reduced motion, or when the scroll animation doesn't fire). Without this,
   content inside them stays `visibility: hidden` and appears missing. */
.tf-animate__box,
.tf-animate__box-2,
.tf-animate__rotate-left,
.tf-animate__rotate-right {
    visibility: visible !important;
}

/* ---- Mobile nav ---- */
/* Wide header logos are fed a square badge asset (logo.png) and our global
   `img { height: auto }` blows them up; force sane, contained sizing. */
.tf-topbar .logo img,
.header .logo-site img,
.header .logo img {
    height: 50px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
}

/* Mobile drawer logo: keep it small and contained. */
.mobile-nav-wrap .inner-mobile-nav .logo img {
    height: 42px;
    width: auto;
    max-width: 173px;
    object-fit: contain;
}

/* Plain top-level mobile links had no white styling (dark-on-dark). */
.mobile-nav-wrap .inner-mobile-nav .mobile-main-nav #menu-mobile-menu > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--White);
    font-family: "Work Sans", sans-serif;
    font-weight: 500;
    font-size: 18px;
    margin-bottom: 15px;
}

.mobile-nav-wrap .inner-mobile-nav .mobile-main-nav #menu-mobile-menu > li > a:hover,
.mobile-nav-wrap .inner-mobile-nav .mobile-main-nav #menu-mobile-menu > li > a.current {
    color: var(--Secondary);
}

/* Sub-links readable on the green drawer. */
.mobile-nav-wrap .inner-mobile-nav .mobile-main-nav #menu-mobile-menu .sub-menu-mobile .menu-item a {
    font-size: 16px;
    color: var(--White);
}

/* Kill default disc bullets + indents in the drawer. */
.mobile-nav-wrap .inner-mobile-nav .mobile-main-nav #menu-mobile-menu,
.mobile-nav-wrap .inner-mobile-nav .mobile-main-nav #menu-mobile-menu .sub-menu-mobile {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

/* Privacy / policy page */
.s-terms {
    padding: 40px 0 80px;
}

.s-terms .content-box {
    max-width: 920px;
    margin: 0 auto;
    padding: 48px 56px 56px;
    background: var(--White);
    border: 1px solid var(--Border);
    border-radius: 20px;
    box-shadow: 0 20px 45px rgba(13, 64, 28, 0.06);
}

.s-terms .content-box .heading-section {
    margin-bottom: 30px;
}

.s-terms .content-box p {
    font-family: "Inter", sans-serif;
    font-size: 16px;
    line-height: 1.75;
    color: var(--Text-2);
    margin-bottom: 18px;
}

.s-terms .content-box h2 {
    font-family: "Work Sans", sans-serif;
    font-size: 30px;
    font-weight: 700;
    color: var(--Text-2);
    margin: 38px 0 16px;
}

.s-terms .content-box h3 {
    font-family: "Work Sans", sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: var(--Text-2);
    margin: 26px 0 12px;
}

.s-terms .content-box h4 {
    font-family: "Work Sans", sans-serif;
    font-size: 19px;
    font-weight: 600;
    color: var(--Text-2);
    margin: 22px 0 10px;
}

.s-terms .content-box ul {
    padding-left: 20px;
    margin: 0 0 22px;
}

.s-terms .content-box ul li {
    font-family: "Inter", sans-serif;
    font-size: 16px;
    line-height: 1.75;
    color: var(--Text-2);
    margin-bottom: 8px;
    list-style: disc;
}

.s-terms .content-box a {
    color: var(--Secondary);
}

@media (max-width: 767.98px) {
    .s-terms .content-box {
        padding: 32px 24px 40px;
    }
}