:root {
  --blue: #252a82;
  --dark-blue: #00427a;
  --light-blue: #496ba6;
  --very-light-blue: #eef2f9;
  --cyan-blue: #3e63a2;
  --bright-blue: #00bce8;
  --purple-blue: #4b4880;
  --plum: #6b1868;
  --light-plum: #851f83;
  --magenta: #a80b7a;
  --orchid: #cc84b7;
  --lavender: #e3ccdc;
  --forest: #005c50;
  --green: #007864;
  --light-green: #40a18e;
  --aqua: #6fcacb;
  --red: #982013;
  --coverys-red: #e2231a;
  --orange: #f7901e;
  --yellow: #fdb813;
  --dark-gray: #575757;
  --gray: #6d6e71;
  --manatee-gray: #939598;
  --light-gray: #e6e7e8;
  --very-light-gray: #f2f2f2;
  --white: #fff;
  --black: #000;
  --header-height-mobile: 70px;
  --header-height-desktop: 70px;
  --footer-height: 100px;
  --border-radius: 20px;
}

/*** begin override bootstrap styles ***/

html,
body {
  color: var(--dark-gray);
  font-weight: 400;
  font-size: 26px;
  font-family: proxima-nova, sans-serif;
  line-height: 130%;
  background-color: var(--white);
}

.header {
    height: var(--header-height-mobile);
    padding-top: calc((var(--header-height-mobile) - 35px) / 2);
    padding-left: 0.75rem;
    background-color: var(--dark-blue);

}

img {
  max-width: 100%;
  height: auto;
}

header img {
  height: 37px;
}

.footer-container {
  height: var(--footer-height);
  background-color: var(--dark-blue);
}

a {
  color: var(--cyan-blue);
}

a:hover {
  color: var(--dark-blue);
}

h1,
.h1 {
  margin-bottom: 1rem;
  color: var(--dark-blue);
  font-weight: 900;
  font-family: proxima-nova-wide-black, sans-serif;
}

.h2 {
  margin-bottom: 1rem;
  color: var(--dark-blue);
  font-weight: 900;
  font-size: 1.25rem;
  font-family: proxima-nova-wide-black, sans-serif;
  line-height: 130%;
}

.h3 {
  color: var(--dark-blue);
  font-weight: 700;
}

.h4 {
  margin-bottom: 1rem;
  color: var(--dark-blue);
  font-weight: 700;
  font-size: 1.0rem;
  line-height: 130%;
}

.required {
  color: var(--red);
  font-weight: 700;
}

.form-control.error {
  color: var(--red) !important;
  border: 1px solid var(--red);
  box-shadow: 0 0 0 0.2rem rgb(152 32 19 / 25%);
}

.validation-error {
  display: none;
  margin-top: 0.25rem;
  color: var(--red);
  font-weight: 700;
  font-size: 0.75rem;
  line-height: 130%;
}

.btn {
  padding: 15px 80px;
  border: none;
  border-radius: 0;
}

.btn-primary {
  background-color: var(--dark-blue);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--light-blue) !important;
}

.white-text {
  color: var(--white);
}

/*** end override bootstrap styles ***/

.debug {
  border: 1px solid var(--black);
}

.arrow {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.3rem;
  border: solid var(--dark-blue);
  border-width: 0 0.175rem 0.175rem 0;
}

.arrow.right,
.arrow[aria-expanded='false'] {
  margin-bottom: 0.1rem;
  transform: rotate(-45deg);
}

.arrow.left {
  margin-bottom: 0.1rem;
  transform: rotate(135deg);
}

.arrow.up {
  margin-bottom: -0.15rem;
  transform: rotate(-135deg);
}

.arrow.down,
.arrow[aria-expanded='true'] {
  margin-bottom: 0.3rem;
  transform: rotate(45deg);
}

.arrow.pe {
  cursor: pointer;
}

/****** BEGIN HERO SECTION ******/

.hero-section {
  padding: 50px 0;
  background-color: var(--white);
}

.hero-title {
  color: var(--dark-gray);
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 130%;
}

.lead {
  color: var(--dark-gray);
  font-weight: 400;
  font-size: 1.0rem;
  line-height: 130%;
}

.btn-base {
  padding: 20px 60px;
  border-radius: var(--border-radius);
}

.enroll-now-btn {
  background-color: var(--dark-blue);
  border: 2px solid var(--dark-blue);
}

.enroll-now-btn:hover,
.enroll-now-btn:focus {
  background-color: var(--light-blue) !important;
  border: 2px solid var(--light-blue) !important;
}

.learn-more-btn {
  background-color: transparent;
  border: 2px solid var(--dark-blue);
}

.learn-more-btn:hover,
.learn-more-btn:focus {
  background-color: var(--light-gray) !important;
  border: 2px solid var(--dark-blue) !important;
}

/****** END HERO SECTION ******/

/****** BEGIN OVERVIEW SECTION ******/

.overview-container {
  padding: 30px 0 75px;
  background-color: var(--dark-blue);
}

.series-box {
  padding: 20px;
  background-color: var(--white);
  border-radius: var(--border-radius);
}

.session-note {
  font-size: 0.75rem;
  line-height: 130%;
}

/****** END OVERVIEW SECTION ******/

/******** BEGIN COURSES ***********/

#courses .card {
  position: relative;
  display: flex;
  width: 100%;
  border-radius: var(--border-radius);

  /* box-shadow: 0 4px 6px rgb(0 0 0 / 10%); */
}

.card img {
  border-top-left-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
}

#courses .card-title {
  color: var(--dark-blue);
  font-weight: 800;
  font-size: 0.7rem;
  line-height: 130%;
}

