#top-section {
    height: 100svh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#top-section #main-carousel-container {
    position: relative;
    width: 100%;
    flex: 100%;
}
#top-section #main-carousel-container #main-carousel, 
#top-section #main-carousel-container #main-carousel .flickity-viewport {
    width: 100%;
    height: 100% !important;
}
#top-section #main-carousel-container #main-carousel .flickity-prev-next-button {
    color: white;
    z-index: 10;
}
#top-section #main-carousel-container #main-carousel .flickity-prev-next-button.previous { 
    left: 0; 
}
#top-section #main-carousel-container #main-carousel .flickity-prev-next-button.next { 
    right: 0; 
}
#top-section #main-carousel-container .carousel-cell {
    width: 100%;
    height: 100%;
}
#top-section #main-carousel-container .carousel-cell div {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}
#top-section #main-carousel-overlay {
    position: absolute;
    top: 0;
    margin: 0 5vw;
    width: 90vw; 
    height: 100%;
    display: flex;
    flex-direction: column;
}
#top-section #main-carousel-overlay h1 {
    color: white;
    max-width: 40vw;
    font-weight: bold;
    margin-top: auto;
    font-size: 5vw;
    line-height: 5vw;
    text-shadow: 1px 1px 5px rgba(100, 100, 100, 1);
}
#top-section #main-carousel-overlay p {
    color: white;
    max-width: 35vw;
    margin: 0;
    text-shadow: 1px 1px 5px rgba(100, 100, 100, 1);
}
#top-section #main-carousel-overlay .arrow-nav {
    text-align: center;
    margin: 0 0 1rem;
}
#top-section #main-carousel-overlay .arrow-nav button {
    background-image: linear-gradient(65deg, #123546 40%, #078f9b 80%, #45c33a 100%);
    border: 2px solid white;
    padding: 5px 25px;
    border-radius: 25px;
    color: white;
    line-height: 28px;
    margin-top: 8rem;
}
#top-section #main-carousel-overlay .arrow-nav .arrow-icon {
    width: 2rem;
    height: 2rem;
    margin: 2vw auto 0;
    cursor: pointer;
    filter: invert(1);
}


@media (max-width: 767px) {
    #top-section #main-carousel-overlay h1 {
        text-align: center;
        font-size: 10vw;
        line-height: 10vw;
        margin-bottom: 2vw;
    }
    #top-section #main-carousel-overlay p {
        text-align: center;
    }
    #top-section #main-carousel-overlay .arrow-nav button {
        margin-top: 1rem;
    }
}
@media (max-width: 993px) {
    #top-section #main-carousel-overlay h1 {
        max-width: 100vw;
    }
    #top-section #main-carousel-overlay p {
        max-width: 100vw;
    }
    #top-section #main-carousel-overlay .arrow-nav button {
        margin-top: 2rem;
    }
}

/* ================================================================= */
/* ================================================================= */

#welcome-section #welcome-section-info {
    padding: 4vw;
    display: flex;
    flex-direction: column;
    color: #093246;
}
#welcome-section #welcome-section-info h1 {
    font-weight: bolder;
    margin-top: 2vw;
    font-size: 8vw;
}
#welcome-section #welcome-section-info p {
    margin-top: 1.5rem;
}
#welcome-section #welcome-section-info a {
    background-color: white;
    border-radius: 50px;
    margin: 1rem 0;
    padding: 5px 20px;
    align-self: flex-start;
    font-size: 3vw;
    color: #123546;
    text-decoration: none;
    border: 2px solid;
}
#welcome-section #welcome-section-info a:hover {
    color: white;
    background-color: #123546;
}
#welcome-section .bg-pattern {
    width: 100%;
    height: 10vw;
    margin: auto 0 2vw;
    background-image: url(../images/home/pattern.png);
    background-size: auto 100%;
    background-position: center;
}

@media (min-width: 768px) {
    #welcome-section #welcome-section-info {
        padding: 1.6vw 5vw;
    }
    #welcome-section #welcome-section-info h1 {
        font-size: 4vw;
    }
    #welcome-section #welcome-section-info p {
        font-size: 2vw;
    }
    #welcome-section #welcome-section-info a {
        font-size: 1.5vw;
    }
    #welcome-section .bg-pattern {
        height: 5vw;
    }
}

@media (min-width: 992px) {
    #welcome-section #welcome-section-info h1 {
        margin-top: 8vw;
    }
}

/* ================================================================= */
/* ================================================================= */

#highlights-section {
    background-image: linear-gradient(45deg, #000000 0%, #00a3b2 100%);
}
#highlights-section .item img {
    float: left;
    width: 18%;
}
#highlights-section .item div {
    float: left;
    margin-left: 4%;
    width: 78%;
}
#highlights-section .item div h3 {
    color: white;
    font-weight: bold;
}
#highlights-section .item div p {
    color: #ffffff;
    margin: 0;
}

/* ================================================================= */
/* ================================================================= */

