/* ========================================
CLIENTES HERO
======================================== */

.clientes-hero{

    position:relative;

    width:100%;

    min-height:90vh;

    overflow:hidden;

    display:flex;

    align-items:center;

    padding:
    150px
    7%
    100px;

    background:#00120d;
}

/* BG */

.clientes-bg{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;
}

/* OVERLAY */

.clientes-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
    to right,
    rgba(0,0,0,.75),
    rgba(0,0,0,.45));
}

/* CONTAINER */

.clientes-container{

    position:relative;

    z-index:2;

    width:100%;

    display:grid;

    grid-template-columns:
    1fr
    520px;

    gap:80px;

    align-items:center;
}

/* CONTENT */

.clientes-content span{

    display:inline-block;

    color:#1ea35c;

    font-size:14px;

    font-weight:800;

    letter-spacing:4px;

    margin-bottom:25px;
}

/* TITLE */

.clientes-content h1{

    font-size:72px;

    line-height:.95;

    color:#fff;

    font-weight:900;

    margin-bottom:30px;

    letter-spacing:-3px;
}

/* TEXT */

.clientes-content p{

    font-size:21px;

    line-height:1.8;

    color:rgba(255,255,255,.8);

    margin-bottom:40px;
}

/* BUTTONS */

.clientes-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;
}

/* BTN */

.clientes-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    width:220px;
    height:60px;

    border-radius:999px;

    background:#ff5b1f;

    color:#fff;

    font-weight:700;

    text-decoration:none;

    transition:.3s ease;
}

/* BTN 2 */

.clientes-btn-outline{

    display:flex;

    align-items:center;

    justify-content:center;

    width:220px;
    height:60px;

    border-radius:18px;

    border:2px solid rgba(255,255,255,.25);

    color:#fff;

    font-weight:700;

    text-decoration:none;

    transition:.3s ease;
}

/* HOVER */

.clientes-btn:hover{

    transform:translateY(-4px);
}

.clientes-btn-outline:hover{

    background:#fff;

    color:#111;
}

/* ========================================
IMAGE
======================================== */

.clientes-image{

    position:relative;
}

.clientes-image img{

    width:100%;

    position:relative;

    z-index:2;
}

/* GLOW */

.clientes-image-glow{

    position:absolute;

    width:350px;
    height:350px;

    background:#187a43;

    filter:blur(150px);

    opacity:.18;

    top:50%;
    left:50%;

    transform:
    translate(-50%,-50%);
}

/* ========================================
LOGOS SECTION
======================================== */

.clientes-logos-section{

    width:100%;

    padding:
    120px
    7%;

    background:#f7f7f7;
}

/* TITLE */

.clientes-title{

    text-align:center;

    margin-bottom:70px;
}

.clientes-title span{

    display:inline-block;

    color:#187a43;

    font-size:14px;

    font-weight:800;

    letter-spacing:4px;

    margin-bottom:20px;
}

.clientes-title h2{

    font-size:68px;

    line-height:1;

    color:#111;

    font-weight:900;

    margin-bottom:25px;
}

.clientes-title p{

    font-size:20px;

    color:#666;

    line-height:1.8;

    max-width:700px;

    margin:auto;
}

/* ========================================
GRID
======================================== */

.clientes-grid{

    display:grid;

    grid-template-columns:
    repeat(5,1fr);

    gap:25px;
}

/* CARD */

.cliente-logo{

    background:#fff;

    border-radius:24px;

    height:150px;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:25px;

    transition:.3s ease;

    box-shadow:
    0 15px 35px rgba(0,0,0,.05);
    border:1px solid rgba(0,0,0,.04);
}

/* IMAGE */

.cliente-logo img{

    max-width:100%;

    max-height:70px;

    object-fit:contain;

    filter:grayscale(100%);

    opacity:.75;

    transition:.3s ease;
}

/* HOVER */

.cliente-logo:hover{

    transform:translateY(-5px);
}

.cliente-logo:hover img{

    filter:none;

    opacity:1;
}

/* ========================================
TABLET
======================================== */

@media(max-width:1100px){

    .clientes-container{

        grid-template-columns:1fr;
    }

    .clientes-content{

        text-align:center;
    }

    .clientes-buttons{

        justify-content:center;
    }

    .clientes-content h1{

        font-size:62px;
    }

    .clientes-grid{

        grid-template-columns:
        repeat(3,1fr);
    }

}

/* ========================================
MOBILE
======================================== */

@media(max-width:768px){

    .clientes-hero{

        padding:
        130px
        20px
        90px;
    }

    .clientes-content h1{

        font-size:42px;
    }

    .clientes-content p{

        font-size:17px;
    }

    .clientes-title h2{

        font-size:38px;
    }

    .clientes-grid{

        grid-template-columns:
        repeat(2,1fr);

        gap:18px;
    }

    .cliente-logo{

        height:110px;

        padding:18px;
    }

    .cliente-logo img{

        max-height:45px;
    }

}
/* ========================================
LARGE DESKTOP
======================================== */

@media(max-width:1600px){

.clientes-content h1{

    font-size:68px;
}

.clientes-title h2{

    font-size:58px;
}

}

/* ========================================
LAPTOP
======================================== */

@media(max-width:1400px){

.clientes-container{

    gap:60px;
}

.clientes-content h1{

    font-size:60px;
}

.clientes-content p{

    font-size:18px;
}

.clientes-title h2{

    font-size:52px;
}

}

/* ========================================
TABLET
======================================== */

@media(max-width:992px){

.clientes-hero{

    padding:
    150px
    40px
    90px;
}

.clientes-content h1{

    font-size:50px;

    line-height:1;
}

.clientes-content p{

    font-size:17px;
}

.clientes-grid{

    grid-template-columns:
    repeat(3,1fr);
}

}

/* ========================================
SMALL MOBILE
======================================== */

@media(max-width:576px){

.clientes-content h1{

    font-size:34px;
}

.clientes-content p{

    font-size:15px;
}

.clientes-buttons{

    flex-direction:column;
}

.clientes-btn,
.clientes-btn-outline{

    width:100%;
}

.clientes-title h2{

    font-size:30px;
}

.clientes-grid{

    grid-template-columns:1fr;
}

}