.hs-wrap{
    --hs-h:700px;
    height:var(--hs-h);
    position:relative;
    overflow:hidden;
    background:#fff;
    font-family:'Poppins',sans-serif
}
.hs-wrap .hs-swiper{
    width:100%;
    height:100%
}
.hs-wrap .swiper-slide{
    display:flex;
    height:100%;
    background:#fff
}
.hs-left {
    flex: 0 0 55%;
    width: 55%;
    box-sizing: border-box;
    min-width: 0;
    padding: 60px 40px 60px 3.5vw;
    display: flex;
    align-items: center;
}
.hs-img{
    flex:0 0 45%;
    width:45%;
    box-sizing:border-box;
    min-width:0;
    position:relative;
    overflow:hidden
}
.hs-img img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover
}

/* Text: glides up on the active slide with a stagger */
.hs-anim{
    opacity:0;
    transform:translateY(30px);
    transition:opacity .4s ease, transform 0s linear .6s
}
.swiper-slide-active .hs-anim{
    opacity:1;
    transform:none;
    transition:opacity .9s ease var(--d,0s), transform .9s cubic-bezier(.22,.61,.36,1) var(--d,0s)
}

/* Typography (class-based, so any heading tag looks the same) */
.hs-wrap .hs-title{
    font-size: clamp(32px, 4.1667vw, 60px);
    line-height:1.1;
    font-weight:600;
    color:#333333;
    margin:0 0 20px;
    padding:0
}
.hs-g{
    color:#3A7D1E
}
.hs-gi{
    color:#3A7D1E;
    font-weight:700
}
.hs-i{
    font-style:italic;
    font-weight:700
}
.hs-bl{
    color:#192C59
}
.hs-bli {
    color:#192C59;
    font-weight:700
}
.hs-wrap .hs-desc {
    font-size: 16px;
    color: #000;
    margin: 0 0 40px;
    line-height: 1.7;
    letter-spacing: 0.5px;
}

/* Buttons */
.hs-btns{
    display:flex;
    gap:15px;
    flex-wrap:wrap
}
.hs-b1, .hs-b2 {
    padding: 15px 35px;
    border-radius: 50px;
    font-size: 16px;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform .25s;
}
.hs-b1{
    background:#192C59;
    color:#fff
}
.hs-b2{
    border:1px solid #333333;
    color:#333333
}

/* Dots (centered on the image half) */
body .hs-dots{
    position:absolute;
    bottom:25px;
    left:75%;
    transform:translateX(-50%);
    z-index:10;
    display:flex;
    gap:10px
}
body .hs-dot{
    width:19px;
    height:19px;
    padding:0;
    border:0;
    border-radius:50%;
    background:#D9D9D9;
    cursor:pointer;
    transition:background .4s ease
}
body .hs-dot.is-active, body .hs-dot:hover{
    background:#3E7E1E
}

/* Tablet / small laptop */
@media(max-width:1200px){
    .hs-wrap{
        --hs-h:auto;
    }
    .hs-left{
        padding:40px
    }
}

/* Mobile: text on top, image below */
@media(max-width:768px){
    .hs-wrap {
        height: auto;
    }
    .hs-wrap .hs-swiper{
        height:100%
    }
    .hs-wrap .swiper-slide {
        flex-direction: column;
        height: 100%;
        align-items: center;
        justify-content: center;
    }
    .hs-left {
        flex: none;
        width: 100%;
        padding: 40px 25px;
        position: relative;
        z-index: 9;
    }
    .hs-img{
        flex:none;
        width:100%;
        height:300px;
        position: absolute;
        left: 0;
        right: 0;
        width: 100%;
        height: 100%;
    }
    .hs-img::before {
        position: absolute;
        content: "";
        background: #000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 0.7;
    }
    .hs-wrap .hs-desc {
        margin: 0 0 50px;
    }
    .hs-wrap .hs-title{
        font-size:clamp(28px,8vw,38px)
    }
    body .hs-dots{
        left:50%;
        bottom:15px
    }
    .hs-left .hs-title *, .hs-left .hs-title,  .hs-left .hs-desc, .hs-left .hs-desc * {
        color: #fff;
    }
    .hs-b2 {
        border: 1px solid #fff;
        color: #333333;
        background: #fff;
    }
    body .hs-dots{
        bottom:30px;
        gap:13px
    }
    body .hs-dot {
        width: 15px;
        height: 15px;
    }
}
@media(max-width:575px){
    .hs-left {
        padding: 40px 25px;
    }
    .hs-left br {
        display: none;
    }
}
@media(prefers-reduced-motion:reduce){
    .hs-anim,
    .swiper-slide-active .hs-anim{
        transition:none
    }
}