/* Accent color override: muted steel blue (#89b4cc) replaces theme red (#eb6165) */
a.btn, .btn, a.btn-link, .btn-link, button, input[type=submit] {
    border-color: #89b4cc;
}
a.btn:before, .btn:before, a.btn-link:before, .btn-link:before, button:before {
    background: #89b4cc;
}
a:hover { color: #89b4cc; }
.preloader .spinner,
.preloader .spinner.spinner-line {
    background: #89b4cc;
}
.section.main-slider .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active,
.section.full-slider .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active,
.section.half-slider .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: #89b4cc;
}
body .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background: #89b4cc;
}
body .js-testimonials .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: #89b4cc;
}

/* Smooth fade between logos */
.logo-img {
    transition: opacity 0.25s ease-in-out;
}

/* Force the true color of the PNG (removes Aster’s black filter) */
.logo-img,
.logo-image img,
.header .logo-image img {
    filter: none !important;
    -webkit-filter: none !important;
}

/* Drop shadow on logo when showing the white version */
.header .logo-image .logo-img[src*="logo-light"] {
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.6)) !important;
}

/* Text shadow only when slider text is white (no .dark class present) */
.hero-main-slider .slide-titles .titles:not(.dark) .title,
.hero-main-slider .slide-titles .titles:not(.dark) .label,
.hero-main-slider .slide-titles .titles:not(.dark) .subtitle {
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

/* Text shadow only when slider text is dark (.dark class present) */
.hero-main-slider .slide-titles .titles.dark .title,
.hero-main-slider .slide-titles .titles.dark .label,
.hero-main-slider .slide-titles .titles.dark .subtitle {
    text-shadow: 0 2px 8px rgba(255,255,255,0.6);
}

/* Video background slide */
.slide-video {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    overflow: hidden;
}
.slide-video video {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%; min-height: 100%;
    width: auto; height: auto;
    object-fit: cover;
}

/* Hide logo before it overlaps the vertically-centered slider text at wide/short aspect ratios.
   Restricted to min-width: 1024px so phones in landscape (width ~667-926px) still show the logo. */
.logo-image {
    transition: opacity 0.25s ease-in-out;
}

/* Only hide logo on true desktop short windows — well above any phone/foldable width */
@media (max-height: 700px) and (min-width: 1400px) {
    .logo-image {
        opacity: 0;
        pointer-events: none;
    }
}

/* Reduce hero slider title on narrow portrait viewports so the subtitle stays visible.
   The 108px Playfair Display title wraps to many lines in narrow widths, pushing the
   subtitle off the bottom of the full-height slider. Covers phones, foldable cover
   screens, and narrow desktop windows (≈9:20 ratio and narrower). */
@media (orientation: portrait) and (max-width: 480px) {
    .hero-main-slider .slide-titles .title {
        font-size: 52px;
        margin: 0 0 15px 0;
    }
    .hero-main-slider .slide-titles {
        padding: 20px 25px;
    }
}

/* Reduce hero slider title size on phones/foldables in landscape.
   Targets short landscape screens (covers standard phones and Fold 6 cover screen).
   max-height: 600px catches Fold 6 cover landscape (~484px) as well as standard phones (~370-430px). */
@media (orientation: landscape) and (max-height: 600px) {
    .hero-main-slider .slide-titles .title {
        font-size: 28px;
        margin: 0 0 10px 0;
    }
    .hero-main-slider .slide-titles {
        padding: 10px 15px;
    }

    /* The fixed logo (96×113 CSS px, top:30px) would overlap slider text on short
       landscape viewports — hide it at the same breakpoint as the text-size reduction. */
    .logo-image {
        opacity: 0;
        pointer-events: none;
    }
}

/* Extra breathing room between the fixed header logo and the first about page text. */
.section.section-inner.section-description {
    margin-top: 280px !important;
}

/* On mobile/tablet (<=1100px) reduce the margin so the section always lands within
   the initial viewport even when the browser address bar is visible. The logo is
   96×113 CSS px at top:30px, so its bottom edge is ~143px — 180px clears it safely.
   Needs !important to win over the base rule above. */
@media screen and (max-width: 1100px) {
    .section.section-inner.section-description {
        margin-top: 180px !important;
    }
}