/* Third Party Fonts */
@font-face {
  font-family: 'poppins';
  src: url('fonts/poppins.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* Universal Styles */
*{
	margin:0;
	padding:0;
	box-sizing:border-box;
}

body{
	font-family: 'poppins', sans-serif;
}

/* Styles For The Container Holding The Page Content  */
.content{
	min-height:100vh;
	display:flex;
	flex-direction:column;
	justify-content:top;
}

/* Styles For The Navbar */
.navbar{
	background-color:#000080;
	padding:25px;
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	align-items:center;
	position: relative;
	z-index: 2;
}

@media screen and (max-width:700px){
	.navbar{
		padding:12px;
	}
}

/* Styles For The Main Logo  */
.main-logo{}

.main-logo img{
	width:175px;
	height:50px;
}

/* Styles For The Navigation Links */
.nav-links{
	display:flex;
	flex-direction:row;
	justify-content:left;
	align-items:center;
}

.nav-links a{
	color:#fff;
	text-decoration:none;
	margin-right:8px;
}

.nav-links a:hover{
	color:#d3d3d3;
	transition-duration:0.5s;
}

@media screen and (max-width:700px){
	.nav-links{
		display:none;
	}
}

/* Styles For The Navigation Hamburger Icon  */
.hamburger-icon{
	display:none;
}

.hamburger-icon img{
	height:40px;
	width:40px;
}

@media screen and (max-width:700px){
	.hamburger-icon{
		display:flex;
	}
}

/* Styles For The Hamburger Menu  */
.hamburger-menu{
	display:none;
	position: relative;
	z-index: 2;
}

@media screen and (max-width:700px){
	.hamburger-menu{
		flex-direction:column;
		justify-content:top;
		align-items:left;
		padding-top:5px;
		background-color:#000080;
	}

	.hamburger-menu.is-active{
		display:flex;
	}

	.hamburger-menu a{
		margin-bottom:5px;
		margin-left:15px;
		text-decoration:none;
		color:#fff;
	}

	.hamburger-menu a:hover{
		color:#d3d3d3;
		transition-duration:0.5s;
	}
}

/* Styles For The Placeholder Content When The Page Is Empty */
.placeholder{
	flex-grow:1;
}

/* Styles For The Footer */
.footer{
	background-color:#000080;
	padding:25px;
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	align-items:center;
	position: relative;
	z-index: 2;
}

@media screen and (max-width:700px){
	.footer{
		padding:12px;
		flex-direction:column;
	}
}

/* Styles For The Member Organization Logos */
.member-orgs{
	display:flex;
	flex-direction:column;
	justify-content:top;
	align-items:center;
}

.member-orgs h5{
	color:#fff;
	margin-bottom:10px;
}

.member-org-logos{
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	align-items:center;
}

.member-org-logos img{
	height:40px;
	width:40px;
	margin:5px;
}

@media screen and (max-width:700px){
	.member-orgs{
		margin-bottom:15px;
	}
}

/* Styles For The Copyright Message */
.copyright-msg{
	display:flex;
	flex-direction:column;
	justify-content:top;
	align-items:center;
}

.copyright-msg p{
	color:#fff;
}

@media screen and (max-width:700px){
	.copyright-msg{
		margin-bottom:15px;
	}
}

/* Styles For The Social Media Logos */
.social-links{
	display:flex;
	flex-direction:column;
	justify-content:top;
	align-items:center;
}

.social-links h5{
	color:#fff;
	margin-bottom:10px;
}

.social-link-logos{
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	align-items:center;
}

.social-link-logos img{
	height:40px;
	width:40px;
	margin:5px;
}

/* Styles For The Changing Backgrounds  */
.backgrounds {
	position: relative;
	overflow: hidden;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
}

.backgrounds::before,
.backgrounds::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	transition: opacity 1.5s ease-in-out;
	z-index: -1;
}

.backgrounds::before {
	background-image: url('images/background/waterfall.jpg');
	opacity: 1;
}

.backgrounds::after {
	background-image: url('images/background/hawk.jpeg');
	opacity: 0;
}

.backgrounds.change::before {
	opacity: 0;
}

.backgrounds.change::after {
	opacity: 1;
}

/* Styles To Make Index Page Menus Opaque */
.opaque{
	background-color:rgba(0,0,0,0.4);
}

/* Styles For The Hero Section  */
.hero{
	display:flex;
	flex-direction:row;
	justify-content:center;
	align-items:center;
	position: relative;
	z-index: 2;
}

.hero-msg{
	margin-top:150px;
	width:40%;
}

.hero-msg h1{
	color:#fff;
}

.hero-msg p{
	color:#fff;
	margin-top:5px;
}

.hero-btn{
	display:flex;
	flex-direction:row;
	justify-content:left;
	align-items:center;
	margin-top:5px;
}

.hero-btn a{
	color:#000;
	background-color:#fff;
	text-decoration:none;
	padding:12px 16px 12px 16px;
	margin:8px;
	border-radius:8px;
}

.hero-btn a:hover{
	background-color:#d3d3d3;
	transition-duration:0.5s;
}

.hero-event{
	margin-top:150px;
	width:40%;
}

@media screen and (max-width:700px){
	.hero{
		flex-direction:column;
	}

	.hero-msg{
		margin-top:0%;
		padding:20px;
		width:100%;
	}

	.hero-event{
		margin-top:0%;
		padding:20px;
		width:100%;
	}

	.hero-btn a{
		padding:8px 10px 8px 10px;
		margin:5px;
	}
}

/* Styles For The Article 2 Class */
.article2{
	display:flex;
	flex-direction:row;
	justify-content:center;
	align-items:top;
	margin:25px;
}

.article2-img{
	width:40%;
	display:flex;
	flex-direction:row;
	justify-content:right;
	align-items:top;
}

.article2-img img{
	max-width:100%;
	height:auto;
	border-radius:8px;
}

.article2-img iframe{
	width:100%;
	height:450px;
	border:none;
	border-radius:8px;
}

.article2-text{
	width:40%;
	margin-left:20px;
}

.article2-text h1{
	margin-bottom:5px;
}

.article2-text ul{
	list-style-type:none;
	padding:0px;
	margin:0px;
}

.article2-text li{
	border-bottom:1px solid #d3d3d3;
	padding:5px 0px 5px 0px;
}

@media screen and (max-width:700px){
	.article2{
		flex-direction:column;
		margin:0px;
	}

	.article2-img{
		width:100%;
		justify-content:center;
	}

	.article2-img img{
		border-radius:0px;
	}

	.article2-text{
		width:100%;
		margin-left:0px;
		margin-top:10px;
		padding:12px;
	}
}

/* The Styles For The Article 1 Class */
.article1{
	width:100%;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
}

.article1 p{
	width:60%;
}

.article1-btns{
	display:flex;
	flex-direction:row;
	justify-content:center;
	align-items:center;
	margin:10px;
}

.article1-btns a{
	text-decoration:none;
	color:#fff;
	background-color:#000080;
	margin:5px;
	padding:15px 10px 15px 10px;
	border-radius:8px;
}

@media screen and (max-width:700px){
	.article1 h1{
		text-align:center;
	}

	.article1 p{
		width:100%;
		padding:12px;
	}

	.article1-btns{
		flex-direction:column;
	}

	.article1-btns a{
		padding:10px 5px 10px 5px;
	}
}

/* The Styles For The Main Topic */
.main-topic{
	display:flex;
	flex-direction:row;
	justify-content:center;
	align-items:center;
	margin-bottom:20px;
	margin-top:10px;
}

.main-topic h1{
	text-align:center;
}

/* The Styles For The Secondary Topic */
.secondary-topic{
	display:flex;
	flex-direction:row;
	justify-content:center;
	align-items:center;
	margin-bottom:20px;
}

.secondary-topic h2{
	text-align:center;
}

/* The Styles For The Tertiary Topic */
.tertiary-topic{
	display:flex;
	flex-direction:row;
	justify-content:center;
	align-items:center;
	margin-bottom:20px;
}

.tertiary-topic p{
	font-style:italic;
	text-align:center;
}

/* The Styles For The Profile Gallery */
.profile-gallery{
	display:flex;
	flex-direction:row;
	justify-content:center;
	align-items:stretch;
	margin-bottom:20px;
}

@media screen and (max-width:700px){
	.profile-gallery{
		flex-direction:column;
		align-items:center;
	}
}

/* The Styles For The Large Profile Card */
.profile-card-lg{
 	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
	max-width: 240px;
	margin:8px;
	border-radius:8px;
}

.profile-card-lg img{
	width:100%;
	height:auto;
	border-radius:8px 8px 0px 0px;
}

.profile-card-lg h4{
	padding-top:12px;
	text-align:center;
}

.profile-card-lg p{
	padding-bottom:12px;
	text-align:center;
}


/* The Styles For The Small Profile Card */
.profile-card-sm{
 	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
	max-width: 180px;
	margin:8px;
	border-radius:8px;
}

.profile-card-sm img{
	width:100%;
	height:auto;
	border-radius:8px 8px 0px 0px;
}

.profile-card-sm h4{
	padding-top:12px;
	text-align:center;
}

.profile-card-sm p{
	padding-bottom:12px;
	text-align:center;
}

/* The Styles For The Course Buttons  */
.course-btns{
	width:100%;
	display:flex;
	flex-direction:row;
	justify-content:center;
	align-items:center;
}

.course-btns a{
	text-decoration:none;
	margin:8px;
	padding:15px 10px 15px 10px;
	background-color:#000080;
	color:#fff;
	border-radius:8px;
}

@media screen and (max-width:700px){
	.course-btns{
		flex-direction:column;
	}
}

/* The Styles For The Course Gallery */
.course-gallery{
	display:flex;
	flex-direction:row;
	justify-content:center;
	align-items:stretch;
	margin-bottom:20px;
}

@media screen and (max-width:700px){
	.course-gallery{
		flex-direction:column;
		align-items:center;
	}
}

/* The Styles For The Course Card */
.course-card{
 	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
	display:flex;
	flex-direction:column;
	justify-content:top;
	align-items:stretch;
	max-width: 360px;
	margin:20px;
	border-radius:8px;
}

.course-card-head{
	background-color:#000080;
	border-radius:8px 8px 0px 0px;
}

.course-card-head h4{
	color:#fff;
	padding:15px;
	text-align:center;
}

.course-card-body{
	padding:15px;
}

.course-card-body p{
	margin-bottom:10px;
}

@media screen and (max-width:700px){
	.course-card{
		margin:8px;
	}
}

/* The Styles For The Carousel */
.carousel{
	display:flex;
	flex-direction:row;
	justify-content:center;
}

.carousel-container {
	position: relative;
	width: 1150px;
	height: 650px;
	overflow: hidden;
	border:none;
	border-radius: 8px;
	margin-bottom: 20px;
}

.carousel-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 0;
	transition: opacity 1.5s ease-in-out; /* This is the key for a smooth fade */
}

