@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;600;700&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css");


body {
    /*    padding-top: 3rem;
    padding-bottom: 3rem;*/
    color: #5a5a5a;
    padding-top: 60px;
}
/*
main > .container {
    padding: 60px 15px 0;
}*/

html {
    scroll-padding-top: 60px;
}


.navbar-brand img {
    padding-top: 7px;
    margin-bottom: 7px;
}

.bi {
    vertical-align: -.125em;
    fill: currentColor;
}

h1 {
    font-weight: 600;
    font-family: 'Fira Sans', sans-serif;
    letter-spacing: 2px;
    margin-bottom: 2rem;
}

h4 {
    margin-top: 1rem;
}

.bg-teal {
    background-color: #1c4b67;
}

.bg-gray {
    background-color: #5e584b;
}

.text-gray {
    color: #3a3939;
}

.text-teal {
    color: #1c4b67;
}

.section {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.mission div,
.experience div,
.data div,
.benefits div {
    width: 100%;
}

.nav-link,
footer {
    font-family: 'Fira Sans', sans-serif;
}

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */

/* Since positioning the image, we need to help out the caption */
#mainCarousel .carousel-caption {
    top: 2rem;
    z-index: 10;
}

    #mainCarousel .carousel-caption h1 {
        text-shadow: 0px 0px 25px rgba(0, 0, 0, 0.4);
    }

/* Declare heights because of positioning of img element */
#mainCarousel .carousel-item {
    height: 24rem;
}

    #mainCarousel .carousel-item > img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        min-width: 100%;
        height: 24rem;
    }



@media (min-width: 992px) {
    .nav-link {
        margin-left: 1.5rem;
    }

    .mission div,
    .experience div,
    .data div,
    .benefits div {
        width: 75%;
    }

    #mainCarousel .carousel-caption {
        top: 3rem;
        z-index: 10;
    }

    #mainCarousel .carousel-item {
        height: 34rem;
    }

        #mainCarousel .carousel-item > img {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            min-width: 100%;
            height: 34rem;
        }
}

@media (min-width: 1200px) {
    .nav-link {
        margin-left: 1.5rem;
    }

    .mission div,
    .experience div,
    .data div,
    .benefits div {
        width: 50%;
    }
}

@media (min-width: 1400px) {
    .mission div,
    .experience div,
    .data div,
    .benefits div {
        width: 50%;
    }

    #mainCarousel .carousel-item {
        height: 36rem;
    }

        #mainCarousel .carousel-item > img {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            min-width: 1400px;
            height: 50rem;
        }
}