:root {
    --yonex-green: rgba(68,215,168, 0.8); /* Example green color similar to Yonex badminton court mat */
}

html {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    background-color: #111; /* Dark but not completely black */
    color: white;
    font-family: Arial, sans-serif;
}

.content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center content horizontally */
}

.header {
    text-align: center;
    margin: 40px 0;
}

.scores-logo {
    width: auto; /* Adjust based on actual logo size */
    height: 220px; /* Example height, adjust as needed */
    display: block; /* Block level for proper alignment */
    margin: 0 auto; /* Center the logo */
}

.intro-text p {
    margin: 0px;
    font-size: 28px; /* Much smaller text */
    display: inline-block; /* Make the div fit its content */
}

.contact-frame .no-wrap{
    white-space: nowrap;
    text-align: center;
}

.clubs-using-scores {
    text-align: center;
    margin: 40px 0;
}

.clubs-using-scores h2 {
    color: var(--yonex-green); /* Using the green color variable */
    /* Additional styling for the heading if needed */
}

.club-list {
    display: flex;
    justify-content: center; /* Center the clubs horizontally */
    gap: 30px; /* Space between each club */
}

.club {
    text-align: center; /* Center-align text and logo within each club */
}

.club-logo {
    width: auto; /* Adjust based on actual logo size */
    height: 100px; /* Example height, adjust as needed */
    margin-bottom: 10px; /* Space between logo and club name */
}

.image-gallery {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 40px;
    width: 80%; /* Adjust width as needed */
}

.image-gallery img {
    width: 32%; /* Three images span full width */
    height: auto;
    margin-bottom: 10px;
}

.sections-container {
    display: flex;
    justify-content: center; /* Center the boxes */
    align-items: center; /* Align items vertically */
    width: 100%;
    margin: 20px 0;
    gap: 50px; /* 50 pixels gap between boxes */
}

.section-box {
    border: 2px solid #00ff00; /* Matching the green theme */
    border-radius: 15px; /* Rounded edges */
    padding: 20px;
    margin: 10px;
    width: 300px; /* Adjust width to account for the gap */
    height: 170px;
    box-shadow: 0px 0px 10px var(--yonex-green); /* Optional: Adds a subtle shadow */
}
/* Adding padding to specific section boxes */
#what-we-do {
    padding-right: 20px; /* Padding right for 'What We Do' box */
}

#who-are-we {
    padding-left: 20px; /* Padding left for 'Who Are We' box */
}

.section-box {
    border: 2px solid var(--yonex-green); /* Matching the green theme */
    border-radius: 15px; /* Rounded edges */
    padding: 20px;
    box-shadow: 0px 0px 10px var(--yonex-green); /* Shadow effect */
}

.contact-section .contact-info .contact-frame {
    border-radius: 15px; /* Rounded edges */
    padding-bottom: 40px; /* top right bottom left */
    padding-top: 60px; /* top right bottom left */
    display: inline-block;
}

.section-box h2, .contact-info h2 {
    margin: 0 0 10px;
    color: var(--yonex-green); /* Matching the green theme */
    text-align: center; /* Center-align the title */
}

.contact-info {
    text-align: center;
    display: block; /* Ensure block-level display */
    margin: 0 auto; /* Center the contact box */
}

.contact-info .contact-frame {
    border: 0px solid var(--yonex-green); /* Frame color matching the green shadow */
    border-radius: 15px; /* Rounded edges */
    padding: 20px; /* Padding inside the frame */
    display: block; /* Changed from inline-block to block */
    width: auto; /* Fixed width for the contact frame */
    box-shadow: 0px 0px 0px var(--yonex-green); /* Shadow effect */
    margin: 0 auto; /* Center the frame */
    text-align: center;
}

.contact-info img {
    width: 100px; /* Small profile picture */
    height: auto;
    border-radius: 50%; /* Circular picture */
    display: block; /* Ensure block-level display */
    margin: 10px auto; /* Center the image */
}

footer {
    text-align: center;
    padding: 20px 0;
    font-size: 14px;
    background-color: #111; /* Footer background */
}

footer p {
    margin: 0; /* Remove default margin */
}

@media only screen and (max-width: 600px) {
    /* Adjust layout for mobile devices */
    body {
        display: block;
        text-align: center;
        /* Change flex layout to block layout for better control on mobile */
    }

    .content-wrapper,
    .image-gallery,
    .sections-container,
    .contact-info,
    footer {
        width: 90%; /* Set maximum width to 90% of the viewport */
        margin: 0 auto; /* Center align all main elements */
    }

    .header,
    .intro-text p,
    .clubs-using-scores h2,
    .club-list,
    .club-logo,
    .section-box h2,
    .contact-info h2 {
        text-align: center; /* Ensure text is centered */
    }

    .scores-logo {
        width: auto; /* Significantly larger size for the scores logo */
        height: 200px; /* Maintain aspect ratio */
        margin: 0 auto; /* Center the logo */
        display: block; /* Ensure block-level display */
    }

    .contact-info img {
        width: 90%; /* Adjust image widths to be responsive */
        height: auto; /* Maintain aspect ratio */
        margin: 0 auto; /* Center images */
    }

    .image-gallery img {
        width: 90%; /* Adjust gallery images to take up more space */
        margin: 5% auto; /* Add margin for spacing and centering */
    }

     .club-logo {
        width: auto; /* Fixed width for club logos */
        height: 100px; /* Maintain aspect ratio */
        margin: 0 auto; /* Center logos */
    }

     .intro-text p {
         margin: 0px;
         font-size: 20px; /* Much smaller text */
         text-align: center
    }


    /* Additional mobile-specific adjustments can be added here */
}