/* General Styling */
body {
font-family: 'Montserrat', sans-serif;
color: #f2f2f2;
background-color: #0d0d0d;
margin: 0;
padding: 0;
padding-top: 80px; /* Offset for fixed header */
}


button { 
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
    transition: background-color 0.3s ease;
    font-size: 1rem;
}

input[type="text"], input[type="number"],
input[type="time"], input[type="file"],
textarea, select {
flex: 1 1 70%;
padding: 5px;
background-color: #222;
color: #fff;
border: 1px solid #333;
border-radius: 5px;
box-sizing: border-box;
margin-bottom: 5px;
font-size: 1rem;
}

th, td {
    padding: 10px 15px;
    text-align: center;
    white-space: nowrap; /* Prevent text wrapping */
}
th {
    background-color: #3399ff;
    color: #ffffff;
    text-transform: uppercase;
}

tr:nth-child(even) {
    background-color: #2a2a2a;
}
tr:nth-child(odd) {
    background-color: #1a1a1a;
}
tr:hover {
    background-color: #3a3a3a;
}

.popup-content label {
font-size: 16px;
margin-bottom: 8px;
display: block;
text-align: left;
color: #d9d9d9;
}

.popup-content input[type="email"] {
width: 100%;
padding: 10px;
margin-bottom: 15px;
font-size: 16px;
border: 1px solid #555;
border-radius: 8px;
background-color: #1f1f1f;
color: #f2f2f2;
transition: border-color 0.3s ease, box-shadow 0.3s ease;

}

.popup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8); /* Dark overlay */
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
}

.popup.hidden {
display: none;
}

.popup-content {
background: linear-gradient(135deg, #1f1f1f, #282828); /* Gradient background */
color: #f2f2f2;
padding: 30px;
border-radius: 15px;
width: 90%;
max-width: 400px;
text-align: center;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); /* Soft shadow */
animation: fadeIn 0.3s ease-in-out; /* Subtle fade-in animation */
padding-top: 10px;
}

.popup-content h2 {
color: #3399ff;
font-size: 28px;
margin-bottom: 20px;
text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4); /* Soft shadow on the text */
}

.popup-content label {
font-size: 16px;
margin-bottom: 8px;
display: block;
text-align: left;
color: #d9d9d9;
}

.popup-content input[type="email"] {
width: 100%;
padding: 10px;
margin-bottom: 15px;
font-size: 16px;
border: 1px solid #555;
border-radius: 8px;
background-color: #1f1f1f;
color: #f2f2f2;
transition: border-color 0.3s ease, box-shadow 0.3s ease;

}

.popup-content input[type="email"]:focus {
outline: none;
border-color: #3399ff;
box-shadow: 0 0 8px rgba(51, 153, 255, 0.5);
}

.popup-content .button {
background-color: #3399ff;
color: #fff;
border: none;
padding: 12px 20px;
margin-top: 10px;
cursor: pointer;
border-radius: 10px;
font-size: 16px;
font-weight: bold;
transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.popup-content .button:hover {
background-color: #66b2ff;
box-shadow: 0px 4px 12px rgba(51, 153, 255, 0.6);
}

.popup-content input[type="email"]:focus {
outline: none;
border-color: #3399ff;
box-shadow: 0 0 8px rgba(51, 153, 255, 0.5);
}

.timer-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
}

