@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');


body {
  font-family: 'Inter', sans-serif;
  background-color: #f4f4f4;
  margin: 0;
  padding: 0;
}
.container { max-width: 1200px; margin: auto; padding: 20px; background: white; border-radius: 8px; }
h1 { text-align: center; color: #0033a0;background-color: #fff1d4; }

.page-header {
	position: relative;
	width: 100%;
	height: 25vh;
	background-image: url('../images/default_banner.jpg');
	background-size: cover;
	background-position: center;
	display: flex;
	justify-content: center;
	align-items: center;
}


.carousel {
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}
.carousel img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	transition: opacity 1s ease-in-out;
}
.carousel img.active {
	opacity: 1;
}

.center-text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: white;
	font-size: 5em;
	text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
	z-index: 10;
}
.down-arrow {
	position: absolute;
	bottom: 40px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10;
	cursor: pointer;
	background-color: rgba(0, 0, 0, 0.5);
	padding: 10px;
	border-radius: 50%;
	transition: transform 0.2s;
}
.down-arrow:hover {
	transform: translateX(-50%) scale(1.1);
}
.season-buttons {
text-align: center;
margin-bottom: 20px;
display: flex;
justify-content: center;
}

.season-button {
padding: 12px 25px;
margin: 0 5px;
background-color: #004990;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.3s, transform 0.2s, box-shadow 0.3s;
font-size: 16px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
min-width: 100px; /* Ensures all buttons are equal width */
}

.season-button:hover {
background-color: #ffcb05;
color: black;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.season-button.active {
background-color: #ffcb05;
color: black;
border: 2px solid #0033a0;
}

.team-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 20px; }
.team-card { background-size: cover; height: 250px; border-radius: 8px; overflow: hidden; position: relative; transition: transform 0.3s; }
.team-card:hover { transform: scale(1.05); }
.team-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; transition: background-color 0.3s; }
.team-card:hover .team-overlay { background-color: rgba(0, 0, 0, 0.7); }
.team-name {
	color: white;
	font-size: 30px;
	text-align: center;
	text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8);
	transition: color 0.3s, transform 0.3s;
}
.team-card:hover .team-name {
	color: #ffcb05;
	transform: scale(1.1);
}



.teams-section {
	padding: 50px;
	text-align: center;
}
.team-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 30px;
	justify-content: center;
	margin-top: 30px;
}
.team-box {
	background: #004990;
	color: white;
	padding: 40px;
	text-align: center;
	font-size: 1.2em;
	cursor: pointer;
	transition: transform 0.3s, background-color 0.3s;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.team-box:hover {
	background: #ffcb05;
	transform: scale(1.05);
}
.team-box strong {
	text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
}

.center-text {

	position: absolute;
	top: 75%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: white;
	font-size: 5em;
	text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
	z-index: 10;
	width:100%;
	text-align: center;
}

.banner-text {
	width:100%;
	text-align: center;
	color: #004990;
	font-size: 3em;
	z-index: 10;
}


.center-text-2 {
	position: absolute;
	top: 75%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: white;
	font-size: 3em;
	text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
	z-index: 10;
	width:100%;
	text-align: center;
}

.center-text-top {
    position: absolute;
    top: 0; /* Stick to the top */
    left: 0;
    width: 100%;
    padding: 20px 0; /* Adds space above/below the text */
    background: rgba(0, 0, 0, 0.5); /* Optional: semi-transparent banner */
    color: white;
    font-size: 2.5em;
    text-align: center;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
    z-index: 10;
}

.mission-section {
	max-width: 800px;
	margin: 50px auto;
	padding: 40px;
	background-color: white;
	border-radius: 16px;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
	position: relative;
	overflow: hidden;
}

.mission-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}

.mission-heading {
	font-size: 32px;
	font-weight: bold;
	color: #0033a0;
	text-align: center;
	margin-bottom: 20px;
	position: relative;
	z-index: 1;
}

.mission-text {
	font-size: 16px;
	line-height: 1.8;
	color: #333;
	text-align: justify;
	position: relative;
	z-index: 1;
}