:root {
    --primary-color: #d32f2f; /* Red from the logo */
    --secondary-color: #000000; /* Gold/yellow from the sunflower petals */
    --background-color: #000000; /* Black */
    --text-color: #333333; /* White for readability on dark backgrounds */
    --link-color: #f9a825; /* Gold/yellow for links */
    --hover-bg-color: #c62828; /* Darker red for hover effects
}

/* Body Styles */
body {
    font-family: 'Roboto', sans-serif;
    color: var(--text-color);
    margin: 0;
    padding-top: 0px; /* Height of the fixed top bar */
    background: white; /* Ensure the background is white */
}

/* Top bar styles */
.top-bar {
    background-color: var(--primary-color);
    color: white;
    padding: 0px;
    text-align: left;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;    
    height: 85px; /* Set a fixed height for the top bar */
    z-index: 1000; /* Ensure it's above other elements */
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.content-container {
    min-height: 100vh;
    display: flex;
}
/* Brand and Logo Styles */
.brand {
    display: flex; /* Use flexbox for alignment */
    align-items: center; /* Align items vertically in the center */
    text-decoration: none; /* Remove underline from link */
    color: white; /* Set the color for the brand text */
}

.logo {
    width: 210px; 
    height: auto; /* Adjust the logo size as needed */
    margin-right: 10px; /* Add some space between logo and title */
    margin-top: 10px;
}

.title {
    font-size: 1.5em; /* Adjust the title size as needed */
    font-weight: bold; /* Optional: make the title bold */
}

/* Sidebar Styles */
.sidebar {
    position: fixed;
    top: 80px; /* Height of the top bar */
    left: 0;
    background-color: var(--secondary-color); /* Set background color */
    width: 250px; /* Width of the sidebar */
    height: calc(100% - 60px); /* Adjusted height to account for top bar */
    overflow-y: auto;
    z-index: 500; /* Lower than top bar */
    transition: left 0.3s;
}

/* Sidebar List Styles */
.sidebar ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    padding-top: 20px; /* Add padding at the top for spacing */
}

.sidebar li a {
    display: block;
    padding: 10px 20px;
    color: var(--primary-color);
    text-decoration: none;
}

/* Main Content Styles */
main {
    margin-left: 250px; /* Same as sidebar width */
    margin-top: 0px; /* Adjusted to start right below the top bar */
    padding: 20px;
    background-color: #f4f4f4; /* Set a background color for clarity */
    color: #333333;
    min-height: 100vh; /* Ensure it takes minimum full viewport height */
    z-index: 100; /* Ensure it's above the background but below the top bar */
}


/* Responsive adjustments for sidebar and main content */
@media (max-width: 768px) {
    .sidebar {
        position: fixed;
        left: -250px; /* Hide sidebar initially */
        width: 250px; /* Maintain sidebar width */
        top: 60px; /* Adjust if the top bar height changes */
    }

    .sidebar.open {
        left: 0; /* Show sidebar when open */
    }

    main {
        margin-left: 0; /* Full width on smaller screens */
        margin-top: 0px; /* Adjust if the top bar height changes */
    }

    .hamburger {
        display: block; /* Show hamburger icon on smaller screens */
    }
}

/* Hamburger Menu Styles */
.hamburger {
    display: none;
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 11;
    cursor: pointer;
    font-size: 24px;
}

/* Responsive Sidebar */
@media (max-width: 768px) {
    .sidebar {
        left: -250px; /* Hide sidebar initially */
        width: 250px; /* Maintain sidebar width */
    }

    .sidebar.open {
        left: 0; /* Show sidebar when open */
    }

    main {
        margin-left: 0; /* Full width on smaller screens */
        margin-top: 0px; /* Adjust if the top bar height changes */
    }

    .hamburger {
        display: block; /* Show hamburger icon on smaller screens */
    }
}
/* Button Styles */
.btn {
    background-color: var(--primary-color); /* Theme primary color */
    color: white; /* Text color */
    border: 2px solid var(--primary-color); /* No border */
    padding: 10px 20px; /* Vertical and horizontal padding */
    text-align: center; /* Center the text */
    text-decoration: none; /* No underline */
    display: inline-block; /* Allows setting margins and padding */
    font-size: 16px; /* Font size */
    margin: 4px 2px; /* Margin around the button */
    cursor: pointer; /* Cursor changes to pointer to indicate it's clickable */
    border-radius: 50px; /* High border-radius for pill shape */
    transition: background-color 0.3s, color 0.3s; /* Smooth transition for hover effect */
}

/* Button Hover Effect */
.btn:hover {
    background-color: var(--secondary-color); /* Darker shade on hover */
    color: black; /* Text color on hover */
    border: 2px soild var(--secondary-color);
}

/* Footer Links */
.footer-links a {
    color: #e0f2f1;
    padding: 5px;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: #ffffff;
}
.footer-logo-img {
    width: 100px; /* Adjust the width as needed */
    height: auto;
    margin-bottom: 10px;
}

