/************************ getting started, How to Apply Section ************************/
.hp-pathways.get-started {
    max-width: 1950px;
}
.hp-pathways.get-started {
  gap: 2em;
}
.hp-pathways.get-started {
        grid-template-columns: 1fr;
    }
@media only screen and (min-width: 1366px) {
  .hp-pathways.get-started {
    grid-template-columns: 1fr 1fr 1fr;
  
  }
}
.pathways-description.get-started-description {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
    margin-bottom: 2em;
}
@media only screen and (min-width: 1366px) {
  .pathways-description.get-started-description {
    text-align: inherit;
    max-width: initial;
    margin: initial;
    margin-bottom: 0px;
}
}
.get-started-description h2 {
    font-weight: 600;
    margin-bottom: 0.3em;
    color: #282828;
    font-family: new-spirit, serif;
    font-size: clamp(26px, 22.0449px + 1.236vw, 48px);
}

a.get-started-box {
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    aspect-ratio: 2 / .9;
    width: 100%;
}	
	
@media only screen and (min-width: 1366px) {	
a.get-started-box {
   aspect-ratio: initial; 
}	
}
a.get-started-box:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #00000030;
	    background: -webkit-linear-gradient(bottom, rgba(44, 44, 44, 80%) 0, rgba(44, 44, 44, 6%) 50%);
    background: linear-gradient(0deg, rgb(44 44 44 / 80%) 0, rgb(44 44 44 / 6%) 50%);
}
img.get-started-img {
    object-fit: cover;
    width: 100%;
    transition: all 0.4s;
    display: block;
	height: 100%;
}

a.get-started-box:hover img {
    transform: scale(1.05);
}
.get-started-text {
    position: absolute;
    bottom: 0;
    left: 0;
    color: #fff;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: .8em 1.2em;
	z-index:1;
}
.get-started-header h3 {
    padding-top: 0px;
    padding-bottom: 0px;
    font-family: "Roboto Condensed", sans-serif;
    font-weight: 500;
    display: block;
    font-size: 1.6em;
    text-shadow: 0 0 5px black;
}
a.get-started-box .not-check {
    background: transparent;
    display: inline-block;
    color: #fff;
    padding: 0.8em;
    border-radius: 50%;
    border: none;
    transition: 0.4s;
	font-size:1.2em;
}
a.get-started-box:hover .not-check {
    background: #138e43;
  
}
a.get-started-box .not-check .far {
    font-weight: 400;
    font-weight: bold !important;
    text-shadow: 0 0 5px black;
}
a.get-started-box:hover .not-check .far {
   
    text-shadow: none;
}
/****************** global styles **********************/

:root {
  --fluid-18-51: clamp(18px, 10.8649px + 2.2297vw, 51px);
  --fluid-15-51: clamp(15px, 7.2162px + 2.4324vw, 51px);
  --fluid-24-63: clamp(24px, 15.5676px + 2.6351vw, 63px);
  --fluid-16-22: clamp(16px, 13.4865px + 0.473vw, 22px);
  --fluid-28-39: clamp(26px, 32.3366px + -1.9802vw, 32px);
}

.reveal {
  opacity: 0;
  transform: translate3d(0, 0, 0);
  transition: opacity 1.5s, transform 0.8s;
}

.reveal_visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

a.btn-green {
  color: #fff;
  background-color: #00703c;
  padding: 0.7em 1.7em;
  font-size: 1em !important;
  text-decoration: none;
  display: inline-block;
  margin-bottom: 20px;
  font-family: "Roboto", "Gill Sans MT", Calibri, sans-serif;
  border-radius: 50px;
  line-height: 1.4em;
}

.home-hero,
.home-box-inner,
.ccri-connect,
.why-boxes,
.campuses,
.intro-section {
  padding: 0px 4%;
  max-width: 100%;
  margin: 0 auto;
  position: relative;
}

.accordion-box {
  margin-bottom: 0em;
}

p.tag-line {
  margin-bottom: 0.8em;
  font-size: 1.3em !important;
}

