<style>

/* Global Styles */

:root {

    --primary: #003366; /* Deep Atlantic Blue */

    --accent: #FF4F00; /* Nova Scotia Sunset Orange */

    --electric: #00B4FF; /* Ice Blue */

}



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    font-family: 'Arial Black', sans-serif;

}



body {

    background: #0a0a0a;

    color: white;

    overflow-x: hidden;

}



/* Hero Section - Full Screen Video Background */

.hero {

height: 100vh;

position: relative;

overflow: hidden;

}



#hero-video {

position: absolute;

right: 0;

bottom: 0;

min-width: 100%;

min-height: 100%;

opacity: 0.4;

object-fit: cover; /* Ensure the video covers the entire area */

}



.hero-content {

position: relative;

z-index: 2;

padding: 2rem;

text-align: center;

height: 100%;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center; /* Center content horizontally */

}



.logo img {

height: auto;

max-width: 100%;

max-height: 500px; /* Adjust as needed for mobile */

}



h1 {

font-size: 2rem; /* Smaller font size for mobile */

margin: 1rem 0;

text-shadow: 0 0 15px var(--electric);

}



.tagline {

font-size: 1.2rem; /* Smaller font size for mobile */

margin: 0.5rem 0;

color: var(--electric);

}



.countdown {

font-size: 1.5rem; /* Smaller font size for mobile */

margin: 1rem 0;

animation: pulse 2s infinite;
	
display: none;

}



.cta-button {

background: var(--accent);

color: white;

border: none;

padding: 0.8rem 1.5rem; /* Smaller padding for mobile */

font-size: 1rem; /* Smaller font size for mobile */

border-radius: 5px;

cursor: pointer;

transition: background 0.3s;

}



.cta-button:hover {

background: #FF6F00;

}



/* Media Queries for Mobile */

@media (max-width: 768px) {

.hero-content {

padding: 1rem; /* Less padding on smaller screens */

}


	#hero-video {display: none;}


.logo img {

max-height: 150px; /* Smaller logo for mobile */

}



h1 {

font-size: 1.5rem; /* Smaller font size for mobile */

}



.tagline {

font-size: 1rem; /* Smaller font size for mobile */

}



.countdown {

font-size: 1.2rem; /* Smaller font size for mobile */

}



.cta-button {

padding: 0.6rem 1.2rem; /* Smaller padding for mobile */

font-size: 0.9rem; /* Smaller font size for mobile */

}

}



@media (max-width: 480px) {

.hero-content {

padding: 0.5rem; /* Even less padding on very small screens */

}



.logo img {

max-height: 120px; /* Even smaller logo for very small screens */

}



h1 {

font-size: 1.2rem; /* Even smaller font size for very small screens */

}



.tagline {

font-size: 0.9rem; /* Even smaller font size for very small screens */

}



.countdown {

font-size: 1rem; /* Even smaller font size for very small screens */

}



.cta-button {

padding: 0.5rem 1rem; /* Even smaller padding for very small screens */

font-size: 0.8rem; /* Even smaller font size for very small screens */

}

}



/* Info Cards Section */

.info-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    gap: 2rem;

    padding: 4rem 2rem;

    background: radial-gradient(circle at center, #001122, #000);

}



.info-card {

    background: rgba(255, 255, 255, 0.1);

    padding: 2rem;

    border-radius: 15px;

    backdrop-filter: blur(10px);

    transition: transform 0.3s;

}



.info-card:hover {

    transform: translateY(-10px);

}



/* News Section */

.news-section {

padding: 4rem 2rem;

background: linear-gradient(to bottom, #001122, #000);

}



.news-section h2 {

font-size: 2.5rem;

margin-bottom: 2rem;

text-align: center;

color: var(--electric);

}



.news-list {

max-width: 800px;

margin: 0 auto;

}



.news-item {

display: flex;

align-items: center;

background: rgba(255, 255, 255, 0.1);

border-radius: 10px;

overflow: hidden;

transition: transform 0.3s, box-shadow 0.3s;

text-decoration: none;

color: white;

margin-bottom: 1.5rem;

}



.news-item:hover {

transform: translateY(-5px);

box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);

}



.news-image {

flex: 0 0 150px;

height: 150px;

overflow: hidden;

}



.news-image img {

width: 100%;

height: 100%;

object-fit: cover;

}

.news-image img {

transition: transform 0.3s;

}

.news-item:hover .news-image img {

transform: scale(1.1);

}

.news-content {

flex: 1;

padding: 1.5rem;

}



