/* PROTECT */
#protectCarousel{
    position:relative;
}

#protectCarousel .carousel-inner{
    min-height: 480px;
    overflow: hidden;
}

.carousel-item{
    min-height:480px;
    position:relative;
}

/* jangan ganggu behavior bootstrap */
.carousel-item.active,
.carousel-item-next,
.carousel-item-prev{
    display:flex;
    align-items:center;
    justify-content:center;
}

.protect-section{
    background:#fff;
    padding:80px 0;
}

.protect-layout{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:60px;

    min-height:500px;
}

.protect-layout.reverse{
    flex-direction:row-reverse;
}

.protect-slide{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:480px;
}

.protect-content{
    max-width:1200px;
    margin:auto;

    display:flex;
    align-items:center;
    justify-content:space-between;            

    position:relative;
    z-index:5;
    gap:100px;
}

.protect-bg{
    position:absolute;
    left:0;
    right:0;
    top:50%;
    transform:translateY(-50%);
    height:260px;
    background:#d9d9d9;
    z-index:0;
}

.carousel-item .protect-image-top img,
.carousel-item .protect-image-bottom img,
.carousel-item .impact-img img{
    transform: none !important;
    transition: none !important;
}

.carousel-item img{
    transform:none !important;
    animation:none !important;
    transition:none !important;
}

.protect-image-top{
    position:absolute;
    left:40px;
    top:20px;
}

.protect-image-bottom{
    position:absolute;
    left:220px;
    top:130px;
}

.protect-image-top,
.protect-image-bottom{
    width:340px;
    height:190px;

    border-radius:12px;
    overflow:hidden;
}

.protect-image-top img,
.protect-image-bottom img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}        

.protect-tag{
    position:absolute;

    background:#fff;
    padding:12px 16px;
    border-radius:8px;
    box-shadow:0 2px 8px rgba(0,0,0,.08);

    font-style:italic;
    color:#333;
    line-height:1.2;
}

.protect-tag::before{
    content:'';
    width:4px;
    height:40px;
    background:#d9a520;
    border-radius:10px;

    position:static;
    flex-shrink:0;
}


.tag-right{
    left:400px;
    top:55px;
    padding:12px 16px 12px 30px;
}

.tag-right::before{
    content:'';
    position:absolute;

    left:10px;
    top:50%;
    transform:translateY(-50%);

    width:4px;
    height:40px;

    background:#d9a520;
    border-radius:10px;
}

.tag-bottom{
    left:48px;
    top:230px;

    text-align:right;
    justify-content:flex-end;
    padding:12px 30px 12px 16px;
}

.tag-bottom::before{
    content:'';
    position:absolute;

    right:10px;
    top:50%;
    transform:translateY(-50%);

    width:4px;
    height:40px;

    background:#d9a520;
    border-radius:10px;
}

.tag-right,
.tag-bottom{
    min-width:150px;
}

.protect-card{
    position:relative;

    flex:0 0 320px;
    width:auto;
    max-width:380px;
    min-height:300px;

    margin-left:30px;
    border-radius:22px;
    padding:35px;

    z-index:5;
    background:#d9a520;
    color:#222;            
}

.protect-card h3{
    color:#fff;
    line-height:1.15;
    margin-bottom:25px;
    position:relative;
}

.protect-card h3::after{
    content:'';
    display:block;
    width:80px;
    height:1px;
    background:#fff;
    margin-top:15px;
}

.protect-visual{
    position:relative;

    flex:0 0 620px;
    width:auto;
    height:300px;

    z-index:5;            
}

.protect-content-center{
    max-width:1200px;
    width:100%;
    display:grid;
    grid-template-columns:340px 340px 340px;
    justify-content:center;
    align-items:center;
    gap:30px;
    margin:0 auto;
    /* outline:2px solid blue; */
}

.protect-card-center{
    margin:0;
    flex:0 0 340px;    
    min-height:320px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;    
}

.protect-card-center h3{
    color:#fff;
    line-height:1.15;
    margin-bottom:25px;
    position:relative;
    text-align:center;
}

.protect-card-center h3::after{
    content:'';
    display:block;

    width:80px;
    height:1px;

    background:#fff;

    margin:15px auto 0;
}

.protect-side{
    width:340px;
    display:flex;
    flex-direction:column;
    gap:25px;
}        

.protect-side-item{
    display:grid;
    align-items:center;
    gap:15px;
}

.protect-side-item img{
    width:120px;
    height:90px;

    object-fit:cover;
    border-radius:6px;
}        

.side-text{
    position:relative;
    width:180px;
    min-width:180px;
    font-size:15px;
    line-height:1.6;
    color:#333;

    background:#fff;
    padding:12px 18px;
    border-radius:6px;
}
        
.side-text span{
    color:#d9a520;
    font-weight:700;
}

.side-text::before{
    content:'';
    position:absolute;

    top:50%;
    transform:translateY(-50%);

    width:4px;
    height:38px;

    background:#d9a520;
    border-radius:10px;
}

.side-text.right{
    text-align:left;
    padding-left:14px;
    position:relative;
    z-index:2;
}

.side-text.right::after{
    content:'';
    position:absolute;

    top:0;
    bottom:0;
    right:-80px;

    width:80px;

    background:linear-gradient(
        to right,
        #fff 0%,
        rgba(255,255,255,0) 100%
    );

    z-index:1;
}

.side-text.right::before{
    left:0;
}

