@charset "utf-8";
/* CSS Document */

/*
Framework by Andy Shearouse
*/
html,
body {
	margin: 0px !important;
	padding: 0px !important;
	background-color: white;
	font-family: Arial, Helvetica, sans-serif;
}

        a{
            text-decoration: none;
            color:#6b0134;
        }
        a:hover{
            text-decoration: underline;
            color: #000;
        }
        h2{
            color:#454545;
        }
.content {
	width: 100%;
	display: inline-block;
	padding-bottom: 20px;
}

ul {}

img {
	max-width: 100% !important;
}


.container {
	max-width: 2400px;
	width: 100%;
	margin: 0 auto;
	position: relative;
	font-size:18px;
}

.header {
	width: 100%;
}


/*Use the following for top drop-down nav
Change the background-color in #nav to change the color of the navigation bar
Change the background-color in #nav ul li ul to change the background color of the dropdown menus
These values do also need to be changed further down, in the 600px, 400px, and 300px wide sections 
*/
/* -------------------- Start Navigation -------------------- */
#nav {
	width: 100%;
	z-index: 10;
	position: relative;
	float: left;
	font-size: 16px;
	margin-bottom: 15px;
	background-color: #ebebeb;
}

#nav>a {
	display: none;
}

#nav li {
	position: relative;
	list-style-position: inside;
	list-style-type: none;
}

#nav li a {
	color: #000;
	display: block;
	text-decoration: none;
}

/* first level */

#nav>ul {
	text-align: center;
	padding-left: 0px !important;
	margin-left: 0px !important;
}

#nav>ul>li {
	margin: 0px 15px;
	padding: 4px 8px;
	height: 100%;
	display: inline-block;
}

#nav>ul>li>a {
	height: 100%;
	text-align: center;
}

#nav>ul>li:not( :last-child)>a {}

#nav>ul>li:hover>a,
#nav>ul:not( :hover)>li.active>a {}

/* second level */

#nav li ul {
	background-color: white;
	display: none;
	position: absolute;
	top: 100%;
	margin-left: 0 !important;
	padding-left: 0 !important;
	width: 100%;
	text-align: left;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	z-index:10;
}

#nav li:hover ul {
	display: block;
	left: 0;
	right: 0;
}

#nav li:not( :first-child):hover ul {
	left: -1px;
}

#nav li ul a {
	color: #000;
	padding: 0.75em;
	/* 15 (20) */
}

#nav li ul li a:hover,
#nav li ul:not( :hover) li.active a {}

/* -------------------- End Navigation -------------------- */


#hero-section {
	position: relative;
	width: 100%;
	display: inline-block;
	text-align: center;
	margin-top: -15px;
}

#hero-section .hero {
	position: relative;
	width: 100%;
	display: inline-block;
}

#hero-section .hero img {
	width: 100%;
	height: auto;
	display: block;
	max-width: 100%;
}
.card{
	max-width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.card p{
	padding: 10px;
	font-size: 1rem;
	color: #333;
	text-align: left;
}

.content-wide{
    max-width:1400px;
    margin:20px auto;
    width:90%;
}

.dept-card {
    width: 100%;
    max-width: 300px;            
    height: auto;
    margin: 10px auto;             
    border: 1px solid #ccc;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    font-family: var(--font-alt);
    overflow-wrap: break-word;
    background: #fff;
}

/* Image wrapper */
.dept-card img {
    width: 100%;
    height: 200px;               
    object-fit: cover;             
    display: block;
}


.dept-card-body {
    padding: 12px;
    min-height: 50px;
    text-align: center;            
}


.dept-card-body h3 {
    margin: 0 0 8px;
    font-size: 1.6rem;
}


.dept-card-body p {
    margin: 0;
    color: #555;
    font-size: 1.2rem;
}

.btn {
    display: inline-block;
    padding: 15px ;
    border: 2px solid #dc2626;
    background: transparent;
    color: rgb(3, 23, 57);
    text-decoration: none;
    font-size: 16px;
    text-align:center;
    font-weight: 500;
    transition: all 0.3s;
    cursor: pointer;
}

.btn:hover {
    background: rgb(84, 1, 42);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

.snazzy-background{
    background-color:#55012b;
    color:#fff;
    width:84%;
    padding:2% 8%;
    font-size:20px;
    margin:4% 0;
}

.snazzy-background h2{
    color:white !important;
}
#hero-section .custom-content-container {
	position: absolute;
	top: 40%;
	left: 50%;
	transform: translate(-50%, -70%);
	z-index: 3;
	text-align: center;
	color: white;
	width: 1000px; /* It makes sure the text appears as in the psd file */
	max-width: 90%;
	padding: 20px;
}
#hero-section .custom-content-container2 {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;
	text-align: center;
	color: white;
	width: 1000px; /* It makes sure the text appears as in the psd file */
	max-width: 90%;
}

.custom-content-container2 a{
    color:#ffca00;
}

.custom-content-container2 ul {
	list-style-type: none;
	display: flex;
	flex-direction: row; 
	justify-content: space-between; 
	align-items: center;
}


.custom-content-container2 ul li {
	margin: 0 ;
	padding: 4px 8px;
	height: 100%;
	width: 100%;
	display: inline-block;
	font-size: 1.2rem;
	font-weight: bold;
	white-space: nowrap;
}