.popup-content .button {
background-color: #3399ff;
color: #fff;
border: none;
padding: 12px 20px;
margin-top: 10px;
cursor: pointer;
border-radius: 10px;
font-size: 16px;
font-weight: bold;
transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.popup-content .button:hover {
background-color: #66b2ff;
box-shadow: 0px 4px 12px rgba(51, 153, 255, 0.6);
}

.popup-close {
margin-left: 100%;
}

/* Back to Menu Button */
.back-to-menu {
position: absolute; /* Ensure it stays on the left */
left: 10px;
top: 50%;
transform: translateY(-50%);
text-decoration: none;
font-size: 14px;
font-weight: bold;
padding: 8px 12px;
border-radius: 4px;
background-color: #3399ff;
color: #ffffff;
display: flex;
align-items: center;
gap: 5px;
transition: background-color 0.3s ease;
z-index: 100; /* Ensure it stays on top */
}

.back-to-menu:hover {
background-color: #0056cc;
}

/* Icon inside the Back to Menu Button */
.back-to-menu .menu-icon {
font-size: 16px;
display: none; /* Default: Hide the icon */
}

/* Show full text on larger screens */
.back-to-menu .menu-text {
display: inline;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
.back-to-menu {
font-size: 12px;
padding: 8px;
}

.back-to-menu .menu-text {
display: none; /* Hide the text on smaller screens */
}

.back-to-menu .menu-icon {
display: inline; /* Show the icon instead of text */
font-size: 20px;
}
}
h1 {
margin: auto;
}

/* Create page */



.create-intro {
text-align: center;
padding: 40px 20px;
background-color: #1a1a1a;
}

.create-intro h1 {
font-size: 2.5rem;
color: #3399ff;
margin-bottom: 20px;
}

.create-intro p {
font-size: 1.2rem;
color: #cccccc;
line-height: 1.6;
max-width: 700px;
margin: 0 auto;
}

/* About League Creation Section */
.create-about-league {
text-align: center;
padding: 40px 20px;
background-color: #0d0d0d;
}

.create-about-league h2 {
font-size: 2rem;
color: #3399ff;
margin-bottom: 20px;
}

.create-about-league p {
font-size: 1.1rem;
color: #cccccc;
line-height: 1.6;
max-width: 700px;
margin: 0 auto;
}

/* Features Section */
.create-features {
padding: 40px 20px;
text-align: center;
background-color: #1a1a1a;
}

.create-features h2 {
font-size: 2.5rem;
color: #3399ff;
margin-bottom: 20px;
}

.create-feature-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
margin-top: 20px;
}

.create-feature-card {
background: #2e2e2e;
padding: 20px;
width: 250px;
border-radius: 8px;
text-align: center;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.create-feature-card:hover {
transform: translateY(-5px);
box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.7);
}

.create-feature-icon {
font-size: 3rem;
color: #3399ff;
margin-bottom: 10px;
}

.create-feature-card h3 {
font-size: 1.5rem;
color: #ffffff;
margin-bottom: 10px;
}

.create-feature-card p {
font-size: 1rem;
color: #cccccc;
line-height: 1.5;
}

/* Pricing Section */
.create-pricing {
padding: 40px 20px;
text-align: center;
background-color: #0d0d0d;
}

.create-pricing h2 {
font-size: 2.5rem;
color: #3399ff;
margin-bottom: 20px;
}

.create-pricing p {
font-size: 1.2rem;
color: #cccccc;
max-width: 600px;
margin: 0 auto 20px;
line-height: 1.6;
}

.create-pricing .create-button {
background-color: #3399ff;
color: #ffffff;
padding: 12px 20px;
border-radius: 8px;
font-size: 1.2rem;
text-decoration: none;
text-align: center;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.2s ease;
display: inline-block;
border: none;
}

.create-pricing .create-button:hover {
background-color: #66b2ff;
transform: translateY(-2px);
}

/* Create a League Form Section */
.create-container {
width: 90%;
max-width: 60%;
background-color: #1a1a1a;
padding: 30px 40px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
margin: 40px auto;
text-align: center;
}

.create-container h2 {
font-size: 2.5rem;
color: #3399ff;
margin-bottom: 20px;
}

.create-form {
display: flex;
flex-direction: column;
gap: 20px;
}

.create-form-group {
display: flex;
flex-direction: column;
text-align: left;
}

.create-form label {
font-size: 1rem;
color: #f2f2f2;
font-weight: bold;
margin-bottom: 8px;
}

