body {
    direction: rtl;
    text-align: right;
}
/* =====================================================
   AFRINESH RAVABET
   Premium Dawn Theme
   ===================================================== */


/* ==========================================================
   AFRINESH RAVABET
   OFFICIAL BRAND THEME
   Sky • Sunrise • Nature • Luxury
   ========================================================== */

:root{

    /* Background */

    --bg-main:#FAF8F3;
    --bg-soft:#FDFCF8;

    /* Sky */

    --sky:#AFC7D6;
    --sky-light:#DDEAF1;
    --sky-dark:#7EA5B8;

    /* Logo Gold */

    --gold:#E2B45A;
    --gold-light:#EBCB84;
    --gold-dark:#D4A044;

    /* Nature */

    --nature:#BFCFB4;

    /* Text */

    --text:#3b535f;
    --text-dark:#433F39;

    /* Bootstrap */

    --bs-primary:#E2B45A;
    --bs-secondary:#AFC7D6;

}

/* ==========================================================
   BODY
   ========================================================== */

body{

    background:
            linear-gradient(
                    180deg,
                    #FFFFFF 0%,
                    #FAF8F3 50%,
                    #F4F2ED 100%
            );

    color:var(--text);

    font-family:"Vazirmatn",sans-serif;

    line-height:2;

    font-weight:300;

    overflow-x:hidden;
}

/* ==========================================================
   SUNRISE GLOW
   ========================================================== */

body::before{

    content:"";

    position:fixed;

    left:0;
    bottom:0;

    width:100%;
    height:100%;

    pointer-events:none;

    background:
            radial-gradient(
                    circle at bottom left,
                    rgba(226,180,90,.10),
                    transparent 35%
            );

    z-index:-1;
}

/* ==========================================================
   SIDEBAR
   ========================================================== */

#sideNav{

    background:
            linear-gradient(
                    180deg,
                    #EAF3F8 0%,
                    #D9E8F0 50%,
                    #AFC7D6 100%
            );

    box-shadow:
            -10px 0 35px rgba(0,0,0,.04);
}

/* ==========================================================
   PROFILE IMAGE
   ========================================================== */

.img-profile{

    border:6px solid var(--gold) !important;

    background:white;

    box-shadow:
            0 15px 40px rgba(226,180,90,.15);
}

/* ==========================================================
   MAIN TITLE
   ========================================================== */

h1{

    color:var(--sky-dark);

    font-weight:300;

    letter-spacing:6px;

    text-transform:none;
}
h2
{
    color:var(--sky-dark);
}
/* ==========================================================
   GOLD WORD
   ========================================================== */

.text-gold{

    color:var(--gold);
}

/* ==========================================================
   HEADINGS
   ========================================================== */

h2,
h3,
h4,
h5,
h6{
    font-weight:500;
}

/* ==========================================================
   SUBHEADING
   ========================================================== */

.subheading{

    color:#748188;

    letter-spacing:2px;

    font-weight:300;
}

/* ==========================================================
   PARAGRAPH
   ========================================================== */

p{

    color:var(--text);

    line-height:2;
}

/* ==========================================================
   LINKS
   ========================================================== */

a{

    color:var(--gold-dark);

    transition:.3s;
}

a:hover{

    color:var(--gold);

    text-decoration:none;
}

/* ==========================================================
   MENU
   ========================================================== */

#sideNav .navbar-nav .nav-item .nav-link{

    color:var(--text);

    font-weight:600;

    letter-spacing:2px;

    transition:.3s;
}

#sideNav .navbar-nav .nav-item .nav-link:hover{

    color:var(--gold);
}

#sideNav .navbar-nav .nav-item .nav-link.active{

    color:var(--gold);
}

/* ==========================================================
   SOCIAL ICONS
   ========================================================== */

.social-icons .social-icon{

    background:white;

    color:var(--gold);

    border:2px solid var(--gold);

    box-shadow:
            0 10px 25px rgba(0,0,0,.05);

    transition:.3s;
}

.social-icons .social-icon:hover{

    background:var(--gold);

    color:white;

    transform:translateY(-3px);
}

/* ==========================================================
   BUTTONS
   ========================================================== */

