@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

*{
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Roboto', sans-serif;
}

.hub-atendimento__header {
    display: flex;
    flex-direction: column;
    padding: clamp(24px, 3vw, 80px) clamp(16px, 5vw, 112px);
    background-color: #000;
}

    .hub-atendimento__header h1 {
        color: #FFF;
        font-size: 56px;
        font-weight: 700;
        line-height: 120%;
    }

    .hub-atendimento__header p {
        color: #FFF;
        font-size: 18px;
        margin-top: 8px;
        line-height: 160%;
    }

.hub-atendimento__titulo-segmento {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

    .hub-atendimento__titulo-segmento span {
        color: #1A1A1A;
        font-size: 24px;
        font-weight: 700;
    }

.hub-atendimento__divider-rainbow {
    width: 100vw;
    height: 6px;
    border: none;
    background: linear-gradient(90deg, #2D002B 0%, #7A051F 6.41%, #E20001 12.41%, #FD6401 17.83%, #FFB201 23.54%, #D9B70F 29.25%, #57871E 34.11%, #02682E 39.53%, #006C40 44.68%, #108B63 50.53%, #35B0B5 56.24%, #469EC8 61.95%, #5191D1 68.09%, #737373 100%);
}

.hub-atendimento__main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: clamp(32px, 3vw, 80px) clamp(20px, 4vw, 112px);
    gap: 64px;
}

.hub-atendimento__marcas {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.card {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 250px;
    height: 170px;
    border-radius: 12px;
}

    .card.hdi {
        background-color: #009C49;
    }

        .card.hdi.card.hdi:hover {
            background-color: #00803c;
        }

    .card.yelum {
        background-color: #FFC900;
    }

        .card.yelum:hover {
            background-color: #e2b100;
        }

    .card.aliro {
        background-color: #0BB49D;
    }

        .card.aliro:hover {
            background-color: #09a08c;
        }

    .card.santander {
        background-color: #EC0000;
    }

        .card.santander:hover {
            background-color: #ca0000;
        }

.img-link {
    position: absolute;
    right: 16px;
    bottom: 16px;
    filter: brightness(0) invert(1);
}

    .img-link.preto {
        filter: none;
    }

@media (max-width: 768px) {
    .hub-atendimento__titulo-segmento span {
        font-size: 20px;
    }

    .hub-atendimento__marcas {
        gap: 12px
    }

    .card {
        width: 180px;
        height: 100px;
    }

        .card img {
            max-width: 75%;
            max-height: 32px;
            object-fit: contain;
        }

            .card img.logo-wide {
                max-width: 75%;
                max-height: 20px;
            }

    .hub-atendimento__header h1 {
        font-size: 36px;
        line-height: 1.1;
    }

    .hub-atendimento__header p {
        font-size: 15px;
        line-height: 150%;
        margin-top: 6px;
    }

    .img-link {
        width: 20px;
        height: 20px;
        position: absolute;
        right: 8px;
        bottom: 8px;
    }
}

@media (max-width: 410px) {
    .card {
        width: 160px;
        height: 80px;
    }
}