/*shapes in the background*/
.background-shape{
    position:absolute;
    z-index:-2;
}
/*individual positioning*/
    #homepage-top-left{
        margin-top:-42rem;
        left:0;
        max-width:45vw;
        height:auto;
    }

    #homepage-top-right{
        margin-top:-20rem;
        right:0;

    }
    #homepage-bottom-left{
        margin-top:-32rem;
        left:0;
    }
    #globe{
        right:0;
        margin-top:-30.5rem;
        
    }

    #globe-background{
        right:0;
        top:0;
        object-fit: cover;
        margin-right:-2.5rem;
    
    }
    .image-crop{
        position:absolute;
        width:50rem;
        height:40rem;
        margin-top:-30rem;
        right:0;
        overflow:hidden;
    }
/*hero section*/
.feetpic{
    position:absolute;
    width:100%;
    height:auto;
    margin-top:-2rem;
    z-index:-1;
}
.homepage-hero{
    color:white;
    max-width:50%;
    position:relative;
    left: 7.75rem;
    top:10rem;
}
 
.debug-box{
    width:20rem;
    height:20rem;
}

/*main content- section 1*/
.info-section{
    margin-top:40rem;
    display:flex;
    justify-content:center;
    
}
.section-header{
    color:#5BB3CD;
    margin-bottom:1rem;
}
.info-paragraph{
    color:black;
    margin-bottom: 2rem;
}
.info-text{
    margin-right:1rem;
}
.info-picture{
    margin-left:1rem;
    border-radius:2rem;
}

/*divider*/
.institutions-divider{
    position:relative;
    margin-bottom:20rem;
    
}
.pink-divider{
    position:absolute;
    z-index:-1;
    width:100%;
    height:auto;
    margin-top:5rem;
}
.divider-content{
    margin-top:10rem;
    margin-bottom:10rem;
    display:flex;
}

.divider-header{
    color:white;
    margin-left:5rem;
    position:relative;
    left:7.75;
}
    /*marquee*/
    .marquee{
        display:flex;
        margin-left:25vw;
        padding-top:5rem;
        width:55vw;
        white-space: nowrap;
        overflow:hidden;
    }
    .marquee-items{
        margin-top:-5rem;
        display:flex;
        align-items:center;
        animation-name:marquee-content;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        animation-duration:8s;
        
    }

    .marquee:hover .marquee-items{
        animation-play-state: paused;
    }


    @keyframes marquee-content{
        from{
            transform:translateX(0%);
        }
        to{
            transform:translateX(-100%);
        }
    }


    .partner-logos{
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 1rem;
        height:4rem;
        width:auto;
        object-fit: contain;
        
        /* display:block;
        this was taken away by Stan, which fixed the issue
        of wonky spacing !! LOOK UP THE REASON WHY FOR DOCUMENTING!! */
    }
        /*fix spacing for each logo -unnecessary
        #Erh-logo img{
            margin-bottom:1rem;
        }
        #uOttawa-logo img{
            margin-bottom:1rem;
        }
        #Northpark-logo img{
            margin-bottom:1rem;
        }
        /*
        #Kangawa-logo{
            margin-bottom:20rem;
        }

        

/*institutions section*/

.homepage-slideshow{
    display:flex;
    justify-content:center;
    min-width:75vw;
    margin-bottom:10rem;

}
.homepage-slideshow-description{
    display:flex;
    flex-direction: column;
    justify-content: center;
}

    /*slideshow carousel*/
    .carousel-wrapper{
        position: relative;
        display:flex;
        align-items: center;
        justify-content: center;
        margin-left:5rem;
        gap:1rem;
    }
    .homepage-carousel{
        margin:2rem;
        width:40rem;
        padding-bottom: 0.5rem;
        position:relative;
        overflow: hidden;
        transition: opacity 0.5s ease;

    }
    .slide-track{
        display:flex;
        transition: transform 0.5s ease-in;
    }
    .slide-caption{
        color:white;
        font-weight: 500;
        width: 100%;
        text-align:center;
        /*position: absolute;*/
        margin-top:-3.4rem;
        padding-top:2rem;
        background-color: rgba(0,0,0,0.5);
        border-bottom-left-radius: 2rem;
        border-bottom-right-radius: 2rem;
    }
    .slide{
        opacity:75%; 
        transition: opacity , scale 0.2s;
        scale:75%;
    }
    .slide.active{
        opacity:1;
        scale:1;
    }
  
    .slide-img{
        border-radius: 2rem;
        box-shadow: 0 0.25rem 0.25rem rgba(0,0,0,0.5);
    }

    .previous , .next{
        cursor: pointer;
        user-select: none; /*user cannot highlight the buttons*/
        padding:1rem;
        color:white;
        background-color: rgba(0,0,0,0.6);
        border-radius:5rem;
        font-size:2rem;
        transition:0.3s;
        position:absolute;
        top:50%;
        transform: translateY(-50%);
        z-index:10;
    }
    .previous{
        left:-1rem;
    }
    .next{
        right:-1rem;
    }
    .previous:hover , .next:hover{
        background-color: rgba(0,0,0,0.8);
    }
    

/*3D program section*/


.three-d-program-section{
    display:flex;
    margin-left:15rem;
    margin-bottom:5rem;
}
.homepage-list{
    color:#5BB3CD;
    margin-left:0.5rem;
    font-weight:600;
    margin-bottom:1rem;
}
.homepage-blue-text{
    color:#5BB3CD;
}
.homepage-black-text{
    color:black;
}