.btn-primary{

    background:var(--gold);

    border:none;

    color:white;
}

.btn-primary:hover{

    background:var(--gold-dark);
}

/* ==========================================================
   SECTION DIVIDER
   ========================================================== */

section{

    position:relative;
}

section::after{

    content:"";

    position:absolute;

    left:15%;
    right:15%;
    bottom:0;

    height:1px;

    background:
            linear-gradient(
                    90deg,
                    transparent,
                    rgba(226,180,90,.25),
                    transparent
            );
}

/* ==========================================================
   TEXT PRIMARY
   ========================================================== */

.text-primary{

    color:var(--gold) !important;
}

/* ==========================================================
   SELECTION
   ========================================================== */

::selection{

    background:var(--gold);

    color:white;
}

/* ==========================================================
   SCROLL
   ========================================================== */

html{

    scroll-behavior:smooth;
}



/* ==========================================
   COURSE CARD
========================================== */

.course-card{

    width: 98%;
    margin: auto;
    position:relative;

    background:#ffffff;

    border-radius:30px;

    padding:14px;

    overflow:hidden;

    border:1px solid rgba(230,223,214,.7);

    box-shadow:
        0 15px 40px rgba(163,155,145,.08),
        0 2px 8px rgba(255,255,255,.9) inset;

    transition:.35s ease;

}

/* Hover */

.course-card:hover{

    transform:translateY(-10px);

    box-shadow:
        0 30px 70px rgba(171,158,138,.18);

}

/* ==========================================
   IMAGE
========================================== */

.course-card .image{

    position:relative;

    overflow:hidden;

    border-radius:22px;

    height:220px;

    background:#EEF4F8;

}

.course-card img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.5s;

}

.course-card:hover img{

    transform:scale(1.06);

}

/* ==========================================
   BADGE
========================================== */

.course-card .badge{

    position:absolute;

    top:18px;

    right:18px;

    background:#ffffff;

    padding:8px 16px;

    border-radius:40px;

    font-size:13px;

    font-weight:600;

    color:#6B7A89;

    box-shadow:
        0 6px 18px rgba(0,0,0,.08);

}

/* ==========================================
   TITLE
========================================== */

.course-card h4{

    margin-top:25px;

    margin-bottom:10px;

    font-size:27px;

    font-weight:700;

    color:#505863;

}

/* ==========================================
   TEACHER
========================================== */

.course-card .teacher{

    font-size:15px;

    color:#9A9792;

    margin-bottom:25px;

}

/* ==========================================
   FOOTER
========================================== */

.course-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:15px;

}

/* ==========================================
   LEVEL
========================================== */

.level{

    background:#EEF6FD;

    color:#7EA4BB;

    padding:8px 18px;

    border-radius:25px;

    font-size:13px;

    font-weight:600;

}

/* ==========================================
   DATE
========================================== */

.date{

    display:flex;

    align-items:center;

    gap:8px;

    color:#999;

    font-size:14px;

}

/* ==========================================
   LIGHT EFFECT
========================================== */

.course-card::before{

    content:"";

    position:absolute;

    left:-30%;

    top:-40%;

    width:180px;

    height:280px;

    background:
        radial-gradient(circle,
        rgba(255,255,255,.75),
        transparent 70%);

    transform:rotate(35deg);

    pointer-events:none;

}

/* ==========================================
   INNER BORDER
========================================== */

.course-card::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:30px;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.8);

    pointer-events:none;

}

/* ==========================================
   BLUE CARD
========================================== */

.blue{

    background:
        linear-gradient(
            180deg,
            #FFFFFF 0%,
            #F8FBFD 100%
        );

}

/* ==========================================
   GOLD CARD
========================================== */

.gold{

    background:
        linear-gradient(
            180deg,
            #FFFDF9 0%,
            #FFF6E7 100%
        );

}

/* ==========================================
   SHADOW
========================================== */

.course-card{

    box-shadow:
        0 18px 45px rgba(0,0,0,.06);

}

/* ==========================================
   BORDER RADIUS
========================================== */

.course-card,
.course-card img,
.course-card .badge,
.level{

    border-radius:28px;

}