.full-width-two-heading {
  font-family: new-spirit, serif;
  font-weight: 600;
}
h2 {
  font-size: clamp(26px, 19.7143px + 1.9643vw, 52px);
}

/****************** global styles End**********************/
	
	
/************* Emergency Message *************************/	
	
#donot-display-emergency-message {
    visibility: hidden;
    display: none;
}	
.attention-box {
    z-index: 1;
    margin-bottom: -2em;
}
@media only screen and (min-width: 1200px) {	
.attention-box {
   margin-bottom: initial;
}	
}
.attention-box-inner {
    padding: 2em;
    background: #f6d877;
    border-radius: 50px;
    width: 100% !important;
	margin: 0 0;
	margin-top: calc(2em + 51px);
	margin-bottom: 1em;
}	
.attention-box-inner:hover {
	width: 100%;
	cursor: pointer;
}
.attention-box-inner:hover .attention-text p {
	display: inline-block;	
}
@media only screen and (min-width: 768px) {	
.attention-box-inner {
	padding: 1.2em 3em;
	width: 333px;
}
}
@media only screen and (min-width: 1200px) {	
.attention-box-inner {
	margin-top:2em;
	width: 333px;
}
}
	
@media only screen and (max-width: 769px) {	
.attention-text p {
	display: inline-block !important;
}
}
	
.attention-box-message {
    display: flex;
    gap: 2em;
    flex-wrap: nowrap;
    align-items: center;
    align-content: center;
    justify-content: space-between;
    flex-direction: column;
}
	

.attention-text a {
  color: #282828;
  text-decoration: underline;
}
.attention-text a:hover {
    color: #282828;
    background: #f5f5f5;
}
@media only screen and (min-width: 768px) {
.attention-box-message {
   flex-direction: row;
}
}
.attention-text {
    max-width: 1332px;
}
.attention-text p {
    margin-bottom: 0px !important;
	color: #282828;
	/* display: none; */
}
button#closeNotification {
    border: solid 1px #282828;
    border-radius: 50%;
    height: 2.8em;
    width: 2.8em;
    color: #282828;
    background: transparent;
	 transition: 0.4s;
}
.attention-button {
    display: flex;
    width: 100%;
	justify-content: flex-end;
}
@media only screen and (min-width: 768px) {
.attention-button {
    display: initial;
    width: initial;
}
}
	button#closeNotification i.far.fa-times {
    font-size: 1.2em;
}
	button#closeNotification:hover {
    background: #282828;
	color: #fff;
}
/******************* Video Hero section **********************/

.hero-vid {
  position: relative;
  width: 100%;
  margin-bottom: 5em;
  display: block;
 
}

@media only screen and (min-width: 1200px) {
  .hero-vid {
    margin-top: 2em;
    height: 72vh;
    min-height: 438px;
  }
}

.intro {
  position: relative;
  background: #fff;
  z-index: 2;
  padding: 4em 0em;
  width: 100%;
  padding-top: 3em;
}

@media only screen and (min-width: 1200px) {
  .intro {
    position: absolute;
    bottom: 0;
    padding: clamp(45px, 22.5px + 1.875vw, 60px);
    left: -1px;
    width: auto;
    min-width: fit-content;
    border-radius: 0 32px 0 0;
    padding-bottom: 0px;
  }
  .intro:before {
    background: #fff;
    content: "";
    height: 32px;
    left: 1px;
    -webkit-mask-image: url(/_resources-2025/images/home-page-hero/curve-left.svg);
    mask-image: url(/_resources-2025/images/home-page-hero/curve-left.svg);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 100%;
    mask-size: 100%;
    position: absolute;
    top: -32px;
    width: 32px;
  }

  .intro:after {
    background: #fff;
    content: "";
    height: 32px;
    right: -32px;
    -webkit-mask-image: url(/_resources-2025/images/home-page-hero/curve-left.svg);
    mask-image: url(/_resources-2025/images/home-page-hero/curve-left.svg);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 100%;
    mask-size: 100%;
    position: absolute;
    bottom: 0;
    width: 32px;
  }
}

video#background-video {
  width: 100%;
  z-index: 1;
  object-fit: cover;
  border-radius: 32px;
}

