ul.student-experience-icon-navigation {
position: relative;
display: flex;
flex-wrap: wrap;
list-style: none;
padding: 0;
justify-content: center;
}

ul.student-experience-icon-navigation > li {
position: relative;
flex: 0 0 33.33%;
box-sizing: border-box;
padding: 0;
min-height: 320px;
}

ul.student-experience-icon-navigation > li > .card {
position: relative;
text-decoration: none;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
height: 100%;
width: 100%;
text-align: center;
transition: all 0.15s linear;
overflow: hidden;
}

ul.student-experience-icon-navigation > li > .card:hover {
/*background-color: #000000;
color: #FFFFFF;*/
}
	
ul.student-experience-icon-navigation > li:nth-child(8n+1),
ul.student-experience-icon-navigation > li:nth-child(8n+1) .details--header,
ul.student-experience-icon-navigation > li:nth-child(8n+1) .details--footer { 
    background-color: var(--aiu-blue-dark);  /*Color for 1, 9 */
}
ul.student-experience-icon-navigation > li:nth-child(8n+3),
ul.student-experience-icon-navigation > li:nth-child(8n+3) .details--header,
ul.student-experience-icon-navigation > li:nth-child(8n+3) .details--footer { 
    background-color: var(--aiu-orange);  /*Color for 3, 9 */
}
	
ul.student-experience-icon-navigation > li:nth-child(8n+5),
ul.student-experience-icon-navigation > li:nth-child(8n+5) .details--header,
ul.student-experience-icon-navigation > li:nth-child(8n+5) .details--footer { 
    background-color: var(--aiu-blue-light);  /*Color for 5, 11 */
}
ul.student-experience-icon-navigation > li:nth-child(8n+7),
ul.student-experience-icon-navigation > li:nth-child(8n+7) .details--header,
ul.student-experience-icon-navigation > li:nth-child(8n+7) .details--footer { 
    background-color: var(--aiu-gray);  /*Color for 5, 11 */
}
	
ul.student-experience-icon-navigation > li > .card:hover .details,
ul.student-experience-icon-navigation > li > .card:focus .details,
ul.student-experience-icon-navigation > li > .card:focus-within .details {
    bottom: 0;
}
	
@media (hover: none) {
ul.student-experience-icon-navigation > li > .card:focus .details {
    bottom: 0;
  }
}
	
ul.student-experience-icon-navigation > li > .card .front {
width: 100%;
}

ul.student-experience-icon-navigation > li > .card .front span {
text-transform: uppercase;
font-size: 1.6rem;
font-weight: 600;
display: block;
line-height: 1.1;
color: #FFFFFF;
max-width: 100%;
margin: auto;
}

ul.student-experience-icon-navigationn > li > .card:hover .front span {
color: #FFFFFF;
}

ul.student-experience-icon-navigation > li > .card .front svg {
	filter:  opacity(50%);
	fill: rgba(255,255,255,1);
	/*filter: contrast(50%);*/
}
	
	
ul.student-experience-icon-navigationn > li > .front svg {
width: 75%;
height: auto;
margin-bottom: 8px;
}
	
	
.details {
	font-weight: 400;
    position: absolute;
    bottom: -100%;
    left: 0;
    width: 100%;
    height: 100%;
background: rgb(255,255,255);
background: linear-gradient(180deg, rgba(255,255,255,1) 60%, rgba(238,238,238,1) 100%);
    /*ckdrop-filter: blur(16px) saturate(120%);*/
    transition: .3s;
    z-index: 2;
	display: flex;
  flex-direction: column;
}
	
	.details--header {
				font-size: var(--font-size-body-x-large);
		text-transform: uppercase;
		background: #000a;
	   color: #fff;
		padding:0.75rem 0.25rem;
		text-wrap: balance;
	}
	.details--footer {
		padding:0.2rem;
	}
	
	
	.details--footer {}
	.details--content {
		flex: 1;
		color: #000000;
	    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
		    padding: 1.5em 1.5em 2em;
	}
	
	
p.details--content--header {
	font-size:1.5rem;
		text-transform: uppercase;
	font-weight:600;
	line-height: 1.1;
	text-wrap: balance;
	}
p.details--content--subhead {
	font-size:1.2rem;
	
	}
	
	
	
	.details--content img {
			
		width: 100%;
		max-width: 180px;
		height: auto
	}
	
	.student-experience-img {
	width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
	}
	
.icon-hover {
	position: absolute;
	color:#FFFFFF;
	height: 32px;
	width: 32px;
	top:8px;
	right:8px;
	}
	
.icon-hover svg {
	filter:  opacity(50%);
	fill: rgba(255,255,255,1);
	}
	
.button-link {
    display: inline-block;
    padding: 10px 20px;
    background-color:var(--aiu-blue-dark);
    color: #ffffff;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 4px;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    text-align: center;
	text-transform: uppercase;
}

.button-link:hover {
    background-color: #0056b3; /* Darker blue on hover */
    border-color: #004085;
	text-decoration: none;
	color: #FFFFFF;
}

.button-link:active {
    background-color: #004085; /* Even darker on click */
}

.button-link:focus {
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

.button-p {padding-bottom:0.5rem}

.button-link.button-link-small {
	font-size: 0.75rem;
	padding: 6px 10px;
	line-height: 1rem;
}
	
@media (max-width: 1280px) {
	ul.student-experience-icon-navigation > li {
		min-height: 430px;
	}
	
	
	
ul.student-experience-icon-navigation > li:nth-child(2n+2) { 
    /*display:none;*/
}
	
	}
	
@media (max-width: 1024px) {
ul.student-experience-icon-navigation > li:nth-child(2n+2) { 
    display:none;
}
	
ul.student-experience-icon-navigation > li {
flex: 0 0 50%;
}
	
	}
	
@media (max-width: 720px) {
ul.student-experience-icon-navigation > li:nth-child(2n+2) { 
    display:none;
}
	
ul.student-experience-icon-navigation > li {
flex: 0 0 100%;
}
	
	}

		#modal_muse {
		background-color:#EEEEEE;
		}
		
.modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0;
}

.modal-grid__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.modal-grid__content {
  font-family: Arial, sans-serif;
  color: #0057a0;
}

.modal-grid__content h2 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
line-height: normal;
}

.modal-grid__content ul {
  list-style-type: disc;
  padding-left: 1.5rem;
  margin-bottom: 0;
}
.modal-grid__content ul li {
 padding-bottom: 0.5rem;
}

.modal-grid__content .disclaimer {
  font-size: 0.75rem;
}

.badge-img {
  margin-top: 1rem;
  max-width: 120px;
}

/* Responsive (optional) */
@media (max-width: 768px) {
  .modal-grid {
    grid-template-columns: 1fr;
  }

  .modal-grid__image {
    order: -1; /* Image comes first on mobile */
  }
}