:root {
    --color-main: #EFBF6B;
    --color-main-dark: #E3AD4F;
    --color-bg: #faf3e9;
    --color-red: #C40C0C;
    --color-blue: #0C6CAA;
    --color-green: #159660;
    --font-main: vazir;
    --border-radius: 15px;
    --border-color: #ddd;
}

@font-face {
    font-family: "vazir";
    font-style: normal;
    font-weight: normal;
    src: url("Vazir-Regular-FD.woff") format("woff");
}

.en
{
    font-family:Tahoma;
    direction:ltr;
}

*{
    box-sizing:border-box;
    
}

body {
    font-family:var(--font-main);
    direction:rtl;
    margin:0px;
    padding:0px;
}

img {
    max-width: 100%;
    border-radius: 4px;
}

video {
    border-radius: 4px;
    max-width: 100%;
}


.center,
._Center {
    text-align: center !important;
}

.left {
    text-align: left !important;
}

a{
    text-decoration:none;
    color:#1d1d1d;
}


a.white
{
    color:#fff;
}


    a.btn,
    a.btn-100 {
        display: inline-block;
        padding: 10px 20px;
        border-radius: var(--border-radius);
        background-color: var(--color-blue);
        color: #fff;
        margin: 5px 0px;
    }

    a.btn:hover,
    a.btn-100:hover {
        background-color: var(--color-red);
        color: #fff;
    }


    a.btn-100
    {
        width:100%;
    }

.justify {
    text-align: justify;
    line-height:175%;
}

hr{
    border-top-color:var(--color-green) !important;
    opacity:1 !important;
    width:80%;
    margin:1rem auto;
}



.img-1-1, .img-3-4, .img-4-3, .img-16-9 {
    width: 100%;
    padding-top: 100%;
    position: relative;
    overflow: hidden;
}

.img-3-4 {
    padding-top: 135% !important;
}

.img-4-3 {
    padding-top: 75% !important;
}

.img-16-9 {
    padding-top: 56.25% !important;
}



    .img-1-1 img,
    .img-3-4 img,
    .img-4-3 img,
    .img-16-9 img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }



    .img-1-1 .text,
    .img-3-4 .text,
    .img-4-3 .text,
    .img-16-9 .text {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        color: #fff;
        background: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 30%);
        display: flex;
        align-items: end;
        padding: 20px;
    }







    header {
        overflow: visible !important;
        transform: none !important;
        filter: none !important;
    }


.header-top
{
    text-align:left;
    font-size:0.75rem;
    padding:10px 0px;
    color:#999;
}

#spanTimer {
    display: inline-block;
    width: 42px;
    text-align:left;
}


.header-main{
    padding:10px 0px;
}

    .header-main .scope
    {
        display:flex;
        align-items:center;
        justify-content:space-between;
    }


    .header-main h1 {
        font-size: 1.25rem;
        line-height: 175%;
        margin-right: 20px;
        flex: 1; /* کل فضای باقی‌مانده رو پر می‌کنه */
        color:#1d1d1d;
    }


    .header-main .icon
    {
        width:40px;
        height:40px;
        display:inline-block;
        text-align:center;
        line-height:40px;
        border-radius:20px;
        color:#999;
        box-shadow:0px 0px 10px #ddd;
        margin-right:10px;

    }


 

.header-menu {
    background-color: var(--color-bg);
    padding: 10px 0px;
    margin-bottom:10px;
    position:sticky;
    top:0px;
    z-index:1000;
}


.header-menu a {
    display:inline-block;
    padding:0px 10px;
    color:#1d1d1d;
    text-decoration:none;
}

        .header-menu a:hover {
            color: #000;
        }

#navicon {
    display: none;
}

.mobile-menu-header {
    display:none;
}




        footer{
            margin-top:30px;
        }
.footer-level-one
{
            background-color:#f4f4f4;
            padding:40px 0px;
    
}

   


    .footer-level-one h1 {
        font-size:1.75rem;
    }

    .footer-level-one .text {
        margin-right:20px;
        text-align:justify;
        line-height:175%;
    }



    .footer-level-two  {
        background-color:var(--color-green);
        padding:15px 0px;
        text-align:center;
        color:#fff;
        font-size:0.8rem;
    }


.footer-link a
{
    margin:5px;
    padding:5px 10px;
    white-space:nowrap;
    background-color:#fff;
    display:inline-block;
    border-radius:6px;
}

.footer-social-link
{
    margin-top:30px;
    text-align:center;
}

