/**
* Template Name: Arsha
* Updated: Sep 18 2023 with Bootstrap v5.3.2
* Template URL: https://bootstrapmade.com/arsha-free-bootstrap-html-template-corporate/
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
    font-family: "Open Sans", sans-serif;
    color: #444444;
}

a {
    color: #0f404f;
    text-decoration: none;
}

    a:hover {
        color: #73c5eb;
        text-decoration: none;
    }

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: sans-serif;
}

section {
    display: block;
}

.btn {
    display: flex;
    align-items: baseline;
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    overflow: hidden;
    background: #0f404f;
}

    #preloader:before {
        content: "";
        position: fixed;
        top: calc(50% - 30px);
        left: calc(50% - 30px);
        border: 6px solid #0f404f;
        border-top-color: #fff;
        border-bottom-color: #fff;
        border-radius: 50%;
        width: 60px;
        height: 60px;
        animation: animate-preloader 1s linear infinite;
    }

@keyframes animate-preloader {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
    position: fixed;
    visibility: hidden;
    opacity: 0;
    right: 15px;
    bottom: 15px;
    z-index: 996;
    background: #0f404f;
    width: 40px;
    height: 40px;
    border-radius: 50px;
    transition: all 0.4s;
}

    .back-to-top i {
        font-size: 24px;
        color: #fff;
        line-height: 0;
    }

    .back-to-top:hover {
        background: #6bc1e9;
        color: #fff;
    }

    .back-to-top.active {
        visibility: visible;
        opacity: 1;
    }

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header {
    transition: all 0.5s;
    z-index: 997;
    padding: 15px 0;
}


    #header.header-inner-pages {
        background: rgba(255, 255, 255, 0.81);
    }


    #header.header-scrolled {
        background: rgb(15 64 79 / 91%);
    }

        #header.header-scrolled a, #header.header-scrolled .logo a {
            color: white;
        }

@media (max-width: 991px) {
    #header.header-scrolled a {
        color: #0f404f;
    }

    #header.header-scrolled .getstarted {
        color: #fff;
    }
}

#header.header-scrolled .getstarted:hover {
    color: #0f404f;
}

#header .logo {
    font-size: 0;
    margin: 0;
    padding: 0;
    line-height: 1;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
}

    #header .logo a {
        color: #0f404f;
        font-size: 18px;
        font-weight: 900;
    }

    #header .logo img {
        max-height: 40px;
        max-width: 40px;
    }

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/**
* Desktop Navigation 
*/
.navbar {
    padding: 0;
}

    .navbar ul {
        margin: 0;
        padding: 0;
        display: flex;
        list-style: none;
        align-items: center;
    }

    .navbar li {
        position: relative;
    }

    .navbar a,
    .navbar a:focus {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 0 10px 30px;
        font-size: 12px;
        font-weight: 500;
        color: #0f404f;
        white-space: nowrap;
        transition: 0.3s;
    }

        .navbar a i,
        .navbar a:focus i {
            font-size: 12px;
            line-height: 0;
            margin-left: 5px;
        }

        .navbar a:hover,
        .navbar .active,
        .navbar .active:focus,
        .navbar li:hover > a {
            color: #0f404f;
        }

    .navbar .getstarted,
    .navbar .getstarted:focus {
        padding: 8px 20px;
        margin-left: 30px;
        border-radius: 10px;
        color: #fff;
        font-size: 14px;
        border: 2px solid #0f404f;
        font-weight: 600;
        background: #0f404f;
    }

        .navbar .getstarted:hover,
        .navbar .getstarted:focus:hover {
            color: #0f404f;
            background: #ffffff;
        }

    .navbar .dropdown ul {
        display: block;
        position: absolute;
        left: 14px;
        top: calc(100% + 30px);
        margin: 0;
        padding: 10px 0;
        z-index: 99;
        opacity: 0;
        visibility: hidden;
        background: #fff;
        box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
        transition: 0.3s;
        border-radius: 4px;
    }

        .navbar .dropdown ul li {
            min-width: 200px;
        }

        .navbar .dropdown ul a {
            padding: 10px 20px;
            font-size: 14px;
            text-transform: none;
            font-weight: 500;
            color: #0c3c53;
        }

            .navbar .dropdown ul a i {
                font-size: 12px;
            }

.dropdown-child li a {
    color: #0c3c53 !important;
}

.navbar .dropdown ul a:hover,
.navbar .dropdown ul .active:hover,
.navbar .dropdown ul li:hover > a {
    color: #0f404f;
}

.navbar .dropdown:hover > ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
}

.navbar .dropdown .dropdown ul {
    top: 0;
    left: calc(100% - 30px);
    visibility: hidden;
}

.navbar .dropdown .dropdown:hover > ul {
    opacity: 1;
    top: 0;
    left: 100%;
    visibility: visible;
}

@media (max-width: 1366px) {
    .navbar .dropdown .dropdown ul {
        left: -90%;
    }

    .navbar .dropdown .dropdown:hover > ul {
        left: -100%;
    }
}

/**
* Mobile Navigation 
*/
.mobile-nav-toggle {
    color: #0f404f;
    font-size: 28px;
    cursor: pointer;
    display: none;
    line-height: 0;
    transition: 0.5s;
}

    .mobile-nav-toggle.bi-x {
        color: #fff;
    }

@media (max-width: 991px) {
    .mobile-nav-toggle {
        display: block;
    }

    .navbar ul {
        display: none;
    }
}

.navbar-mobile {
    position: fixed;
    overflow: hidden;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: rgb(15 64 79 / 61%);
    transition: 0.3s;
    z-index: 999;
}

    .navbar-mobile .mobile-nav-toggle {
        position: absolute;
        top: 15px;
        right: 15px;
    }

    .navbar-mobile ul {
        display: block;
        position: absolute;
        top: 55px;
        right: 15px;
        bottom: 15px;
        left: 15px;
        padding: 10px 0;
        border-radius: 10px;
        background-color: #fff;
        overflow-y: auto;
        transition: 0.3s;
    }

    .navbar-mobile a,
    .navbar-mobile a:focus {
        padding: 10px 20px;
        font-size: 15px;
        color: #0f404f;
    }

        .navbar-mobile a:hover,
        .navbar-mobile .active,
        .navbar-mobile li:hover > a {
            color: #0f404f;
        }

    .navbar-mobile .getstarted,
    .navbar-mobile .getstarted:focus {
        margin: 15px;
        color: #ffffff;
    }

    .navbar-mobile .dropdown ul {
        position: static;
        display: none;
        margin: 10px 20px;
        padding: 10px 0;
        z-index: 99;
        opacity: 1;
        visibility: visible;
        background: #fff;
        box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
    }

        .navbar-mobile .dropdown ul li {
            min-width: 200px;
        }

        .navbar-mobile .dropdown ul a {
            padding: 10px 20px;
        }

            .navbar-mobile .dropdown ul a i {
                font-size: 12px;
            }

            .navbar-mobile .dropdown ul a:hover,
            .navbar-mobile .dropdown ul .active:hover,
            .navbar-mobile .dropdown ul li:hover > a {
                color: #0f404f;
            }

    .navbar-mobile .dropdown > .dropdown-active {
        display: block;
        visibility: visible !important;
    }

.course-panel {
    padding-top: 30px;
    padding-bottom: 30px;
}

.course-products {
    display: flex;
    align-items: baseline;
}

.btn-addcart {
    width: 120px;
    padding: 5px;
    font-size: 13px;
    letter-spacing: 1px;
    display: inline-block;
    border-radius: 50px;
    transition: 0.5s;
    margin: 10px 0 0 0;
    color: #ffffff;
    background: #0f404f;
}

    .btn-addcart:hover {
        background: rgb(210, 151, 2);
    }

.btn-main {
    margin: 0 5px;
    vertical-align: -webkit-baseline-middle;
    vertical-align: -moz-middle-with-baseline;
    font-size: 14px;
    background: #179f39;
    padding: 5px 10px;
    color: #fff;
    border: none;
    outline: none;
    transition: 0.3s all ease-in-out;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
    -webkit-transition: 0.3s all ease-in-out;
    -moz-transition: 0.3s all ease-in-out;
    -ms-transition: 0.3s all ease-in-out;
    -o-transition: 0.3s all ease-in-out;
}

.btn-main-primary {
    background: #ea0;
    color: rgb(56, 40, 1);
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

    .btn-main-primary:hover {
        background: rgb(210, 151, 2);
    }

.btn-main:hover {
    color: #fff;
}

.btn-get {
    font-family: "Jost", sans-serif;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 1px;
    display: inline-block;
    padding: 10px 28px 11px 28px;
    border-radius: 50px;
    transition: 0.5s;
    margin: 10px 0 0 0;
    color: #ffffff;
    background: #0f404f;
}

    .btn-get:hover {
        background: #3b636fc9;
    }
/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.bg-gray {
    background: #fbfbfb;
}

#hero {
    width: 100%;
    background: #fbfbfb;
}

    #hero .container {
        padding-top: 30px;
    }

    #hero h1 {
        margin: 0 0 10px 0;
        font-size: 48px;
        font-weight: 700;
        line-height: 56px;
        color: #0f404f;
        letter-spacing: 2px;
    }

    #hero h2 {
        color: #0f404f;
        margin-bottom: 30px;
        margin-top: 30px;
        font-size: 24px;
        letter-spacing: 3px;
    }

    #hero p {
        color: #989aa3;
        letter-spacing: 3px;
    }

    #hero .btn-get-started {
        font-family: "Jost", sans-serif;
        font-weight: 500;
        font-size: 16px;
        letter-spacing: 1px;
        display: inline-block;
        padding: 10px 28px 11px 28px;
        border-radius: 50px;
        transition: 0.5s;
        margin: 10px 10px 0 0;
        color: #ffffff;
        background: #0f404f;
    }

        #hero .btn-get-started:hover {
            background: #3b636fc9;
        }

    #hero .btn-watch-video {
        font-size: 16px;
        display: flex;
        align-items: center;
        transition: 0.5s;
        margin: 10px 0 0 25px;
        color: #0f404f;
        line-height: 1;
    }

        #hero .btn-watch-video i {
            line-height: 0;
            color: #0f404f;
            font-size: 32px;
            transition: 0.3s;
            margin-right: 8px;
        }

        #hero .btn-watch-video:hover i {
            color: #0f404f;
        }

    #hero .animated {
        animation: up-down 2s ease-in-out infinite alternate-reverse both;
    }

@media (max-width: 991px) {
    #hero {
        height: 112vh;
        text-align: center;
    }

        #hero .animated {
            animation: none;
        }

        #hero .hero-img {
            text-align: center;
        }

            #hero .hero-img img {
                width: 50%;
            }
}

@media (max-width: 768px) {
    #hero h1 {
        font-size: 28px;
        line-height: 36px;
    }

    #hero h2 {
        color: #0f404f;
        margin-bottom: 50px;
        margin-top: 30px;
        font-size: 17px;
        letter-spacing: 1px;
    }

    #hero .hero-img img {
        width: 70%;
    }
}

