/* Partners carousel: disable animation and center when .no-loop is present */
.dynamic-partners .partners-logos.no-loop,
.dynamic-partners .partners-logos.no-loop .partners-track {
  animation: none !important;
}
.dynamic-partners .partners-logos.no-loop .partners-track {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 24px;
}
/* News & Events page tile interactions */
.newsFull .news-listing .news-self{
  /* remove drop shadow on this page and clip inner zoom */
  box-shadow: none;
  overflow: hidden;
  position: relative; /* anchor overlay link */
}
.newsFull .news-listing .news-self:hover{ background-color: #fff; }
.newsFull .news-listing .news-self .news-link{ transition: color 0.2s ease; }

/* Events: place meta row over image with gradient */
.newsFull .news-listing .news-self .news-image {
  position: relative;
  overflow: hidden; /* also clip image hover zoom if present */
}
.newsFull .news-listing .news-self .news-image .event-meta-row {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  color: #fff;
  background: none;
  /* ensure readable on any image */
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
  z-index: 5;
  box-sizing: border-box;
}
.newsFull .news-listing .news-self .news-image .event-meta-row .event-meta-left,
.newsFull .news-listing .news-self .news-image .event-meta-row .event-meta-right {
  color: #fff;
  flex: 0 0 auto; /* do not stretch; size to content */
}

/* Use qual-tag visual style inside events overlay */
.newsFull .news-listing .news-self .news-image .event-meta-row .qual-tag {
  display: inline-flex; /* compact pill sizing */
  align-items: center;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1;
  background-color: #000; /* opaque background */
  color: #fff;
  border: none; /* no border */
  padding: 10px 12px;
  border-radius: 4px;
  white-space: nowrap; /* keep on one line */
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
/* Hover invert for qual-tag pills when the whole tile is hovered */
.newsFull .news-listing .news-self:hover .news-image .event-meta-row .qual-tag {
  background-color: #ffffff !important;
  color: #000000 !important;
  border: none !important;
  text-shadow: none !important; /* remove drop shadow on hover */
}
/* Make the date pill bold only */
.newsFull .news-listing .news-self .news-image .event-meta-row .event-meta-right.qual-tag {
  font-weight: 700;
}
/* Make the campus pill bold too */
.newsFull .news-listing .news-self .news-image .event-meta-row .event-meta-left.qual-tag {
  font-weight: 700;
}

/* Homepage Events: mirror overlay design from News & Events */
.hm-events-wrapper .news-self .news-image { 
  position: relative; 
  overflow: hidden; 
}
.hm-events-wrapper .news-self .news-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease, filter 0.35s ease;
}
.hm-events-wrapper .news-self .news-image .event-center-overlay{
  position:absolute;
  inset:0;
  display:flex; flex-direction: column; gap: 15px;
  align-items:center;
  justify-content:center;
  padding:12px;
  text-align:center;
  color:#fff;
  font-weight:700;
  font-size:1.1em;
  text-transform:uppercase;
  text-shadow:0 2px 8px rgba(0,0,0,0.8);
  background: rgba(0,0,0,0.35);
  opacity:0;
  transition: opacity 0.25s ease;
  pointer-events:auto; /* allow CTA click */
  z-index:4; /* above .news-link-overlay (z-index:3) */
}
.hm-events-wrapper .news-self .news-image .event-meta-row {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  color: #fff;
  background: none;
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
  z-index: 5; /* above center overlay and link overlay */
  pointer-events: none; /* keep tile clickable */
  box-sizing: border-box;
}
.hm-events-wrapper .news-self .news-image .event-meta-row .event-meta-left,
.hm-events-wrapper .news-self .news-image .event-meta-row .event-meta-right {
  color: #fff;
  flex: 0 0 auto;
  font-weight:700; /* make pills bold on homepage */
}
.hm-events-wrapper .news-self .news-image .event-meta-row .qual-tag {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1;
  background-color: #000;
  color: #fff;
  border: none;
  padding: 10px 12px;
  border-radius: 4px;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.hm-events-wrapper .news-self:hover .news-image .event-meta-row .qual-tag {
  background-color: #ffffff !important;
  color: #000000 !important;
  border: none !important;
}
.hm-events-wrapper .news-self:hover .news-image img {
  transform: scale(1.05);
  filter: blur(3px);
}
.hm-events-wrapper .news-self:hover .news-image .event-center-overlay{ opacity:1; }
.hm-events-wrapper .news-self:hover .news-image .event-meta-row {
  text-shadow: none !important;
}

/* Hover zoom for news tiles that use direct <img> (no .news-image wrapper) */
.newsFull .news-listing .news-self > img{
  transition: transform 0.35s ease;
  transform-origin: center center;
  display: block;
}
.newsFull .news-listing .news-self:hover > img{ transform: scale(1.1); }

/* News & Events page: event tiles hover blur + centered overlay */
.events-listing .news-self .news-image{ position: relative; overflow: hidden; }
.events-listing .news-self .news-image img{ transition: transform 0.35s ease, filter 0.35s ease; width:100%; height:100%; object-fit:cover; }
.events-listing .news-self .news-image .event-center-overlay{
  position:absolute; inset:0; display:flex; flex-direction: column; gap: 20px; align-items:center; justify-content:center; padding:12px; text-align:center;
  color:#fff; font-weight:700; font-size:1.1em; text-transform:uppercase; text-shadow:0 2px 8px rgba(0,0,0,0.8);
  background: rgba(0,0,0,0.35); opacity:0; transition: opacity 0.25s ease; pointer-events:auto; z-index:4; /* above .news-link-overlay */
}
.events-listing .news-self .news-image .event-meta-row{
  position:absolute; left:0; right:0; top:0;
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:10px 10px; color:#fff; background:none; text-shadow:0 2px 6px rgba(0,0,0,0.6);
  z-index:6; /* above blurred image and center overlay */
  pointer-events:none; /* keep tile clickable */
  box-sizing:border-box;
}
.events-listing .news-self .news-image .event-meta-row .event-meta-left,
.events-listing .news-self .news-image .event-meta-row .event-meta-right{
  font-weight:700; /* make pills bold on News & Events */
}
.events-listing .news-self:hover .news-image img{ transform: scale(1.05); filter: blur(3px); }
.events-listing .news-self:hover .news-image .event-center-overlay{ opacity:1; }

/* Event CTA button inside image (homepage + events page) */
.news-self .news-image .event-cta-wrap{
  display:flex; justify-content:center;
}
.news-self .news-image .event-cta-btn{
  pointer-events:auto; /* clickable even if parent overlays exist */
  display:inline-block; padding:8px 12px; border-radius:5px;
  background:#fff; color:#000; font-weight:700; text-transform:uppercase; letter-spacing:0.02em; font-size:0.7em;
  text-shadow:none; /* remove overlay text shadow on button text */
  text-decoration:none; box-shadow:0 2px 8px rgba(0,0,0,0.25);
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.1s ease;
}
.news-self .news-image .event-cta-btn:hover{ background:#D59D10; color:#fff; }
.news-self .news-image .event-cta-btn:active{ transform: translateY(1px); }
.news-self .news-image .event-cta-btn:focus{ outline:2px solid #D59D10; outline-offset:2px; }
/*
Theme Name: Whitecliffe
Theme URI: 
Author: Sebastian
Author URI: sebastian
Description: Whitecliffe Theme
Version: 1.0
*/
body,html,div,section{
	margin:0;
	padding: 0;
}

/* Sticky Footer Fix */
html {
	height: 100%;
	scroll-behavior: smooth;
}
body {
    font-family: "GT Walsheim Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}
footer {
	margin-top: auto;
    flex-shrink: 0; /* Prevents the footer from shrinking */
}
/* End Sticky Footer Fix */

	@font-face {
		font-family: "GT Walsheim Pro";
		font-weight: 300;
		font-style: normal;
		src: url(./fonts/GTWalsheimPro-Light.woff2) format("woff2"),
			 url(./fonts/GTWalsheimPro-Light.ttf) format("truetype");
		font-display: swap;
	}
	@font-face {
		font-family: "GT Walsheim Pro";
		font-weight: 300;
		font-style: oblique;
		src: url(./fonts/GTWalsheimPro-LightOblique.woff2) format("woff2"),
			 url(./fonts/GTWalsheimPro-LightOblique.ttf) format("truetype");
		font-display: swap;
	}
	@font-face {
		font-family: "GT Walsheim Pro";
		font-weight: 400;
		font-style: normal;
		src: url(./fonts/GTWalsheimPro-Regular.woff2) format("woff2"),
			 url(./fonts/GTWalsheimPro-Regular.ttf) format("truetype");
		font-display: swap;
	}
	@font-face {
		font-family: "GT Walsheim Pro";
		font-weight: 400;
		font-style: oblique;
		src: url(./fonts/GTWalsheimPro-RegularOblique.woff2) format("woff2"),
			 url(./fonts/GTWalsheimPro-RegularOblique.ttf) format("truetype");
		font-display: swap;
	}
	@font-face {
		font-family: "GT Walsheim Pro";
		font-weight: 500;
		font-style: normal;
		src: url(./fonts/GTWalsheimPro-Medium.woff2) format("woff2"),
			 url(./fonts/GTWalsheimPro-Medium.ttf) format("truetype");
		font-display: swap;
	}
	@font-face {
		font-family: "GT Walsheim Pro";
		font-weight: 500;
		font-style: oblique;
		src: url(./fonts/GTWalsheimPro-MediumOblique.woff2) format("woff2"),
			 url(./fonts/GTWalsheimPro-MediumOblique.ttf) format("truetype");
		font-display: swap;
	}
	@font-face {
		font-family: "GT Walsheim Pro";
		font-weight: 700;
		font-style: normal;
		src: url(./fonts/GTWalsheimPro-Bold.woff2) format("woff2"),
			 url(./fonts/GTWalsheimPro-Bold.ttf) format("truetype");
		font-display: swap;
	}
	@font-face {
		font-family: "GT Walsheim Pro";
		font-weight: 700;
		font-style: oblique;
		src: url(./fonts/GTWalsheimPro-BoldOblique.woff2) format("woff2"),
			 url(./fonts/GTWalsheimPro-BoldOblique.ttf) format("truetype");
		font-display: swap;
	} 
	  #myVideo {
		position: absolute;
		right: 0;
		top: 0;
		height: 100vh;
		opacity: 0.1;
		z-index: 0;
	  }

	h1,h5,h4,h3,p{
		margin: 0;
		padding: 0;
	}

	iframe::before {
		background-color:#000;
	  }
	h1{  
		font-size: 3em;
		font-weight: bold;
	}
	h2{
		font-size: 2.4em;
	}
	h3{
		font-size:1.7em; 
	}
	h4{
		font-size:1.7em;
	}
	
	h5{
		font-size:1.6em;
	}
	h6{
		margin: 0;
		padding-top:10px;
		padding-bottom: 10px;
		font-size:1.1em;
	}
	p{
		font-size:1.5em;
		font-weight: 300; /* Use the light weight */
	}
	a[href$=jpg]:hover, 
a[href$=jpeg]:hover, 
a[href$=png]:hover, 
a[href$=gif]:hover {
        text-decoration: none;
        border: 0;
        border: none;
        }
	.hm-h1{font-size:1.7em;align-self:flex-end;justify-self: center; }
	.hm-h2{flex-basis:100%;font-size:3em;margin-bottom: 0;}
  	.flex-block{
  		display: flex;
  		flex-flow: row wrap;
  	}
	.industry-flex{margin-top: 40px;gap: 40px;flex-flow: row nowrap; display: flex;}
	.industry-flex > .flex-1 { 
		flex: 1 1 0; 
		min-width: 0; /* allow content to shrink without overflow */
	}
	.industry-flex .flex-1 img { 
		width: 100%; 
		height: auto; 
		display: block; 
	}
	.industry-flex .flex-1 h2{
		margin-top: 0;
	}
	/* Industry members: 4-up grid with 20px gap */
	.industry-member {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 20px;
		margin-top: 20px;
	}
	.industry-member > div {
		background: #fff;
		border: 1px dashed #cfcfcf;
		border-radius: 12px;
		padding: 20px;
		box-sizing: border-box;
	}
	.industry-member-item{
		display: flex;
		flex-direction: column;
	}
	.industry-member-bio{
		max-height: 200px;
		overflow: hidden;
		position: relative;
	}
	.industry-member-item.is-expanded .industry-member-bio{
		max-height: none;
		overflow: visible;
	}
	.industry-member-toggle{
		display: inline-block;
		margin-top: auto;
		padding-top: 10px;
		text-decoration: underline;
		font-weight: 700;
	}
	.industry-member-toggle:hover,
	.industry-member-toggle:focus-visible{
		color: #D59D10;
	}
	.industry-member h4{
		font-size:1.8em;
	}
	.industry-member p{
		font-size:1.2em;
	}
	/* Industry blog list: 4-up grid with 20px gap */
	.industry-blog {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 20px;
		margin-top: 20px;
	}
	/* Industry CTA button (centered) */
	.industry-btn {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 30px 0 10px 0;
	}
	.industry-btn button {
		background-color: #fff;
		color: #000;
		border: 2px solid #000;
		border-radius: 8px;
		height: 56px;
		padding: 0 22px;
		font-size: 1.1em;
		font-weight: 700;
		letter-spacing: 0.02em;
		text-transform: uppercase;
		box-shadow: 0 2px 8px rgba(0,0,0,0.15);
		transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, transform 0.05s ease;
		cursor: pointer;
	}
	.industry-btn button:hover {
		background-color: #D59D10; /* gold */
		color: #fff;
		box-shadow: none; /* remove shadow on hover */
		border-color: #fff; /* visually remove border while keeping layout */
	}
	.industry-btn button:active { transform: translateY(1px); }
	.industry-btn button:focus { outline: 2px solid #D59D10; outline-offset: 2px; }
	.flex-block > .flex-1 {
		flex: 0 0 50%;
		max-width: 50%;
		box-sizing: border-box;
	}
	.flex-block .flex-1 img {
		width: 100%;
		height: auto;
		display: block;
	}
	.industry-partners{
		background-color: #D59D10;
		margin-top: 40px;
		padding-top: 40px;
		padding-bottom: 60px;
		color:#fff;
		overflow-x: hidden; /* ensure no page-level horizontal scroll from inner animation */
	}
    /* Special button style on gold background */
    .industry-partners .industry-btn .btn-on-gold{
        background-color: transparent !important;
        color: #fff !important;
        border: 2px solid #fff !important;
    }
    .industry-partners .industry-btn .btn-on-gold:hover{
        background-color: #fff !important;
        color: #000 !important;
        border-color: #000 !important;
        box-shadow: none !important;
    }
    .industry-partners .industry-btn .btn-on-gold:focus{
        outline: 2px solid #fff;
        outline-offset: 2px;
    }
	
    /* Industry partners: simple, non-breaking horizontal carousel */
    .industry-carousel{
        display: flex;
        flex-direction: row;
        align-items: center;
        /* container now acts as a viewport for the animated track */
        overflow: hidden; /* hide scrolling UI for auto-rotate */
        -webkit-overflow-scrolling: touch;
        padding: 20px 10px; /* breathing room so logos don't hug edges */
        margin-top: 80px;
		padding-bottom: 60px;
    }
    .industry-carousel::-webkit-scrollbar{ display: none; } /* WebKit hide */
    /* Animated inner track for rotating logos */
    .industry-carousel .industry-track{
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 48px;
        will-change: transform;
        animation: partners-scroll var(--scroll-duration, 20s) linear infinite;
    }
    .industry-carousel .industry-track.paused{ animation-play-state: paused; }
    .industry-carousel img{
        flex: 0 0 auto; /* prevent stretching */
        height: 85px;
        max-width: 150px;
        object-fit: contain;
        filter: grayscale(100%);
        opacity: 0.9;
        transition: filter 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
    }
    .industry-carousel img:hover{ filter:none; opacity:1; transform: scale(1.03); }
	/* dynamic partners coursel start */
	.dynamic-partners{
		margin-top: 40px;
		padding-top: 20px;
		background-color:#D59D10;
		padding-bottom: 10px; /* leave extra room for dropdown */
		color:#fff;
		position: relative;
		overflow: visible; /* allow dropdown to render fully */
		overflow-x: hidden; /* but clip any horizontal overflow from track */
		display: flex; /* stack dropdown over logos */
		flex-direction: column;
		align-items: center; /* center horizontally */
		transition: background-color 250ms ease; /* smooth color change */
	}

	/* Logos strip constraints */
	.dynamic-partners .partners-logos{
		height: 140px;
		position: relative;
		overflow: hidden; /* hide overflow for scrolling track */
		overflow-x: hidden; /* extra safety for horiz overflow */
		display: flex;
		align-items: center;
		margin:40px 0 60px 0;
		gap:60px;
	}

	/* Dropdown styling (match industry-btn button) */
	.dynamic-partners .industry-btn{
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 10px;
	}
	.dynamic-partners .industry-btn select{
		appearance: none;
		-webkit-appearance: none;
		-moz-appearance: none;
		background-color: #fff;
		color: #000;
		border: 2px solid #000;
		border-radius: 8px;
		height: 56px;
		line-height: 56px;
		padding: 0 22px 0 22px; /* extra right padding for arrow */
		font-size: 1.1em;
		font-weight: 700;
		letter-spacing: 0.02em;
		text-transform: uppercase;
		box-shadow: 0 2px 8px rgba(0,0,0,0.15);
		transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, transform 0.05s ease;
		cursor: pointer;
		font-family: inherit;
		min-width: 260px;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='black' d='M5.5 7.5l4.5 4.5 4.5-4.5z'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: right 16px center;
		background-size: 20px 20px;
	}
	.dynamic-partners .industry-btn select:hover{
		background-color: #D59D10; /* gold */
		color: #fff;
		box-shadow: none;
		border-color: #fff;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='white' d='M5.5 7.5l4.5 4.5 4.5-4.5z'/%3E%3C/svg%3E");
	}
	.dynamic-partners .industry-btn select:focus{
		outline: 2px solid #D59D10;
		outline-offset: 2px;
	}

    /* Override: make the department select look like btn-on-gold on gold bg */
    .dynamic-partners .industry-btn .industry-select{
        background-color: transparent !important;
        color: #fff !important;
        border: 2px solid #fff !important;
        box-shadow: none !important;
        /* white arrow */
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='white' d='M5.5 7.5l4.5 4.5 4.5-4.5z'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: right 16px center !important;
        background-size: 20px 20px !important;
    }
    .dynamic-partners .industry-btn .industry-select:hover{
        background-color: #fff !important;
        color: #000 !important;
        border-color: #000 !important;
        box-shadow: none !important;
        /* black arrow on hover */
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='black' d='M5.5 7.5l4.5 4.5 4.5-4.5z'/%3E%3C/svg%3E") !important;
    }
    .dynamic-partners .industry-btn .industry-select:focus{
        outline: 2px solid #fff !important;
        outline-offset: 2px !important;
    }

	/* Partners carousel track */
	.dynamic-partners .partners-track{
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 60px;
		will-change: transform;
		animation: partners-scroll var(--scroll-duration, 20s) linear infinite;
	}
	.dynamic-partners .partners-track.paused{ animation-play-state: paused; }

	/* Each logo wrapper */
	.dynamic-partners .partners-track > div{
		flex: 0 0 auto;
		display: flex;            /* lay images in a row */
		flex-direction: row;
		align-items: center;     /* vertical center for varying logo heights */
		gap: 48px;               /* space between images */
		/* allow width to be content-based (no min-width constraint) */
	}

	/* Logo image sizing */
	.dynamic-partners img{
		max-height: 100px;
		max-width:180px;
		display: block;
		object-fit: contain;
		filter: grayscale(100%);
		opacity: 0.85;
		transition: filter 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
	}
	.dynamic-partners img:hover{ filter: none; opacity: 1; transform: scale(1.03); }

	@keyframes partners-scroll{
		from{ transform: translateX(0); }
		to{ transform: translateX(calc(-1 * var(--scroll-distance, 1000px))); }
	}
	/* dynamic partners coursel end */
	.font2em{
		font-size:2em;
	}
	.font1-5{
		font-size:1.5em;
	}
	.txt-center{
		text-align: center;
	}
	.responsive {
		width: 100%;
		height: auto;
		max-width: 100%;
	  }
	  .responsive2 {
		width: auto;
		height: 100%;
	  } 
	.landing{
		min-height:100vh;
		background-repeat:	no-repeat;
		background-size: cover;
	}
	.heading-bg{
		position: absolute;
		display:flex;
		background-color: #2d2d2d30;
		z-index:1;
		height: 160px;
		width:78vw;
		margin: 40px 5% 30px 5%;
	}
	a.link-generic{
		text-decoration: none;
		color:#000;
	}
	a.link-generic:hover{color:#D59D10;text-decoration: none;}
	a.link-generic:visited{text-decoration: none;color: #000;}
	.landing-bg-default{
		background-image: url(https://www.whitecliffe.ac.nz/wp-content/uploads/2025/05/Hugh-Thompson-1-scaled.jpg);
		background-size: cover;
	}
	.landing-bg-finearts{
		background-image: url(/wp-content/uploads/2025/05/K0A3525-scaled.jpg);
		background-position: center center;
		background-size:cover;
	}
	.landing-bg-design{
		background-position: center center;
		background-size:cover;
		background-image: url(/wp-content/uploads/2025/05/Isabelle_Cassidy_4-scaled.jpg);
	}
	.landing-bg-fashion{
		background-image: url(/wp-content/uploads/2025/05/Jessica-Sinton-1.jpg);
		background-position: center center;
		background-size:cover;
	}
	.landing-bg-infotech{
		background-image: url(/wp-content/uploads/2024/12/Home-IT-1-scaled.jpg);
	}
	.landing-bg-creativearts{
		background-position: center center;
		background-size:cover;
		background-image: url(/wp-content/uploads/2024/11/Ruchita-Parekh-work3.jpg);
	}
	.landing-path{background-color: rgb(34, 34, 34);}
	.landing-degree{background-color:unset !important;}
	.h-nomargin{
		margin-top:0px;
	}
	.h-margin-bottom{margin-bottom: 20px;}
	.hero-gradient{
		opacity: 0.8;
		position: absolute;
		top:0;
		left:0;
		height: 100%;
		width:100%;
		z-index: 2;
		background: rgb(20,118,184);
		background: linear-gradient(180deg, rgba(20,118,184,0) 0%, rgba(173,173,173,0) 56%, rgba(28,28,28,1) 94%);
		color:#fff;
		display: flex;
		align-items: flex-end;
		text-align: center;
	}

	.hero-gradient > p{
		margin-left: auto;
		margin-right: auto;
		position: relative;
		padding-bottom: 20px;
	}
	.turn-off{
        display: none;
    }
	.turn-off-complete{
		content-visibility: hidden;
		display: none;
		height: 0;
		border:0;
	}
	.pathway-wrapper {
		box-shadow: 0 2px 16px 0 rgba(0,0,0,0.18), 0 1.5px 4px 0 rgba(0,0,0,0.15);
		transition: box-shadow 0.3s;
	}
	
	/* Pathway background styles */
	#pathway-bg-finearts,
	#pathway-bg-design,
	#pathway-bg-fashion,
	#pathway-bg-infotech,
	#pathway-bg-creativearts {
		transition: background-color 0.3s ease;
	}
	
	/* Three.js Magnetic Distortion Effect */
	.landing-bg-default {
		position: relative;
		overflow: hidden;
	}
	
	#landing-layer2 {
		pointer-events: none; /* Allow mouse events to pass through */
	}

/* Smooth background crossfade for #landing */
#landing {
    position: relative;
    /* Make landing a flex column container so footer sections can consume remaining space */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
#landing::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--landing-fade-url, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    pointer-events: none;
    transition: opacity 350ms ease;
}
#landing.bg-fading::before {
    opacity: 1;
}

/* Dedicated background fader that can temporarily sit on top for a guaranteed visible fade */
#landing-bg-fader {
    position: absolute;
    inset: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0; /* default hidden so removing .show fades out */
    pointer-events: none;
    transition: opacity 700ms ease-in-out;
    z-index: 0; /* default below content */
}
#landing-bg-fader.show { opacity: 1; }
#landing.fader-on-top #landing-bg-fader { z-index: 99999; }



	.magnetic-bg-container {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: -1;
	}
	
	#magnetic-canvas {
		width: 100%;
		height: 100%;
		display: block;
	}
	/**** home3 ****/
	           
	.btn-w {
		background: rgba(255,255,255,0.9) !important;
		color: #000 !important;
	}
	.hm-h1 {
		font-size: 2.5em;
		display: flex;
		flex-direction: column;
		justify-content: center;
		height: 100%;
		text-align: center;
		padding-top:10px;
	}
	.landing-hero-secondary {
		background: rgba(16,16,16,0.9) !important;
		/* Reserve vertical space to prevent layout jumps */
		min-height: 64px;
		margin-top: 0; /* Prevent negative shifts */
		display: flex;
		align-items: center;
		padding: 10px 16px;
	}
	.landing-hero-secondary h4 { margin: 0; }

	.pathway-wrapper {
		box-shadow: 0 2px 16px 0 rgba(0,0,0,0.18), 0 1.5px 4px 0 rgba(0,0,0,0.15);
		transition: box-shadow 0.3s;
	}
	.landing-degree-layer2{background-color:#fff;margin-left:0;margin-right:0;padding:0 8vw 0 8vw;margin-top:0;}
	.qual-grid{flex-basis:unset!important;padding-left:0;padding-right:0;gap:20px!important;}
	.qual-degree-menu-layer{gap:0!important;margin-left:0!important;margin-right:0!important;}
	.filter-display{text-align:left!important;margin-left:0!important;padding:0!important;width:100%!important;}
	.landing-degree{
		background-size:contain;
	}
	/* Final CSS for the magnetic background effect */
    .magnetic-bg-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1; /* Place it behind all other content */
        pointer-events: none; /* Let clicks pass through */
    }
    #magnetic-canvas {
        display: block;
        width: 100%;
        height: 100%;
    }
    /* When the 3D effect is active, force the background to be transparent and remove the image */
    .three-js-active {
        background-image: none !important;
        background-color: transparent !important;
    }
	.max-width{width:100%;}
	.no-margin{margin: 0;}
	/******* btns *****/
	.page-heading{margin-bottom: 10px;margin-top: 0;}
	.breadcrumbs{font-size:0.9em;color:#000;text-decoration: none;}
	.breadcrumbs a:hover{color:#D59D10!important;text-decoration: none;}
	.breadcrumbs a:link, .breadcrumbs a:visited{color:#000;text-decoration: none;}
	.button {
		background-color: #fff; /* Green */
		border: none;
		border-radius: 5px;
		color: #000000;
		padding: 10px 10px;
		text-align: center;
		text-decoration: none;
		transition-duration: 0.4s;
		font-size:1em;
		margin: 0 10px;
	}
	  
	.button:hover {
		background-color: #000; /* Green */
		color: white;
	
	}
	/***** btn regular ****/
	.btn-general {
		/* background-color: #fff;  */
		border: 0px solid black;
		border-radius: 5px;
		/* color: #000; */
		padding: 10px 20px;
		text-align: center;
		text-decoration: none;
		transition-duration: 0.4s;
		font-size:1.1em;
	}
	  
	.btn-general:hover {
		background-color: #000; /* Green */
		color: white;
	}

/* Mobile contrast fix: ensure gold call button uses black text */
@media (max-width: 768px) {
  /* Target the specific CTA in landing buttons on mobile */
  #landing .landing-btns .mobile-only-btn .btn-general.arrow-other.txt-white {
    color: #000 !important; /* override .txt-white */
  }
  #landing .landing-btns .mobile-only-btn .btn-general.arrow-other {
    background-color: #D59D10 !important; /* keep gold background */
    border-color: #D59D10 !important;
  }
  /* Make both mobile-only buttons bold */
  #landing .landing-btns .mobile-only-btn .btn-general {
    font-weight: 700 !important;
  }
}

	/* Prospectus button enhancements */
	.btn-prospectus {
		font-weight: 700 !important; /* make text bold regardless of txt-* */
		box-shadow: 0 4px 12px rgba(0,0,0,0.25);
		transition: box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
	}
	.btn-prospectus:hover {
		background-color: #d4af37 !important; /* gold */
		color: #000 !important;
		box-shadow: 0 6px 16px rgba(0,0,0,0.35);
	}

	/**** btn colors ***/
	.btn-w{  /* wwhite no background */
		color:#fff;
		background-color: rgba(16, 16, 16, 0.7);
		border-color:#fff;
		border-style: dashed;
	}
	.btn-bw{
		color:#000;
		background: rgba(255, 255, 255, 1) ;
		border-color:#000;
	}
	.degree-arrow-wrapper{
		border:2px solid;
		height:70px;
		width:70px;
		display: flex;
		justify-content:  center;
		align-items:center;
		border-radius: 100%;
		filter: drop-shadow(3px 3px 3px);
		background-color: #FFF;
		align-self: center;
		justify-self: center;
		transition: transform 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, filter 0.2s ease;
	}
	.degree-arrow-wrapper a{text-decoration: none;}
	.arrow-main{
		font-size:40px;
		align-self:center;
		justify-self: center;
		margin-left: 5px;
	}

/* Rotate on hover of the degree card and remove drop shadow */
.degree:hover .degree-arrow-wrapper {
    transform: rotate(90deg);
    filter: none;
}

/* Department-specific hover background colors using parent department classes */
.degree.depFinearts:hover .degree-arrow-wrapper { background-color: #B22325; }
.degree.depDesign:hover   .degree-arrow-wrapper { background-color: #800080; }
.degree.depInfo:hover     .degree-arrow-wrapper { background-color: #1476B8; }
.degree.depFashion:hover  .degree-arrow-wrapper { background-color: #228C22; }
.degree.depArt:hover      .degree-arrow-wrapper { background-color: #F26A23; }
.degree.depOther:hover    .degree-arrow-wrapper { background-color: #D59D10; }

/* Alumni: only change the name color by department on hover (do not affect paragraph) */
.alumni-container.depDesign:hover  .hm-alumni-name .news-link { color: #800080 !important; }
.alumni-container.depFinearts:hover .hm-alumni-name .news-link { color: #B22325 !important; }
.alumni-container.depInfo:hover    .hm-alumni-name .news-link { color: #1476B8 !important; }
.alumni-container.depFashion:hover .hm-alumni-name .news-link { color: #228C22 !important; }
.alumni-container.depArt:hover     .hm-alumni-name .news-link { color: #F26A23 !important; }
.alumni-container.depOther:hover   .hm-alumni-name .news-link { color: #D59D10 !important; }

/* On hover, remove department border color from the arrow icon */
.degree:hover i.arrow.border-designinno,
.degree:hover i.arrow.border-finearts,
.degree:hover i.arrow.border-infotech,
.degree:hover i.arrow.border-fashion,
.degree:hover i.arrow.border-creativearts,
.degree:hover i.arrow.border-other,
.degree:hover i.arrow.arrowDep {
    border-color: #fff !important;
}

/* Alumni tiles as full clickable cards */
.alumni-container {
    position: relative;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
.alumni-container:hover {
    text-decoration: none;
}
.alumni-container.border-shadow:hover {
    box-shadow: none !important; /* pressed effect */
}
.hm-alumni-img {
    /* Clip inner image when it scales */
    overflow: hidden;
}
/* Smooth hover zoom for alumni images */
.alumni-container .hm-alumni-img img {
    display: block;
    transform-origin: center center;
    transition: transform 0.35s ease;
}
.alumni-container:hover .hm-alumni-img img {
    transform: scale(1.06);
}
.hm-alumni-video {
    /* Clip poster when it scales */
    overflow: hidden;
}
.hm-alumni-video .yt-poster {
    display: block;
    transform-origin: center center;
    transition: transform 0.35s ease;
    will-change: transform;
}
.hm-alumni-video:hover .yt-poster {
    transform: scale(1.06);
}
.alumni-link-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
}
.hm-alumni-btn {
    transition: transform 0.25s ease;
}
.alumni-container:hover .hm-alumni-btn {
    transform: rotate(90deg);
}
/* Remove generic currentColor rule to prevent other text inheriting color */

/* Remove card shadow on hover for degree blocks */
.degree-block,
.degree-block-micro {
    transition: box-shadow 0.2s ease;
}
.degree-block:hover,
.degree-block-micro:hover {
    box-shadow: none !important;
}

/* Scroll reveal base styles */
.reveal-tile {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 500ms ease, transform 500ms ease;
    will-change: opacity, transform;
}
.reveal-tile.is-visible {
    opacity: 1;
    transform: none;
}
	
	.wp-block-list li{
		font-size:1.4em;
		margin-bottom: 20px;
	}
	.current_page_item{
		background-color: #D59D10!important;
		color:#fff;
	}
	/* logo and menu area */
	header{
		height:70px;
		display: flex;
		z-index:2;
	}
	/* header div{
		flex-direction: column;
		flex-flow: column;
		height:100%;
	} */
	.head-logo{
		-ms-flex-align: start;
		width:25%;
		display: flex;
		justify-content:flex-start;
		flex-wrap: wrap;
		flex-grow: 1;
		align-items: flex-start;
		z-index: 2;
		/* text-shadow: 1px 1px #424242; */
		padding-left: 40px;
		margin-top: 16px;
	}
	.head-logo-home{
		-ms-flex-align: start;
		width:25%;
		display: flex;
		justify-content:flex-start;
		flex-wrap: wrap;
		flex-grow: 1; /* Keep flex-grow for .head-logo-home as it's not used for the logo in home2.php */
		align-items: flex-start;
		z-index: 2;
		/* text-shadow: 1px 1px #424242; */
		padding-left: 40px;
		margin-top: 20px;
	}
	.head-logo-cta{
		-ms-flex-align: start;
		width: auto; /* Allow width to adjust to content */
		display: flex;
		justify-content:flex-start;
		flex-wrap: wrap;
		/* flex-grow: 0; */ /* Ensure no flex-grow */
		align-items: center;
		z-index: 2;
		padding-left: 40px;
	}
	.head-logo-cta .logoW {
		height: 40px;
		width: 75px;
	}
	.head-logo-cta #head-logo {
		font-size: 1.6em;
		color: #fff; /* Set text color to white */
	}
	.head-logo-cta > a {
		display: flex;
		text-decoration: none;
		align-items: flex-end;
	}
	#Microsoft_Omnichannel_LCWidget_Chat_Iframe_Window{
		z-index:2!important;
	}
	.head-logo h5:hover{color:#D59D10;}
	.head-logo h5:visited{color:#000;}
	.head-logo > a{
		display: flex;text-decoration: none;
		flex-flow: row nowrap;
		align-items: flex-end;
		justify-content: flex-end;
	}
	.head-logo-home h5:hover{color:#D59D10;}
	.head-logo-home h5:visited{color:#fff;}
	.head-logo-home > a{
		display: flex;text-decoration: none;
		align-items: flex-end;
	}
	.logo-main{align-self: flex-end;justify-self: flex-end;margin-bottom: 0;}
	.logoW{height:40px;width:75px;}
	.logoW-menu{height:35px;width:65px;}

	.head-logo-home h5{color:#fff;}
	.head-logo h5{
		font-size:1.6em;
		color: #000;		
	}
	.head-area{
		width:30%;
	}
	button:hover{cursor: pointer;}
	.head-menu-close{
		display: block;
		position: absolute;
		top:0;
		right:0;
		height:60px;
		width:60px;
		z-index:99999;
		content-visibility: visible;
		margin-top: 15px;
		margin-right: 20px;
		cursor: pointer;

	}
	.head-menu-close > h3{color:#fff!important;font-size:2.6em;}
	.head-menu-close > h3:hover{color:#D59D10!important;}
	.head-menu-area{
		z-index: 4;
		-ms-flex-align: end;
		width:200px;
		/* height set further down in responsive blocks */
		display: flex;
		justify-content: flex-end;
		background-color: #181818;
		border-bottom:1px dashed rgb(89, 89, 89);
		border-left: 1px dashed rgb(89, 89, 89);
		transition: width 0.5s ease-in-out, background-color 0.4s ease, opacity 0.4s ease;
		border-bottom-left-radius: 5px;
	}

/* Landing page header: always fixed at top */
#landing header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  overflow: hidden;
}

/* Scroll down: dim buttons + menu, hide logo */
#landing header.scrolled-down .cta-menu-item.cta-schedule a,
#landing header.scrolled-down .cta-menu-item.cta-contact a {
  background-color: rgba(24, 24, 24, 0.45);
}
#landing header.scrolled-down .cta-menu-item.cta-apply a {
  background-color: rgba(213, 157, 16, 0.45);
}
#landing header.scrolled-down .head-menu-area {
  background-color: rgba(24, 24, 24, 0.45);
}
#landing header.scrolled-down .head-logo-cta {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
#landing header .head-logo-cta {
  opacity: 1;
  transition: opacity 0.4s ease;
}
/* Restore hover effects in scrolled-down mode */
#landing header.scrolled-down .cta-menu-item.cta-schedule a:hover,
#landing header.scrolled-down .cta-menu-item.cta-contact a:hover {
  background-color: #fff;
  color: #181818;
}
#landing header.scrolled-down .cta-menu-item.cta-apply a:hover {
  background-color: #ffcc00;
  color: #181818;
}
#landing header.scrolled-down .head-menu-area:hover {
  background-color: #181818;
}

/* Sticky header: appears on scroll up */
header.sticky-menu{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1001;
}

/* Hide logo when header is sticky */
header.sticky-menu .head-logo,
header.sticky-menu .head-logo-home,
header.sticky-menu .head-logo-cta{
  visibility: hidden;
}
	
	.logoH{
		height: 50px;
		width:auto;
	}	
	.cta-menu {
		display: flex;
		gap: 20px; /* Set gap between buttons */
		/* Reserve CTA area height to avoid shifts during toggles */
		min-height: 52px;
		justify-content: center; /* Center buttons within this container */
		flex-grow: 1; /* Allow cta-menu to take up remaining space */
		margin: 0 auto; /* Add margin auto to attempt centering */
		align-self: flex-start; /* Align this item to the top */
		height: 100%;
		padding-top: 0;
		margin-right: 50px;
		z-index:2;	
	}
	.cta-menu-item a {
		display: block;
		padding: 15px 20px;
		text-decoration: none;
		font-size: 1em; /* Adjust font size as needed */
		text-align: center;
		transition: background-color 0.3s ease, color 0.3s ease, padding 0.3s ease; /* Add padding to transition */
		position: relative; /* Keep position relative if needed for other styling, or revert if not */
		height: auto; /* Keep auto height */
		border-top-left-radius: 0;
		border-top-right-radius: 0;
		border-bottom-left-radius: 5px; /* Ensure bottom radius is kept */
		border-bottom-right-radius: 5px; /* Ensure bottom radius is kept */
		font-weight: bold; /* Keep bold text */
  	}
	.cta-menu-item a::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 0;
		z-index: -1;
		border-bottom-left-radius: 5px;
		border-bottom-right-radius: 5px;
		transition: height 0.3s ease; /* Animate height */
	}

	.cta-menu-item.cta-schedule a::after,
	.cta-menu-item.cta-contact a::after {
		background-color: #181818; /* Dark background for pseudo-element */
	}

	.cta-menu-item.cta-apply a::after {
		background-color: #D59D10; /* Yellow background for pseudo-element */
	}

	.cta-menu-item a:hover::after {
		height: 20px; /* Expand pseudo-element downwards on hover */
	}

	.cta-menu-item.cta-schedule a,
	.cta-menu-item.cta-contact a {
		background-color: #181818;
		color: #fff;
		border: none;
		transition: background-color 0.4s ease, color 0.3s ease, opacity 0.4s ease, padding 0.3s ease;
	}

	.cta-menu-item.cta-schedule a:hover,
	.cta-menu-item.cta-contact a:hover {
		background-color: #fff; /* White background on hover */
		color: #181818; /* Dark text on hover */
	}

	.cta-menu-item.cta-apply a {
		background-color: #D59D10;
		color: #181818;
		border: none;
		transition: background-color 0.4s ease, color 0.3s ease, opacity 0.4s ease, padding 0.3s ease;
	}

	.cta-menu-item.cta-apply a:hover {
		background-color: #ffcc00; /* Darker yellow on hover */
		color: #181818; /* Dark text on hover */
		padding: 15px 20px 22px 20px; /* Increase padding bottom by 10px */
	}
	.expanded{
		width:80%;transition:width 0.5s ease-in-out;opacity: 1; 	
	}
	.shrink{width:200px;transition:width 0.5s ease-out; }
	.shrink-hide{opacity:0;}
	.btn-menu-hoverlinks{
		display: flex;
		flex-flow: row nowrap;
		gap:20px;
		align-items: center;
		width:87%;
		margin-left: 20px;
		margin-right: 40px;
		overflow: hidden;
	}
	#btn-menu-h5{text-align: center; margin: 0 60px 0 50px;justify-self: center; }
	#btn-menu-h5:hover{color:#D59D10;}
	.btn-menu-open{color:#fff;}
	.btn-menu-hoverlinks > a{
		color:#fff!important;
		border:1px dashed #fff;
		border-radius: 5px;
		padding: 10px 20px 10px 20px;
		flex-grow:1;
		text-align: center;
		text-decoration: none;
		animation: show 2s ease-in-out forwards;
		font-size:0.9em;
		height: auto;
	}
	.btn-menu-hoverlinks > a:visited{text-decoration: none;color:#fff;}
	.btn-menu-hoverlinks > a:hover{color:#000!important;background-color: #D59D10;text-decoration: none;}	  
	.head-menu-area:hover{background-color: #000;cursor: pointer;}
	.head-menu-area h5{
		font-size: 1.5em;
		align-self: center;
		justify-self: center;
		color: #fff;
		display: flex;
		justify-self: center;
		align-self: center;
	}
	/****** menu layer *****/
	.menu-layer{
		background-color: #000;
		position: sticky;
		top:0;left:0;
		height: 100vh;
		width:100%;
		z-index: 98;
		opacity: 0.99;	
		display: flex;
		flex-direction: column;
		padding-top: 0;
	}
	.mainmenu{
		height:calc(90% - 20px);
		width:100%;
		flex: 1;
		min-height: 0;
		overflow: hidden;
	}
	.menu-footer{
		/* height:10%; */
		flex-shrink: 0;
	}
	/* Lock menu social icons to viewport units so they don't grow on zoom */
	#menu-layer .footer-social div{
		width: 4.5vh;
		height: 4.5vh;
		min-width: 30px;
		min-height: 30px;
	}
	#menu-layer .footer-social{
		gap: 1.4vh;
	}
	#menu-layer .footer-social img{
		width: 60%;
		max-width: 3vh;
	}
	
	.mainmenu-logo{
		content-visibility: visible;
		visibility: visible;display: flex;
		justify-content:flex-start;
		flex-wrap: wrap;
		flex-grow: 1;
		align-items: flex-start;
		z-index:9999;
		height:60px;
		margin-left: 40px;
		margin-top: 20px;
	}
	.mainmenu-logo h5{color:#fff;font-size:1.6em;}
	.mainmenu-logo h5:hover{color:#D59D10;}
	.mainmenu-logo h5:visited{color:#000;}
	.mainmenu-logo > a{
		display: flex;text-decoration: none;
		align-items: flex-end;
	}
	/* .mainmenu-logo h5{
		transform: rotate(-90deg);
	} */
	.menu-borders{
		border-left:1px dashed white;
		width:2vw;
		min-height:40%;
		max-height: 100%;
		align-self: center;
		justify-self: center;
		border-top: 1px dashed white;
		border-bottom:1px dashed white;
		display: flex;
		flex-flow: row wrap;
		flex-grow:1;
		content-visibility: hidden;
		display: none;
	}
	.menu-borders div{
		border-bottom:1px dashed white;
		width:100%;
	}
	.menulinks{
		color:#FFF;
		display: flex;
		flex-flow: row wrap;
		align-self: center;
		justify-content: center;
		align-items: center;
		padding-left: 0;
		height: 85%;
		text-align: center;
		overflow-y: auto;
		scrollbar-width: none; /* Firefox */
		-ms-overflow-style: none; /* IE/Edge */
	}
	.menulinks::-webkit-scrollbar{
		display: none; /* Chrome/Safari */
	}
	.menulinks ul{
		/* content-visibility: hidden; */
		margin: 0;padding:0 40px 0 40px;
		display: flex;
		align-self:flex-start;
		justify-self: center;
		width:100%;
		list-style-type:none;
		margin-bottom: 20px;
	}
	.menulinks > li{
		width:100%;
		font-size:3vh;
		font-weight: bold;
		align-self: center;
		list-style-type: none;
	}
	/******** menu styling ********/
	.sublink-dep{cursor: pointer;}
	/* menu links */
	a.dep-link:link, a.dep-link:visited{
		text-decoration: none;
		color:#fff;
	}
	/* menu hover colors */
	a.link-finearts:hover{color:#B22325;}
	a.link-design:hover{color:#800080;}
	a.link-infotech:hover{color:#1476B8;}
	a.link-fashion:hover{color:#228C22;}
	a.link-creativearts:hover{color:#F26A23;}
	a.link-general:hover{color: #D59D10;}
	.link-social:hover{background-color: #D59D10;color:#000;}


	.menu-sublinks-dep-off{
		content-visibility:hidden;animation: hide 0.7s ease-out forwards;
	}

	.hide{content-visibility: visible!important;opacity: 1;}
	.menu-sublinks{
		/* content-visibility: hidden; */
		display: flex;
		flex-flow:row wrap;
	}
	.menu-sublinks > li{
		list-style-type: none;
		flex-basis:100%;
		font-size:1.5em;
		font-weight: lighter;
		margin-top:10px;
	}
	.active{background-color: #272727!important;color:#fff!important;}
	.btn-sm{width:50px!important;}
	.filter-btn-finearts:hover{color:#fff;background-color: #B22325;cursor: pointer;}
	.filter-btn-design:hover{color:#fff;background-color: #800080;cursor: pointer;}
	.filter-btn-fashion:hover{color:#fff;background-color: #228C22;cursor: pointer;}
	.filter-btn-infotech:hover{color:#fff;background-color: #1476B8;cursor: pointer;}
	.filter-btn-creativearts:hover{color:#fff;background-color: #F26A23;cursor: pointer;}
	.filter-btn-other:hover{color:#fff;background-color: #D59D10;cursor: pointer;}

	/* Active Department Button Styles */
		.filter-btn.active.filter-btn-finearts {
			background-color: #B22325 !important; /* Red for Fine Arts */
			color: #fff !important;
		}

		.filter-btn.active.filter-btn-design {
			background-color: #800080 !important; /* Purple for Design Innovation */
			color: #fff !important;
		}

		.filter-btn.active.filter-btn-infotech {
			background-color: #1476B8 !important; /* Blue for Information Technology */
			color: #fff !important;
		}

		.filter-btn.active.filter-btn-fashion {
			background-color: #228C22 !important; /* Green for Fashion + Sustainability */
			color: #fff !important;
		}

		.filter-btn.active.filter-btn-creativearts {
			background-color: #F26A23 !important; /* Orange for Creative Arts Therapies */
			color: #fff !important;
		}
	.filterDiv{
		display: none; /* Hidden by default */
	}
	.showFilter{display: flex!important;}
	.show {
		animation: show 0.5s ease-in forwards;
	  }
	  
	  .hide {
		animation: hide 0.5s ease-out forwards;
	  }
	@keyframes show {
		0% {
		  content-visibility: hidden;
		  opacity: 0;
		}
	  
		100% {
		  content-visibility: visible;
		  opacity: 1;
		}
	  }
	  
	  @keyframes hide {
		0% {
		  content-visibility: visible;
		  opacity: 1;
		}
	  
		100% {
		  content-visibility: hidden;
		  opacity: 0;
		}
	  }
	
	/* hero heading */
	.landing-hero-primary{
		margin-top: 10vh;
		height: 15vh;
		margin-bottom: 4vh;
		display: flex;
		margin-bottom: 20px;
		background-color: #00000080;
	}
	.landing-hero-primary > h1{
    margin-left:auto;
    margin-right: auto;
    color:#fff;
    text-shadow: 0 2px 6px rgba(0,0,0,0.45), 0 6px 24px rgba(0,0,0,0.35);
    text-align: center;
    z-index: 2;
    position: relative;
		
    align-items: flex-end;
		justify-items: center;
		/* animation: color-change 20s linear infinite; */
	}
	@keyframes color-change {
		0% { color: #000; }
		20% { color: #000; }
		40% { color: #fff; }
		70% { color: #fff; }
		100% { color: #000; }
	  }
	/* landing main */
	.landing-main{
		width:100%;
		min-height:47vh;
		padding-top: 10px;
	}
	.landing-main h6 {
		color:#fff
	}
	/* .landing-main-menu{
		text-align: center;
		margin-left:10px;
		margin-right: 10px;
		z-index: 2;
		position: relative;
	}
	.landing-main-menu > div{
	
		width:200px;
		margin-left: auto;
		margin-right: auto;
		
	} */
	.landing-main-menu{
		text-align: center;
		z-index: 2;
		position: relative;
		display: flex;
		flex-flow: row nowrap;
		width:100%;
		align-items: center;
  		justify-content: center;
		margin-bottom: 18px;
	}
	.landing-main-menu > div{
		width:200px;
		align-self: center;
		margin: 5px;
	}
	.landing-menu-selected{  
		border-style: groove;
		border-color:#fff;  
		border-width: 0;
		border-radius: 5px;
		background-color: rgba(16, 16, 16, 0.92);
		box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.16);
	}
	.landing-menu-selected:hover{background-color: rgba(16, 16, 16, 1);cursor: pointer;}
	.landing-menu-unselected{
		border-style: dashed;
		border-color:#fff;  
		border-width: 1px;
		border-radius: 5px;
		background-color: #0000002b;
		box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.30);
	}
	.landing-menu-unselected:hover{background-color: rgba(16, 16, 16, 0.7);cursor: pointer;}
	.landing-road{
		text-align: center;
		margin-left:14vw;
		margin-right: 14vw;
		border-width: 0;
		border-top:0 dashed rgba(255, 255, 255, 0.7);
		border-left:0 dashed rgba(255, 255, 255, 0.7);
		border-right:0 dashed rgba(255, 255, 255, 0.7);
		z-index: 2;
		position: relative;
		display: flex;
		flex-flow: row;
	}
	.landing-road > div{
		height: 20px;
		width:25%;
		border-right: 0 dashed rgba(255, 255, 255, 0.7);
	}
	.road-fix{
		width:1px!important;
		height:30px;
		border-left:0 dashed rgba(255, 255, 255, 0.7);
		align-self: center;
		justify-self: center;
	}
	
	.landing-main-pathways{
		border:0 solid black;
		display: flex;
		margin-left:6vw;
		margin-right: 6vw;
		flex-direction: row;
		column-gap: 30px;
		content-visibility: auto;
		margin-bottom: 20px;	
	}
	
	.landing-main-pathways > div{
		width:25%;
		padding-bottom: 20px;
	}
 	/****** PATHWAYS ********/
	.pathway-wrapper{
		border-radius: 5px;
		color:#ffffff;
		text-align: center;
		border:1px!important;
		padding:10px;
		padding-top: 20px;
		padding-bottom: 25px;
		min-height:10vh;
		background: rgba(16, 16, 16, 0.9) ;
		transition: 1s;
		box-shadow: 4px 8px 8px 4px rgba(0, 0, 0, 0.26);
	}

    /* Force pathway UI to use GT Walsheim Pro font */
    .pathway-wrapper,
    .pathway-wrapper .pathway-title,
    .pathway-wrapper .pathway-desc,
    .pathway-wrapper .pathway-tags,
    .pathway-wrapper .pathway-tag,
    .pathway-wrapper .pathway-arrow {
        font-family: "GT Walsheim Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    }
	.pathway-wrapper:hover .pathway-arrow{
		border-color: #fff;
		border:1px dashed;transition: all 0.5s;
	 }
	 .pathway-wrapper:hover .arrow-selected{
		border-color: #fff;
		color: #fff;
		border:1px dashed;transition: all 0.5s;
	 }
	/*** Categories ***/
	.designino-bg{
		background-color: #800080;
		border:0!important;
	}
	.finearts-bg{
		background-color: #B22325;
		border:0!important;
	}
	.infotech-bg{
		background-color: #1476B8;
		border:0!important;
	}
	.fashion-bg{
		background-color: #228C22;
		border:0!important;
	}
	.creativearts-bg{
		background-color: #F26A23;
		border:0!important;
	}
	#pathway-bg-finearts{
		cursor: pointer;
	}
	#pathway-bg-finearts:hover{
		background-color: #b22325;
	}
	#pathway-bg-design{
		cursor: pointer;
	}
	#pathway-bg-design:hover{
		background-color: #800080;
	}
	#pathway-bg-fashion{
		cursor: pointer;
	}
	#pathway-bg-fashion:hover{
		background-color: #228c22;
	}
	#pathway-bg-infotech{
		cursor: pointer;
	}
	#pathway-bg-infotech:hover{
		background-color: #1476b8;
	}
	#pathway-bg-creativearts{
		cursor: pointer;
	}
	#pathway-bg-creativearts:hover{
		background-color: #f26c23;
	}
	/** ADD BACKGROUND COLORS HERE ***/
	.bold{
		font-weight: bold;
	}
	.pathway-title{
		font-size: 1.2em;
		font-weight: bold;
		padding-bottom: 10px;
		margin-top: 0;
		height:50px;
	}
	.pathway-arrow{
		width:45px;
		height:45px;
		margin-left: auto;
		margin-right: auto;
		border-radius: 50%;
		margin-bottom: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

    /* Smooth expand/collapse for pathway expanded sections */
    [id^="pathway-expanded-"] {
        display: block;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transform: translateY(-4px);
        transition: max-height 350ms ease, opacity 250ms ease, transform 250ms ease;
        will-change: max-height, opacity, transform;
    }
    /* Open state: applies when JS adds .pathway-expanded or .pathway-expanded-finearts */
    [id^="pathway-expanded-"].pathway-expanded,
    [id^="pathway-expanded-"].pathway-expanded-finearts {
        max-height: 420px; /* adjust if content taller */
        opacity: 1;
        transform: none;
        content-visibility: visible; /* override any inherited hidden */
    }

    /* Desktop: allow the tags block inside expanded pathway panels to grow with content */
    [id^="pathway-expanded-"] .pathway-tags{
        height: auto;
        max-height: none;
        overflow: visible;
    }

    /* Ensure collapse animation remains visible even when JS adds .turn-off */
    [id^="pathway-expanded-"].turn-off {
        visibility: visible;
        content-visibility: auto;
        display: block;
    }

    /* Keep arrow white when selected/expanded */
    .arrow-selected {
        border-color: #fff !important;
        color: #fff;
        border: 1px dashed !important;
    }

    /* Smooth arrow rotation on pathway hover */
    .pathway-arrow .arrow {
        display: inline-block;
        transition: transform 0.25s ease;
    }
    /* Rotate +90deg from the initial -45deg (right arrow) to 45deg */
    .pathway-wrapper:hover .pathway-arrow .arrow {
        transform: rotate(45deg);
    }
    /* Scroll reveal animation */
    .reveal {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 600ms ease, transform 600ms ease;
        will-change: opacity, transform;
    }
    .reveal.revealed {
        opacity: 1;
        transform: none;
    }
    @media (prefers-reduced-motion: reduce) {
        .reveal {
            opacity: 1 !important;
            transform: none !important;
            transition: none !important;
        }
    }
	/****** border-colors****/
	.border-finearts{border-color: #B22325!important;}
	.border-designinno{border-color: #800080!important;}
	.border-fashion{border-color: #228C22!important;}
	.border-infotech{border-color: #1476B8!important;}
	.border-creativearts{border-color: #F26A23!important;}
	.border-other{
		border-color: #D59D10!important;
	}
	.border-white{border-color:#ffffff!important;}

/* Alumni hover overlay (match student work student-author-overlay style) */
.hm-alumni-wrapper .alumni-container .hm-alumni-img{
    position: relative;
    overflow: hidden;
}
.hm-alumni-wrapper .alumni-container .hm-alumni-img img{
    display:block;
    width:100%;
    height:auto;
    transition: filter 0.25s ease, transform 0.25s ease;
}
.hm-alumni-wrapper .alumni-container .hm-alumni-img .student-author-overlay{
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    text-align: center;
    color: #fff;
    font-weight: 700;
    font-size: 1.1em;
    text-transform: uppercase;
    text-shadow: 0 2px 8px rgba(0,0,0,0.8);
    background: rgba(0,0,0,0.25);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
    z-index: 2;
}
.hm-alumni-wrapper .alumni-container:hover .hm-alumni-img img{
    filter: blur(4px) brightness(0.7);
    transform: scale(1.03);
}
.hm-alumni-wrapper .alumni-container:hover .hm-alumni-img .student-author-overlay{
    opacity:1;
}
	.border-black{border-color:#000!important;}
	/***** background colors ******/
	.arrow-finearts{background-color: #B22325!important;}
	.arrow-designino{background-color: #800080!important;}
	.arrow-fashion{background-color: #228C22!important;}
	.arrow-infotech{background-color: #1476B8!important;}
	.arrow-creativearts{background-color: #F26A23!important;}
	.arrow-other{background-color: #D59D10!important;}
	.arrow-gray{background-color: #979797!important;}
	.txt-finearts{color: #B22325;}
	.txt-designinno{color: #800080;}
	.txt-fashion{color: #228C22;}
	.txt-infotech{color: #1476B8;}
	.txt-creativearts{color: #F26A23;}
	.txt-black{color:#000!important;}
	.txt-other{color: #D59D10;}
	.landing-hero-secondary h4 a.txt-other {
  color: #D59D10 !important; /* Gold color */
}

.landing-hero-secondary h4 a.txt-other:link,
.landing-hero-secondary h4 a.txt-other:visited {
  color: #D59D10 !important; /* Gold color */
}
	.txt-white{color:#fff;}
	.arrow-selected{
		background-color: #fff!important;
		color:black;
	}
	
	/**** border shadow ***/
	.border-shadow{
		border-radius:3px;
		box-shadow:0 2px 4px 0 rgba(0,0,0,0.16);
		border:1px solid;
		border-color: #dcdcdc;
	}
	
	
	.arrow {
		border: solid;
		border-width: 0 4px 4px 0;
		display: inline-block;
		padding: 6px;
		margin-right:2px;
	  }
	  .arrow-small {
		border: solid;
		border-width: 0 3px 3px 0;
		display: inline-block;
		padding: 6px;
		margin-right:2px;
	  }
	  .arrow-big {
		border: solid;
		border-width: 0 6px 6px 0;
		display: inline-block;
		padding: 6px;
		margin-right:2px;
		color:#000;
	  }
	.right {
		border-color:#fff;
		transform: rotate(-45deg);
		-webkit-transform: rotate(-45deg);
	  }
	.arrowDep{
		transform: rotate(-45deg);
		-webkit-transform: rotate(-45deg);
		height:8px;
		width:8px;
		margin-right:4px;
		margin-top: 4px;
	}
	.down {
		transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
	  }
	.pathway-desc{
		font-size:0.6em;
		margin: 0 15px 0 15px;
	}
	.pathway-tags{
		height: 100%;
		display: flex;
		flex-direction:row;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		font-size:1.3em;
		column-gap:8px;
		margin-bottom: 20px;
		margin-left: 10px;
		margin-right: 10px;
	}
    /* Desktop: allow pathway tags area to expand with content while still wrapping nicely */
    #landing-main-pathways .pathway-tags{
        height: auto;
        flex: 0 0 auto;
        overflow: visible;
        align-items: flex-start;
        align-content: flex-start;
        flex-wrap: wrap;
    }
	.pathway-tag{
		padding:10px;
		border:1px dashed white;
		border-radius: 5px;
		margin-top: 10px;
		font-size: 0.7em;
		flex-grow: 1;
	}
	/* landing hero secondary */
	.landing-hero-secondary{
		margin-top: 0; /* Avoid layout shift from negative margin */
		background: rgba(16, 16, 16, 0.5); 
		color:#fff;
		min-height: 64px; /* Fixed height to stabilize layout */
		padding-left: 10vw;
		padding-right: 10vw;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index:1;
		position: relative;
		padding-bottom: 20px;
		padding-top: 20px;
	}
	.landing-btns{
		display:flex;
		gap:15px;
		flex-flow: row wrap;
		flex: 1 1 auto;
		padding: 40px 0;
		min-height: auto; /* override earlier min-height: 12vh to allow full growth */
		justify-content: center;
		align-items: center;
		z-index: 1;
	}
	.landing-btns > div{
		border: 0 solid black;
		flex-direction: row;  
		justify-self: center;
		align-self: center;
		z-index: 1;
	}
	/******* second layer of landing ***/
	/******* second layer ***/
	.landing-layer2{
		position:absolute;
		left: 0;
		top:0;
		display:flex;
		z-index: 1;
		width:100%;
		min-height:100%;
		height: auto;
		opacity: 0.2;flex-grow:1;
	}
	.landing-degree-layer{
		display: flex;
		margin-left:8vw;
		margin-right: 8vw;
		flex-direction: row;
		column-gap: 30px;
		position: relative;
		z-index: 2;
		border-top:5px solid #00000083;
	}
	.landing-degree-layer > div{
		width:20%;
		text-align: center;
		background-color: #FFF;
		border-radius: 5px;
		color:#000;
		text-align: center;
		padding:10px;
		padding-top: 18px;
		padding-bottom: 18px;
		font-size:1.1em;
		font-weight: bold;border:0px!important;
	}
	.landing-degree-layer2{
		position: relative;
		z-index: 2;
		margin-left:8vw;
		margin-right: 8vw;
		display: flex;
		flex-direction: row;
		gap:30px;
		min-height:55vh;
		flex-wrap: wrap;
		margin-top: 40px;
		padding-bottom:40px;
	}
	.landing-degree-layer2 > div:hover{background-color: #ffffffe6;border:0px solid #D59D10}
	.landing-degree-layer2 > div{
		flex-basis: calc(20% - 24px);
		background-color: #FFF;
		min-height:18vh;
		box-sizing: border-box;
		display: none;
		gap:5px;
		flex-flow: row wrap;
		align-items: flex-start;
		justify-content: flex-start;
		box-sizing: border-box;
	}
	.hm-degree-link a{color:#000;text-decoration: none;}
	.hm-degree-link a:visited{color:#000;}
	.hm-degree-link a:hover{color:#D59D10;}
	.landing-degree-layer2 p{
		font-size:1.2em;
		width:100%;
	}
	.landing-degree-layer2 h6{
		color:#000;
		margin-top: 0;
		padding-top: 0;
		padding-bottom: 20px;
		width:100%;
		font-size:1.4em;
		min-height: 40px;
	}
	.degree-duration{
		margin-top: 10px;
		width:80%;
	}
	.degree-btn{
		width:20%;
		margin-top: 20px;
	}
	/******* second layer ends ****/
	.pro-img{
		cursor: pointer!important;
		/* height: 65vh; */
		object-fit: cover;
		overflow: hidden;
	}

	.pro-img img{
		object-position: center center;object-fit: cover;
		align-self: center;
		/* transform: translateY(-15%); */
	}
	/*** student work page ***/
	.student-work-landing{
			min-height: 60vh;		
			margin-bottom: 0;
			position: relative;
			margin-top: 20px;
			flex-basis: 100%;
		}
	.student-work-landing > h1{margin:0 0 20px 0}
	.student-work-landing > span{font-size:1em;}	
	/****** home student work *****/

	.hm-student{
		padding-left: 6vw;
		padding-right: 6vw;
		padding-top: 20px;
	}
	.hm-student h1{
		border-bottom:2px solid gray;
		margin-bottom: 25px;
	}
	.hm-student-wrapper{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 20px;
		box-sizing: content-box;
		margin-top: 20px;
	}
	/* student box **/
	
	.hm-student-box{
		flex-basis:calc(33.3% - 15px);
		display: flex;
		flex-flow:row wrap;
		border-radius:6px;
		align-items: flex-start;
		background-color: #fafafa;
	}
	.hm-student-box p{
		margin-left: 20px;
		margin-right: 20px;
	}
	.hm-student-box h3{
		margin-left: 20px;
		margin-right: 20px;
	}
	.hm-studnet-box-qual{
		width:100%;margin: 0 20px 0 20px;
	}
	.hm-student-box-img{
		min-height:400px;
		width:100%;
		margin-bottom: 5px;
		overflow: hidden;
		object-fit: cover;
	}
	.hm-student-box-img img {
			object-fit:cover;
			object-position: top ;
			border-radius: 6px;
			height:400px!important;
			width:100%;
	  }
	.hm-student-box-title{
		width:100%;
		align-self: flex-start;
		margin-bottom: 5px;
	}
	.hm-student-box-title > h5{margin-left: 20px;font-size:1.7em;margin-top: 10px;}
	.hm-student-box-dep{
		margin-bottom: 20px;
		/* max-height:50px; */
		align-self: flex-start;}
	.hm-student-box-author{
		width:100%;
		text-align: right;
		display: flex;
		align-self: flex-start;
		margin-bottom: 5px;
	}
	.hm-student-box-tag{
	   width:100%;  
	   float:left;align-self: flex-start;
	   margin-bottom: 10px;
	}
	.hm-student-box-p{
		width:100%;
		display: flex;
		min-height: 100px;
		padding-top: 0;
		padding-bottom:0;align-self: flex-start;
	}
	.hm-student-box-p p{font-size: 1.4em;margin-bottom: 10px;}
	.hm-student-box-author p{font-size:1.2em;}
	.hm-student-box-btn{
		float:right;
		width:100%;
		display: flex;
		justify-content: flex-end;
		align-items: flex-end;
		padding-right: 30px;
		align-self: flex-end;
		margin-bottom: 20px;
		content-visibility:hidden;
	} 
	.hm-student-box-btn a{align-self: flex-end;justify-self: flex-end;}
	
.hm-alumni-video{
	min-height:60vh;
	position: relative;
	margin-top: 20px;
	margin-left: 6vw;
	margin-right: 6vw;
	margin-bottom:40px;
	aspect-ratio: 16 / 9;
	background: #000;
	overflow: hidden;
}
.hm-alumni-video iframe{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
}
.hm-alumni-video .yt-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 0;
    cursor: pointer;
    z-index: 5; /* above any headings inside container */
}
.hm-alumni-video .yt-poster::before,
.hm-alumni-video .yt-poster::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
/* circle */
.hm-alumni-video .yt-poster::before {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: rgba(0,0,0,0.45);
    box-shadow: 0 2px 12px rgba(0,0,0,0.35), inset 0 0 0 2px rgba(255,255,255,0.35);
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
/* triangle */
.hm-alumni-video .yt-poster::after {
    margin-left: 4px; /* slight right shift to center triangle visually */
    width: 0;
    height: 0;
    border-left: 26px solid #fff;
    border-top: 16px solid transparent;
    border-bottom: 16px solid transparent;
}

/* Hover/focus: turn circle YouTube red */
.hm-alumni-video:hover .yt-poster::before,
.hm-alumni-video .yt-poster:focus-visible::before {
    background: #FF0000;
    box-shadow: none;
}

/* On hover, remove any container shadow as well */
.hm-alumni-video:hover,
.hm-alumni-video:focus-within {
    box-shadow: none !important;
    filter: none !important; /* in case shadow is applied via drop-shadow filter */
}
/* Also target when a utility class like border-shadow is present */
.hm-alumni-video.border-shadow:hover,
.hm-alumni-video.border-shadow:focus-within {
    box-shadow: none !important;
    filter: none !important;
}
.hm-alumni-video iframe.video-hidden {
	opacity: 0;
	pointer-events: none;
}
.hm-alumni-video iframe.video-visible {
	opacity: 1;
	pointer-events: auto;
}
	/* .hm-alumni-video div{
		display: flex;
		justify-content: center;
		align-items: center;
	} */
.hm-alumni-video h1{
	position: absolute;
	top:0;
	left:0;
	color:#fff;
	font-size:4em;
	z-index:2;
	text-align: center;
	width:100%;
	padding-top: 5vh;
	text-shadow: 1px 3px #424242;
}
.hm-alumni-wrapper{
	margin-left: 6%;
	margin-right: 6%;
	display: flex;
	flex-flow: row wrap;
	box-sizing: border-box;
	gap: 20px;
}
.hm-alumni-wrapper h1{
	width:100%;
	margin-top: 5vh;
	border-bottom:2px groove gray;
}
.hm-alumni-wrapper > div,
.hm-alumni-wrapper > a{
	flex-basis: calc(33.333% - 15px);
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	box-sizing: border-box;
	background-color: #fafafa;
	padding-bottom: 15px;
}
.hm-alumni-wrapper p{
	padding-left: 20px;
}
/* Student Life: 4-column people grid (reuses alumni card design) */
.sl-people-grid{
	margin-left: 0;
	margin-right: 0;
}
.sl-people-grid > div,
.sl-people-grid > a{
	flex-basis: calc(25% - 15px);
}
.sl-people-grid .hm-alumni-img{
	height: 320px;
}
.hm-alumni-img{
	height:460px;
	overflow: hidden;
	margin-bottom: 15px;
}
.hm-alumni-img img{
	max-inline-size: 100%;
	block-size: auto;
	object-fit: cover;
	object-position: top center;
}
.hm-alumni-name{
	width:100%;
	margin: 0 20px 0 20px;      
}

.alumni-container{
	display: flex;
	flex-flow: row wrap;
}
.hm-alumni-p{
	justify-self: flex-start;
	min-height:70px;
	padding-right: 10px;
}
.hm-alumni-p > p{
	font-size:1.3em;
}
.hm-alumni-main{
	width:100%;
	display: flex;
	flex-flow: row nowrap;
	margin-top: 10px;
	margin-bottom: 10px;
	align-items: center;
	justify-items: center;
}
.hm-alumni-btn{
	height:45px;
	width:45px;
	border-radius: 50%;
	margin-left: 15px;
	display: grid;
	align-self: flex-end;
}
.hm-alumni-btn > i{
	width:2px;
	height: 2px;
	display: flex;
	align-self: center;
	justify-self: center;
}
	.hm-alumni-p{
		justify-self: flex-start;
		min-height:70px;
		padding-right: 10px;
	}
	.hm-alumni-p > p{
		font-size:1.3em;
	}
	.hm-alumni-main{
		width:100%;
		display: flex;
		flex-flow: row nowrap;
		margin-top: 10px;
		margin-bottom: 30px;
		align-items: center;
		justify-items: center;
	}
	.hm-alumni-btn{
		height:45px;
		width:45px;
		border-radius: 50%;
		margin-left: 15px;
		display: grid;
		align-self: flex-end;
	}
	.hm-alumni-btn > i{
		width:2px;
		height: 2px;
		display: flex;
		align-self: center;
		justify-self: center;
	}

	/* news update */
.events-menu{
    min-height: 60px;
    display: flex;
    flex-flow:row nowrap;
    gap: 20px;
    margin-top: 40px;
    margin-bottom: 40px;
}
.events-menu > button{
    font-size:1.1em;
    font-weight: bold;
    flex-grow: 1;
	background-color: #fff;
	border:1px solid;
	border-radius:3px;
	box-shadow:0 2px 4px 0 rgba(0,0,0,0.16);
}
.events-listing{
    display: flex;
    flex-flow: row wrap;
    column-gap:  15px;
    row-gap: 20px;
    align-items: flex-start;
    box-sizing: border-box;
    margin-top: 40px;
    margin-bottom: 40px;
}
.events-listing > div{display: none;}
.event{
    flex-basis: calc(33.333% - 15px);/* cal to make space between*/
    border:1px solid black;
    box-sizing: border-box;
    display: flex;
	min-height: 270px;
    flex-flow: row nowrap;border-radius:3px;
	box-shadow:0 2px 4px 0 rgba(0,0,0,0.16);
	padding-bottom: 20px;
}
.hm-event{
    border:1px solid rgb(212, 212, 212);
    box-sizing: border-box;
    display: flex;
    position: relative; /* allow overlay link */
    min-height: 270px;
    flex-flow: row nowrap;border-radius:3px;
	box-shadow:0 2px 4px 0 rgba(0,0,0,0.16);
	background-color: #fafafa;
	transition: background-color 200ms ease; /* smooth hover darken */
}
.hm-event .hm-event-link{
    position: absolute;
    inset: 0;
    z-index: 1; /* sit above content to catch clicks */
    display: block;
    text-indent: -9999px; /* avoid text flow, if any */
}
.hm-event:hover{ box-shadow: none; background-color: #f0f0f0; }
.hm-event:hover .hm-events-btn{ transform: rotate(90deg); }
/*** events btn ****/
.video-h2{margin: 60px 6vw 0 6vw;font-size:3em;}
.h2-news{margin-top: 0;margin-bottom: 10px;}
.news-content ul li{
	font-size:1.1em;
	font-weight: lighter;margin-bottom: 10px;
}
.news-content ol li{
	font-size:1.1em;
	font-weight: lighter;
	margin-bottom: 10px;
}
.news-content ol {
	margin-bottom: 20px;
}
.news-content ul {
	margin-bottom: 20px;
}

.news-single{
	display: flex;
	flex-flow:row wrap;
	width:100%;
	margin-top: 40px;
}
.news-small-img{
	width: 80px;
	height: 80px;
}
.news-single-heading{width:100%;}
.news-single-img{
	flex-basis:calc(40% - 40px);
	margin-right: 40px;
	margin-bottom: 20px;
	margin-top: 15px;
}
.news-single-editor{
	flex-basis:60%;
	margin-top: 10px;
    overflow-x: hidden; /* guard against accidental overflow */
}
.news-single-editor img{
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    display: block; /* avoid inline gaps */
}
.news-single-editor figure,
.news-single-editor .wp-block-image{
    max-width: 100%;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}
.news-single-editor .wp-block-image img{
    max-width: 100%;
    width: 100%;
    height: auto;
}
.news-single-editor iframe,
.news-single-editor video{
    max-width: 100%;
    width: 100%;
    
}
/* Normalize Gutenberg alignment classes inside the article body */
.news-single-editor .alignwide,
.news-single-editor .alignfull,
.news-single-editor .wp-block-image.alignwide,
.news-single-editor .wp-block-image.alignfull,
.news-single-editor figure.alignwide,
.news-single-editor figure.alignfull{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.news-single-editor .wp-caption,
.news-single-editor figure.wp-caption{
    max-width: 100%;
}
.news-single-editor h2{margin-top: 0;}
.news-single-editor ul li{font-size:1.5em;margin-bottom: 5px;}
.news-single-editor ol li{font-size:1.5em;margin-bottom: 5px;}
.news-single-editor  a{color:#000}
.news-single-editor  a:hover{color:#D59D10}
/****** news listing *****/
.news-listing{
    display: flex;
    flex-flow: row wrap;
    column-gap:  15px;
    row-gap: 20px;
    justify-content: space-between;
    box-sizing: border-box;
    margin-top: 40px;
    margin-bottom: 40px;
}
.news-listing > div{display: none;}
.news-link a{text-decoration: none;color:#000;}
.news-link a:hover{color:#D59D10;}
.news{
    min-height:210px;
    flex-basis: calc(33.333% - 12px);/* cal to make space between*/
    background-color: #fafafa;
    position: relative; /* for overlay link */
    transition: background-color 200ms ease; /* smooth hover darken */
    overflow: hidden; /* clip image zoom within card */
    box-sizing: border-box;
    display: flex;
    flex-flow: row wrap;border-radius:3px;
	box-shadow:0 2px 4px 0 rgba(0,0,0,0.16);
	border:1px solid;
	border-color: #dbdbdb;
	flex-grow:1;
	align-items: flex-start;
	justify-items: flex-start;
	flex-shrink: 1;
	padding-bottom: 40px;
}
.news-self{
    min-height:210px;
    flex-basis: calc(33.333% - 12px);/* cal to make space between*/
    background-color: #fafafa;
    position: relative; /* for overlay link */
    box-sizing: border-box;
    display: flex;
    flex-flow: row wrap;border-radius:3px;
	box-shadow:0 2px 4px 0 rgba(0,0,0,0.16);
	border:1px solid;
	border-color: #dbdbdb;
	flex-grow:1;
	align-items: flex-start;
	justify-items: flex-start;
	flex-shrink: 1;
	padding-bottom: 40px;
}
.news:hover { background-color: #fff; }
.news-self:hover { background-color: #fff; }
/* Additional page-scoped layout tweaks for News & Events */
.newsFull .news-listing{ align-items: stretch; }
/* Border-shadow behavior: present by default, removed on hover */
.newsFull .news-listing .news-self.border-shadow,
.newsFull .events-listing .news-self.border-shadow{
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16);
  border: 1px solid #dbdbdb;
  transition: box-shadow 200ms ease, border-color 200ms ease, background-color 200ms ease;
}
.newsFull .news-listing .news-self.border-shadow:hover,
.newsFull .events-listing .news-self.border-shadow:hover{
  box-shadow: none;
  border-color: #dbdbdb; /* keep 1px border on hover */
}
/* News: title uses department color on hover */
.newsFull .news-listing .news-self.designinno:hover .news-link{ color:#800080; }
.newsFull .news-listing .news-self.finearts:hover .news-link{ color:#B22325; }
.newsFull .news-listing .news-self.infotech:hover .news-link{ color:#1476B8; }
.newsFull .news-listing .news-self.fashion:hover .news-link{ color:#228C22; }
.newsFull .news-listing .news-self.artstherapies:hover .news-link{ color:#F26A23; }
.newsFull .news-listing .news-self.other:hover .news-link{ color:#D59D10; }
/* Events: Default mobile single column, two per row on tablet+ */
.newsFull .events-listing .news-self{ flex-basis: calc(100% - 12px); flex-grow: 0; }
@media (min-width: 768px){
  .newsFull .events-listing .news-self{ flex-basis: calc(50% - 12px); flex-grow: 0; }
}
.newsFull .news-self > h5{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
}
.newsFull .news-self > p.txt-light.txt-small{
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    line-clamp: 3;
    overflow: hidden;
}
.news .news-image, .news-self .news-image{
    height: 280px;
    margin: 10px;
    overflow: hidden; /* constrain zoom */
    width: calc(100% - 20px);
}
.news .news-image img, .news-self .news-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    transition: transform 0.35s ease; /* smooth zoom */
    transform-origin: center center;
}
/* Zoom image when hovering the card, like student work */
.news:hover .news-image img, .news-self:hover .news-image img { transform: scale(1.1); }
.news-self .news-image{ position: relative; }
.news-self .news-image::after{
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 64px;
    background: linear-gradient(to top, rgba(0,0,0,0.5), rgba(0,0,0,0));
    pointer-events: none;
}
.news-self .event-date-label{
    position: absolute;
    right: 14px;
    bottom: 10px;
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.2;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
    z-index: 2;
}
/* Events: turn date label gold on hover */
.newsFull .events-listing .news-self:hover .event-date-label{ color:#D59D10; }
/* Events-only larger image height */
.newsFull .events-listing .news-self .news-image{ height: 400px; }
.news .news-link-overlay, .news-self .news-link-overlay{
    position: absolute;
    inset: 0;
    z-index: 3; /* above date label and other content */
    display: block;
    text-indent: -9999px; /* no visible text */
}
.news > h5{min-height:110px;font-size:1.5em;}

/* Numbered pagination for News */
.news-pagination{ display:flex; justify-content:center; flex-wrap:wrap; margin: 24px 0 40px; width:100%; }
.news-pagination ul{ list-style:none; display:flex; gap:10px; padding:0; margin:0; align-items:center; }
.news-pagination a,
.news-pagination span{ display:inline-flex; align-items:center; justify-content:center; min-width:40px; height:40px; padding:0 12px; border:1px solid #dbdbdb; border-radius:6px; color:#000; text-decoration:none; background:#fff; line-height:1; font-weight:600; transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 160ms ease; }
.news-pagination a:hover{ background:#fff; color:#000; border-color:#bfbfbf; box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
.news-pagination .current{ background:#000; color:#fff; border-color:#000; box-shadow:none; }
.news-self > img{
    /* flex-basis: calc(50% - 20px); */
    overflow: hidden;
    max-height: 320px;
        object-fit:cover;
        object-position: top center;
        margin: 10px;
    
}
.news-self > h5{font-size:1.5em;}
/* Tile title sizing */
.news-self > h5{font-size:1.8em; margin-top: 10px;}
/* Force title and intro to align to top within the flex tile */
.news-self > h5,
.news-self > p { align-self: flex-start; }
.news-quick-info{
    /* flex-basis: calc(50% - 20px); */
    align-items: flex-start;
	display: flex;
	flex-flow:row nowrap;
	width:100%;
	margin-bottom: 10px;
	align-self: flex-start;
	justify-self: flex-start;
}
/* Events: campus/date row full width, 50/50 split */
.event-meta-row{
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 10px
}
.newsFull .event-meta-row{ margin-bottom: 0; }
.event-meta-left,
.event-meta-right{ flex: 0 0 50%; }
.event-meta-left{ text-align: left; }
.event-meta-right{ text-align: right; font-weight: 700; }
.news-tile-date{
	width:50%;
	text-align:right;
}
.news-tile-cat{
	width:50%;
	font-size:1.2em;
}


	/****** news ******/
	
    .hm-newsevents{
        display: flex;
        flex-flow: row wrap;
        padding-left: 6vw;
        padding-right: 6vw;
        padding-top: 5vh;
        gap:40px;
        align-items: flex-start;
    }
    .hm-news-wrapper{
        display: flex;
        flex-flow:row wrap;
        gap:15px;
    }

	.hm-events-wrapper{
		display: flex;
		flex-flow:row wrap;
        gap:15px;
    }
    /* Events-only layout: 2 per row and taller image */
    .hm-events-wrapper .news-self{ flex-basis: calc(50% - 12px); }
    .hm-events-wrapper .news-self .news-image{ height: 400px; }
    /* Events-only: force title and intro to full width rows */
    .hm-events-wrapper .news-self > h5,
    .hm-events-wrapper .news-self > p,
    .hm-events-wrapper .news-self > .event-meta-row{ width: 100%; }
    /* Newsevents template: force event tile title and intro to full width */
    .events-listing .news-self > h5,
    .events-listing .news-self > p,
    .events-listing .news-self > .event-meta-row{ width: 100%; }
    /* Homepage News & Events: animate drop shadow off on hover */
    .hm-newsevents .news.border-shadow,
    .hm-newsevents .news-self.border-shadow{
        transition: box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;
        box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16);
    }
    .hm-newsevents .news.border-shadow:hover,
    .hm-newsevents .news-self.border-shadow:hover{
        box-shadow: none;
    }
    .hm-newsevents h1{
        width:100%;
        border-bottom:2px solid black;
        padding-bottom: 10px;
        margin-bottom: 15px;
	}
    /* H2 links for News and Events */
    .hm-h2 a.hm-h2-link{
        color: inherit;
        text-decoration: none;
        transition: color 160ms ease;
    }
    .hm-h2 a.hm-h2-link:hover,
    .hm-h2 a.hm-h2-link:focus{
        color:#D59D10; /* gold */
        outline: none;
    }
	.hm-news-box{
		width:46%;
		background-color: #f5f5f5;
		min-height: 300px;
		display: block;
		padding: 15px;
	}
	.hm-news-box img{
		width:50%;
		overflow: hidden;
		max-height: 150px;
			object-fit:cover;
			object-position: top center;
		float:left;
	}
	.hm-news-right{
		width:48%;
		float: right;
		box-sizing: content-box;
		margin-left:  2%;
		padding-top: 10px;
		font-size:1em;
	}
	.hm-news-box h4{
		width:100%;
		float:left;
		margin-top:15px;
		font-size:1.5em;
		margin-bottom: 0;
	}
	.hm-news-box p{
		width: 100%;
		float: left;
		margin-top: 15px;
	}
	.hm-news-btn{
		float:right;
		width:100%;
		margin-top: 20px;
		margin-bottom: 20px;
		text-align: right;
		margin-right: 20px;
		font-size:1.2em;
		text-decoration: underline;
		align-self: flex-end;
	}
	.hm-news-btn a:visited,a:link{color:#000;}
	.hm-news-btn a:hover{color:#D59D10}
	/***** events home ****/
	.hm-events-box{
		width:100%;
		background-color: #f1f1f1;
		display: flex;
		flex-flow: row wrap;
	}
	.hm-events-datearea{
		align-self: center;
		width:25%;
		display: flex;
		flex-flow: row wrap;
		justify-content: center;
		align-items: center;
		justify-self: center;
	}
	.hm-events-info{
		width:75%;
		display: flex;
		flex-flow:row wrap;
		justify-content: right;
	}
	.hm-events-info h5{
		margin-bottom: 5px;
		width:100%;
		padding-top: 20px;
		padding-right: 20px;
	}
	.hm-events-info p{
		margin-bottom:10px;
		margin-top: 0;
		margin-right: 15px;
		width:100%;
	}
	.hm-events-month{
		text-align: center;
		width:100%;
	}
	.hm-events-day{
		width:100%;
		text-align: center;
		font-size:4em;
	}
	.hm-events-btntext{
		text-decoration: underline;
		align-self: center;
		font-size:1.2em;
		padding-right: 15px;
	}
	.hm-events-btn{
    display: flex;
    justify-content: center;
    align-items: center;
    width:50px;height:50px;background-color:#fff;
    border-radius: 50%; 
    margin-right: 15px;
    margin-bottom: 20px;
    transition: transform 250ms ease; /* smooth rotation */
}
.hm-events-info > div{
    margin-bottom: 15px;
    justify-self: flex-end;
}
/* ensure only the card removes shadow on hover and pointer stays default */
	/*** events page ****/
	.events-datearea{
		align-self: center;
		width:25%;
		display: flex;
		flex-flow: row wrap;
		justify-content: center;
		align-items: center;
		justify-self: center;
	}
	.events-info{
		width:75%;
		display: flex;
		flex-flow:row wrap;
		justify-content: right;
	}
	.events-info h5{
		margin-bottom: 5px;
		width:100%;
		padding-top: 20px;
	}
	.events-info p{
		margin-bottom:10px;
		margin-top: 0;
		margin-right: 15px;
		width:100%;
	}
	.events-month{
		text-align: center;
		width:100%;
	}
	.events-day{
		width:100%;
		text-align: center;
		font-size:4em;
	}
	.events-btntext{
		text-decoration: underline;
		align-self: center;
		font-size:1.2em;
		padding-right: 15px;
	}
	.events-btn{
		display: flex;
		justify-content: center;
		align-items: center;
		height:40px;
		width:40px;
		border-radius: 50%; 
		margin-right: 15px;
	}
	.events-info > div{
		margin-bottom: 15px;
		justify-self: flex-end;
	}
	
	/***** hm locations ***/
	.hm-locations{
		display: flex;
		flex-flow: column wrap;
		gap:15px;
		padding-left: 6vw;
		padding-right: 6vw;
		padding-top: 5vh;
	}
	.hm-locations h1{
		border-bottom:2px solid gray;
		margin-bottom:20px;
	}
	.hm-locations h3{
		margin-bottom: 15px;
	}
	.hm-locations-expanded{
		min-height:200px;
		display: flex;
		flex-flow:column;
		gap:15px;
		justify-content: flex-start;
	}
	.hm-locations-expanded h2{
		padding-left: 40px;
	}
	.hm-locations-campus{
		display: flex;
		flex-flow:row nowrap;
		gap: 20px;
	
	}
	.hm-locations-campus > div{
	
		min-height: 250px;
	}
	.hm-locations-map{
		object-fit:contain;
		align-self: center;
		margin: auto;
		min-height: 100px!important;
		display: flex;
		width:100px;
		flex-flow:row wrap;
		text-align: center;
	}
	.hm-locations-map img{height:100px;width:100px;}
	.hm-locations-map span{
		text-align: center;
		text-decoration: none;
		color:#000;
	}
	.hm-locations-map span:hover{color:#D59D10;}
	.hm-locations-map span:link{text-decoration:none#000;}
	.hm-locations-map a{text-decoration:none#000;}
	.hm-locations-img{
		width:28%;
		border-radius: 5px;
		/* height: 270px; */
		overflow: hidden;
	}
	.hm-locations-img img{
		 object-fit:cover;
		 display: block;
		 object-position:center;
		 margin-left: auto;
		 margin-right: auto;
	}
	.hm-locations-info{
		width:60%;
		display: flex;
		flex-flow: row wrap;
		padding-left: 15px;
	}
	.hm-locations-info h6{
		font-size:1.1em;
		margin-top: 15px;
	}
	.hm-locations-info div{
		width:50%;
	}
	.hm-locations-info p{
		margin-top: 10px;
		margin-bottom: 15px;
		padding-right: 15px;
		font-size:1.3em;
	}
	.notexpanded{
		display: flex;
		flex-flow: row; 
		border-top: 2px dashed gray;
		vertical-align: middle;
		padding-top: 20px;
	}
	.notexpanded h2{
		align-self: center;
		justify-self: center;
		width:80%;
	
	}
	.notexpanded div{
		display: flex;
		align-self: center;
		justify-self: center;
	}
	.life{margin-top: 60px;display: flex;flex-flow: row nowrap;}
	.life-menu{
		width:25%;
		gap:15px;
		display: flex;
		flex-flow:column nowrap;
		padding-right: 40px;
	}
	.life-p{
		width:75%;
	}
	.life h4{margin-bottom: 20px;}
	.life-p p{margin-top: 10px;}
	.life-btn{
		padding: 15px 20px 15px 20px;
		text-align: left;
		background-color: #FFF;
		border-radius: 5px;
		border-color: #D59D10;
		border-style: solid;
		color:#000!important;
	}
	.life-btn:link{color:#000000;}
	.life-gallery{
		display: flex;
		flex-flow: row wrap;	
		gap:20px
	}
	.life-menu button{color:#000000;}
	.life-gallery > div{
		display: flex;
		flex-basis:calc(25% - 20px);
		max-height:300px;overflow:hidden;
		object-fit: cover;
		justify-content: center;
	}
	.life-gallery img{object-fit: cover;
		object-position: center;
		flex: none;
	}
	.life-btn:hover{background-color: #D59D10;color:#fff;}
	.global-img{width:60%;}
	.global-img p{font-size:1.5em}
	.global-img ul, .global-img li{font-size:inherit;}
	/******* apply ******/
	.apply-menu{
		min-height: 60px;
		display: flex;
		flex-flow:row nowrap;
		gap: 20px;
	}
	.apply-menu a{flex-grow:1;}
	.apply-menu button:hover{color:#000;background-color: #fff!important;cursor: pointer;}
	.apply-menu button{
		font-size:1.1em;
		font-weight: bold;
		flex-grow: 1;
		border:2px solid;
		border-radius:5px;
		border-radius:3px;
		color:#fff;
		box-shadow:0 2px 4px 0 rgba(0,0,0,0.16);
		height:60px;
		width:100%;
	}
	.apply-menu a:hover{color:#000;background-color: #fff!important;cursor: pointer;}
	.apply-menu a{
		font-size:1.1em;
		display: flex;
		font-weight: bold;
		flex-grow: 1;
		border:2px solid;
		border-radius:5px;
		border-radius:3px;
		color:#fff;
		box-shadow:0 2px 4px 0 rgba(0,0,0,0.16);
		height:56px;
		width:100%;
		text-align: center;
		text-decoration: none;
	}
	.apply-menu > a > span{		
		align-self:center;
		justify-self:center;
		width:100%;
		padding: 0 10px 0 10px;
	}
	/* apply prepare */
	.apply-prepare{
		flex-flow:row;
		margin-top: 40px;
		margin-bottom: 40px;
	}
	.apply-prepare-block{
		width:48%;
		display: flex;
		flex-flow: column;
		gap:40px;
	}
	.apply-prepare-block >div{
		border:1px dashed gray;
		padding: 20px;
		border-radius: 4px;
	}
	.apply-prepare-path{
		width:4%;
	}
	.no-border{border:0px!important}
	/* apply locations */
	.apply-locations-map{
		width:40%;
		display: flex;
		flex-flow: row wrap;
	}
	.apply-locations-txt{
		width:60%;
		padding-top: 40px;
	}
	.apply-map{width:45%;}
	.apply-map-btns{
		width:40%;
		padding-top: 40px;
		margin-left: auto;
		margin-right: auto;
		flex-grow: 0;
	}
	.apply-map-btns button{
		width:90%;
		height:50px;
		font-weight: bold;
		justify-self: flex-start;
		align-self: flex-start;
		font-size:1.1em;
		margin-bottom: 20px;
	}

	.wp-block-file__button{
		background-color: #D59D10;
		padding: 10px 20px 10px 20px;
		font-size:1.2em;
	}
	.full-gallery{
		display: flex;
		min-height:200px;
		flex-flow:row nowrap;
		margin-bottom: 40px;
		gap: 10px;
		justify-content: center;
		/* margin-left: 10vw;
		margin-right: 10vw; */
	}
	.full-gallery > div{
		border:0 solid black;
		min-height:400px;
	}
	.full-gallery > div > img{
		object-fit: cover!important;
		object-position: center;
		height:100%;
		cursor: pointer;
	}
	/***** footer  ***/
	footer{
		display: flex;
		flex-flow: row wrap;
		width: 100%;
		min-height:280px;
		position: relative;
		bottom:0;
		left:0;
	}
	.footer-heading{
		width:100%;
		min-height:220px;
		background-color: #181818;
		color:#fff;
		display: flex;
		flex-flow: row;
		font-size:1.3em;
		text-align: center;
		align-items: center;
		justify-content: center;
	}
	footer h1{
		text-align: center;
		color:#FFF;
		font-size:3em;
		align-self: center;
		justify-self: center;
	}
	.footer-align{
		width:100%;
		display: flex;
		flex-flow:row wrap;
	}
	.footer-menu{
		background-color: #000;
		width:100%;
		height:100px;
		color:#fff;
		display: flex;
		flex-flow:row wrap;
	}
	.footer-menu div{
		width:33.3%;
		text-align: center;
	}
	.footer-menu-main{
		background-color: #000;
		width:100%;
		height:100px;
		color:#fff;
		display: flex;
		flex-flow:row wrap;
		vertical-align: bottom;
		align-self: flex-end;
	}
	.footer-menu-main div{
		width:33.3%;
		text-align: center;
	}
	.footer-links{
		display: flex;
		flex-flow:row;
		justify-content: center;
		align-items: center;
	}
	.footer-links p{
		margin-left: 50px;
		align-self: center;
	}
	.footer-social{
		display: flex;
		flex-flow: row;
		align-items: center;
		justify-content: center;
		gap: 15px;
	}
	
	.footer-social img{width:60%;}
	.footer-social div{
		border:2px solid #fff;
		background-color: #fff;
		height:50px;
		width:50px;
		display: flex;align-items: center;justify-content: center;
		border-radius: 50%;
	}
	
	.footer-btn{
	   display: flex;
	   align-items: center;
	   justify-content: center;
	}
	.f-btn{
		background-color: #000;
		border:1px solid #fff;
		color:#fff;
		padding: 15px;
		font-size:1.1em;
	}
	.footer-info{
		display: flex;
		flex-flow:row nowrap;
		background-color: #181818;
		color:#fff;width:100%;
		padding: 15px 15px 8px 15px;
		align-items: center;
		justify-content: center;
	}
	.sebseb{display: flex;
		flex-flow:row nowrap;
		background-color: #181818;
		color:#fff;width:100%;
		align-items: center;
		justify-content: center;padding-bottom: 8px;}
	.sebseb p{font-size:0.7em;font-style: italic;}
	.footer-info p{margin-left:20px;font-size:medium;}
	.footer-info h4{font-size:medium;display:flex;justify-content: flex-end;}
	/******** school landing page *******/
	/****** school*******/
	.schools{
		background-repeat: no-repeat;
		background-position:top right ;
	}
	.micro-inactive{
		cursor: pointer;
	}
	.micro-active{
		cursor: pointer;color:#1476B8;
	}
	.micro-inactive:hover{color:#1476B8;}
	.micro-active:hover{color:#1476B8;}
	/*** school dropdown menu buttons ****/
	
		/* Style The Dropdown Button */
		.dropbtn {
			background-color: rgba(16, 16, 16, 0);
			color: white;
			padding: 16px;
			font-size: 16px;
			border: none;
			cursor: pointer;
			border:2px solid #fff;
			border-radius: 5px;
			font-size:1.3em;
			font-weight: bold;
			width:90%;
		  }
		  
		  /* The container <div> - needed to position the dropdown content */
		  .dropdown {
			position: relative;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			width:100%;
		  }
		  
		  /* Dropdown Content (Hidden by Default) */
		  .dropdown-content {
			display: none;
			position: absolute;
			background-color: #ffffff;
			min-width: 100%;
			margin-left: 95%;
			border-radius: 15px;
			border:2px solid;
			box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.555);
			z-index: 1;
		  }
		  
		  /* Links inside the dropdown */
		  .dropdown-content a {
			color: black;
			padding: 20px 16px;
			text-decoration: none;
			display: block;
			font-weight: bold;
			font-size:1.3em;
			text-align: center;
		  }
		  
		  /* Change color of dropdown links on hover */
		  .depDesign a:hover {color:#fff;background-color: #800080;}
		  .depInfo a:hover {color:#fff;background-color: #1476B8;}
		  .depFinearts a:hover {color:#fff;background-color: #B22325;}
		  .depFashion a:hover {color:#fff;background-color: #228C22;}
		  .depArt a:hover {color:#fff;background-color: #F26A23;}
		  .depOther a:hover {color:#fff;background-color: #D59D10;}
		  
		  .gradientInfo{
				background: rgb(20,118,184);
				background: linear-gradient(90deg, rgba(20,118,184,0.42620798319327735) 0%, rgba(20,118,184,1) 29%, rgba(20,118,184,1) 100%);
			}
		  /* Show the dropdown menu on hover */
		  .dropdown:hover .dropdown-content {
			display: block;
		  }
		  
		  /* Change the background color of the dropdown button when the dropdown content is shown */
		  /* .dropdown:hover .dropbtn {
		   
		  } */
		  .school-menu-btn{
			justify-items: center;
			align-items: center;
			display: flex;
			flex-grow: 1;
		  }
		  .dep-menu-fix{height:40px;width:160px;display: block;}
		  .expanded-wrapper{display: flex;flex-flow:row wrap;gap:15px;margin: 20px 0px 20px 0px;padding: 0px 10vw 0px 10vw;}
		  .expanded-wrapper-dep{display: flex;flex-flow:row nowrap;gap:15px;margin: 20px 0px 20px 0px;padding: 0px 10vw 0px 10vw;}
		  .expanded-btn{
			justify-items: center;
			align-items: center;
			display: flex;
		}
		  .schoolbtn {
			background-color: rgba(16, 16, 16, 0.7);
			color: #fff!important;
			padding: 13px;
			font-size: 16px;
			border: none;
			cursor: pointer;
			border:2px solid #fff;
			border-radius: 5px;
			font-size:1.1em;
			font-weight: bold;
			width:90%!important;
			text-align: center;
		  }
		  .schoolbtn:hover{background-color: #000!important;color:#fff!important;}
		  .expandedBtn {
			background-color: rgba(16, 16, 16, 0);
			color: white;
			font-size: 16px;
			border: none;
			cursor: pointer;
			border:1px solid #fff;
			border-radius: 5px;
			font-size:1em;
			flex-grow: 1;
			font-weight: bold;
			padding: 8px 30px 8px 30px;
		  }
		  .expandedBtn:hover{background-color: #fff;color:#000;}
		.dep-expanded-off{
			display: flex;
			height:10px;
		}
		.dep-expanded-on{
			display: flex;
			height:auto;
		}
		/* micro credentials menu  */
		.it-micro-menu{
			display: flex;
			flex-flow: row nowrap;
		}
		.it-micro-menu div{
			width:50%;
		}
		.it-micro-menu h2{width:100%;}
		.micro-cred-title{
			text-align: right;
		}
		.micro-filter-display span{color:#1476B8}
		.micro-filter-display{font-weight: lighter;margin-bottom: 10px;}
	.qual-heading{font-size:2.6em!important;margin-top: 0!important;text-transform: uppercase;}
	.qual-small{font-size:1.4em!important;}
	.school-landing{
		display: flex;
		flex-flow: row wrap;
		height:460px;
	}
	.qual-landing{
		flex-flow:row wrap;
		width:100%;
		align-content: flex-start;
		position: relative;
	}
	.qual-landing a{text-decoration: none;width:60%;}
	.qual-landing h6{margin-top: 5px;padding:0 0 0 0; height:25px;text-decoration: none;}
	.qual-landing h6:hover{color:#000!important;}
	/* .qual-landing > a,h1,h4,h6,p{
		align-self:baseline;
	} */
	 .school-bread{width:100%;height:20px;}
	.school-landing h1{
		/* margin-top: 20px; */
		width:60%;
	}
	.school-landing h3{
		font-size:2.1em;
		margin-top: 30px;
		width:50%;
	}
	.school-landing h4{
		font-size:1.5em;
		margin-top: 0;
		width:50%;
		margin-right: 10%;
	}
	.school-landing p{
		margin-top: 20px;
		margin-bottom: 20px;
		width:50%;
		font-size:1.3em;
		
	}
	.flex-end{display: flex;justify-self: flex-end;margin-left: auto;}
	.school-menu{
		margin-bottom: 20px;
		position: absolute;
		left:0;
		bottom:0;
		display: flex;
		justify-items: flex-start;
		justify-self: flex-end;
		flex-flow: row nowrap;
		width:100%;
		gap:20px;
		align-self: flex-end;
		margin-top: auto;
	}
	.depbg-img{
		position: absolute;
		top:0;
		right:0;
		z-index: -2;
		max-height: 560px;
		overflow:hidden ;
		max-width:70%;
		object-fit: cover;
		background-position: top;
	}
	.depbg-img > img{

		min-height:560px;
		width:100%;
		object-fit: cover;
		object-position: 45% 100%;
	}
	.depbg-gradient{
		z-index: -1;
		position: absolute;
		width:100%;
		height:560px;
		background: rgb(255,255,255);
background: linear-gradient(105deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 42%, rgba(255,255,255,0) 65%, rgba(255,255,255,0) 100%);

	}
	.school-menu div{
		width:24%;
	}
	.school-listing{
		margin-top: 40px;
		display: flex;
		flex-flow: row wrap;
		gap:30px;
		margin-bottom: 50px;
	}
	.school-listing2{
		margin-top: 40px;
		display: flex;
		flex-flow: row wrap;
		gap:30px;
		margin-bottom: 50px;
	}
	.school-listing2 > div{
		width:100%;
		border:1px groove #6d6d6d43;
		border-radius: 5px;
		min-height:200px;
		padding-left: 0px; 
		padding-bottom: 0px;
		
	}
	.school-listing > div{
		width:100%;
		border:1px groove #6d6d6d43;
		border-radius: 5px;
		min-height:200px;
		padding-left: 0; 
		padding-bottom: 0;
		
	}
	.school-listing-micro{
		margin-top: 0;
		display: flex;
		flex-flow: row wrap;
		gap:30px;
		margin-bottom: 50px;
	}
	.school-listing-micro > div{
		width:calc(50% - 30px);
		border:1px groove #6d6d6d43;
		border-radius: 5px;
		min-height:200px;
		padding-left: 0; 
		padding-bottom: 0;
	}
	.txt-light{
		font-weight: 300; /* Corresponds to the previous gtwalsheimLight */
	}
	.txt-heavy{
		font-weight: 400; /* Corresponds to the previous gtwalsheimRegular */
	}
	.txt-small{
		font-size:1.2em!important;
	}
	/***** margin 10s*****/
	.margin-width-20{
		margin-left:20px;
		margin-right:20px;
	}
	.margin-top10{
		margin-top:10px;
	}
	.margin-top20{margin-top:20px;}
	.padding-40{
		padding-left: 40px;
		padding-right: 40px;
	}
	.h-margin-20{margin:20px 0 20px 0;}
	.margin-40{
		margin-right: 40px;
		margin-left: 40px;
	}
	.margin-40full{
		margin:40px
	}
	.margin-left40{
		margin-left: 40px;
	} 
	.margin-right40{
		margin-right: 40px;
	}
	.margin-top40{
		margin-top:40px;
	}
	.margin-top10{
		margin-top: 10px;
	}
	.degree{
		display: flex;
		flex-flow: row wrap;
		width:100%;
		padding-left: 40px;
		padding-top: 30px;
	}
	.degree-intro{
		display: flex;
		flex-flow: row nowrap;
		width:100%;
		margin-bottom: 20px;
		margin-top: 10px;
	}
	.degree-intro-paragraph{
		width:58%;
		padding-top: 10px;
		padding-bottom: 20px;
		padding-right: 40px;	
	}
	.degree-intro-paragraph p{
		font-weight:lighter;
		margin-top: 20px;
		font-size:1.3em;
	}
	.degree-intro-paragraph h4{
		font-size:1.4em;
		font-weight:lighter;
	}
	/* micro cred*/
	.cred-intro-paragraph{
		width:50%;
		padding-top: 0;
		padding-bottom: 20px;
		padding-right: 30px;	
	}
	.cred-intro-paragraph p{
		font-weight:lighter;
		margin-top: 0;
		font-size:1.1em;
	}
	.cred-intro-paragraph h4{
		font-size:1.4em;
		font-weight:lighter;
	}
	.cred-info{
		width:31%;
		margin-bottom: 20px;
	}
	.cred-info > h6{
		padding-bottom: 0!important;
		font-size:1.2em;
	}
	.cred-info p{
		margin-top: 5px;
		font-weight:lighter;
		line-height: 130%;
		font-size:1.1em;
		margin-right: 40px;
	}
	.degree-info{
		width:30%;
		margin-bottom: 20px;
	}
	.degree-info-qual{width:46%;}
	.degree-info-qual > h6{
		padding-bottom: 0!important;
		font-size:1.2em;
	}
	.degree-info > h6{
		padding-bottom: 0!important;
		font-size:1.2em;
	}
	.degree > h2{
		width:100%;
	}
	.degree-info p{
		margin-top: 5px;
		font-weight:lighter;
		line-height: 130%;
		font-size:1.1em;
		margin-right: 40px;
	}
	.degree-paragraphs{
		width:60%;
		padding-right: 20px;
	}
	.degree-paragraphs > h4{
		margin-bottom: 30px;
		font-weight: normal;
	}
	.degree-paragraphs p{
		margin-bottom: 20px;
		margin-right: 20px;
	}
	.degree-arrow{
		display: flex;
		justify-items: center;
		align-items: center;
	}

	/* event */
	.padding-10vw{
		padding-left: 10vw;
		padding-right: 10vw;
	}
	.text-right{
		text-align: right;
	}
	.event-info > div{
		width:50%;
	}
	.event-info{
		display: flex;
		margin-top: 20px;
		width:100%;
		flex-flow: row wrap;
	}
	.event-sub{
		margin-top: 0;
	}
	.event-location{
		text-align: right;

	}
	.events-crm{
		display:flex;
		flex-flow:row wrap;
		justify-items: center;
		align-items: center;
		width:100%;
	}
	.events-crm > p{
		width:100%;
		text-align: center;
	}
	.events-crm-btn{
		margin-left: auto;
		margin-right: auto;
		margin-top: 20px;
		margin-bottom: 40px;
	}
	.events-recent-wrap{
		width:100%;
		display: flex;
		flex-flow:row wrap;
		gap: 20px;
		margin-bottom:40px;
	}
	.crmform{
		width:100%;
		min-height:100vh;
	}
	/* events end */
	/******* degreee******/
	.degree-block-micro{
		width:50%;
		display: flex;
		flex-flow:row wrap;
	}
	.degree-block-micro:hover{background-color: #f8f8f868;}
	.degree-block-micro img{
		width:45%;
		min-height:400px;
		margin-left: 40px;
		margin-right: 40px;
		border:1px solid black;
		height: auto;
		object-fit: cover;
	}
	.degree-block-micro p{
		margin-left: 0;
	}
	.degree-block-micro h2{
		margin-top: 0;
		margin-bottom: 15px;
		font-size:2em;
	}
	.degree-block{
		width:100%;
		display: flex;
		flex-flow:row wrap;
		cursor: pointer;
	}
	.degree-block:hover{background-color: #f8f8f868;}
	.degree-block img{
		width:45%;
		min-height:400px;
		margin-left: 40px;
		margin-right: 40px;
		border:1px solid black;
		height: auto;
		object-fit: cover;
	}
	.degree-block p{
		margin-left: 0;
	}
	.degree-block h2{
		margin-top: 0;
		margin-bottom: 15px;
		font-size:2em;
	}
	.cred-arrow{
		margin-right: 20px;
	}
	.qual-short-info{
		display: flex;
		flex-flow: row nowrap;
		margin: 20px 40px 0 40px;
	}
	.qual-short-info div{
		flex-grow:1;
		align-items: center;
		justify-content: center;
		border:0 dashed black;
	}
	.qual-short-info h2{
		margin-top: 20px;
		margin-bottom: 20px;
	}
	
	.cred-short-info{
		display: flex;
		flex-flow: row nowrap;
		margin: 20px 40px 0 40px;
	}
	.cred-short-info div{
		flex-grow:1;
		align-items: center;
		justify-content: center;
		border:0 dashed black;
	}
	.cred-short-info h2{
		margin-top: 20px;
		margin-bottom: 20px;
	}
	.qual-cost{
		display: flex;
		flex-flow:row nowrap;
		margin: 30px 40px 0 40px;
	}
	.qual-cost div{
		width:50%;
	}
	.qual-creds{margin-bottom: 20px;}
	.qual-creds div{font-size:1.3em;}
	.qual-outcome{margin-right: 20px;}
	.qual-outcome ul li{margin-bottom: 5px;font-size:1.2em;}
	.qual-calendar{display: flex;flex-flow:row nowrap;
		align-items: flex-start;justify-content: flex-start;
		margin-top: 30px;
	}
	.qual-calendar div{
		flex-grow:1;align-self: flex-start;
		justify-self: flex-start;
		margin-bottom: 5px;
		min-width:30%;
	}
	.qual-cost-title{
		margin-bottom: 10px;margin-top: 0;
	}
	.qual-cost p {
		/* font-size:1.7em; */
	}
	.qual-calendar div p{min-height:60px;}
	/* .degree-block span{
		height:40px;
		width:50%;
	} */
	.color-block{
    color:#fff;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
	flex-grow:1;
	}
	.color-block > h2{margin-top: 10px;margin-bottom: 10px;}
	/* .color-block-sm{
		padding-top: 40px;
    	padding-bottom: 40px;
		margin-top: 40px;
    	margin-bottom: 40px;
	} */
	.color-block-small{
		color:#fff;
		padding-top: 30px;
		padding-bottom: 0;
		margin-top: 0;
		margin-bottom: 20px;
		}
	.color-block-small h2{
		font-size:2em;
	}
	.color-block-alumni{
		font-size:1.5em;
		padding: 40px 0 40px 0;
	}
	.block-h2 h2{font-size:2em;}
	.download-btn{
		display: flex;
	}
	.download-btn div{border:2px solid}
	.download-btn > a{text-decoration: none;color:#000;}
	.download-btn div:hover{text-decoration: none;
		background-color:#000;color:#fff;}
	.pathway-tags2{
		display: flex;
		flex-flow:row wrap;
		column-gap:15px;
		margin-bottom: 20px;
		margin-left: 40px;
		margin-right: 40px;
		margin-top: 20px;
	}
	
	.pathway-tag2{
		padding:10px;
		border:2px dashed white;
		border-radius: 15px;
		margin-top: 10px;
		font-size: 1.1em;
		font-weight: bold;
		flex-grow: 0;
	}
	.pathway-tags-dep{
		display: flex;
		flex-flow:row wrap;
		column-gap:15px;
		margin-bottom: 20px;
		margin-right: 40px;
		margin-top: 20px;
	}
	
	.pathway-tag-dep{
		padding:10px;
		border:2px dashed white;
		border-radius: 15px;
		margin-top: 10px;
		flex-grow: 0;
		font-size:1.1em;
	}
	.pathway-tag-hm{
		font-size:0.9em;
		font-weight: lighter;
		border:2px dashed;
		padding:10px;border-radius: 15px;
	}
	.border-color-design{
		border-color:#800080;
	}
	.border-1{
		border-bottom:1px solid;
	}
	.border-2{
		border-bottom:2px solid;
	}
	.related-info-box{
		margin-left: 40px;
		margin-right: 40px;
		gap:20px;
		display: flex;
	}
	.related-info-box > div{
		border: 0px solid gray;
	}
	.related-info-box-alumni{
		display: flex;
		flex-flow:row;
		padding-bottom: 15px;
		gap:20px;
		margin-left: 40px;
		margin-right: 40px;
	}
	
	.related-info-box-alumni > div{
		border:1px solid gray;
		width:50%;
	}
	.related-info-box-alumni img{
		max-inline-size: 100%;
			block-size: auto;
			object-fit: cover;
			object-position: top center;
	}
	.related-info-box-alumni p{
		padding-left: 15px;
	}
	.admission{
		margin: 40px 40px 0 40px;
	}
	.admission li{margin-bottom:5px;font-size:1.3em;font-weight: lighter;}
	
	.member-wrapper{
		display: flex;
		flex-flow: row wrap;
		gap:20px;
		margin:40px;
	}
	.member-wrapper-filter{
		display: flex;
		flex-flow: row wrap;
		gap:20px;
		margin:40px;
	}
	.member-wrapper > div {
		flex-basis:calc(25% - 20px);
	}
	.member-wrapper-filter > div{display: none;}
	.member {	
		border-radius: 5px;
		z-index: 2;
		background-color: #fafafa;
		display: flex;
		flex-flow:row wrap;
		flex-grow:0;
		align-items: flex-start;
	}
	.memberCard{display: flex;width:calc(25% - 20px);}
	.member > img{
		border-radius: 5px;
		margin-bottom: 10px;
		max-height: 350px;
		object-fit: cover;
	}
	.member > h4{
		font-size:1.5em;
		margin-right: 20px;
		margin-left: 20px;
		font-weight: bold;
		width:100%;
		align-self: flex-start;
	}
	.member > h3{
		font-size:1.9em;
		margin-right: 20px;
		margin-left: 20px;
	}
	.member > p{
		margin-left: 20px;
		margin-right: 20px;
		margin-top: 20px;
		margin-bottom: 20px;
		font-size:1.4em;
	}
	.member-link{
		font-weight:bold;
		align-items: center;
		justify-content: center;
		width:100%;
		margin-bottom: 20px;
	}
	.member-link div{align-self: center;justify-self: center;}
	.member-link a{display: flex;align-items: center;justify-content: center;}
	.member-full{content-visibility: visible;}
	.member-tablet{content-visibility: hidden;}
	/* members page */
	.member-h2{font-size:1.8em;}
	.members-extra{max-width: 90%;word-wrap:break-word;}
	
		.container-split2{
			display: flex;
			flex-flow:row nowrap;
			margin-top: 20px;
			margin-bottom: 0;
			gap: 40px;
		}
		.container-split2 > div{
			min-height:100px;
		}
		.member-profile-info{
			width:60%;
			
		}
		.member-profile-img{
			border:0 solid;
			width:40%;
			overflow: hidden;
		}
		.member-profile-img2{
			border:0px solid;
			width:35%;
			/* height:55vh; */
			overflow: hidden;
		}
		.member-profile-info p{
			margin-right: 0;  
			margin-top: 20px;
		}
		.member-profile-info h2{
			margin-top: 0;
			margin-bottom: 10px;
		}
		.color-block-alumni{font-size:1.8em;border:1px solid;background-color: #fff;color:#000!important;}
	/**** members qualifications ***/
	.font-light{
		font-weight:lighter;
	}
	/*****************************/

	/*** ABOUT US ***/
	.border{
		border:1px solid gray;
	}
	.full-width{
		width:100%;
	}
	/* gallery */
	.gallery-3{
		display: flex;
		flex-flow:row wrap;
		width:100%;
	}
	.gallery-3 div{
		border:1px solid gray;
		min-height:400px;
		width:33.2%;
	}
	.gallery-2{
		display: flex;
		flex-flow:row wrap;
		width:100%;
		gap: 10px;
		justify-content: center;
		align-items: center;
	}
	.gallery-2 div{
		border:0 solid gray;
		max-height:520px;
		flex-basis:calc(50% - 12px);
		overflow: hidden;
	}
	/* members */
	.member-faculty{
		display: flex;
		flex-flow: row wrap;
		gap:10px;
		margin-top: 40px;
		margin-bottom: 40px;
	}
	.member-about{
		border:1px solid gray;
		width:24%;
		border-radius: 5px;
		z-index: 2;
		position: relative;
	}

	.member-about > img{
		border-radius: 5px;
		margin-bottom: 20px;
	}
	.about-wrapper{
		margin-top: 20px;
		display: flex;
		flex-flow: row wrap;
	}
	.margin-10vw{
		margin-left: 10vw;
		margin-right: 10vw;
	}
	.about-video{
		border:1px solid gray;
		width:100%;position: relative;
		/* margin-left: 10vw;
		margin-right: 10vw; */
		margin-top: 20px;
		height: 600px;
	}

	.video-thumbnail{
		z-index:300;
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:600px;
		object-fit:cover;
	}
	
	.video-frame{
		z-index:10;
		position:absolute;
		top:0;
		left:0;
		width:100%;
	}
	
	.thumbnail-link .video-thumbnail{
		display:block;
	}
	
	.thumbnail-link:hover .video-thumbnail{
		display:none;
	}
	.about-fix{width:calc(50% - 40px)!important}
	.split-50{
		display: flex;
		flex-flow: row nowrap;
		width:100%; /* added post */
		align-items: flex-start;
		gap:40px;
	}
	.about-margin{margin-left: 25px;}
	.split-50 div{
		width:50%;
		margin-top: 0;
	}
	.split-half{
		display: flex;
		flex-flow: row wrap;
		width:100%;
	}
	.half-half{
		width:50%;
		margin-top: 20px;
	}
	.p-left{width: calc(50% - 40px);}
	.p-left > p{
		padding-right: 40px;
	}
	/* .split-half ~ p, h3, h4{
		width:50%;
		margin:0px;

	} */
	.img-border{
		border:0 solid gray;
		height:380px;
		overflow: hidden;
	}
	.img-full{
		border:0 solid gray;
		overflow: hidden;
	}
	.about-social{
		display: flex;
		flex-flow: row;
		align-items: center;
		justify-content: center;
		gap: 80px;
		width:100%;
		margin-top: 40px;
		margin-bottom: 40px;
	}
	
	.about-social div{
		border:2px solid #000000;
		
		height:80px;
		width:80px;
		display: flex;align-items: center;justify-content: center;
		border-radius: 50%;
	}
	.about-btn{background-color: #fff;}
	.about-btn:hover{background-color: #D59D10!important;}
	
	.about-social img{width:50%;}

	/**************** **********/
	/*** news article ****/
	.margin-8vw{
		margin-left: 10vw;
		margin-right: 10vw;
		width:100%;
		margin-top: 40px;
	}
	.padding-8vw{
		padding-left: 8vw;
		padding-right: 8vw;
	}
	.news-wrapper{
		width:100%;
		display: flex;
		flex-flow: row wrap;
	}
	.news-wrapper > img{
		margin-left: 10vw;
		margin-right: 10vw;
		overflow: hidden;
	}
	
	.news-content{
		padding-left: 10vw;
		padding-right: 10vw;
		margin-bottom: 20px;
		margin-top: 20px;
		width:100%;
	}
	.news-content > p{
		font-weight: lighter;
	}
	.news-gallery{
		display: flex;
		flex-flow:row wrap;
		gap:40px;
	}
	.news-gallery > div{
		flex-basis:calc(50% - 40px);
		position: relative;
		width: 100%;
		min-height: 600px;
		overflow: hidden;
	}
	.news-gallery img{
		position: absolute;
		height: auto;
		top: 0;
		min-height:100%;
		min-width:100%;
		width:100%;
		height:100%;
		left: 50%;
		transform: translateX(-50%);
		object-fit: cover;
  		object-position: center;
	}
	.news-gallery2{
		display: flex;
		flex-flow:row wrap;
		gap:20px;
	}
	.news-gallery2 h2{width:100%;}
	.news-gallery2 > div{
		flex-basis:calc(50% - 12px);
		position: relative;
		width: 100%;
		min-height: 300px;
		overflow: hidden;
	}
	.news-gallery2 img{
		position: absolute;
		height: auto;
		top: 0;
		min-height:100%;
		min-width:100%;
		width:100%;
		height:100%;
		left: 50%;
		transform: translateX(-50%);
		object-fit: cover;
  		object-position: center;
	}
	.news-gallery-mob{
		display: none;
		content-visibility: hidden;
	}
	/* modal */

	#myImg {
		border-radius: 5px;
		
		transition: 0.3s;
	}
	#myImg:hover {opacity: 0.7;}
	.myImg{cursor: pointer;}
	/* The Modal (background) */
	.modal {
		display: none; /* Hidden by default */
		position: fixed; /* Stay in place */
		z-index: 99; /* Sit on top */
		padding-top: 100px; /* Location of the box */
		left: 0;
		top: 0;
		width: 100%; /* Full width */
		height: 100%; /* Full height */
		overflow: auto; /* Enable scroll if needed */
		background-color: rgb(0,0,0); /* Fallback color */
		background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
	}
	
	/* Modal Content (image) */
	.modal-content {
		margin: auto;
		display: block;
		width: 80%;
		max-width: 60%;
	}
	
	/* Caption of Modal Image */
	#caption {
		margin: auto;
		display: block;
		width: 80%;
		max-width: 700px;
		text-align: center;
		color: #ccc;
		padding: 10px 0;
		height: 150px;
	}
	

/* Qualification Cards */
.qual-listing-wrapper {
    width: 100%;
}

.qual-image-placeholder {
    height: 300px; /* Adjust height as needed */
    width: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* This prevents the image from spilling out of its container */
}

/* Pathways overlay: global default — hidden by default, positioned over the image */
.qual-pathways-overlay{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px 12px;
    box-sizing: border-box;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none; /* keep image/link clickable */
    z-index: 2;
}

/* Reveal overlay only for specific qualification card groups */
.qual-listing-wrapper .qual-card:hover .qual-pathways-overlay{ opacity: 1; }
#landing-degree-layer2 .qual-card:hover .qual-pathways-overlay{ opacity: 1; }

/* Pathways overlay inside the image (qualifications listing only) */
.qual-listing-wrapper .qual-pathways-overlay{
    padding-top: 16px; /* maintain extra top padding for listing */
}
.qual-listing-wrapper .qual-pathways-overlay .qual-pathways-title{
    width: 100%;
    text-align: center;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: 8px 10px;
    margin-bottom: 6px;
    background: rgba(0,0,0,0.65);
    border-radius: 4px;
    text-shadow: 0 2px 6px rgba(0,0,0,0.8);
}
.qual-listing-wrapper .qual-pathways-overlay .qual-tag{
    background-color: rgba(0,0,0,0.7);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.2);
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.qual-listing-wrapper .qual-card:hover .qual-pathways-overlay{ opacity: 1; }

.qual-image-placeholder img {
    width: 100%;       /* Make image element fill placeholder width */
    height: 100%;      /* Make image element fill placeholder height */
    object-fit: cover; /* Cover the area, maintain aspect ratio, crop if needed */
    object-position: top; /* Focus on the top of the image */
    transition: transform 0.3s ease-in-out, filter 0.35s ease; /* Smooth zoom and blur */
}

.qual-image-placeholder:hover img {
    transform: scale(1.1); /* Zoom level, adjust as needed (e.g., 1.05, 1.2) */
}

/* Also zoom image when hovering the entire tile (scoped to qualifications listing) */
.qual-listing-wrapper .qual-card:hover .qual-image-placeholder img {
    transform: scale(1.1);
    filter: blur(3px);
}

/* Student work listing: author overlay on hover */
.qual-listing-wrapper .qual-image-placeholder .student-author-overlay {
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    text-align: center;
    color: #fff;
    font-weight: 700;
    font-size: 1.1em;
    text-transform: uppercase;
    text-shadow: 0 2px 8px rgba(0,0,0,0.8);
    background: rgba(0,0,0,0.25);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
    z-index: 2;
}
.qual-listing-wrapper .qual-card:hover .student-author-overlay {
    opacity: 1;
}

/* Homepage degrees: replicate qualifications listing overlay/hover only inside #landing-degree-layer2 */
#landing-degree-layer2 .qual-image-placeholder { position: relative; }
#landing-degree-layer2 .qual-pathways-overlay{
    padding: 16px 12px; /* match listing */
}
#landing-degree-layer2 .qual-pathways-overlay .qual-pathways-title{
    width: 100%;
    text-align: center;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: 8px 0;
    margin-bottom: 6px;
    background: rgba(0,0,0,0.65);
    border-radius: 4px;
    text-shadow: 0 2px 6px rgba(0,0,0,0.8);
}
#landing-degree-layer2 .qual-pathways-overlay .qual-tag{
    background-color: rgba(0,0,0,0.7);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.2);
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
#landing-degree-layer2 .qual-card:hover .qual-pathways-overlay{ opacity: 1; }

/* Do not let overlay children extend in height (homepage degrees and listing) */
.qual-pathways-overlay{ align-content: flex-start; }
.qual-pathways-overlay > *{ flex: 0 0 auto; }
.qual-pathways-overlay .qual-pathways-title,
.qual-pathways-overlay .qual-tag{
    line-height: 1.2;
    max-height: 36px; /* cap height of each pill/title */
    overflow: hidden;
}

/* Darken image with a light overlay on hover (below tag overlay) */
#landing-degree-layer2 .qual-image-placeholder::after{
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    background-color: rgba(0,0,0,0);
    transition: background-color 0.25s ease;
    pointer-events: none;
    z-index: 1; /* below .qual-pathways-overlay (z-index:2) */
}
#landing-degree-layer2 .qual-card:hover .qual-image-placeholder::after{ background-color: rgba(255,255,255,0.6); }

/* Image zoom/blur on hover for homepage degree tiles */
#landing-degree-layer2 .qual-card:hover .qual-image-placeholder img{
    transform: scale(1.1);
    filter: blur(6px);
}

/* Homepage degree tiles: pointer cursor and gold title on hover */
#landing-degree-layer2 .qual-card:hover { cursor: pointer; }
#landing-degree-layer2 .qual-card:hover .qual-title,
#landing-degree-layer2 .qual-card:hover .qual-title a{
    color: #D59D10 !important;
}

/* On tile hover, color tags by department (match qualifications listing) */
#landing-degree-layer2 .qual-card:hover .qual-card-header .qual-tag{
    color:#fff;
    border-color: transparent;
}
#landing-degree-layer2 .qual-card.designinno:hover   .qual-card-header .qual-tag{ background-color:#800080; }
#landing-degree-layer2 .qual-card.finearts:hover     .qual-card-header .qual-tag{ background-color:#B22325; }
#landing-degree-layer2 .qual-card.infotech:hover     .qual-card-header .qual-tag{ background-color:#1476B8; }
#landing-degree-layer2 .qual-card.fashion:hover      .qual-card-header .qual-tag{ background-color:#228C22; }
#landing-degree-layer2 .qual-card.artstherapies:hover .qual-card-header .qual-tag{ background-color:#F26A23; }

/* Pointer cursor on tile hover to indicate interactivity (qualifications listing only) */
.qual-listing-wrapper .qual-card:hover {
    cursor: pointer;
}

/* Darken image with an overlay on hover (stays below tags/title) */
.qual-listing-wrapper .qual-image-placeholder::after{
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    background-color: rgba(0,0,0,0);
    transition: background-color 0.25s ease;
    pointer-events: none;
    z-index: 1; /* below .qual-pathways-overlay (z-index:2) */
}
.qual-listing-wrapper .qual-card:hover .qual-image-placeholder::after{
    background-color: rgba(255,255,255,0.6);
}

.qual-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
/* Homepage-only variant (Student Work section): adjust columns without impacting other pages */
.hm-student-wrapper .homepage-qual-grid {
    grid-template-columns: repeat(3, 1fr);
    row-gap:60px!important;
}

.hm-student-wrapper .homepage-qual-grid .qual-image-placeholder {
    height:450px;
    position: relative; /* ensure containing context for absolute children */
}
.hm-student-wrapper .homepage-qual-grid .qual-image-placeholder .student-author-overlay {
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    text-align: center;
    color: #fff;
    font-weight: 700;
    font-size: 1.1em;
    text-transform: uppercase;
    text-shadow: 0 2px 8px rgba(0,0,0,0.8);
    background: rgba(0,0,0,0.25); /* subtle contrast layer */
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none; /* keep card overlay clickable */
    z-index: 2;
}

.hm-student-wrapper .homepage-qual-grid .qual-card { position: relative; }
.hm-student-wrapper .homepage-qual-grid .qual-card .card-link-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 3;
    text-indent: -9999px; /* keep for a11y label without visual text */
    cursor: pointer;
}

/* Ensure image zoom still works when hovering the card (overlay present) */
.hm-student-wrapper .homepage-qual-grid .qual-card:hover .qual-image-placeholder img {
    transform: scale(1.1);
    filter: blur(3px);
}
/* Smooth zoom transition */
.hm-student-wrapper .homepage-qual-grid .qual-image-placeholder img {
    transition: transform 0.35s ease, filter 0.35s ease;
    transform-origin: center center;
}

.hm-student-wrapper .homepage-qual-grid .qual-card:hover .student-author-overlay {
    opacity: 1;
}

/* Homepage: match qualification listing hover styles - gold title and department-colored tags */
.hm-student-wrapper .homepage-qual-grid .qual-card:hover .qual-title,
.hm-student-wrapper .homepage-qual-grid .qual-card:hover .qual-title a {
    color: #D59D10 !important; /* gold */
}

/* Homepage: on tile hover, color tags by department (now matches qualification listing structure) */
.hm-student-wrapper .homepage-qual-grid .qual-card:hover .qual-card-header .qual-tag {
    color: #fff !important;
    border-color: transparent !important;
}

.hm-student-wrapper .homepage-qual-grid .qual-card.designinno:hover .qual-card-header .qual-tag {
    background-color: #800080 !important; /* designinno */
}
.hm-student-wrapper .homepage-qual-grid .qual-card.finearts:hover .qual-card-header .qual-tag {
    background-color: #B22325 !important; /* finearts */
}
.hm-student-wrapper .homepage-qual-grid .qual-card.infotech:hover .qual-card-header .qual-tag {
    background-color: #1476B8 !important; /* infotech */
}
.hm-student-wrapper .homepage-qual-grid .qual-card.fashion:hover .qual-card-header .qual-tag {
    background-color: #228C22 !important; /* fashion */
}
.hm-student-wrapper .homepage-qual-grid .qual-card.artstherapies:hover .qual-card-header .qual-tag {
    background-color: #F26A23 !important; /* creative arts therapies */
}

.qual-card {
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.qual-content {
    padding: 15px 0;
    display: flex;
    flex-direction: column;
}

.qual-card-header {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}
.homepage-qual-grid .qual-tag{
    font-size: 10px;
}
.qual-tag {
    display: inline-block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background-color: #f2f2f2;
    color: #575656;
    padding: 8px 12px;
    border-radius: 4px;
    font-weight: lighter;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.qual-title {
    font-size: 1.6em;
    margin: 5px 0 5px 0;
    color: #000000;
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
    transition: color 0.3s ease-in-out;
}

.qual-title a {
    text-decoration: none;
    color: inherit; /* Ensures it takes the color from .qual-title */
    transition: color 0.3s ease-in-out;
}

.qual-title a:hover {
    color: #D59D10; /* Gold color */
}

/* When hovering the entire tile, change the title color to gold (scoped to qualifications listing) */
.qual-listing-wrapper .qual-card:hover .qual-title,
.qual-listing-wrapper .qual-card:hover .qual-title a {
    color: #D59D10;
}

/* Student work listing: individual tag hover (not card-level) */
.qual-listing-wrapper .qual-card-header .qual-tag{
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.qual-listing-wrapper .qual-card .qual-card-header .qual-tag:hover{
    color:#fff;
    border-color: transparent;
}
.qual-listing-wrapper .qual-card.designinno   .qual-card-header .qual-tag:hover{ background-color:#800080; }
.qual-listing-wrapper .qual-card.finearts     .qual-card-header .qual-tag:hover{ background-color:#B22325; }
.qual-listing-wrapper .qual-card.infotech     .qual-card-header .qual-tag:hover{ background-color:#1476B8; }
.qual-listing-wrapper .qual-card.fashion      .qual-card-header .qual-tag:hover{ background-color:#228C22; }
.qual-listing-wrapper .qual-card.artstherapies .qual-card-header .qual-tag:hover{ background-color:#F26A23; }

.qual-description {
    color: #333333;
    font-size: 12px;
    line-height: 1.4;
    margin-bottom: 0;
}

.qual-description p {
    margin: 0;
}
.qual-description a.read-more-link {
    color: #D59D10;
    text-decoration: none;
}

.qual-description a.read-more-link:hover {
    text-decoration: underline;	
}
.qual-listing-wrapper .qual-image-placeholder .mobile-tap-hint{ display:none; }
@media (max-width: 768px){
  .qual-listing-wrapper .qual-image-placeholder{ position: relative; }
  .qual-listing-wrapper .qual-image-placeholder .mobile-tap-hint{
    display:block;
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 2;
    pointer-events: none; /* don't block image/link */
    padding: 6px 10px;
    border-radius: 16px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    background: rgba(0,0,0,0.75);
    color: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  }
}
.qual-image-placeholder a {
	display: block;
	text-decoration: none;
	height: 100%;
	width: 100%;
}

/* Homepage section backgrounds */
.hm-student, .hm-alumni, .hm-newsevents, .hm-locations {
    background-color: #ffffff;
}

/* Preloader Styles */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #101010;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

#preloader.fade-out {
    opacity: 0;
    pointer-events: none; /* Make it unclickable after fading out */
}

.preloader-logo {
    text-align: center;
}

.preloader-logo img {
    max-width: 150px; /* Adjust size as needed */
    height: auto;
}

.preloader-logo h5 {
    color: #fff;
    font-size: 1.2em;
    margin-top: 10px;
}

.color-line{
	height: 5px;
}
/* Qualification Explanation Section */
/* Qualification Explanation Section */
/* Qualification Explanation Section with Three.js */
.qualification-explanation-container {
    position: relative;
    text-align: center;
    padding-top: 40px;
    padding-bottom: 80px;
    overflow: hidden; /* Contain the pseudo-elements and canvas */
    z-index: 0; /* Establish a stacking context */
}

.qualification-explanation-container canvas {
    position: absolute;
    top: -10%;
    left: -10%;
    width: 120% !important; /* Scale up to hide blurred edges */
    height: 120% !important;
    object-fit: cover;
    z-index: -2; /* Place behind the gradient */
    filter: blur(6px); /* Apply blur to the canvas */
    transform: scale(1); /* Initial scale */
    transition: transform 5s linear; /* Slow transition for the zoom effect */
}

.qualification-explanation-container:hover canvas {
    transform: scale(1.2); /* Scale up on hover */
}

/* Gradient Overlay for Contrast */
.qualification-explanation-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 70%);
    z-index: -1; /* Place on top of the blur, behind the content */
}

.qualification-explanation-header h2 {
    font-weight: bold;
    margin-bottom: 10px;
	color:#fff;
	text-transform: uppercase;
}

.content-section {
    text-align: center;
	margin-top: 40px;
	margin-bottom: 0;
}

.content-section-header h2 {
    font-weight: bold;
    margin-bottom: 10px;
	text-transform: uppercase;
    color: #000; /* Black text for sections without a dark background */
}
.faq-section{
	margin-top: 0;
}
.faq-content{
	margin-top: 30px;
}
.faq-content h5{
	padding-bottom: 10px;
}
.qualification-explanation-header p {
    margin: 0 auto 30px auto;
    color: #fff;
}
.qualification-explanation-header h5{
	text-transform: uppercase;
	margin-bottom: 10px;
}
.qualification-explanation-boxes {
    display: flex;
    justify-content: space-between;
    gap: 60px;
    margin-bottom: 40px;
	margin-top: 30px;
    overflow: visible; /* Allow gradient glow to overflow */
}

.qual-box {
    flex: 1;
    border: 2px solid #fff;
    border-radius: 15px;
    padding: 40px;
    text-align: left;
    background-color: #fff;
    position: relative; /* Needed for the pseudo-element */
    z-index: 1;
	cursor: pointer;
}

/* The glowing pseudo-element */
.qual-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 15px; /* Match the parent's border-radius */
    box-shadow: 0 0 0px 0px rgba(255, 255, 255, 0.7);
    transition: box-shadow 0.3s ease-out;
    z-index: -1;
}

.qual-box:hover::before {
    box-shadow: 0 0 20px 10px rgba(255, 255, 255, 0.7);
}
.graph-fix{
	border:0px!important;
}

.qual-box h3 {
    text-align: center;
    font-weight: bold;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.qual-box p {
	font-size: 1.4em;
    color: #333;
	text-align: center;
}

.qual-box p a {
    color: #007bff;
    text-decoration: none;
}

.qual-box p a:hover {
    text-decoration: underline;
}

.qual-explanation-cta button {
    scroll-behavior: smooth;
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.qual-explanation-cta button:hover {
    background-color: #0056b3;
}
.dep-split{
	display: flex;
	justify-content: space-between;
	flex-flow:row nowrap;
	text-align: left;
	margin-top: 50px;
	margin-bottom: 10px;
	line-height:1.3;
	gap: 60px;
}
.dep-split img{
	width:50%;
	border-radius: 5px;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
.dep-split div{
	width:50%;
	padding-right: 20px;
}
.dep-split ul{
	font-size:1.5em;font-weight: 300;
	line-height: 1.6;
}



/* Why Study IT Section Icons */
.qual-box img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    height: 80px;
}


/* Industry Partners Section */
.industry-partners-container {
    text-align: center;
    margin: 90px 0 60px 0;
}

.industry-partners-header {
    margin-bottom: 30px;
	border-top:5px solid;
}

.industry-partners-header h2 {
    font-weight: bold;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.industry-partners-header p {
    color: #555;
    text-transform: uppercase;
}

.partners-logo-bar {
    padding: 40px 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
}

.partners-logo-bar picture {
    display: contents;
}

.partners-logo-bar img {
    height: 85px;
    max-width: 150px;
    object-fit: contain;
}
/* Filter Display */
.filter-display {
    display: none;
    margin:10px 0;
    padding: 10px 0;
    font-size: 14px;
    color: #333;
}
.filter-display2 {
    display: none;
    padding: 10px 0;
    font-size: 14px;
    color: #333;
}

.filter-display .active-filter {
    font-weight: 600;
    color: #D59D10;
}
.filter-display2 .active-filter {
    font-weight: 600;
    color: #D59D10;
}
/* Qualifications Filter Bar */
.qual-filter-bar {
    width: 100%;
    margin: 0 10vw;
    background-color: #fff;
    padding: 30px 0;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 30px;
}

.qual-filter-bar .filter-btn {
	background-color: #f0f0f0;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.qual-filter-bar .filter-btn.active, .qual-filter-bar .filter-btn:hover {
	background-color: #D59D10;
	color: white;
	border-color: #c5930e;
}

/* Custom Dropdown Styling */


.life-dropdown {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #f0f0f0;
    color: #000;
    border: 1px solid #ccc;
    padding: 10px 35px 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 15px top 50%;
    background-size: .65em auto;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.life-dropdown:valid {
    background-color: #D59D10;
    color: white;
    border-color: #c5930e;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
}

.life-dropdown option {
    background-color: #fff;
    color: #000;
}

/* Style for dropdown option hover state (browser support may vary) */
.life-dropdown option:hover {
    background-color: #D59D10;
    color: #fff;
}

/* Desktop/Mobile visibility classes */
.desktop-only {
    display: flex;
}

.mobile-only {
    display: none;
}

.qual-filter-group {
    display: flex;
    flex-direction: column;
    margin: 0;
    min-width: 200px;
    flex-shrink: 0;
	max-width: 100%;
}
.qual-filter-margin20{
	margin-left: 20px;
}

.qual-filter-group .filter-label {
    font-size: 14px;
    color: #666;
    white-space: nowrap;
    margin-bottom: 8px;
    font-weight: 500;
    display: block;
    width: 100%;
}

/* Dropdown styles */
.qual-degree-dropdown {
    position: relative;
    min-width: 200px;
}

.qual-buttons-filter-bar {
    padding-top: 0;
    padding-bottom: 30px;
}

.life-dropdown {
    width: 200px;
    padding: 10px 15px;
    font-size: 0.8em;
    color: #4b4b4b;
    background-color: #F5F5F5;
    border: none;
    border-radius: 4px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23575656' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: right 15px center;
    padding-right: 40px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s ease;
	text-transform: uppercase;
}

.qual-degree-filter .life-btn,
.qual-department-filter .life-btn {
    padding: 10px 16px;
    text-align: center;
    white-space: nowrap;
    margin: 0;
    flex-basis: 0;
	flex-grow: 1;
}

.life-btn {
    background-color: #F5F5F5;
    color: #575656;
    padding: 10px 20px;
    margin: 0;
    font-size: 0.8em;
    font-weight: 500;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
	/* flex-grow: 1; */
}

.life-btn:hover {
    background-color: #ededed;
    color: #333;
}

.life-btn.active {
    background-color: #D59D10;
    color: white;
}
.qual-degree-filter .filter-btn,
.qual-department-filter .filter-btn {
    padding: 10px 16px;
    text-align: center;
    white-space: nowrap;
    margin: 0;
    flex-basis: 0;
	flex-grow: 1;
}

.filter-btn {
    background-color: #F5F5F5;
    color: #292929;
    padding: 10px 20px;
    margin: 0;
    font-weight: 500;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;	
	/* flex-grow: 1; */
}

.filter-btn:hover {
    background-color: #cfcece;
    color: #333;
}

.filter-btn.active {
    background-color: #D59D10;
    color: white;
}
/* Active Department Qualification Tag Borders */
.qual-tag.qt-finearts-border {
    border: 1px solid #B22325; /* Red for Fine Arts */
	background-color: #fff;
	color: #B22325;
}

.qual-tag.qt-design-border {
    border: 1px solid #800080; /* Purple for Design Innovation */
	background-color: #fff;
	color: #800080;
}

.qual-tag.qt-infotech-border {
    border: 1px solid #1476B8; /* Blue for Information Technology */
	background-color: #fff;
	color: #1476B8;
}

.qual-tag.qt-fashion-border {
    border: 1px solid #228C22; /* Green for Fashion + Sustainability */
	background-color: #fff;
	color: #228C22;
}

.qual-tag.qt-creativearts-border {
    border: 1px solid #F26A23; /* Orange for Creative Arts Therapies */
	background-color: #fff;
	color: #F26A23;
}
/* Active Filter Display Text Colors */
.active-filter.active-filter-text-finearts {
    color: #B22325 !important; /* Red for Fine Arts */
}

.active-filter.active-filter-text-design {
    color: #800080 !important; /* Purple for Design Innovation */
}

.active-filter.active-filter-text-infotech {
    color: #1476B8 !important; /* Blue for Information Technology */
}

.active-filter.active-filter-text-fashion {
    color: #228C22 !important; /* Green for Fashion + Sustainability */
}

.active-filter.active-filter-text-creativearts {
    color: #F26A23 !important; /* Orange for Creative Arts Therapies */
}
/* Active Degree Qualification Tag Style */
.qual-tag.qt-degree-active,
.qual-tag.qt-year-active,
.qual-tag.qt-qualification-active {
    background-color: #ffffff !important; /* White background */
    border: 1px solid #000000 !important;   /* 1px black border */
    color: #000000 !important;             /* Black text color */
    /* Ensure padding is sufficient, adjust if necessary */
    /* padding: 2px 5px; */ /* Example: You might need to adjust existing .qual-tag padding or add this */
}
/* Active state for the first button by default */

/* Mobile-only buttons in .landing-btns */
.mobile-only-btn {
  display: none; /* Hidden by default */
}
.qual-degree-filter .filter-btn:first-child {
    background-color: #D59D10;
    color: #fff;
}
.life-dropdown:hover {
    background-color: #e8e8e8;
}

.life-dropdown:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(213, 157, 16, 0.3);
}

.life-dropdown option {
    padding: 10px 15px;
    background-color: #fff;
    color: #4b4b4b;
}

.life-dropdown option:first-child {
    color: #999;
}

.qual-degree-filter,
.qual-department-filter {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
}

/* Reveal-on-scroll helpers (global) */
.reveal {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 450ms ease, transform 450ms ease;
	will-change: opacity, transform;
  }
  .revealed {
	opacity: 1;
	transform: none;
  }
  
/* Add Animation */
/* Removed scale animation for modal and caption */

	/* The Close Button */
	.close {
		position: absolute;
		top: 15px;
		right: 35px;
		color: #f1f1f1;
		font-size: 50px;
		font-weight: bold;
		transition: 0.3s;
	}
	
	.close:hover,
	.close:focus {
		color: #bbb;
		text-decoration: none;
		cursor: pointer;
	}
	/* modal ends*/
	/*
	####################################################
	M E D I A  Q U E R I E S
	####################################################
	*/
	@media screen and (-webkit-min-device-pixel-ratio:0) { 
		.turn-off{
			visibility: hidden;
			height: 0;
			opacity:0;
			height: 0;
		}
		.turn-off-complete{
			visibility: hidden;
			display: none;
			height: 0;
			border:0;
		}
		.hide{visibility: hidden;}
		@keyframes show {
			0% {
			  visibility: hidden;
			  opacity: 0;
			}
		  
			100% {
			  visibility: visible;
			  opacity: 1;
			}
		  }
		  
		  @keyframes hide {
			0% {
			  visibility: visible;
			  opacity: 1;
			}
		  
			100% {
			  visibility: hidden;
			  opacity: 0;
			}
		  }
		  .menu-layer{padding-top: 20px;}
		  .head-menu-close{visibility: visible;height: 0;margin-top:20px;}
		  .mainmenu-logo{visibility: visible;margin-top: 0;}
		  .menu-borders{visibility: hidden;}
		  .menu-sublinks-dep-off{visibility: hidden;opacity: 0;}
		}
    
	
	/* Extra large devices (large desktops, 1200px and up)
	 * No media query since this is the default in Bootstrap because it is "mobile first"
	 */
	 @media (max-width: 1400px) {
		h1{  
			font-size: 2.5em;
			font-weight: bold;
		}
		h2{
			font-size: 2.4em;
		}
		
		h3{
			font-size:1.6em; 
		}
		h5{
			font-size:1.9em;
		}
		h6{
			margin: 0;
			padding-top:10px;
			padding-bottom: 10px;
			font-size:0.9em;
		}
		p{
			font-size:1.5em;
		}
		.head-logo{
			padding-left: 20px;
		}
		.head-logo h5{
			font-size:1.1em;
		}
		.head-logo-home{padding-left: 20px;}
		.head-logo-home h5{font-size:1.1em;}
		.mainmenu-logo{margin-left: 20px;}
		.mainmenu-logo h5{font-size:1.1em}
		.logoW{height:28px;width:52px;}
		.logoW-menu{height:28px;width:52px;}
		.head-menu-area{height:52px;width:160px;}
		.head-menu-area h5{font-size:1.1em}

		/* hero heading */
		.landing-hero-primary{
			padding-left: 6%;
			padding-right: 6%;
			height: 8vh;
		}
		.landing-hero-primary > h1{
			padding-left: 8%;
			font-size:1.7em;
			padding-right: 8%;
		}
		/* landing main */
		.landing-main{
			padding-top: 10px;
		}
		.landing-main-menu > div{
	
			width:160px;
			margin-bottom: 4px;
		}
		.landing-road{
			margin-left:12vw;
			margin-right: 12vw;
			margin-top: 0;
		}
		.landing-main-pathways{
			min-height:350px!important;
			margin-left:3vw;
			margin-right: 3vw;
			column-gap: 15px;
		}
		/****** PATHWAYS ********/
		.pathway-wrapper{
			padding:0;
			padding-top: 20px;
			padding-bottom: 15px;
			min-height:12vh;
		}
		/* Ensure hover never moves the card */
		.pathway-wrapper:hover{
			transform: none !important;
		}
		.pathway-title{
			font-size:1em;
		}
		.pathway-desc p{
			font-size:1em;
		}
		.pathway-tags{
			font-size:1.1em;
			column-gap:8px;
			margin-bottom: 15px;
			margin-left: 15px;
			margin-right: 15px;
		}
		.pathway-tag{
			padding:9px;
			margin-top: 10px;
			font-size: 0.8em;
		}
		.pathway-arrow{
			width:35px;
			height:35px;
			margin-bottom: 10px;
		}
		/* landing hero secondary */
		.landing-hero-secondary{
			margin-top: 0;
			min-height: 64px; /* Fixed height to stabilize layout across devices */
			font-size:1em;
		}
		.landing-hero-secondary h4{font-size:1em;}
		.arrow {
			border-width: 0 3px 3px 0;
			padding: 4px;
			margin-right:1px;
		  }

		.hm-student-wrapper{
			gap: 15px;
		}
		/* student box **/
	
		.hm-student-box{
			
			flex-basis: calc(50% - 10px);
			min-height:550px;
		}
		.hm-student-box p{
			margin-left: 15px;
			margin-right: 15px;
		}
		.hm-student-box h3{
			margin-left: 15px;
			margin-right: 15px;
			margin-bottom: 0;
			padding-bottom: 0;
		}
		.hm-student-box-img{min-height:300px;}
		.hm-student-box-img img {
			object-fit:cover;
			object-position: top ;
			border-radius: 6px;
			height:350px!important;
			width:100%;
	  }
	  	.hm-student-box-title h5{margin-left: 15px;margin-right:15px;font-size:1.5em;}
		.hm-alumni{
			margin: 0;
		}
		.hm-student-box-dep p{font-size:1.3em;}
		.hm-alumni-video{
			min-height:60vh;
			position: relative;
			margin-top: 5vh;
		}
		.hm-alumni-video iframe{
			position: absolute;
			top:0;
			left: 0;
			width: 100%;
			height: 100%;
		}
		.hm-alumni-video h1{
			opacity: 0;
		}
		.hm-alumni-wrapper{
			margin-left: 3%;
			margin-right: 3%;
			display: flex;
			flex-flow: row wrap;
			box-sizing: border-box;
			gap: 20px;
		}
		.hm-alumni-wrapper h1{
			width:100%;
			margin-top: 5vh;
			border-bottom:2px groove gray;
		}

		.hm-alumni-wrapper p{
			padding-left: 15px;
		}
		.hm-alumni-img{
			height:300px;
			overflow: hidden;
			margin-bottom: 15px;
		}
		.hm-alumni-img img{
				max-inline-size: 100%;
				block-size: auto;
				object-fit: cover;
				object-position: top center;
		}
		.hm-alumni-name{
			width:100%;
			height: auto;
		}
		.alumni-container{
			display: flex;
			flex-flow: row wrap;
		}
		.hm-alumni-p{
			min-height:70px;
			padding-right: 10px;
		}
		.hm-alumni-main{
			width:100%;
			display: flex;
			flex-flow: row nowrap;
		}
		.hm-alumni-btn{
			background-color: #585858;
			height:50px;
			width:50px;
			margin-top: auto;
			margin-bottom: auto;
			border-radius: 50%;
			margin-left: 5px;
			align-self: flex-end;
		}
		/****** news ******/
		.news{
			min-height:210px;
			flex-basis: calc(50% - 12px);/* cal to make space between*/
			flex-flow: row wrap;border-radius:3px;
		}
		.news-self{
			min-height:210px;
			flex-basis: calc(50% - 12px);/* cal to make space between*/
			flex-flow: row wrap;border-radius:3px;
		}
		.hm-newsevents{
			padding-left: 3%;
			padding-right: 3%;
			gap:40px;
			padding-top: 40px;
		}
		.hm-news-wrapper{
			display: flex;
			flex-flow:row wrap;
			gap:15px;
			
		}
		.hm-events-wrapper{
			display: flex;
			gap:15px;
			flex-flow:row wrap;
		}
		.hm-newsevents h1{
			width:100%;
			border-bottom:2px solid black;
			padding-bottom: 10px;
			margin-bottom: 15px;
		}
		.hm-news-box{
			width:45%;
			background-color: #f1f1f1;
			min-height: 300px;
			display: block;
			padding: 15px;
		}
		.hm-news-box img{
			width:50%;
			overflow: hidden;
			max-height: 150px;
				object-fit:cover;
				object-position: top center;
			float:left;
		}
		.hm-news-right{
			width:48%;
			float: right;
			box-sizing: content-box;
			margin-left:  2%;
			padding-top: 10px;
			font-size:1em;
		}
		.hm-news-box h4{
			width:100%;
			float:left;
			margin-top:15px;
			font-size:1.5em;
			margin-bottom: 0;
		}
		.hm-news-box p{
			width: 100%;
			float: left;
			margin-top: 15px;
		}
		.hm-news-btn{
			float:right;
			width:100%;
			margin-top: 20px;
			text-align: right;
			margin-right: 20px;
			font-size:1.2em;
			text-decoration: underline;
		}
		/***** events home ****/
		.hm-events-box{
			min-height:210px;
			width:100%;
			background-color: #f1f1f1;
			display: flex;
			flex-flow:row wrap;
		}
		.hm-events-datearea{
			width:25%;
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			align-items: center;
		}
		.hm-events-info{
			width:75%;
			display: flex;
			flex-flow:row wrap;
			justify-content: right;
		}
		.hm-events-info h4{
			margin-bottom: 5px;
			width:100%;
		}
		.hm-events-info p{
			margin-bottom:15px;
			margin-top: 5px;
			margin-right: 15px;
			width:100%;
		}
		.hm-events-month{
			text-align: center;
			width:100%;
			align-self: flex-end;
		}
		.hm-events-day{
			width:100%;
			text-align: center;
			font-size:4em;
			align-self: flex-start;
		}
		.hm-events-btntext{
			text-decoration: underline;
			align-self: center;
			font-size:1.2em;
			padding-right: 15px;
		}
		.hm-events-btn{
			display: flex;
			justify-content: center;
			align-items: center;
			height:40px;
			width:40px;
			border-radius: 50%; 
			margin-right: 15px;
		}
		.hm-events-info > div{
			margin-bottom: 15px;
			justify-self: flex-end;
		}
		/*** events btn ****/
		/***** hm locations ***/
		.hm-locations{
			display: flex;
			flex-flow: column wrap;
			gap:15px;
			padding-left: 3%;
			padding-right: 3%;
			padding-top: 7vh;
		}
		.hm-locations h1{
			border-bottom:2px solid gray;
			margin-bottom:20px;
		}

		.hm-locations h3{
			margin-bottom: 15px;
		}
		.hm-locations-expanded{
			min-height:200px;
			display: flex;
			flex-flow:column;
			gap:15px;
			border-bottom: 2px dashed gray;
			justify-content: flex-start;
		}
		.hm-locations-campus{
			display: flex;
			flex-flow:row nowrap;
			gap: 20px;
	
		}
		.hm-locations-campus > div{
	
			min-height: 250px;
		}
		.hm-locations-img{
			width:28%;
			border-radius: 5px;
			background-color: #fff;
			height: auto;
			min-height: auto;
			overflow: hidden;
		}
		.hm-locations-img img{
			object-fit:cover;
			display: block;
			object-position:center;
			margin-left: auto;
			margin-right: auto;
		}
		.hm-locations-info{
			width:46%;
			display: flex;
			flex-flow: row wrap;
			padding-left: 15px;
		}
		.hm-locations-info h6{
			font-size:1.1em;
			margin-top: 15px;
		}
		.hm-locations-info div{
			width:50%;
		}
		.hm-locations-info p{
			margin-top: 10px;
			margin-bottom: 15px;
			padding-right: 15px;
		}
		.notexpanded{
			display: flex;
			flex-flow: row; 
			border-bottom: 2px dashed gray;
			vertical-align: middle;
		}
		.notexpanded h2{
			align-self: center;
			justify-self: center;
			width:80%;
	
		}
		.notexpanded div{
			display: flex;
			align-self: center;
			justify-self: center;
		}
	
		/***** footer  ***/
		
		.f-btn{
			background-color: #000;
			border:1px solid #fff;
			color:#fff;
			padding: 15px;
			font-size:1.1em;
		}
		.margin-10vw{margin-left: 60px;margin-right: 60px;}
		/* studnet work*/
		.color-block-student{padding-left: 60px;padding-right: 60px;}
		.student-work-landing{min-height:auto;margin-left: 60px;margin-right: 60px;height: auto;}
		.news-content{margin-left:60px;margin-right: 60px;padding: 0;}
		.event{flex-basis:calc(50% - 10px)}
		.member-profile-img{width:100%;}
		.gallery-2 div{max-height:370px;}
		.gallery-2 img{object-fit: cover;}
		.expanded-wrapper{
			flex-flow:row wrap;
			gap:15px;
			padding:0 60px 0 60px;
		}
		.expanded-wrapper-dep{
			flex-flow:row wrap;
			gap:15px;
			padding:0 60px 0 60px;
		}
		.qual-heading{font-size:2em!important;}
		.qual-small{font-size:1.3em!important;}
		.menulinks li{
			font-size:1.6em;
			margin-top: 15px;
		}
		.menu-sublinks > li{
			font-size:0.9em;
			margin-top: 4px;
			font-weight: lighter;
		}
		.school-listing-micro > div{
			width:100%;
		}
		.qualification-explanation-container{
			padding-left: 60px;
			padding-right: 60px;
		}
		.footer-menu{padding-bottom: 10px;padding-top: 10px; height:auto;}
	}
	 /* tablethere */
	 /* Large devices (desktops, 992px and up) */
	 @media (max-width: 1199px) {
		
		.landing-degree-layer{
			margin-left: 20px;
			margin-right: 20px;
		}
		.landing-degree-layer2{
			margin-left: 20px;
			margin-right: 20px;
			margin-top: 20px;
		}
		.landing-degree-layer2 > div{
			flex-basis:calc(33.3% - 20px);
		}
		.news{
			min-height:210px;
			flex-basis: 100%;/* cal to make space between*/
			flex-flow: row wrap;border-radius:3px;
		}
		.news > img{min-height:400px}
		.news > h5{min-height:auto;font-size:1.5em;}		
		.hm-event{
			display: flex;
			min-height: 270px;
			flex-flow: row wrap;border-radius:3px;
			box-shadow:0 2px 4px 0 rgba(0,0,0,0.16);
			background-color: #fafafa;
		}
		.hm-events-datearea{
			height:auto;
			width:100%;
		}
		.hm-events-info{
			width:100%;
			display: flex;
			flex-flow:row wrap;
			justify-content: right;
			margin-left: 15px;
			margin-right: 15px;
		}
		.hm-events-info > h5{
			padding-top:0px;
		}
		.hm-student-box-img{
			height:auto;
		}
		/*department */
		.depbg-img img{ opacity: 0.5;}
		.school-landing { min-height: auto;}
		.school-landing h1{width:100%;}
		.padding-10vw{padding-left: 40px;padding-right: 40px;}
		.margin-10vw{margin-left:40px;margin-right:40px;}
		.school-landing h3{width:100%;font-size:1.6em;}
		.school-landing h4{width:100%;font-size:1.6em;}
		.school-landing p{width:100%;font-size:1.4em;}
		.schools{background-image: none!important;}
		.school-menu{
			padding-top: 20px;
			flex-flow: row wrap;
			column-gap: 20px;
			align-items: flex-end;
			justify-content: flex-end;
			position: relative;
			height: auto;
		}
		.school-menu div{
			flex-basis:calc(20% - 10px);
			align-items: center;
			justify-content: flex-end;
			margin-top: 10px;margin-bottom: 10px;
			flex-grow:1;
		}
		.dep-menu-fix{height:0;width:0;display: none;}
		.dropbtn{width:100%;}
		.schoolbtn{width:100%!important;}
		.dropdown-content{
			margin-left: 20px;
			position: absolute;
			z-index:0;
		}
		.degree{
			padding: 20px 20px 0 20px;
	
		}
		.school-listing > div{padding-bottom: 20px;}
		.degree-block{padding-bottom: 20px;}
		.degree-block img{margin-bottom: 20px;width:calc(100% - 80px);}
		.degree > h2{font-size:2em;margin-bottom: 0px;}
		.degree-intro{flex-flow:row wrap;}
		.degree-info{width:100%;}
		.degree-info-qual{margin-left: 40px;}
		.degree-intro-paragraph{padding-right: 0;margin-top: 20px;}
		.degree-intro-paragraph{width:100%;}
		.degree-arrow-wrapper{margin-top:20px; margin-left:auto;margin-right: auto;}
		.related-info-box{display:block;}
		.hm-student-box h5{margin-left: 15px;}
		.hm-student-box{padding-bottom:20px;margin-bottom: 20px;}
		.member-wrapper{gap:20px;margin:40px;flex-flow: row wrap;}
		.member-wrapper > div {flex-basis:calc(33.3% - 16px);}
		.memberCard{width:calc(33.3% - 14px);} 
		/* Ensure member excerpts align with surrounding content */
		.member-excerpt{margin-left:20px;margin-right:20px;}
		
		.hm-alumni-wrapper > div, .hm-alumni-wrapper > a {flex-basis:calc(50% - 10px);} 
		.sl-people-grid > div, .sl-people-grid > a {flex-basis:calc(50% - 10px);}
		/* studnet work*/
		.color-block-student{padding-left: 40px;padding-right: 40px;}
		.student-work-landing{margin-left: 40px;margin-right: 40px;}
		.news-content{margin-left:40px;margin-right: 40px;padding: 0;}
		/*newevents*/
		.event{flex-basis:calc(50% - 10px)}
		/* locatiosn home clean this*/
		.hm-locations-expanded{
			min-height:200px;
			display: flex;
			flex-flow:row wrap;
			gap:30px;
			border-bottom: 2px dashed gray;
			justify-content: flex-start;
		}
		.hm-locations-campus{
			display: flex;
			flex-flow:row wrap;
			gap: 20px;
	
		}
		.hm-locations-campus > div{
	
			min-height: auto;
		}
		.hm-locations-img{
			width:100%;
			border-radius: 5px;
			background-color: #f1f1f1;
			height: auto;
			overflow: hidden;
		}
		.hm-locations-img img{
			object-fit:cover;
			display: block;
			object-position:center;
			max-width: 100%;
		}
		.hm-locations-info{
			width:100%;
			display: flex;
			flex-flow: row wrap;
			padding-left: 15px;
		}
		.hm-locations-info h6{
			font-size:1.1em;
			margin-top: 15px;
		}
		.hm-locations-info div{
			width:100%;
		}
		.hm-locations-info p{
			margin-top: 10px;
			margin-bottom: 15px;
			padding-right: 15px;
		}
		.member-profile-img{width:100%;}
		.container-split2{flex-flow:row wrap;margin-top: 20px;}
		.member-profile-img2{width:auto;height:auto;}
		.member-profile-img2 img{margin-left: auto;margin-right: auto;}
		.member-profile-info{width:100%;}
		.member-full{content-visibility: visible;}
		.member-tablet{content-visibility: hidden;}
		.modal-content {
			width: 100%;
		}
		.hero-gradient{display: none;}
		.footer-menu > div{width:100%;margin:10px 0 20px 0;}
		.footer-menu{height: auto;padding:20px 0 20px 0;}
		.footer-menu-main > div{width:100%;margin:10px 0 20px 0;}
		.footer-menu-main{height: auto;padding:20px 0 20px 0;}
		.footer-heading{font-size:0.9em;}
		.footer-links p{margin-left: 0;flex-basis:33.33%;text-align: center;font-size:1.2em;}
		.footer-social{gap:40px}
		.footer-social div{height: 40px;width:40px;background-color: #fff;}
		.footer-btn{margin: 20px 0 20px 0;}
		.footer-social div{display: flex;align-items: center;justify-content: center;}
		.footer-social img{width:60%;}
		.mainmenu-logo{
			width:auto;
		}
		.mainmenu{height:75%;}
		.menulinks > li{
			margin-top: 20px;
			font-size:1.6em;
		}
		.head-menu-close h3{font-size:2em;}
		.menu-sublinks{margin-left: 20px;}
		.menu-sublinks > li{margin-top: 10px;font-size:1.1em;}
		.footer-links-menu{content-visibility:hidden; display:none;}
		.menu-footer{margin-top: 0px;}
		.gallery-2 > div{height: 260px;}
		.life-menu{width:30%;}
		.global-img{margin-top: 40px;}
		.apply-prepare-block{width:50%;gap:20px;}
		.apply-prepare-path{width:40px;}
		.depbg-img img{ content-visibility: hidden;}
		.apply-locations-map{width:100%;}
		.apply-locations-txt{width:100%;}
		.img-border{height:auto;}
		.dep-expanded-on{
			height:auto;
		}
		.expanded-wrapper{
			flex-flow:row wrap;
			gap:0;
			padding:0 40px 20px 40px;
		}
		.expanded-wrapper-dep{
			flex-flow:row wrap;
			gap:0;
			padding:0 40px 20px 40px;
		}
		.school-landing{height:auto;}
		.expanded-btn{margin-top: 20px;display:flex; flex-grow:1;}
		.expanded-btn > a{display: flex;flex-grow:1;text-decoration: none;margin-right: 20px;}
		.expandedBtn{flex-grow:1;}
		.degree-info-qual{width:auto;margin-right: 40px;}
		.qual-short-info div{padding-right: 40px;}
		.cred-short-info div{padding-right: 40px;width:40%;}
		.cred-short-info{flex-wrap: wrap;}
		.qual-cost{flex-flow:row wrap;}
		.qual-cost div{width:100%;}
		.hm-alumni-img{height:auto;}
		.qual-calendar{flex-flow: row wrap;}
		.qual-calendar div{min-width:auto;margin-bottom: 10px;}
		.qual-calendar div p{margin-right: 40px;min-height:auto;}
		.gform-theme--foundation .gfield .ginput_password.medium,.gform-theme--foundation .gfield input.medium,.gform-theme--foundation .gfield select.medium{inline-size:100%!important;}
		.qual-filter-bar {
			margin:0 40px!important;
			padding: 0px 20px;
			gap: 15px;
		}
		.hm-alumni-video{
			aspect-ratio: auto;
			min-height: auto;
			height: clamp(320px, 52vw, 500px);
			overflow: hidden;
		}
	}
	 
	 /* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
	 @media (max-width: 991px) {
		.school-landing{

			height:auto;
		}
		.qual-landing a{text-decoration: none;width:100%;}
		/*hm news and events*/
		p{font-size:1.4em;}
		.news{
			min-height:210px;
			flex-basis: calc(100% - 12px);/* cal to make space between*/
			flex-flow: row wrap;border-radius:3px;
		}
		.hm-news-wrapper{
			width:100%;
			display: flex;
			flex-flow:row wrap;
			gap:15px;	
		}
	
		.hm-events-wrapper{
			width:100%;
			flex-flow:row wrap;
		}
		.hm-newsevents{
			display: flex;
			flex-flow: row wrap;
			padding-left: 20px;
			padding-right: 20px;
			gap:40px;
			padding-top: 20px;/* was 40px */
			align-items: flex-start;
		}
		.hm-event{
			display: flex;
			min-height: 270px;
			flex-flow: row nowrap;border-radius:3px;
			box-shadow:0 2px 4px 0 rgba(0,0,0,0.16);
			background-color: #fafafa;
		}
		.hm-events-datearea{
			height:auto;
			width:25%;
		}
		.hm-events-info{
			width:75%;
		}
		.hm-events-info > h5{
			padding-top:20px;
		}
		/* alumni */
		.hm-alumni-wrapper > div,
		.hm-alumni-wrapper > a{
			width:100%;
			flex-basis:auto;
		}
		.hm-alumni-img{height:500px;}
		
		.hm-alumni-btn{margin-left:20px;}
		.news > img{max-height:400px}
		.hm-student-box{
			width:100%;
			min-height:200px;
			padding-bottom: 10px;
		}
		.hm-student-box > div{margin-bottom: 5px;}
		.hm-student-box-img{
			height:360px;
		}
		.hm-student-box-qual p{font-size:1.2em;}
		.hm-student-box-p{content-visibility: hidden;height:0px;display: none;}
		.hm-student-box-title{margin-top: 10px;}
		.hm-student-box-title, .hm-student-box-author{width:100%;}
		.hm-student-box-author p{text-align: left;}
		.hm-student-box-btn{content-visibility: visible; padding-right:0px;margin-right:0px;margin-top: 20px;justify-content: center;}
		.landing-hero-primary{height:15vh;}
		
		.school-menu div{
			flex-basis:calc(50% - 10px);
		}
		.dep-menu-fix{height:0px;width:0px;display: none;}
		.dropbtn{width:100%;}
		.schoolbtn{width:100%!important;}
		/* quals */
		.school-listing{margin:20px 20px 20px 20px!important;}
		.school-listing2{margin:20px 0 20px 0!important;}
		.school-listing > .border-1{border:0;}
		.school-listing2 > .border-1{border:0;}
		.pathway-tags-dep{margin-right: 0;}
		/*qual members */
		.member-wrapper{gap:20px;flex-flow: row wrap;}
		.margin-10vw{margin-left: 20px;margin-right: 20px;}
		.margin-40full{ margin:40px;}
		.margin-40{margin-left: 40px;margin-right: 40px;}
		.degree-block img{min-height:auto;width:calc(100% - 80px);margin-left: 40px;margin-right: 40px;}
		.degree-info{margin-top: 20px;}
		.related-info-box-alumni > div{width:100%;margin-bottom: 20px;}
		.related-info-box-alumni{display: inline-block;}
		.hero-gradient{display: none;}
		.split-half > h4{font-size: 1.6em;}
		.half-half{width:100%;}
		.news-gallery > div{flex-basis: 100%;}
		.news-content{margin: 0 20px 0 20px;}
		.color-block-student{padding:20px;}
		/*newevents*/
		.event{flex-basis:calc(100%)}
		.events-menu{min-height:130px;flex-flow: row wrap}
		.hm-locations-campus{
			display: flex;
			flex-flow:row wrap;
			gap: 20px;
	
		}

		.container-split2{gap:20px;flex-flow:row wrap;margin-top: 20px;}
		.member-profile-img2 img{margin-left: auto;margin-right: auto;}
		.member-profile-info{width:100%;}
		.member-full{content-visibility: visible;}
		.member-tablet{content-visibility: hidden;}
		.mainmenu{height:80vh;}

		.menu-borders{margin-left: 40px;}
		.menulinks{margin-left: 40px;}
		.gallery-2 > div{flex-basis:auto;height:auto;margin: 0 20px 0 20px;}
		.life-menu{width:30%;}
		.life-btn{width:90%;}
		.global-img{margin-top: 60px;}
		.life-gallery div{flex-basis: calc(33% - 20px);}
		.apply-menu{flex-flow:row wrap;}
		.apply-locations-map{width:100%;}
		.apply-locations-txt{width:100%;}
		.full-gallery{flex-wrap: wrap;}
		.full-gallery > div{margin-left: 20px;margin-right: 20px;}
		.hm-student{
			padding-left: 20px;
			padding-right: 20px;
		}
		.video-h2{font-size:2em;margin-top: 20px;margin-left: 20px;margin-right: 20px;}
		.hm-alumni-video{
			margin-left: 0; /* avoid double 20px with parent padding */
			margin-right: 0; /* was causing 40px overflow visually */
			max-width: 100%;
			box-sizing: border-box;
			overflow: hidden; /* prevent horizontal overflow on tablets */
			aspect-ratio: auto; /* override 16/9 — prevents width blowout on iPad */
			min-height: auto;
			height: clamp(280px, 50vw, 420px);
		}
		/* Ensure embeds scale within the video container on tablets */
		.hm-alumni-video iframe,
		.hm-alumni-video video,
		.hm-alumni-video .wp-block-embed__wrapper iframe,
		.hm-alumni-video .wp-block-embed__wrapper video{
			width: 100% !important;
			height: auto !important;
			display: block;
		}
		/* Cap Gutenberg wrappers inside alumni video */
		.hm-alumni-video .wp-block-embed__wrapper,
		.hm-alumni-video figure.wp-block-embed,
		.hm-alumni-video .wp-block-video{
			max-width: 100% !important;
		}
		/* Remove default margins/padding that cause visual offset */
		.hm-alumni-video figure,
		.hm-alumni-video .wp-block-embed,
		.hm-alumni-video .wp-block-embed__wrapper,
		.hm-alumni-video .wp-block-video{
			margin: 0 !important;
			padding: 0 !important;
			width: 100% !important;
			box-sizing: border-box;
		}
		.split-50 {flex-flow:row wrap;}
		.split-50 div{width:100%;}
		.about-fix{width:100%!important;}
		.p-left > p{padding-right: 0;}
		.news-single-img{flex-basis:100%;margin-right: 0;}
		.news-gallery2{content-visibility: hidden;display: none;}
		
		.news-single-editor{flex-basis:100%;}
		.news-gallery-mob{
			display: flex;
			content-visibility: visible;gap:20px;
			flex-flow:row wrap;
		}
		.news-gallery-mob h2{width:100%;}
		.news-gallery2-mob > div{
			flex-basis:100%;min-height:auto;
			position: relative;
			overflow: hidden;
			
		}
		.news-gallery2-mob img{
			position: absolute;
			height: auto;
			top: 0;
			min-height:100%;
			min-width:100%;
			width:100%;
			height:100%;
			left: 50%;
			transform: translateX(-50%);
			object-fit: cover;
			  object-position: center;
		}
		.h2-news{margin-top: 20px;font-size:1.9em;}
		.menulinks{
			color:#FFF;
			display: flex;
			margin-top: 5px;
			flex-flow: row wrap;
			margin-bottom:0;
			gap: 0;
			height: calc(78vh - 60px);
			flex-grow: 0;
			margin-left: 0;
		}
		
		.menulinks > li{
			width:100%;
			font-size:1.7em;
			font-weight: bold;
			margin-left: 0;
			margin-top: 15px;
			align-self: flex-start;
			justify-self: flex-start;
			flex-grow:0;
			height: 10px;
		}
		.menu-footer{
			height:auto;
			display: flex;vertical-align: bottom;
			align-self: flex-end;
			padding-top: 10px;
		}
	
		.menu-sublinks > li{font-size:1.2em;font-weight: lighter;}
		.menu-sublinks{padding-left: 0;margin-top: 0;}
		.it-micro-menu h2{
			font-size:1.8em;
		}
		
		.cta-menu{
			margin-right: 0;
		}

		.cta-menu-item a{padding: 12px 15px;font-size:0.8em;}
		.head-logo-cta{
			padding-left: 10px;
			/* margin-top: 10px; */
		}
		/* Keep other existing rules for this media query below if any */
		.head-logo-cta #head-logo{
			font-size: 1em;
		}
		
		.head-logo-cta .logoW {
			height:30px;
			width: auto;
		}
		.qual-filter-bar {
			padding: 15px 20px;
			gap: 15px;
		}
		
		.qual-filter-group {
			margin-bottom: 15px;
		}
		
		.qual-degree-dropdown {
			min-width: 100%;
		}
		
		.filter-btn {
			font-size: 0.9em;
			padding: 8px 12px;
		}
		.qual-filter-bar {
			margin:20px 20px 0px 20px!important;
			padding: 0px 0px;
			gap: 15px;
		}
	}
	 
	 /* Small devices (landscape phones, 544px and up) */
	 @media (max-width: 767px) {
		.hm-alumni-wrapper > div,
		.hm-alumni-wrapper > a{
			width:100%;
			flex-basis:auto;
		}
		/* Featured video: avoid overly tall container on mobile */
		.hm-alumni-video{
			min-height: auto; /* override desktop */
			aspect-ratio: auto; /* disable 16:9 on mobile */
			height: clamp(120px, 36vw, 200px); /* smaller than before */
			margin-left: 4vw;
			margin-right: 4vw;
			margin-top: 8px;
			margin-bottom: 16px;
		}
		/* Smaller play button on mobile */
		.hm-alumni-video .yt-poster::before { width: 64px; height: 64px; }
		.hm-alumni-video .yt-poster::after {
			margin-left: 3px;
			border-left: 20px solid #fff;
			border-top: 12px solid transparent;
			border-bottom: 12px solid transparent;
		}
		/* Featured video heading tweaks */
		.video-h2{
			font-size: 1.8em;
			margin: 16px 4vw 8px 4vw; /* reduce large top margin */
		}
		/* Global H2 sizing for mobile */
		h2{
			font-size: 2em;
			margin-bottom: 20px;
		}

		/* Events: force single column on mobile */
		.hm-events-wrapper .news-self,
		.events-listing .news-self,
		.event{
			flex-basis: 100% !important;
			width: 100%;
		}
		.school-landing h4{
			font-size:1.3em;margin-right: 0;
		}
		.school-landing p{font-size:1.2em;}
		.school-menu{gap:0;}
		.school-menu div{
			flex-basis:100%;
		}
		.hero-gradient{display: none;}
		.student-work-landing{min-height: auto;}
		.events-menu{min-height:300px;flex-flow: row wrap}
		.split-50 {flex-flow:row wrap;}
		.split-50 div{width:100%;}
		.about-social{gap:20px;}
		.about-social div{height: 60px;width: 60px;}
		.life{flex-flow: row wrap;}
		.life-menu{width:100%;}
		.life-btn{width:100%;text-align: center;}
		.global-img{margin-top: 60px;width:100%;}
		.life-gallery div{flex-basis: calc(50% - 20px);}
		.life-p{margin-top: 40px;width:100%;}
		.apply-prepare{flex-flow:row wrap;}
		.apply-menu{flex-flow:row wrap;}
		.apply-prepare-block{width:100%;gap:20px;}
		.apply-prepare-path{width:40px;}
		.hm-student-box-img{
			height:auto;
		}
		.about-fix{width:100%!important;}
		.p-left > p{padding-right: 0;}
		.head-menu-area{height:40px;width:auto;margin:0;padding: 0 20px 0 20px;}
		.menulinks{margin-left: 0;}
		.cred-info{width:100%;}
		.cred-intro-paragraph{width:100%;}
		
		.filter-display2 {
			margin-top: 0;
		}
		.qual-degree-dropdown {
			width: 100%;
		}
		.qual-filter-group {
			width: 100%;
			margin: 0;
			padding:20px 0 20px 0!important;
		}
		
		.qual-filter-group:first-child {
			margin-bottom: 0;
		}
		
		.qual-degree-filter,
		.qual-department-filter {
			flex-wrap: wrap;
			gap: 8px;
		}
		
		.filter-btn {
			padding: 6px 10px;
		}
		.mobile-only-btn {
			display: block; /* Or 'flex' if .landing-btns is a flex container and you want them to behave as flex items */
		  }
		
		  /* Hide original CTA buttons in the header on mobile, if not already hidden */
		  /* You mentioned they are already disabled/hidden, but this is a common pattern */
		  /*
		  .cta-menu .cta-schedule,
		  .cta-menu .cta-contact {
			display: none !important; 
		  }
		  */

		  .desktop-only {
			display: none !important;
		}
		.mobile-only {
			display: block !important;
		}
		.qual-filter-bar {
			flex-direction: column;
			gap: 0;
			padding: 0 0;
		}
		
		.qual-filter-group {
			width: 100%;
			min-width: 100%;
		}
		
		.desktop-only {
			display: none;
		}
		
		.mobile-only {
			display: block;
		}
		
		.qual-degree-dropdown,
		.qual-department-dropdown {
			width: 100%;
		}
		
		.life-dropdown {
			width: 100%;
			max-width: none;
		}
		.qualification-explanation-boxes {
			flex-direction: column;
			gap:0;
			margin-bottom:0;
		}
		.qualification-explanation-header{
			margin-top: 20px;;
		}
		.qual-box {
			margin-bottom: 20px;
			padding: 20px;
		}
		.qual-box p{font-size: 1.2em;}
		.content-section{
			margin-bottom: 0;
		}
		.content-section-header{
			margin-bottom: 20px;
		}
		.dep-split{
			flex-direction: column;
			gap: 20px;
			margin-top: 20px;
			margin-bottom: 0;
		}
		.dep-split ul{font-size:1.1em;
		padding-inline-start: 20px;}
		.dep-split img{
			width:100%;
		}
		.dep-split div{
			width:100%;
		}
		.faq-content h5{
			font-size:1.4em;
			
		}
		.industry-partners-container{
			margin: 60px 0 20px 0;
		}
		.qual-box h3{
			margin-bottom: 0;
			font-size:1.5em;
		}
	 }
	 
	 /* Extra small devices (portrait phones, less than 544px) */
	 @media (max-width: 543px) {
		
		h1{  
			font-size: 2em;
		}
		h2{
			font-size: 2em;
			margin-bottom: 20px;
		}
		h4{
			font-size:1.5em;
		}
		h3{
			font-size:1.6em; 
		}
		h5{
			font-size:1.9em;
		}
		h6{
			margin: 0;
			padding-top:10px;
			padding-bottom: 10px;
			font-size:1.4em;
		}

		/* Featured video tighter margins on very small screens */
		.hm-alumni-video{
			min-height: auto;
			aspect-ratio: auto;
			height: clamp(110px, 34vw, 180px);
			margin-left: 3vw;
			margin-right: 3vw;
			margin-bottom: 12px;
		}
		/* Even smaller play button on very small screens */
		.hm-alumni-video .yt-poster::before { width: 56px; height: 56px; }
		.hm-alumni-video .yt-poster::after {
			margin-left: 2px;
			border-left: 18px solid #fff;
			border-top: 11px solid transparent;
			border-bottom: 11px solid transparent;
		}
		/* Featured video heading tighter on XS */
		.video-h2{
			font-size:2em;
			margin: 12px 3vw 6px 3vw;
		}
		p{
			font-size:1.3em;
		}
		.menu-layer{padding-top: 0;}
		.landing-bg-default {
    background-image: url(/wp-content/uploads/2025/01/JONO9081-scaled.jpg) !important;
			background-size: cover;
			background-position: center center;
		}
		.landing-bg-finearts{
			background-size: cover;
			background-position: center center;
			background-image: url(/wp-content/uploads/2024/11/Molly-Timmins-7.jpg)!important;
		}
		.landing-bg-design{
			background-size: cover;
			background-image: url(/wp-content/uploads/2025/01/Image-pg-17_-Macauley_Richards83-scaled.jpg);
		}
		.landing-bg-fashion{
			background-image: url(/wp-content/uploads/2025/01/JONO0635-scaled.jpg)!important;
			background-size: cover;
			background-position: center center;
		}
		.landing-bg-infotech{
			background-image: url(/wp-content/uploads/2024/12/andras-vas-Bd7gNnWJBkU-unsplash.jpg)!important;
			background-size: cover;
			background-position: center center;
		}
		.landing-bg-creativearts{
			background-image: url(/wp-content/uploads/2025/01/CAT-Main-1-scaled.jpg)!important;
			background-size: cover;
		}
		.landing-hero-secondary h4{font-size:1.3em;}
		header{height:auto;}
		.head-logo{
			margin-top: 10px;padding-left: 10px;
		}
		.head-logo h5{
			font-size:0.9em;
			margin-left: 0;
		}
		.head-logo-home{
			margin-top: 10px;padding-left: 10px;}
		.head-logo-home h5{
			font-size:0.9em;
			margin-left: 0;
		}
		.head-menu-close{margin-top: 10px;width:40px;margin-right: 0;}
		.head-menu-close h3{font-size:1.8em;}
		.logoW{height:25px;width:46px;}
		.logoW-menu{height:25px;width:46px;z-index: 999;margin-left: 0;}
		#btn-menu-h5{margin: 0 20px 0 20px;}
		.head-menu-area h5{font-size: 1em;width:auto;}
		.landing-degree-layer2 > div{
			flex-basis:calc(50% - 10px);
		}
		.footer-links-menu{content-visibility:visible; display:flex;}
		.footer-links-menu p{font-size:1em;}
		.menulinks ul{margin-bottom: 0;padding:0 20px 0px 20px; }
		.footer-faq{content-visibility: hidden;display: none;}
		/**** magnetic **/
		.hm-h1{
			font-size: 1.2em !important;
		}
		.hm-h2{
			font-size:2em !important;
			margin-top: 40px;
		}
		.hm-student-wrapper .homepage-qual-grid {
			row-gap: 20px !important;
		}
		.landing-hero-primary {
			/* height: 100px !important; */
			background: rgba(16,16,16,0.9) !important;
			
		}
		
		.landing-hero-primary h1 {
			padding-top: 0 !important;
			padding-bottom: 0 !important;
		}
		.qual-grid {
			grid-template-columns: 1fr;
			padding-left:0!important;
			padding-right:0!important;
			gap:40px!important;
		}
		.qual-degree-menu-layer{padding: 0 20px 0 20px!important;}
		/* Faculties and Qualifications buttons styling */
		#landing-menu-pathways, #landing-menu-degrees {
			width: auto !important;
			flex-grow: 1 !important;
		}
		
		#landing-menu-pathways {
			margin-left: 20px !important;
		}
		
		#landing-menu-degrees {
			margin-right: 20px !important;
		}
		.qual-filter-group {
			padding:0 0 20px 0!important;
		}
		.qual-filter-group,
		.filter-display {
			border: none !important;
		}

		#landing-degree-layer2 {
			background-color: transparent !important;
		}
		#landing-degree-layer2 .qual-card{
			padding-left: 20px !important;
			padding-right: 20px !important;
		}
		#landing-degree-layer {
			padding-top: 20px !important;
			border-top:2px solid #000 !important;
		}
		.landing-main-pathways > div {
			padding-bottom: 0 !important;
		}
		.hm-h1 {
			display: flex;
			flex-direction: column;
			justify-content: center;
			height: 100%;
			font-size:1.3em!important;
		}
		.landing-main {
			padding-top: 0 !important;
			background-color: transparent !important;
		}
		.landing-hero-secondary {
			background: rgba(16,16,16,0.9) !important;
		}
		.landing-btns{
			flex-flow:column wrap;
			margin-top:20px;
			/* Prevent vertical fill on mobile */
			flex: 0 0 auto;
			justify-content: flex-start;
			align-items: flex-start;
		}
		.head-logo-cta #head-logo{
			font-size: 0.8em !important;
		}
		.btn-w {
			background: rgba(255,255,255,0.9) !important;
			color: #000 !important;
			font-size:0.9em!important;
		}
		.btn-general{font-size:0.9em!important;}
		.qual-filter-margin20{padding-top:0!important;}
		/****** menu layer *****/
	/* headlogo cta */
	.cta-menu{
		margin-right: 0;
	}
	.cta-menu-item.cta-schedule,
	.cta-menu-item.cta-contact {
		display: none; /* Hide these buttons on extra small devices */
	}
	.cta-menu-item a{padding: 12px 15px;font-size:0.8em;}
	.head-logo-cta{
		padding-left: 10px;
		/* margin-top: 10px; */
	}
	/* Keep other existing rules for this media query below if any */
	.head-logo-cta #head-logo{
		font-size: 1em;
	}
	
	.head-logo-cta .logoW {
		height:25px;
		width: auto;
	}
	.container-split2{gap:10px;}
	
	.mainmenu{
		display: flex;
		flex-flow: row wrap;
		height: 72vh;
	}
	/* .head-logo{
		-ms-flex-align: start;
		width:25%;
		display: flex;
		
		
		z-index: 2;
		align-items: flex-end;
		padding-left: 4vw;
		align-self: center;
		justify-self: center;
	} */
	.mainmenu-logo{
		content-visibility: visible;
		visibility: visible;display: flex;
		justify-content:flex-start;
		flex-wrap: wrap;
		flex-grow: 1;
		align-items: flex-start;
		z-index:9999;
		height:25px;
		margin-left: 10px;
		margin-top: 10px;
	}
	.mainmenu-logo h5{color:#fff;font-size:0.9em;}
	.mainmenu-logo h5:hover{color:#D59D10;}
	.mainmenu-logo h5:visited{color:#000;}
	.mainmenu-logo > a{
		display: flex;text-decoration: none;
		align-items: flex-end;
	}
	.menu-borders{
		content-visibility: hidden;
		visibility: hidden;
		display: none;
	}
	.menu-borders div{
		content-visibility: hidden;
		visibility: hidden;display: none;
	}
	.menulinks{
		color:#FFF;
		display: flex;
		margin-top: 20px;
		flex-flow: row wrap;
		margin-bottom:0;
		gap: 0;
		height: calc(74vh - 60px);
		flex-grow: 0;
	}
	
	.menulinks > li{
		width:100%;
		font-size:1.3em;
		font-weight: bold;
		margin-left: 0;
		margin-top: 0;
		align-self: flex-start;
		justify-self: flex-start;
		flex-grow:0;
		height: 10px;
	}
	.menu-footer{
		height:auto;
		display: flex;vertical-align: bottom;
		align-self: flex-end;
		padding-top: 10px;
	}

	.menu-sublinks > li{font-size:1em;font-weight: lighter;}
	.menu-sublinks{padding-left: 0;margin-top: 0;}
	.student-work-landing h1{margin:0 0 10px 0}
	.half-half{margin-top: 10px;}
	.split-half > h4{font-size:1.3em;}
	.margin-top40{
		margin-top:20px;
	}
		/* hero heading */
		.landing-hero-primary{
			padding-left: 15px;
			padding-right: 15px;
			height: 20vh;
		}
		.landing-hero-primary > h1{
			padding-left: 0;
			font-size:1.5em;
			padding-right: 0;
			padding-top: 5vh;
			padding-bottom: 3vh;
		}
		/* landing main */
		.landing-main{
			padding-top: 10px;
		}
		.landing-main-menu{margin-bottom:10px;}
		.landing-main-menu > div{
			
			width:160px;
			margin-bottom: 4px;
		}
		.landing-road{
			margin-left:12vw;
			margin-right: 12vw;
			margin-top: 0;
			content-visibility: hidden;
			border-top:0;
		}
		.landing-main-pathways{
			margin-top:-20px;
			margin-left:20px;
			margin-right: 20px;
			column-gap: 0;
			display: flex;
			flex-flow:row wrap;
			gap:10px
		}
		.landing-main-pathways > div{
	
			width:100%;
		}
		.landing-hero-secondary{margin-bottom:10px;font-size:0.8em;padding:20px 20px 20px 20px;}
		.landing-main h6{font-size:1.1em!important;}
		/****** PATHWAYS ********/
		.pathway-wrapper{
			padding:0;
			padding-top: 15px;
			padding-bottom: 10px;
			min-height:6vh;
		}
		.pathway-title{
			font-size:1em;
			height: auto;
		}
		.pathway-desc{
			font-size:0.8em;
		}
		.pathway-tags{
    font-size:1.3em;
    column-gap:8px;
    margin-bottom: 15px;
}
/* Ensure expanded pathway tags area wraps nicely on small screens without locking height */
#landing-main-pathways .pathway-tags{
    flex-wrap: wrap;
    align-content: flex-start;
    flex: 0 0 auto;
    height: auto;
    overflow: visible;
}
		.pathway-tag{
			padding:9px;
			margin-top: 10px;
			font-size: 0.8em;
		}
		.pathway-arrow{
			width:26px;
			height:26px;
			margin-bottom: 10px;
		}
		/* landing hero secondary */

		.arrow {
			border-width: 0 3px 3px 0;
			padding:3px;
			margin-right:1px;
		  }
	
		  /******* second layer ***/
	.landing-layer2{
		position: absolute;
		left: 0;
		top:0;
		z-index: 1;
		width:100vw;
		min-height:100vh;
	}
	.landing-degree-layer{
		border:0 solid black;
		display: flex;
		margin-left:15px;
		margin-right: 15px;
		flex-flow: row wrap;
		column-gap: 15px;
		position: relative;
		z-index: 2;gap: 15px;
		background-color: #fff;
	}
	.landing-degree-layer > div{
		width:100%;
		text-align: center;
		border-style: dashed;
		border-color:#000;
		background-color: #FFF;
		border-width: 1px;
		border-radius: 5px;
		color:#000;
		text-align: center;
		padding:10px;
		padding-top: 13px;
		padding-bottom: 13px;
		font-size:1.1em;
		font-weight: bold;
	}
	.landing-degree-layer2{
		position: relative;
		z-index: 2;
		margin-left:0;
		margin-right: 0;
		display: flex;
		padding: 0 0 0 0!important;
		flex-direction: row;
		gap:15px;
		flex-wrap: wrap;
		margin-top: 40px;
		margin-bottom: 20px;
		background-color:#fff;
		background: transparent!important;
		padding: 0;
	}
	
	.landing-degree-layer2 p{
		font-size:1.2em;
		width:100%;
	}
	.landing-degree-layer2 h6{
		color:#000;
		margin-top: 0;
		padding-top: 0;
		text-align: center;
		padding-bottom: 20px;
		width:100%;
		font-size:1.3em;
	}
	.degree-duration{
		margin-top: 10px;
		width:100%;
	}
	.degree-btn{
		width:20%;
		margin-top: 20px;
	}
	.landing-btns{
		margin-bottom: 30px;
		padding: 5px 10px 30px 10px;
		flex-flow: row wrap;
		flex: 1 1 auto;
		min-height: auto; /* override earlier min-height: 12vh to allow full growth */
		justify-content: center;
		align-items: center;
	}
	.landing-btns button{
		justify-self: center;
		align-self: center;
	}

	/******* second layer ends ****/
		  /****** home student work *****/
		.hm-student{
			padding-left: 20px;
			padding-right: 20px;
			padding-top: 40px;
		}
		.hm-student h1{
			border-bottom:2px solid gray;
			margin-bottom: 25px;
		}

/* Header main logo hover: turn text and image to brand gold */
.head-logo-cta #head-logo {
  transition: color 200ms ease;
}
.head-logo-cta .logoW {
  transition: filter 200ms ease;
}
.head-logo-cta {
  position: relative;
  z-index: 5; /* ensure it sits above nearby header elements */
}
.head-logo-cta a {
  pointer-events: auto; /* ensure hover events are captured */
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* Hover/focus on link or container: color text gold */
.head-logo-cta a:hover #head-logo,
.head-logo-cta a:focus-visible #head-logo,
.head-logo-cta:hover #head-logo {
  color: #D59D10 !important; /* brand gold */
  -webkit-text-fill-color: #D59D10 !important; /* force in WebKit */
  text-shadow: none !important; /* avoid white shadow masking color */
}
/* Hover/focus on link or container: tint image gold */
.head-logo-cta a:hover img.logoW,
.head-logo-cta a:focus-visible img.logoW,
.head-logo-cta:hover img.logoW {
  /* Approximate #D59D10 on a white logo via CSS filter */
  filter: brightness(0) saturate(100%) invert(63%) sepia(63%) saturate(534%) hue-rotate(356deg) brightness(94%) contrast(87%) !important;
}
		.hm-student-wrapper{
			gap: 15px;
		}
		/* student box **/
	
		.hm-student-box{
			flex-basis:100%;
			min-height:350px;
			border-radius:5px;
		}
		.hm-student-box-p{content-visibility: visible;display:inherit;height: auto;}
		.hm-alumni{
			margin: 0;
			margin-top: 40px;
		}
	
		.hm-alumni-video{
			min-height:60vh;
			position: relative;
			margin-top: 20px;
		}
		.hm-alumni-video iframe{
			position: absolute;
			top:0;
			left: 0;
			width: 100%;
			height: 100%;
		}
		/* .hm-alumni-video div{
			display: flex;
			justify-content: center;
			align-items: center;
		} */
		.hm-alumni-video h1{
			opacity: 0;
		}
		.hm-alumni-wrapper{
			margin-left: 15px;
			margin-right: 15px;
			display: flex;
			flex-flow: row wrap;
			box-sizing: border-box;
			gap: 20px;
		}
		.hm-alumni-wrapper h1{
			width:100%;
			margin-top: 5vh;
			border-bottom:2px groove gray;
		}
		.hm-alumni-wrapper > div,
		.hm-alumni-wrapper > a{
			width:100%;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			box-sizing: border-box;
			background-color: #f1f1f1;
			padding-bottom: 15px;
		}
		.hm-alumni-wrapper p{
			padding-left: 15px;
		}
		.hm-alumni-img{
			height:300px;
			overflow: hidden;
			margin-bottom: 15px;
		}
		.hm-alumni-img img{
				max-inline-size: 100%;
				block-size: auto;
				object-fit: cover;
				object-position: top center;
		}
		.hm-alumni-name{
			width:100%;   
		}
		.hm-alumni-p{
			justify-self: flex-start;
			min-height:70px;
			padding-right: 10px;
		}

		/****** news ******/
		.news-self{
			min-height:210px;
			flex-basis: calc(100% - 12px);/* cal to make space between*/
			flex-flow: row wrap;border-radius:3px;
		}
		.hm-newsevents{
			padding-left: 15px;
			padding-right: 15px;
			gap:40px;
			padding-top: 40px;
			display: flex;
			flex-flow: row wrap;
		}
		.hm-news-wrapper{
			width:100%;
			display: flex;
			flex-flow:row wrap;
			gap:15px;
			
		}
		.hm-events-wrapper{
			width:100%;
			display: flex;
			gap:15px;
			flex-flow:row wrap;
		}
		.hm-newsevents h1{
			width:100%;
			border-bottom:2px solid black;
			padding-bottom: 10px;
			margin-bottom: 15px;
		}
		.hm-news-box{
			width:100%;
			background-color: #f1f1f1;
			min-height: 300px;
			display: block;
			padding: 15px;
		}
		.hm-news-box img{
			width:50%;
			overflow: hidden;
			max-height: 150px;
				object-fit:cover;
				object-position: top center;
			float:left;
		}
		.hm-news-right{
			width:48%;
			float: right;
			box-sizing: content-box;
			margin-left:  2%;
			padding-top: 10px;
			font-size:1em;
		}
		.hm-news-box h4{
			width:100%;
			float:left;
			margin-top:15px;
			font-size:1.5em;
			margin-bottom: 0;
		}
		.hm-news-box p{
			width: 100%;
			float: left;
			margin-top: 15px;
		}
		.hm-news-btn{
			float:right;
			width:100%;
			margin-top: 20px;
			text-align: right;
			margin-right: 20px;
			font-size:1.2em;
			text-decoration: underline;
		}
		/***** events home ****/
		.hm-events-box{
			min-height:210px;
			width:100%;
			background-color: #f1f1f1;
			display: flex;
			flex-flow:row wrap;
		}
		.hm-events-datearea{
			width:25%;
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			align-items: center;
		}
		.hm-events-info{
			width:75%;
			display: flex;
			flex-flow:row wrap;
			justify-content: right;
		}
		.hm-events-info h4{
			margin-bottom: 5px;
			width:100%;
		}
		.hm-events-info p{
			margin-bottom:15px;
			margin-top: 5px;
			margin-right: 15px;
			width:100%;
		}
		.hm-events-month{
			text-align: center;
			width:100%;
			align-self: flex-end;
		}
		.hm-events-day{
			width:100%;
			text-align: center;
			font-size:4em;
			align-self: flex-start;
		}
		.hm-events-btntext{
			text-decoration: underline;
			align-self: center;
			font-size:1.2em;
			padding-right: 15px;
		}
		.hm-events-btn{
			display: flex;
			justify-content: center;
			align-items: center;
			height:40px;
			width:40px;
			border-radius: 50%; 
			margin-right: 15px;
		}
		.hm-events-info > div{
			margin-bottom: 15px;
			justify-self: flex-end;
		}
		/*** events btn ****/
		/***** hm locations ***/
		.hm-locations{
			display: flex;
			flex-flow: column wrap;
			gap:15px;
			padding-left: 15px;
			padding-right: 15px;
			padding-top: 40px;
		}
		.hm-locations h1{
			border-bottom:2px solid gray;
			margin-bottom:20px;
		}

		.hm-locations h3{
			margin-bottom: 15px;
		}
		.hm-locations-expanded{
			min-height:200px;
			display: flex;
			flex-flow:row wrap;
			gap:30px;
			border-bottom: 2px dashed gray;
			justify-content: flex-start;
		}
		.hm-locations-campus{
			display: flex;
			flex-flow:row wrap;
			gap: 20px;
	
		}

		.hm-locations-img{
			width:100%;
			border-radius: 5px;
			background-color: #f1f1f1;
			height: auto;
			overflow: hidden;
		}
		.hm-locations-img img{
			object-fit:cover;
			display: block;
			object-position:center;
			margin-left: auto;
			margin-right: auto;
		}
		.hm-locations-info{
			width:100%;
			display: flex;
			flex-flow: row wrap;
			padding-left: 15px;
		}
		.hm-locations-info h6{
			font-size:1.1em;
			margin-top: 15px;
		}
		.hm-locations-info div{
			width:100%;
		}
		.hm-locations-info p{
			margin-top: 10px;
			margin-bottom: 15px;
			padding-right: 15px;
		}
		.notexpanded{
			display: flex;
			flex-flow: row; 
			min-height:200px;
			border-bottom: 2px dashed gray;
			vertical-align: middle;
		}
		.notexpanded h2{
			align-self: center;
			justify-self: center;
			width:80%;
	
		}
		.notexpanded div{
			display: flex;
			align-self: center;
			justify-self: center;
		}
	
		
		.f-btn{
			background-color: #000;
			border:1px solid #fff;
			color:#fff;
			padding: 15px;
			font-size:1.1em;
		}
		.pro-img{overflow:visible;}
		.margin-40full{ margin:20px;}
		.margin-40{margin-left: 20px;margin-right: 20px;}
		.margin-left40{margin-left: 20px;}
		.pathway-tags2{margin-left: 20px;margin-right: 20px;}
		.padding-40{padding:20px}
		.degree-block img{margin-left: 20px;margin-right: 20px;}
		.pathway-tag-dep{flex-grow:1;text-align: center;}
		.related-info-box{margin:0 20px 0 20px}
		.related-info-box-alumni{margin:0 20px 0 20px}
		.hm-alumni-main{flex-flow:row wrap}
		.hm-alumni-main a{display: block;margin-left: auto;margin-right: auto;}
		.hm-alumni-p{width:100%;}
		.hm-alumni-btn{margin-top: 20px;}
		.member-wrapper{margin: 20px;}
		.member-wrapper > div{flex-basis:100%;}
		.memberCard{width:100%;}
		.event-info > div{width:100%;}
		.event-location{text-align:left;margin-top: 10px;}
		.apply-map{width:70%;}
		.apply-map-btns{width:100%;}
		.apply-map-btns button{margin-bottom: 20px;}
		.expanded-btn{width:100%;}
		.expanded-btn > a{margin-right: 0px;}
		.degree-info-qual{width:auto;margin-right: 20px;margin-left: 20px;}
		.qual-short-info{flex-flow: row wrap;margin:0 20px 20px 20px;}
		.qual-short-info div{padding-right: 20px;}
		.qual-cost{flex-flow:row wrap;margin: 20px 20px 20px 20px;}
		.qual-cost div{width:100%;}
		.admission{margin: 20px 20px 20px 20px;}
		.qual-heading{font-size:2em!important;margin-top: 30px!important;}
		.schoolbtn{margin-left: 0;}
		.footer-menu > div{margin: 10px 10px 10px 10px;}
		.landing-bg-default{
			background-size: cover;
			background-position: center center;
		}
		.it-micro-menu h2{
			font-size:2.2em;
			margin-top: 10px;
			margin-bottom: 10px;
			padding: 0;
		}
		.it-micro-menu{flex-flow:wrap;margin-top: 20px;}
		.it-micro-menu div{width:100%;text-align:center}
		.micro-cred-title{text-align: center;}
		.micro-filter-display{text-align: center;}
		.logoW-home2-mobile {
			height: 20px; /* Smaller height for mobile */
			width: 37.5px; /* Adjust width proportionally */
		}
		.qual-filter-margin20{
			margin-left: 0;
			padding:20px 0 20px 0!important;
		}
		
/* Fade helpers (global) */
.fade-swap { opacity: 1; transition: opacity 450ms ease-in-out; will-change: opacity; }
.fade-swap.hidden { opacity: 0; pointer-events: none; }
}

/* CSS-only on-load fade for alumni, events, and news tiles */


  @media (max-width: 1100px) {
      .qual-grid {
          grid-template-columns: repeat(3, 1fr);
      }
      /* Homepage override (Student Work) */
      .hm-student-wrapper .homepage-qual-grid {
          grid-template-columns: repeat(2, 1fr);
      }
      /* Industry members: 3-up at <=1100px */
      .industry-member {
          grid-template-columns: repeat(3, minmax(0, 1fr));
      }
      /* Industry blog: 3-up at <=1100px */
      .industry-blog {
          grid-template-columns: repeat(3, minmax(0, 1fr));
      }
  }

  @media (max-width: 900px) {
      .qual-grid {
          grid-template-columns: repeat(2, 1fr);
      }
      /* Stack two-column flex utility on smaller screens */
      .flex-block > .flex-1 {
          flex: 0 0 100%;
          max-width: 100%;
      }
      /* Stack industry layout on smaller screens */
      .industry-flex {
          flex-direction: column;
          gap: 20px; /* slightly smaller gap on mobile */
      }
      .industry-flex > .flex-1 {
          flex: 0 0 100%;
          max-width: 100%;
      }
      /* Industry members: 2-up at <=900px */
      .industry-member {
          grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      /* Industry blog: 2-up at <=900px */
      .industry-blog {
          grid-template-columns: repeat(2, minmax(0, 1fr));
      }
  }

  @media (max-width: 600px) {
      .qual-grid {
          grid-template-columns: 1fr;
		margin:0;
		padding:0 0 0 0;
      }
      /* Homepage override (Student Work) */
      .hm-student-wrapper .homepage-qual-grid {
          grid-template-columns: 1fr;
		padding-left: 0!important;
		padding-right: 0!important;
      }
      .qual-grid {
		background-color:#fff;
		background: #fff!important;
      }
      /* degree layer visibility overrides moved to max-width: 767px */
      /* Industry members: 1-up at <=600px */
      .industry-member {
          grid-template-columns: 1fr;
      }
      /* Industry blog: 1-up at <=600px */
      .industry-blog {
          grid-template-columns: 1fr;
      }
  }

/* Reveal staged elements after preload completes */
/* Elements marked in JS with .fade-in-on-ready start hidden until html.page-ready */
.fade-in-on-ready {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 420ms ease, transform 420ms ease;
}
html.page-ready .fade-in-on-ready {
    opacity: 1;
    transform: none;
}
/* Keep pathway wrappers visible even if page-ready is delayed */
html:not(.page-ready) .hm-h1 {
    /* opacity: 0; */
    transform: translateY(8px);
    transition: opacity 420ms ease, transform 420ms ease;
}
html.page-ready .hm-h1 {
    opacity: 1;
    transform: none;
    transition: opacity 420ms ease, transform 420ms ease;
}
@media (prefers-reduced-motion: reduce) {
    .fade-in-on-ready,
    html.page-ready .fade-in-on-ready {
        transition: none;
        opacity: 1;
        transform: none;
    }
    html:not(.page-ready) .hm-h1 {
        opacity: 1;
        transform: none;
    }
    html.page-ready .hm-h1 {
        transition: none;
        opacity: 1;
        transform: none;
    }
	.reveal, .revealed {
		transition: none !important;
		opacity: 1 !important;
		transform: none !important;
	  }
}

/* =============================================
   OUR STORY PAGE
   ============================================= */

/* Content area font-weight (scoped to avoid menu) */
.newsFull .margin-10vw p,
.newsFull .margin-10vw li,
.newsFull .margin-10vw span,
.ourstory-timeline-wrapper p,
.ourstory-two-col p,
.ourstory-quote {
    font-weight: 300 !important;
}
.newsFull .margin-10vw li {
    font-size: 1.5em;
    line-height: 1.7;
}
.newsFull .margin-10vw ul,
.newsFull .margin-10vw ol {
    font-size: inherit;
}

.ourstory-hero-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}

/* Two-column layout */
.ourstory-two-col {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    margin-top: 40px;
}
.ourstory-two-col-left {
    width: 45%;
}
.ourstory-two-col-left img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    display: block;
}
.ourstory-two-col-right {
    width: 55%;
}
.ourstory-two-col-right p {
    font-weight: 300;
    line-height: 1.7;
}

/* Quote banner */
.ourstory-quote-banner {
    /* background: #1a1a1a; */
    margin-top: 60px;
    padding: 60px 0;
}
.ourstory-quote {
    color: #1a1a1a;
    font-size: 2em;
    font-style: italic;
    font-weight: 500!important;
    /* line-height: 1.6; */
    text-align: center;
    margin: 0;
    padding: 0 20px;
    border: none;
	margin-bottom: 60px;
}

/* =============================================
   INTERACTIVE TIMELINE
   ============================================= */

.ourstory-timeline-wrapper {
    /* margin-top: 60px; */
    padding: 40px 10vw 20px;
    overflow-x: auto;
}
.ourstory-timeline {
    display: flex;
    position: relative;
    min-width: 0;
    gap: 0;
}
.timeline-line {
    position: absolute;
    height: 2px;
    background: #D59D10;
    z-index: 0;
    pointer-events: none;
}
.timeline-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 1;
    cursor: pointer;
    padding: 0 12px;
    transition: opacity 0.3s ease;
}
.timeline-step:hover {
    opacity: 0.85;
}

/* Header: chapter title + year */
.timeline-step-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 16px;
}
.timeline-chapter {
    font-size: 0.7em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #D59D10;
    margin-bottom: 4px;
}
.timeline-year {
    font-size: 1.8em;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.2;
}

/* Node (circle on the line) */
.timeline-node {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    height: 24px;
}
.timeline-circle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 3px solid #D59D10;
    background: #fff;
    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.timeline-step--active .timeline-circle {
    background: #D59D10;
    transform: scale(1.3);
    box-shadow: 0 0 0 4px rgba(213, 157, 16, 0.2);
}

/* Dynamic info box below timeline */
.timeline-info-box {
    background: #1a1a1a;
    border-radius: 10px;
    padding: 40px 44px;
    margin-top: 48px;
    width: 100%;
    box-sizing: border-box;
    transition: opacity 0.3s ease;
}
.timeline-info-chapter {
    font-size: 0.85em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #D59D10;
    display: block;
    margin-bottom: 8px;
}
.timeline-info-subheading {
    font-size: 1.5em;
    font-weight: 700;
    color: #fff;
    margin: 0 0 14px;
}
.timeline-info-paragraph {
    font-size: 1.4em;
    font-weight: 300;
    line-height: 1.7;
    color: #ccc;
    margin: 0;
}

/* Subheading below circles */
.timeline-subheading {
    font-size: 0.85em;
    font-weight: 700;
    margin: 8px 0 0;
    color: #1a1a1a;
    text-align: center;
}

.timeline-step--active .timeline-chapter {
    color: #D59D10;
}

/* Mobile dropdown (hidden on desktop) */
.timeline-mobile-dropdown {
    display: none;
    position: relative;
    width: 100%;
}
.timeline-dropdown-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 16px 20px;
    background: #D59D10;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 1.1em;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease;
}
.timeline-dropdown-btn:hover {
    background: #b8860b;
}
.timeline-dropdown-arrow {
    font-size: 1.2em;
    transition: transform 0.3s ease;
}
.timeline-dropdown-btn[aria-expanded="true"] .timeline-dropdown-arrow {
    transform: rotate(180deg);
}
.timeline-dropdown-list {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    margin-top: 6px;
    background: #1a1a1a;
    border-radius: 8px;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    z-index: 100;
}
.timeline-dropdown-list--open {
    max-height: 400px;
    opacity: 1;
}
.timeline-dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    cursor: pointer;
    border-bottom: 1px solid #333;
    transition: background 0.2s ease;
}
.timeline-dropdown-item:last-child {
    border-bottom: none;
}
.timeline-dropdown-item:hover {
    background: #2a2a2a;
}
.timeline-dropdown-item--active {
    background: #2a2a2a;
}
.timeline-dropdown-item-title {
    font-size: 0.95em;
    font-weight: 600;
    color: #fff;
}
.timeline-dropdown-item-year {
    font-size: 0.9em;
    font-weight: 700;
    color: #D59D10;
}

/* Responsive */
@media (max-width: 1024px) {
    .ourstory-two-col {
        flex-direction: column;
    }
    .ourstory-two-col-left,
    .ourstory-two-col-right {
        width: 100%;
    }
    .ourstory-timeline-wrapper {
        padding: 40px 5vw 20px;
    }
}
@media (max-width: 768px) {
    .ourstory-timeline {
        display: none;
    }
    .timeline-mobile-dropdown {
        display: block;
    }
    .timeline-info-box {
        padding: 28px 24px;
        margin-top: 24px;
    }
    .timeline-info-subheading {
        font-size: 1.2em;
    }
    .timeline-info-paragraph {
        font-size: 1.15em;
    }
    .ourstory-timeline-wrapper {
        padding: 30px 5vw 20px;
    }
    .ourstory-quote {
        font-size: 1.3em;
    }
    .ourstory-quote-banner {
        padding: 40px 0;
    }
}

/* =============================================
   OUR OPPORTUNITIES PAGE
   ============================================= */

/* Content typography */
.newsFull .opp-cards p,
.newsFull .opp-press-row p {
    font-weight: 300 !important;
    line-height: 1.7;
}

/* Three-column cards */
.opp-cards {
    display: flex;
    gap: 30px;
    margin-top: 30px;
}
.opp-card {
    flex: 1;
    background: #fff;
    border-radius: 8px;
    padding: 36px 32px;
    border: 1px solid #e8e8e8;
    border-left: 4px solid #D59D10;
}
.opp-card h3,
.opp-card h4 {
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 1.35em;
    font-weight: 800;
    color: #1a1a1a;
    letter-spacing: -0.01em;
}
.opp-card p {
    font-size: 1.05em;
    color: #444;
    margin-bottom: 0;
}
.opp-card p:last-child {
    margin-bottom: 0;
}

/* Positions / speculative sections */
.opp-section-block {
    background: #f9f9f9;
    border-radius: 8px;
    padding: 40px;
    margin-top: 40px;
    border-left: 4px solid #D59D10;
}
.opp-section-block h2,
.opp-section-block h3 {
    margin-top: 0;
    color: #1a1a1a;
}
.opp-section-block p {
    font-weight: 300;
    line-height: 1.7;
    color: #444;
}

/* Press & Media two-column */
.opp-press-row {
    display: flex;
    gap: 50px;
    align-items: flex-start;
    margin-top: 30px;
    margin-bottom: 60px;
}
.opp-press-left {
    flex: 1.2;
}
.opp-press-right {
    flex: 0.8;
    background: #1a1a1a;
    border-radius: 8px;
    padding: 32px;
    color: #fff;
}
.opp-press-right h3,
.opp-press-right h4 {
    color: #D59D10;
    margin-top: 0;
    font-size: 1.15em;
}
.opp-press-right p {
    color: #ccc !important;
    font-size: 0.95em;
    margin-bottom: 8px;
}
.opp-press-right a {
    color: #D59D10;
    text-decoration: none;
    font-weight: 600;
}
.opp-press-right a:hover {
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 1024px) {
    .opp-cards {
        flex-direction: column;
    }
    .opp-card {
        padding: 30px 26px;
    }
}
@media (max-width: 768px) {
    .opp-press-row {
        flex-direction: column;
        gap: 30px;
    }
    .opp-press-right {
        padding: 28px 24px;
    }
    .opp-section-block {
        padding: 28px 24px;
    }
}

/* =============================================
   ABOUT US MAIN PAGE
   ============================================= */

/* Content typography */
.newsFull .about-two-col p,
.newsFull .about-card p,
.newsFull .about-section p {
    font-weight: 300 !important;
    line-height: 1.7;
    color: #444;
}

/* Hero image */
.about-hero-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
    margin-top: 40px;
}

/* Section spacing */
.about-section {
    margin-top: 60px;
}
.about-section h2 {
    font-size: 1.8em;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 12px;
}
.about-section-heading {
    margin-top: 70px;
    margin-bottom: 8px;
    text-align: center;
}
.about-section-heading h2 {
    font-size: 2em;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 0;
}
.about-section-heading p {
    color: #666;
    font-size: 1.1em;
    font-weight: 300;
    margin-top: 8px;
}

/* Two-column layout */
.about-two-col {
    display: flex;
    flex-wrap: wrap;
    column-gap: 50px;
    row-gap: 20px;
    align-items: stretch;
    margin-top: 40px;
    padding: 44px 40px;
    background: #f8f8f8;
    border-radius: 10px;
}
.about-two-col-heading {
    width: 100%;
    text-align: center;
    font-size: 2em;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 10px;
}
.about-two-col-left {
    flex: 1 1 calc(45% - 25px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.about-two-col-left img {
    max-width: 160px;
    margin-bottom: 20px;
    align-self: center;
}
.about-two-col-left h3 {
    font-size: 1.3em;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 12px;
}
.about-two-col-left p {
    color: #555;
    line-height: 1.7;
    font-weight: 300;
    font-size: 0.95em;
}
.about-two-col-right {
    flex: 1 1 calc(55% - 25px);
    display: flex;
    align-items: center;
}
.about-two-col-right img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
    object-fit: cover;
}
.about-two-col-right p {
    color: #444;
    line-height: 1.7;
    font-weight: 300;
}
.about-two-col-right h4 {
    font-size: 1.2em;
    font-weight: 600;
    color: #1a1a1a;
    margin-top: 20px;
    margin-bottom: 8px;
}

/* Two-column variant: full-width image (no logo constraint) */
.about-two-col--img-full .about-two-col-left {
    flex: 1 1 calc(45% - 25px);
}
.about-two-col--img-full .about-two-col-left img {
    max-width: 100%;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    object-fit: cover;
}
.about-two-col--img-full .about-two-col-right {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

/* 3-column opp-cards spacing on about page */
.newsFull .opp-cards {
    margin-top: 30px;
    margin-bottom: 20px;
}

/* Stat strip banner */
.about-stat-banner {
    background: #1a1a1a;
    margin-top: 60px;
    padding: 52px 10vw;
}
.about-stat-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
    margin: 0 auto;
}
.about-stat-box {
    flex: 1 1 0;
    min-width: 160px;
    box-sizing: border-box;
    background: transparent;
    color: #fff;
    padding: 20px 30px;
    text-align: center;
    font-weight: 700 !important;
    font-size: 1.15em;
    line-height: 1.5;
    border-right: 1px solid #D59D10;
    display: flex;
    align-items: center;
    justify-content: center;
}
.about-stat-box:last-child {
    border-right: none;
}

/* 4-column cards grid */
.about-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 40px;
    margin-bottom: 60px;
}
.about-card {
    background: #fff;
    border-radius: 8px;
    padding: 32px 28px 28px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border: 1px solid #eaeaea;
    border-top: 4px solid #D59D10;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    position: relative;
    display: flex;
    flex-direction: column;
    text-decoration: none;
}
.about-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}
.about-card h3,
.about-card h4 {
    margin-top: 0;
    margin-bottom: 10px;
    color: #1a1a1a;
    font-size: 1.2em;
    font-weight: 600;
}
.about-card p {
    color: #555;
    line-height: 1.65;
    font-size: 0.95em;
    margin-bottom: 0;
    flex-grow: 1;
}
.about-card::after {
    content: '\2192';
    display: block;
    margin-top: auto;
    padding-top: 16px;
    color: #D59D10;
    font-size: 1.3em;
    font-weight: 600;
    transition: transform 0.25s ease;
}
.about-card:hover::after {
    transform: translateX(6px);
}

/* Responsive */
@media (max-width: 1024px) {
    .about-two-col {
        flex-direction: column;
        gap: 30px;
        padding: 28px 24px;
    }
    .about-two-col-left,
    .about-two-col-right {
        width: 100%;
        flex: 1 1 100%;
    }
    .about-two-col--img-full .about-two-col-left img {
        height: auto;
        max-height: 400px;
    }
    .about-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .about-section-heading {
        margin-top: 50px;
    }
}
@media (max-width: 768px) {
    .about-stat-strip {
        flex-direction: column;
    }
    .about-stat-box {
        min-width: 100%;
        padding: 14px 20px;
        font-size: 1em;
        border-right: none;
        border-bottom: 1px solid rgba(213, 157, 16, 0.3);
    }
    .about-stat-box:last-child {
        border-bottom: none;
    }
    .about-stat-banner {
        padding: 32px 5vw;
    }
    .about-cards-grid {
        grid-template-columns: 1fr;
    }
    .about-section {
        margin-top: 40px;
    }
    .about-section-heading {
        margin-top: 40px;
    }
    .newsFull .about-section-heading h2 {
        font-size: 1.5em;
    }
}