.create-form input,
.create-form textarea {
padding: 12px;
font-size: 1rem;
background-color: #2e2e2e;
border: 1px solid #444;
color: #f2f2f2;
border-radius: 5px;
box-sizing: border-box;
resize: none;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.create-form textarea {
height: 120px;
}

.create-form input:focus,
.create-form textarea:focus {
outline: none;
border-color: #3399ff;
box-shadow: 0 0 5px rgba(51, 153, 255, 0.6);
}

.create-button {
background-color: #3399ff;
color: #ffffff;
padding: 12px 20px;
border-radius: 8px;
font-size: 1.2rem;
font-weight: bold;
text-decoration: none;
text-align: center;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.2s ease;
border: none;
}

.create-intro h1 {
margin-top: 100px;
font-size: 2.5rem;
color: #3399ff;
margin-bottom: 20px;
text-align: center;
/* Ensure the text is centred */
margin-left: auto;
/* Centre alignment */
margin-right: auto;
/* Centre alignment */
max-width: 100%;
/* Prevent any overflow */
}


.create-button:hover {
background-color: #66b2ff;
transform: translateY(-2px);
}

.create-info-note {
font-size: 1rem;
color: #cccccc;
margin-top: 20px;
text-align: center;
line-height: 1.5;
background-color: #2e2e2e;
padding: 15px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
max-width: 80%;
margin-left: auto;
margin-right: auto;
}

.league-cards {
display: flex;
flex-direction: column;
gap: 15px;
}

.league-card {
border-top: 4px solid #3399ff;
background-color: #2e2e2e;
color: #f2f2f2;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
text-align: left;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.league-card:hover {
transform: translateY(-5px);
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.8);
}

.league-card h3 {

font-size: 1.3rem;
color: #3399ff;
margin-bottom: 10px;
}

.league-card p {
font-size: 1rem;
color: #cccccc;
margin-bottom: 10px;
}

.league-actions {
display: flex;
gap: 10px;
}

.league-actions a {
background-color: #3399ff;
color: #fff;
padding: 8px 15px;
border-radius: 5px;
font-size: 0.9rem;
text-decoration: none;
transition: background-color 0.3s ease;
}

.league-actions a:hover {
background-color: #66b2ff;
}

.subscription-tiers {
text-align: center;
padding: 40px 20px;
background-color: #1a1a1a;
margin-top: 40px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

.subscription-tiers h2 {
font-size: 2.5rem;
color: #3399ff;
margin-bottom: 20px;
}

.tier-container {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 20px;
}

.tier-card {
background-color: #2e2e2e;
padding: 20px;
width: 300px;
border-radius: 8px;
text-align: center;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tier-card:hover {
transform: translateY(-5px);
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.7);
}

.tier-card h3 {
font-size: 1.8rem;
color: #ffffff;
margin-bottom: 10px;
}

.tier-card p {
font-size: 1rem;
color: #cccccc;
margin-bottom: 10px;
line-height: 1.6;
}

.create-button {
background-color: #3399ff;
color: #ffffff;
padding: 12px 20px;
border-radius: 8px;
font-size: 1rem;
font-weight: bold;
text-decoration: none;
text-align: center;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.2s ease;
border: none;
}

.create-button:hover {
background-color: #66b2ff;
transform: translateY(-2px);
}




/* Responsive Design */
@media (max-width: 768px) {
.create-container {
width: 90%;
max-width: 80%;
}

.create-intro h1,
.create-about-league h2,
.create-features h2,
.create-pricing h2,
.create-container h2 {
font-size: 2rem;
}

.create-pricing p,
.create-intro p,
.create-about-league p,
.create-features p {
font-size: 1rem;
}

.create-feature-card {
width: 90%;
}

.create-button {
font-size: 1rem;
padding: 10px 15px;
}
}

.subscription-tiers {
text-align: center;
padding: 40px 20px;
background-color: #1a1a1a;
}

.section-title {
font-size: 2.8rem;
color: #3399ff;
margin-bottom: 10px;
}

.section-subtitle {
font-size: 1.3rem;
color: #cccccc;
margin-bottom: 30px;
max-width: 750px;
margin-left: auto;
margin-right: auto;
}

.tier-container {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
}

.tier-card {
background: #2e2e2e;
border-radius: 15px;
padding: 20px;
width: 300px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.6);
transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
border: 2px solid transparent;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
text-align: left;
min-height: 300px;
/* Reduced height */
}

.tier-card:hover {
transform: translateY(-8px);
box-shadow: 0 7px 15px rgba(0, 0, 0, 0.8);
}

.tier-card.selected {
border: 2px solid #3399ff;
background: #383838;
}

.tier-title {
font-size: 1.8rem;
color: #ffffff;
margin-bottom: 10px;
text-align: center;
}

.tier-price {
font-size: 1.4rem;
color: #66b2ff;
margin-bottom: 15px;
text-align: center;
}

.tier-highlight {
font-size: 1rem;
color: #ffcc00;
font-weight: bold;
margin-bottom: 15px;
text-align: center;
}

.tier-features {
list-style: none;
padding: 0;
margin: 0;
margin-bottom: 20px;
/* Reduced margin */
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
}

.tier-features li {
font-size: 1rem;
color: #cccccc;
margin-bottom: 8px;
/* Reduced space between features */
display: flex;
align-items: center;
}

.tier-features i {
color: #3399ff;
margin-right: 8px;
font-size: 1.2rem;
}

.select-button {
background: #3399ff;
color: #ffffff;
padding: 10px 18px;
/* Adjusted padding */
border-radius: 8px;
font-size: 1.1rem;
/* Slightly smaller font */
border: none;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.2s ease;
width: 100%;
text-align: center;
margin-top: auto;
}

.select-button.selected {
background: #66b2ff;
color: #ffffff;
}

.select-button:hover {
background: #66b2ff;
transform: translateY(-2px);
}

.checkout-button {
background: #3399ff;
color: #ffffff;
padding: 12px 25px;
/* Adjusted padding */
border-radius: 10px;
font-size: 1.2rem;
font-weight: bold;
border: none;
cursor: pointer;
margin-top: 30px;
transition: background-color 0.3s ease, transform 0.2s ease;
display: inline-block;
}

.checkout-button:disabled {
background: #555555;
color: #cccccc;
cursor: not-allowed;
}

.checkout-button:hover:not(:disabled) {
background: #66b2ff;
transform: translateY(-2px);
}
.disabled-field {
background-color: #444444 !important; /* Darker background for disabled fields */
color: #888888 !important; /* Light grey text for contrast */
cursor: not-allowed; /* Show not-allowed cursor */
opacity: 0.7; /* Slightly transparent for visual effect */
}

.main-content{
min-height: 100vh;
margin-top: 100px;
}

.league-card {
position: relative; /* Position the card for button placement */
border-top: 4px solid #3399ff;
background-color: #2e2e2e;
color: #f2f2f2;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
text-align: left;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.league-card:hover {
transform: translateY(-5px);
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.8);
}

.league-card h3 {
font-size: 1.3rem;
color: #3399ff;
margin-bottom: 10px;
}

.league-card p {
font-size: 1rem;
color: #cccccc;
margin-bottom: 10px;
}

.view-button {
position: absolute; /* Position the button inside the card */
bottom: 20px; /* Align it vertically */
right: 20px; /* Align it horizontally */
background-color: #3399ff;
color: #ffffff;
text-decoration: none;
padding: 10px 20px;
border-radius: 5px;
font-size: 1rem;
transition: background-color 0.3s ease, transform 0.2s ease;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
margin-top:10px;
}

.view-button:hover {
background-color: #66b2ff;
transform: translateY(-3px);
}



.button {
color: #ffffff;
text-decoration: none;
font-weight: bold;
font-size: 1rem;
padding: 10px 18px;
border-radius: 8px;
background-color: #3399ff;
transition: background-color 0.3s ease;

}

.captcha-container {
display: flex;
justify-content: center;
align-items: center;
margin: 20px 0; /* Adjust spacing as needed */
}


/* General H2 Styling */
h2 {
font-size: 2.5rem;
color: #3399ff;
margin-bottom: 20px;
text-align: center;
}

/* General Header Styling */
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 20px 40px;
background-color: #1a1a1a;
display: flex;
align-items: center;
z-index: 1000;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
box-sizing: border-box;
margin: 0;
min-height: 115px;
justify-content: space-between; /* Keeps the logo centered and profile box on the right */
}