#hero-section .custom-content-container h1 {
	font-size: 5rem;
	font-weight: bold;
	margin-bottom: 1rem;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
	color: white;
}

#hero-section .custom-content-container p {
	font-size: 1.2rem;
	line-height: 1.6;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
	color: white;
	margin: 0;
}

@media only screen and (max-width: 720px) {
	#hero-section .custom-content-container {
		max-width: 95%;
		padding: 15px;
	}
	#hero-section .custom-content-container2  {
		font-size: 0.5rem;
	}
	#hero-section .custom-content-container2 ul {
			margin-bottom: 2px;}

	#hero-section .custom-content-container h1 {
		font-size: 2rem;
	}

	#hero-section .custom-content-container p {
		font-size: 1rem;
	}
}

/* -------------------- End Hero Section -------------------- */

.content {
	width: 100%;
	display: inline-block;
	padding-bottom: 20px;
}

.grid-two-thirds-one-third {
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 2fr 1fr;
	grid-template-columns: 2fr 1fr;
}

.grid-three-fourths-one-fourth {
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 3fr 1fr;
	grid-template-columns: 3fr 1fr;
}

.grid-one-fourth-three-fourths {
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 1fr 3fr;
	grid-template-columns: 1fr 3fr;
}

.grid-three-fifths-two-fifths {
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 3fr 2fr;
	grid-template-columns: 3fr 2fr;
}

.grid-two-fifths-three-fifths {
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 2fr 3fr;
	grid-template-columns: 2fr 3fr;
}

.grid-two-columns {
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 1fr 1fr;
	grid-template-columns: 1fr 1fr;
}

.grid-three-columns {
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 1fr 1fr 1fr;
	grid-template-columns: 1fr 1fr 1fr;
}

.grid-four-columns {
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 1fr 1fr 1fr 1fr;
	grid-template-columns: 1fr 1fr 1fr 1fr;
}


.footer {
	background-color: #ebebeb;
	padding-bottom:1%;
}

.footer ul {
	list-style-type: none;
}

.footer ul li {
	margin-bottom: 15px;
}

.footer ul li a {
	text-decoration: none;
	color: #000;
}

.no-margin {
	margin: 0px !important;
}

.no-padding {
	padding: 0px !important;
}

.no-bold {
	font-weight: normal !important;
}

.no-border {
	border: none !important;
}

.center {
	text-align: center;
}

.block {
	display: block !important;
}

@media only screen and (max-width:1200px) {}

@media only screen and (max-width:960px) {
	.grid-four-columns {
		-ms-grid-columns: 1fr;
		grid-template-columns: 1fr 1fr;
	}
}

.menu-grid {
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: center;
    gap: 30px 40px; /* row-gap then column-gap */
    margin-top: 20px;
}



@media (max-width: 600px) {
    .menu-grid {
        grid-template-columns: repeat(2, auto);
    }
}

@media only screen and (max-width:720px) {

	/* -------------------- Start Navigation -------------------- */
	#nav {
		position: relative;
	}

	#nav img {
		vertical-align: middle;
	}

	#nav>a {}

	#nav:not( :target)>a:first-of-type,
	#nav:target>a:last-of-type {
		display: block;
		width: 100%;
		text-align: center;
		color: #000;
		font-size: 20px;
		padding: 5px 0px;
		text-decoration: none;
	}

	#nav a {
		font-size: 18px;
	}

	/* first level */

	#nav>ul {
		height: auto;
		display: none;
		position: absolute;
		left: 0;
		right: 0;
		background-color: #ccc;
		margin-top: 8px !important;
		padding-bottom: 10px;
	}

	#nav:target>ul {
		display: block;
	}

	#nav>ul>li {
		width: 100%;
		float: none;
		margin: 0px !important;
		padding: 4px 0px;
	}

	/* second level */

	#nav li ul {
		position: static;
		width: 98%;
		margin: 0 !important;
		text-align: center;
		padding: 0 !important;
	}

	#nav li ul a {
		padding: 0.5em 0;
		margin: 0.25em 0;
	}

	/*End Navigation*/

	.grid-two-thirds-one-third {
		-ms-grid-columns: 1fr;
		grid-template-columns: 1fr;
	}

	.grid-one-fourth-three-fourths {
		-ms-grid-columns: 1fr;
		grid-template-columns: 1fr;
	}

	.grid-two-fifths-three-fifths {
		-ms-grid-columns: 1fr;
		grid-template-columns: 1fr;
	}

	.grid-three-fifths-two-fifths {
		-ms-grid-columns: 1fr;
		grid-template-columns: 1fr;
	}

	.grid-two-columns {
		-ms-grid-columns: 1fr;
		grid-template-columns: 1fr;
	}

	.grid-three-columns {
		-ms-grid-columns: 1fr;
		grid-template-columns: 1fr;
	}

	.grid-four-columns {
		-ms-grid-columns: 1fr;
		grid-template-columns: 1fr;
	}

	.grid-three-fourths-one-fourth {
		-ms-grid-columns: 1fr;
		grid-template-columns: 1fr;
	}

	.footer {
		text-align: center;
	}



}


@media only screen and (max-width:600px) {}

@media only screen and (max-width:480px) {}