@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

 body {
     font-family: "Inter", serif;
     font-size: 16px;
     margin: 0;
     background: #e6e6e6; /* change body background color here */
     color: #000; /* change body font color here */
}
 h2 {
     font-size: 2.5rem;
}
 a {
     color: #1B8FC1;
}
 .sticky-top {
     min-height: calc(100vh - 70px);
}


/* buttons */
 .btn-teal {
     background: #11C5C2;
     color: #000000;
     border-radius: 40px;
     padding: 16px 20px 16px 20px;
     margin-top: 20px;
     text-decoration: none;
}


/* helpers */

.font-1-5rem{
    font-size: 1.5rem;
}
 .mar-top-5 {
     margin-top: 5rem;
}
 .mar-btm-5 {
     margin-bottom: 5rem;
}
 .mar-top-3 {
     margin-top: 3rem;
}
 .mar-btm-3 {
     margin-bottom: 3rem;
}
 .image-fluid {
     max-width: 100%;
}
 .center-text {
     text-align: center;
}
 .img-desk-only{
     display: block;
}
 .img-mobile-only{
     display: none;
}

.per-20 {
	padding: 0 20px 0 20px;
}


/* content width container */
 .content-contain {
     max-width: 1140px;
     margin: auto;
     padding: 0 20px 0 20px;
}


/* backgrounds and columns */
 .purple-bg {
     width: 100%;
     padding: 30px 0 50px 0;
     background-color: #2C0851;
     color: #fff;
}

.maroon-bg{
    width: 100%;
    padding: 20px 0 20px 0;
    background-color: #560637;
    color: #fff;
}
 .class-link {
     text-decoration: none;
     color:#000;
}
.impact-link {
    text-decoration: none;
    color:#fff;
    height: 100%;
    width: 100%;
    display: inline-block;
}
 a.purple-bg-link {
     color: #11C5C2 !important;
}
 .white-bg {
     width: 100%;
     padding: 30px 0 50px 0;
     background-color: #fff;
}
 .two-col {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 50px;
     align-items: center;
}


/* Nav Bar NOTE: use your own navbar made with whatever framework you're using. This navbar is jut here to show you where the nav should be */
 nav {
     width: 100%;
     background: #fff;
     padding: 35px 0 35px 0;
}
 .nav-layout {
     display: flex;
     align-items: center;
     justify-content: space-between;
     font-size: 1rem;
     font-weight: 500;
}
 .nav-links {
     margin-right: 40px;
}
 a.nav-links {
     color: #2F2F2F;
     text-decoration: none;
}

.nav-toggle{
    display: none;
}


/* Hero */
 .hero-container {
     width: 100%;
     height: 611px;
     background-color: #370962; /* this makes light text accessible. If dark text is over the hero area, change the background color to #fff */
}
 .hero-logo {
     z-index: 1;
     margin-top: 150px;
}
 .video-container {
     max-width: 2000px;
}
 .hero-video {
     width: 100%;
     height: 611px;
     object-fit: cover;
     position: absolute;
     margin-left: auto;
     margin-right: auto;
     left: 0;
     right: 0;
}
 .hero-overlay {
     width: 100%;
     height: 611px;
     background-color: rgba(0, 0, 0, 0.5) !important; /* this is to darken the video or background image. Change the RGBA opacity value as needed */
     position: absolute;
}