#services-section {
    background-image: linear-gradient(55deg, #093145 0%, #00a3b2 41%, #51b747 100%);
}
#services-section h1 {
    font-weight: bolder;
    color: white;
    text-align: center;
}
#services-section #services-container {
    margin: 3vw 20vw 1vw;
}
#services-section #services-container #services-carousel .flickity-prev-next-button {
    color: white;
}
#services-section #services-container #services-carousel .carousel-cell {
    margin: 0 1%;
    width: 32%;
    overflow: hidden;
}
#services-section #services-container #services-carousel .carousel-cell .item {
    border: 2px solid white;
    color: white;
    height: 16vw;
    width: 100%;
    border-radius: 25px;
    padding: 15px;
    display: flex;
    justify-content: left;
    align-items: center;
    font-weight: bold;
    font-size: calc(1.325rem + .9vw);
    line-height: calc(1.7rem + 1vw);
}
#services-section #services-container #services-carousel .carousel-cell .item:nth-of-type(2) {
    margin-top: 20px;
}
#services-section #services-container #services-carousel .carousel-cell .item-overlay {
    position: absolute;
    background-color: #ffffff;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 25px;
    padding: 20px;
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease-out;
}
#services-section #services-container #services-carousel .carousel-cell .item-overlay h2 {
    font-weight: bold;
}
#services-section #services-container #services-carousel .carousel-cell .item-overlay p {
    color: #093246;
    margin: 15px 0;
}
#services-section #services-container #services-carousel .carousel-cell .item-overlay button {
    border: none;
    border-radius: 25px;
    background-image: linear-gradient(65deg, #123546 40%, #078f9b 80%, #45c33a 100%);
    color: white;
    padding: 5px 20px;
}
#services-section .bg-pattern {
    width: 100%;
    height: 7vw;
    margin: 5vw 0 2vw;
    background-image: url(../images/home/pattern.png);
    background-size: auto 100%;
    background-position: center;
}

@media (max-width: 767px) {
    #services-section #services-container #services-carousel .carousel-cell {
        width: 98%;
    }
    #services-section #services-container #services-carousel .carousel-cell .item {
        height: 45vw;
    }
}
@media (min-width: 768px) {
    #services-section #services-container #services-carousel .flickity-prev-next-button {
        width: 8rem;
        height: 8rem;
    }
    #services-section #services-container #services-carousel .flickity-prev-next-button.previous { 
        left: -9rem; 
    }
    #services-section #services-container #services-carousel .flickity-prev-next-button.next { 
        right: -9rem; 
    }
}

/* ================================================================= */
/* ================================================================= */

#universities-section {
    background-image: linear-gradient(45deg, rgba(179, 179, 179, .61), white);
    text-align: center;
}
#universities-section h2 {
    color: #9b9b9b;
    text-align: center;
    font-weight: bold;
}
#universities-section .item img {
    max-width: 100%;
}

@media (max-width: 767px) {
    #universities-section .item img {
        max-width: 60%;
        margin-top: 8vw;
    }
}

@media (min-width: 1024px) {
    #universities-section h2 {
        padding: 0 20vw 3vw;
    }
}

/* ================================================================= */
/* ================================================================= */

#staff-section .info h1 {
    background-image: linear-gradient(30deg, #093246 10%, #00a3b2, #51b747 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    font-weight: bolder;
}
#staff-section #staff-carousel .carousel-cell {
    margin: 0 1%;
    width: 32%;
    overflow: hidden;
    border-radius: 25px;
    cursor: pointer;
}
#staff-section #staff-carousel .carousel-cell img {
    width: 100%;
}
#staff-section #staff-carousel .carousel-cell .item-overlay {
    position: absolute;
    background-image: linear-gradient(0deg, #093145 10%, rgba(0, 163, 177, 0.5) 30%, rgba(0, 163, 177, 0.3) 50%, rgba(0, 163, 177, 0) 70%);
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    padding: 20px;
    color: white;
    flex-direction: column;
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease-out;
    text-align: center;
}
#staff-section #staff-carousel .carousel-cell .item-overlay h3 {
    margin-top: auto;
    font-weight: bold;
}

@media (max-width: 767px) {
    #staff-section #staff-carousel .carousel-cell {
        width: 98%;
    }
}

/* ================================================================= */
/* ================================================================= */

#partners-section {
    background-image: linear-gradient(30deg, #093246 50%, #00a3b2, #51b747 100%);
    text-align: center;
}
#partners-section h1 {
    color: white;
    font-weight: bolder;
    text-align: center;
}
#partners-section .item img {
    max-width: 90%;
}

/* ================================================================= */
/* ================================================================= */

#cash-section {
    background-image: linear-gradient(45deg, #ffffff 20%, #b9bbbc 80%);
}
#cash-section h1 {
    background-image: linear-gradient(30deg, #093246 10%, #00a3b2, #51b747 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    font-weight: bolder;
    text-wrap: nowrap;
}
#cash-section img {
    max-width: 26%;
    margin: 5vw 3%;
}

/* ================================================================= */
/* ================================================================= */

#map-section {
    background-image: url(../images/home/map.jpg);
    background-repeat: no-repeat;
    background-position: center;
}
#map-section .info-container {
    border-radius: 25px;
    background-image: linear-gradient(30deg, #093246 20%, #00a3b2, #51b747 100%);
    text-align: center;
}
#map-section .info-container h2 {
    color: white;
    margin: 50px 0 30px;
    font-weight: bolder;
}
#map-section .info-container p {
    color: white;
    margin: 20px 0 0 0;
}
#map-section .info-container p.location {
    color: white;
    border: 1px solid white;
    border-radius: 25px;
    font-size: 1.6rem;
    font-weight: bold;
    padding: 5px 25px;
    margin-top: 40px;
    display: inline-block;
}
#map-section .info-container p.location:hover {
    color: #123546;
    background-color: white;
}
#map-section .info-container img {
    width: 45%;
    margin: 50px auto 60px auto;
}
