body {
   font-family: "Rubik";
   overflow-x: hidden;
}
h1,
h2,
h3 {
   font-weight: 400;
}
h1 {
   font-size: 2.2rem;
}
h2,
h3 {
   font-size: 2.1rem;
}
p {
   color: #4068a0;
   font-size: 1.1rem;
}
header {
   position: fixed;
   top: 0;
   left: 0;
   z-index: 101;
   width: 100%;
   box-shadow: 0 0 80px #33333366;
   background-color: white;
}

header a {
   color: #1d5478;
   font-weight: 500;
   text-underline-offset: 0.5rem;
}
@media screen and (min-width: 1200px){
   #nav{
      width: 100%;
   }
}
#nav{
   max-width: 1000px;
}

#header-overlay {
   position: absolute;
   bottom: 0;
   left: 0;
   z-index: 1;
   object-fit: cover;
   width: 30rem;
   pointer-events: none;
   opacity: 0.2;
}

.pre-header a {
   /* font-weight: lighter; */
   font-size: 1rem;
   color: white;
}

.emphasis {
   background-color: rgb(215, 23, 23);
   font-weight: bold;
   text-decoration: none;
   min-height: 40px;
   padding: 12px;
   font-size: 0.8rem;
   cursor: pointer;
   display: flex;
   align-items: center;

   transition: 0.24s;
}
.emphasis:hover {
   background-color: rgb(194, 78, 78);
}

.cards {
   /* padding: 40px; */
}

.cards .card {
   position: relative;
   margin: 10px;
   overflow: hidden;
   border: none;
   text-shadow: 0 0 50px black;
   color: white;
   min-height: 450px;
   background-color: black;
   cursor: pointer;

   transition: 0.5s;
}
.cards .card:hover {
   text-shadow: none;
   color: white;
   z-index: 2;
}
.card .copy {
   transition: height 1s;
}
.card img {
   position: absolute;
   z-index: 0;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   opacity: 0.6;
}
.blue-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   pointer-events: none;
   background-color: #4068a0dd;
}
.card .blue-overlay {
   top: -100%;
   display: block;

   transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.card:hover .blue-overlay {
   top: 0;
   display: block;
}
.card .copy .details {
   max-width: 500px;
   margin-top: 30px;
   display: none;
   overflow: hidden;
}
.details p {
   color: white;
}
.card:hover .copy .details {
   display: block;
}

.card .copy {
   position: relative;
   z-index: 1;
}

.details a.read-more {
   color: white;
   font-weight: bold;
   font-size: 1.2rem;
   text-decoration: underline;
   text-underline-offset: 0.5rem;
   margin: 8px 0;
}

a.button {
   text-decoration: none;
   display: inline-block;
   text-align: center;
   width: 100%;
   max-width: 300px;
   padding: 10px 14px;
   margin-top: 20px;
   margin-bottom: 20px;
   border-radius: 50px;
   text-transform: uppercase;
   border: solid 1px #4068a0;
   color: unset;

   transition: 0.2s;
}
a.button:hover {
   background-color: white;
   color: black;
   box-shadow: 0 0 6px #33333366;
}
a.button.dark {
   color: #4068a0;
}
a.button.dark:hover {
   color: white;
   background-color: #4068a0;
}

.news {
   padding: 80px 0;
   background: url("./assets/news_bg.png");
   background-size: cover;
}
.news .card {
   background-color: #ffffff88;
   border-radius: 0;
   padding: 45px 40px;
   margin: 10px 0;
   border: none;
   min-height: 350px;
}

.news .read-more {
   color: red;
   font-weight: bold;
   position: absolute;
   bottom: 2rem;
}
.news h3 {
   font-size: 1.5rem;
   margin: 0;
}

.stats {
   position: relative;
   /* background-color: whitesmoke; */
   background: linear-gradient(transparent, #f2f8ff);
   padding: 0;
   padding-bottom: 80px;
}
.stats .row {
   background-color: #1d5478;
}
.stats h2,
.stats p {
   margin: 0;
}
.stats h2 {
   font-size: 5rem;
   font-weight: 600;
   color: white;
}
.stats p {
   font-size: 2rem;
   color: white;
}
.stats .stat {
   margin: 40px 0;
}

.footer {
   color: white;
   background-color: #092453;
   font-size: 0.8rem;
   padding: 4rem 0;
}
.footer p {
   font-size: 0.8rem;
   margin: 0;
   color: white;
}

.footer ul {
   list-style: none;
   text-transform: uppercase;
}
.footer ul li {
   margin: 20px 0;
   cursor: pointer;
}
.footer ul li:hover {
   text-decoration: underline;
   text-underline-offset: 0.6rem;
}

.animate h1 {
   display: none;
   font-size: 2rem;
   font-weight: bold;
   pointer-events: none;

   animation: slideup 1s;
}
.animate h1:first-of-type {
   display: block;
}

#animated-statements .button {
   max-width: 300px;
   border: none;
   background-color: #ffffff66;
   border-color: white;
   font-size: 1.5rem;
}
#animated-statements .button:hover{
   background-color: white;
   color: black;
}

@keyframes pulse {
   from {
      transform: scale(1);
   }
   to {
      transform: scale(1.2);
   }
}

@keyframes slideup {
   from {
      opacity: 0;
      transform: translateY(3rem);
   }
   to {
      opacity: 1;
      transform: translateY(0);
   }
}

.video-background {
   position: absolute;
   overflow: hidden;
   width: 100vw;
   height: 100vh;
}

.video-background iframe {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 100vw;
   height: 100vh;
   transform: translate(-50%, -50%);
}

@media (min-aspect-ratio: 16/9) {
   .video-background iframe {
      /* height = 100 * (9 / 16) = 56.25 */
      height: 56.25vw;
   }
}
@media (max-aspect-ratio: 16/9) {
   .video-background iframe {
      /* width = 100 / (9 / 16) = 177.777777 */
      width: 177.78vh;
   }
}