.nav-link {
    padding: 10px 20px;
    text-decoration: none;
    display: block;
    color: #004d40; /* Dark teal color */
    font-size: 1.1em;
    transition: background-color 0.3s, color 0.3s;
    text-align: left; /* Aligns text to the left */
}

.nav-link:hover {
    background-color: #004d40; /* Dark teal color */
    color: white;
}

/* Adjust main content padding to not overlap with sidebar */
main {
    margin-top: 70px; /* Same as top bar height */
    padding: 20px;
}

/* Responsive adjustments for sidebar and main content */
@media (max-width: 768px) {
    .sidebar {
        left: -250px; /* Hide sidebar initially */
    }

    .sidebar.open {
        left: 0; /* Show sidebar when open */
    }

    main {
        margin-left: 0; /* Full width on smaller screens */
    }

    .hamburger {
        display: block; /* Show hamburger icon on smaller screens */
    }
}

/* Banner Styles */
.banner {
    position: relative;
    height: 150px; /* Set a fixed height for the banner */
    overflow: hidden;
    background-color: var(--primary-color); /* Match with primary color for better visual harmony */
}

.banner-image {
    width: 100%;
    height: 150px; /* Match the height of the banner */
    object-fit: cover; /* Ensures the image covers the area without stretching */
    filter: brightness(80%); /* Darken the banner image slightly to make text stand out */
}

.banner:hover .banner-image {
    transform: scale(1.05);
}
/* Top Banner Styles */
.top-banner {
    position: relative;
    width: 100%;
    height: 200px; /* Adjust height as necessary */
    overflow: hidden;
    background-color: var(--primary-color); /* Optional background color */
}

.top-banner-image {
    width: 100%;
    height: 200px; /* Match the height of the top banner */
    object-fit: cover;
}
.hero-banner {
    display: flex;
    justify-content: center; /* Centers the content horizontally */
    align-items: center; /* Centers the content vertically */
    height: 50vh; /* Makes the hero banner take up the full height of the viewport */
    text-align: center; /* Centers the text */
    background-color: #f5f5f5; /* Optional: Add a background color if needed */
}

.hero-content {
    max-width: 1000px; /* Adjusts the width of the hero content */
}

.body-logo {
    width: 600px; /* Make the logo bigger */
    height: auto; /* Maintain aspect ratio */
    margin-bottom: 0px; /* Add some space between the logo and the text */
}

h1, p {
    margin: 0;
}

.hero-btn {
    margin-top: 0px;
}
.logo-container {
    text-align: center; /* Centers the logo horizontally */
    margin: 0px 0; /* Adds some space above and below the logo */
}


/* Typography */
.kinetic-typography {
    font-size: 2em;
    animation: moveInLeft 1s ease-out;
}

@keyframes moveInLeft {
    0% {
        opacity: 0;
        transform: translateX(-100px);
    }
    80% {
        transform: translateX(10px);
    }
    100% {
        opacity: 1;
        transform: translate(0);
    }
}
.intro h2 {
    font-size: 3em;
    font-weight: bold;
}
.jigoro-kano-image {
    text-align: center; /* Centers the image */
    margin-top: 20px; /* Adds some space at the top */
}

.jigoro-kano-image img {
    max-width: 100%; /* Ensures the image is responsive */
    height: auto; /* Maintains the aspect ratio */
}

.class-location, .class-schedule {
    margin-bottom: 20px;
    padding: 15px;
    background-color: #f2f2f2; /* Light gray background */
    border-radius: 5px;
}

.class-location h2, .class-schedule h2 {
    color: #004d99; /* Dark blue for headings */
}

/* Responsive design adjustments */
@media (max-width: 600px) {
    .class-location, .class-schedule {
        padding: 10px;
    }
}
.club-section {
    padding: 20px;
}