/* cards*/
 .card-container {
     display: flex;
     justify-content: space-between;
     flex-wrap: wrap;
     gap: 30px;
}
 .impact-container {
     display: flex;
     flex-wrap: wrap;
     gap: 30px;
     margin-bottom: 45px;
}
 .card-bg {
     display: flex;
     flex-direction: column;
     background: #fff;
     border-radius: 8px;
     border: 1px solid #661985;
     width: 550px;
}
 .tall-bg {
     display: flex;
     flex-direction: column;
     background: #fff;
     border-radius: 8px;
     border: 1px solid #661985;
     width: 355px;
     height: 525px;
     background-size: cover;
     align-items: flex-end;
}
 .card-imagebg {
     width: 100%;
     height: 200px;
     background-size: cover;
     border-radius: 7px 7px 0 0;
     display: flex;
     justify-content: center;
     align-items: center;
}
 .play-btn {
     width:45px;
     visibility: hidden;
}
 .card-imagebg:hover .play-btn {
     visibility: visible;
}
 .impact-heading {
     width: 100%;
     height: 150px;
     font-size: 18px;
     font-weight: 500;
     color: #fff;
     background: linear-gradient(90deg, rgba(102, 25, 133, 0.80) 0%, rgba(23, 107, 234, 0.8) 100%);
     border-radius: 0 0 7px 7px;
     margin-top: auto;
}
.card-bdy-btm {
	display: flex;
	flex-direction: column;
	padding: 20px 20px 25px 20px;
}

 .impact-text {
     padding: 15px;
}
 .news-imagebg {
     width: 100%;
     height: 100%;
     background-size: cover;
     border-radius: 7px 7px 0 0;
}
 .card-title {
     font-size: 1.375rem;
     font-weight: 600;
	 margin:20px 0 10px 0;
    
}
 .card-subtitle {
     
     font-size: 1.125rem;
     font-weight: 500;
    margin-bottom:10px;
}
 .card-author {
     margin-top: auto;
	 margin-bottom:25px;
    
     color: #595959;
   
     align-self: auto ;
}

.excerpt {
	margin-bottom: 15px;
}


/* FAQ section controls*/
 .freq-sect {
     display: flex;
     flex-direction: column;
     gap: 30px;
     max-width: 900px;
     margin: auto;
}


/* FAQ Individual Card Div */
 .freq-box {
     background-color: #FBFBFB;
     border: solid 1px #661985;
     border-radius: 40px;
     padding: 25px 40px 25px 40px;
}

 .freq-title {
     font-size: 1.125rem;
     font-weight: 500;
}

 .freq-arrow {
     color: purple;
     font-size: 2.5rem;
     margin-top: -16px;
     margin-bottom: -20px;
     float: right;
}

.freq-desc{
    margin-top: 1rem;
}

/* Footer */
 .footer {
     background: #F2F2F2;
     padding: 50px;
     border-top: 1px solid #C1C0C0;
}
 .footer-container {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 20px;
}


/* XX-Large devices (larger desktops, 1920px and up)*/
 @media (min-width: 1921px) {
    /* Hero*/
     .hero-container {
         width: 100%;
         height: 900px;
    }
     .hero-overlay {
         width: 100%;
         height: 900px;
    }
     .hero-video {
         width: 100%;
         height: 900px;
    }
     .hero-logo {
         z-index: 1;
         margin-top: 300px;
    }
}


/* Medium Devices (tablets, 992px and up) */
 @media (max-width: 1200px) {
     .card-container {
         justify-content: center;
    }
    /* cards*/
     .card-bg {
         max-width: 650px;
    }
     .impact-container {
         justify-content: center;
    }
}


/* Mobile Devices (*/
 @media (max-width: 992px) {
    /* helper */
     .img-desk-only{
         display: none;
    }
     .img-mobile-only{
         display: block;
    }


    /* backgrounds and columns*/
     .two-col {
         display: grid;
         grid-template-columns: 1fr;
         align-items: center;
    }


    /* cards*/
     .card-container {
         flex-direction: column;
         align-items: center;
    }
     .impact-container {
         align-items: center;
    }
     .card-bg {
         max-width: 650px;
    }


    /* Hero*/
     .hero-logo {
         z-index: 1;
         width: 350px;
         margin: auto;
         margin-top: 100px;
    }
     .hero-container {
         width: 100%;
         height: 400px;
    }
     .hero-overlay {
         width: 100%;
         height: 400px;
    }
     .hero-video {
         width: 100%;
         height: 400px;
    }

    /* Nav */

    .nav-links{
        display: none;
    }

    
    .nav-toggle{
    display: inline;
    font-size: 2rem;
    }

}

@media (max-width: 797px) {
		 .tall-bg {

     width: 75%;
	}
}

@media (max-width:600px) {
	
	 .tall-bg {

     width: 100%;
	}
	   .card-bg {
         width: 100%;
    }

}