:root {
    --navbar-height: 100px;
    --purple: #592a5e;
    --purplegrey: #f1ebf7;
    --plum-overlay: rgba(116,82,116, 0.75);
    --plum: #745274;
}

/*Hero*/
#home-hero {
    min-height: 600px;
    display: flex;
    background: linear-gradient(180deg, rgba(241,235,247,0.95) 90%, white 100%), url("../images/home/hero-bg.jpg");
    background-blend-mode: normal;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding-top: var(--navbar-height);
    padding-bottom: 3rem;
}

@media (max-width: 576px)
{
    #home-hero {
        flex-direction: column;
        align-items: center;
    }
}

#hero-img-1-container {
    width: 30%;
    height: 450px;
    box-shadow: rgba(0,0,0, 0.25) 4px 4px 15px 5px;
}

@media (max-width: 576px) {
    #hero-img-1-container {
        width: 80%;
        height: 400px;
        margin-bottom: 25px;
        border-start-start-radius: 50%;
        border-start-end-radius: 50%;
        margin-top: 25px;
    }
}

.hero-img {
    width: 100%;
    object-fit: cover;
    height: 100%;
    object-position: top center;
}

@media (max-width: 576px) {
    .hero-img {
        border-start-start-radius: 50%;
        border-start-end-radius: 50%;
    }
}

#hero-content {
    width: 50%;
    margin: auto 0px;
}

@media (max-width: 576px) {
    #hero-content {
        width: 100%;
    }
}

#hero-img-2-container {
    width: 20%;
    height: 400px;
    position: relative;
    margin-top: auto;
    bottom: 0px;
    box-shadow: rgba(0,0,0, 0.25) 4px 4px 15px 5px;
}

@media (max-width: 576px) {
    #hero-img-2-container {
        display: none;
    }
}

/*About*/


#about-img {
    border-radius: 25px;
    width: 650px;
    height: 300px;
    object-fit: cover;
    object-position: top center;
    padding: 0px 2rem;
}

@media (max-width: 768px)
{
    #about-img {
        width: 100%;
        height: 300px;
        padding: 0px 0px;
    }
}

.about-content, .service-card {
    width: 33%;
}

@media (max-width: 768px) {
    .about-content, .service-card {
        width: 100%;
    }
}

/*Services*/

.service-card:nth-child(1) {
    background-image: linear-gradient(0deg, var(--plum-overlay)), url("../images/home/counselling_and_therapy.jpg");
}

.service-card:nth-child(2) {
    background-image: linear-gradient(0deg, var(--plum-overlay)), url("../images/home/courses_and_trainings.jpg");
}

.service-card:nth-child(3) {
    background-image: linear-gradient(0deg, var(--plum-overlay)), url("../images/home/books.jpeg");
}


.service-card {
    box-shadow: rgba(0,0,0, 0.25) 4px 4px 15px 5px;
    height: 250px;
    background-position: center center;
    background-size: cover;
    border-radius: 25px;
    background-repeat: no-repeat;
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    .service-card::before {
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
        background-color: transparent;
        transition: background-color 0.3s ease-in-out;
        border-radius: 25px;
    }

.service-card:hover::before  {
    background-color: var(--plum);
}

.service-card h1, .service-card p {
    color: var(--purplegrey);
    z-index: 3;
    position: relative;
    text-align: center;
}