/* theme autumn */
:root {
    --scrollbarBG: transparent;
    --thumbBG: #e4e4e4;
    --thumbBG-hover: #90a4ae;

    --bg-main: #fff;
    --bg-sidebar: linear-gradient(180deg, #F88B2C 0%, #FACB4D 100%);
    --color-main: #F88B2C;
    --color-main-50: rgba(248, 139, 44, 0.5);
    --color-main-two: #FACB4D;
    --color-main-two-50: rgba(250, 203, 77, 0.5);
    --color-main-two-80: rgba(250, 203, 77, 0.8);
    --color-grey: #f5f5f7;
    --color-grey-80: rgba(209, 209, 209, 0.8);
    --color-grey-50: rgba(5, 5, 7, 0.5);
    --color-soft-grey: rgb(134, 134, 134);
    --color-black: #202020;
    --color-black-50: rgba(0, 0, 0, 0.5);
    --color-white: #ffffff;
    --color-white-50: rgba(255, 255, 255, 0.5);

    --color-mobile-menu-logo: #6682a1;
    --color-mobile-menu-toggler-border: #6682a1;
    --color-mobile-menu-toggler-bg: #c1e0ff;
    --color-mobile-menu-icon: #ffffff;
    --color-mobile-menu-text: #ffffff;
    --color-mobile-menu-dropdown-bg: #fff;
    --color-widescreen-menu-dropdown-text: #6682a1;
    --color-mobile-top-border: #6682a1;

    --color-widescreen-menu-logo: #ffffff;
    --color-widescreen-menu-icon: #ffffff;
    --color-widescreen-menu-icon-80: rgba(255, 255, 255, 0.8);
    --color-widescreen-menu-dropdown-bg: #fff;
    --color-widescreen-menu-copyright: rgba(134, 134, 134, 1);
    --color-widescreen-menu-copyright-50: rgba(134, 134, 134, .5);

    --category-color-main: #fff;
    --category-color-black: rgb(44, 44, 44);

    --category-bg-main: #f5f5f7;
    --category-bg-games: #d65658;
    --category-bg-songs: #7d6da1;
    --category-bg-lets-learn: #F29F05;
    --category-bg-worksheets: #0f8aa6;
    --category-bg-interactives: #6ec64d;
    --category-bg-book-presentations: #69a1ec;
    --category-bg-materials: #d99b66;
    --category-bg-teaching-tips: #8c5946;
    --category-bg-crafts: #4ad9d9;
    --category-bg-flashcards: #f18e1c;

    --color-sidebar-border: #d9e7ff;
    --color-loading-bar: #6682a1;
}

/* button color */
.btn-bg-main {
    background: var(--color-main);
}

.btn-bg-orange {
    background: #ff6d00;
}

.btn-bg-soft-orange {
    background: #ef9021;
}

.btn-bg-blue {
    background: #F88B2C;
    transition: all 300ms;
}

.btn-bg-blue:hover {
    background: #FACB4D;
}

.btn-bg-soft-blue {
    background: #6aadca;
}

.btn-bg-green {
    background: #1bb08a;
}

.instagram-color-gradient-text {
    -webkit-text-fill-color: #2e4d6e !important;
}

.right--sidebar .box--ataturk .mka .mka-svg,
.right--sidebar .box--ataturk .mka svg {
    fill: #343a40 !important;
}

.right--sidebar .box--ataturk .text p {
    color: #343a40 !important;
}

body {
    background: url("../../images/background/autumn.png"), linear-gradient(to bottom, #ddeeff, #e7e7e7);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
    background-attachment: fixed;
}

@media (min-width: 992px) {
    body {
        background-position: 170px bottom;
    }
}

.page--title.title--color-main-50,
.home--content .select--your-selection .select--your-box-content .select--box a,
.right--sidebar .box--random-and-statistics .title {
    color: var(--color-main) !important;
}

.courses--list .courses--box .text .breadcrumbs-link a {
    opacity: .5;
    transition: 300ms all !important;
}

.courses--list .courses--box .text .breadcrumbs-link a:hover {
    opacity: 1;
}

.courses--list .courses--box .text .breadcrumbs-link a {
    color: #686868 !important;
}

.home--content .select--your-selection .select--your-box-content .select--box {
    background: #efefef !important;
    transition: 300ms all !important;
}

.right--sidebar .box--random-and-statistics .box--random .random-grade .random-grade-detail a.active,
.home--content .select--your-selection .select--your-box-content .select--box:hover {
    background: var(--color-main) !important;
}

.home--content .select--your-selection .select--your-box-content .select--box:hover a {
    color: #ffffff !important;
}

.category--content .category--box:hover {
    background: var(--color-main) !important;
    transition: all 300ms !important;
}

.category--content .category--box {
    background: var(--color-main-two) !important;
}

.category--content .category--box .category--total {
    color: var(--color-main-two) !important;
}

.theme-switch-wrapper-mobile label span {
    color: var(--color-main) !important;
}