.club-image {
    width: 45%; 
    height: auto;
    margin-bottom: 1px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.location-image {
    height: 20px; /* Adjust as necessary */
    width: auto;
    margin-right: 10px; /* Adds some space between the image and the text */
    vertical-align: middle; /* Aligns the image with the text */
}

.club-description, .club-location, .club-instructors, .club-facilities {
    margin-bottom: 20px;
}
.club-instructors, .coach-merit {
    margin-bottom: 20px;
    padding: 15px;
    background-color: #e6e6e6; /* Light gray background */
    border-radius: 5px;
}

.instructors-list li {
    margin-bottom: 10px;
    list-style-type: none; /* Removes bullet points */
    padding-left: 15px;
}

.instructors-list li:before {
    content: "🥋"; /* Judo emoji as bullet point */
    display: inline-block;
    width: 20px; /* Adjust as necessary */
    margin-left: -20px;
}

/* Responsive design adjustments */
@media (max-width: 600px) {
    .club-instructors, .coach-merit {
        padding: 10px;
    }
}
.facility {
    margin-bottom: 20px;
    padding: 15px;
    background-color: #f9f9f9; /* Light background for each facility */
    border-radius: 5px;
    border: 1px solid #ddd; /* subtle border */
}

.facility h3 {
    color: #0056b3; /* Adjust color as needed */
    margin-bottom: 10px;
}

/* Responsive design adjustments */
@media (max-width: 600px) {
    .facility {
        padding: 10px;
    }
}
.benefits-section {
    padding: 20px;
}

.benefit {
    margin-bottom: 20px;
}
.belt-section {
    padding: 20px;
}

.belt-category h2 {
    margin-top: 20px;
    margin-bottom: 10px;
}

.belt {
    padding: 5px 10px;
    color: white;
    font-weight: bold;
    display: inline-block;
    margin-right: 10px;
    border-radius: 5px;
}
/* Style for white belt */
.white-belt {
    color: #000000; /* Black text for visibility */
    background-color: #FFFFFF; /* White background for the belt */
    border: 2px solid #000000; /* Black border for distinction */
    padding: 5px 10px;
    display: inline-block;
    margin-right: 10px;
    border-radius: 5px;
}

/* Existing styles for black belt */
.black-belt {
    color: white;
    background-color: #000000;
    padding: 5px 10px;
    display: inline-block;
    margin-right: 10px;
    border-radius: 5px;
    border: 1px solid grey;
}

.belt span {
    display: block; /* Ensures the text is on a new line */
}
.events-section {
    padding: 20px;
}

.event {
    margin-bottom: 30px;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.sign-up-button {
    display: inline-block;
    padding: 10px 15px;
    margin-top: 10px;
    background-color: #004d40; /* Dark teal color */
    color: white;
    text-decoration: none;
    border-radius: 5px;
}

.sign-up-button:hover {
    background-color: #00382e;
}
/* News Article Styles */
.news-article {
    display: flex;
    margin-bottom: 20px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 20px;
}

.news-image img {
    width: 150px;
    height: 100px;
    object-fit: cover;
    margin-right: 20px;
}

.news-content {
    flex-grow: 1;
}

.news-content h2 {
    margin-top: 0;
    font-size: 18px;
    color: #333;
}

.news-content p {
    font-size: 14px;
    color: #666;
}

.news-content a {
    display: inline-block;
    margin-top: 10px;
    color: #1a0dab;
    text-decoration: none;
}


/* Loader Styles */
.loader {
    text-align: center;
    color: #004d40;
}
.contact-section {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.contact-form form {
    display: grid;
    grid-gap: 15px;
    margin-bottom: 20px;
}

.contact-form label {
    margin-bottom: 5px;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.contact-form button {
    background-color: #004d40;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.contact-form button:hover {
    background-color: #003d33;
}

.contact-info {
    background-color: #f8f9fa;
    padding: 15px;
    border-radius: 5px;
}
.gallery {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.photo-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 20px;
    margin-top: 20px;
}

.photo-link img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    transition: transform 0.3s ease;
}

.photo-link img:hover {
    transform: scale(1.05);
}

.video-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 20px;
    margin-top: 40px;
}

.video-gallery iframe {
    width: 100%;
    height: 200px;
    border-radius: 8px;
}

.photo-gallery img {
    width: 100%;
    max-width: 300px; /* Adjust as needed */
    margin: 10px;
    border-radius: 5px;
}

.video-gallery iframe {
    width: 100%;
    max-width: 560px; /* Adjust as needed */
    height: 315px; /* Adjust as needed */
    margin: 10px;
}
/* Improved Image Styles */
img.img-fluid {
    border: 1px solid #ddd;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}
/* Footer Styles */
footer {
    background-color: var(--primary-color);
    color: white;
    text-align: center;
    padding: 20px;
    position: relative;
    bottom: 0;
    width: 100%;
}
.social-icon {
    margin: 0 10px;
    font-size: 24px; /* Icon size */
    border: 2px solid white; /* White border */
    border-radius: 50%; /* Circular border */
    display: inline-block;
    width: 40px; /* Adjust size as needed */
    height: 40px; /* Adjust size as needed */
    text-align: center;
    line-height: 40px; /* Center the icon vertically */
    transition: all 0.3s ease; /* Smooth transition for hover effects */
    color: white; /* White icon color */
}

.social-icon.facebook {    
    background-color: #4267B2; /* Facebook color */
}

.social-icon.facebook:hover {
    background-color: #365899; /* Darker shade for hover */
}

.social-icon.twitter {
    background-color: #1DA1F2; /* Twitter color */
}

.social-icon.twitter:hover {
    background-color: #0d95e8; /* Darker shade for hover */
}
/* Show Hamburger Menu on Mobile */
@media (max-width: 768px) {
    .hamburger {
        display: block; /* Show the hamburger icon */
    }

    .sidebar {
        transform: translateX(-250px); /* Hide sidebar offscreen */
    }

    .sidebar.open {
        transform: translateX(0); /* Bring sidebar onscreen when 'open' class is added */
    }
}}