/* Header Image */
.Institutions_header{
    width: 100%;
    position: absolute;
    top: 0;
    z-index: -1;
}

/* Intro section */
.Introductory_text{
    max-width: 42rem;
    position: relative;
    left: 7.75rem;
    top: 7rem;
}

.institution_introduction, 
.institution_title {
    margin: 0;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    color: #f1f1f1;
}

.institution_introduction{
    width: 33.25rem;
}

.institution_title{
    margin-bottom: 1.7rem;
}

/* Wavy Divider */ 
.divider{
    position: relative;
    top: 15rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 14rem;
}

.Wavy_Divider_Blue{
    z-index: -1;
    width: 100%;
    display: block;
}

.divider_text{
    margin: 0;
    position: absolute;
    text-align: center;
    top: 45%;
    left: 50%;
    color: #f1f1f1;
    transform: translate(-50%, -50%);
}

/*Main institution section*/
.institutions_section{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    padding: 5rem;
    justify-items: center;
}

.institution_card{
    position: relative;
    display: flex;
    max-width: 37.5rem;
    height: 17.188rem;
    width: 100%;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1);
    background-color: #fff
}
/* Institution Card Images */
.institution_image {
    width: 12rem;
    height: 100%;
    overflow: hidden;
    flex-shrink: 0;
}

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

.institution_content{
    padding: 2rem
}

.institution_content h4 {
    margin-top: 2rem;
}

.institution_content p{
    margin-top: .5rem;
}


/* Institution "learn more" button */
.institution_cta{
    /* Positioning */
    position: absolute;
    bottom: .5rem;
    right: 1.5rem;
    transform: translate(25%, 25%);
    padding: 1.5rem;
    /* Design of the button, color and font */
    background-color: #fadd4b;
    border: none;
    border-radius: 50%;
    width: 9.375rem;
    height: 9.375rem;
    cursor: pointer;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
    /* Text Positioning in the button */
    font-size: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: right;

    transition: .5s;
}

.institution_cta:hover{
    background-color: #EFACAC;
    transform: scale(1.1) translate(25%, 25%);
}

/* background shapes */
.background-ellipse{
    position: absolute;
    z-index: -2;
    overflow: hidden;
}

#right-red-shape{
    top: 300%;
    right: 0;
}

#right-yellow-shape{
    top: 105%;
    right: 0;
}

#left-yellow-shape{
    top: 240%;
    left: 0;
}

#left-red-shape{
    top: 130%;
    left: 0;
}