@media (max-width: 850px) {
    /* 4. THE FEED: Stack cards vertically instead of 4-wide */
    .feed-container {
        padding: 1rem; /* Reduce heavy desktop padding */
        margin: 1rem;
        margin-bottom: 1rem;
    }

    /* Force both feed types to a single column */
    .feed, .feed5 {
        display: grid !important;
        /* This creates exactly one column taking the full width */
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important; /* Allow height to grow naturally */
        gap: 20px; /* Space between the stacked cards */
        max-width: 100%;

        .title {
            text-align: center;
        }
    }
}

@media (max-width: 992px) {
    /* 1. THE FOUNDATION: Stop the horizontal scroll */
    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    body {
        overflow-x: hidden; /* Prevents accidental side-scrolling */
        width: 100%;
    }

    .body1 {
        background-image: url(./football.jpg);
        background-attachment:fixed;
        background-size:cover;
        background-position: center;
        background-repeat: no-repeat;
        cursor: pointer;
        min-height: 100vh;
        overflow-y: visible;
    }

    /* 2. THE HEADER: Fix overlapping columns */
    .header-grid {
        position: fixed; /* Only fixed on mobile */
        top: 0;
        left: 0;
        width: 100%;
        height: 70px; /* Mobile height */
        display: flex; /* Flex is better for mobile alignment */
        justify-content: space-between;
        padding: 0 15px;
        transition: transform 0.3s ease, height 0.3s ease;
        z-index: 1000;
    }

    /* Only shrinks on mobile */
    .header-grid.shrunk {
        height: 55px;
        background: rgb(22, 22, 61);
    }

    /* Only hides on mobile */
    .header-hidden {
        transform: translateY(-100%);
    }

    .logo img {
        width: 50px;
        height: auto;
    }

    /* 3. MAIN CONTENT: Remove the massive 120px padding */
    .main-x {
        width: 100%;
        max-width: 100%;
        padding: 20px 15px; /* Balanced padding */
        margin-top: 70px;
        background-color: white;
    }

    .grid-container {
        max-width: 100%; /* Changed from 50% to 100% */
    }

    .card {
        width: 100%; /* Ensure card fills the column */
        margin-bottom: 10px;
    }

    /* Fix the description padding that was pushing text out */
    .card .desc {
        padding-top: 10px !important; 
        font-size: 14px;
        line-height: 1.4;
    }

    /* Ensure images span the full width of the card */
    .card img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    /* 6. THE ADS: Remove the 345px padding 'Killer' */
    .ad {
        padding-left: 0;
        text-align: center;
        font-size: 10px;
        margin: 10px 0;
    }

    .ad-section, .ad-section1, .ad-section-news {
        width: 100%;
        height: auto;
        min-height: 100px;
        padding: 20px;
    }

    /* 7. THE FOOTER: Center everything */
    .footer-container {
        display: none;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0px;
    }

    .footer-links {
        padding-left: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }

    .footer-links a {
        padding: 5px;
    }

    .copyright, .list-social {
        padding-left: 0;
        justify-content: center;
        width: 100%;
        margin-top: 15px;
    }

    /* 8. SIDE MENU: Ensure it fits the screen */
    #side-menu {
        width: 250px; /* Wider for better touch targets */
        right: -250px;
    }

    /* 9. CAROUSEL: Adjust height for mobile */
    .carousel-container {
        height: 400px; /* Reduced from 700px */
    }

    .slide img {
        width: 50%; /* Larger on mobile for visibility */
    }
}