@media only screen and (min-width: 1200px) {
  video#background-video {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
  }
}

.play-and-pause {
  position: absolute;
  bottom: 5em;
  right: 2em;
}

@media only screen and (min-width: 1200px) {
  .play-and-pause {
    bottom: initial;
    top: 4em;
    right: 4em;
  }
}

.header-vid-btn {
  z-index: 3;
  color: #fff;
  font-size: 1em;
  background: none;
  border: none;
  text-shadow: none;
  font-weight: 400;
  background: #138e43;
  padding: 1em;
  border-radius: 50%;
  transition: 0.4s;
  display: block;
}

.intro-pill-btn:hover,
.header-vid-btn:hover {
  background: #282828;
}

.header-vid-btn.hide-btn {
  display: none;
}

.intro p {
  line-height: 1.5em !important;
  max-width: 500px;
  font-size: 1.2em;
  color: #282828;
  margin-bottom: 1em;
}
@media only screen and (min-width: 1200px) {
.intro p {
   
    font-size: clamp(15px, 10.5px + 0.375vw, 18px);
	max-width: clamp(400px, 250px + 14vw, 500px);

}
	}
h2.intro-text {
  color: #282828;
  font-size: clamp(23px, 19.8187px + 0.9942vw, 40px);
  display: block;
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 500;
  line-height: 1.2em;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  max-width: 100%;
}

h2.intro-text span {
  color: #00703c;
}

.intro-pills {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 5px;
}

.intro-pill-btn {
  font-family: "Roboto Condensed", sans-serif;
  text-transform: uppercase;
  font-size: 0.9em;
  background: #138e43;
  color: #fff;
  padding: 0.8em 1.2em;
  border-radius: 33px;
  display: inline-block;
  letter-spacing: 0.3px;
  transition: 0.4s;
}

/****************** Notification Boxes *************************/

.notifications {
  display: grid;
  grid-template-columns: 1fr;
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
}

@media only screen and (min-width: 768px) {
  .notifications {
    grid-template-columns: 1fr 1fr;
  }
}