.footer-social-link a {
    margin: 5px;
    padding: 0px;
    padding-left: 10px;
    white-space: nowrap;
    background-color: #fff;
    display: inline-block;
    border-radius: 20px;
    vertical-align: middle;
}

    .footer-social-link a .fa {
        background-color: var(--color-blue);
        color: #fff;
        width: 40px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        border-radius: 20px;
        vertical-align: middle;
    }



@media (max-width: 400px) {
    .header-main h1 {
        font-size: 1rem;
    }
}



@media (max-width: 576px) {
    .header-top {
        display: none;
    }

    #navicon {
        display: inline-block;
    }


    .header-main .scope {
        flex-flow: wrap;
    }


    .header-main .icon-box {
        width: calc(100% + 30px);
        text-align: center;
        background-color: #f4f4f4;
        padding: 5px 0px;
        margin: 0px -15px;
    }



    .header-main .icon {
        box-shadow: none;
        margin-right: 0px !important;
    }


    .header-menu {
        padding: 10px;
        margin-bottom: 0px;
        position: fixed;
        top: 0px;
        right: 0px;
        bottom: 0px;
        width: 70%;
        overflow: auto;
        transform: translateX(100%);
        transition-duration: 0.5s;
        z-index: 500;
    }




        .header-menu ul.nav li {
            display: inline-block !important;
            width: 100% !important;
            padding: 5px 0px;
        }

    .mobile-menu-bg {
        display: none;
        position: fixed;
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
        background-color: rgba(0,0,0,0.65);
        z-index: 495;
    }

    .mobile-menu-header {
        text-align: center;
        display: block;
    }

        .mobile-menu-header .mobile-logo {
            border-radius: 50px;
            width: 100px;
            box-shadow: 0px 0px 20px #ccc;
            margin-bottom: 10px;
        }


    .footer-level-one .scope {
        flex-direction:column;
    }
}



.member-menu
 {
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    padding: 10px;
    position:sticky;
    top:50px;
}
.member-main
{

}

.member-main h1{
    font-size:1.75rem;
    margin-bottom:30px;
}

.member-menu a {
    display: flex;
    width: 100%;
    font-weight: bold;
    color: #888;
    background-color: #f4f4f4;
    border-radius: 20px;
    margin-bottom: 10px;
    line-height: 40px;
}

        .member-menu a .fa {
            margin-left: 5px;
            min-width: 24px;
            text-align: center;
            border-radius: 20px;
            background-color:#888;
            width:40px;
            height:40px;
            color:#fff;
            line-height:40px;
            font-size:1.10rem;
        }

        .member-menu a:last-child {
            margin-bottom: 0px !important;
        }

    .member-menu a:hover {
        color: #000;
    }
        .member-menu a:hover .fa {
            background-color: #000;
        }



.marquee {
    line-height: 40px;
    margin-bottom: 10px;
    direction: ltr;
    width: 100%;
    overflow: hidden;
}

    .marquee .fa {
        color: var(--color-green);
        margin-left: 10px;
        margin-right: 10px;
    }

    .marquee a {
        color:var(--color-blue);
        line-height: 30px;
        border-radius: 4px;
        display: inline-block;
        padding: 0px 5px;
    }

        .marquee a:hover {
            color: #EA5455 !important;
        }


        .loading-all{
            background-color:rgba(0,0,0,0.5);
            position:fixed;
            top:0; left:0; right:0; bottom:0;
            z-index:2000;
            display:flex;
            align-items:center;
            justify-content:center;
        }
            .loading-all div {
                background-color: #fff;
                text-align: center;
                border-radius: var(--border-radius);
                padding: 30px;
                font-size: 1.25rem;
                font-weight: bold;
                display: flex;
                align-items: center;
            }


audio,
video {
    width: 100%;
    border-radius: var(--border-radius);
}



._Box, .box {
    margin-bottom: 10px;
    transform: translateY(-20px);
}

    ._Box .Caption, .box .caption {
        background-color: #fff;
        font-size: 1.25rem;
        text-shadow: 0px 0px 10px #999;
        color: #1d1d1d;
        padding: 0px 20px;
        display: inline-block;
        line-height:40px;
        transform: translate(-20px, 20px);
    }

._Box .Body, .box .body {
    padding:20px;
    padding-top:30px;
    margin-bottom: 10px;
    border-radius:var(--border-radius);
    border:1px solid var(--border-color);
}

    .box .list a {
        color:#444;
        display:inline-block;
        width:100%;
        margin-bottom:10px;
    }


        .box .list a:last-child {
            margin-bottom: 0px;
        }


    .box .list a .fa {
        color: var(--color-blue);
        margin:0px 5px;
        font-size:0.8rem;
    }

    .box .list a:hover {
        color: #000;
    }


