/*
 * ================================
 * Title: CEBS Landing Page
 * Author: Steve Gotthardt
 * Created: 1/2025
 * ================================
 */

.title-block {
  background-color:white;
  margin-bottom:0;
}
.title-block .title-block__content img {
  margin-left:0;
}
@media screen and (min-width:768px){
  .title-block .title-block__content h1,
  .title-block .title-block__content hr {
      max-width:26ch;
  }
}
@media screen and (min-width:960px){
  .title-block .title-block__content h1,
  .title-block .title-block__content hr {
      max-width:36ch;
  }
}
@media screen and (min-width:1200px){
  .title-block .title-block__content h1,
  .title-block .title-block__content hr {
      max-width:46ch;
  }
}
.title-block .title-block__content h1 {
  font-size: 24px;
  line-height: 34px;
  font-weight:400;
  margin:24px 0;
}
.title-block .title-block__content p.academic-partner-header {
  font-size: 14px;
  line-height: 24px;
  color: #999999;
  font-family: "Barlow Semi Condensed", "Roboto", Helvetica, Arial, sans-serif;
  font-weight:400;
  text-transform: uppercase;
  color:#757575;
}
.title-block .title-block__background::before {
    content:"";
    width:100%;
    height:calc(100% + 50px);
    position:absolute;
    top:-50px;
    left:0;
    background-color:white;
    z-index:1;
    opacity:.85;
  }
@media screen and (min-width:768px) {
  .title-block .title-block__background::before {
    width:200px;
    height:100vh;
    left:calc(50% - 200px);
    transform:rotate(10deg);
    opacity:1;
  }
  .title-block__background img {
    width:calc(50% + 100px) !important;
    left:auto;
    right:0;
  }
}

.curriculum-container {
  background-color:#00447c;
  color:white;
  padding:48px 24px;
}
@media screen and (min-width:768px) {
  .curriculum-container {
    padding-left:48px;
    padding-right:48px;
  }
}
@media screen and (min-width:1376px) {
  .curriculum-container {
    padding-left:0;
    padding-right:0;
  }
}
.curriculum-container h2, p {
  color:white;
}

.card__hexagon {
  font-size: 36px;
  line-height: 36px;
  align-items: center;
  background: #00447C;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  left: 24px;
  padding: 0;
  position: absolute;
  top: -33px;
  width: 48px;
}
.card__hexagon::after,
.card__hexagon::before {
  background: inherit;
  position: absolute;
  content: "";
  display: block;
  height: 60px;
  transform-origin: 0 0;
  width: 60px;
  z-index: 0;
}
.card__hexagon::before {
  left: 0;
  transform: scale(33%, 70%) rotate(45deg);
}
.card__hexagon::after {
  left: 100%;
  transform: scale(33%, 70%) rotate(45deg);
}
.card__hexagon .card__icon {
  position: relative;
  z-index: 2;
  align-items: center;
  border-radius: 0;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  height: 60px;
  justify-content: center;
  left: 0;
  padding: 0;
  top: 0;
  width: 100%;
}
.card--light .card__hexagon {
  background-color:#2A9DCB;
}
.card--action .card__hexagon {
  background-color:#9D6BA7;
}
.card__hexagon + .card__header {
  padding-top: 33px;
}

.video-and-email .grid {
  gap:0;
}
.video-and-email .grid__unit {
    padding:48px 24px;
}
.video-and-email .video {
  background-color:#00447c;
}
.video-and-email .video h2 {
  color:white;
}
.video-and-email .email {
  background-color:#f6f6f6;
}
.video-and-email .email p {
  color:#262626;
}
@media screen and (min-width:768px) {
  .video-and-email {
    background: linear-gradient(to right, #00447c 0%,#00447c 50%,#f6f6f6 50%,#f6f6f6 100%);
    padding:60px 48px;
    overflow:hidden;
  }
  .video-and-email .grid {
    align-items: stretch;
  }  
  .video-and-email .grid__unit {
    height:100%;
    align-self: center;
    background-color:transparent;
    position:relative;
  }
  .video-and-email .grid .grid__unit h2,
  .video-and-email .grid .grid__unit p {
    position:relative;
    z-index:1;
  }
  .video-and-email .grid__unit::before {
    content:"";
    position:absolute;
    width:100px;
    height:150vh;
    top:-50vh;
    transform:rotate(-10deg);
  }
  .video-and-email .video {
    padding-left:0;
    padding-right:120px;
  }  
  .video-and-email .email {
    padding-left:120px;
    padding-right:0;
  }
  .video-and-email .video::before {
    background-color:#00447c;
    right:0;
  }
  .video-and-email .email::before {
    background-color:#f6f6f6;
    left:0;
  }
}