/* Centered Logo */
.header .centre-logo {
position: absolute;
left: 50%;
transform: translateX(-50%);
max-height: 100px; /* Ensures the logo does not overflow */
height: auto;
max-width: 200px; /* Optional for restricting width */
}

/* Profile Box Styling */
.profile-box {
display: flex;
align-items: center;
padding: 10px;
background-color: #2e2e2e; /* Darker background to make it stand out */
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
color: #f2f2f2;
margin-left: auto; /* Ensures the profile box is aligned to the far right */
z-index: 1; /* Ensure profile is above logo */
}

/* Profile Picture */
.profile-picture {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
margin-right: 10px;
border: 2px solid #3399ff; /* Optional for styling */
}

/* Profile Name */
.profile-name {
font-size: 1rem;
font-weight: bold;
color: #f2f2f2;
margin-right: 10px; /* Adds spacing between the name and links */
}

/* Profile Links */
.profile-links {
display: flex;
gap: 10px; /* Adds spacing between links */
}

.profile-link {
background-color: #191919;
color: #fff;
text-decoration: none;
font-size: 0.9rem;
padding: 8px 15px;
border-radius: 5px;
transition: background-color 0.3s ease, transform 0.2s ease;
display: inline-block;
font-weight: bold;
text-align: center;
}

.profile-link:hover {
background-color: #66b2ff;
transform: translateY(-2px); /* Slight lift effect on hover */
}

