:root {
	--turquoise: #0cc0e1;
	--light-blue: #29aae1;
	--blue: #2876bb;
	--dark-blue: #314d83;
	--light-gray: #cccccc;
	--dark-gray: #636363;
	--link-color: #0a68aa;
}

body {
	font-family: 'Inter', Arial, Helvetica, sans-serif;
	margin-top: 40px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: 'Poppins', Arial, Helvetica, sans-serif;
}

h1 {
	color: var(--dark-blue);
	font-size: 2.75rem;
	font-weight: 700;
	line-height: 1.5;
	margin: 0.25em 0 0.25em 0;
}

h2 {
	color: var(--blue);
	font-size: 1.5rem;
	margin: 1.5em 0 0.25em 0;
}

h3 {
	color: var(--blue);
	margin: 1em 0 0.25em 0;
}

p {
	margin: 0 0 1em 0;
}

address {
	font-style: normal;
	display: inline;
}

a,
a:visited,
a:hover,
.ext {
	color: var(--link-color);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

.active-link {
	font-weight: 700;
}

.ext::after {
	content: url(../assets/icons/launch.svg);
	white-space: nowrap;
	padding-left: 0.25em;
	fill: var(--link-color);
}

ul {
	margin: 0.5em 0;
}

table {
	border: 1px solid var(--light-gray);
	border-collapse: collapse;
}

td,
th {
	border: 1px solid var(--light-gray);
	padding: 0.5em;
}

.centered-text {
	text-align: center;
}

.icon::before {
  display: inline-block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

.body-content {
	display: flex;
	margin: 0 auto;
	max-width: 100%;
	gap: 2.5em;
}

.body-main-content {
	width: 100%;
}

.body-wrapper {
	margin: 1.5em 14em ; 
}

@media screen and (max-width: 1000px) {
	.body-wrapper {
		flex-wrap: wrap;
	}
}

@media screen and (max-width: 1800px) {
	.body-wrapper {
		margin: 1.5em 5em;
	}
}

@media screen and (max-width: 800px) {
	.body-wrapper {
		margin: 1.5em 3em;
	}
}

@media screen and (max-width: 500px) {
	.body-wrapper {
		margin: 1.5em 1em;
	}
}

.skip-link {
  position: absolute;
  top: -3em;
  background: #fff;
}
.skip-link:focus {
  top: 3em;
}


/* styling breadcrumb nav */
.breadcrumbs {
	margin: 0.25em 0;
}

.breadcrumbs ul {
	padding: 0;
}

.breadcrumbs ul {
	list-style: none;
}

.breadcrumbs li {
	display: inline-block;
	font-size: 0.75rem;
}

.breadcrumbs li a,
.breadcrumbs li span {
	color: white;
	background-color: var(--blue);
	padding: 0.25em 0.5em;
	border-radius: 5px;
	text-transform: uppercase;
}

.breadcrumbs li::after {
	content: '\003E';
	font-weight: 700;
}

.breadcrumbs li:last-child::after {
	content: '';
}

.breadcrumbs li:last-child span {
	background-color: var(--light-blue);
	font-weight: 700;
}

/* styling sidebar nav */
.sidebar-nav {
	border: 1px solid var(--light-gray);
	width: 100%;
}

.sidebar-nav h2 {
	margin: 0;
	padding: 0.25em 0.5em;
	background-color: var(--blue);
}

.sidebar-nav h2 a {
	color: white;
}

.sidebar-nav ul {
	list-style: none;
	padding: 0.5em 12px;
}

.sidebar-nav li {
	padding: 1em 0;
	display: flex;
	border-bottom: 1px solid var(--light-gray);
}

.sidebar-nav li:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.sidebar-nav li:first-child {
	padding-top: 0;
}

@media screen and (max-width: 1000px) {
	.body-content {
		flex-wrap: wrap;
	}
}

@media screen and (min-width: 1001px) {
	.sidebar-nav {
		flex-basis: 275px;
		flex-grow: 0;
		flex-shrink: 0;
		align-self: start;
	}
}

.column-container {
	display: flex;
	gap: 0;
	flex-wrap: wrap;
}

.about-column {
	width: 100%;
}

@media screen and (min-width: 800px) {
	.column-container {
		flex-wrap: nowrap;
		gap: 3em;
	}
	.about-column:last-child {
		width: 40%;
	}
}

.about-column {
	address {
		font-style: normal;
	}
	div {
		width: 100%;
	}
}
/* styling school directory */
.school-list-content {
	display: grid;
	grid-template-columns: 1fr 1fr;

	column-gap: 5em;
	row-gap: 5em;
}

@media screen and (min-width: 2500px) {
	.school-list-content {
		grid-template-columns: 1fr 1fr 1fr;
	}
}

@media screen and (max-width: 1200px) {
	.school-list-content {
		column-gap: 5em;
	}
}

@media screen and (max-width: 800px) {
	.school-list-content {
		column-gap: 3em;
	}
}

@media screen and (max-width: 600px) {
	.school-list-content {
		grid-template-columns: 1fr;
	}
}

.school-list-item-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.school-list-item-text p {
	margin-bottom: 0.75em;
}

.school-list-item-text ul {
	margin-top: auto;
	list-style-type: none;
	padding: 0;
}

.school-list-item-text li {
	margin: 0.25em 0;
}

.school-list-item-text h2 {
	font-size: 1.5rem;
	margin: 0;
}

.school-list-item-text p {
	margin: 0;
}

.school-list-item-text address {
	font-style: normal;
	display: inline;
}

.school-list-item {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: 1em;
	align-items: center;

	/* border: 1px solid var(--light-gray); */
}

@media screen and (max-width: 1575px) {
	.school-list-item {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
	}
}

@media screen and (max-width: 1300px) {
	.school-list-item {
		flex-wrap: wrap;
	}
}

.school-list-item img {
	width: 100%;
	align-items: center;
}

/* board members */
.board-members {
	display: grid;
	gap: 3em;
	grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
}

.board-member-card {
	border: 1px solid var(--light-gray);
}

.board-member-card .container {
	padding: 1em 24px;
	display: flex;
	justify-content: center;
	flex-direction: column;
}

.board-member-card p,
.board-member-name {
	margin: 0.25em 0;
}

.board-member-name {
	font-size: 1.5rem;
}

.sub-label-board-member {
	margin: 0.15em 0 !important;
}

.board-member-img {
	width: 100%;
	height: 400px;
}

/* styling image carousel */
.image-slider {
	width: 100%;
}

.slider {
	position: relative;
	width: 100%;
	/* height: 600px; */
	margin: auto;
	overflow: hidden;
}

.slider img {
	width: 100%;
	display: none;
}

img.display-slide {
	display: block;
	animation-name: slider-fade;
	animation-duration: 1.5s;
	object-fit: cover;
	object-position: center;
	height: min(100dvh, 675px);
}

@media screen and (max-width: 800px) {
	img.display-slide {
		height: min(50dvh, 250px)
	}
}

.slider-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	font-size: 2rem;
	background-color: rgba(0, 0, 0, 0.5);
	padding: 0.35em 0.5em;
	text-align: center;
	color: white;
	border: none;
	cursor: pointer;
}

@media screen and (max-width: 800px) {
	.slider-btn {
		font-size: 1.5rem;
	}
}

.prev { 
	left: 0;
}

.next {
	right: 0;
}

@keyframes slider-fade {
	from {
		opacity: 0.85;
	}

	to {
		opacity: 1;
	}
}

/* styling main page */
.welcome-top {
	max-width: 75%;
}

@media screen and (max-width: 800px) {
	.welcome-top {
		max-width: none;
	}

	.welcome-top p {
		text-align: left;
	}
}

.index-h2 {
	font-size: clamp(1rem, 3rem, 4rem);
}

.index-section {
	margin: 72px 0;
}

.welcome-top p {
	font-size: 1.25rem;
	margin-bottom: 2em;
}

.welcome-top h2 {
	margin-top: 0;
}

.welcome-container {
	display: flex;
	justify-content: center;
}

.welcome-item-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 3em;
}