@media only screen and (min-width: 1320px) {
  .notifications {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

.notifications-box {
  background: #f5f5f5;

  flex: 1;
  color: #282828;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.not-box-upper {
  padding: 2em;
  padding-top: 2em;
}
@media only screen and (min-width: 1600px) {
  .not-box-upper {
    padding: 3em;
    padding-top: 2em;
  }
}

.mask-img {
  border-radius: 32px;
  overflow: hidden;
  display: flex;
}

.notifications-box img {
  transition: 0.4s;

  object-fit: cover;
  aspect-ratio: 3 / 2;
  width: 100%;
}

.notifications-box:hover img {
  transform: scale(1.05);
}

.not-box-one {
  background: #d8e0dc;
}

.not-box-three {
  background: #e0e0e0;
}

.not-box-four {
  background: #ece8e2;
}

span.not-box-heading {
  transition: 0.4s;
  font-weight: 600;
  line-height: 1.25em;
  font-family: "Roboto Slab", serif;
  padding-top: 0.4em;
  margin-bottom: 1.4em;
  display: inline-block;
  width: fit-content;
  font-size: 1.22em;
  font-family: new-spirit, serif;
}
@media only screen and (min-width: 1780px) {
  span.not-box-heading {
    font-size: 1.4em;
  }
}

.notifications-box:hover span.not-box-heading {
  box-shadow: inset 0px -1px #282828;
}

.not-box-body {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2em;

  padding: 2em;
  background: #00000012;
  flex: auto;
}

@media only screen and (min-width: 1600px) {
  .not-box-body {
    padding: 3em;
  }
}

@media only screen and (min-width: 1320px) and (max-width: 1500px) {
  .not-box-body {
    gap: 0.6em;
    flex-direction: column;
  }
}
.not-box-body p {
  font-size: 1.2em;
  font-weight: 400;
  line-height: 1.4em !important;
  color: #282828;
}

.not-check {
  background: transparent;
  display: inline-block;
  color: #282828;
  padding: 0.8em;
  border-radius: 50%;
  border: solid 1px #282828;
  transition: 0.4s;
}

.notifications-box:hover .not-check {
  background: #128e43;
  color: #ffffff;
  border: solid 1px #128e43;
}


/********** CCRI Connect Section Styles **********/
.ccri-connect {
  position: relative;
  z-index: 1;
}

.ccri-connect-inner {
  max-width: 1650px;
  margin: 0 auto;
  position: relative;
}

.connect-link {
  background: #d8e0dc;
  display: flex;
  flex-direction: column-reverse;
  border-radius: 32px;
  padding: 2em;
  gap: 2em;
}



@media only screen and (min-width: 768px) {
  .connect-link {
    flex-direction: row-reverse;
    padding: 3em;
    gap: 10%;
  }
}

@media only screen and (min-width: 1024px) {
  a.connect-link {
    padding: 5em;
  }
}
.connect-text,
.connect-img {
  flex: 50%;
}
.connect-img-mask {
  border-radius: 32px;
  overflow: hidden;
  height: 100%;
}
.connect-img img {
  height: 100%;
  object-fit: cover;
  transition: all 0.4s ease;
}

.connect-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ccri-connect:before,
.ccri-connect:after {
  display: block;
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 50%;
  content: "";
}

.ccri-connect:before {
  top: 0;
  left: 0;
}

.ccri-connect:after {
  background: #f5f5f5;
  bottom: 0;
  left: 0;
}

.ccri-connect h2 {
  margin-bottom: 0.4em;
  color: #282828;
  font-family: new-spirit, serif;
  font-weight: 600;
}

.ccri-connect p {
  line-height: 1.5em !important;
  font-size: 1.2em;
  color: #282828;
  margin-bottom: 1em;
}
.checky {
  margin-top: 2em;
  display: flex;
  justify-content: flex-end;
}

/******************* Events section **********************/

.events-slider-2025 {
  clear: both;
}

.events-track {
  display: flex;
  gap: 1em;
}

.event-box {
  display: flex !important;
  flex-direction: column;
  background: #00703c;
  border-radius: 1.3em;
  padding: 23px;
  flex: 1;
  justify-content: space-between;
}

.event-box:hover {
  background: #000000;
}

.event-cal {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 3em;
}

img.cal-img {
  width: 70px;
  border-radius: 50%;
  border: solid 2px #fff;
}

.event-info {
  margin-bottom: 4em;
}

span.event-date {
  display: block;
  color: #fff;
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 500;
  margin-bottom: 0.7em;
}

span.event-title {
  display: block;
  color: #ffffff;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 1.6em;
  font-weight: 400;
  line-height: 1.2em;
}

span.location-btn {
  color: #fff;
  font-family: "Roboto Condensed", sans-serif;
  text-transform: uppercase;
  font-size: 0.8em;
  background: #0000003b;
  color: #fff;
  padding: 0.8em 1.2em;
  border-radius: 33px;
  display: inline-block;
  letter-spacing: 0.3px;
  transition: 0.4s;
  margin-bottom: 5px;
}

span.location-btn.caly {
  background: #138e43;
}

.event-box:hover span.location-btn {
  background: #ffffff47;
}

/**************** Sliders ********************/

.news-slider-2025 .slick-next:before,
.events-slider-2025 .slick-next:before,
.campuses-slide .slick-next:before {
  content: "\f178";
}

.news-slider-2025 .slick-prev:before,
.events-slider-2025 .slick-prev:before,
.campuses-slide .slick-prev:before {
  content: "\f177";
}

/************ News section ***********/

.ccri-news {
  margin-bottom: 8em;
  position: relative;
}

.intro-section,
.home-boxes,
.why-boxes {
  padding-top: 3.5em;
  padding-bottom: 3.5em;
}
.campuses {
  padding-top: 3.5em;
  padding-bottom: calc(3em + 66px);
  overflow: hidden;
}
.home-boxes {
  background: #f5f5f5;
  overflow: hidden;
}

@media only screen and (min-width: 992px) {
  .intro-section,
  .home-boxes,
  .why-boxes {
    padding-top: 8em;
    padding-bottom: 8em;
  }

  .campuses {
    padding-top: 8em;
    padding-bottom: calc(8em + 62px);
  }
}

.home-boxes h2 {
  margin-bottom: 0.3em;
  color: #282828;
  font-family: new-spirit, serif;
  font-weight: 600;
}

.news-slider-2025 .slick-list,
.events-slider-2025 .slick-list,
.campuses-slide .slick-list {
  overflow: visible;
}

.news-slider-2025,
.events-slider-2025,
.campuses-slide {
  display: block !important;
}

.news-slider-2025 .slick-track,
.events-slider-2025 .slick-track,
.campuses-slide .slick-track {
  gap: 1.8em;
}

.news-slider-2025 .slick-track:before,
.news-slider-2025 .slick-track:after,
.events-slider-2025 .slick-track:before,
.events-slider-2025 .slick-track:after,
.campuses-slide .slick-track:before,
.campuses-slide .slick-track:after {
  display: none;
}

.news-slider-2025 .slick-prev,
.news-slider-2025 .slick-next,
.events-slider-2025 .slick-prev,
.events-slider-2025 .slick-next,
.campuses-slide .slick-prev,
.campuses-slide .slick-next {
  font-size: initial;
  font-size: initial;
  line-height: initial;
  position: absolute;
  bottom: initial;
  top: -93px !important;
  display: block;
  width: initial;
  height: initial;
  padding: 0;
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
  cursor: pointer;
  color: transparent;
  border: none;
  outline: none;
  background: transparent;
  top: initial;
  left: auto;
  z-index: 1;
  border-radius: 50%;
  height: 3em;
  width: 3em;
  text-align: center;
  border: solid 2px #282828;
  right: 0;
}

.campuses-slide .slick-prev,
.campuses-slide .slick-next {
  bottom: -86px;
  top: auto !important;
}

@media only screen and (min-width: 992px) {
  .news-slider-2025 .slick-prev,
  .news-slider-2025 .slick-next,
  .events-slider-2025 .slick-prev,
  .events-slider-2025 .slick-next {
    top: -107px !important;
  }
}

.news-slider-2025 .slick-prev:before,
.news-slider-2025 .slick-next:before,
.events-slider-2025 .slick-prev:before,
.events-slider-2025 .slick-next:before,
.campuses-slide .slick-prev:before,
.campuses-slide .slick-next:before {
  font-family: "Font Awesome 5 Pro";
  line-height: initial;
  opacity: 1;
  color: #282828;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font-weight: 400;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.1em;
}

.news-slider-2025 .slick-prev,
.events-slider-2025 .slick-prev,
.campuses-slide .slick-prev {
  right: calc(0px + 3.4em) !important;
}

.news-slider-2025 .slick-prev.slick-disabled,
.news-slider-2025 .slick-next.slick-disabled,
.events-slider-2025 .slick-prev.slick-disabled,
.events-slider-2025 .slick-next.slick-disabled,
.campuses-slide .slick-prev.slick-disabled,
.campuses-slide .slick-next.slick-disabled {
  border-color: #b0b0b0;
}

.news-slider-2025 .slick-prev.slick-disabled:before,
.news-slider-2025 .slick-next.slick-disabled:before,
.events-slider-2025 .slick-prev.slick-disabled:before,
.events-slider-2025 .slick-next.slick-disabled:before,
.campuses-slide .slick-prev.slick-disabled:before,
.campuses-slide .slick-next.slick-disabled:before {
  color: #b0b0b0;
}

.news-slider-2025 .news-image-box {
  border-radius: 24px;
  margin-bottom: 0.9em;
  overflow: hidden;
}

.news-slider-2025 .slick-slide img {
  display: block;
  transition: all 0.4s;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  width: 100%;
}

.news-slider-2025 a.news-link:hover img {
  transform: scale(1.05);
}

.news-slider-2025 .slider-item-inner {
  margin: 0px 0px;
  position: relative;
}

.news-slider-2025 h4.slider-title {
  font-weight: 500;
  font-size: 1.25em;
}
.cat-box {
    position: absolute;
    top: 1em;
    left: 1em;
    z-index: 1;
}
.news-slider-2025 p.catagory-header {
  font-size: 0.76em;
  color: #ffffff;
  padding: 0.4em 0.8em;
  background: #00703c;
  display: inline-block;
  border-radius: 50px;
  font-weight: 500;
  text-transform: uppercase;
  z-index: 1;
}

/************ News and calendar dropdowns ***********/

.dropdown.news-menu {
  margin-bottom: 3em;
  display: flex;
}

@media only screen and (min-width: 992px) {
  .dropdown.news-menu {
    margin-bottom: 3.6em;
  }
}

.news-menu button {
  border: none;
  background: #cbcbcb;
  font-size: 1em;
  color: #282828;
  padding: 0.5em 1em;
  border-radius: 33px;
}

.news-menu .dropdown-menu.show {
  border-radius: 16px;
  padding: 0px;
  margin-top: 1em;
  overflow: hidden;
}

.news-menu a.dropdown-item {
  font-size: 1.5em;
  padding: 0.9em 2em;
}

@media only screen and (min-width: 992px) {
  .news-menu button {
    display: none;
  }

  .news-menu .dropdown-item:focus,
  .news-menu .dropdown-item:hover {
    background-color: transparent;
  }

  .news-menu .dropdown-menu {
    display: flex;
    position: relative !important;
    border: none;
    background: transparent;
    flex-direction: row;
    transform: none !important;
  }

  .news-menu a.dropdown-item {
    font-size: 1.7em;
    padding: 0px;
  }

  .news-menu a.dropdown-item:after {
    content: "|";
    color: #929292;
    padding: 0 0.5em;
  }

  .news-menu a.dropdown-item:last-of-type::after {
    content: " ";
  }
}

@media only screen and (min-width: 992px) {
  .link-line {
    background-image: -webkit-linear-gradient(
      left,
      #805851 0,
      #805851 49.75%,
      rgba(128, 88, 81, 0.15) 49.75%,
      rgba(128, 88, 81, 0.15) 100%
    );
    background-image: linear-gradient(
      90deg,
      #00703c 0,
      #00703c7d 49.75%,
      #00703c00 49.75%,
      #00703c00 100%
    );

    background-size: 200% 1px;
    background-position: 100% bottom;
    background-repeat: no-repeat;
    -webkit-transition: background-position 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    transition: background-position 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }

  a:hover .link-line {
    background-position: 0 bottom;
  }
}

/****************** pathways section styles **********************/

.hp-pathways {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 1850px;
  margin: 0 auto;
  gap: 2em;
}

.hp-pathways img.card-img {
  border-radius: 32px;
}

@media only screen and (min-width: 1200px) {
  .hp-pathways {
    grid-template-columns: 1fr 1fr;
  }
  .hp-pathways {
    gap: 6%;
  }
}

.pathways-description h2 {
  font-weight: 600;
  margin-bottom: 0.3em;
  color: #282828;
  font-family: new-spirit, serif;
}

.hp-pathways p {
  line-height: 1.5em !important;
  font-size: 1.2em;
  color: #282828;
}
.path-pill-box {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
a.pathway-pills {
  color: #fff;
  font-family: "Roboto Condensed", sans-serif;
  text-transform: uppercase;
  font-size: 0.9em;
  background: #0000003b;
  color: #fff;
  padding: 0.8em 1.2em;
  border-radius: 33px;
  display: inline-block;
  letter-spacing: 0.3px;
  transition: 0.4s;
  line-height: initial;
  background: #138e43;
}

a.pathway-pills:hover {
  background: #000000;
}

.pathways-accord p {
  margin-bottom: 1em;
}

/***************** Campuses section styles **********************/

.campuses {
  background: #f5f5f5;
}

a.campus-box {
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  overflow: hidden;
}
a.campus-box:hover .not-check {
  background: #128e43;
  color: #ffffff;
  border: solid 1px #128e43;
}
a.campus-box:hover img {
  transform: scale(1.05);
}
.campus-image-mask {
  overflow: hidden;
}
.campus-intro {
  text-align: center;
  margin-bottom: 4em;
}
.campuses h2 {
  margin-bottom: 0.3em;

  color: #282828;
  font-family: new-spirit, serif;
  font-weight: 600;
}
.campus-intro-para {
 line-height: 1.5em !important;
    font-size: 1.2em;
    color: #282828;
    max-width: 800px;
    margin: 0 auto;
    margin-bottom: 0.8em;
}
.campus-intro-para a {
  color: #2d5e7b;
  text-decoration: underline;
}
.campus-intro-para a:hover {
  color: #2d5e7b;
  text-decoration: none;
}
img.campus-image {
  display: block;
  transition: all 0.4s;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  width: 100%;
}

.campus-text {
  display: flex;
  justify-content: space-between;
  padding: 1em;
  background: #d8e0dc;
  align-items: flex-end;
  gap: 1em;
}
.campuses h3 {
  line-height: 1.3em;
  padding-top: 0px;
  padding-bottom: 0px;
  margin-bottom: 0.5em;
  color: #282828;
  font-family: "Roboto Condensed", sans-serif;
  font-weight: bold;
  display: block;
  font-size: 1.3em;
}

ul.campus-ul {
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  font-size: 1.1em;
}

.campus-address {
  color: #282828;
}
/************************ President Section ************************/
	
.presidents-message {
    background: #d8e0dc;
    display: flex;
    border-radius: 32px;
    padding: 2em;
    gap: 2em;
    align-items: center;
    color: #282828;
    flex-direction: column;
}
@media only screen and (min-width: 820px) {	
.presidents-message {
   flex-direction: row;
}
}
@media only screen and (min-width: 1024px) {	
.presidents-message {
    padding: 4em;
    gap: 3em;
}
}
a.presidents-message:hover {
  background: #c9d0cc;
}
a.presidents-message:hover .not-check {
  background: #128e43;
  color: #ffffff;
  border: solid 1px #128e43;
}
.pres-message .ccri-connect-inner {
    
    max-width: 1450px;
}
.ccri-connect.pres-message:before {  
    background: #f5f5f5;
}
.ccri-connect.pres-message:after {
    background: #ffffff;
  
}
img.president-image {
       max-width: clamp(200px, 149.7419px + 6.129vw, 238px);
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 200px;
    object-position: 50% 20%;
    width: 100%;
}
.ccri-connect p.prez-text-para {
    font-weight: 500;
    margin-bottom: 0.3em;
    color: #282828;
    font-family: new-spirit, serif;
    font-size: clamp(18px, 6.0968px + 1.4516vw, 27px) !important;
    margin-bottom: 1.5em;
    text-align: center;
}
@media only screen and (min-width: 820px) {	
.ccri-connect p.prez-text-para {
  
    text-align: left;
}	
}
span.pres-name {
    display: block;
    margin-bottom: 6px;
}
.prez-lower {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
@media only screen and (min-width: 820px) {	
.prez-lower {
 justify-content: space-between;
    flex-direction: row;
    align-items: flex-end;
}
}	
.pres-signature{
    margin-bottom: 1.8em;
    text-align: center;
	font-size: 1.2em;	

}
@media only screen and (min-width: 820px) {	
.pres-signature{
    margin-bottom: 0em;
    text-align: left;
}
}
.prez-button {
    font-family: "Roboto Condensed", sans-serif;
    text-transform: uppercase;
    font-size: 0.9em;
    background: #c3cdc8;
    color: #282828;
    padding: 0.8em 1.2em;
    border-radius: 33px;
    letter-spacing: 0.3px;
    transition: 0.4s;
	display: flex;
    align-items: center;
}
	
a.presidents-message:hover .prez-button {
	background: #138e43;
	color:#fff;
}
.prez-button .far{
    margin-left: 8px;
    font-size: 1.3em;
}
/************ apply section right above the footer ***********/

@media only screen and (min-width: 992px) {
  .full-width-two-cont {
    padding-left: 3em;
    padding-right: 3em;
  }
}

.full-width-two-cont {
  max-width: 1600px;
}