/*==========================================
    BEFORE AFTER
==========================================*/

#before-after{

    background:#111;

    padding:90px 0;

}

.ba-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    margin-bottom:50px;

}

.ba-header span{

    color:#D4AF37;

    letter-spacing:3px;

    text-transform:uppercase;

    font-size:13px;

    font-weight:600;

}

.ba-header h2{

    color:#FFF;

    font-size:50px;

    margin-top:10px;

    font-family:'Playfair Display', serif;

}

.ba-preview{

    height:200px;

    border-radius:15px;

    overflow:hidden;

    background:#111;

}

.ba-preview img{
    width:100%;
    height:100%;
    object-fit:cover;
}



.ba-link{

    color:#D4AF37;

    border:1px solid rgba(212,175,55,.5);

    padding:14px 28px;

    text-transform:uppercase;

    font-size:13px;

    transform: translateY(-70%);

    transition:.35s;

}

.ba-link:hover{

    background:#D4AF37;

    color:#111;

}

.ba-link i{

    margin-left:8px;

}

.ba-item{

    padding:6px;

}

.ba-item img{

    width:100%;

    border:1px solid rgba(212,175,55,.6);

    transition:.45s;

}

.ba-item:hover img{

    transform:scale(1.05);

    box-shadow:0 20px 45px rgba(0,0,0,.45);

}

#transformationsDetail{

    display:none;

    margin-top:55px;

    padding:45px;

    background:#0d0d0d;

    border:1px solid rgba(212,175,55,.15);

    border-radius:20px;

    overflow:hidden;

    box-shadow:0 20px 60px rgba(0,0,0,.45);

}

#transformationsDetail h3{

    color:#fff;

    text-align:center;

    font-size:36px;

    margin-bottom:15px;

    font-family:'Playfair Display',serif;

}

#transformationsDetail p{

    color:#bdbdbd;

    text-align:center;

    margin-bottom:40px;

    font-size:16px;

}

#transformationsCarousel{

    margin-top:15px;

}

#transformationsCarousel .item{

    padding:10px;

}

#transformationsCarousel img{

    width:100%;

    height:250px;

    object-fit:cover;

    border-radius:15px;

    border:1px solid rgba(212,175,55,.25);

    transition:.35s;

}

#transformationsCarousel .item:hover img{

    transform:scale(1.05);

    box-shadow:0 18px 40px rgba(0,0,0,.5);

}

.owl-theme .owl-controls .owl-buttons div{

    width:40px;
    height:40px;

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

    padding:0;

    border-radius:50%;

    background:#1b1b1b;

    border:1px solid rgba(212,175,55,.25);

    color:#D4AF37;

    opacity:1;

    transition:.35s;

}
.owl-theme .owl-controls .owl-buttons div i{

    font-size:20px;

    line-height:1;

    margin:0;

    position:relative;

    left:0;
    top:0;

}

.owl-theme .owl-controls .owl-buttons div:hover{

    background:#D4AF37;

    color:#111;

}

.btn-close-transformations{

    margin-top:40px;

    padding:14px 34px;

    background:transparent;

    border:1px solid #D4AF37;

    color:#D4AF37;

    text-transform:uppercase;

    letter-spacing:2px;

    transition:.35s;

}

.btn-close-transformations:hover{

    background:#D4AF37;

    color:#111;

}


/* Contenedor de botones */
#transformationsCarousel .owl-controls{

    position:relative;

}

/* Contenedor de las flechas */
#transformationsCarousel .owl-buttons{

    width:100%;

    position:absolute;

    top:-165px;

    left:0;

}

/* Flecha izquierda */
#transformationsCarousel .owl-prev{

    position:absolute;

    left:-30px;

}

/* Flecha derecha */
#transformationsCarousel .owl-next{

    position:absolute;

    right:-30px;

}

/* Estilo de ambos botones */
#transformationsCarousel .owl-buttons div{

    width:46px;

    height:46px;

    border-radius:50%;

    background:#1b1b1b;

    border:1px solid rgba(212,175,55,.25);

    color:#D4AF37;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:0;

}

/* Ícono */
#transformationsCarousel .owl-buttons div i{

    margin:0;

    font-size:18px;

    line-height:1;

}

@media (max-width: 768px) {
    .ba-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 20px;
    }
    .ba-header h2 {
        font-size: 32px;
    }
    .ba-link {
        transform: none;
        display: inline-block;
    }
    #transformationsDetail {
        padding: 20px 15px;
        margin-top: 30px;
    }
    #transformationsDetail h3 {
        font-size: 26px;
    }
    #transformationsCarousel .owl-buttons {
        display: none !important;
    }
}