#courses .card-text {
  font-size: 0.5rem;
  line-height: 130%;
}

#courses .card-text .credit-text {
  text-align: center;
}

.carousel {
  margin-right: 30px;
  margin-left: 30px;
}

.carousel-control-prev,
.carousel-control-next {
  position: absolute;
  top: 50%;
  width: auto;
  transform: translateY(-50%);
}

.carousel-control-prev {
  left: -40px; /* Move the left control to the outside */
}

.carousel-control-next {
  right: -40px; /* Move the right control to the outside */
}

.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
    display: flex;
}

.carousel-inner .carousel-item-end.active,
.carousel-inner .carousel-item-next {
  transform: translateX(100%);
}

.carousel-inner .carousel-item-start.active, 
.carousel-inner .carousel-item-prev {
  transform: translateX(-100%);
}

.carousel-inner .carousel-item-end,
.carousel-inner .carousel-item-start{ 
  transform: translateX(0);
}

/*********  END COURSES ************/

/*********  BEGIN PRICING ************/


/*********  END PRICING ************/

/*********  BEGIN FACULTY ************/

#faculty .faculty-member {
  padding: 20px;
  border: 1px solid var(--light-gray);
  border-radius: var(--border-radius);
  box-shadow: 0 4px 6px rgb(0 0 0 / 10%);
}

.faculty-title {
  color: var(--dark-blue);
  font-weight: 800;
  font-size: 0.9rem;
  line-height: 130%;
}

/*********  END FACULTY ************/

/********* GET STARTED ************/

.enrollment-container {
  border: 1px solid var(--light-gray);
  border-radius: var(--border-radius);
  box-shadow: 0 4px 6px rgb(0 0 0 / 10%);
}

.enrollment-header {
  padding: 0.5rem 1rem;
  color: var(--white);
  font-weight: 800;
  background-color: var(--dark-blue);
  border-top-left-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
}

.enrollment-form {
  padding: 1rem;
}

.enrollment-form-label {
  font-size: 0.75rem;
  line-height: 130%;
}

/********* END STARTED ************/

/****** BEGIN FAQ SECTION ******/

.faq-container {
  padding: 50px 0;
  background-color: rgb(236 238 241 / 40%);
}

/****** END FAQ SECTION ******/

/**** extra-small and below ****/
@media (width <= 575.98px) {
  /* add rules as needed */
}

/**** small and above ****/
@media (width >= 576px) {
  .carousel-inner .carousel-item-end.active,
  .carousel-inner .carousel-item-next {
    transform: translateX(50%);
  }

  .carousel-inner .carousel-item-start.active, 
  .carousel-inner .carousel-item-prev {
    transform: translateX(-50%);
  }

  /*** needed to duplicate this for each media when adjusting .carousel-item end, next, start, prev ***/
  .carousel-inner .carousel-item-end,
  .carousel-inner .carousel-item-start{ 
    transform: translateX(0);
  }

}

/**** small and below ****/
@media (width <= 767.98px) {
  /* add rules as needed */
}

/**** medium and above ****/
@media (width >= 768px) {
  .carousel-inner .carousel-item-end.active,
  .carousel-inner .carousel-item-next {
    transform: translateX(33.333%);
  }

  .carousel-inner .carousel-item-start.active, 
  .carousel-inner .carousel-item-prev {
    transform: translateX(-33.333%);
  }

  /*** needed to duplicate this for each media when adjusting .carousel-item end, next, start, prev ***/
  .carousel-inner .carousel-item-end,
  .carousel-inner .carousel-item-start{ 
    transform: translateX(0);
  }

}

/**** medium and below ****/
@media (width <= 991.98px) {
  /* add rules as needed */
}

/**** large and above ****/
@media (width >= 992px) {
  .overview-container {
    padding: 90px 0;
  }

  .carousel-inner .carousel-item-end.active,
  .carousel-inner .carousel-item-next {
    transform: translateX(25%);
  }

  .carousel-inner .carousel-item-start.active, 
  .carousel-inner .carousel-item-prev {
    transform: translateX(-25%);
  }

  /*** needed to duplicate this for each media when adjusting .carousel-item end, next, start, prev ***/
  .carousel-inner .carousel-item-end,
  .carousel-inner .carousel-item-start{ 
    transform: translateX(0);
  }

}

/**** large and below ****/
@media (width <= 1199.98px) {
  /* add rules as needed */
}

/**** extra-large and above ****/
@media (width >= 1200px) {
  .hero-title {
    font-weight: 900;
    font-size: 2.85rem;
    line-height: 130%;
  }

  .hero-buttons {
    margin-top: 30px;
  }

  .overview-title {
    font-size: 1.8rem;
    line-height: 130%;
  }
  
  .carousel {
    margin-right: -.5rem;
    margin-left: -.5rem;
  }

  .col-xl-carousel-item {
    flex: 0 0 auto;
    width: 20%
  }

  .carousel-inner .carousel-item-end.active,
  .carousel-inner .carousel-item-next {
    transform: translateX(20%);
  }

  .carousel-inner .carousel-item-start.active, 
  .carousel-inner .carousel-item-prev {
    transform: translateX(-20%);
  }

  /*** needed to duplicate this for each media when adjusting .carousel-item end, next, start, prev ***/
  .carousel-inner .carousel-item-end,
  .carousel-inner .carousel-item-start{ 
    transform: translateX(0);
  }
  
}

/**** custom 1500px wide and above ****/
@media (width >= 1500px) {
  /* add rules as needed */
}

@media print {
  /* add rules as needed */
}