/* Existing CSS rules */
body {
	margin: 0;
	padding: 0;
}

.header {
  display: flex;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 50vh; /* Adjust the height as needed */
	margin: 0;
	padding: 0;	
}

@media screen and (min-width: 1024px) {
	.header {
  height: 90vh; /* Adjust the height as needed */
}}

@media screen and (orientation: landscape) {
	.header {
  height: 90vh; /* Adjust the height as needed */
}}

.image-container {
  flex: 1;
  position: relative;
}

.background {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.professional-background {
  background-image: url('professional_background2.jpg');
  position: relative;
  background-size: cover;
}

.sports-background {
  background-image: url('sports_background.jpg');
  position: relative;
  background-size: cover;
}

.background img {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  max-width: 200%;
  height: 100%;
  transition: opacity 0.3s ease-in-out;
  pointer-events: none;
}

.professional-background img {
  right: 0;
}

.sports-background img {
  left: 0;
}


.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0; /* Initially transparent */
  background-color: rgba(0, 0, 0, 0.8); /* Dark overlay color */
  transition: opacity 0.3s ease-in-out;
  pointer-events: none; /* Prevents the overlay from affecting hover */
}

.overlay-left {
  z-index: 1; /* Ensure overlay appears above right image container */
}

.overlay-right {
  z-index: 1; /* Ensure overlay appears above left image container */
}

.professional-intro {
	width: 40%;
	padding-left: 15%;
	padding-bottom: 10%;
	position: absolute;
	bottom:0px;
  	left:0px;
	
}

.sports-intro {
	width: 40%;
	padding-right: 15%;
	padding-bottom: 10%;
	position: absolute;
	bottom:0px;
  	right:0px;
	
}

h1{
	text-transform:uppercase;
	font-family: 'Bebas Neue', sans-serif;
	color: black;
	font-size: 5em;
	text-align: center;
	padding-bottom: 0px;
	padding-top: 0px;
	height: 0px;
}

.header h2 {
	font-family: 'Bebas Neue', sans-serif;
}

.intro {
	font-family: 'Montserrat', sans-serif;
} 

/* For tiny screens */
@media screen and (min-width: 320px) and (max-width: 500px)
{h2 {
	text-transform:uppercase;
	color: white;
	text-shadow: 0 2px black;
	font-size: 145%;
	}

	.intro{
		top: 1%;
		}
}

/* For mobile screens */
@media screen and (min-width: 501px) and (max-width: 768px)
{h2 {
	text-transform:uppercase;
	color: white;
	text-shadow: 0 2px black;
	font-size: 220%;
	}

	.intro{
		top: 1%;
		}
}

/* For medium screens */
@media screen and (min-width: 769px) and (max-width: 1023px) {
	h2 {
	text-transform:uppercase;
	color: white;
	text-shadow: 0 2px black;
	font-size: 240%;
	}

	.intro{
		top: 5%;
		}}

/* For larger screens */
@media screen and (min-width: 1024px) {
	h2 {
	text-transform:uppercase;
	color: white;
	text-shadow: 0 2px black;
	font-size: 300%;
	}}


/* For tiny screens */
@media screen and (min-width: 320px) and (max-width: 500px) {
	
	

.intro p {
	color: white;
	font-size: 68%;
	text-shadow: 0 2px black;		
}
.intro{
	top: 5%;
	}

}

/* For mobile screens */
@media screen and (min-width: 501px) and (max-width: 696px) {
	

.intro p {
	color: white;
	font-size: 75%;
	text-shadow: 0 2px black;		
}

.intro{
	top: 5%;
	}
}

/* For medium screens */
@media screen and (min-width: 697px) and (max-width: 1023px)  {
	
	.intro{
	top: 1%;
	}
	
	.intro p {
	color: white;
	font-size: 120%;
	text-shadow: 0 2px black;		
	}}


/* For larger screens */
@media screen and (min-width: 1024px) {
	
	.intro{
	top: 20%;
}
	.intro p {
	color: white;
	font-size: 130%;
	text-shadow: 0 2px black;		
	}}

button {
	border: 2px solid white;
	background-color: transparent;
	font-family: 'Montserrat', sans-serif;
	color: white;
	font-size: 0.5em;
	height: 30px; 
    width: 80px;
	text-transform:uppercase;


	}

button:hover {
	border: 2px solid white;
	background-color: white;
	color: black;
	height: 30px; 
	text-transform:uppercase;
	}