.auth-buttons {
align-items: center; /* Centre buttons horizontally */
justify-content: center; /* Centre buttons vertically */
height: 100%; /* Adjust as needed for vertical centring */
text-align: center; /* Centre the text inside the buttons */
}

.auth-buttons .button {
margin: 5px 0; /* Add spacing between buttons */
padding: 10px 20px; /* Add padding for better button appearance */
text-decoration: none; /* Remove underline on links */
background-color: #007BFF; /* Example background colour */
color: white; /* Button text colour */
border-radius: 5px; /* Rounded corners */
display: inline-block; /* Ensure buttons look like blocks */
}


.auth-buttons .button:hover {
background-color: #66b2ff;
}

/* General Menu Icon Styling */
.menu-icon {
display: none; /* Hidden by default for larger screens */
font-size: 2rem;
color: #fff;
cursor: pointer;
z-index: 1001; /* Ensure it appears above other elements */
position: absolute; /* Position it independently */
right: 20px; /* Align it to the far right */
top: 50%; /* Center vertically */
transform: translateY(-50%);
}

.bar-menu{
display: none;
}



/* Responsive Styles for Mobile View */
@media (max-width: 850px) {

.auth-buttons {
display: flex;
flex-direction: column; /* Stack buttons vertically */
}

.bar-menu{
display: block;
}
.header {
flex-direction: column; /* Ensure column layout */
align-items: center;
padding: 10px;
}

.menu-icon {
right: 15px; /* Adjust spacing for smaller screens */
font-size: 1.8rem; /* Slightly smaller menu icon */
}

.header .centre-logo {
top: 10px; /* Adjust logo position for mobile screens */
max-height: 70px; /* Resize logo further */
}

.profile-box {
display:none;
}
}



/* Responsive Styles for Mobile View */
@media (max-width: 850px) {

/* Profile Box and Auth Buttons (Dropdown Menu) */
.dropdown-menu {

position: absolute;
top: 100%;
right: 0;
max-width: 60%;
max-width: 300px;
background-color: #2e2e2e;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
display: flex;
opacity: 1;
transform: translateY(0);
z-index: 1100;
/* padding: 20px 0; */
flex-direction: column;
align-items: center;
transition: opacity 0.3s ease, transform 0.3s ease;
}
.profile-links {
margin-top: 20px;
display: flex;
flex-direction:column;
}
.bar-menu {
display: block; /* Show menu icon for smaller screens */
}

.menu-icon {
font-size: 2rem;
color: #fff;
cursor: pointer;
z-index: 1200; /* Ensure it appears above other elements */
position: absolute;
right: 20px; /* Align it to the far right */
top: 50%; /* Center vertically */
transform: translateY(-50%);
}

/* Hide profile box and auth buttons by default */
.dropdown-menu {
display: none; /* Hidden by default on smaller screens */
opacity: 0;
transform: translateY(-20px);
}

/* Show dropdown menu when menu icon is clicked */
.menu-active .dropdown-menu {
display: flex; /* Make it visible */
opacity: 1;
transform: translateY(0); /* Slide down */
}
}

/* Header End */


/* Profile Picture */
.profile-picture {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
margin-right: 10px;
}

/* Profile Details */
.profile-details {
display: flex;
flex-direction: column;
align-items: flex-start;
}

/* Profile Name */
.profile-name {
font-size: 1rem;
font-weight: bold;
color: #f2f2f2;
margin-bottom: 5px;
}


.profile-link:hover {
background-color: #444;
color: #66b2ff;
}

/* Confirmation Page Styles */
.confirmation-body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}

.confirmation-container {
max-width: 800px;
margin: 50px auto;
background: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
text-align: center;
}

.confirmation-title {
font-size: 2rem;
color: #333;
margin-bottom: 20px;
}

.confirmation-message {
font-size: 1.2rem;
color: #555;
margin-bottom: 30px;
}

.confirmation-details {
margin-top: 20px;
text-align: left;
}

.confirmation-subtitle {
font-size: 1.5rem;
color: #333;
margin-bottom: 10px;
}

.confirmation-list {
list-style: none;
padding: 0;
margin: 0;
}

.confirmation-list li {
margin: 10px 0;
font-size: 1rem;
color: #444;
}

.confirmation-button {
display: inline-block;
margin-top: 20px;
padding: 12px 25px;
font-size: 1rem;
color: #fff;
background-color: #007bff;
border-radius: 5px;
text-decoration: none;
transition: background-color 0.3s ease;
}

