/* ===============================
    HERO SECTION RSUD v2 uji coba
    ================================ */
.hero-rsud {
    background: linear-gradient(
        rgba(255, 255, 255, 0.55),
        rgba(255, 255, 255, 0.55)
        ),
        url("../../../img/hero-rsud.jpg");
    background-size: cover;
    /* background-position: center; */
    background-position:right center;
    /* padding: 90px 20px 110px;
    min-height: 300px; */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height:640px;
    padding:0 20px;
}

/* ==========================================================
   HERO INNER
========================================================== */

.hero-rsud-inner{
 /* position:relative; */
    width:100%;
    max-width:1440px;
    margin:0 auto;
}

/* ==========================================================
   HERO SLIDER
========================================================== */
.hero-slider{
    position:relative;
    width:100%;
    overflow:hidden;
    display:grid;
}

/* ==========================================================
   HERO SLIDE
========================================================== */
.hero-slide{
    width:100%;
    display:block;
    grid-area:1 / 1;
    opacity:0;
    z-index:1;
    pointer-events:none;
    transition:opacity .9s ease;
    visibility:hidden;
}

.hero-slide.active{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    z-index:2;
}

/* ==========================================================
HERO CONTAINER
========================================================== */
.hero-rsud-container{
    width:100%;
    max-width:1280px;
    margin:0 auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
    /* gap:60px; */
    padding:0 70px;
    gap:80px;
}

/* ==========================================================
HERO LEFT
========================================================== */

.hero-rsud-left{
    flex:0 0 48%;
    max-width:600px;
}

/* ==========================================================
HERO RIGHT
========================================================== */

.hero-rsud-right{
    flex:0 0 52%;
}

.hero-rsud-title{
    /* font-size:52px;
    line-height:1.15; 
    margin-bottom:22px;
    font-weight:700;*/
    color:#1d3557;
    line-height:1.08;
    font-weight:800;
    letter-spacing:-1px;
    margin-bottom:26px;
    font-size:58px;
}

.hero-rsud-title span{
    color:#d71920;
    display:block;
}

.hero-rsud-accent{
    width:64px;
    height:4px;
    background:#d71920;
    border-radius:20px;
    margin:0 0 28px 0;
}

.hero-rsud-description{
    line-height:1.8;
    color:#555;
    /* margin-bottom:34px;
    font-size:18px; */
    margin-bottom:40px;
    max-width:520px;
    font-size:20px;
}

.hero-rsud-buttons{
    display:flex;
    gap:18px;
}


/* ==========================================================
HERO BUTTON
========================================================== */
.hero-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    /* height:54px; */
    /* border-radius:10px; */
    /* font-weight:600; */
    /* min-width:170px; */
    padding:0 28px;
    transition:.25s;
    text-decoration:none;
    gap:10px;
    height:58px;
    min-width:190px;
    border-radius:14px;
    font-size:17px;
    font-weight:600;
}

.hero-btn i{
    /* font-size:16px; */
    font-size:18px;
}

.hero-btn-primary{
    background:#d71920;
    color:#fff;
    box-shadow:0 10px 24px rgba(215,25,32,.22);
}

.hero-btn-primary:hover{
    background:#bf1118;
    transform:translateY(-2px);
    transition:.25s ease;
    text-decoration:none;
}

.hero-btn-outline{
    border:2px solid #d71920;
    color:#d71920;
    background:#fff;
    box-shadow:0 10px 24px rgba(215,25,32,.22);
}

.hero-btn-outline:hover{
    background:#d71920;
    color:#fff;
    transform:translateY(-2px);
    transition:.25s ease;
    text-decoration:none;
}

/* ==========================================================
   HERO ARROW
========================================================== */
.hero-arrow{
    position:absolute;
    /* top:50%;
    transform:translateY(-50%); */
    width:52px;
    height:52px;
    border:none;
    border-radius:50%;
    background:rgba(255,255,255,.35);
    backdrop-filter:blur(8px);
    color:#444;
    cursor:pointer;
    transition:.25s ease;
    z-index:5;
    bottom:6%;
}

.hero-arrow:hover{
    background:#d71920;
    color:#fff;
    transform:scale(1.08);
}

.hero-arrow-left{
    left:42px;
}

.hero-arrow-right{
    right:42px;
}

/* ==========================================================
   HERO PAGINATION
========================================================== */
.hero-pagination{
    position:absolute;
    left:50%;
    bottom:-180px;
    transform:translateX(-50%);
    display:flex;
    gap:12px;
}

.hero-pagination span{
    width:12px;
    height:12px;
    border-radius:50%;
    background:rgba(255,255,255,.65);
    cursor:pointer;
    transition:.25s;
}

.hero-pagination span.active{
    width:34px;
    border-radius:30px;
    background:#d71920;
}