/* Hero Owl Carousel — fashion-style split layout */

.hero-slider-section {

    position: relative;

    background: #f3f4f6;

    overflow: hidden;

    min-height: 520px;

}



.hero-slider-bg {

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:

        linear-gradient(135deg, transparent 40%, rgba(209, 213, 219, 0.35) 40%, rgba(209, 213, 219, 0.35) 42%, transparent 42%),

        linear-gradient(225deg, transparent 55%, rgba(229, 231, 235, 0.5) 55%, rgba(229, 231, 235, 0.5) 58%, transparent 58%),

        linear-gradient(160deg, rgba(255, 255, 255, 0.9) 0%, #f3f4f6 50%, #eef0f3 100%);

}



.hero-owl {

    position: relative;

    z-index: 1;

}



.hero-owl:not(.owl-loaded) > .hero-slide:not(:first-child) {

    display: none;

}



.hero-owl .owl-stage-outer {

    overflow: hidden;

}



.hero-owl .owl-stage-outer,

.hero-owl .owl-stage,

.hero-owl .owl-item {

    min-height: 520px;

}



.hero-slide {

    min-height: 520px;

    display: flex;

    align-items: center;

    padding: 3rem 0 3.5rem;

}



.hero-slide-inner {

    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: 2rem;

    min-height: 420px;

}



.hero-slide-content {

    max-width: 520px;

    padding-left: 2.5rem;

    position: relative;

    z-index: 2;

}



.hero-slide-title {

    font-size: clamp(2rem, 4.5vw, 3.25rem);

    font-weight: 700;

    line-height: 1.15;

    color: #111827;

    text-transform: uppercase;

    letter-spacing: 0.02em;

    margin-bottom: 1.25rem;

}



.hero-title-accent {

    color: var(--nav-cta, #0dbcd3);

}



.hero-slide-text {

    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    font-size: 0.9375rem;

    line-height: 1.7;

    color: #6b7280;

    max-width: 380px;

    margin-bottom: 2rem;

}



.hero-slide-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 1rem;

    align-items: center;

}



.hero-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 0.875rem 1.75rem;

    font-family: 'Inter', sans-serif;

    font-size: 0.75rem;

    font-weight: 600;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    text-decoration: none;

    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;

}



.hero-btn-primary,

.hero-btn-secondary {

    background: var(--nav-cta, #4a8585);

    color: #ffffff;

    border: none;

    outline: none;

    box-shadow: none;

}



.hero-btn-primary:hover,

.hero-btn-secondary:hover {

    background: var(--nav-cta-hover, #3d7171);

    color: #ffffff;

}



.hero-btn-primary:focus-visible,

.hero-btn-secondary:focus-visible {

    outline: 2px solid rgba(74, 133, 133, 0.5);

    outline-offset: 2px;

}



.hero-slide-media {

    display: flex;

    align-items: flex-end;

    justify-content: center;

    height: 100%;

    min-height: 380px;

}



.hero-slide-media img {

    max-height: 480px;

    width: auto;

    max-width: 100%;

    object-fit: contain;

    object-position: bottom center;

}



/* Owl dots — vertical, left side */

.hero-slider-section .owl-dots {

    position: absolute;

    left: 1.25rem;

    top: 50%;

    transform: translateY(-50%);

    width: auto;

    margin: 0;

    display: flex;

    flex-direction: column;

    gap: 0.75rem;

    z-index: 10;

}



.hero-slider-section .owl-dot {

    width: 10px;

    height: 10px;

    margin: 0;

    border-radius: 50%;

    background: #d1d5db !important;

    transition: background 0.2s ease, transform 0.2s ease;

}



.hero-slider-section .owl-dot.active {

    background: var(--nav-cta, #0dbcd3) !important;

    transform: scale(1.15);

}



.hero-slider-section .owl-dot span {

    display: none;

}



.hero-slider-section .owl-nav {

    display: none;

}



@media (max-width: 992px) {

    .hero-slide-inner {

        grid-template-columns: 1fr;

        text-align: center;

        min-height: auto;

    }



    .hero-slide-content {

        max-width: none;

        padding-left: 0;

        order: 1;

    }



    .hero-slide-text {

        margin-left: auto;

        margin-right: auto;

    }



    .hero-slide-actions {

        justify-content: center;

    }



    .hero-slide-media {

        order: 2;

        min-height: 280px;

    }



    .hero-slide-media img {

        max-height: 320px;

    }



    .hero-slider-section .owl-dots {

        left: 50%;

        top: auto;

        bottom: 1rem;

        transform: translateX(-50%);

        flex-direction: row;

    }

}



@media (max-width: 576px) {

    .hero-slide {

        min-height: auto;

        padding: 2rem 0 3.5rem;

    }



    .hero-slide-title {

        font-size: 1.75rem;

    }

}