/*
Theme Name: XtremeDesportes Theme
Author: Eldho
Description: Full Layout - Logo, Socials, Hamburger Menu & Lines
Version: 3.0
*/

/* --- 1. FONTS & BASICS --- */
@font-face {
    font-family: 'SoccerLeague';
    src: url('fonts/soccer_league.ttf') format('truetype'); 
    font-weight: normal;
    font-style: normal;
}

body {
    background-color: #ffffff;
    font-family: 'Georgia', serif;
    margin: 0;
    color: #000;
    overflow-x: hidden; /* മൊബൈലിൽ സൈഡ് സ്ക്രോൾ വരാതിരിക്കാൻ */
}

.container {
    width: 95%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

/* --- 2. HEADER TOP SECTION --- */
header {
    padding-top: 5px;
}

.header-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 5px;
    position: relative;
}

/* Left Side: Date & Login */
.date-login-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.current-date {
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.desktop-login-link {
    font-size: 12px;
    text-decoration: none;
    color: #333;
    font-weight: bold;
    text-transform: uppercase;
    display: flex;
    align-items: center;
}

/* Right Side: Social Icons (Desktop) */
.desktop-socials {
    display: flex;
    gap: 15px;
    position: absolute;
    right: 0;
    top: 0;
}

/* Social Icon Colors */
.fb-color { color: #1877F2; }      /* Facebook Blue */
.insta-color { color: #E1306C; }   /* Instagram Pink/Red */
.x-color { color: #000; }          /* X Black */

.social-icon {
    font-size: 16px;
    transition: transform 0.2s;
}
.social-icon:hover {
    transform: scale(1.1); /* Hover ചെയ്യുമ്പോൾ അല്പം വലുതാകും */
}

/* Mobile Toggle Button (Hidden on Desktop) */
.mobile-menu-toggle {
    display: none;
    font-size: 22px;
    cursor: pointer;
    position: absolute;
    right: 0;
    top: 0;
    color: #000;
}

/* --- 3. LOGO AREA --- */
.logo-area {
    text-align: center;
    margin-top: 0px;
    padding-top: 0px;
}

/* ലോഗോയുടെ വലിപ്പം കുറയ്ക്കുന്നു */
.site-logo, .logo-area img {
    width: 60px !important;
    max-width: 60px !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto 5px auto !important;
}

.site-title {
    font-family: 'SoccerLeague', sans-serif !important;
    font-size: 70px; 
    margin: 0;
    color: #000;
    text-decoration: none;
    line-height: 0.9;
}

.site-slogan {
    font-family: 'Georgia', serif;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 5px 0 10px 0;
    color: #333;
    font-weight: bold;
}

/* --- 4. NAVIGATION MENU --- */
.main-navigation {
    padding: 5px 0;
    margin-top: 5px;
}

.main-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.main-navigation li {
    margin: 0 15px;
}

.main-navigation a {
    text-decoration: none;
    color: #000;
    font-weight: bold;
    font-size: 14px;
    text-transform: uppercase;
}

/* --- 5. DOUBLE LINES (DIVIDER) --- */
/* മെനുവിന് താഴെയായി വരുന്ന വരകൾ - മൊബൈലിലും കാണും */
.header-divider {
    border-top: 3px double #000 !important; /* മുകളിലെ ഇരട്ട വര */
    border-bottom: 1px solid #eee !important; /* താഴത്തെ നേർത്ത വര */
    width: 100%;
    height: 4px;
    margin-top: 10px;
    margin-bottom: 20px;
    display: block;
}

/* Hide Mobile Elements on Desktop */
.mobile-menu-extras, .mobile-close-btn {
    display: none;
}

/* --- 6. MOBILE RESPONSIVE STYLES --- */
@media screen and (max-width: 768px) {
    
    /* Hide Desktop Login & Socials */
    .desktop-login-link, .desktop-socials {
        display: none;
    }

    /* Show Hamburger Button */
    .mobile-menu-toggle {
        display: block;
    }

    /* Logo Adjustment */
    .site-title { font-size: 40px; }
    .site-logo, .logo-area img { width: 50px !important; max-width: 50px !important; }

    /* Mobile Menu (Slide from Right) */
    .main-navigation {
        display: block;
        position: fixed;
        top: 0;
        right: -100%; /* Initially hidden */
        width: 250px; /* Width of the menu */
        height: 100vh;
        background: #fff;
        box-shadow: -2px 0 5px rgba(0,0,0,0.1);
        z-index: 1000;
        transition: right 0.3s ease; /* Animation */
        padding-top: 50px !important;
        margin-top: 0;
    }

    /* When Menu is Active */
    .main-navigation.active {
        right: 0;
    }

    /* Mobile Menu List Items */
    .main-navigation ul {
        flex-direction: column;
        text-align: left;
        padding-left: 20px;
    }

    .main-navigation li {
        margin: 15px 0;
        border-bottom: 1px solid #f0f0f0;
        width: 90%;
    }

    /* Close Button */
    .mobile-close-btn {
        display: block;
        position: absolute;
        top: 15px;
        right: 20px;
        font-size: 24px;
        cursor: pointer;
    }

    /* Mobile Extras (Login & Socials) */
    .mobile-menu-extras {
        display: flex;
        flex-direction: column;
        padding-left: 20px;
        margin-top: 30px;
        border-top: 1px solid #ddd;
        padding-top: 20px;
        width: 80%;
    }

    /* Mobile Login Button */
    .mobile-login-btn {
        text-decoration: none;
        color: #000;
        font-weight: bold;
        font-size: 14px;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    /* Mobile Social Icons */
    .mobile-socials {
        display: flex;
        gap: 20px;
    }
    
    .mobile-socials .social-icon {
        font-size: 20px;
    }
}
/* മെനുവിന്റെ ഫോണ്ട് ലൈറ്റ് (Light) ആക്കാൻ */
.main-navigation a {
    text-decoration: none;
    color: #000;
    font-weight: normal !important; /* 'bold' മാറ്റി 'normal' ആക്കി */
    font-size: 15px; /* കനം കുറയുമ്പോൾ വലിപ്പം അല്പം കൂട്ടുന്നത് ഭംഗി കൂട്ടും */
    text-transform: uppercase;
    font-family: 'Georgia', serif; /* സ്റൈലിഷ് ലുക്ക് കിട്ടാൻ */
    letter-spacing: 1px; /* അക്ഷരങ്ങൾക്കിടയിൽ അല്പം അകലം */
    padding: 5px;
    transition: all 0.3s ease;
}

/* മൗസ് വെക്കുമ്പോൾ (Hover) അല്പം ബോൾഡ് ആകാൻ (ഇഷ്ടമുണ്ടെങ്കിൽ മാത്രം) */
.main-navigation a:hover {
    font-weight: 600 !important; /* മൗസ് വെക്കുമ്പോൾ കനം കൂടും */
    text-decoration: underline;  /* താഴെ ഒരു വര വരും */
}
/* 1. പേജിന്റെ ഏറ്റവും മുകളിലെ വിടവ് കളയാൻ */
body, html {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

header {
    padding-top: 2px !important; /* വളരെ ചെറിയ ഒരു വിടവ് മാത്രം */
    margin-top: 0 !important;
}

.container {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 2. ഡേറ്റ്, ലോഗിൻ, സോഷ്യൽ ഐക്കൺ എന്നിവയുടെ വിടവ് കുറയ്ക്കാൻ */
.header-top {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    height: auto !important;
    min-height: 20px; /* ആവശ്യത്തിന് മാത്രം ഉയരം */
}

/* 3. ലോഗോ ഏരിയ മുകളിലേക്ക് വലിച്ചടുപ്പിക്കാൻ */
.logo-area {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 4. ലോഗോ ചിത്രത്തിന്റെ മുകളിലെ വിടവ് കളയാൻ */
.site-logo, .logo-area img {
    margin-top: 0 !important; 
    margin-bottom: 0 !important;
}

/* 5. പേരിന്റെ (Title) മുകളിലെ വിടവ് കളയാൻ */
.site-title {
    margin-top: 0 !important;
    padding-top: 0 !important;
    line-height: 0.8 !important; /* വരികൾ തമ്മിലുള്ള അകലം കുറച്ചു */
}

/* 6. സ്ലോഗൻ മുകളിലേക്ക് നീക്കാൻ */
.site-slogan {
    margin-top: 2px !important;
    margin-bottom: 5px !important;
}
/* 1. ഹെഡർ കാണാൻ പാകത്തിന് അല്പം താഴേക്ക് ഇറക്കുന്നു */
header {
    padding-top: 10px !important; /* 0-ൽ നിന്ന് 10px ആക്കി */
    padding-bottom: 0 !important;
    position: relative;
    z-index: 100; /* മറ്റുള്ളവയ്ക്ക് മുകളിൽ വരാൻ */
}

/* 2. ഡേറ്റ്, ലോഗിൻ, സോഷ്യൽ ഐക്കൺ എന്നിവയുടെ കണ്ടെയ്നർ */
.header-top {
    display: flex !important;
    justify-content: space-between;
    align-items: flex-start;
    min-height: 30px; /* കാണാൻ പാകത്തിന് ഉയരം നൽകി */
    margin-bottom: 5px;
    position: relative;
    visibility: visible !important; /* നിർബന്ധമായും കാണിക്കാൻ */
}

/* 3. ലോഗോ തൊട്ടുതാഴെ വരാൻ */
.logo-area {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 4. ബോഡിയിലെ മാർജിൻ ക്രമീകരണം */
body {
    margin-top: 0 !important;
}/* സ്ലോഗൻ താഴേക്ക് ഇറക്കാൻ */
.site-slogan {
    margin-top: 15px !important;    /* പേരിൽ നിന്നും 15px താഴേക്ക് ഇറങ്ങി നിൽക്കും */
    margin-bottom: 15px !important; /* മെനുവിൽ നിന്നും 15px അകലം ഉണ്ടാകും */
    display: block !important;
    
    /* ഫോണ്ട് സ്റ്റൈൽ (ആവശ്യമെങ്കിൽ മാത്രം മാറ്റുക) */
    font-family: 'Georgia', serif;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: bold;
    color: #333;
}
/* 1. ഹെഡർ കണ്ടെയ്നർ റിലേറ്റീവ് ആക്കുന്നു (ഇതിനെ അടിസ്ഥാനമാക്കി വേണം ബാക്കിയുള്ളവ നിൽക്കാൻ) */
header .container {
    position: relative !important;
    padding-top: 20px !important; /* മുകളിൽ അല്പം സ്ഥലം നൽകുന്നു */
}

/* 2. ഡേറ്റ് & ലോഗിൻ - ലോഗോയുടെ ഇടതുവശത്ത് കൃത്യമായി വരാൻ */
.date-login-wrapper {
    position: absolute !important; /* നിർബന്ധമായും പൊസിഷൻ ചെയ്യുന്നു */
    left: 0 !important;            /* ഇടതുവശത്ത് ചേർന്ന് നിൽക്കാൻ */
    top: 30px !important;          /* ലോഗോയുടെ നേരെ വരാൻ ഉയരം ക്രമീകരിക്കുന്നു */
    z-index: 100 !important;       /* മറ്റുള്ളവയുടെ മുകളിൽ വരാൻ */
    text-align: left;
    display: block !important;     /* മറഞ്ഞിരിക്കുന്നെങ്കിൽ തെളിയിക്കാൻ */
}

/* 3. സോഷ്യൽ മീഡിയ - ലോഗോയുടെ വലതുവശത്ത് കൃത്യമായി വരാൻ */
.desktop-socials {
    position: absolute !important;
    right: 0 !important;           /* വലതുവശത്ത് ചേർന്ന് നിൽക്കാൻ */
    top: 30px !important;          /* ലോഗോയുടെ നേരെ വരാൻ */
    z-index: 100 !important;
    display: flex !important;
    gap: 15px;
}

/* 4. ലോഗോയും പേരും - നടുക്ക് തന്നെ നിൽക്കാൻ */
.logo-area {
    margin-top: 0 !important;
    padding-top: 0 !important;
    position: relative;
    z-index: 1;
}

/* 5. ലോഗോ വലിപ്പം ക്രമീകരണം */
.site-logo, .logo-area img {
    margin-top: 0 !important;
}

/* 6. മൊബൈലിൽ ഈ മാറ്റങ്ങൾ ബാധിക്കാതിരിക്കാൻ */
@media screen and (max-width: 768px) {
    .date-login-wrapper, .desktop-socials {
        position: static !important; /* മൊബൈലിൽ പഴയപടി വരാൻ */
        display: none !important;    /* മൊബൈലിൽ ഇത് ഹൈഡ് ചെയ്യും (നമ്മൾ മെനുവിലാണല്ലോ കൊടുത്തത്) */
    }
    
    header .container {
        padding-top: 5px !important;
    }
}
/* മൊബൈൽ സ്ക്രീൻ ക്രമീകരണങ്ങൾ */
@media screen and (max-width: 768px) {
    
    /* 1. ഡേറ്റ് തിരികെ കൊണ്ടുവരാൻ */
    .date-login-wrapper {
        position: absolute !important;
        left: 10px !important;      /* ഇടതുവശത്ത് ചേർന്ന് */
        top: 10px !important;       /* മുകളിൽ ചേർന്ന് */
        display: block !important;  /* മറഞ്ഞത് തെളിയിക്കാൻ */
        z-index: 101;
    }

    /* 2. ഡേറ്റ് മാത്രം കാണിക്കുക (ലോഗിൻ മെനുവിലുണ്ടല്ലോ) */
    .current-date {
        font-size: 10px !important;
        font-weight: bold;
        color: #555;
        display: block !important;
    }

    /* ഡെസ്ക്ടോപ്പിലെ ലോഗിൻ ലിങ്ക് മൊബൈലിൽ വേണ്ട (അത് മെനുവിലുണ്ട്) */
    .desktop-login-link {
        display: none !important;
    }

    /* ഡെസ്ക്ടോപ്പിലെ സോഷ്യൽ ഐക്കൺ മൊബൈലിൽ വേണ്ട */
    .desktop-socials {
        display: none !important;
    }
    
    /* 3. ഹെഡർ കണ്ടെയ്നർ */
    header .container {
        padding-top: 0 !important;
    }

    /* 4. ലോഗോ ക്രമീകരണം */
    .logo-area {
        margin-top: 25px !important; /* ഡേറ്റ് വരാൻ ലോഗോ അല്പം താഴേക്ക് ഇറക്കി */
    }
    
    .site-logo, .logo-area img {
        width: 50px !important;
        max-width: 50px !important;
    }
    
    .site-title {
        font-size: 40px !important;
    }
}
/* മൊബൈലിൽ മാത്രം ഹെഡർ താഴേക്ക് മാറ്റാൻ */
@media screen and (max-width: 768px) {
    
    /* 1. ബോഡിക്ക് താഴെ പാഡിംഗ് നൽകുന്നു (ഹെഡർ വരാൻ സ്ഥലം വേണം) */
    body {
        padding-bottom: 80px !important; /* ഹെഡറിന്റെ ഉയരത്തിനനുസരിച്ച് ഇത് കൂട്ടാം */
        padding-top: 0 !important;
    }

    /* 2. ഹെഡർ ഫിക്സഡ് ആക്കി താഴേക്ക് മാറ്റുന്നു */
    header {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        background: #fff !important; /* പിന്നിലെ കണ്ടന്റ് മറയ്ക്കാൻ വെള്ള നിറം */
        border-top: 1px solid #ddd !important; /* മുകളിൽ ഒരു ബോർഡർ */
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1) !important; /* ചെറിയ നിഴൽ */
        z-index: 9999 !important;
        padding: 5px 0 !important;
        height: auto !important;
    }

    /* 3. ലോഗോയും മറ്റും വരിയായി (Flex) ക്രമീകരിക്കുന്നു */
    header .container {
        display: flex !important;
        justify-content: space-between; /* ഇടതും വലതും നടുക്കുമായി അകലം */
        align-items: center !important;
        padding: 0 15px !important;
        flex-direction: row !important; /* വരിയായി തന്നെ വരാൻ */
    }

    /* 4. ലോഗോ ക്രമീകരണം (ഇടതുവശത്ത് അല്ലെങ്കിൽ നടുക്ക്) */
    .logo-area {
        margin: 0 !important;
        padding: 0 !important;
        order: 2; /* ലോഗോ നടുക്ക് വരാൻ */
        flex-grow: 1; /* ബാക്കി സ്ഥലം എടുക്കാൻ */
    }
    
    .site-logo, .logo-area img {
        width: 40px !important; /* ലോഗോ അല്പം ചെറുതാക്കുന്നു */
        margin: 0 auto !important;
    }
    
    .site-title, .site-slogan {
        display: none !important; /* സ്ഥലപരിമിതി ഉള്ളതുകൊണ്ട് പേരും സ്ലോഗനും താഴെ വേണ്ട */
    }

    /* 5. മെനു ബട്ടൺ (വലതുവശത്ത്) */
    .mobile-menu-toggle {
        position: static !important; /* പഴയ അബ്സല്യൂട്ട് മാറ്റുന്നു */
        order: 3; /* ഏറ്റവും വലതുവശത്ത് വരാൻ */
        font-size: 24px !important;
        padding: 10px !important;
    }

    /* 6. ഡേറ്റ് (ഇടതുവശത്ത്) */
    .date-login-wrapper {
        position: static !important;
        order: 1; /* ഏറ്റവും ഇടതുവശത്ത് വരാൻ */
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .current-date {
        font-size: 10px !important;
        display: block !important;
    }

    /* 7. മെനു തുറന്നുവരുമ്പോൾ ഉള്ള ക്രമീകരണം */
    .main-navigation {
        bottom: 60px !important; /* ഹെഡറിന് തൊട്ടു മുകളിൽ നിന്ന് തുടങ്ങാൻ */
        top: auto !important;    /* മുകളിലെ ഫിക്സിംഗ് ഒഴിവാക്കി */
        height: auto !important;
        max-height: 80vh !important; /* സ്ക്രീനിന്റെ 80% വരെ മാത്രം */
        border-radius: 15px 15px 0 0 !important; /* മുകൾ ഭാഗം വളഞ്ഞിരിക്കാൻ */
        box-shadow: 0 -5px 20px rgba(0,0,0,0.2) !important;
    }
    
    /* 8. അനാവശ്യ വരകൾ ഒഴിവാക്കാൻ */
    .header-divider {
        display: none !important;
    }
}
/* മൊബൈൽ ലേഔട്ട് ക്രമീകരണങ്ങൾ */
@media screen and (max-width: 768px) {
    
    /* 1. ഹെഡർ കണ്ടെയ്നർ (Flexbox ഉപയോഗിക്കുന്നു) */
    header .container {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 10px 15px !important;
        position: relative !important;
    }

    /* 2. ഡേറ്റ് (Date) - ഏറ്റവും മുകളിൽ ഇടതുവശത്ത് */
    .header-top {
        width: 100% !important;
        order: 1 !important; /* ഒന്നാമതായി വരാൻ */
        margin-bottom: 5px !important;
        padding-bottom: 5px !important;
        border-bottom: 1px solid #f0f0f0 !important; /* വേർതിരിക്കാൻ ഒരു നേർത്ത വര */
    }

    .date-login-wrapper {
        display: block !important;
    }

    .current-date {
        font-size: 10px !important;
        color: #666;
        text-align: left;
    }

    /* ലോഗിനും സോഷ്യൽ മീഡിയയും മൊബൈലിൽ ഹൈഡ് ചെയ്യുന്നു */
    .desktop-login-link, .desktop-socials {
        display: none !important;
    }

    /* 3. ലോഗോയും പേരും (ഇടതുവശത്ത്) */
    .logo-area {
        order: 2 !important; /* രണ്ടാമതായി വരാൻ */
        width: auto !important;
        display: flex !important;
        align-items: center !important; /* ലോഗോയും പേരും നേരെ വരാൻ */
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
    }

    /* ലോഗോ ചിത്രം */
    .site-logo, .logo-area img {
        width: 40px !important;
        max-width: 40px !important;
        margin: 0 10px 0 0 !important; /* പേരിൽ നിന്ന് അകലം */
        display: inline-block !important;
    }

    /* പേരും സ്ലോഗനും അടങ്ങിയ ഗ്രൂപ്പ് */
    .site-title-group {
        display: flex;
        flex-direction: column;
    }

    /* സൈറ്റ് പേര് */
    .site-title {
        font-size: 20px !important; /* മൊബൈലിൽ വലിപ്പം കുറച്ചു */
        line-height: 1 !important;
        margin: 0 !important;
    }

    /* സ്ലോഗൻ */
    .site-slogan {
        font-size: 8px !important;
        margin: 2px 0 0 0 !important;
        letter-spacing: 0.5px !important;
        display: block !important;
        text-align: left !important;
    }

    /* 4. ഹാംബർഗർ മെനു (വലതുവശത്ത്) */
    .mobile-menu-toggle {
        order: 3 !important; /* മൂന്നാമതായി വരാൻ */
        display: block !important;
        font-size: 24px !important;
        position: static !important; /* ഫ്ലെക്സിൽ ഒതുങ്ങി നിൽക്കാൻ */
        margin-left: auto !important; /* ബാക്കി സ്ഥലം മുഴുവൻ എടുത്ത് വലത്തോട്ട് നീങ്ങാൻ */
        color: #000;
    }

    /* 5. മെനു തുറന്നുവരുമ്പോൾ */
    .main-navigation {
        top: 0 !important;
        padding-top: 60px !important;
        z-index: 9999 !important;
    }
}
/* --- GLOBAL BASIC STYLES --- */
body { margin: 0; font-family: 'Georgia', serif; }
.container { width: 95%; max-width: 1200px; margin: 0 auto; position: relative; }

/* Hide Helpers */
.mobile-only, .mobile-only-flex, .mobile-date-bar { display: none !important; }

/* --- DESKTOP STYLES (പഴയ ക്ലാസ്സിക് ലുക്ക്) --- */
header { background: #fff; padding-top: 5px; position: relative; z-index: 1000; }
.header-top { display: flex; justify-content: space-between; padding-bottom: 5px; }
.desktop-socials { display: flex; gap: 15px; }
.fb-color { color: #1877F2; } .insta-color { color: #E1306C; }

/* Desktop Logo Center */
.logo-area { text-align: center; width: 100%; }
.logo-link { text-decoration: none; color: #000; display: block; }
.site-logo { width: 60px; margin: 0 auto; display: block; }
.desktop-branding .site-title { font-family: 'SoccerLeague', sans-serif; font-size: 70px; margin: 0; line-height: 0.9; color: #000; }
.desktop-branding .site-slogan { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; margin: 5px 0 10px 0; font-weight: bold; color: #333; }

/* Desktop Menu */
.main-navigation ul { display: flex; justify-content: center; list-style: none; padding: 0; }
.main-navigation li { margin: 0 15px; }
.main-navigation a { text-decoration: none; color: #000; font-weight: bold; font-size: 14px; text-transform: uppercase; }
.header-divider { border-top: 3px double #000; border-bottom: 1px solid #eee; height: 4px; margin-top: 10px; margin-bottom: 20px; }


/* --- MOBILE STYLES (App Like Bottom Bar) --- */
@media screen and (max-width: 768px) {
    
    /* 1. Body Padding (താഴെ ഹെഡർ വരുന്നത് കൊണ്ട് കണ്ടന്റ് മറയാതിരിക്കാൻ) */
    body {
        padding-bottom: 70px !important; 
        padding-top: 0 !important;
    }

    /* 2. Hide Desktop Items */
    .desktop-only { display: none !important; }
    .mobile-only { display: block !important; }
    .mobile-only-flex { display: flex !important; }

    /* 3. DATE BAR (At the TOP of the screen) */
    .mobile-date-bar {
        background: #f4f4f4;
        border-bottom: 1px solid #ddd;
        padding: 8px 0;
        text-align: left;
        display: block !important;
        margin-bottom: 10px;
    }
    .date-text {
        font-size: 11px;
        font-weight: bold;
        color: #333;
        text-transform: uppercase;
        padding-left: 15px;
    }

    /* 4. HEADER (FIXED AT BOTTOM) */
    header {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        background: #fff !important;
        border-top: 1px solid #ccc !important; /* മുകളിൽ ബോർഡർ */
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1) !important;
        padding: 5px 0 !important;
        height: auto !important;
        z-index: 9999 !important;
    }

    /* Flex Layout for Bottom Bar */
    .main-header-row {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        padding: 0 10px;
    }

    /* 5. Left Side: Logo + Name + Slogan */
    .logo-area {
        width: auto !important;
        text-align: left !important;
        margin: 0 !important;
        flex-grow: 1; /* ബാക്കി സ്ഥലം എടുക്കാൻ */
    }
    
    .logo-link {
        display: flex !important;
        align-items: center;
    }
    
    .site-logo {
        width: 35px !important; /* ലോഗോ ചെറുത് */
        margin: 0 10px 0 0 !important;
    }

    .site-branding-text {
        display: flex;
        flex-direction: column;
    }

    .site-title {
        font-family: 'SoccerLeague', sans-serif;
        font-size: 18px !important; /* പേര് അത്യാവശ്യം കാണാൻ */
        margin: 0;
        line-height: 1;
        color: #000;
    }

    .site-slogan {
        font-size: 8px !important; /* സ്ലോഗൻ വളരെ ചെറുത് */
        color: #666;
        margin: 0;
        letter-spacing: 0.5px;
        display: block;
    }

    /* 6. Right Side: Hamburger Menu */
    .mobile-menu-toggle {
        font-size: 24px !important;
        padding: 10px;
        color: #000;
        cursor: pointer;
    }

    /* 7. Menu Slide Up/Side Style */
    .main-navigation { display: none; }
    
    .main-navigation.active {
        display: block;
        position: fixed;
        bottom: 60px; /* ഹെഡറിന് തൊട്ടു മുകളിൽ */
        right: 0; /* വലതുവശത്ത് */
        width: 250px;
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 10px 10px 0 0;
        box-shadow: 0 -5px 20px rgba(0,0,0,0.2);
        padding: 20px;
        max-height: 70vh;
        overflow-y: auto;
        z-index: 9998;
    }
    
    .main-navigation ul { flex-direction: column; }
    .main-navigation li { margin: 10px 0; border-bottom: 1px solid #eee; }
    
    .mobile-menu-extras { display: block !important; margin-top: 20px; }
    .mobile-socials { display: flex; gap: 15px; margin-top: 10px; font-size: 20px; }
    .mobile-close-btn { position: absolute; top: 10px; right: 10px; font-size: 20px; }
}
/* --- GLOBAL BASICS --- */
body { margin: 0; font-family: 'Georgia', serif; }
.container { width: 95%; max-width: 1200px; margin: 0 auto; position: relative; }

/* ഡെസ്ക്ടോപ്പിൽ മൊബൈൽ സാധനങ്ങൾ ഹൈഡ് ചെയ്യുന്നു */
.mobile-only, .mobile-app-text, .mobile-date-bar { display: none !important; }

/* --- DESKTOP STYLES (പഴയ ക്ലാസ്സിക് ലുക്ക്) --- */
header { background: #fff; padding-top: 5px; position: relative; z-index: 1000; }
.header-top { display: flex; justify-content: space-between; }
.logo-area { text-align: center; width: 100%; }
.site-logo { width: 60px; margin: 0 auto; display: block; }

/* ഡെസ്ക്ടോപ്പ് ടെക്സ്റ്റ് സ്റ്റൈൽ */
.desktop-text .site-title { font-family: 'SoccerLeague', sans-serif; font-size: 70px; margin: 0; line-height: 0.9; color: #000; }
.desktop-text .site-slogan { font-size: 12px; margin: 5px 0; color: #333; font-weight: bold; text-transform: uppercase; }

/* ഡെസ്ക്ടോപ്പ് മെനു */
.main-navigation ul { display: flex; justify-content: center; list-style: none; padding: 0; }
.header-divider { border-top: 3px double #000; margin-top: 10px; }


/* --- MOBILE STYLES (താഴെ ഫിക്സഡ് ഹെഡർ) --- */
@media screen and (max-width: 768px) {
    
    /* 1. ഡെസ്ക്ടോപ്പ് സാധനങ്ങൾ ഹൈഡ് ചെയ്യുന്നു */
    .desktop-only { display: none !important; }
    
    /* 2. മൊബൈൽ സാധനങ്ങൾ ഷോ ചെയ്യുന്നു */
    .mobile-only { display: block !important; }
    .mobile-app-text { display: flex !important; flex-direction: column; justify-content: center; }

    /* 3. ബോഡി പാഡിംഗ് (താഴെ ഹെഡർ വരുന്നത് കൊണ്ട്) */
    body { padding-bottom: 70px !important; padding-top: 0 !important; }

    /* 4. ഡേറ്റ് ബാർ (ഏറ്റവും മുകളിൽ) */
    .mobile-date-bar {
        background: #f4f4f4; border-bottom: 1px solid #ddd;
        padding: 8px 0; display: block !important;
        text-align: left; margin-bottom: 10px;
    }
    .date-text { font-size: 11px; font-weight: bold; padding-left: 15px; color: #333; }

    /* 5. ഹെഡർ (ഏറ്റവും താഴെ ഫിക്സഡ്) */
    header {
        position: fixed !important; bottom: 0 !important; left: 0 !important;
        width: 100% !important; background: #fff !important;
        border-top: 1px solid #ccc !important;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1) !important;
        padding: 0 !important; height: 60px !important;
        display: flex !important; align-items: center !important;
    }

    .header-inner {
        width: 100% !important; padding: 0 15px !important; margin: 0 !important;
    }

    /* 6. ലേഔട്ട് (ഇടത്ത് ലോഗോ+പേര്, വലത്ത് മെനു) */
    .main-header-row {
        display: flex !important;
        justify-content: space-between !important; /* ഇതാണ് മെനുവിനെ അറ്റത്തേക്ക് തള്ളുന്നത് */
        align-items: center !important;
        width: 100% !important;
    }

    /* 7. ലോഗോ ഏരിയ (ഇടതുവശത്ത്) */
    .logo-area {
        width: auto !important; text-align: left !important; margin: 0 !important;
        flex-grow: 1;
    }
    .logo-link {
        display: flex !important; align-items: center !important; text-decoration: none;
    }
    .site-logo {
        width: 35px !important; height: auto !important;
        margin: 0 10px 0 0 !important; /* ലോഗോയും പേരും തമ്മിലുള്ള അകലം */
    }

    /* 8. മൊബൈൽ പേരും സ്ലോഗനും (നിർബന്ധമായും കാണാൻ) */
    .mobile-app-text .site-title {
        font-family: 'SoccerLeague', sans-serif !important;
        font-size: 18px !important; /* വ്യക്തമായി കാണാൻ */
        color: #000 !important;
        margin: 0 !important;
        line-height: 1.1 !important;
        font-weight: bold !important;
    }

    .mobile-app-text .site-slogan {
        font-family: 'Georgia', serif;
        font-size: 9px !important;
        color: #666 !important;
        margin: 0 !important;
        display: block !important;
    }

    /* 9. ഹാംബർഗർ മെനു (ഏറ്റവും വലതുവശത്ത്) */
    .mobile-menu-toggle {
        font-size: 24px !important;
        color: #000 !important;
        margin-left: auto !important; /* വലത്തോട്ട് നീങ്ങാൻ */
        padding: 10px;
        cursor: pointer;
    }
    
    /* 10. മെനു പോപ്പപ്പ് */
    .main-navigation { display: none; }
    .main-navigation.active {
        display: block; position: fixed; bottom: 60px; right: 0;
        width: 250px; background: #fff; padding: 20px;
        border: 1px solid #ddd; box-shadow: 0 -5px 10px rgba(0,0,0,0.1);
        z-index: 9999;
    }
    .main-navigation ul { flex-direction: column; }
    .main-navigation li { margin: 10px 0; border-bottom: 1px solid #eee; }
    .mobile-menu-extras { display: block !important; margin-top: 10px; }
}
/* --- GLOBAL BASICS --- */
body { margin: 0; font-family: 'Georgia', serif; }
.container { width: 95%; max-width: 1200px; margin: 0 auto; position: relative; }

/* Hide Mobile Elements on Desktop */
.mobile-view-only, .mobile-date-bar, .mobile-navigation-menu { display: none !important; }


/* ========================================
   1. DESKTOP STYLES (Classic)
   ========================================
*/
header { padding-top: 5px; background: #fff; position: relative; z-index: 1000; }
.header-top { display: flex; justify-content: space-between; padding-bottom: 5px; }

/* --- LOGIN ICON FIX (ഇവിടെയാണ് ലോഗിൻ ഭംഗി കൂട്ടിയത്) --- */
.desktop-login-link {
    display: flex; align-items: center;
    text-decoration: none; color: #333;
    font-size: 12px; font-weight: bold; text-transform: uppercase;
    transition: color 0.3s;
}
.desktop-login-link i { margin-right: 5px; font-size: 16px; color: #555; }
.desktop-login-link:hover { color: #000; }

/* Socials */
.desktop-socials { display: flex; gap: 15px; }
.fb-color { color: #1877F2; } .x-color { color: #000; } .insta-color { color: #E1306C; }

/* Logo & Text */
.logo-area-desktop { text-align: center; margin-top: 10px; }
.site-logo { width: 60px; margin: 0 auto; display: block; }
.site-title-desktop { font-family: 'SoccerLeague', sans-serif; font-size: 70px; margin: 0; line-height: 0.9; color: #000; }
.site-slogan-desktop { font-size: 12px; margin: 5px 0 10px 0; color: #333; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; }

/* Menu */
.desktop-navigation ul { display: flex; justify-content: center; list-style: none; padding: 0; margin: 0; }
.desktop-navigation li { margin: 0 15px; }
.desktop-navigation a { text-decoration: none; color: #000; font-weight: bold; font-size: 14px; text-transform: uppercase; }
.header-divider { border-top: 3px double #000; border-bottom: 1px solid #eee; height: 4px; margin-top: 10px; margin-bottom: 20px; }


/* ========================================
   2. MOBILE STYLES (App Style)
   ========================================
*/
@media screen and (max-width: 768px) {
    
    .desktop-view-only { display: none !important; }
    .mobile-view-only { display: block !important; }
    
    body { padding-bottom: 70px !important; padding-top: 0 !important; }

    /* A. DATE BAR (TOP) */
    .mobile-date-bar {
        display: block !important; background: #f4f4f4; border-bottom: 1px solid #ddd;
        padding: 8px 0; text-align: left; margin-bottom: 10px;
    }
    .date-text { font-size: 11px; font-weight: bold; padding-left: 15px; color: #333; }

    /* B. HEADER (FIXED BOTTOM) */
    header {
        position: fixed !important; bottom: 0 !important; left: 0 !important;
        width: 100% !important; height: 60px !important;
        background: #fff !important; border-top: 1px solid #ccc;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1); padding: 0 !important;
        display: flex !important; align-items: center !important;
    }
    .container { width: 100% !important; padding: 0 15px !important; }

    /* C. MOBILE LAYOUT (Space Between) */
    .mobile-header-row {
        display: flex !important;
        justify-content: space-between !important; /* ലോഗോ ഇടത്ത്, മെനു വലത്ത് */
        align-items: center !important; width: 100%;
    }

    /* Left: Logo + Text */
    .mobile-branding { flex-grow: 1; }
    .mobile-logo-link { display: flex; align-items: center; text-decoration: none; }
    .mobile-logo-img { width: 35px !important; height: auto; margin-right: 10px; }
    .mobile-text { display: flex; flex-direction: column; justify-content: center; }

    /* Font Fix */
    .mobile-site-title {
        font-family: 'SoccerLeague', sans-serif !important;
        font-size: 20px !important; color: #000 !important;
        margin: 0 !important; line-height: 1 !important; font-weight: normal !important;
        display: block !important;
    }
    .mobile-site-slogan {
        font-family: 'Georgia', serif; font-size: 9px !important;
        color: #666; margin: 0 !important; display: block !important;
    }

    /* Right: Hamburger Menu */
    /* മൊബൈലിൽ മെനു ബട്ടൺ ഏറ്റവും വലതുവശത്ത് വരാൻ */
@media screen and (max-width: 768px) {
    .header-container {
        padding-right: 0 !important;
    }
    
    .mobile-header-row {
        justify-content: space-between !important;
        width: 100% !important;
    }

    .mobile-menu-btn {
        margin-left: auto !important;
        padding-right: 15px !important; /* സ്ക്രീനിന്റെ അറ്റത്ത് നിന്ന് ചെറിയൊരു വിടവ് */
        padding-left: 20px !important;
        display: flex !important;
        justify-content: flex-end !important;
        min-width: 50px;
    }


    /* D. MENU SLIDE OUT (പഴയ ഭംഗിയുള്ള സൈഡ് മെനു) */
    .mobile-navigation-menu {
        display: block !important;
        position: fixed;
        top: 0; 
        right: -100%; /* സ്ക്രീനിന് പുറത്ത് നിൽക്കും */
        width: 280px; /* വീതി */
        height: 100vh; /* ഫുൾ നീളം */
        background: #fff;
        z-index: 9999;
        box-shadow: -2px 0 10px rgba(0,0,0,0.2);
        transition: right 0.3s ease; /* സ്ലൈഡ് എഫക്റ്റ് */
        padding-top: 50px;
    }

    /* മെനു തുറക്കുമ്പോൾ */
    .mobile-navigation-menu.active {
        right: 0; /* ഉള്ളിലേക്ക് വരും */
    }

    .mobile-navigation-menu ul { list-style: none; padding: 0; margin: 0; }
    .mobile-navigation-menu li { margin: 0; border-bottom: 1px solid #f0f0f0; }
    .mobile-navigation-menu a { display: block; padding: 15px 20px; text-decoration: none; color: #000; font-weight: bold; text-transform: uppercase; }
    
    .mobile-close-btn { position: absolute; top: 15px; right: 20px; font-size: 24px; cursor: pointer; color: #000; }
    
    /* Login in Menu */
    .mobile-extras { margin-top: 20px; padding: 0 20px; }
    .mobile-login-btn { 
        display: inline-block; padding: 10px 20px; 
        border: 1px solid #000; text-decoration: none; 
        color: #000; font-weight: bold; text-transform: uppercase; 
    }
}
/* --- GLOBAL BASICS --- */
body { margin: 0; font-family: 'Georgia', serif; }
.container { width: 95%; max-width: 1200px; margin: 0 auto; position: relative; }

/* Hide Mobile Elements on Desktop */
.mobile-view-only, .mobile-date-bar, .mobile-navigation-menu { display: none !important; }

/* ========================================
   1. DESKTOP STYLES
   ========================================
*/
header { padding-top: 5px; background: #fff; position: relative; z-index: 1000; }
.header-top { display: flex; justify-content: space-between; padding-bottom: 5px; }
.desktop-login-link { display: flex; align-items: center; text-decoration: none; color: #333; font-size: 12px; font-weight: bold; text-transform: uppercase; transition: color 0.3s; }
.desktop-login-link i { margin-right: 5px; font-size: 16px; color: #555; }
.desktop-login-link:hover { color: #000; }
.desktop-socials { display: flex; gap: 15px; }
.fb-color { color: #1877F2; } .x-color { color: #000; } .insta-color { color: #E1306C; }
.logo-area-desktop { text-align: center; margin-top: 10px; }
.site-logo { width: 60px; margin: 0 auto; display: block; }
.site-title-desktop { font-family: 'SoccerLeague', sans-serif; font-size: 70px; margin: 0; line-height: 0.9; color: #000; }
.site-slogan-desktop { font-size: 12px; margin: 5px 0 10px 0; color: #333; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; }
.desktop-navigation ul { display: flex; justify-content: center; list-style: none; padding: 0; margin: 0; }
.desktop-navigation li { margin: 0 15px; }
.desktop-navigation a { text-decoration: none; color: #000; font-weight: bold; font-size: 14px; text-transform: uppercase; }
.header-divider { border-top: 3px double #000; border-bottom: 1px solid #eee; height: 4px; margin-top: 10px; margin-bottom: 20px; }


/* ========================================
   2. MOBILE STYLES (Force Updates)
   ========================================
*/
@media screen and (max-width: 768px) {
    
    .desktop-view-only { display: none !important; }
    .mobile-view-only { display: block !important; }
    
    body { padding-top: 40px !important; padding-bottom: 70px !important; }

    /* A. DATE BAR */
    .mobile-date-bar {
        display: block !important; position: fixed !important; top: 0 !important; left: 0 !important;
        width: 100% !important; background: #f4f4f4; border-bottom: 1px solid #ddd;
        padding: 8px 0; text-align: left; z-index: 998;
    }
    .date-text { font-size: 11px; font-weight: bold; padding-left: 15px; color: #333; }

    /* B. HEADER (FIXED BOTTOM) */
    header {
        position: fixed !important; bottom: 0 !important; left: 0 !important;
        width: 100% !important; height: 60px !important;
        background: #fff !important; border-top: 1px solid #ccc;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1); padding: 0 !important;
        display: flex !important; align-items: center !important;
        z-index: 1000;
    }
    
    /* ഈ കണ്ടെയ്നർ ആണ് ബട്ടണിനെ അറ്റത്തേക്ക് വിടാൻ സഹായിക്കുന്നത് */
    .header-container { 
        width: 100% !important; 
        padding: 0 5px 0 15px !important; /* വലതുവശത്തെ പാഡിംഗ് കുറച്ചു (5px) */
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    .mobile-header-row {
        display: flex !important; justify-content: space-between !important;
        align-items: center !important; width: 100% !important;
    }
    .mobile-branding { flex-grow: 1; }
    .mobile-logo-link { display: flex; align-items: center; text-decoration: none; }
    .mobile-logo-img { width: 35px !important; height: auto; margin-right: 10px; }
    .mobile-text { display: flex; flex-direction: column; justify-content: center; }
    
    .mobile-site-title {
        font-family: 'SoccerLeague', sans-serif !important;
        font-size: 20px !important; color: #000 !important;
        margin: 0 !important; line-height: 1 !important; display: block !important;
    }
    .mobile-site-slogan {
        font-family: 'Georgia', serif; font-size: 9px !important;
        color: #666; margin: 0 !important; display: block !important;
    }

    /* MENU BUTTON - EXTREME RIGHT FIX */
    .mobile-menu-btn { 
        font-size: 26px; 
        color: #000; cursor: pointer; 
        /* വലതുവശത്തെ ഗ്യാപ്പ് കുറയ്ക്കുന്നു */
        padding: 15px 10px 15px 15px !important; 
        margin-left: auto !important; /* നിർബന്ധമായും വലത്തേക്ക് നീങ്ങാൻ */
    }

    /* D. MENU POSITION (ABOVE THE BAR) */
    .mobile-navigation-menu {
        display: block !important;
        position: fixed;
        top: 35px;
        bottom: 60px !important; /* ഹെഡറിന്റെ മുകളിൽ നിൽക്കാൻ */
        right: -100%;        
        width: 280px; 
        background: #fff;
        z-index: 999;        
        box-shadow: -2px 0 10px rgba(0,0,0,0.2);
        transition: right 0.3s ease;
        padding-top: 10px;
        overflow-y: auto;
    }

    .mobile-navigation-menu.active { right: 0; }

    /* Styles inside Menu */
    .mobile-navigation-menu ul { list-style: none; padding: 0; margin: 0; }
    .mobile-navigation-menu li { margin: 0; border-bottom: 1px solid #f0f0f0; }
    .mobile-navigation-menu a { display: block; padding: 15px 20px; text-decoration: none; color: #000; font-weight: bold; text-transform: uppercase; }
    
    .mobile-extras { margin-top: 20px; padding: 0 20px; border-top: 1px solid #eee; padding-top: 20px; }
    .mobile-login-btn { display: inline-block; padding: 10px 20px; border: 1px solid #000; text-decoration: none; color: #000; font-weight: bold; text-transform: uppercase; margin-bottom: 20px; }
    .mobile-social-icons { display: flex; gap: 20px; font-size: 24px; }
    .mobile-social-icons a { padding: 0; border: none; }
    
    /* ഉള്ളിലെ ക്ലോസ് ബട്ടൺ ഹൈഡ് ചെയ്യുന്നു */
    .mobile-close-btn { display: none !important; }
}
/* --- GLOBAL BASICS --- */
body { margin: 0; font-family: 'Georgia', serif; }
.container { width: 95%; max-width: 1200px; margin: 0 auto; position: relative; }
.mobile-view-only, .mobile-date-bar, .mobile-navigation-menu { display: none !important; }

/* ========================================
   1. DESKTOP STYLES (NO CHANGES)
   ======================================== */
header { padding-top: 5px; background: #fff; position: relative; z-index: 1000; }
.header-top { display: flex; justify-content: space-between; padding-bottom: 5px; }
.desktop-login-link { display: flex; align-items: center; text-decoration: none; color: #333; font-size: 12px; font-weight: bold; text-transform: uppercase; }
.desktop-login-link i { margin-right: 5px; font-size: 16px; color: #555; }
.desktop-socials { display: flex; gap: 15px; }
.fb-color { color: #1877F2; } .x-color { color: #000; } .insta-color { color: #E1306C; }
.logo-area-desktop { text-align: center; margin-top: 10px; }
.site-logo { width: 60px; margin: 0 auto; display: block; }
.site-title-desktop { font-family: 'SoccerLeague', sans-serif; font-size: 70px; margin: 0; line-height: 0.9; color: #000; }
.site-slogan-desktop { font-size: 12px; margin: 5px 0 10px 0; color: #333; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; }
.desktop-navigation ul { display: flex; justify-content: center; list-style: none; padding: 0; margin: 0; }
.desktop-navigation li { margin: 0 15px; }
.desktop-navigation a { text-decoration: none; color: #000; font-weight: bold; font-size: 14px; text-transform: uppercase; }
.header-divider { border-top: 3px double #000; border-bottom: 1px solid #eee; height: 4px; margin-top: 10px; margin-bottom: 20px; }


/* ========================================
   2. MOBILE STYLES (UPDATED)
   ======================================== */
@media screen and (max-width: 768px) {
    
    .desktop-view-only { display: none !important; }
    .mobile-view-only { display: block !important; }
    
    body { padding-top: 40px !important; padding-bottom: 70px !important; }

    /* DATE BAR (TOP) */
    .mobile-date-bar {
        display: block !important; position: fixed !important; top: 0 !important; left: 0 !important;
        width: 100% !important; background: #f4f4f4; border-bottom: 1px solid #ddd;
        padding: 8px 0; text-align: left; z-index: 998;
    }
    .date-text { font-size: 11px; font-weight: bold; padding-left: 15px; color: #333; }

    /* BOTTOM HEADER BAR */
    header {
        position: fixed !important; bottom: 0 !important; left: 0 !important;
        width: 100% !important; height: 60px !important;
        background: #fff !important; border-top: 1px solid #ccc;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1); padding: 0 !important;
        display: flex !important; align-items: center !important;
        z-index: 1001;
    }
    
    .header-container { 
        width: 100% !important; 
        padding: 0 5px 0 15px !important; /* വലതുവശത്തെ ഗ്യാപ്പ് പരമാവധി കുറച്ചു */
        display: flex !important;
        justify-content: space-between !important;
    }

    .mobile-header-row {
        display: flex !important; justify-content: space-between !important;
        align-items: center !important; width: 100% !important;
    }
    
    .mobile-branding { flex-grow: 1; }
    .mobile-logo-link { display: flex; align-items: center; text-decoration: none; }
    .mobile-logo-img { width: 35px !important; height: auto; margin-right: 10px; }
    
    .mobile-site-title {
        font-family: 'SoccerLeague', sans-serif !important;
        font-size: 18px !important; color: #000 !important;
        margin: 0 !important; line-height: 1 !important; display: block !important;
    }
    .mobile-site-slogan { font-size: 8px !important; color: #666; margin: 0 !important; display: block !important; }

    /* HAMBURGER BUTTON - MAXIMUM RIGHT */
    .mobile-menu-btn { 
        font-size: 26px; 
        color: #000; cursor: pointer; 
        padding: 10px 5px 10px 15px !important; /* വലതുവശം 5px മാത്രം */
        margin-left: auto !important;
    }

    /* MENU POSITION (ABOVE THE BOTTOM TAB) */
    .mobile-navigation-menu {
        display: block !important;
        position: fixed;
        top: 35px;
        bottom: 60px !important; /* ഹെഡറിന് കൃത്യം മുകളിൽ */
        right: -100%;        
        width: 280px; 
        background: #fff;
        z-index: 1000;        
        box-shadow: -2px 0 10px rgba(0,0,0,0.2);
        transition: right 0.3s ease;
        padding-top: 10px;
        overflow-y: auto;
    }

    .mobile-navigation-menu.active { right: 0; }

    .mobile-navigation-menu ul { list-style: none; padding: 0; margin: 0; }
    .mobile-navigation-menu li { margin: 0; border-bottom: 1px solid #f0f0f0; }
    .mobile-navigation-menu a { display: block; padding: 15px 20px; text-decoration: none; color: #000; font-weight: bold; text-transform: uppercase; }
    
    .mobile-extras { margin-top: 20px; padding: 0 20px; border-top: 1px solid #eee; padding-top: 20px; }
    .mobile-login-btn { display: inline-block; padding: 10px 20px; border: 1px solid #000; text-decoration: none; color: #000; font-weight: bold; text-transform: uppercase; margin-bottom: 20px; }
    .mobile-social-icons { display: flex; gap: 20px; font-size: 24px; }
@media screen and (max-width: 768px) {
    /* മൊബൈൽ ഹെഡർ വരി */
    .mobile-header-row {
        display: flex !important;
        width: 100% !important;
        justify-content: space-between !important; /* ഐറ്റങ്ങൾ അറ്റങ്ങളിലേക്ക് മാറ്റുന്നു */
        align-items: center !important;
        padding-right: 0 !important; /* വലതുവശത്തെ വിടവ് ഒഴിവാക്കി */
    }

    /* ലോഗോയും പേരും ഉള്ള ഭാഗം */
    .mobile-branding {
        flex: 1 !important; /* ബാക്കി സ്ഥലം മുഴുവൻ ലോഗോ ഏരിയ എടുക്കും */
        display: flex !important;
        align-items: center !important;
    }

    /* ഹാംബർഗർ ബട്ടൺ - എക്സ്ട്രീം റൈറ്റ് */
    .mobile-menu-btn {
        margin-left: auto !important; /* ഇതിനെ വലത്തേക്ക് തള്ളുന്നു */
        padding: 10px 15px !important; /* അറ്റത്ത് ഇരിക്കുമ്പോൾ തൊടാൻ എളുപ്പത്തിന് */
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        background: transparent !important;
        border: none !important;
        min-width: 50px !important;
    }

    /* ബട്ടണിലെ ഐക്കൺ */
    .mobile-menu-btn i {
        font-size: 26px !important;
        color: #000 !important;
    }
}
}
/* --- Desktop Default Settings --- */
.mobile-only { display: none; }
.desktop-only { display: block; }

/* --- Desktop Layout Styles (പഴയത് പോലെ തന്നെ) --- */
.logo-area-desktop { text-align: center; }
.site-title-desktop { font-family: 'SoccerLeague', sans-serif; font-size: 70px; margin: 0; line-height: 0.9; }
.desktop-navigation ul { display: flex; justify-content: center; list-style: none; padding: 0; }
.desktop-navigation li { margin: 0 15px; }
.header-divider { border-top: 3px double #000; margin: 15px 0; }

/* --- Mobile View Settings --- */
@media screen and (max-width: 768px) {
    .desktop-only { display: none !important; }
    .mobile-only { display: block !important; }

    body { padding-bottom: 70px !important; } /* കണ്ടന്റ് മറയാതിരിക്കാൻ */

    /* മുകളിലെ ഡേറ്റ് ബാർ */
    .mobile-top-date {
        background: #f8f8f8; padding: 8px 15px; font-size: 11px;
        font-weight: bold; border-bottom: 1px solid #ddd;
    }

    /* താഴത്തെ ഫിക്സഡ് ബാർ (Bottom Tab) */
    .mobile-bottom-bar {
        position: fixed !important; bottom: 0 !important; left: 0 !important;
        width: 100% !important; height: 65px !important; background: #fff !important;
        z-index: 2000 !important; border-top: 1px solid #ddd;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
        display: flex !important; align-items: center !important;
    }

    .mobile-nav-content {
        display: flex !important; justify-content: space-between !important;
        width: 100% !important; padding: 0 15px !important; align-items: center !important;
    }

    .mobile-logo-link { display: flex; align-items: center; text-decoration: none; color: #000; }
    .mobile-logo-link img { width: 35px; height: auto; margin-right: 10px; }
    
    .mobile-site-title { 
        font-family: 'SoccerLeague', sans-serif !important; 
        font-size: 18px !important; margin: 0 !important; line-height: 1; 
    }
    .mobile-site-slogan { font-size: 8px !important; margin: 0 !important; color: #666; }

    /* ഹാംബർഗർ ബട്ടൺ എക്സ്ട്രീം റൈറ്റിൽ */
    .mobile-toggle-btn { font-size: 26px !important; cursor: pointer; padding: 5px; }

    /* മെനു മുകളിലേക്ക് സ്ലൈഡ് ചെയ്യുന്നത് (Slide-up Menu) */
    .mobile-app-menu {
        position: fixed !important; bottom: -100% !important; left: 0 !important;
        width: 100% !important; background: #fff !important;
        z-index: 1999 !important; /* ടാബ് ബാറിന് തൊട്ടുതാഴെ */
        transition: bottom 0.4s ease !important;
        max-height: 70vh; overflow-y: auto;
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -5px 20px rgba(0,0,0,0.15);
    }

    /* മെനു തുറക്കുമ്പോൾ */
    .mobile-app-menu.open { bottom: 65px !important; }

    .mobile-app-menu ul { list-style: none; padding: 20px; margin: 0; }
    .mobile-app-menu li { padding: 12px 0; border-bottom: 1px solid #eee; }
    .mobile-app-menu a { text-decoration: none; color: #000; font-weight: bold; font-size: 15px; }

    .mobile-menu-footer { padding: 20px; background: #fafafa; }
    .mobile-login-link { display: block; margin-bottom: 15px; text-decoration: none; color: #000; font-weight: bold; }
    .mobile-social-icons { display: flex; gap: 20px; font-size: 20px; }
}
/* --- Desktop Helpers --- */
.desktop-only { display: block; }
.mobile-only { display: none; }

/* Social Colors (Fixed) */
.fb-color { color: #1877F2 !important; }
.x-color { color: #000000 !important; }
.insta-color { color: #E1306C !important; }

/* --- Mobile Styling --- */
@media screen and (max-width: 768px) {
    .desktop-only { display: none !important; }
    .mobile-only { display: block !important; }

    /* പ്രധാന മാറ്റം: ബോഡിക്ക് പാഡിംഗ് നൽകി ഡേറ്റ് ബാർ മറയാതിരിക്കാൻ */
    body { 
        padding-top: 40px !important; 
        padding-bottom: 70px !important; 
    }

    /* മുകളിലെ ഡേറ്റ് ബാർ ഉറപ്പിച്ചു നിർത്താൻ (Top Fixed) */
    .mobile-top-date-fixed {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        background: #f8f8f8 !important;
        padding: 8px 15px !important;
        font-size: 12px !important;
        font-weight: bold !important;
        border-bottom: 1px solid #ddd;
        z-index: 1500 !important;
    }

    /* താഴത്തെ ബാർ (Bottom Fixed) */
    .mobile-bottom-bar {
        position: fixed !important; bottom: 0 !important; left: 0 !important;
        width: 100% !important; height: 60px !important; background: #fff !important;
        z-index: 2000 !important; border-top: 1px solid #ddd;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
        display: flex !important; align-items: center !important;
    }

    .mobile-nav-content {
        display: flex !important; justify-content: space-between !important;
        width: 100% !important; padding: 0 10px 0 15px !important; align-items: center !important;
    }

    .mobile-logo-link img { width: 35px; height: auto; margin-right: 10px; }
    .mobile-site-title { font-family: 'SoccerLeague', sans-serif !important; font-size: 18px !important; margin: 0 !important; }
    .mobile-site-slogan { font-size: 8px !important; margin: 0 !important; color: #666; }

    /* ഹാംബർഗർ ബട്ടൺ അറ്റത്തേക്ക് */
    .mobile-toggle-btn { font-size: 24px !important; cursor: pointer; padding: 10px 5px; margin-left: auto; }

    /* സൈഡ് സ്ലൈഡ് മെനു */
    .mobile-side-menu {
        position: fixed !important; top: 0; right: -100% !important;
        width: 280px !important; height: calc(100% - 60px) !important;
        background: #fff !important; z-index: 1999 !important;
        transition: right 0.3s ease-in-out !important;
        box-shadow: -5px 0 15px rgba(0,0,0,0.1); overflow-y: auto; padding-top: 50px;
    }
    .mobile-side-menu.open { right: 0 !important; }

    /* മെനു ഐറ്റങ്ങൾ */
    .mobile-side-menu ul { list-style: none; padding: 0; margin: 0; }
    .mobile-side-menu li { border-bottom: 1px solid #f5f5f5; }
    .mobile-side-menu a { display: block; padding: 15px 25px; text-decoration: none; color: #000; font-weight: bold; }

    /* ഫൂട്ടർ സോഷ്യൽ കളർ ഐക്കണുകൾ */
    .mobile-menu-footer { padding: 30px 25px; background: #fafafa; }
    .mobile-social-icons { display: flex; gap: 25px; font-size: 22px; margin-top: 15px; }
}
/* --- Desktop Helpers --- */
.desktop-only { display: block; }
.mobile-only { display: none; }

/* Social Colors (Everywhere) */
.fb-color { color: #1877F2 !important; }
.x-color { color: #000000 !important; }
.insta-color { color: #E1306C !important; }

/* --- Mobile Styling --- */
@media screen and (max-width: 768px) {
    .desktop-only { display: none !important; }
    .mobile-only { display: block !important; }

    body { 
        padding-top: 40px !important; 
        padding-bottom: 70px !important; 
    }

    /* Top Date Bar */
    .mobile-top-date-fixed {
        position: fixed !important; top: 0 !important; left: 0 !important;
        width: 100% !important; background: #f8f8f8 !important;
        padding: 8px 15px !important; font-size: 12px !important;
        font-weight: bold !important; border-bottom: 1px solid #ddd;
        z-index: 1500 !important;
    }

    /* Bottom Fixed Bar */
    .mobile-bottom-bar {
        position: fixed !important; bottom: 0 !important; left: 0 !important;
        width: 100% !important; height: 60px !important; background: #fff !important;
        z-index: 2000 !important; border-top: 1px solid #ddd;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
        display: flex !important; align-items: center !important;
    }

    .mobile-nav-content {
        display: flex !important; justify-content: space-between !important;
        width: 100% !important; padding: 0 10px 0 15px !important; align-items: center !important;
    }

    .mobile-logo-link img { width: 35px; height: auto; margin-right: 10px; }
    .mobile-site-title { font-family: 'SoccerLeague', sans-serif !important; font-size: 18px !important; margin: 0 !important; }
    .mobile-site-slogan { font-size: 8px !important; margin: 0 !important; color: #666; }

    /* Hamburger Toggle Right */
    .mobile-toggle-btn { font-size: 24px !important; cursor: pointer; padding: 10px 5px; margin-left: auto; }

    /* SLIDE-UP MENU (New Style) */
    .mobile-app-menu {
        position: fixed !important;
        bottom: -100% !important; /* ഒളിച്ചു നിൽക്കുന്നു */
        left: 0 !important;
        width: 100% !important;
        background: #fff !important;
        z-index: 1999 !important; /* ടാബ് ബാറിന് തൊട്ടുതാഴെ */
        transition: bottom 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
        max-height: 75vh;
        overflow-y: auto;
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -5px 20px rgba(0,0,0,0.15);
    }

    /* ആക്ടീവ് ആകുമ്പോൾ മുകളിലേക്ക് വരുന്നു */
    .mobile-app-menu.open {
        bottom: 60px !important; /* ഹെഡറിന് കൃത്യം മുകളിൽ */
    }

    /* Menu Items Style */
    .mobile-app-menu ul { list-style: none; padding: 20px; margin: 0; }
    .mobile-app-menu li { padding: 15px 0; border-bottom: 1px solid #f0f0f0; }
    .mobile-app-menu a { text-decoration: none; color: #000; font-weight: bold; font-size: 16px; display: block; }

    /* Menu Footer (Login & Socials) */
    .mobile-menu-footer { padding: 25px; background: #fafafa; border-top: 1px solid #eee; }
    .mobile-login-link { display: block; margin-bottom: 20px; text-decoration: none; color: #000; font-weight: bold; }
    .mobile-social-icons { display: flex; gap: 30px; font-size: 24px; }
}
/* ഡെസ്‌ക്ടോപ്പിൽ മാത്രം പേരും സ്ലോഗനും തമ്മിലുള്ള അകലം കൂട്ടാൻ */
@media screen and (min-width: 769px) {
    .site-title-desktop {
        padding-bottom: 25px !important; /* ഇത് സ്ലോഗനെ താഴേക്ക് തള്ളും */
        display: block !important;
    }
}
/* മൊബൈലിൽ മാത്രം മാറ്റങ്ങൾ വരാതിരിക്കാൻ */
@media screen and (max-width: 768px) {
    
    /* ഹാംബർഗർ മെനു ബട്ടൺ ഒരേ സ്ഥാനത്ത് നിർത്താൻ */
    .mobile-toggle-btn {
        position: relative !important;
        right: 0 !important;
        top: 0 !important;
        display: flex !important;
        z-index: 1000 !important;
    }

    /* മുകളിലെ ഡേറ്റ് സെക്ഷൻ അനങ്ങാതെ നിൽക്കാൻ */
    .mobile-top-date-fixed {
        position: fixed !important;
        top: 0 !important;
        width: 100% !important;
        z-index: 999 !important;
        background: #f8f8f8 !important; /* നിങ്ങളുടെ സൈറ്റിലെ ഡേറ്റിന്റെ ബാക്ക്ഗ്രൗണ്ട് */
    }

    /* ബ്രാൻഡിംഗും മെനുവും തമ്മിലുള്ള വിടവ് കൃത്യമാക്കാൻ */
    .mobile-nav-content {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
    }
}
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
    <?php wp_head(); ?>
    <style>
        /* 1. മൊബൈലിൽ മാത്രം മാറ്റങ്ങൾ വരാൻ (768px-ന് താഴെ) */
        @media screen and (max-width: 768px) {
            .mobile-top-date-fixed {
                position: sticky !important;
                position: -webkit-sticky;
                top: 0 !important;
                z-index: 9999 !important;
                width: 100% !important;
                background-color: #ffffff !important;
                box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
                padding: 5px 0 !important;
            }
        }

        /* 2. ഡെസ്‌ക്‌ടോപ്പിൽ മാത്രം നിറം മാറ്റാൻ (769px-ന് മുകളിൽ) */
        @media screen and (min-width: 769px) {
            .site-title-desktop {
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                text-shadow: none !important;
                text-transform: none !important; 
                gap: 0 !important;
            }

            .xtreme-text {
                color: #001F61 !important;
                text-shadow: none !important;
            }

            .desportes-box {
                background-color: #ffffff !important;
                color: #cc0000 !important;
                padding: 0px 8px !important;
                margin-left: 0px !important;
                border-radius: 2px !important;
                text-shadow: none !important;
                display: inline-block !important;
            }