.confirmation-button:hover {
background-color: #0056b3;
}



/* Menu Toggle Button */
.menu-toggle {
display: none; /* Hidden by default on larger screens */
background: none;
border: none;
color: #ffffff;
font-size: 1.5rem;
cursor: pointer;
margin-left: auto;
}

/* Menu Links */
.menu {
display: flex;
gap: 10px;
}

.menu .button {
background-color: #3399ff;
color: #ffffff;
text-decoration: none;
padding: 10px 18px;
border-radius: 8px;
font-weight: bold;
transition: background-color 0.3s ease;

text-align: center;
box-sizing: border-box;
}

.menu .button:hover {
background-color: #66b2ff;
}

/* Responsive Styles */
@media (max-width: 768px) {
/* Show the menu toggle on smaller screens */
.menu-toggle {
display: block;
}

/* Hide the menu by default */
.menu {
display: none;
flex-direction: column;
gap: 10px;
position: absolute;
right: 10px;
top: 100%; /* Positioned directly below the menu toggle button */
background-color: #1a1a1a;
padding: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
border-radius: 8px;
width: 160px; /* Fixed width for the dropdown */
}

/* Show the menu when active */
.menu.active {
display: flex;
}

/* Adjust button styling */
.menu .button {
width: 100%;
padding: 10px;
box-sizing: border-box;
}
}



.hero-logo {
width: 200px;
max-width: 100%;
height: auto;
}

/* Updated Login Link Styling */
.login-link {
color: #ffffff;
text-decoration: none;
font-weight: bold;
font-size: 1rem;
padding: 10px 18px;
border-radius: 8px;
background-color: #3399ff;
transition: background-color 0.3s ease;
display: inline-block; /* Ensures proper width and height handling */
max-width: 100%; /* Prevents overflow */
text-align: center;
}

.login-link:hover {
background-color: #66b2ff;
}

/* Hero Section */
.hero {
position: relative;
height: 60vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
text-align: center;
padding: 0 20px;
}

.hero-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
filter: brightness(0.6);
}

.hero-overlay {
position: relative;
text-align: center;
background-color: rgba(0, 0, 0, 0.6);
padding: 40px;
border-radius: 10px;
z-index: 2;
}

.hero h1 {
font-size: 3rem;
color: #3399ff;
margin: 0;
}

.hero p {
font-size: 1.2rem;
max-width: 600px;
margin: 20px auto;
color: #ffffff;
}

.hero-button {
background-color: #3399ff;
color: #0d0d0d;
padding: 12px 20px;
border-radius: 8px;
font-size: 1.1rem;
text-decoration: none;
transition: background 0.3s;
}

.hero-button:hover {
background-color: #66b2ff;
}

/* Features Section */
.features {
padding: 60px 20px;
text-align: center;
background-color: #1a1a1a;
}

.feature-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
}

.feature-card {
background: #2e2e2e;
padding: 20px;
width: 250px;
border-radius: 8px;
text-align: center;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
transform: translateY(-10px);
box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.7);
}

.feature-icon {
font-size: 3rem;
color: #3399ff;
margin-bottom: 10px;
}

.feature-card h3 {
color: #ffffff;
font-size: 1.5rem;
margin-bottom: 10px;
}

.feature-card p {
font-size: 1rem;
color: #d1d1d1;
line-height: 1.5;
}

/* Benefits Section */
.benefits {
padding: 40px 20px;
background-color: #0d0d0d;
color: #ffffff;
text-align: center;
}

.benefits ul {
list-style: none;
padding: 0;
margin: 20px auto;
max-width: 600px;
text-align: left;
}

.benefits li {
display: flex;
align-items: center;
font-size: 1.1rem;
margin: 15px 0;
}

.benefits li i {
color: #3399ff;
font-size: 1.5rem;
margin-right: 10px;
min-width: 24px;
text-align: center;
}

/* Call to Action */
.cta {
padding: 60px 20px;
text-align: center;
background-color: #1a1a1a;
color: #ffffff;
}

.cta p {
font-size: 1.2rem;
margin-bottom: 20px;
}

.button {
background-color: #3399ff;
color: #0d0d0d;
padding: 12px 24px;
font-size: 1.1rem;
text-decoration: none;
border-radius: 8px;
transition: background 0.3s;
margin-top: 10px;
}

.button:hover {
background-color: #66b2ff;
}


