/* ==========================================================================
   PHARMACY HOME PAGE
   ========================================================================== */
/* Grid Overrides */
.cwf-grid--page-layout {
    --cwf-grid--padding: 0 1rem;
}
.cwf-grid__column--page-layout {
    --cwf-grid__column--padding: 0 1rem;
}
@media (min-width: 768px) {
    .cwf-grid--page-layout {
        --cwf-grid--padding: 0 2rem;
    }
    .cwf-grid__column--page-layout {
        --cwf-grid__column--padding: 0;
    }
}


/* Hero / Feature Area */
.hp-feature {
    padding: 3rem;
}
@media (min-width: 1024px) {
    .hp-feature {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
        max-width: 95%;
        margin: auto;
        padding: 3rem 0;
    }
}
@keyframes flyInFromRight {
  0% {
    transform: translateX(100%); /* Start off-screen to the right */
    opacity: 0; /* Start with no opacity */
  }
  100% {
    transform: translateX(0); /* End at the original position */
    opacity: 1; /* End with full opacity */
  }
}
.hp-feature img {
    border: 2px solid white;
    box-shadow: 4px 4px 7px var(--vcu-black), -4px -4px 7px var(--vcu-gold);
}
.hp-feature__text {
  	animation: flyInFromRight 1s ease-out; /* 1s duration, ease-out timing function */
  	animation-fill-mode: forwards; /* Ensure the element stays at the final position */
  	transform: translateX(100%);
  	opacity: 0;
    margin-top: 2rem;
}
@media (min-width: 1024px) {
    .hp-feature__text {
        margin-top: initial;
    }
}
.hp-feature__text .t4_button a:after {
    font-family: "Font Awesome 6 Free";
    content: "\f178";
    margin-left: .5rem;
    color: var(--vcu-rust);
}
.hp-feature h2 {
    border-left: none;
    padding-left: 0;
    margin: 1rem auto;
    padding-top: 0;
    font-size: 3rem;
    text-shadow: 2px 2px 1px var(--vcu-gold);
    color: var(--vcu-black);
}
.hp-feature p:has(img) {
    margin-bottom: 0;
    padding-top: 0;
}
      