@media (max-width: 992px) {
    /* 1. Adjust the Header Grid */
    .header-grid {
        height: 60px !important; /* Shorter height for mobile */
        grid-template-columns: auto 1fr auto !important; /* Logo | Spacer | Icons */
        gap: 10px !important;
        padding: 0 15px;
    }

    /* 2. Resize the Logo */
    .logo img {
        height: 50px !important;
        width: 50px !important;
        border-radius: 8px;
    }

    /* 3. Handle the Search Container */
    .search-container {
        justify-self: center; /* Keeps it in the middle column */
    }

    .search-box {
        width: 0;
        padding: 0;
        opacity: 0;
        /* Only shows when 'expanded' class is added via JS */
    }

    .search-container.expanded .search-box {
        width: 100px;
        opacity: 1;
        padding: 8px 12px;
    }

    /* 4. Fix the Hamburger Position */
    .hamburger {
        position: static !important; /* Removes 'fixed' which breaks grid flow */
        display: flex;
        justify-self: end; /* Aligns to the right */
    }

    /* 5. The Navigation List (Hidden by default on mobile) */
    .nav-list {
        display: none; /* Hide the desktop links */
        flex-direction: column;
        position: absolute;
        top: 70px; /* Match new header height */
        right: 0;
        width: 200px;
        background: rgb(26, 30, 44);
        box-shadow: -2px 5px 10px rgba(0,0,0,0.3);
        padding: 20px 0;
        z-index: 1001;
    }

    /* Show when active */
    .nav-list.show, .nav-list.active {
        display: flex !important;
    }

    .nav-list li {
        margin: -2px 20px !important;
        text-align: left;
    }

    /* 6. Title/Text adjustments */
    .title-logo {
        font-size: 24px !important; /* Shrink from 60px */
    }
}

@media (max-width:992px) {
    .livescores-container {
        margin-top: 40px;
        padding:0;
    }
}

@media (max-width: 992px) {
    .menu-img {
        p {
            font-size: 7px;
            padding-top: 5px;
            text-align: center;
            justify-content: center;
        }

        a {
            text-decoration: none;
            padding: 15px;
            color: #72ff00;
        }
    }
}

@media (max-width: 992px) {
    #clock-container {
        /* 1. Reset the grid and layout */
        grid-column: auto;
        grid-row: auto;
        
        /* 2. Positioning it to the right */
        display: flex;
        flex-direction: column;
        align-items: flex-end; /* Pushes content to the right */
        
        /* 3. Safe Spacing */
        width: 100%;
        padding-right: 50px;   /* Small gap from the right edge */
        padding-left: 0;       /* IMPORTANT: Removed the 85% padding */
        padding-top: 3rem;     /* Reduced from 9rem to save mobile space */
        
        text-align: right;
    }

    #clock-face {
        /* Keeping it slightly smaller for mobile right-alignment */
        width: 85px;
        height: 85px;
        margin-right: 0; /* Ensures it sticks to the right */
    }

    #date-display {
        font-size: 13px;
        margin-top: 10px;
        padding-right: 5px;
    }

    #man {
        margin-right: 30px; /* Aligns the man icon under the clock */
    }
}

@media (max-width: 992px) {
    /* The Panel */
    #side-menu {
        position: fixed;
        top: 0;
        right: -170px; /* Hidden further away (matched to width) */
        width: 170px;  /* Wider for better usability */
        height: 100vh; /* Full viewport height */
        background: linear-gradient(300deg, rgb(26, 37, 71),  rgb(31, 31, 31)), rgb(51, 255, 0);
        box-shadow: -5px 0 15px rgba(0,0,0,0.3);
        padding-top: 80px;
        transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* Smoother animation */
        z-index: 2000; /* Must be higher than the clock and header */

        #nav-ghost {
            display: flex;
        }

        a:hover {
            color: #72ff00;
        }

        .nav-community:hover {
            color: white;
        }
    }

    /* When the menu is open */
    #side-menu.active {
        right: 0;
    }

    /* The Hamburger Button */
    .hamburger {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 6px;
        cursor: pointer;
        z-index: 2100; /* Above the menu */
        padding: 10px;
    }

    /* The individual lines of the hamburger */
    .hamburger .line {
        width: 30px;
        height: 2px;
        background-color: #ffffff; /* Contrast against your dark header */
        border-radius: 2px;
        transition: 0.3s;
    }

    /* Hamburger Animation to 'X' */
    .hamburger.active .line:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .hamburger.active .line:nth-child(2) { opacity: 0; }
    .hamburger.active .line:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }


    /* This only triggers when the JS adds the 'shrunk' class to the 'header' ID */
    #header.shrunk {
        height: 60px !important; /* Shorter than the original 100px */
        background: rgba(26, 37, 71, 0.98); /* Optional: make it slightly see-through */
        transition: all 0.4s ease; /* This makes the shrinking look smooth, not jumpy */
    }

    /* You should also shrink the logo inside the shrunk header */
    #header.shrunk .logo img {
        height: 40px !important;
        width: 40px !important;
        transition: all 0.4s ease;
    }
}

/* Hide on desktop */
.footer-menu {
    display: none;
}