.carousel-slide.active {
	opacity: 1;
}

.carousel-slide img {
	width: 100%;
	height: auto;
	display: block;
}

@media screen and (max-width:700px){
	.carousel-container{
		width:100%;
		height:200px;
		border-radius:0px;
		margin-bottom: 0px;
	}
}

/* The Styles For The Events */
.events{
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	width:100%;
}

.event{
 	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
	border-radius:8px;
	width:40%;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	margin:20px 0px 20px 0px;
}

.event img{
	width:100%;
	border-radius:8px 8px 0px 0px;
}

.event a{
	margin:20px 0px 20px 0px;
	text-decoration:none;
	color:#000;
	font-size:24px;

}

@media screen and (max-width:700px){
	.event{
		margin:10px;
		width:90%;
	}
}

/* The Styles For The Event Image Gallery  */
.image-gallery-content{
	width:100vw;
	height:100vh;
	display:flex;
	flex-direction:row;
	justify-content:center;
	align-items:center;
}

.image-gallery-card{
	position: relative;
	width:40%;
	height:400px;
	margin:20px;
	border-radius:8px;
	transition: transform 1s ease-in-out;
}

.image-gallery-card:hover {
	transform: scale(1.05); /* Scales the card up by 5% */
}

.image-gallery-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black overlay */
	z-index: 1; /* Puts the overlay on top of the image */
	border-radius:8px;
}