/* Fade-In Sections */
.fade-in-section {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}
.fade-in-section.visible {
    opacity: 1;
    transform: translateY(0);
}

      
/* Find your program */
.pro-home {
    border-image: conic-gradient(var(--vcu-gold) 0 0) fill 0 / 0 / 0 100vw;
    margin: 0 auto;
    padding: 3rem 1rem;
    color: var(--vcu-black);
}
.pro-home h2 {
    font-family: 'Merriweather', serif;
    border-left: none;
    padding-left: 0;
    padding-top: initial;
    margin-bottom: 2rem;
    text-align: center;
}
.pro-home .period {
    font-size: 2rem;
    color: var(--vcu-rust);
}
.pro-home__content {
    --columns: 1;
    display: grid;
    grid-template-columns: repeat(calc(var(--columns) * 2), 1fr);
    gap: 2rem;
}
.pro-home__item {
    --start: auto;
    grid-column: var(--start) / span 2;
    text-align: center;
}
.pro-home__item > a {
    --icon-size: 8rem;
    --background-color: var(--vcu-black);
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    background-color: var(--background-color);
    border-radius: 100%;
    border: 2px solid var(--vcu-rust);
    font-size: var(--icon-size);
    align-content: center;
}
.pro-home__item a {
    cursor: pointer;
    text-decoration: none;
    color: var(--vcu-black);
    border-bottom: 1px solid var(--vcu-rust);
    padding-bottom: 2px;
}
.pro-home__item > a:is(:hover,:focus) {
    --background-color: var(--vcu-white);
    
    .theme-pro-home {
        --fa-primary-color: var(--vcu-black);
    }
    .theme-pro-home__train {
        --fa-secondary-color: var(--vcu-black);
    }
}
.theme-pro-home {
    --fa-secondary-opacity: 1;
    --fa-primary-color: var(--vcu-white);
    --fa-secondary-color: var(--vcu-gold);
}
.theme-pro-home:hover, 
.theme-pro-home:focus {
    --fa-secondary-color: var(--vcu-gold);
}
.theme-pro-home__train {
    --fa-secondary-opacity: 1;
    --fa-primary-color: var(--vcu-gold);
    --fa-secondary-color: var(--vcu-white);
}
.pro-home__item > h3 > a:is(:hover,:focus) {
    text-decoration: none;
    color: var(--vcu-black);
    border: transparent;
}
.pro-home__item p {
    font-weight: 400;
}
@media (min-width: 415px) {
    .pro-home__item > a {
        --icon-size: 9rem;
    }
}
@media (min-width: 500px) {
    .pro-home__item > a {
        --icon-size: 12rem;
    }
}
@media (min-width: 600px) {
    .pro-home__item > a {
        --icon-size: 14rem;
    }
}
@media (min-width: 768px) {
    .pro-home__content {
        --columns: 3;
    }
    .pro-home__item:nth-child(4) {
        --start: 2;
    }
    .pro-home h2 {
        text-align: initial;
    }
    .pro-home__item > a {
        --icon-size: 6rem;
    }
}
@media (min-width: 912px) {
    .pro-home__item > a {
        --icon-size: 7rem;
    }
}
@media (min-width: 1100px) {
    .pro-home__item > a {
        --icon-size: 9rem;
    }
}
@media (min-width: 1200px) {
    .pro-home {
        padding: 3rem;
    }
    .pro-home__content {
        --columns: 5;
    }
    .pro-home__item:nth-child(4) {
        --start: auto;
    }
    .pro-home__item > a {
        --icon-size: 5rem;
    }
}

      
/* CTAs */
.plugin-hero.cta-black {
    border-image: conic-gradient(var(--vcu-black) 0 0) fill 0 / 0 / 0 100vw;
}
.cta-black .plugin-hero__caption {
    padding: 2rem 0;
}
@media (min-width: 1024px) {
    .cta-black .plugin-hero__caption {
        padding: 2rem;
    }
}
.cta-black .t4_button a {
    display: block;
    box-shadow: 0.25rem 0.25rem var(--vcu-gold);
    color: var(--vcu-black) !important;
}
.cta-black .t4_button a:hover, 
.cta-black .t4_button a:focus {
    background-color: var(--vcu-gold)!important;
    box-shadow: 0.25rem 0.25rem var(--vcu-gray)!important;
    color: var(--vcu-black)!important;
}
.cwf-grid.cta-black {
    margin: 1rem auto 3rem;
    padding: 1rem;
}
@media (min-width: 768px) {
  .cwf-grid.cta-black {
      max-width: 70%;
  }
}
.cwf-grid.cta-black p.t4_button {
    padding-top: 0;
}
      
          
/* Why VCU? */
.whyvcu {
    padding: 2rem 0;
}
@media (min-width: 1024px) {
    .whyvcu {
        padding: 2rem 0 0;
    }
}      
.whyvcu__heading {
    margin: 1rem 1rem 0;
    text-align: center;
}
.whyvcu__heading h2 {
    font-family: 'Merriweather', serif;
    border-left: none;
    padding-left: 0;
    padding-top: 0;
    margin: 1rem auto 3rem;
}
.whyvcu__content > p {
    text-align: center;
}
.plugin-tabs {
    --cwf-tabs--border-color: transparent;
}
@media (min-width: 768px) {
    .plugin-tabs {
        margin-bottom: 4rem;
    }
    .plugin-tabs__nav {
        --cwf-tabs__nav--justify-content: center;
    }
}
.plugin-tabs__panel[aria-hidden=false] {
    --cwf-tabs__panel--padding: 2.5rem 1.5rem 1.5rem 1.5rem;
}
.plugin-tabs--center .plugin-tabs__tabs {
    gap: 1rem;
}
.plugin-tabs__tabs button {
    text-transform: uppercase;
    font-size: 1.1rem;
    cursor: pointer;
}
.plugin-tabs__tab[tabindex="0"] {
    border: 3px solid var(--cwf-color--orange);
}
.plugin-tabs__tab[tabindex="-1"] {
    border: 3px solid #ccc;
    --cwf-tabs__tab--background-color: var(--cwf-color--white);
    --cwf-tabs__tab--color: unset;
}
.plugin-tabs__tab[tabindex="-1"]:hover {
    --cwf-tabs__tab--border-color: var(--cwf-color--orange);
    --cwf-tabs__tab--background-color: var(--cwf-color--white);
    color: initial;
}
.plugin-tabs__tab:focus, 
.plugin-tabs__tab:focus:hover, 
.plugin-tabs__tab[tabindex="0"], 
.plugin-tabs__tab[tabindex="0"]:hover {
    --cwf-tabs__tab--padding: 1rem;
    --cwf-tabs__tab--border-color: var(--cwf-tabs--border-color);
}
.plugin-tabs__tab:focus:before, 
.plugin-tabs__tab:focus:hover:before, 
.plugin-tabs__tab[tabindex="0"]:before, 
.plugin-tabs__tab[tabindex="0"]:hover:before {
    background-color: transparent;
}
@media (max-width: 767px) {
    .plugin-tabs__panel[aria-hidden=false] {
        --cwf-tabs__panel--padding: 2.5rem 0 1.5rem;
    }
}
.whyvcu__content {
    animation: fadeIn 2s;
    -webkit-animation: fadeIn 2s;
    -moz-animation: fadeIn 2s;
    -o-animation: fadeIn 2s;
    -ms-animation: fadeIn 2s;
}
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@-webkit-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@-ms-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@media (min-width: 768px) {/* Deploy grids at 768px instead of 1024px */
    .cwf-grid .whyvcu__content {
        --cwf-grid--grid-template-columns: 40% 60%;
    }
    .whyvcu__text {
        padding-left: 1rem;
    }
}
@media (min-width: 1200px) {
    .cwf-grid .whyvcu__content {
        --cwf-grid--grid-template-columns: 30% 70%;
    }
}
       
  
/* Stats */
.hp-stats-list {
    border-image: conic-gradient(var(--vcu-gray) 0 0) fill 0 / 0 / 0 100vw !important;
}
  
  
/* News and events */
.news-events {
    padding: 3rem 0;
}
.events h2 {
    font-family: "Merriweather", serif;
    text-align: center;
}
@media (min-width: 1280px) {
    .news-events {
        gap: 4rem;
        padding: 3rem;
    }
}
  
  
/* Pharmacy Spotlight */
.spotlight {
    border-image: conic-gradient(var(--vcu-gray) 0 0) fill 0 / 0 / 0 100vw;
    padding-top: 1rem;
    padding-bottom: 4rem;
}
.spotlight__heading h2 {
    font-family: 'Merriweather', serif;
    border-left: none;
    padding-left: 0;
    padding-top: initial;
    margin-bottom: 2.5rem;
    text-align: center;
}
@media (min-width: 1024px) {
    .spotlight {
        padding-top: 2rem;
    }
    .spotlight__heading h2 {
        margin-bottom: 3rem;
    }
}
nav.chs-carousel__controls {
    background-color: var(--vcu-gray);
}
  
  /* HEROUSEL */