.footer-menu {
    /* ... your existing code ... */
    transition: transform 0.3s ease-in-out; /* Adds the sliding effect */
}

/* This class is toggled by JavaScript */
.footer-hidden {
    transform: translateY(100%); /* Moves the footer down exactly its own height */
}

@media (max-width: 992px) {
    .footer-menu {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100vh; /* Slightly shorter for better mobile UX */

        /* Centering Logic */
        justify-items: center;
        align-items: center;

        background: linear-gradient(300deg, rgb(22, 22, 61), rgb(26, 37, 71), rgb(31, 31, 31));
        background-size: 180% 180%;
        animation: gradient-animation 18s ease infinite;

        /* FIX: Reduced gap and padding */
        gap: 10px;
        box-sizing: border-box; /* Crucial: includes padding in the height calculation */
        z-index: 1; /* Ensure it stays above content */
    }

    .footer-menu {
        /* Ensure this is exactly what we set */
        height: 70;
    }

    /* The content section should end exactly where the footer begins */
    .livescore-container {
        min-height: calc(100vh - 150px); /* Adjust based on header + footer */
        display: block;
    }

    /* Target images correctly */
    .footer-menu img {
        width: 25px; /* Scaled for mobile */
        height: auto;
        display: block;
    }

    .footer-menu .comm-img {
        width: auto;
        height: 30px;
    }
}

@media (max-width:600px) {
    .about-us-container {
        background linear-gradient(300deg, rgb(0, 0, 255),
        rgb(11, 54, 30),  rgb(37, 17, 126));
        color: rgb(255, 255, 255);
        font-weight: normal;
        gap: 50px;
        padding: 2rem;
        text-decoration: none;
        font-size: 0.75rem;
        text-align: justify;
        align-items: center;
        max-width: auto;
        display: flex;
        flex-direction: column;
        font-weight: normal;
        font-family: "Michroma", sans-serif;
        overflow-y: auto;
    }

    .body1 .body2 {
        margin: 0;
        font-size: 15px;
        display: flex;
        flex-direction: column;
        /* FIX: Changed max-height to min-height and removed overflow: hidden */
        min-height: 100vh;
        gap: 30px;
        overflow-y: auto; /* Allows scrolling if content is long */
    }
}

@media (max-width:992px) {
    .community-container {
        padding-top: 20px;
        display: flex;
        padding: 2rem;
        max-width: auto;
        min-height: 75vh;
        text-decoration: none;
        font-size: 0.75rem;
        text-align: justify;
        align-items: center;
        font-weight:bold;
        justify-content: center;
        align-items: center;
        color: whitesmoke;
        overflow-y: visible;
    }

    .welcome-sign {
        display: flex;
        flex-direction:column;
        width: 100%;

        img {
            width: 15rem;
            justify-content: center;
            align-items: center;
        }

        h1 {
            font-size: 2rem;
            color: white;
        }

        .fanzone {
            color: #72ff00;
            font-size: 50px;
        }

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

@media (max-width:600px) {
    .body-4 {
        font-family: "Michroma", sans-serif;
        background: linear-gradient(300deg, rgb(26, 37, 71),  rgb(31, 31, 31)), rgb(51, 255, 0);
        margin: 0;
        padding: 0;
        display: grid;
        justify-content: center;
        align-items: center;
        height: 100vh;
    }

    .container {
        display: flex;
        color: white;
        padding: 30px;
        border-radius: 10px;
        width: 100%;
    }

    h2 { text-align: center; }

    label { display: block; margin-top: 10px; }

    input {
        width: 100%;
        padding: 10px;
        margin-top: 5px;
        border-radius: 5px;
        border: 1px solid #ccc;
    }

    button {
        width: 100%;
        margin-top: 20px;
        padding: 12px;
        background-color: #2575fc;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }

    .toggle-link {
        text-align: center;
        margin-top: 15px;
        color: #2575fc;
        cursor: pointer;
    }

    .message {
        color: red;
        text-align: center;
        margin-top: 10px;
    }

    .main-footer-container {
        width: 100%;
        background: linear-gradient(300deg, rgb(22, 22, 61), rgb(26, 37, 71), rgb(31, 31, 31)) ;
        background-size: 180% 180%;
        animation: gradient-animation 18s ease infinite;
        z-index: 1000;
    }
}