.news-content h3 {

font-size: 1.5rem;

margin-bottom: 0.5rem;

color: var(--accent);

}



.news-content .date {

font-size: 0.9rem;

color: #bbb;

margin-bottom: 0.5rem;

}



.news-content p {

font-size: 1rem;

color: #ddd;

}



.view-all {

display: block;

text-align: center;

margin-top: 2rem;

color: var(--electric);

text-decoration: none;

font-size: 1.2rem;

transition: color 0.3s;

}



.view-all:hover {

color: var(--accent);

}





/* Potential Teams & Players Section */

.teams-players-section {

    padding: 4rem 2rem;

    background: radial-gradient(circle at center, #001122, #000);

}



.teams-players-section h2 {

    font-size: 2.5rem;

    margin-bottom: 2rem;

    text-align: center;

    color: var(--electric);

}



.teams-players-section a {

    display: inline-block;

    background: var(--accent);

    color: white;

    padding: 1rem 2rem;

    border-radius: 5px;

    text-decoration: none;

    transition: background 0.3s;

    margin: 0 0.5rem; /* Adds space between the links */



}



.teams-players-section a:hover {

    background: #FF6F00;

}



/* Sticky Email Capture Bar */

.email-bar {

    position: fixed;

    bottom: 0;

    left: 0;

    width: 100%;

    background: var(--primary);

    padding: 1rem;

    display: flex;

    justify-content: center;

    gap: 1rem;

    z-index: 1000;

}



.email-bar input {

    padding: 0.5rem;

    border: 2px solid var(--electric);

    border-radius: 5px;

    width: 300px;

}



.email-bar button {

    background: var(--accent);

    color: white;

    border: none;

    padding: 0.5rem 1rem;

    border-radius: 5px;

    cursor: pointer;

    transition: background 0.3s;

}



.email-bar button:hover {

    background: #FF6F00;

}





/* Modal Styles */

.modal {

    display: none;

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.8);

    z-index: 1001;

    justify-content: center;

    align-items: center;

}



.modal-content {

    background: var(--primary);

    padding: 2rem;

    border-radius: 15px;

    text-align: center;

    width: 90%;

    max-width: 500px;

}



.modal-content input {

    padding: 0.5rem;

    border: 2px solid var(--electric);

    border-radius: 5px;

    width: 100%;

    margin: 1rem 0;

}



.modal-content button {

    background: var(--accent);

    color: white;

    border: none;

    padding: 0.5rem 1rem;

    border-radius: 5px;

    cursor: pointer;

    transition: background 0.3s;

}



.modal-content button:hover {

    background: #FF6F00;

}



.close {

    position: absolute;

    top: 1rem;

    right: 1rem;

    font-size: 2rem;

    cursor: pointer;

}



/* Success Message */

.success-message {

    display: none;

    position: fixed;

    bottom: 1rem;

    left: 50%;

    transform: translateX(-50%);

    background: var(--accent);

    color: white;

    padding: 1rem 2rem;

    border-radius: 5px;

    z-index: 1002;

}



@media (max-width: 768px) {

.news-item {

flex-direction: column;

}

.news-image {

flex: 0 0 auto;

width: 100%;

height: 200px;

}



}



/* Footer Styles */


.footer {

background: var(--primary);

color: white;

padding: 4rem 2rem 2rem;

border-top: 2px solid var(--electric);

}



.footer-content {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

gap: 2rem;

max-width: 1200px;

margin: 0 auto;

}



.footer-brand {

text-align: center;

}



.footer-logo {

height: 100px;

width: auto;

margin-bottom: 1rem;

}



.footer-tagline {

font-size: 1rem;

color: var(--electric);

}


.footer-section h3 {

font-size: 1.5rem;

margin-bottom: 1rem;

color: var(--electric);

}



.footer-section ul {

list-style: none;

padding: 0;

}



.footer-section ul li {

margin-bottom: 0.5rem;

}



.footer-section ul li a {

color: white;

text-decoration: none;

transition: color 0.3s;

}



.footer-section ul li a:hover {

color: var(--accent);

}



.social-links {

display: flex;

gap: 1rem;

}



.social-links img {

width: 30px;

height: 30px;

transition: transform 0.3s;

}



.social-links img:hover {

transform: scale(1.2);

}



.footer-bottom {

text-align: center;

margin-top: 2rem;

padding-top: 1rem;

border-top: 1px solid rgba(255, 255, 255, 0.1);

padding-bottom: 2.5rem;

}



.footer-bottom p {

font-size: 0.9rem;

color: #bbb;

margin: 0; /* Remove default margin to ensure it's on one line */

}