body {
    overflow-x: hidden;
  }
  
[data-action="pause"] .chs-carousel__play {
    display: none;
}
[data-action="pause"] .chs-carousel__pause {
    display: inline;
}
[data-action="play"] .chs-carousel__play {
    display: inline;
}
[data-action="play"] .chs-carousel__pause {
    display: none;
}

#herousel{
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow:hidden;
    /* margin-bottom: -30px;
    
    height:11.5% */
}
      
#herousel .spotlight-carousel__image img{aspect-ratio: 16 / 9}

#herousel .spotlight-carousel__desc-text{
    position:absolute;
    background:rgba(0, 0, 0, 0.5);
    left:24px;
    width:50%;
    padding:0 1% 1.5% 2%;
    /*padding: 1rem; Jen */
    color:#fff;
    top:30%;
}

#herousel .spotlight-carousel__desc-text p{
    line-height:1.5em;
    font-size:100%;
}

#herousel .chs-carousel__controls{
    /*position:relative;*/
    position:absolute; 
    bottom:0;
    z-index:9999;
    /* padding-top:0; */
    padding-bottom:8px;
    height: 58px;
    
}

#herousel .chs-carousel__fraction
/*#herousel .chs-carousel__pagination*/{
    display:none;
}
  
#herousel .swiper-slide {
  margin-bottom: 0 !important;
}