.side-text.left{
    text-align:right;
    padding-right:14px;
    background:#fff;
    padding:12px 18px;
    border-radius:6px;    
}

.side-text.left::after{
    content:'';

    position:absolute;
    top:0;
    bottom:0;
    left:-60px;

    width:60px;

    background:linear-gradient(
        to left,
        #fff 0%,
        rgba(255,255,255,0) 100%
    );
}

.side-text.left::before{
    right:0;
}

.protect-side-left .top{
    justify-content:flex-start;
    grid-template-columns:120px 180px;    
}

.protect-side-left .bottom{
    justify-content:flex-end;
    grid-template-columns:180px 120px;    
}        

.protect-side-right .top{
    justify-content:flex-end;
    grid-template-columns:180px 120px;    
} 

.protect-side-right .bottom{
    justify-content:flex-start;
    grid-template-columns:120px 180px;
}

.protect-side-left .bottom img,
.protect-side-right .bottom img{
    margin:0;
}

.protect-side-left .top .side-text{
    text-align:right;
    padding-right:14px;
    padding-left:0;

    position:relative;
}

.protect-side-right .top .side-text{
    text-align:left;
}

.protect-side-left .bottom .side-text{
    background:#fff;
    padding:12px 18px;
    border-radius:6px;
    position:relative;
}

.protect-side-left .bottom .side-text.left::after{
    content:'';

    position:absolute;
    top:0;
    bottom:0;

    left:auto;
    right:-80px;

    width:80px;

    background:linear-gradient(
        to right,
        #fff 0%,
        rgba(255,255,255,0) 100%
    );
}

.protect-side-left .bottom .side-text{
    overflow:visible;
    z-index:2;
}

.protect-side-left .bottom{
    position:relative;
}

.protect-side-right .bottom .side-text{
    background:#fff;
    padding:12px 18px;
    border-radius:6px;
    position:relative;
}

.protect-side-right .bottom .side-text::after{
    content:'';
    position:absolute;

    top:0;
    bottom:0;
    left:-80px;

    width:80px;

    background:linear-gradient(
        to left,
        #fff 0%,
        rgba(255,255,255,0) 100%
    );

    pointer-events:none;
}

.protect-content-impact{
    width:100%;
    max-width:1200px;

    display:flex;
    align-items:center;
    justify-content:center;

    gap:70px;
}

.impact-visual{
    position:relative;
    flex:0 0 620px;
    height:340px;
}

.impact-img{
    position:absolute;

    width:240px;
    height:140px;

    border-radius:14px;
    overflow:hidden;
}

.impact-img img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* cluster gambar di tengah */
.impact-img1{
    left:40px;
    top:10px;
    z-index:1;
}

.impact-img2{
    left:230px;
    top:30px;
    z-index:2;
}

.impact-img3{
    left:120px;
    top:130px;
    z-index:3;
}

.impact-img4{
    left:300px;
    top:170px;
    z-index:4;
}

.impact-label{
    position:absolute;

    font-style:italic;
    color:#333;

    line-height:1.1;
}

.impact-label::before{
    content:"";

    position:absolute;

    width:4px;
    height:42px;

    background:#d9a520;
    border-radius:20px;
}

/* kanan atas */
.impact-top{
    left:500px;
    top:55px;
}

.impact-top::before{
    left:-12px;
}

/* kiri bawah */
.impact-bottom{
    left:-2px;
    top:245px;
    text-align:right;
}

.impact-bottom::before{
    right:-12px;
}

.impact-card{
    position:relative;
    flex:0 0 320px;
    max-width:380px;
    min-height:300px;

    padding:35px;
    border-radius:22px;

    background:#d9a520;

    display:flex;
    flex-direction:column;
    justify-content:center;
    z-index:5;    
}

.impact-card h3{
    color:#fff;
    line-height:1.15;
    margin-bottom:25px;
    position:relative;
    text-align:right;
}

.impact-card h3::after{
    content:'';
    display:block;
    width:80px;
    height:1px;
    background:#fff;

    margin-top:15px;
    margin-left:auto; /* dorong ke kanan */
}

.impact-card p{
    color:#333;
    line-height:1.15;
    margin-bottom:25px;
    position:relative;
    text-align:right;
}

.protect-prev,
.protect-next{
    position:absolute;
    top:0;
    bottom:0;
    width:50px;

    display:flex;
    align-items:center;
    justify-content:center;

    z-index:50;
    opacity:0.6;
    transition:opacity .2s ease;

    transform:none !important;
}

.carousel:hover .protect-prev,
.carousel:hover .protect-next{
    opacity:0.6;
    pointer-events:auto;
}

.protect-prev{ left:20px; }
.protect-next{ right:20px; }

.protect-prev:hover,
.protect-next:hover{
    opacity:1;
}

.protect-prev .carousel-control-prev-icon,
.protect-next .carousel-control-next-icon{
    margin:auto;
    padding:15px;
    background-size:55%;    
}

.protect-visual,
.impact-visual{
    position:relative;
    width:620px;
    height:340px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.protect-card,
.impact-card,
.protect-card-center{
    height:340px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:35px;
    border-radius:22px;
}

.protect-card,
.impact-card{
    background:#d9a520;
    color:#222;
}

.protect-content,
.protect-content-impact,
.protect-content-center{
    position:relative;
    z-index:2;
}

.protect-visual,
.impact-visual{
    position:relative;
    height:340px;
    display:flex;
    align-items:center;
    justify-content:center;
}