@media (max-width: 575px) {
    #hero .hero-img img {
        width: 80%;
    }

    #hero .btn-get-started {
        font-size: 16px;
        padding: 10px 24px 11px 24px;
    }
}

@keyframes up-down {
    0% {
        transform: translateY(10px);
    }

    100% {
        transform: translateY(-10px);
    }
}

/*--------------------------------------------------------------
# Sections General
--------------------------------------------------------------*/
section {
    padding: 60px 0;
    overflow: hidden;
}

.section-bg {
    background-color: #f3f5fa;
}

.section-title {
    text-align: center;
    padding-bottom: 30px;
}

    .section-title h2 {
        font-size: 32px;
        font-weight: bold;
        text-transform: uppercase;
        margin-bottom: 20px;
        padding-bottom: 20px;
        position: relative;
        color: #0f404f;
    }

        .section-title h2::before {
            content: "";
            position: absolute;
            display: block;
            width: 120px;
            height: 1px;
            background: #ddd;
            bottom: 1px;
            left: calc(50% - 60px);
        }

        .section-title h2::after {
            content: "";
            position: absolute;
            display: block;
            width: 40px;
            height: 3px;
            background: #0f404f;
            bottom: 0;
            left: calc(50% - 20px);
        }

    .section-title p {
        margin-bottom: 0;
    }

/*--------------------------------------------------------------
# Clients
--------------------------------------------------------------*/
.clients {
    padding: 12px 0;
    text-align: center;
}

    .clients img {
        max-width: 45%;
        transition: all 0.4s ease-in-out;
        display: inline-block;
        padding: 15px 0;
        filter: grayscale(100);
    }

        .clients img:hover {
            filter: none;
            transform: scale(1.1);
        }

@media (max-width: 768px) {
    .clients img {
        max-width: 40%;
    }
}

/*--------------------------------------------------------------
# About Us
--------------------------------------------------------------*/
.about .content h3 {
    font-weight: 600;
    font-size: 26px;
}

.about .content ul {
    list-style: none;
    padding: 0;
}

    .about .content ul li {
        padding-left: 28px;
        position: relative;
    }

        .about .content ul li + li {
            margin-top: 10px;
        }

    .about .content ul i {
        position: absolute;
        left: 0;
        top: 2px;
        font-size: 20px;
        color: #0f404f;
        line-height: 1;
    }

.about .content p:last-child {
    margin-bottom: 0;
}

.about .content .btn-learn-more {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 1px;
    display: inline-block;
    padding: 12px 32px;
    border-radius: 4px;
    transition: 0.3s;
    line-height: 1;
    color: #0f404f;
    animation-delay: 0.8s;
    margin-top: 6px;
    border: 2px solid #0f404f;
}

    .about .content .btn-learn-more:hover {
        background: #0f404f;
        color: #fff;
        text-decoration: none;
    }

/*--------------------------------------------------------------

# courses
--------------------------------------------------------------*/

.course .icon-box {
    box-shadow: 0px 0 25px 0 rgba(0, 0, 0, 0.1);
    padding: 50px 30px;
    /* transition: all ease-in-out 0.4s; */
    /* background: #fff; */
    width:100%;
    border-radius: 10px;
}

    .course .icon-box .icon {
        margin-bottom: 10px;
    }

        .course .icon-box .icon i {
            color: #0f404f;
            font-size: 36px;
            /* transition: 0.3s; */
        }

    .course .icon-box h4 {
        font-weight: 800;
        margin-bottom: 15px;
        font-size: 24px;
    }

        .course .icon-box h4 a {
            color: #0f404f;
            /* transition: ease-in-out 0.3s; */
        }

    .course .icon-box p {
        line-height: 24px;
        font-size: 19px;
        margin-bottom: 10px;
        color: #849da4;
    }

.course .read-more {
    color: #eb9d52;
    font-weight: 600;
}

.course .icon-box:hover {
    /* transform: translateY(-10px); */
    /* background-image: url(../img/logo.png); */
    /* background-size: 400px;
  background-repeat: no-repeat;
  background-position: -212px -182px; */
    background: linear-gradient(85deg, rgb(10 80 97 / 85%) 0%, rgb(13 60 75) 74%, rgba(7,43,54,1) 100%), url(../img/logo.png) no-repeat -240px -192px;
    background-size: cover;
}

    .course .icon-box:hover h4 a {
        color: #fff;
    }

.course .new-price {
    color: #0f404f;
    font-weight: 900;
    font-size: 24px;
}

.course .icon-box:hover .new-price {
    color: #ffffff;
}

.course .old-price {
    text-decoration: line-through;
    text-align: left;
    color: #c3c1c1;
    margin-left: 5px;
}

.course-price {
    margin-bottom: 5px;
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    flex-direction: row;
    flex-wrap: nowrap;
}


/*cart-----------------------*/
.cart-icon {
    font-size: 1.3rem !important
}