#herousel .spotlight-carousel__image {
    max-height: 670px;
}

#herousel .chs-carousel__button--previous,
#herousel .chs-carousel__button--next{
  height:40px;
  width:40px;
  border-radius:50%;
  display:flex;
  align-items: center;
  justify-content: center;
  position:absolute;
  background:#ffb300;
  text-indent:-9999px;
  top: 16%;
  /* z-index: 9999; */
}

#herousel .chs-carousel__button--previous{
    /* text-indent:-9999px !important; */
    padding-left:24px;
    left:0;
    margin-left:24px;
}

#herousel .chs-carousel__button--next{
    text-indent:-9999px;
    padding-right:24px;
    right:0;
    margin-right:24px;
}

#herousel .chs-carousel__button--autoplay,  
#herousel .chs-carousel__button--pause{
    text-indent:-9999px;
    color:#ffb300;
    /* margin-top:-37%; */
    background:rgba(0,0,0,0.7);
  	margin-left: 24px;
    margin-bottom: 9%
  	padding-right: 5px;
    position: absolute;
    top:-575px;
    /* display:none; */
}
      
@media(max-width: 1023px) { 
  #herousel{
  height:100vw;
  background-color:#333;
  }

  #herousel .spotlight-carousel__desc-text{
  left:0;
  width:100%;
  /*top:30%;*/
  top:100%;
  background:#333;
  }

  #herousel .swiper{
  overflow:visible;
  }
  
#herousel .chs-carousel__button--autoplay,  
#herousel .chs-carousel__button--pause{
    margin-top:-125px;
  	/*margin-right:0;*/
  }
  
  /*#herousel .chs-carousel__button--previous{
    text-indent:-9999px !important;
  }*/
  
  #herousel h2{
  font-size:150%;
  }
}

@media(min-width: 1024px){
    #herousel{
        padding-top:0 !important;
        /*height: 14%;*/
    }
    #herousel .cwf-grid{
        --cwf-grid--grid-template-columns:none;
    }
}
  
@media(min-width: 1480px){
    #herousel{
        /*height: 24%;*/
      	height: 100vh
    }
  
    #herousel .swiper{
  		overflow:visible;
    }
  
    #herousel .spotlight-carousel__desc-text{
    	top:0;
      	bottom: -500px;
    }
  #herousel .chs-carousel__button--autoplay, #herousel .chs-carousel__button--pause{
  		margin-left:0;
    	margin-bottom:8%;
  }
}
  
/** ADDITIONAL RESPONSIVE CSS FOR #HEROUSEL */
/* Responsive breakpoints */
@media (max-width: 1024px) {
    #herousel .swiper-slide {
        padding: 12px;
    }

    #herousel .chs-carousel__pagination {
        gap: 8px;
    }

    #herousel .chs-carousel__dot {
        width: 10px;
        height: 10px;
    }
  
  #herousel .chs-carousel__button--autoplay,  
  #herousel .chs-carousel__button--pause{
      top:-510px;
	}
}

@media (max-width: 768px) {
    #herousel .chs-carousel__button {
        padding: 8px;
    }

    #herousel .chs-carousel__dot {
        width: 8px;
        height: 8px;
    }
    
}

@media (max-width: 480px) {
    #herousel{
      height:160vw;
      max-height:180vw;
    }
  
    #herousel .swiper-slide {
        padding: 8px;
    }

    #herousel .chs-carousel__button {
        padding: 6px;
    }

    #herousel .chs-carousel__dot {
        width: 6px;
        height: 6px;
    }
  
  #herousel .chs-carousel__button--autoplay,  
  #herousel .chs-carousel__button--pause{
      top:-390px;
	}
}
  
  @media (max-width: 420px) {  
    #herousel .chs-carousel__button--autoplay,  
    #herousel .chs-carousel__button--pause{
        top:-325px !important;
      }
}