@font-face {
    font-family: "IRANSans";
    src: url("../Fonts/IRANSansWeb(FaNum).eot"); /* IE9 Compat Modes */
    src: url("../Fonts/IRANSansWeb(FaNum).eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../Fonts/IRANSansWeb(FaNum).ttf") format("truetype"), /* Safari, Android, iOS */
    url("../Fonts/IRANSansWeb(FaNum).woff") format("woff"), /* Modern Browsers */
    url("../Fonts/IRANSansWeb(FaNum).woff2") format("woff2"); /* Modern Browsers */
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "IRANSans_Light";
    src: url("../Fonts/IRANSansWeb(FaNum)_Light.eot"); /* IE9 Compat Modes */
    src: url("../Fonts/IRANSansWeb(FaNum)_Light.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../Fonts/IRANSansWeb(FaNum)_Light.ttf") format("truetype"), /* Safari, Android, iOS */
    url("../Fonts/IRANSansWeb(FaNum)_Light.woff") format("woff"), /* Modern Browsers */
    url("../Fonts/IRANSansWeb(FaNum)_Light.woff2") format("woff2"); /* Modern Browsers */
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "IRANSans_Medium";
    src: url("../Fonts/IRANSansWeb(FaNum)_Medium.eot"); /* IE9 Compat Modes */
    src: url("../Fonts/IRANSansWeb(FaNum)_Medium.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../Fonts/IRANSansWeb(FaNum)_Medium.ttf") format("truetype"), /* Safari, Android, iOS */
    url("../Fonts/IRANSansWeb(FaNum)_Medium.woff") format("woff"), /* Modern Browsers */
    url("../Fonts/IRANSansWeb(FaNum)_Medium.woff2") format("woff2"); /* Modern Browsers */
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "IRANSans_Bold";
    src: url("../Fonts/IRANSansWeb(FaNum)_Bold.eot"); /* IE9 Compat Modes */
    src: url("../Fonts/IRANSansWeb(FaNum)_Bold.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../Fonts/IRANSansWeb(FaNum)_Bold.ttf") format("truetype"), /* Safari, Android, iOS */
    url("../Fonts/IRANSansWeb(FaNum)_Bold.woff") format("woff"), /* Modern Browsers */
    url("../Fonts/IRANSansWeb(FaNum)_Bold.woff2") format("woff2"); /* Modern Browsers */
    font-weight: normal;
    font-style: normal;
}

.IRANSans {
    font-family: IRANSans !important;
}

.IRANSans_Light {
    font-family: IRANSans_Light !important;
}

.IRANSans_Medium {
    font-family: IRANSans_Medium !important;
}

.IRANSans_Bold {
    font-family: IRANSans_Bold !important;
}


body {
    font-size: 13px;
    font-family: IRANSans;
    text-align: right;
    color: #333;
    margin: 0;
    padding: 0;
    background-color: #f8fafd;
    /*background-color: #fff;*/
    overflow-x: hidden;
    line-height: 2;
}


@font-face {
    font-family: "IRANSans";
    src: url("../Fonts/IRANSansWeb(FaNum).eot"); /* IE9 Compat Modes */
    src: url("../Fonts/IRANSansWeb(FaNum).eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../Fonts/IRANSansWeb(FaNum).ttf") format("truetype"), /* Safari, Android, iOS */
    url("../Fonts/IRANSansWeb(FaNum).woff") format("woff"), /* Modern Browsers */
    url("../Fonts/IRANSansWeb(FaNum).woff2") format("woff2"); /* Modern Browsers */
    font-weight: normal;
    font-style: normal;
}

body, input, textarea, select, button, label {
    font-family: 'IRANSans', sans-serif !important;
    line-height: 1.8;
}
.uniform-input {
    width: 100%; /* ?? ???? ??? ??? */
    padding: 15px; /* ??????? ??? ???? ???? */
    font-size: 1rem; /* ?????? ??? ??????? */
    border: 1px solid #ccc;
    border-radius: 8px;
    box-sizing: border-box;
    font-family: 'IRANSans', sans-serif;
    margin-bottom: 15px; /* ????? ??? ?????? */
    min-height: 45px; /* ?????? ??????? */
    display: flex;
    flex-direction: column; /* ??????? ?? ???? ?? ????? */
    align-items: center; /* ??? ??? ???? ??????? */
}

textarea.uniform-input {
    min-height: 120px; /* ?????? ????? ???? ??? ??? ??? */
    resize: vertical; /* ??? ????? ????? ?????? ???? ?????? */
}

/* ???? ???? */
.main-header {
    width: 100%;
    background: #000;
    color: #ffd700;
    padding: 15px 20px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    position: sticky;
    top: 0;
    z-index: 1000;
}

    .main-header .container {
        max-width: 1200px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap; /* ???? ?????? */
    }

    .main-header .logo a {
        display: flex;
        align-items: center;
        color: #ffd700;
        font-size: 1.5rem;
        font-weight: bold;
        text-decoration: none;
        font-family: "IRANSans";
    }

    .main-header .logo img {
        height: 50px;
        margin-left: 10px;
    }