/* Login Section Styling */
.login-section {
display: flex;
align-items: center;
justify-content: center;
min-height: 80vh; /* Ensures the login card is centered vertically */
padding: 20px;
box-sizing: border-box; /* Ensures padding is included in calculations */
}

.login-card {
background-color: #1a1a1a;
padding: 40px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
max-width: 400px;
width: 100%; /* Ensures the card scales properly */
text-align: center;
box-sizing: border-box; /* Prevents overflow due to padding */
}

.login-card h2 {
font-size: 2rem;
color: #3399ff;
margin-bottom: 20px;
}

.login-card label {
display: block;
font-size: 1rem;
color: #f2f2f2;
text-align: left;
margin-bottom: 8px;
}

.login-card input[type="text"],
.login-card input[type="password"] {
width: 100%; /* Ensures inputs scale with the card */
padding: 12px;
margin-bottom: 20px;
border: 1px solid #444;
border-radius: 5px;
background-color: #333;
color: #f2f2f2;
font-size: 1rem;
box-sizing: border-box; /* Prevents overflow due to padding */
}

.login-card input:focus {
border-color: #3399ff;
outline: none;
}

.login-button {
background-color: #3399ff;
color: #0d0d0d;
padding: 12px;
font-size: 1.1rem;
font-weight: bold;
border: none;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.3s ease;
width: 100%; /* Ensures button width matches inputs */
box-sizing: border-box; /* Prevents overflow */
}

.login-button:hover {
background-color: #66b2ff;
}

.login-options {
margin-top: 15px;
font-size: 0.9rem;
color: #f2f2f2;
display: flex;
}

.login-options a {
color: #3399ff;
text-decoration: none;
transition: color 0.3s ease;
}

.login-options a:hover {
color: #66b2ff;
}


/* General Footer Styling */
.footer {
background-color: #1a1a1a; /* Same background color as before */
padding: 20px;
margin-top: 20px; /* Add margin at the top */
color: #f2f2f2;
text-align: center;
}

/* Social Media Section */
.footer-social {
text-align: center;
margin-bottom: 20px;
}

.footer-social a {
color: #f2f2f2;
font-size: 24px; /* Icon size */
margin: 0 15px;
transition: color 0.3s ease, transform 0.3s ease;
}

.footer-social a:hover {
color: #3399ff;
transform: scale(1.2); /* Slightly enlarge on hover */
}

/* Footer Links Section */
.footer-links {
margin-top: 20px;
text-align: center;
}

.footer-links ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
justify-content: center;
gap: 20px;
}

.footer-links ul li {
font-size: 0.9rem;
}

.footer-links ul li a {
color: #f2f2f2;
text-decoration: none;
transition: color 0.3s ease;
}

.footer-links ul li a:hover {
color: #3399ff;
}

/* Footer Credits */
.footer-credits {
text-align: center;
margin-top: 20px;
font-size: 0.85rem;
color: #f2f2f2;
}

.footer-credits a {
color: #3399ff;
text-decoration: none;
}

.footer-credits a:hover {
text-decoration: underline;
}


/* Responsive Adjustments */
@media (max-width: 768px) {
.login-card {
max-width: 90%; /* Ensures proper scaling on tablets */
padding: 30px; /* Slightly reduce padding for smaller devices */
}

.login-card h2 {
font-size: 1.8rem; /* Slightly smaller heading on tablets */
}
}

@media (max-width: 480px) {
.login-card {
max-width: 95%; /* Ensures proper scaling on smaller screens */
padding: 20px; /* Further reduce padding for smaller devices */
}

.login-card h2 {
font-size: 1.6rem; /* Adjust heading size for smaller screens */
}

.login-card input[type="text"],
.login-card input[type="password"] {
font-size: 0.9rem; /* Slightly smaller font for inputs */
padding: 10px; /* Reduce padding to fit smaller screens */
}

.login-button {
font-size: 1rem; /* Adjust button font size */
padding: 10px; /* Reduce button padding */
}
}


/* Error Message Styling */
.error-message {
color: #ff4d4d;
background-color: #2e2e2e;
padding: 10px;
border-radius: 5px;
margin-bottom: 20px;
text-align: center;
font-weight: bold;
}