.image-gallery-card img{
 	display: block;
	width:100%;
	height:100%;
	border-radius:8px;
	object-fit:cover;
}

.image-gallery-card-text{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: white;
	/*background-color: rgba(0, 0, 0, 0.6);*/
	padding: 10px 15px;
	border-radius: 5px;
	text-align: center;
	font-weight: bold;
	z-index: 2;
}

.image-gallery-card-text p{
	font-size:40px;
	margin:0px;
	padding:0px;
}

.image-gallery-card a{
	position:relative;
	z-index:3;
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
}

.image-gallery-photos {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding: 10px;
	gap: 10px;
}

.image-gallery-item {
	flex: 1 1 300px;
	height: 200px;
	overflow: hidden;
	position: relative;
	cursor: pointer;
}

.image-gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1s ease-in-out;
}

.image-gallery-item:hover img {
	transform: scale(1.1);
}

.modal {
	display: none;
	position: fixed;
	z-index: 1000;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.9);
	justify-content: center;
	align-items: center;
	animation: fadeIn 0.5s ease-in-out;
}

.modal-content {
    max-width: 90%;
    max-height: 90%;
    display: block;
    margin: auto;
    animation: zoomIn 0.5s ease-in-out;
}

.close {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s ease;
}

.close:hover,
.close:focus {
    color: #bbb;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes zoomIn {
    from { transform: scale(0.5); }
    to { transform: scale(1); }
}

@media screen and (max-width:700px){
	.image-gallery-content{
		flex-direction:column;
	}

	.image-gallery-card{
		width:90%;
		margin:10px;
	}

	.image-gallery-card-text p{
		font-size:20px;
	}

	.image-gallery-item {
        	flex: 1 1 100%;
    	}
}