._Box h2, .box h2 {
    font-size:1.15rem;
    font-weight:bold;
    margin:0px;
    padding:0px;
    display:inline-block;
    min-width:150px;
    text-align:left;
    margin-left:5px;
}



.Buy
{
    background-color:var(--color-main);
    display:inline-block;
    padding:20px;
    border-radius:var(--border-radius);
    text-align:center;
    transition-duration:0.2s;
}


.Buy:hover {
    background-color: var(--color-main-dark);
    transform:translateY(-2px);
    box-shadow:0px 0px 10px #aaa;
}


.PM_Stop
{
    background-color:#fec5c5;
    border-radius:var(--border-radius);
    border:1px solid #cc0000;
    padding:15px;
    color:#cc0000;

}


.news-item h2 {
    font-size: 1.25rem;
    line-height: 200%;
}

.news-item .date {
    font-size: 0.90rem;
    color:#999;
}





/* #region input */

input[type=text],
input[type=password],
textarea
{
    border-radius:var(--border-radius);
    border:1px solid var(--border-color);
    padding:5px 10px;
    outline:none;
    margin:5px 0px;
}


input[type=text]:focus,
input[type=password]:focus,
textarea:focus {
    border: 1px solid #444;
}


    textarea {
        width:100%;
    }


input[type=button],
input[type=submit],
a.btn {
    background-color: var(--color-green);
    color: #fff;
    border-radius: var(--border-radius);
    border: none;
    padding: 5px 25px;
}

    input[type=button]:hover,
    input[type=submit]:hover,
    a.btn:hover {
        background-color: var(--color-green);
        transform: translateY(-2px);
        box-shadow: 0px 0px 10px #aaa;
        transition-duration: 0.2s;
    }


    input[type=radio]
    {
        margin-left:5px;
    }

    label[for]
    {
        font-weight:bold;
        margin-left:10px;
    }

/* #endregion*/
/* #region uc */
.uc-course-show {
    background-color: #F9F6F2;
    padding: 20px;
    border-radius: var(--border-radius);
    color: #1d1d1d;
    margin-bottom: 20px;
}

.uc-course-show img {
    border-radius: var(--border-radius);
}

    .uc-course-show .price {
        border-radius: var(--border-radius);
        background-color:var(--color-main);
        font-size:1.25rem;
        padding:10px;
        margin-bottom:10px;
    }

    .uc-course-show h2 {
        font-size: 1.5rem;
    }

    .uc-course-show .text {
        padding:10px;
        line-height:200%;
    }

    .uc-course-show h3 {
        font-size: 1.35rem;
    }






/* #endregion*/
/* #region bootstrap */
.dropdown:hover > .dropdown-menu {
    display: block;
}

.dropdown-item
{
    padding:10px!important;
}
/* #endregion*/


.course-item,
.course-gallery-item {
    background-color: #F7F7F7;
    padding: 20px;
    border-radius: var(--border-radius);
}
    .course-item img,
    .course-gallery-item img {
        border-radius: var(--border-radius);
    }
        .course-gallery-item h2 {
            font-size: 1.5rem;
            font-weight: bold;
            margin: 10px 0px;
        }


    .course-item h3 {
        font-size: 1.3rem;
        font-weight: bold;
        margin: 10px 0px;
        height:80px;
        line-height:40px;
    }



.course-item
{
    margin-bottom:20px;
}


.course-price {
    text-align: left;
}


.course-price .orginal {
    color: #999;
    text-decoration: line-through;
    font-size: 1rem;
    line-height: 30px;
    height: 30px;
    display: inline-block;
}

.course-price .percent {
    background-color: var(--color-red);
    color: #fff;
    font-size: 1rem;
    display: inline-block;
    padding: 5px 10px;
    margin-right: 10px;
    border-radius: var(--border-radius);
}

.course-price .final {
    background-color: var(--color-green);
    margin-top:5px;
    color:#fff;
    text-align:center;
    padding:5px 10px;
    font-size: 1.3rem;
    border-radius:var(--border-radius);
}



.Paging
{
    direction:ltr;
    text-align:center;
}

.Paging a {
    display:inline-block;
    width:40px;
    height:40px;
    line-height:40px;
    background-color:#eee;
    margin:2px;
    border-radius:var(--border-radius);
}
    .Paging a.On {
        background-color: var(--color-green);
        color:#fff;
    }


    .service-top-item
    {

    }