/* Dashboard Section */
.dashboard {
padding: 40px 20px;
background-color: #0d0d0d;
color: #f2f2f2;
text-align: center;
min-height: calc(100vh - 120px); /* Ensures footer placement */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.dashboard h1 {
font-size: 2.5rem;
color: #3399ff;
margin-bottom: 20px;
}

.dashboard p {
font-size: 1.2rem;
margin-bottom: 40px;
color: #cccccc;
}

/* Vertical Cards */
.dashboard-actions {
display: flex;
flex-direction: column;
gap: 20px;
width: 100%; /* Ensures the cards take the full available width */
max-width: 600px; /* Limits the width for larger screens */
}

.action-card {
background: linear-gradient(145deg, #2e2e2e, #3a3a3a);
border: 1px solid #444;
border-radius: 10px;
padding: 20px;
text-align: left;
text-decoration: none;
color: #f2f2f2;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
transition: transform 0.3s ease, box-shadow 0.3s ease;
display: flex;
flex-direction: column;
}

.action-card h3 {
font-size: 1.5rem;
color: #3399ff;
margin-bottom: 10px;
font-weight: bold;
}

.action-card p {
font-size: 1rem;
color: #d1d1d1;
margin-top: 5px;
}

.action-card:hover {
transform: translateY(-5px);
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.8);
border-color: #3399ff;
}


.dashboard-nav {
display: flex;
gap: 10px;
}

.dashboard-nav .button {
background-color: #3399ff;
color: #fff;
padding: 10px 15px;
border-radius: 5px;
text-decoration: none;
font-weight: bold;
transition: background-color 0.3s;
}

.dashboard-nav .button:hover {
background-color: #66b2ff;
}

/* Notifications Board (Matches Action Card Width) */
.notifications-board {
background-color: #2e2e2e;
color: #f2f2f2;
text-decoration: none;
padding: 10px;
width: 100%; /* Responsive width */
max-width: 580px; /* Same max-width as action cards */
border-radius: 10px;
text-align: left;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
transition: transform 0.3s ease, box-shadow 0.3s ease;
margin: 20px auto; /* Center it with auto margins */
}

.notifications-board h3 {
font-size: 1.5rem;
color: #3399ff;
margin-bottom: 10px;
text-align: center;
}

.notifications-container {
background-color: #1a1a1a;
padding: 15px;
border-radius: 8px;
box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.7);
max-height: 300px; /* Restricts height */
overflow-y: auto; /* Adds scroll if notifications exceed height */
font-size: 0.9rem; /* Ensure content scales well */
}

.no-notifications {
font-size: 1rem;
color: #cccccc;
text-align: center;
}

.notifications-list {
list-style: none;
padding: 0;
margin: 0;
}

.notifications-list li {
border-bottom: 1px solid #444;
padding: 10px 0;
color: #f2f2f2;
}

.notifications-list li:last-child {
border-bottom: none;
}

.notifications-list p {
margin: 0;
font-size: 1rem;
}

.notifications-list small {
display: block;
margin-top: 5px;
font-size: 0.85rem;
color: #999;
}

/* Hover effect for Notifications Board */
.notifications-board:hover {
transform: translateY(-5px);
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.7);
}




/* Responsive Design */
@media (max-width: 768px) {
.notifications-board {
max-width: 90%; /* Allow it to scale down on smaller screens */
}

.notifications-container {
font-size: 0.85rem; /* Slightly smaller text for small screens */
}
}



/* Animation classes */
.fade-in {
opacity: 0;
transform: translateY(20px); /* Start slightly below original position */
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in.appear {
opacity: 1;
transform: translateY(0); /* Return to original position */
}

/* Responsive Styling */
@media (max-width: 768px) {
.hero-logo {
width: 150px;
}

.hero h1 {
font-size: 2rem;
}

.hero p {
font-size: 1rem;
}

h2 {
font-size: 2rem;
}

.feature-grid {
flex-direction: column;
}

.feature-card {
width: 90%;
max-width: 400px;
margin: 0 auto;
}

.hero-button, .button {
font-size: 1rem;
padding: 10px 18px;
}

.feature-card h3 {
font-size: 1.3rem;
}

.feature-card p {
font-size: 0.9rem;
}
}

@media (max-width: 480px) {
.header {
padding: 15px 20px;
}

.hero-overlay {
padding: 20px;
}

.hero h1 {
font-size: 1.8rem;
}

.hero p {
font-size: 0.9rem;
}

h2 {
font-size: 1.8rem;
}

.feature-card {
max-width: 350px;
}

.benefits li i {
font-size: 1.2rem;
}
}

@media (max-width: 768px) {
    footer {
        zoom: 0.5;
    }
}