.cart-content {
    padding: 10px 10px;
    background: #fff;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

/* start page cart empty */
.cart-empty {
    text-align: center;
    padding: 20px 0;
}

.cart-empty-icon {
    margin-bottom: 15px;
}

.cart-empty-offer {
    margin-bottom: 10px;
}

    .cart-empty-offer a {
        padding: 0 5px;
        border-left: 1px solid #ccc;
    }

        .cart-empty-offer a:nth-last-child(1) {
            border: none;
        }

.cart-empty-title a {
    display: inline-block;
    margin-top: 15px;
}

/* end page cart empty */

/* start cart page */
.cart-counter {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.btn-counter {
    margin-bottom: 10px;
    height: 100%;
    border: none;
    padding: 0 13px;
    background: #007fee;
    color: #fff;
}

.bootstrap-touchspin-down {
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

.bootstrap-touchspin-up {
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

.counter {
    text-align: center;
    font-weight: bolder;
}

.cart-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.cart-content {
    padding: 10px 10px;
    background: #fff;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.line-step-container {
    margin-bottom: 20px;
    overflow: hidden;
    padding: 10px 20px;
    box-shadow: rgb(0 0 0 / 10%) 0px 0px 10px 0px !important;
    background: #fff;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.line-step {
    position: relative;
    display: flex;
    align-items: center;
}

    .line-step::before {
        display: block;
        content: '';
        position: absolute;
        width: 100%;
        height: 10px;
        background: #e9e9e9;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
    }

.line-step-boxs {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .line-step-boxs::before {
        z-index: 3;
        content: '';
        width: 20px;
        height: 20px;
        background: #f8f8f8;
        box-shadow: var(--shadow-md);
        border-radius: 50%;
        position: absolute;
        right: -1px;
        top: 50%;
        transform: translateY(-50%);
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
    }

    .line-step-boxs::after {
        z-index: 3;
        content: '';
        width: 20px;
        height: 20px;
        background: #f8f8f8;
        box-shadow: var(--shadow-md);
        border-radius: 50%;
        position: absolute;
        left: -1px;
        top: 50%;
        transform: translateY(-50%);
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
    }

.line-step-box {
    width: 50%;
    text-align: center;
    position: relative;
    z-index: 2;
    overflow: hidden;
}

    .line-step-box.complete .icon {
        background: #b27100;
    }

        .line-step-box.complete .icon i {
            color: #fff;
        }

    .line-step-box.complete::before {
        content: '';
        width: 100%;
        height: 10px;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        background-color: #b27100;
        z-index: -1;
        border-radius: 0px;
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        -ms-border-radius: 0px;
        -o-border-radius: 0px;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
    }

    .line-step-box .icon {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 10px auto;
        margin-top: 20px;
        width: 50px;
        height: 50px;
        line-height: 50px;
        background: #fff;
        box-shadow: rgb(0 0 0 / 10%) 0px 0px 10px 0px !important;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
    }

        .line-step-box .icon i {
            font-size: 22px;
            color: #0f404f;
        }

.cart-detail {
    padding: 0 0;
}

    .cart-detail table {
        border: 1px solid #eee;
    }

        .cart-detail table tr {
            border-bottom: 1px solid #eee;
            text-align: center;
        }

            .cart-detail table tr td {
                font-size: 15px;
                /* vertical-align: middle; */
            }

        .cart-detail table thead th {
            padding: 15px 0;
            vertical-align: middle;
            font-size: 15px;
        }

        .cart-detail table img {
            width: 60px !important;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            -webkit-transform: translate(-50%,-50%);
            -moz-transform: translate(-50%,-50%);
            -ms-transform: translate(-50%,-50%);
            -o-transform: translate(-50%,-50%);
        }

        .cart-detail table td {
            font-size: 16px;
        }

            .cart-detail table td.title {
                max-width: 300px;
            }

            .cart-detail table td.td-count {
                width: 150px;
            }

    .cart-detail td.icon i {
        font-size: 22px;
        vertical-align: middle;
        color: #ccc;
        transition: 0.2s all ease;
        -webkit-transition: 0.2s all ease;
        -moz-transition: 0.2s all ease;
        -ms-transition: 0.2s all ease;
        -o-transition: 0.2s all ease;
    }

        .cart-detail td.icon i:hover {
            color: #d12714;
        }

    .cart-detail table td.price span {
        margin-left: 5px;
    }

        .cart-detail table td.price span.num {
            color: #0f404f;
            font-weight: bold;
        }

    .cart-detail table td input[type=number] {
        max-width: 50px;
        text-align: center;
        outline: none;
    }

    .cart-detail .discount input[type=text] {
        width: 50%;
    }

    .cart-detail .discount button {
        margin-right: 5px;
        background: #007fee;
        color: #fff;
    }

        .cart-detail .discount button:hover {
            background: #052c8d;
        }

.cart-payment {
    padding: 0px;
}

    .cart-payment .title {
        padding: 15px 0;
    }

        .cart-payment .title h4 {
            font-size: 20px;
        }

    .cart-payment table {
        background: #fff;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
    }

        .cart-payment table tr {
            border-bottom: 1px solid #ddd;
        }

            .cart-payment table tr:nth-last-child(1) {
                border: none;
            }

            .cart-payment table tr td {
                padding: 15px 10px;
            }

                .cart-payment table tr td.txt {
                    color: #aa7100s;
                    font-size: 15px;
                    text-align: center;
                }

    .cart-payment .btn-bank {
        background: #0f404f;
        text-align: center;
        border: 1px solid;
        outline: none;
        color: #fff;
        width: 100%;
        padding: 15px 15px;
        border-radius: 5px;
        border-color: #0f404f;
        transition: 0.4s all ease-in-out;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        -ms-border-radius: 5px;
        -o-border-radius: 5px;
        -webkit-transition: 0.4s all ease-in-out;
        -moz-transition: 0.4s all ease-in-out;
        -ms-transition: 0.4s all ease-in-out;
        -o-transition: 0.4s all ease-in-out;
    }

        .cart-payment .btn-bank:hover {
            background: transparent;
            color: #515151;
        }

.payment-table tr td h6 {
    font-weight: bold;
}

.payment-table tr td h6, .payment-table tr td p {
    display: inline-block;
}

/* end cart page */



.category-filters {
    position: sticky;
    top: 0;
    padding-bottom: 20px;
}

.category-item .product-box-item {
    margin: auto;
    margin-bottom: 20px;
}

.category-filter {
    margin-bottom: 20px;
}

.category-filter-box {
    border-radius: 10px;
    background: #fff;
    box-shadow: rgb(0 0 0 / 10%) 0px 0px 10px 0px !important;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.category-filter-box-title {
    padding: 10px;
}

    .category-filter-box-title h4 {
        font-size: 16px;
    }

.category-filter-box-desc {
    background: #f7f7f7;
    padding: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.category-filter-resoult li a {
    font-size: 14px;
    transition: .5s all ease;
    -webkit-transition: .5s all ease;
    -moz-transition: .5s all ease;
    -ms-transition: .5s all ease;
    -o-transition: .5s all ease;
}

    .category-filter-resoult li a.active {
        color: #007fee;
        font-weight: bold;
    }

    .category-filter-resoult li a:hover {
        padding-right: 5px !important;
    }

/*--------------------------------------------------------------

# home comment
--------------------------------------------------------------*/
/*Price*/
.new-price {
    color: #0f404f;
    font-weight: 900;
    font-size: 24px;
}

.icon-box:hover .new-price {
    color: #ffffff;
}

.old-price {
    text-decoration: line-through;
    text-align: left;
    color: #c3c1c1;
    margin-left: 5px;
}

.course-price {
    margin-bottom: 5px;
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    flex-direction: row;
    flex-wrap: nowrap;
}



.comment-slider {
    margin-top: 50px;
}

.comment .member {
    position: relative;
    padding: 30px;
    border-radius: 5px;
    background: #dddddd;
    transition: 0.5s;
    height: 100%;
    border-radius: 10px;
    border: 1px solid #f3f3f3;
}

    .comment .member .pic {
        overflow: hidden;
        width: 180px;
        border-radius: 10%;
    }


.swiper-horizontal > .swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal, .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite, .swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
    width: 12%;
    height: 4px;
    left: 45%;
    top: 98%;
}



/* .comment .member .pic img {
  transition: ease-in-out 0.3s;
}

.comment .member:hover {
  transform: translateY(-10px);
} */
.comment .member .member-info {
    padding-left: 30px;
}

.comment .member h4 {
    font-weight: 700;
    margin-bottom: 5px;
    font-size: 20px;
    color: #0f404f;
}

.comment .member span {
    display: block;
    font-size: 15px;
    padding-bottom: 10px;
    position: relative;
    font-weight: 500;
}

    .comment .member span::after {
        content: "";
        position: absolute;
        display: block;
        width: 50px;
        height: 1px;
        background: #cbd6e9;
        bottom: 0;
        left: 0;
    }

.comment .member p {
    margin: 10px 0 0 0;
    font-size: 14px;
}

.comment .member .tag {
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

    .comment .member .tag a {
        transition: ease-in-out 0.3s;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        padding: 6px 15px;
        border: 1px solid #0f404f;
        background: #eff2f8;
    }

    .comment .member .tag a {
        color: #0f404f;
        font-size: 16px;
        margin: 0 2px;
    }

        .comment .member .tag a:hover {
            background: #0f404f;
        }

        .comment .member .tag a:hover {
            color: #fff;
        }

        .comment .member .tag a + a {
            margin-left: 8px;
        }

/*--------------------------------------------------------------
# Why Us
--------------------------------------------------------------*/
.why-us .content {
    padding: 60px 100px 0 100px;
}

    .why-us .content h3 {
        font-weight: 400;
        font-size: 34px;
        color: #0f404f;
    }

    .why-us .content h4 {
        font-size: 20px;
        font-weight: 700;
        margin-top: 5px;
    }

    .why-us .content p {
        font-size: 15px;
        color: #848484;
    }

.why-us .img {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

.why-us .accordion-list {
    padding: 0 100px 60px 100px;
}

    .why-us .accordion-list ul {
        padding: 0;
        list-style: none;
    }

    .why-us .accordion-list li + li {
        margin-top: 15px;
    }

    .why-us .accordion-list li {
        padding: 20px;
        background: #fff;
        border-radius: 4px;
    }

    .why-us .accordion-list a {
        display: block;
        position: relative;
        font-family: "Poppins", sans-serif;
        font-size: 16px;
        line-height: 24px;
        font-weight: 500;
        padding-right: 30px;
        outline: none;
        cursor: pointer;
    }

    .why-us .accordion-list span {
        color: #0f404f;
        font-weight: 600;
        font-size: 18px;
        padding-right: 10px;
    }

    .why-us .accordion-list i {
        font-size: 24px;
        position: absolute;
        right: 0;
        top: 0;
    }

    .why-us .accordion-list p {
        margin-bottom: 0;
        padding: 10px 0 0 0;
    }

    .why-us .accordion-list .icon-show {
        display: none;
    }

    .why-us .accordion-list a.collapsed {
        color: #343a40;
    }

        .why-us .accordion-list a.collapsed:hover {
            color: #0f404f;
        }

        .why-us .accordion-list a.collapsed .icon-show {
            display: inline-block;
        }

        .why-us .accordion-list a.collapsed .icon-close {
            display: none;
        }

@media (max-width: 1024px) {

    .why-us .content,
    .why-us .accordion-list {
        padding-left: 0;
        padding-right: 0;
    }
}

@media (max-width: 992px) {
    .why-us .img {
        min-height: 400px;
    }

    .why-us .content {
        padding-top: 30px;
    }

    .why-us .accordion-list {
        padding-bottom: 30px;
    }
}

@media (max-width: 575px) {
    .why-us .img {
        min-height: 200px;
    }
}

/*--------------------------------------------------------------
# Skills
--------------------------------------------------------------*/
.skills .content h3 {
    font-weight: 700;
    font-size: 32px;
    color: #0f404f;
    font-family: "Poppins", sans-serif;
}

.skills .content ul {
    list-style: none;
    padding: 0;
}

    .skills .content ul li {
        padding-bottom: 10px;
    }

    .skills .content ul i {
        font-size: 20px;
        padding-right: 4px;
        color: #0f404f;
    }

.skills .content p:last-child {
    margin-bottom: 0;
}

.skills .progress {
    height: 60px;
    display: block;
    background: none;
    border-radius: 0;
}

    .skills .progress .skill {
        padding: 0;
        margin: 0 0 6px 0;
        text-transform: uppercase;
        display: block;
        font-weight: 600;
        font-family: "Poppins", sans-serif;
        color: #0f404f;
    }

        .skills .progress .skill .val {
            float: right;
            font-style: normal;
        }

.skills .progress-bar-wrap {
    background: #e8edf5;
    height: 10px;
}

.skills .progress-bar {
    width: 1px;
    height: 10px;
    transition: 0.9s;
    background-color: #4668a2;
}

/*--------------------------------------------------------------
# Services
--------------------------------------------------------------*/
.services .icon-box {
    box-shadow: 0px 0 25px 0 rgba(0, 0, 0, 0.1);
    padding: 10px 10px;
    transition: all ease-in-out 0.4s;
    background: #fff;
}

    .services .icon-box .icon {
        margin-bottom: 10px;
    }

        .services .icon-box .icon i {
            color: #0f404f;
            font-size: 36px;
            transition: 0.3s;
        }

    .services .icon-box h4 {
        font-weight: 500;
        margin-bottom: 15px;
        font-size: 24px;
    }

        .services .icon-box h4 a {
            color: #0f404f;
            transition: ease-in-out 0.3s;
        }

    .services .icon-box p {
        line-height: 24px;
        font-size: 14px;
        margin-bottom: 0;
    }

    .services .icon-box:hover {
        transform: translateY(-10px);
    }

        .services .icon-box:hover h4 a {
            color: #0f404f;
        }
@media (max-width: 720px) {
    .services .icon-box h4 {
 
        font-size: 12px;
    }
}
    /*--------------------------------------------------------------
# Cta
--------------------------------------------------------------*/
    .cta {
        background: linear-gradient(rgb(58 98 111 / 71%), rgb(58 98 111 / 89%)), url(../img/cta-bg.jpg) fixed center center;
        background-size: cover;
        padding: 120px 0;
    }

        .cta h3 {
            color: #fff;
            font-size: 28px;
            font-weight: 700;
        }

        .cta p {
            color: #fff;
        }

        .cta .cta-btn {
            font-family: "Jost", sans-serif;
            font-weight: 500;
            font-size: 16px;
            letter-spacing: 1px;
            display: inline-block;
            padding: 12px 40px;
            border-radius: 50px;
            transition: 0.5s;
            margin: 10px;
            border: 2px solid #fff;
            color: #fff;
        }

            .cta .cta-btn:hover {
                background: #0f404f;
                border: 2px solid #0f404f;
            }

    @media (max-width: 1024px) {
        .cta {
            background-attachment: scroll;
        }
    }

    @media (min-width: 769px) {
        .cta .cta-btn-container {
            display: flex;
            align-items: center;
            justify-content: flex-end;
        }
    }

    /*--------------------------------------------------------------
# Portfolio
--------------------------------------------------------------*/
    .portfolio #portfolio-flters {
        list-style: none;
        margin-bottom: 20px;
    }

        .portfolio #portfolio-flters li {
            cursor: pointer;
            display: inline-block;
            margin: 10px 5px;
            font-size: 15px;
            font-weight: 500;
            line-height: 1;
            color: #444444;
            transition: all 0.3s;
            padding: 8px 20px;
            border-radius: 50px;
            font-family: "Poppins", sans-serif;
        }

            .portfolio #portfolio-flters li:hover,
            .portfolio #portfolio-flters li.filter-active {
                background: #0f404f;
                color: #fff;
            }

    .portfolio .portfolio-item {
        margin-bottom: 30px;
    }

        .portfolio .portfolio-item .portfolio-img {
            overflow: hidden;
        }

            .portfolio .portfolio-item .portfolio-img img {
                transition: all 0.6s;
            }

        .portfolio .portfolio-item .portfolio-info {
            opacity: 0;
            position: absolute;
            left: 15px;
            bottom: 0;
            z-index: 3;
            right: 15px;
            transition: all 0.3s;
            background: rgba(55, 81, 126, 0.8);
            padding: 10px 15px;
        }

            .portfolio .portfolio-item .portfolio-info h4 {
                font-size: 18px;
                color: #fff;
                font-weight: 600;
                color: #fff;
                margin-bottom: 0px;
            }

            .portfolio .portfolio-item .portfolio-info p {
                color: #f9fcfe;
                font-size: 14px;
                margin-bottom: 0;
            }

            .portfolio .portfolio-item .portfolio-info .preview-link,
            .portfolio .portfolio-item .portfolio-info .details-link {
                position: absolute;
                right: 40px;
                font-size: 24px;
                top: calc(50% - 18px);
                color: #fff;
                transition: 0.3s;
            }

                .portfolio .portfolio-item .portfolio-info .preview-link:hover,
                .portfolio .portfolio-item .portfolio-info .details-link:hover {
                    color: #0f404f;
                }

            .portfolio .portfolio-item .portfolio-info .details-link {
                right: 10px;
            }

        .portfolio .portfolio-item:hover .portfolio-img img {
            transform: scale(1.15);
        }

        .portfolio .portfolio-item:hover .portfolio-info {
            opacity: 1;
        }

    /*--------------------------------------------------------------
# Portfolio Details
--------------------------------------------------------------*/
    .portfolio-details {
        padding-top: 40px;
    }

        .portfolio-details .portfolio-details-slider img {
            width: 100%;
        }

    .swiper-button-prev {
        background: white;
        padding: 30px;
        border-radius: 50px;
    }

        .swiper-button-prev:hover {
            background: #0f404f;
            color: #fff;
        }

        .swiper-button-prev:after {
            font-size: 22px;
            color: black;
        }

        .swiper-button-prev:hover:after {
            color: #fff;
        }

    .swiper-button-next {
        background: white;
        padding: 30px;
        border-radius: 50px;
    }

        .swiper-button-next:hover {
            background: #0f404f;
            color: #fff;
        }

        .swiper-button-next:after {
            font-size: 22px;
            color: black;
        }

        .swiper-button-next:hover:after {
            color: #fff;
        }

    .portfolio-details .portfolio-details-slider .swiper-pagination {
        margin-top: 20px;
        position: relative;
    }

        .portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet {
            width: 12px;
            height: 12px;
            background-color: #fff;
            opacity: 1;
            border: 1px solid #0f404f;
        }

        .portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet-active {
            background-color: #0f404f;
        }

    .portfolio-details .portfolio-info {
        padding: 30px;
        box-shadow: 0px 0 30px rgba(55, 81, 126, 0.08);
    }

        .portfolio-details .portfolio-info h3 {
            font-size: 22px;
            font-weight: 700;
            margin-bottom: 20px;
            padding-bottom: 20px;
            border-bottom: 1px solid #eee;
        }

        .portfolio-details .portfolio-info ul {
            list-style: none;
            padding: 0;
            font-size: 15px;
        }

            .portfolio-details .portfolio-info ul li + li {
                margin-top: 10px;
            }

    .portfolio-details .portfolio-description {
        padding-top: 30px;
    }

        .portfolio-details .portfolio-description h2 {
            font-size: 26px;
            font-weight: 700;
            margin-bottom: 20px;
        }

        .portfolio-details .portfolio-description p {
            padding: 0;
        }

    /*--------------------------------------------------------------
# Team
--------------------------------------------------------------*/
    .team .member {
        position: relative;
        box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
        padding: 30px;
        border-radius: 5px;
        background: #fff;
        transition: 0.5s;
        height: 100%;
    }

        .team .member .pic {
            overflow: hidden;
            width: 180px;
            border-radius: 50%;
        }

            .team .member .pic img {
                transition: ease-in-out 0.3s;
            }

        .team .member:hover {
            transform: translateY(-10px);
        }

        .team .member .member-info {
            padding-left: 30px;
        }

        .team .member h4 {
            font-weight: 700;
            margin-bottom: 5px;
            font-size: 20px;
            color: #0f404f;
        }

        .team .member span {
            display: block;
            font-size: 15px;
            padding-bottom: 10px;
            position: relative;
            font-weight: 500;
        }

            .team .member span::after {
                content: "";
                position: absolute;
                display: block;
                width: 50px;
                height: 1px;
                background: #cbd6e9;
                bottom: 0;
                left: 0;
            }

        .team .member p {
            margin: 10px 0 0 0;
            font-size: 14px;
        }

        .team .member .social {
            margin-top: 12px;
            display: flex;
            align-items: center;
            justify-content: flex-start;
        }

            .team .member .social a {
                transition: ease-in-out 0.3s;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 50px;
                width: 32px;
                height: 32px;
                background: #eff2f8;
            }

                .team .member .social a i {
                    color: #0f404f;
                    font-size: 16px;
                    margin: 0 2px;
                }

                .team .member .social a:hover {
                    background: #0f404f;
                }

                    .team .member .social a:hover i {
                        color: #fff;
                    }

                .team .member .social a + a {
                    margin-left: 8px;
                }

    /*--------------------------------------------------------------
# Pricing
--------------------------------------------------------------*/
    .pricing .row {
        padding-top: 40px;
    }

    .pricing .box {
        padding: 60px 40px;
        box-shadow: 0 3px 20px -2px rgba(20, 45, 100, 0.1);
        background: #fff;
        height: 100%;
        border-top: 4px solid #fff;
        border-radius: 5px;
    }

    .pricing h3 {
        font-weight: 500;
        margin-bottom: 15px;
        font-size: 20px;
        color: #0f404f;
    }

    .pricing h4 {
        font-size: 48px;
        color: #0f404f;
        font-weight: 400;
        font-family: "Jost", sans-serif;
        margin-bottom: 25px;
    }

        .pricing h4 sup {
            font-size: 28px;
        }

        .pricing h4 span {
            color: #0f404f;
            font-size: 18px;
            display: block;
        }

    .pricing ul {
        padding: 20px 0;
        list-style: none;
        color: #999;
        text-align: left;
        line-height: 20px;
    }

        .pricing ul li {
            padding: 10px 0 10px 30px;
            position: relative;
        }

        .pricing ul i {
            color: #28a745;
            font-size: 24px;
            position: absolute;
            left: 0;
            top: 6px;
        }

        .pricing ul .na {
            color: #ccc;
        }

            .pricing ul .na i {
                color: #ccc;
            }

            .pricing ul .na span {
                text-decoration: line-through;
            }

    .pricing .buy-btn {
        display: inline-block;
        padding: 12px 35px;
        border-radius: 50px;
        color: #0f404f;
        transition: none;
        font-size: 16px;
        font-weight: 500;
        font-family: "Jost", sans-serif;
        transition: 0.3s;
        border: 1px solid #0f404f;
    }

        .pricing .buy-btn:hover {
            background: #0f404f;
            color: #fff;
        }

    .pricing .featured {
        border-top-color: #0f404f;
    }

        .pricing .featured .buy-btn {
            background: #0f404f;
            color: #fff;
        }

            .pricing .featured .buy-btn:hover {
                background: #0f404fbf;
            }

    @media (max-width: 992px) {
        .pricing .box {
            max-width: 60%;
            margin: 0 auto 30px auto;
        }
    }

    @media (max-width: 767px) {
        .pricing .box {
            max-width: 80%;
            margin: 0 auto 30px auto;
        }
    }

    @media (max-width: 420px) {
        .pricing .box {
            max-width: 100%;
            margin: 0 auto 30px auto;
        }
    }

    /*--------------------------------------------------------------
# Frequently Asked Questions
--------------------------------------------------------------*/
    .faq .faq-list {
        padding: 0 100px;
    }

        .faq .faq-list ul {
            padding: 0;
            list-style: none;
        }

        .faq .faq-list li + li {
            margin-top: 15px;
        }

        .faq .faq-list li {
            padding: 20px;
            background: #fff;
            border-radius: 4px;
            position: relative;
        }

        .faq .faq-list a {
            display: block;
            position: relative;
            font-family: "Poppins", sans-serif;
            font-size: 16px;
            line-height: 24px;
            font-weight: 500;
            padding: 0 30px;
            outline: none;
            cursor: pointer;
        }

        .faq .faq-list .icon-help {
            font-size: 24px;
            position: absolute;
            right: 0;
            left: 20px;
            color: #0f404f;
        }

        .faq .faq-list .icon-show,
        .faq .faq-list .icon-close {
            font-size: 24px;
            position: absolute;
            right: 0;
            top: 0;
        }

        .faq .faq-list p {
            margin-bottom: 0;
            padding: 10px 0 0 0;
        }

        .faq .faq-list .icon-show {
            display: none;
        }

        .faq .faq-list a.collapsed {
            color: #0f404f;
            transition: 0.3s;
        }

            .faq .faq-list a.collapsed:hover {
                color: #0f404f;
            }

            .faq .faq-list a.collapsed .icon-show {
                display: inline-block;
            }

            .faq .faq-list a.collapsed .icon-close {
                display: none;
            }

    @media (max-width: 1200px) {
        .faq .faq-list {
            padding: 0;
        }
    }

    /*--------------------------------------------------------------
# Contact
--------------------------------------------------------------*/
    .contact .info {
        border-top: 3px solid #0f404f;
        border-bottom: 3px solid #0f404f;
        padding: 30px;
        background: #fff;
        width: 100%;
        box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.1);
    }

        .contact .info i {
            font-size: 20px;
            color: #0f404f;
            float: left;
            width: 44px;
            height: 44px;
            background: #e7f5fb;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 50px;
            transition: all 0.3s ease-in-out;
        }

        .contact .info h4 {
            padding: 0 0 0 60px;
            font-size: 22px;
            font-weight: 600;
            margin-bottom: 5px;
            color: #0f404f;
        }

        .contact .info p {
            padding: 0 0 10px 60px;
            margin-bottom: 20px;
            font-size: 14px;
            color: #6182ba;
        }

        .contact .info .email p {
            padding-top: 5px;
        }

        .contact .info .social-links {
            padding-left: 60px;
        }

            .contact .info .social-links a {
                font-size: 18px;
                display: inline-block;
                background: #333;
                color: #fff;
                line-height: 1;
                padding: 8px 0;
                border-radius: 50%;
                text-align: center;
                width: 36px;
                height: 36px;
                transition: 0.3s;
                margin-right: 10px;
            }

                .contact .info .social-links a:hover {
                    background: #0f404f;
                    color: #fff;
                }

        .contact .info .email:hover i,
        .contact .info .address:hover i,
        .contact .info .phone:hover i {
            background: #0f404f;
            color: #fff;
        }

    .contact .php-email-form {
        width: 100%;
        border-top: 3px solid #0f404f;
        border-bottom: 3px solid #0f404f;
        padding: 30px;
        background: #fff;
        box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.12);
    }

        .contact .php-email-form .form-group {
            padding-bottom: 8px;
        }

        .contact .php-email-form .validate {
            display: none;
            color: red;
            margin: 0 0 15px 0;
            font-weight: 400;
            font-size: 13px;
        }

        .contact .php-email-form .error-message {
            display: none;
            color: #fff;
            background: #ed3c0d;
            text-align: left;
            padding: 15px;
            font-weight: 600;
        }

            .contact .php-email-form .error-message br + br {
                margin-top: 25px;
            }

        .contact .php-email-form .sent-message {
            display: none;
            color: #fff;
            background: #18d26e;
            text-align: center;
            padding: 15px;
            font-weight: 600;
        }

        .contact .php-email-form .loading {
            display: none;
            background: #fff;
            text-align: center;
            padding: 15px;
        }

            .contact .php-email-form .loading:before {
                content: "";
                display: inline-block;
                border-radius: 50%;
                width: 24px;
                height: 24px;
                margin: 0 10px -6px 0;
                border: 3px solid #18d26e;
                border-top-color: #eee;
                animation: animate-loading 1s linear infinite;
            }

        .contact .php-email-form .form-group {
            margin-bottom: 20px;
        }

        .contact .php-email-form label {
            padding-bottom: 8px;
        }

        .contact .php-email-form input,
        .contact .php-email-form textarea {
            border-radius: 0;
            box-shadow: none;
            font-size: 14px;
            border-radius: 4px;
        }

            .contact .php-email-form input:focus,
            .contact .php-email-form textarea:focus {
                border-color: #0f404f;
            }

        .contact .php-email-form input {
            height: 44px;
        }

        .contact .php-email-form textarea {
            padding: 10px 12px;
        }

        .contact .php-email-form button[type=submit] {
            background: #0f404f;
            border: 0;
            padding: 12px 34px;
            color: #fff;
            transition: 0.4s;
            border-radius: 50px;
        }

            .contact .php-email-form button[type=submit]:hover {
                background: #3b636fc9;
            }

        .contact .php-email-form button[type=button] {
            background: #0f404f;
            border: 0;
            padding: 12px 34px;
            color: #fff;
            transition: 0.4s;
            border-radius: 50px;
        }

            .contact .php-email-form button[type=button]:hover {
                background: #3b636fc9;
            }

    @keyframes animate-loading {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    /*--------------------------------------------------------------
# Breadcrumbs
--------------------------------------------------------------*/
    .breadcrumbs {
        padding: 15px 0;
        background: #f3f5fa;
        min-height: 40px;
        margin-top: 72px;
    }

    @media (max-width: 992px) {
        .breadcrumbs {
            margin-top: 68px;
        }
    }

    .breadcrumbs h2 {
        font-size: 28px;
        font-weight: 600;
        color: #0f404f;
    }

    .breadcrumbs ol {
        display: flex;
        flex-wrap: wrap;
        list-style: none;
        padding: 0 0 10px 0;
        margin: 0;
        font-size: 14px;
    }

        .breadcrumbs ol li + li {
            padding-left: 10px;
        }

            .breadcrumbs ol li + li::before {
                display: inline-block;
                padding-right: 10px;
                color: #4668a2;
                content: "/";
            }

    /*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
    #footer {
        font-size: 14px;
        background: #0f404f;
    }

        #footer .footer-newsletter {
            padding: 50px 0;
            background: #f3f5fa;
            text-align: center;
            font-size: 15px;
            color: #444444;
        }

            #footer .footer-newsletter h4 {
                font-size: 24px;
                margin: 0 0 20px 0;
                padding: 0;
                line-height: 1;
                font-weight: 600;
                color: #0f404f;
            }

            #footer .footer-newsletter form {
                margin-top: 30px;
                background: #fff;
                padding: 6px 10px;
                position: relative;
                border-radius: 50px;
                box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.06);
                text-align: left;
            }

                #footer .footer-newsletter form input[type=email] {
                    border: 0;
                    padding: 4px 8px;
                    width: calc(100% - 100px);
                }

                #footer .footer-newsletter form input[type=submit] {
                    position: absolute;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    border: 0;
                    background: none;
                    font-size: 16px;
                    padding: 0 20px;
                    background: #0f404f;
                    color: #fff;
                    transition: 0.3s;
                    border-radius: 50px;
                    box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
                }

                    #footer .footer-newsletter form input[type=submit]:hover {
                        background: #3b636fc9;
                    }

        #footer .footer-top {
            padding: 60px 0 30px 0;
            background: #f3f5fa;
        }

            #footer .footer-top .footer-contact {
                margin-bottom: 30px;
            }

                #footer .footer-top .footer-contact h3 {
                    font-size: 28px;
                    margin: 0 0 10px 0;
                    padding: 2px 0 2px 0;
                    line-height: 1;
                    text-transform: uppercase;
                    font-weight: 600;
                    color: #0f404f;
                }

                #footer .footer-top .footer-contact p {
                    font-size: 14px;
                    line-height: 24px;
                    margin-bottom: 0;
                    font-family: "Jost", sans-serif;
                    color: #5e5e5e;
                }

            #footer .footer-top h4 {
                font-size: 16px;
                font-weight: bold;
                color: #0f404f;
                position: relative;
                padding-bottom: 12px;
            }

            #footer .footer-top .footer-links {
                margin-bottom: 30px;
            }

                #footer .footer-top .footer-links ul {
                    list-style: none;
                    padding: 0;
                    margin: 0;
                }

                    #footer .footer-top .footer-links ul i {
                        padding-right: 2px;
                        color: #0f404f;
                        font-size: 18px;
                        line-height: 1;
                    }

                    #footer .footer-top .footer-links ul li {
                        padding: 10px 0;
                        display: flex;
                        align-items: center;
                    }

                        #footer .footer-top .footer-links ul li:first-child {
                            padding-top: 0;
                        }

                    #footer .footer-top .footer-links ul a {
                        color: #777777;
                        transition: 0.3s;
                        display: inline-block;
                        line-height: 1;
                    }

                        #footer .footer-top .footer-links ul a:hover {
                            text-decoration: none;
                            color: #0f404f;
                        }

            #footer .footer-top .social-links a {
                font-size: 18px;
                display: inline-block;
                background: #0f404f;
                color: #fff;
                line-height: 1;
                padding: 8px 0;
                margin-right: 4px;
                border-radius: 50%;
                text-align: center;
                width: 36px;
                height: 36px;
                transition: 0.3s;
            }

                #footer .footer-top .social-links a:hover {
                    background: #3b636fc9;
                    color: #fff;
                    text-decoration: none;
                }

        #footer .footer-bottom {
            padding-top: 30px;
            padding-bottom: 30px;
            color: #fff;
        }

        #footer .copyright {
            float: left;
        }

        #footer .credits {
            float: right;
            font-size: 13px;
        }

            #footer .credits a {
                transition: 0.3s;
            }

    @media (max-width: 768px) {
        #footer .footer-bottom {
            padding-top: 20px;
            padding-bottom: 20px;
        }

        #footer .copyright,
        #footer .credits {
            text-align: center;
            float: none;
        }

        #footer .credits {
            padding-top: 4px;
        }
    }

    .login-page {
        width: 100%;
        height: 100vh;
        display: inline-block;
        display: flex;
        align-items: center;
    }

    .form-right i {
        font-size: 100px;
    }

    .login .logo {
        text-align: center;
        padding-bottom: 44px;
    }


    .course-layout {
        overflow: hidden;
        box-shadow: var(--shadow-box);
        margin: 10px 5px;
        min-height: 350px;
        background: #fff;
        text-align: center;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
    }

    .course-header.default {
        background: #F5F7FE;
        padding: 0;
        margin: 0 0 1.875rem;
    }

    .course-header {
        background: #fff;
        padding-bottom: 1.875rem;
    }

    .breadcrumbs-simple {
        padding: 15px 0;
    }

    @media (min-width: 1200px) {
        .course-header .inner-default {
            padding: 65px 0rem 90px;
        }
    }

    @media (min-width: 1200px) {
        .course-header .course-category {
            margin: 30px 0;
        }
    }

    .course-header .course-category {
        margin: 30px 0;
    }

    .course-header .course-header-meta > div {
        display: inline-block;
        vertical-align: middle;
        font-size: 14px;
    }

        .course-header .course-header-meta > div + div {
            margin-left: 1.875rem;
        }

    .course-category-item {
        padding: 10px 16px 8px;
        line-height: 1;
        font-size: 11px;
        font-weight: 500;
        border-radius: 30px;
        display: inline-block;
        text-transform: uppercase;
        color: #fff !important;
        background: #6440fb;
    }

    .course-header .title, .course-category-item, div.course-header-left div.excerpt, .course-header .course-header-meta > div {
        font-family: var(--main-font);
    }

    @media (min-width: 1200px) {
        .course-header .title {
            margin-bottom: 15px;
        }
    }

    @media (min-width: 1200px) {
        .course-header .title {
            font-size: 30px;
            line-height: 45px;
        }
    }

    .course-header .title {
        text-transform: capitalize;
        font-size: 22px;
        margin: 0 0 10px;
    }

    @media (min-width: 1200px) {
        .course-header .course-header-meta {
            margin-top: 15px;
        }
    }

    .course-header .course-header-meta {
        margin-top: 10px;
    }

    @media (min-width: 1200px) {
        .course-header .course-header-bottom {
            margin-top: 18px;
        }
    }

    .course-header .course-header-bottom {
        margin-top: 10px;
    }

    .lp-course-author .course-author__pull-left {
        width: 30px;
        height: 30px;
        border-radius: 30px;
        overflow: hidden;
    }

    .lp-course-author .author-title {
        font-weight: 400;
        font-size: 14px;
        padding-left: 10px;
    }

    .lp-course-author a {
        color: var(--educrat-text-color);
    }

    button, .btn, a {
        outline: none !important;
        -webkit-transition: all 0.3s ease-in-out 0s;
        -o-transition: all 0.3s ease-in-out 0s;
        transition: all 0.3s ease-in-out 0s;
    }

    @media (min-width: 1350px) {
        .container {
            max-width: 1320px;
        }
    }

    @media (min-width: 1200px) {
        .single-content-course {
            padding-bottom: 50px;
        }
    }

    .single-content-course {
        padding-bottom: 1.875rem;
    }

    .lp-archive-courses {
        width: 100%;
        scroll-margin: 30px;
    }

        .lp-archive-courses .course-content {
            position: relative;
            border-top: 0;
        }

        .lp-archive-courses .apus-lp-content-area {
            display: block;
        }

        .lp-archive-courses ul, .lp-archive-courses ol {
            list-style: initial;
            padding: 0;
        }

        .lp-archive-courses ul, .lp-archive-courses ol {
            list-style-type: decimal;
            list-style-position: inside;
            padding: 0 0 23px;
        }

        .lp-archive-courses ul {
            list-style-type: revert;
            padding: 20px 1em 1px 0;
        }

    .course-single-tab > li {
        margin: 0 0 -2px;
        line-height: inherit;
    }

    @media (min-width: 1200px) {
        .course-single-tab {
            margin-bottom: 50px;
        }
    }

    .course-single-tab {
        background: #fff;
        border-bottom: 2px solid #EDEDED !important;
        margin: 0 0 1.875rem;
        list-style: none !important;
    }

    .sticky-top {
        z-index: 2;
    }

    li.nav-item.course-nav {
        font-family: var(--yekan-font);
    }


    @media (min-width: 1200px) {
        .course-single-tab > li + li {
            margin-right: 38px;
        }
    }

    .course-single-tab > li + li {
        margin-right: 38px;
    }

    .course-single-tab > li {
        margin-right: 38px;
        line-height: inherit;
    }


        .course-single-tab > li > .nav-link, .course-single-tab > li > .tutor-nav-link, .course-single-tab > li > label, .course-single-tab > li > a {
            background: transparent !important;
            color: #4f547b;
            font-size: 0.9375rem;
            padding: 0 0 15px;
            margin: 0;
            border: 0 !important;
            border-radius: 0;
            position: relative;
            cursor: pointer;
        }

            .course-single-tab > li > .nav-link:hover, .course-single-tab > li > .nav-link:focus, .course-single-tab > li > .nav-link.is-active, .course-single-tab > li > .nav-link.active, .course-single-tab > li > .tutor-nav-link:hover, .course-single-tab > li > .tutor-nav-link:focus, .course-single-tab > li > .tutor-nav-link.is-active, .course-single-tab > li > .tutor-nav-link.active, .course-single-tab > li > label:hover, .course-single-tab > li > label:focus, .course-single-tab > li > label.is-active, .course-single-tab > li > label.active, .course-single-tab > li > a:hover, .course-single-tab > li > a:focus, .course-single-tab > li > a.is-active, .course-single-tab > li > a.active {
                color: #6440fb;
            }

                .course-single-tab > li > .nav-link:hover:before, .course-single-tab > li > .nav-link:focus:before, .course-single-tab > li > .nav-link.is-active:before, .course-single-tab > li > .nav-link.active:before, .course-single-tab > li > .tutor-nav-link:hover:before, .course-single-tab > li > .tutor-nav-link:focus:before, .course-single-tab > li > .tutor-nav-link.is-active:before, .course-single-tab > li > .tutor-nav-link.active:before, .course-single-tab > li > label:hover:before, .course-single-tab > li > label:focus:before, .course-single-tab > li > label.is-active:before, .course-single-tab > li > label.active:before, .course-single-tab > li > a:hover:before, .course-single-tab > li > a:focus:before, .course-single-tab > li > a.is-active:before, .course-single-tab > li > a.active:before {
                    width: 100%;
                }

            .course-single-tab > li > .nav-link:before, .course-single-tab > li > .tutor-nav-link:before, .course-single-tab > li > label:before, .course-single-tab > li > a:before {
                content: '';
                position: absolute;
                bottom: 0;
                right: 0;
                background: #6440FB;
                width: 0;
                height: 2px;
                -webkit-transition: all 0.3s ease-in-out 0s;
                -o-transition: all 0.3s ease-in-out 0s;
                transition: all 0.3s ease-in-out 0s;
            }

    div#learn-press-course-description, .font-medium, .curriculum-scrollable {
        font-family: var(--main-font);
    }

    @media (min-width: 1200px) {
        .box-info-white {
            margin-bottom: 60px;
        }
    }

    .box-info-white {
        position: relative;
        z-index: 1;
        margin-bottom: 1.875rem;
    }

        .box-info-white .title {
            font-family: var(--yekan-font);
            letter-spacing: -0.5px;
        }

    @media (min-width: 1200px) {
        .box-info-white .title {
            margin-bottom: 20px;
        }
    }

    .box-info-white .title {
        font-weight: 500;
        font-size: 20px;
        margin: 0 0 10px;
    }

    .course-header .inner-default {
        padding: 15px 0 1.875rem;
    }

    .tutor-course-details-widget:last-child, .apus-course-extra-box:last-child {
        margin: 0;
    }

    @media (min-width: 1200px) {
        .tutor-course-details-widget, .apus-course-extra-box {
            margin-bottom: 40px;
        }
    }

    .tutor-course-details-widget, .apus-course-extra-box {
        margin-bottom: 1.875rem;
    }

    #learn-press-course-curriculum.course-curriculum ul.curriculum-sections .section-header .section-left .section-toggle {
        flex: 14 0 0 !important;
    }

    @media (min-width: 1200px) {
        .tutor-course-details-widget .tutor-course-details-widget-title, .tutor-course-details-widget .title, .apus-course-extra-box .tutor-course-details-widget-title, .apus-course-extra-box .title {
            margin-bottom: 20px;
        }
    }

    .tutor-course-details-widget .tutor-course-details-widget-title, .tutor-course-details-widget .title, .apus-course-extra-box .tutor-course-details-widget-title, .apus-course-extra-box .title {
        font-weight: 500;
        font-size: 20px;
        margin: 0 0 10px;
    }


    .tutor-course-details-widget ul, .apus-course-extra-box ul {
        margin: 0;
        padding: 0;
        list-style: none;
        color: var(--educrat-text-color);
    }

    .lp-archive-courses ul, .lp-archive-courses ol {
        list-style: initial;
        padding: 0;
    }

    .lp-archive-courses ul, .lp-archive-courses ol {
        list-style-type: decimal;
        list-style-position: inside;
        padding: 0 0 23px;
    }

    .lp-archive-courses ul {
        list-style-type: revert;
        padding: 20px 1em 1px 0;
    }

    @media (min-width: 1200px) {
        .tutor-course-details-widget ul li, .apus-course-extra-box ul li {
            margin-bottom: 20px;
        }
    }

    .tutor-course-details-widget ul li, .apus-course-extra-box ul li {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flexbox;
        display: flex;
        align-items: center;
        width: 100%;
        margin-bottom: 0.625rem;
    }



    @media (min-width: 1200px) {
        .detail-course > .row > .col-lg-4 {
            width: 29.5%;
        }
    }

    @media (min-width: 1200px) {
        .detail-course .sidebar {
            margin-top: -319px;
        }
    }

    .sidebar-course-single .sidebar .widget {
        border: 0;
    }

    .sidebar .widget:last-child, .apus-sidebar .widget:last-child {
        border-bottom: 0;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    @media (min-width: 1200px) {
        .sidebar .widget, .apus-sidebar .widget {
            margin: 0 0 1.875rem;
            padding: 0 0 1.875rem;
        }
    }


    .sidebar .widget, .apus-sidebar .widget {
        margin: 0 0 0.9375rem;
        padding: 0 0 0.9375rem;
        border-bottom: 1px solid #EDEDED;
    }

    .widget {
        margin-bottom: 1.875rem;
        position: relative;
        padding: 0px;
        background: transparent;
    }

    .course-info-widget {
        border: 1px solid #EDEDED;
        border-radius: 8px;
        background: #fff;
        -webkit-box-shadow: 0 20px 30px 0 rgba(25, 25, 46, 0.04);
        box-shadow: 0 20px 30px 0 rgba(25, 25, 46, 0.04);
        padding: 10px;
    }

        .course-info-widget .tutor-video-player, .course-info-widget .course-video {
            border-radius: 8px;
            overflow: hidden;
            margin: 0 0 10px;
        }

    .course-video {
        position: relative;
        overflow: hidden;
    }

    @media (min-width: 1200px) {
        .course-info-widget .bottom-inner {
            padding: 20px;
        }
    }

    .course-info-widget .bottom-inner {
        padding: 10px;
    }

    @media (min-width: 1200px) {
        .course-info-widget .course-price {
            margin-bottom: 1.875rem;
            font-size: 24px;
        }
    }

    .course-info-widget .course-price {
        color: var(--educrat-link-color);
        line-height: 1;
        font-size: 18px;
        font-weight: 500;
        margin-bottom: 0.9375rem;
    }

    .course-video iframe {
        max-width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 100%;
    }

    @media (min-width: 1200px) {
        .tutor-course-info-fields, .lp-course-info-fields {
            margin-top: 20px;
        }
    }

    .tutor-course-info-fields, .lp-course-info-fields {
        padding: 0;
        margin: 5px 0 0;
        color: var(--educrat-link-color);
    }

        .lp-course-info-fields li {
            font-family: var(--yekan-font);
        }

        .tutor-course-info-fields li, .lp-course-info-fields li {
            padding: 10px 0;
            display: -webkit-box;
            display: -webkit-flex;
            display: -moz-flex;
            display: -ms-flexbox;
            display: flex;
            align-items: center;
            width: 100%;
            border-bottom: 1px solid #EDEDED;
        }

    ul.course-category-list.course-list-check label, aside.widget label {
        font-family: var(--main-font);
    }

    .course-info-widget .sale-price + del, .course-info-widget .sale-price + .origin-price, .widget label {
        font-family: var(--dana-regular);
    }

    .widget label {
        font-weight: 400;
    }

    .tutor-course-info-fields .tutor-label, .tutor-course-info-fields .lp-label, .lp-course-info-fields .tutor-label, .lp-course-info-fields .lp-label {
        color: var(--educrat-text-color);
        margin-left: auto;
    }

    .lp-label {
        font-family: var(--dana-regular);
    }

    .lp-label {
        display: inline-block;
        color: #666;
        font-size: 16px;
        font-weight: 300;
        line-height: 1;
    }

    .tutor-course-info-fields i, .lp-course-info-fields i {
        margin-left: 10px;
    }

    #learn-press-course-curriculum.course-curriculum ul.curriculum-sections .section-header .section-left .section-toggle {
        flex: 14 0 0 !important;
    }

    #learn-press-course-curriculum.course-curriculum ul.curriculum-sections .section-header .section-left .section-toggle {
        width: 14px;
        height: 14px;
        flex: 0 0 14px !important;
        position: relative;
        line-height: 1;
        color: var(--educrat-link-color);
        font-size: 13px;
    }

    .course-curriculum .section-header .section-left .section-toggle {
        flex: 0 0 40px;
        align-items: center;
        text-align: center;
        cursor: pointer;
    }

    #learn-press-course-curriculum.course-curriculum ul.curriculum-sections .section-header .section-left .section-title {
        font-size: 1rem;
        font-weight: 500;
        color: var(--educrat-heading-color);
    }

    .course-curriculum .section-left .section-title {
        padding: 0;
        color: #666;
        font-size: 1.4rem;
        letter-spacing: 0;
        text-transform: capitalize;
        display: block;
    }

    .course-curriculum .section-header .section-title, .course-curriculum .section-header .section-desc {
        margin: 0;
    }

    .course-curriculum .section-title {
        position: relative;
        margin-bottom: 0;
        padding: 8px 0;
        color: #5383f7;
        font-size: 16px;
        font-weight: normal;
        line-height: 1;
    }

    .course-curriculum .section-header .section-left {
        display: flex;
    }

    .course-curriculum .section-left {
        vertical-align: top;
    }

    .course-curriculum .section-header {
        display: table;
        width: 100%;
        padding: 0 0 26px 0;
        border-bottom: 0;
        border-bottom: 1px solid #d9e0f1;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    #learn-press-course-curriculum.course-curriculum ul.curriculum-sections .section {
        cursor: pointer;
        border: 1px solid #EDEDED;
        border-radius: 8px;
        background: #F7F8FB !important;
        overflow: hidden;
    }

    .course-curriculum ul.curriculum-sections .section:last-child {
        padding: 0;
    }

    #learn-press-course-curriculum.course-curriculum ul.curriculum-sections .section {
        cursor: pointer;
        border: 1px solid #EDEDED;
        border-radius: 8px;
        background: #F7F8FB !important;
        overflow: hidden;
    }

    .course-curriculum ul.curriculum-sections .section:last-child {
        padding: 0;
    }

    .course-curriculum ul.curriculum-sections .section {
        margin: 0;
        padding: 0;
        flex-wrap: wrap;
    }

    .course-curriculum ul.curriculum-sections {
        position: relative;
        z-index: 499;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .lp-archive-courses ul, .lp-archive-courses ol {
        list-style: initial;
        padding: 0;
    }

    .lp-archive-courses ul, .lp-archive-courses ol {
        list-style-type: decimal;
        list-style-position: inside;
        padding: 0 0 23px;
    }

    .lp-archive-courses ul {
        list-style-type: revert;
        padding: 20px 1em 1px 0;
    }

    div.course-curriculum.box-info-white h3.title {
        padding: 20px !important;
    }

    .list-border-check i {
        color: #6A7A99;
        border: 2px solid #EDEDED;
        font-size: 8px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flexbox;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 10px;
        margin-top: 2px;
    }

    #learn-press-course-curriculum.course-curriculum ul.curriculum-sections .section-content {
        margin: 0;
        background: #fff;
    }

    .course-curriculum .section-content {
        margin: 0 0 15px 0;
        padding: 0;
        list-style: none;
    }

    #learn-press-course-curriculum.course-curriculum ul.curriculum-sections .section-header {
        height: auto !important;
        border: 0;
        padding: 21px 1.875rem !important;
    }

    @media (min-width: 1200px) {
        #learn-press-course-curriculum.course-curriculum ul.curriculum-sections .section-content .inner {
            padding: 25px 1.875rem;
        }
    }

    #learn-press-course-curriculum.course-curriculum ul.curriculum-sections .section-content .inner {
        padding: 1rem 1.25rem;
    }

    #learn-press-course-curriculum.course-curriculum ul.curriculum-sections .section-content .course-item {
        margin: 0 0 20px;
        padding: 0;
        background: transparent;
    }

    .lp-archive-courses .course-item {
        flex-direction: column;
        display: flex;
        transition: all .3s;
    }

    #learn-press-course-curriculum.course-curriculum ul.curriculum-sections .section-content .course-item .section-item-link::before {
        font-size: 11px;
        color: #6440FB;
        background: rgba(100, 64, 251, 0.07);
        width: 25px;
        height: 25px;
        min-width: 25px;
        line-height: 25px;
        text-align: center;
        border-radius: 50%;
        padding: 0 !important;
    }

    .tutor-course-detail-author .author-image, .lp-course-detail-author .author-image {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        overflow: hidden;
    }

    .tutor-course-detail-author .course-author-infomation, .lp-course-detail-author .course-author-infomation {
        padding-left: 20px;
    }

    .course-author-title {
        font-size: 17px;
        font-weight: 500;
        margin: 0 0 3px;
    }

    .author-top-content {
        margin-top: 2px;
    }

        .author-top-content > * {
            display: inline-block;
            vertical-align: middle;
        }

        .author-top-content > * {
            display: inline-block;
            vertical-align: middle;
        }

    .course-title {
        text-transform: capitalize;
        font-size: 16px;
        font-weight: bolder;
        margin: 0 0 7px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .course-meta-middle {
        font-size: 14px;
    }

        .course-meta-middle > * {
            font-family: var(--main-font);
            letter-spacing: 0 !important;
        }

        .course-meta-middle > * {
            margin-left: 6px;
        }

        .course-meta-middle > * {
            display: inline-block;
            text-transform: capitalize;
            vertical-align: top;
            margin-left: 8px;
        }

            .course-meta-middle > *:last-child {
                margin-left: 8px;
            }

    .product-box-price {
        margin-top: 15px;
        height: 50px;
    }

        .product-box-price.default {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #008d44;
        }

        .product-box-price .discount {
            font-size: 12px;
            padding: 3px 7px;
            font-weight: bold;
            vertical-align: -webkit-baseline-middle;
            vertical-align: -moz-middle-with-baseline;
        }

        .product-box-price .new-price {
            color: #18978F;
            font-weight: 600;
            font-size: 18px;
        }

        .product-box-price .old-price {
            text-decoration: line-through;
            text-align: left;
            display: block;
            margin-top: 5px;
            color: #c3c1c1;
        }

    .btn-request {
        font-family: "Jost", sans-serif;
        font-weight: 500;
        font-size: 16px;
        letter-spacing: 1px;
        display: inline-block;
        padding: 10px 28px 11px 28px;
        border-radius: 50px;
        transition: 0.5s;
        margin: 10px 0 0 0;
        color: #ffffff;
        background: #0f404f;
    }

        .btn-request:hover {
            color: #ffffff;
            background: #3b636fc9;
        }
    /* start dashboard  */
    .ui-boxs {
        position: sticky;
        top: 0;
        padding-bottom: 20px;
    }

    .ui-box {
        margin-bottom: 20px;
    }

    .myorder table {
        width: max-content;
    }

    .ui-box-white .ui-box-item-desc {
        background-color: #fff;
    }

    .ui-box-white .ui-box-item-title {
        background-color: #f7f7f7;
    }

    .ui-box-item {
        border-radius: 10px;
        background: #fff;
        box-shadow: rgb(0 0 0 / 10%) 0px 0px 10px 0px !important;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
    }

    .ui-box-item-title {
        padding: 10px;
        border-bottom: 1px solid #ddd;
    }

        .ui-box-item-title h4 {
            font-size: 18px;
        }

        .ui-box-item-title a i {
            vertical-align: -webkit-baseline-middle;
            vertical-align: -moz-middle-with-baseline;
        }

    .ui-box-item-desc {
        background: #f7f7f7;
        padding: 10px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }

    .dashboard-user-img-profile {
        text-align: center;
    }

        .dashboard-user-img-profile img {
            border: 4px double #eaaf00;
        }

    .dashboard-user-info {
        text-align: center;
        padding-bottom: 10px;
        border-bottom: 1px solid #ddd;
    }

        .dashboard-user-info .user-name {
            font-weight: bold;
            margin-bottom: 7px;
        }

        .dashboard-user-info .user-number {
            font-size: 13px;
        }

    .dashboard-user-btn {
        padding: 5px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
    }

        .dashboard-user-btn div:hover {
            color: #F7CB2D;
        }

            .dashboard-user-btn div:hover a {
                color: #007fee !important;
            }

        .dashboard-user-btn div i,
        .dashboard-user-btn div a {
            cursor: pointer;
            display: block;
            text-align: center;
        }

        .dashboard-user-btn div a {
            font-size: 14px;
        }

    .sidebar-menu {
        overflow: hidden;
    }

        .sidebar-menu li {
            padding: 5px 0;
            transition: 0.2s all linear;
            -webkit-transition: 0.2s all linear;
            -moz-transition: 0.2s all linear;
            -ms-transition: 0.2s all linear;
            -o-transition: 0.2s all linear;
        }

            .sidebar-menu li:hover {
                background: #1f34bc1b;
            }

            .sidebar-menu li.active {
                background: #FFD52E;
                border-radius: 5px;
                -webkit-border-radius: 5px;
                -moz-border-radius: 5px;
                -ms-border-radius: 5px;
                -o-border-radius: 5px;
            }

                .sidebar-menu li.active a span,
                .sidebar-menu li.active a i {
                    color: #674e02;
                }

                .sidebar-menu li.active a i {
                    vertical-align: -webkit-baseline-middle;
                    vertical-align: -moz-middle-with-baseline;
                    margin-left: 2px;
                }

            .sidebar-menu li a {
                font-size: 15px;
            }

    .dashboard-cart .card {
        --bs-card-inner-border-radius: 0px;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
    }

    .dashboard-cart {
        height: 140px;
        text-align: center;
        margin-bottom: 20px;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
    }

    .dashboard-cart-title {
        font-size: 14px;
        font-weight: bold;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        padding: 15px 10px;
        background-color: #e1e1e1;
        color: #333;
        height: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }

        .dashboard-cart-title i {
            vertical-align: -webkit-baseline-middle;
            vertical-align: -moz-middle-with-baseline;
            font-size: 25px;
            margin-left: 5px;
        }

    .dashboard-cart-footer {
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        background: #0e3eb7;
        color: #fff;
        padding: 15px 10px;
        height: 50%;
    }

    .main-table tbody tr.text-center td {
        text-align: center;
    }

    .main-table tbody td {
        min-width: 100px;
        padding: 20px 10px;
    }

    .main-table-2 h6 {
        font-size: 14px;
    }

    .main-table-2 p {
        font-size: 15px;
        color: #333;
    }

    .product-row {
        padding: 10px;
        border-bottom: 1px solid #ddd;
        background: #fff;
    }

        .product-row:nth-last-child(1) {
            border-bottom: none;
        }

    .product-row-desc {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .product-row-desc-item {
        display: flex;
        align-items: center;
    }

    .product-row-title {
        margin-right: 10px;
    }

        .product-row-title h6 {
            font-size: 13px;
            color: #6c757d;
            font-family: 'shabnam-en-num';
        }

    .product-row-icon {
        padding: 5px;
    }

        .product-row-icon i {
            font-size: 18px;
        }

            .product-row-icon i.bi-trash:hover {
                color: #ce0909;
            }

            .product-row-icon i.bi-cart-plus:hover {
                color: #009500;
            }

    .product-price {
        padding: 10px 0;
    }

        .product-price p {
            color: #117619;
            font-weight: bold;
        }

        .product-price span.badge {
            font-weight: normal;
        }

    .orders {
        padding: 10px 0;
    }

    .order-item {
        padding: 10px;
        border-bottom: 1px solid #ddd;
    }

        .order-item:nth-last-child(1) {
            padding-bottom: 0px;
            border-bottom: none;
        }

    .order-item-status {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        padding: 0 0 15px 0;
    }

    .order-item-status-item p {
        font-weight: bold;
    }

    .order-item-status-item i {
        font-size: 25px;
        color: #009500;
        vertical-align: -webkit-baseline-middle;
        vertical-align: -moz-middle-with-baseline;
    }

    .dropd-status i {
        font-size: 16px;
        color: #333;
    }

    .order-item-status-item span {
        margin-right: 5px;
    }

    .order-item-detail {
        padding-bottom: 20px;
        border-bottom: 1px solid #ddd;
    }

        .order-item-detail ul li {
            margin-left: 20px;
            padding-bottom: 10px;
            font-size: 14px;
        }

            .order-item-detail ul li:nth-last-child(1) {
                padding-bottom: 0;
            }

            .order-item-detail ul li span {
                margin-left: 7px;
            }

    .order-item-product-list {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        padding: 20px 0;
        border-bottom: 1px solid #ddd;
    }

    .order-item-product-list-item {
        margin-left: 7px;
    }

    .order-item-show {
        padding: 20px 0 0 0;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

        .order-item-show p {
            color: #052c8d;
            font-size: 14px;
        }

            .order-item-show p i {
                font-size: 20px;
                vertical-align: -webkit-baseline-middle;
                vertical-align: -moz-middle-with-baseline;
                margin-left: 5px;
            }

    .order-item-comment {
        display: flex;
        justify-content: flex-end;
        color: #052c8d;
    }

        .order-item-comment a {
            color: #052c8d;
        }

    .product-list-row-lg .product-row-title h6 {
        font-size: 16px;
    }

    .order-progress h6 i {
        font-size: 25px;
        vertical-align: -webkit-baseline-middle;
        vertical-align: -moz-middle-with-baseline;
        color: #009500;
    }

    .order-progress .progress {
        height: 10px;
    }

        .order-progress .progress .progress-bar {
            background-color: #05ae65;
        }

    .notifi-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
    }

    .dot-click i {
        width: 5px;
        height: 5px;
        margin-bottom: 2px;
    }

    /* end dashboard */

    /* start blog-detail */
    .blog-post {
        padding: 10px;
        background: #fff;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
    }

        .blog-post .blog-post-title {
            padding: 10px 0;
            border-bottom: 1px solid #ddd;
        }

            .blog-post .blog-post-title h3 {
                font-size: 24px;
                font-weight: bold;
            }

    .blog-post-title-items {
        margin-top: 15px;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }

    .blog-post-title-item {
        margin-top: 10px;
        margin-left: 20px;
        display: flex;
        align-items: center;
    }

        .blog-post-title-item img {
            width: 30px;
            height: 30px;
        }

        .blog-post-title-item p {
            margin: 0 10px;
            font-weight: bold;
        }

    .blog-post .blog-post-content {
        padding: 20px 0;
        line-height: 2;
    }

        .blog-post .blog-post-content .title {
            font-size: 20px;
            font-weight: bold;
        }

        .blog-post .blog-post-content img {
            max-width: 100%;
        }

    .blog-post .blog-post-footer {
        padding: 10px 0;
        border-top: 1px solid #ddd;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }

        .blog-post .blog-post-footer a {
            font-size: 16px;
        }

    .blog-post-footer i {
        vertical-align: -webkit-baseline-middle;
        vertical-align: -moz-middle-with-baseline;
        font-size: 20px;
        font-weight: bold;
    }

    .blog-comments {
        padding: 20px 0;
    }

    .blog-comment {
        padding: 20px;
        border-radius: 10px;
        background: #fff;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
    }

    /* end blog-detail */
    /*paging*/
    .active > .page-link, .page-link.active {
        background-color: #0f404f;
        border-color: #3c6470;
    }


    .sidebar-filter-overlay {
        display: block;
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        background-color: rgba(25, 25, 25, 0.25);
        z-index: 1000;
        transition: all 0.4s;
        visibility: hidden;
        opacity: 0;
    }

    .sidebar-filter-active .sidebar-filter-overlay {
        visibility: visible;
        opacity: 1;
    }

    .sidebar-filter {
        position: fixed;
        right: -350px;
        top: 0;
        bottom: 0;
        z-index: 1001;
        background-color: #fff;
        width: 100%;
        max-width: 350px;
        overflow-y: scroll;
        box-shadow: 0.1rem 0 0.6rem 0 rgba(51, 51, 51, 0.5);
        will-change: transform;
        visibility: hidden;
        transition: all 0.35s;
    }

    .sidebar-filter-active .sidebar-filter {
        visibility: visible;
        transform: translateX(-350px);
    }

    .sidebar-filter .widget {
        padding-left: 1rem;
        padding-right: 1rem;
    }

        .sidebar-filter .widget:last-child {
            border-bottom: none;
        }

    .sidebar-filter .widget-clean {
        color: #333333;
        text-transform: uppercase;
        font-weight: 400;
        font-size: 1.4rem;
        line-height: 1.5;
        letter-spacing: -.01em;
        border-bottom: .1rem solid #ebebeb;
        padding: 0 1rem 2.4rem;
        margin-bottom: 2rem;
    }

        .sidebar-filter .widget-clean i {
            font-size: 1.6rem;
            line-height: 1;
            margin-left: 1rem;
        }

        .sidebar-filter .widget-clean a {
            font-size: 1.4rem;
        }

    .sidebar-filter-banner.sidebar-shop .widget:not(.widget-clean) {
        border-bottom: none;
        margin-bottom: 4rem;
    }

    .sidebar-filter-banner.sidebar-shop .widget-title {
        margin-bottom: 1.7rem;
    }

    .sidebar-filter-wrapper {
        position: relative;
        padding: 3.5rem 2.7rem 1.5rem;
    }

    .sidebar-filter-clear {
        text-transform: capitalize;
    }

    @media screen and (max-width: 380px) {
        .sidebar-filter {
            right: -300px;
            max-width: 300px;
        }

        .sidebar-filter-active .sidebar-filter {
            -webkit-transform: translateX(-300px);
            transform: translateX(-300px);
        }

        .sidebar-filter-wrapper {
            padding-left: 1.7rem;
            padding-right: 1.7rem;
        }
    }

    .faq .accordion-button:not(.collapsed) {
        background: #3b636fc9;
        color: white;
    }

    .faq .accordion-item:last-of-type .accordion-button.collapsed {
        background: #3b636fc9;
        color: white;
    }

    .faq .accordion-button::after {
        color: white;
    }

    .selectaddress {
        padding: 20px;
    }

    .product-box-item {
        overflow: hidden;
        box-shadow: rgb(0 0 0 / 10%) 0px 0px 10px 0px !important;
        margin: 10px 5px;
        min-height: 350px;
        background: #fff;
        text-align: center;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
    }

    .product-box-item-img {
        position: relative;
        overflow: hidden;
    }

        .product-box-item-img img {
            margin-top: 10px;
            object-fit: contain;
            width: 100%;
            height: 200px;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
        }

    .product-box-item-desc {
        padding: 10px;
    }

    .product-box-item-title h6 {
        font-family: 'shabnam-en-num';
        font-size: 14px;
        line-height: 1.7;
        font-weight: bold;
        overflow: hidden;
        height: 50px;
    }

    .product-box-price {
        margin-top: 15px;
        height: 50px;
    }

    .card-hover {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.7);
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 0;
        visibility: hidden;
        transition: .5s all ease-in-out;
        -webkit-transition: .5s all ease-in-out;
        -moz-transition: .5s all ease-in-out;
        -ms-transition: .5s all ease-in-out;
        -o-transition: .5s all ease-in-out;
    }

        .card-hover a {
            color: #fff !important;
            padding: 7px 20px;
            border: 1px solid #fff;
            border-radius: 10px;
            display: block;
            transition: .5s all ease;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            -ms-border-radius: 10px;
            -o-border-radius: 10px;
            -webkit-transition: .5s all ease;
            -moz-transition: .5s all ease;
            -ms-transition: .5s all ease;
            -o-transition: .5s all ease;
            cursor: pointer;
        }

            .card-hover a:hover {
                background: #fff;
                color: #515151 !important;
            }

    .card-image {
        position: relative;
    }

    .card:hover .card-hover {
        visibility: visible;
        opacity: 1;
    }

    .card-header {
        margin-bottom: 1.8em;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 0.6em;
        border-bottom: 0.1em solid #c0bfd2;
    }

    .timer-div {
        background-color: #e1f5fe;
        width: 7.5em;
        border-radius: 1.8em;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.7em 1.8em;
    }

    .quiz-header {
        margin-bottom: 1.8em;
        justify-content: space-between;
        align-items: center;
        padding: 1em;
        border-bottom: 0.1em solid #c0bfd2;
        background: #55447e2e;
    }

    .option-div {
        font-size: 0.9em;
        width: 100%;
        padding-left: 1em;
        margin: 0.3em 0;
        text-align: left;
        outline: none;
        background: transparent;
        border: 1px solid #c0bfd2;
        border-radius: 0.3em;
    }

        .option-div label {
            line-height: 3em;
            width: 90%;
            margin-left: 12px;
        }

    .lstanswer {
        list-style-type: none;
    }

    input:focus {
        outline: none;
    }

    #ui-datepicker-div {
        display: none;
        background-color: #fff;
        box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.1);
        margin-top: 0.25rem;
        border-radius: 0.5rem;
        padding: 0.5rem;
    }

    table {
        border-collapse: collapse;
        border-spacing: 0;
    }

    .ui-datepicker-calendar thead th {
        padding: 0.25rem 0;
        text-align: center;
        font-size: 0.75rem;
        font-weight: 400;
        color: #78909C;
    }

    .ui-datepicker-calendar tbody td {
        width: 2.5rem;
        text-align: center;
    }

        .ui-datepicker-calendar tbody td a {
            display: block;
            border-radius: 0.25rem;
            transition: 0.3s all;
            color: #546E7A;
            font-size: 0.875rem;
            text-decoration: none;
        }

            .ui-datepicker-calendar tbody td a:hover {
                background-color: #E0F2F1;
            }

            .ui-datepicker-calendar tbody td a.ui-state-active {
                background-color: #009688;
                color: white;
            }

    .ui-datepicker-header a.ui-corner-all {
        cursor: pointer;
        position: absolute;
        top: 0;
        width: 2rem;
        height: 2rem;
        border-radius: 0.25rem;
        transition: 0.3s all;
    }

        .ui-datepicker-header a.ui-corner-all:hover {
            background-color: #ECEFF1;
        }

    .ui-datepicker-header a.ui-datepicker-prev {
        left: 0;
        background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMyIgaGVpZ2h0PSIxMyIgdmlld0JveD0iMCAwIDEzIDEzIj48cGF0aCBmaWxsPSIjNDI0NzcwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik03LjI4OCA2LjI5NkwzLjIwMiAyLjIxYS43MS43MSAwIDAgMSAuMDA3LS45OTljLjI4LS4yOC43MjUtLjI4Ljk5OS0uMDA3TDguODAzIDUuOGEuNjk1LjY5NSAwIDAgMSAuMjAyLjQ5Ni42OTUuNjk1IDAgMCAxLS4yMDIuNDk3bC00LjU5NSA0LjU5NWEuNzA0LjcwNCAwIDAgMS0xLS4wMDcuNzEuNzEgMCAwIDEtLjAwNi0uOTk5bDQuMDg2LTQuMDg2eiIvPjwvc3ZnPg==");
        background-repeat: no-repeat;
        background-size: 0.5rem;
        background-position: 50%;
        transform: rotate(180deg);
    }

    .ui-datepicker-header a.ui-datepicker-next {
        right: 0;
        background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMyIgaGVpZ2h0PSIxMyIgdmlld0JveD0iMCAwIDEzIDEzIj48cGF0aCBmaWxsPSIjNDI0NzcwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik03LjI4OCA2LjI5NkwzLjIwMiAyLjIxYS43MS43MSAwIDAgMSAuMDA3LS45OTljLjI4LS4yOC43MjUtLjI4Ljk5OS0uMDA3TDguODAzIDUuOGEuNjk1LjY5NSAwIDAgMSAuMjAyLjQ5Ni42OTUuNjk1IDAgMCAxLS4yMDIuNDk3bC00LjU5NSA0LjU5NWEuNzA0LjcwNCAwIDAgMS0xLS4wMDcuNzEuNzEgMCAwIDEtLjAwNi0uOTk5bDQuMDg2LTQuMDg2eiIvPjwvc3ZnPg==');
        background-repeat: no-repeat;
        background-size: 10px;
        background-position: 50%;
    }

    .ui-datepicker-header a > span {
        display: none;
    }

    .ui-datepicker-title {
        text-align: center;
        line-height: 2rem;
        margin-bottom: 0.25rem;
        font-size: 0.875rem;
        font-weight: 500;
        padding-bottom: 0.25rem;
    }

    .ui-datepicker-week-col {
        color: #78909C;
        font-weight: 400;
        font-size: 0.75rem;
    }

    .ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled {
        opacity: .15;
        -ms-filter: "alpha(opacity=35)";
        background-image: none;
    }

    .ui-datepicker td span, .ui-datepicker td a {
        text-align: center;
    }

    .input-group {
        padding: 12px;
        display: flex;
        align-items: center;
    }

    input[type="checkbox"] {
        width: 18px;
        height: 18px;
    }

        input[type="checkbox"]:checked ~ label {
            color: rgb(15 64 79 / 91%);
        }