.chat-astrologer {
    margin-top: 8em;
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.chat-astrologer>div {
    display: flex;
    gap: 7px;

    div {
        white-space: nowrap;
    }

    p {
        margin-bottom: 0px;
        margin-top: 10px;
        font-size: clamp(10px, 1.2vw, 20px);
    }

    button {
        font-size: clamp(13px, 1.2vw, 20px);
    }
}

.chat-astrologer>div:first-child>div:nth-child(1) {
    background-color: #f0df20;
    padding: 10px;
    border-radius: 10px;

    h5 {
        margin-bottom: 0px;
        font-size: clamp(13px, 1.5vw, 26px);
    }
}

.chat-astrologer .form-outline {
    width: clamp(100px, 14vw, 210px);
}

/*=============================================== card ==================== */
.astro-card-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(355px, 1fr));
    column-gap: 14px;
}

.astro-card-group .astro-card {
    display: flex;
    justify-content: space-around;
    gap: 30px;
    box-shadow: 0 0 10px #ccc;
    border-radius: 10px;
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 10px;

    div:nth-child(1) {
        text-align: center;
    }

    .astro-img img {
        width: 80px;
        height: 90px;
        border-radius: 50%;
    }

    a {
        color: #000;
        font-weight: 500;
        display: block;
        text-decoration: none;
        text-transform: capitalize;
        font-size: 16px;
    }

    .astro-info p {
        margin-bottom: 0px;
        font-size: 14px;
        line-height: 1.4rem;
        width: clamp(135px, 12vw, 180px);
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        text-transform: capitalize;
        color: #616161;
    }
}

@media (max-width:980px) {
    .chat-astrologer {
        margin-top: 6em;
    }
}

@media(max-width:680px) {
    .chat-astrologer {
        display: block;
    }

    .chat-astrologer>div:nth-child(1) {
        justify-content: space-between;
    }

    .chat-astrologer>div:nth-child(2) {
        display: none;
    }

    .chat-astrologer {
        justify-content: start;

        div:first-child>div:nth-child(1) h5 {
            font-size: clamp(13px, 3.5vw, 35px);
        }

        div p {
            font-size: clamp(10px, 3.2vw, 20px);
        }
    }
}