/*==================================================
DEVELOPERS
==================================================*/

.developers{

    padding:120px 0;

    background:#f8f8f8;

}


/*==================================================
TÍTULO
==================================================*/

.section-title{

    max-width:850px;

    margin:0 auto 70px;

    text-align:center;

}

.section-title span{

    display:inline-block;

    color:var(--gold);

    font-size:14px;

    font-weight:700;

    letter-spacing:3px;

    margin-bottom:15px;

}

.section-title h2{

    margin-bottom:20px;

}

.section-title p{

    font-size:18px;

    color:#666;

}


/*==================================================
SLIDER
==================================================*/

.developers-slider{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:30px;

}


/*==================================================
TARJETA
==================================================*/

.developer-card{

    width:100%;

    max-width:1150px;

    background:white;

    border-radius:25px;

    overflow:hidden;

    display:grid;

    grid-template-columns:55% 45%;

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

    transition:.35s;

}

.developer-card:hover{

    transform:translateY(-8px);

}


/*==================================================
IMAGEN
==================================================*/

.developer-image{

    width:100%;

    height:600px;

}

.developer-image img{

    width:100%;

    height:100%;

    object-fit:cover;

}


/*==================================================
INFO
==================================================*/

.developer-info{

    padding:60px;

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.developer-info h3{

    font-size:42px;

    margin-bottom:25px;

}

.developer-info p{

    font-size:18px;

    line-height:1.8;

    margin-bottom:35px;

    color:#666;

}

.developer-info ul{

    list-style:none;

    display:flex;

    flex-direction:column;

    gap:18px;

    margin-bottom:40px;

}

.developer-info li{

    font-size:18px;

    color:#555;

}


/*==================================================
FLECHAS
==================================================*/

.slider-btn{

    width:60px;

    height:60px;

    border:none;

    border-radius:50%;

    background:white;

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

    font-size:22px;

    cursor:pointer;

    transition:.3s;

}

.slider-btn:hover{

    background:var(--gold);

    color:white;

}


/*==================================================
DOTS
==================================================*/

.slider-dots{

    display:flex;

    justify-content:center;

    gap:12px;

    margin-top:40px;

}

.slider-dots span{

    width:14px;

    height:14px;

    border-radius:50%;

    background:#d8d8d8;

    cursor:pointer;

    transition:.3s;

}

.slider-dots span.active{

    background:var(--gold);

    transform:scale(1.2);

}