.wrapper {
    display: flex;
    position: absolute;
    width: 100%;
    top: 45%;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    align-content: center;
    gap: 30px;
    padding-bottom: 20px;
}

.card {
    min-width: 375px;
    height: 400px;
    border-radius: 20px;
    cursor: pointer;
    text-align: center;
    padding-top: 50px;
    transition: 0.3s ease;
    font-family: "Caprasimo", serif;
}

.card img{
    height: 175px;
}

.card p {
    margin-top: 10%;
}

.wrapper a {
    text-decoration: none;
    min-width: 375px;
}

.parent-coaching img {
    border-radius: 50px;
}

.anger-management {
    background-color: var(--anger_management_back);
}

.anger-management p {
    color: var(--anger_management_text);
    font-size: 30px;
}

.anger-management:hover {
    box-shadow: 0px 0px 10px 15px rgba(255, 182, 193, 0.7);
    translate: 0px -20px;
}

.anger-management:active {
    box-shadow: 0px 0px 10px 20px rgba(255, 182, 193, 1);
}

.adhd-coaching {
    background-color: var(--adhd_coaching_back);
}

.adhd-coaching p {
    color: var(--adhd_coaching_text);
    font-size: 30px;
}

.adhd-coaching:hover {
    box-shadow: 0px 0px 10px 15px rgba(255, 160, 122, 0.7);
    translate: 0px -20px;
}

.adhd-coaching:active {
    box-shadow: 0px 0px 10px 20px rgba(255, 160, 122, 1);
}

.parent-coaching {
    background-color: var(--parent_coaching_back);
}

.parent-coaching p {
    color: var(--parent_coaching_text);
    font-size: 30px;
}

.parent-coaching:hover {
    box-shadow: 0px 0px 10px 15px rgba(173, 216, 230, 0.7);
    translate: 0px -20px;
}

.parent-coaching:active {
    box-shadow: 0px 0px 10px 20px rgba(173, 216, 230, 1);
}

.workshops {
    background-color: var(--workshops_back);
}

.workshops p{
    margin-top: 50px;
    font-size: 30px;
    color: var(--workshops_text);
}

.workshops:hover {
    box-shadow: 0px 0px 10px 15px rgba(144, 238, 144, 0.7);
    translate: 0px -20px;
}

.workshops:active {
    box-shadow: 0px 0px 10px 20px rgba(144, 238, 144, 1);
}

.hero {
    position: relative;
    top: 70px;
    pointer-events: none;
}

.hero_text  {
    font-family: "Caprasimo", serif;
    color: rgba(0, 0, 0, 0.8);
    font-size: 50px;
    position: absolute;
    top: 10px;
    left: 30%;
}

@media only screen and (max-width: 1200px) {

    .card {
        min-width: 350px;
        /* height: 400px; */
    }

    .hero img {
        width: 70vw;
        right: 10%;
        top: -50px;
    }

    .wrapper {
        padding-bottom: 20px;
    }

    .hero_text {
        left: 20%;
        top: -10px;
    }
}

@media only screen and (max-width: 900px) {

    .wrapper {
        width: 100vw;
        gap: 10px;
    }

    .hero_text {
        left: 10%;
        top: -10px;
    }
}

@media only screen and (max-width: 690px) {

    .hero_text {
        font-size: 35px;
        font-weight: 400;
    }

    .wrapper {
        top: 45%;
        gap: 20px;
    }

    .wrapper a {
        min-width: 95%;
    }

    .card p {
        margin-top: 5%;
    }

    .card {
        flex: 1;
        min-width: 250px;
        padding-top: 35px;
        height: 350px;
    }
}