:root {
            --primary-color: #283593;
                --secondary-color: #fff;
                --text-color: #040404;
                --gradient: linear-gradient(to right top, #512DA8, #26A69A, #3F51B5, #1E88E5, #512DA8);
        }
   
   .filter-box {
        position: relative;
        margin-bottom: 50px;
    }

    .filter-box .filter-categories {
        position: absolute;
        left: 0px;
        top: 100%;
        right: 0px;
        z-index: 1;
        opacity: 0;
        visibility: hidden;
        padding: 40px 30px;
        transition: all 500ms ease;
        -moz-transition: all 500ms ease;
        -webkit-transition: all 500ms ease;
        -ms-transition: all 500ms ease;
        -o-transition: all 500ms ease;
        background-color: #fffef7;
        box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.15);
    }

    .filter-box .filter-categories.active {
        opacity: 1;
        visibility: visible;
    }

    .filter-box .box-inner .filter-dropdown:hover .filter-categories {
        opacity: 1;
        visibility: visible;
    }

    .filter-box .filter-categories .column {
        position: relative;
        width: 20%;
        float: left;
    }

    .filter-box .filter-categories h6 {
        position: relative;
        color: #0c0d24;
        font-weight: 500;
        line-height: 1.3em;
        margin-bottom: 20px;
    }

    .filter-box .filter-categories .form-group {
        margin-bottom: 10px;
    }

    .filter-box .filter-categories .form-group:last-child {
        margin-bottom: 0px;
    }

    .filter-box .filter-categories .form-group .select-box {
        position: relative;
    }

    .filter-box .filter-categories .form-group .select-box label {
        position: relative;
        font-size: 15px;
        color: #0c0d24;
        font-weight: 400;
        cursor: pointer;
        margin-bottom: 0px;
        padding-left: 35px;
        line-height: 1.6em;
    }

    .filter-box .filter-categories .form-group .select-box input[type="checkbox"] {
        position: absolute;
        left: 0px;
        top: 2px;
        width: 19px;
        height: 19px;
        visibility: hidden;
        background-color: var(--secondary-color);
    }

    .filter-box .filter-categories .form-group .select-box .default-check {
        position: absolute;
        left: 0px;
        top: 2px;
        width: 19px;
        height: 19px;
        background-color: var(--secondary-color);
        border: 1px solid #cfcfcf;
    }

    .filter-box .filter-categories .form-group .select-box .check-icon {
        position: absolute;
        content: '\f00c';
        left: 0px;
        top: 2px;
        width: 19px;
        height: 19px;
        color: var(--primary-color);
        z-index: 99;
        font-size: 14px;
        line-height: 19px;
        text-align: center;
        opacity: 0;
        font-family: 'FontAwesome';
    }

    .filter-box .filter-categories .form-group .select-box input[type="checkbox"]:checked+label .check-icon {
        opacity: 1;
    }

    .default-form .select-amount {
        position: relative;
        margin-bottom: 20px;
    }

    .default-form .select-amount .select-box {
        position: relative;
        float: left;
        text-align: center;
        margin: 0px 20px 10px 0px;
    }

    .default-form .select-amount .input-box {
        position: relative;
        float: left;
        width: 290px;
    }

    .default-form .select-amount .select-box input[type="radio"] {
        left: 0px;
        top: 0px;
        visibility: hidden;
        position: absolute;
        opacity: 0;
    }

    .default-form .select-amount .select-box label {
        display: block;
        line-height: 22px;
        padding: 13px 28px;
        text-align: center;
        font-size: 16px;
        font-weight: 700;
        color: #333333;
        border: 1px solid #e0e0e0;
        cursor: pointer;
        border-radius: 50px;
        transition: all 500ms ease;
        font-family: 'Roboto Slab', serif;
    }

    .default-form .select-amount .select-box input[type="radio"]:checked+label {
        background: #ff5722;
        border-color: #ff5722;
        color: var(--secondary-color);
    }





    .filter-box .box-inner {
        position: relative;
        padding: 10px 10px;
        background-color: #f6f5ef;
    }

    .filter-box .box-inner .dropdown-outer {
        position: static;
        float: left;
    }

    .filter-box .box-inner .filter-dropdown {
        position: static;
        width: 125px;
        height: 45px;
        float: left;
        color: var(--primary-color);
        font-size: 16px;
        margin-right: 10px;
        padding: 10px 20px;
        border-radius: 5px;
        display: inline-block;
        border: 1px solid var(--primary-color);
    }

    .filter-box .box-inner .filter-dropdown:before {
        position: absolute;
        content: '';
        left: 0px;
        bottom: 0px;
        width: 125px;
        height: 10px;
        display: block;
    }

    .filter-box .box-inner .filter-dropdown .icon {
        position: relative;
        margin-right: 4px;
    }

    .filter-box .box-inner .filter-dropdown .arrow {
        position: absolute;
        left: 112px;
    }

    .filter-box .box-inner .view-list {
        position: relative;
        float: left;
        margin-top: 6px;
    }

    .filter-box .box-inner .view-list li {
        position: relative;
        margin-right: 5px;
        display: inline-block;
    }

    .filter-box .box-inner .view-list li a {
        position: relative;
        width: 36px;
        height: 33px;
        color: #7a7b83;
        line-height: 33px;
        border-radius: 3px;
        text-align: center;
        display: inline-block;
        background-color: var(--secondary-color);
        -webkit-transition: all 300ms ease;
        -ms-transition: all 300ms ease;
        -o-transition: all 300ms ease;
        -moz-transition: all 300ms ease;
        transition: all 300ms ease;
    }

    .filter-box .box-inner .view-list li.active a,
    .filter-box .box-inner .view-list li a:hover {
        color: var(--secondary-color);
        background-color: var(--primary-color);
    }

    .filter-box .box-inner .total-course {
        position: relative;
        color: #06092d;
        font-size: 16px;
        margin-top: 8px;
        margin-right: 15px;
    }

    .filter-box .box-inner .total-course span {
        color: var(--primary-color);
        font-size: 20px;
        font-weight: 700;
    }

    .card {
        /* box-shadow: 0px 0px 2px 2px #363636; */
        margin-bottom: 20px;
    }

    .card-title {

        font-size: 18px;
        font-weight: 700;
        color: var(--text-color);
    }

    .card-text {
        font-size: 12px;
        
    }

    .card-enroll-btn {
      
        position: absolute;
        right: 15px;
        top: 200px;
        color: var(--secondary-color);
        padding: 4px 8px;
        border-radius: 2px;
        display: inline-block;
        background-color: var(--primary-color);
        text-transform: uppercase;
            border: var(--primary-color);
            
    }

    .card-duration,
    .card-price {
        position: relative;
            color: var(--primary-color);
            padding: 3px 8px;
            border-radius: 2px;
            display: inline-block;
            background-color: var(--primary-color)00;
            text-transform: uppercase;
            font-weight: 700;
            border: var(--primary-color);
    
    }


        .btn:hover {
            color: #fff;
            background-color: var(--primary-color);
            border-color: var(--primary-color);
            font-weight: 800;
        }

   .modal-header{
        background-color: var(--primary-color);
            color: white;
   }

   .form-group{
    margin-top: 14px;
   }