/* Team Map Section */

.team-map-section {

padding: 4rem 2rem;

background: linear-gradient(to bottom, #001122, #000);

text-align: center;

}



.team-map-section h2 {

font-size: 2.5rem;

margin-bottom: 1rem;

color: var(--electric);

}



.team-map-section p {

font-size: 1rem;

color: #ddd;

margin-bottom: 2rem;

}



/* Team Request Modal */

#team-request-modal .modal-content {

background: var(--primary);

padding: 2rem;

border-radius: 15px;

max-width: 500px;

width: 90%;

}



#team-request-form input,

#team-request-form textarea {

width: 100%;

padding: 0.5rem;

margin-bottom: 1rem;

border: 2px solid var(--electric);

border-radius: 5px;

background: rgba(255, 255, 255, 0.1);

color: white;

}



#team-request-form button {

background: var(--accent);

color: white;

border: none;

padding: 0.5rem 1rem;

border-radius: 5px;

cursor: pointer;

transition: background 0.3s;

}



#team-request-form button:hover {

background: #FF6F00;

}



/* Player Recruitment Section */

.player-recruitment-section {

padding: 4rem 2rem;

background: linear-gradient(to bottom, #001122, #000);

text-align: center;

}



.player-recruitment-section h2 {

font-size: 2.5rem;

margin-bottom: 1rem;

color: var(--electric);

}



.recruitment-tagline {

font-size: 1.2rem;

color: #ddd;

margin-bottom: 2rem;

}



.recruitment-benefits {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

gap: 2rem;

margin-bottom: 3rem;

}



.benefit-card {

background: rgba(255, 255, 255, 0.1);

padding: 2rem;

border-radius: 15px;

backdrop-filter: blur(10px);

transition: transform 0.3s, box-shadow 0.3s;

}



.benefit-card:hover {

transform: translateY(-10px);

box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);

}



.benefit-icon {

width: 50px;

height: 50px;

margin-bottom: 1rem;

}



.benefit-card h3 {

font-size: 1.5rem;

margin-bottom: 0.5rem;

color: var(--accent);

}



.benefit-card p {

font-size: 1rem;

color: #ddd;

}



.recruitment-cta {

margin-top: 2rem;

}



.recruitment-cta p {

font-size: 1.2rem;

margin-bottom: 1rem;

color: var(--electric);

}



.recruitment-cta button {

background: var(--accent);

color: white;

border: none;

padding: 1rem 2rem;

font-size: 1.2rem;

border-radius: 5px;

cursor: pointer;

transition: background 0.3s;

}



.recruitment-cta button:hover {

background: #FF6F00;

}



/* Player Recruitment Modal */

#player-recruitment-modal .modal-content {

background: var(--primary);

padding: 2rem;

border-radius: 15px;

max-width: 500px;

width: 90%;

}



#player-recruitment-form input,

#player-recruitment-form textarea {

width: 100%;

padding: 0.5rem;

margin-bottom: 1rem;

border: 2px solid var(--electric);

border-radius: 5px;

background: rgba(255, 255, 255, 0.1);

color: white;

}



#player-recruitment-form button {

background: var(--accent);

color: white;

border: none;

padding: 0.5rem 1rem;

border-radius: 5px;

cursor: pointer;

transition: background 0.3s;

}



#player-recruitment-form button:hover {

background: #FF6F00;

}



/* Disclaimer Text */

.disclaimer {

font-size: 0.9rem;

color: #bbb;

margin-bottom: 1.5rem;

text-align: center;

}



/* Franchise Ownership Section */

.franchise-ownership-section {

padding: 4rem 2rem;

background: linear-gradient(to bottom, #001122, #000);

text-align: center;

}



.franchise-ownership-section h2 {

font-size: 2.5rem;

margin-bottom: 1rem;

color: var(--electric);

}



.franchise-tagline {

font-size: 1.2rem;

color: #ddd;

margin-bottom: 2rem;

}



.franchise-benefits {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

gap: 2rem;

margin-bottom: 3rem;

}



.franchise-cta {

margin-top: 2rem;

}



.franchise-cta p {

font-size: 1.2rem;

margin-bottom: 1rem;

color: var(--electric);

}



.franchise-cta button {

background: var(--accent);

color: white;

border: none;

padding: 1rem 2rem;

font-size: 1.2rem;

border-radius: 5px;

cursor: pointer;

transition: background 0.3s;

}



.franchise-cta button:hover {

background: #FF6F00;

}

</style>