/* Navbar styles */

header {
  background-color: white; /* Change this to your preferred background color */
  color: white;
  padding: 10px;
	margin-left: 2% ;
	margin-right: 2%;
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.menu {
  list-style-type: none;
  display: flex;
}

.menu-icon {
    display: none;
  }

.menu-close-icon {
  display: none;
}

nav .logo img {
	height: 50px;
}

.menu li {
  	margin-right: 20px;
  	font-family: 'Montserrat', sans-serif;
	font-size: 1.2em;


}


.menu li a {
  color: #4365b4;
  text-decoration: none;
	padding-left: 10px;
	padding-right: 10px;
}

.menu li a:hover {
  color: white;
	border-radius: 25px;
background: #4365b4;
	padding: 10px;
}

/* Responsive design for smaller screens */

@media screen and (max-width: 767px) {
 .menu {
  display: none;
  /* Additional styles for sliding effect */
  position: fixed;
  top: 63px; /* Adjust based on your header's height */
  background-color: #fff; /* Change this to your preferred background color */
width: 40%;
  transition: transform 0.3s ease-in-out;
  z-index: 1000; /* Ensure menu is above other content */
	 align-items: flex-end;
	 padding: 0; /* Remove default padding */
    margin: 0; /* Remove default margin */
	 right: 0;
}

  .menu-icon {
    display: block;
  }

	nav .logo img {
	height: 40px;
}
	
  .menu-icon img {
    width: auto; /* Adjust this to fit your menu icon */
    height: 20px;
    cursor: pointer;
  }

  .menu.active {
  display: flex;
  flex-direction: column;
  transform: translateY(0);
}
	
	.menu li {
    margin: 5px 0; /* Add margin to create space between items */
    padding: 5px; /* Add padding for internal spacing */
	font-size: 0.9em;
  }
	.menu {
		padding-bottom: 10px;
	}
}

.quoteBlock {

background-color: #d5d8e0;
text-align: center;
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
display:grid
}

.qotd {

	text-decoration: none;
	font-size: 1.2em;
	padding: 0;
	}

.quoteItself {
padding: 0;
text-decoration: none;
font-family: 'Bebas Neue', sans-serif;
font-size: 3.5em;	
color: #4365b4;
width: 60%;
margin: 0 auto;
}

.quoteAuthor {
	padding: 0;
	text-decoration: none;
	font-size: 1.6em;	
	font-weight: 300;
	color: #676c75;
	}


	@media screen and (max-width: 767px) {
	
		.quoteBlock {

			background-color: #d5d8e0;
			text-align: center;
			font-family: 'Montserrat', sans-serif;
			text-transform: uppercase;
			display:grid
			}
			
			.qotd {
			
				text-decoration: none;
				font-size: 0.8em;
				padding: 0;
				}
			
			.quoteItself {
			padding: 0;
			text-decoration: none;
			font-family: 'Bebas Neue', sans-serif;
			font-size: 2.5em;	
			color: #4365b4;
			width: 60%;
			margin: 0 auto;
			}
			
			.quoteAuthor {
				padding: 0;
				text-decoration: none;
				font-size: 1em;	
				font-weight: 300;
				color: #676c75;
				}
			
	}

	/* Sample CSS for footer styling */
footer {
	background-color: #5b616a; /* Change the background color as needed */
	padding: 20px;
	text-align: center;
  }
  
  .social-icons {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 10px;
  }
  
  .social-icons img {
	width: 30px; /* Adjust the width of the icons as needed */
	margin: 0 6px; /* Adjust the spacing between icons */
  }
  
  .footer-site-logo {
	display: block;
	margin: 0 auto; /* Center the logo horizontally */
	width: 150px; /* Adjust the width of the site logo as needed */
	margin-top: 10px; /* Adjust the space between social icons and site logo */
  }

  footer p {
	font-family: 'Montserrat', sans-serif;
	color: #fff;
  }

.social-icons img:hover {
opacity: 0.5;
}

/* Chasing Ten CSS */

.chasing-ten-background {
	background-image: url('chasing-ten/chasing-ten-4k.jpg');
	position: relative;
	background-size: cover;
	background-position: 50%;
  }

  .chasing-ten-intro {
	width: 40%;
	padding-left: 10%;
	padding-bottom: 10%;
	position: absolute;
	bottom:0px;
  	left:0px;
	top: 55%;
  }