@media screen and (max-width: 1000px) {
	.welcome-item-container {
		grid-template-columns: 1fr;
	}
}

.welcome-item {
	padding: 1em;
	border: 1px solid var(--light-gray);

}

.welcome-item h2 {
	text-align: center;
	margin-top: 0;
}

.announcements-events-container {
	display: flex;
	justify-content: center;
	gap: 3em;
	flex-wrap: wrap;
}

@media screen and (min-width: 1000px) {
	.announcements-events-container {
		flex-wrap: nowrap;
		gap: 5em;
	}
	.events,
	.announcements {
		width: 50%;
	}
}

.events,
.announcements {
	width: 100%;
}

.announcements-events-item {
	border: 1px solid var(--light-gray);
	padding: 1em;
}

.announcements-top h2, 
.events-top h2 {
	font-size: 1.125rem;
	margin: 0;
}

.events-top,
.announcements-top {
	margin-bottom: 25px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.announcements-top div,
.events-top div {
	font-size: 0.875rem;
	font-family: 'Poppins', Arial, Helvetica, sans-serif;
}

.announcements-item {
	border-bottom: 1px solid var(--light-gray);
	padding: 1.5em 0;

	time {
		color: var(--dark-gray);
	}

	h3 {
		font-family: 'Inter', Arial, Helvetica, sans-serif;
		margin-top: 0.5em;
	}

	h3 a {
		color: black;
	}

	div a {
		font-weight: 700;
	}

	div::after {
		content: ' >';
		color: black;
		font-weight: 700;
	}
}

.announcements-item:first-child,
.events-item:first-child {
	padding-top: 0;
	margin-top: 0;
}

.announcements-item:last-child,
.events-item:last-child {
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 0;
}


.events-item {
	display: flex;
	gap: 2em;
	padding: 1.5em 0;
	border-bottom: 1px solid var(--light-gray);
}

@media screen and (max-width: 800px) {
	.events-item {
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.events-item-right {
		text-align: center;
	}
}

.events-item-right {
	a h3 {
		margin: 0 0 0.25em 0;
		color: black;
		font-family: 'Inter', Arial, Helvetica, sans-serif;
	}

	i {
		margin-right: 0.25em;
	}
}

.events-item-left {
	background-color: var(--dark-blue);
	height: 90px;
	min-width: 90px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.events-item-time {
	margin-bottom: 0.25em;
	display: block;
}

.events-item-date {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	span {
		text-align: center;
		color: white;
		font-weight: 700;
	}
}

.events-item-date-month {
	text-transform: uppercase;
	font-size: 0.75rem;
}

.events-item-date-day {
	font-size: 1.875rem;
}

.latest-news-container {
	display: grid;
	gap: 3em;
	grid-template-columns: repeat(3, 1fr);
}

@media screen and (max-width: 800px) {
	.latest-news-container {
		grid-template-columns: 1fr;
	}
}

.latest-news-item {
	border: 1px solid var(--light-gray);
	padding: 1em;
}

.latest-news-item {
	display: flex;
	flex-wrap: wrap;
	align-content: space-between;

	h3 {
		margin-top: 0;
		margin-bottom: 0.75em;
	}

	h3 a {
		color: black;
		font-family: 'Inter', Arial, Helvetica, sans-serif;
	}

	time {
		display: block;
		margin-bottom: 0.5em;
		color: var(--dark-gray);
	}

	a {
		font-weight: 700;
	} 

	.read-more::after {
		content: ' >';
		color: black;
	}
}

.essential-resources-container {
	border: 1px solid var(--light-gray);
	padding: 1em;

	ul {
		display: flex;
		justify-content: center;
		padding: 0;
		flex-wrap: wrap;
		list-style-type: none;
		row-gap: 3em;
		column-gap: 2.5em;
	}

	.essential-resources-icon {
		background-color: var(--dark-blue);
		width: 100px;
		height: 100px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.essential-resources-icon i {
		font-size: 40px;
	}

	.essential-resources-item {
		display: flex;
		align-items: center;
		flex-direction: column;
		gap: 0.5em;
		width: 150px;
	}

	.essential-resources-label a {
		color: black;
		font-weight: 700;
		text-align: center;
	}
}

@media screen and (max-width: 800px) {
	.essential-resources-container {
		ul {
			column-gap: 0.5em;
			row-gap: 3em;
		}
	}
}

.departments-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 1em;
}

.department-item {
	border: 1px solid var(--light-gray);
	padding: 40px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1em;
	height: 225px;

	h2 {
		color: black;
		font-size: 1.375rem;
		font-family: 'Inter', Arial, Helvetica, sans-serif;
		margin: 0 0 1em 0;
	}

	p a {
		padding: 1em;
		border-radius: 3px;
		border: 3px solid var(--dark-blue);
		margin-top: 1em;
	}

	p a:hover{
		transition: all 0.25s ease-in;
		background-color: var(--dark-blue);
		color: white;
		text-decoration: none;
	}

}