/* ???? ?????? */
.main-nav {
    position: relative;
}

    .main-nav ul {
        list-style: none;
        display: flex;
        flex-direction: row-reverse; /* ???????? */
        margin: 0;
        padding: 0;
        transition: all 0.3s ease;
    }

        .main-nav ul li {
            margin-left: 20px;
        }

            .main-nav ul li a {
                color: #ffd700;
                text-decoration: none;
                font-size: 1.1rem;
                padding: 5px 12px;
                border-radius: 5px;
                transition: 0.3s;
            }

                .main-nav ul li a:hover {
                    color: #000;
                    background-color: #ffd700;
                }

/* ???? ??????? */
.menu-toggle {
    display: none;
    font-size: 2rem;
    cursor: pointer;
    color: #ffd700;
}

/* ?????? */
@media (max-width: 991px) {
    .menu-toggle {
        display: block;
    }

    .main-nav {
        width: 100%;
        background: rgba(0,0,0,0.95);
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        overflow: hidden;
        max-height: 0;
        transition: max-height 0.3s ease-in-out;
        border-radius: 0 0 10px 10px;
    }

        .main-nav.active {
            max-height: 500px; /* ?????? ???? ????? */
        }

        .main-nav ul {
            flex-direction: column;
            text-align: center;
            margin: 10px 0;
        }

            .main-nav ul li {
                margin: 10px 0;
            }

                .main-nav ul li a {
                    font-size: 1.2rem;
                    display: block;
                }
}

/* ?????? ???? */
@media (max-width: 480px) {
    .main-header .logo a {
        font-size: 1.2rem;
    }

    .main-nav ul li a {
        font-size: 1rem;
    }
}


/* ??????? */
.slider {
    width: 100%; /* ????? ?? ??? ???? ????? */
    max-width: 1000px; /* ?????? ?????? */
    height: 300px; /* ?????? ?????? */
    overflow: hidden;
    margin: 20px auto;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    position: relative;


}

.slides {
    display: flex;
    height: 100%;
    transition: transform 0.6s ease-in-out;
}
/*
.slide {
    min-width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #ffd700 0%, #000 100%);
    border-radius: 12px;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.7); 
}
*/
.slide {
    min-width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f8f8f8 0%, #e0e0e0 100%);
    border-radius: 12px;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
    overflow: hidden;
    position: relative;
}



    .slide img {
        width: 100%;
        height: 100%;
        object-fit: contain; /* ????? ???? ?? ???? */
        display: block;
       object-position:center;
        border-radius: 12px;
    }

    .slide .slide-content {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 100%;
        background: rgba(0,0,0,0.5);
        color: white;
        padding: 15px;
        box-sizing: border-box;
        text-align: right;
        font-family: "IRANSans";
        border-radius: 0 0 12px 12px;
    }

        .slide .slide-content h3 {
            margin: 0 0 5px 0;
            font-size: 1.2rem;
        }

        .slide .slide-content p {
            margin: 0;
            font-size: 0.95rem;
        }

/* ?????? */
@media (max-width: 991px) {
    .slider {
        height: 200px;
    }

    .slide .slide-content h3 {
        font-size: 1rem;
    }

    .slide .slide-content p {
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .slider {
        height: 150px;
    }

    .slide .slide-content h3 {
        font-size: 0.9rem;
    }

    .slide .slide-content p {
        font-size: 0.8rem;
    }
}

/* ????? */
.video-section {
    max-width: 1000px;
    margin: 30px auto;
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

    .video-section h2 {
        margin-bottom: 15px;
        color: #004aad;
    }

#video-list div {
    margin-bottom: 20px;
}

/* ???? ??? */
.news-container {
    max-width: 1000px;
    margin: 30px auto;
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
    gap: 20px;
    padding: 0 20px;
}

.news-card {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: transform 0.3s;
}

    .news-card:hover {
        transform: translateY(-5px);
    }

    .news-card img {
        width: 100%;
        height: 180px;
        object-fit: cover;
    }

    .news-card .content {
        padding: 15px;
    }

    .news-card h3 {
        color: #004aad;
        margin-bottom: 10px;
    }

    .news-card p {
        color: #555;
        font-size: 0.95rem;
        line-height: 1.4;
    }

.layout {
    display: flex;
    width: 100%;
    max-width: 1400px;
    margin: 20px auto;
    padding: 0 20px;
    box-sizing: border-box;
    flex-direction: row-reverse; /* دسکتاپ */
    gap: 20px;
}

/* سایدبار */
.sidebar {
    width: 280px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    padding: 20px;
    height: fit-content;
    font-family: "IRANSans";
    position: sticky;
    top: 100px;
}

/* محتوای اصلی */
.main-content {
    flex: 1;
    box-sizing: border-box;
}

/* ===== موبایل ===== */
@media (max-width: 768px) {
    .layout {
        flex-direction: column; /* ستون‌ها زیر هم بروند */
    }

    .sidebar {
        width: 100%;
        position: static; /* sticky خاموش شود */
        top: auto;
        margin-left: 0;
        margin-bottom: 20px;
    }

    .main-content {
        width: 100%; /* تمام عرض */
    }
}

/* ??????? ??????? */
.sidebar .box {
    background: #ffffff;
    padding: 18px;
    border-radius: 15px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    margin-bottom: 20px;
    font-family: "IRANSans";
    text-align: center;     
}

    /* ???? */
    .sidebar .box h3 {
        margin-top: 0;
        font-size: 1.3rem;
        color: #000;
        border-bottom: 2px solid #ffd700;
        padding-bottom: 8px;
        margin-bottom: 15px;
    }

.upcoming-match {
    text-align: center !important;
}
    /* ?????? */
    .upcoming-match .teams {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 25px;
    }

/* ??? ????? ?????? */
.upcoming-match .teams img {
    width: 80px;      /* ?????? ?????? */
    height: 80px;
    object-fit: contain;
    border-radius: 10px; /* ??????? */
}

/* ???? ?????? ???? upcoming-match ??? ???? ??? */
.upcoming-match > img {
    width: 100%;      /* ???? ?? ??? ???? ???? ?? ?? ??? */
    height: auto;     /* ???? ????? ??? ??? */
    display: block;
    border-radius: 10px; /* ??????? */
    object-fit: cover;   /* ???? ??? ???? ??? */
}    .upcoming-match .team {
        text-align: center;
    }

        .upcoming-match .team img {
            width: 60px;
            height: 60px;
            margin: 0 auto;
            display: block; /* ???? ??? ???? ????? */
        }
    /* ????? ???? ??? ???? ???? */
    .upcoming-match .league-img {
        width: 100%; /* ?????? ???? */
        max-height: 300px; /* ?????? ?????? */
        object-fit: contain; /* ????? ???? ???? ??? ? ???? ???? */
        display: block;
        border-radius: 10px;
    }
    .league-wrapper {
    width: 100%;
    max-height: 300px;   /* ?????? ???? */
    overflow: hidden;    /* ??? ????? ?????? ??? ????? ??? */
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.league-wrapper img.league-img {
    width: 100%;        /* ?????? ???? */
    height: 100%;       /* ?? ???? ?????? wrapper */
    object-fit: contain; /* ????? ???? ???? ????? ???? ???? */
    display: block;
}

.vs {
    font-size: 1.6rem;
    font-weight: bold;
    color: #000;
}

/* ??????? ???? */
.match-info p {
    margin: 5px 0;
    font-size: 0.95rem;
}

/* ???? ??? */
.league-table table {
    width: 100%;
    border-collapse: collapse;
}

    .league-table table th,
    .league-table table td {
        padding: 8px;
        text-align: right;
        font-size: 0.95rem;
    }

    .league-table table tbody tr:nth-child(even) {
        background: #f7f7f7;
    }

    .league-table table th {
        background: #ffd700;
        color: #000;
    }

/* ????? ???????? */
.dynamic-news .news-card {
    display: flex;
    flex-direction: row-reverse; /* ??? ????? ??? ?? */
    align-items: flex-start;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.1);
    padding: 15px;
    margin-bottom: 20px;
    gap: 15px; /* ????? ??? ??? ? ??? */
}

    .dynamic-news .news-card img {
        width: 320px; /* ??? ???? ??? */
        height: auto;
        object-fit: cover;
        border-radius: 8px;
    }

    .dynamic-news .news-card .content {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        flex: 1; /* ?? ???? ???? ?????????? */
    }

        .dynamic-news .news-card .content h3 {
            margin: 0 0 8px 0;
            font-size: 1rem;
            color: #004aad;
        }

        .dynamic-news .news-card .content p {
            margin: 0;
            font-size: 0.9rem;
            color: #555;
            line-height: 1.4;
        }


.news-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.news-card {
    background: #f8fafd;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    transition: transform 0.3s;
}

    .news-card:hover {
        transform: translateY(-5px);
    }

    .dynamic-news .news-card img,
    .news-card img {
        width: 25%; /* پر کردن عرض کارت */
        height: 180px; /* ارتفاع ثابت */
        object-fit: contain; /* تصویر پر شود و برش بخورد */
        border-radius: 8px; /* گوشه‌های گرد */
    }

    .news-card .content {
        padding: 15px;
    }

    .news-card h3 {
        color: #004aad;
        margin-bottom: 10px;
        font-size: 1.2rem;
    }

    .news-card p {
        color: #555;
        font-size: 0.95rem;
        line-height: 1.4;
    }