footer.main {
    margin-top: 5em;
}



body {
    background-color: #fff;
}

main#course-detail {
    justify-content: center;
    padding-top: 0;
}

    main#course-detail > div.container {
        max-width: 1400px !important;
        display: flex;
        flex-wrap: wrap;
    }

section.course-details {
    position: relative;
    /* width: 60%; */
    overflow: hidden;
    padding: 1em 6% 2em;
}

    section.course-details h2.title {
        font-size: 1.75em;
        margin: 1.1em 0 1.4em;
        color: #444;
        font-weight: 500;
    }

    section.course-details .img {
        border-radius: 0.8em;
        width: 100%;
        padding-top: 75%;
        position: relative;
        overflow: hidden;
        /*background-color: #efefef;*/
    }

        section.course-details .img > img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center top;
            position: absolute;
            left: 0;
            top: 0;
            color: rgba(0,0,0,0);
        }

    section.course-details .spec {
        align-items: center;
        display: flex;
        justify-content: space-between;
        margin: 1.5em 0 1.2em;
    }


        section.course-details .spec > a {
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            color: #355B29;
            font-size: 0.82em;
            font-weight: 500;
            transform: scale(1);
            padding:0.8em;
            border-radius:0.5em;
            transform-origin: center;
        }
            section.course-details .spec > a svg {
                width: 1.3em;
                height: 1.3em;
            }
            section.course-details .spec > a svg path {
                stroke: #355B29;
            }

            section.course-details .spec > a:hover {
                /*transform: scale(1.03);*/
                background-color: #F8F8F9;
            }

                section.course-details .spec > a:hover svg path {
                    stroke: #355b29;
                }

            section.course-details .spec > a > span {
                margin-top: 0.5em;
            }


    section.course-details .teacher {
        margin: 1.5em 0 1em;
        display: flex;
        align-items: center;
    }



        section.course-details .teacher > a {
            margin-top: 0.5em;
            color: #707070;
            font-size: 1.1em;
            font-weight: 500;
            transform: scale(1);
            transform-style: preserve-3d;
            transform-origin: center right;
            display: flex;
            justify-content: start;
            align-items: center;
        }

            section.course-details .teacher > a > img {
                width: 3.3em;
                height: 3.3em;
                border-radius: 50%;
                object-fit: cover;
                object-position: center;
                margin-left: 1em;
                color: rgba(0,0,0,0);
            }

            section.course-details .teacher > a:hover {
                transform: scale(1.03);
            }


    section.course-details div.summary {
        font-weight: 400;
        text-align: justify;
        color: #777;
        font-size: 1em;
        margin: 2.5em 0;
        cursor: text;
    }

        section.course-details div.summary * {
            margin: initial;
            margin: revert;
            padding: initial;
            padding: revert;
            list-style: initial;
            font-weight: initial;
            font-weight: revert;
            text-decoration: initial;
            text-decoration: revert;
            font-style: inherit;
            font-style: revert;
        }

        section.course-details div.summary strong {
            font-weight: 600;
        }

        section.course-details div.summary u {
            text-decoration: underline;
        }

        section.course-details div.summary em {
            font-style: italic;
        }




    section.course-details .course-documents {
        margin-top: 3.5em;
        font-size: 0.92em;
        padding-bottom:2em;
    }

        section.course-details .course-documents .course-documents-menu {
            width: 100%;
            display: table;
            border: solid 1px rgba(112, 112, 112, 0.3);
            border-radius: 0.3em;
            overflow: hidden;
            margin: 0.5em 0;
        }

            section.course-details .course-documents .course-documents-menu ul {
                padding: 0;
                width: 100%;
                display: flex;
            }

            section.course-details .course-documents .course-documents-menu li {
                background-color: #FFFFFF;
                cursor: pointer;
                color: rgba(112, 112, 112, 1);
                font-weight: 500;
                font-size: 1em;
                width: 33.33%;
                padding: 0.5em;
                z-index: 1;
                text-align: center;
            }

                section.course-details .course-documents .course-documents-menu li:hover {
                    background-color: var(--primary-color-ligher);
                    color: #355B29;
                    z-index: 2;
                }

                section.course-details .course-documents .course-documents-menu li.active {
                    margin: -1px 0;
                    background-color: #355B29;
                    color: #fff;
                    z-index: 3;
                }

.course-documents-sections {
    width: 100%;
}

    .course-documents-sections > div {
        position: relative;
        min-width: 100%;
        padding: 0 1em 1em;
        margin: 1em -1em 2em;
        display: none;
    }

        .course-documents-sections > div.active {
            /*display: table;*/
            display: block;
        }

section.course-details .course-documents .docs a {
    display: flex;
    align-items: center;
    justify-content: start;
    flex-wrap: wrap;
    margin: 1.5em 0;
}

    section.course-details .course-documents .docs a div.img {
        background-color: #EFEFEF;
        border-radius: 0.6em;
        padding: 0.8em;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 1em;
        width: 3.2em;
    }

        section.course-details .course-documents .docs a div.img svg {
            width: 1.7em;
            height: 1.7em;
        }

    section.course-details .course-documents .docs a span {
        color: rgba(73, 73, 73, 1);
        font-size: 1em;
        position: relative;
        text-decoration: none;
    }

    section.course-details .course-documents .docs a:hover span {
        text-decoration: underline;
    }

    section.course-details .course-documents .docs a small {
        margin-right: auto;
        font-size: 0.9em;
        color: #8D8D8D;
    }

section.course-details .course-documents .empty,
section.course-details .course-documents .empty {
    width: 100%;
    text-align: center;
    color: #8D8D8D;
    margin: 2.5em 0;
}
/*section.course-details .course-documents .works .works-item {
    padding: 1.5em 0;
    border-bottom: solid 1px rgba(0, 0, 0, 0.1);
}
    section.course-details .course-documents .works .works-item:last-of-type{
        border-bottom:none;
    }

    section.course-details .course-documents .works .works-item p {
        width: 100%;
        padding: 0;
        margin: 0;
        font-size: 0.95em;
        margin-bottom: 0.5em;
        font-weight: 400;
        color: rgba(0,0,0,0.7);
    }
        section.course-details .course-documents .works .works-item a {
            width:100%;
            display:flex;
            justify-content:start;
            align-items:center;
            margin:0.5em 0;
        }
            section.course-details .course-documents .works .works-item a svg{
                width:1.3em;
                height:1.3em;
                margin-left:1em;
            }
            section.course-details .course-documents .works .works-item a span {
                color: #16768f;
                font-size: 1em;
                position: relative;
                text-decoration: none;
            }

            section.course-details .course-documents .works .works-item a:hover span {
                text-decoration: underline;
            }

            section.course-details .course-documents .works .works-item a small {
                margin-right: auto;
                font-size: 0.85em;
                color: #8D8D8D;
            }
section.course-details .course-documents .works .add-works-item {
    box-shadow: 0 5px 14px 0 rgba(19, 19, 23, 0.1);
    border-radius: 0.8em;
    background-color: rgba(0,0,0,0.03);
    border: solid 1px rgba(0,0,0,0.1);
    margin-top:1em;
}
    section.course-details .course-documents .works .add-works-item > a{
        text-align:right;
        display:flex;
        justify-content:start;
        align-items:center;
        padding:1em 2em;
        color:inherit;
        font-weight:600;
        position:relative;
    }
    section.course-details .course-documents .works .add-works-item.active > a {
        padding: 1.5em 2em;
    }
        section.course-details .course-documents .works .add-works-item > a:after {
            position: absolute;
            left: 2em;
            width: calc(100% - 4em);
            height: 1px;
            bottom: 0;
            background-color: rgba(0,0,0,0.1);
            opacity: 0;
            content: "";
        }
            section.course-details .course-documents .works .add-works-item.active > a:after{
                opacity:1;
            }
            section.course-details .course-documents .works .add-works-item > a > svg {
                margin-right: auto;
            }
            section.course-details .course-documents .works .add-works-item.active > a > svg{
                transform:rotateX(180deg);
            }

    section.course-details .course-documents .works .add-works-item .add-form{
        padding:0 1em;
    }
        section.course-details .course-documents .works .add-works-item.active .add-form{
            padding-top:1.5em;
        }

        section.course-details .course-documents .works .add-works-item .add-form textarea {
            height: 6em;
            background-color: transparent;
            outline: none;
            border: none;
            border-bottom: solid 1px rgba(0,0,0,0.2);
        }
        section.course-details .course-documents .works .add-works-item .add-form,
        section.course-details .course-documents .works .add-works-item .add-form button {
            opacity: 0;
            max-height: 0;
            overflow: hidden;
        }
    section.course-details .course-documents .works .add-works-item.active .add-form,
    section.course-details .course-documents .works .add-works-item.active .add-form button {
        opacity: 1;
        max-height: 20em;
    }
    section.course-details .course-documents .works .add-works-item .add-form textarea,
    section.course-details .course-documents .works .add-works-item .add-form input {
        width: 100%;
        margin:0;
        opacity: 0;
        max-height: 0;
        overflow: hidden;
    }

    section.course-details .course-documents .works .add-works-item.active .add-form textarea,
    section.course-details .course-documents .works .add-works-item.active .add-form input {
        opacity: 1;
        max-height: 10em;
        margin: 1em 0;
    }

                section.course-details .course-documents .works .add-works-item .add-form div.actions{
                    width:100%;
                    display:flex;
                    justify-content:center;
                    align-items:center;
                    padding:0;
                }
    section.course-details .course-documents .works .add-works-item.active .add-form div.actions {
        padding: 2em 0;
    }
                    section.course-details .course-documents .works .add-works-item.active .add-form div.actions button {
                        padding: 0.5em 1.5em;
                        border-radius: 0.5em;
                        border: none;
                        margin:0 0.5em;
                        font-weight:500;
                        cursor:pointer;
                    }
                        section.course-details .course-documents .works .add-works-item.active .add-form div.actions button.submit {
                            background-color: #355B29;
                            padding:0.5em 2.5em;
                            color: #fff;
                            border: solid 1px #355B29;
                        }
                        section.course-details .course-documents .works .add-works-item.active .add-form div.actions button.cancel {
                            color: #355B29;
                            background-color:transparent;
                        }
*/



section.course-specification {
    position: -webkit-sticky;
    position: sticky;
    /* width: 40%; */
    background-color: #F8F8F9;
    padding: 3em 6% 6em;
    display: flex;
    flex-wrap: wrap;
    top: 0;
    z-index: 1;
    height: max-content;
}

    section.course-specification > div.row,
    section.course-specification > div.row > div {
        height: max-content;
    }

    section.course-specification h3 {
        color: #2B2E4A;
        font-size: 1.1em;
        font-weight: 500;
        margin-top: 1.5em;
        width: 100%;
    }
    /* 
        section.course-specification h3:first-of-type {
            margin-top: 0;
        } */

    section.course-specification .card {
        background-color: #FFFFFF;
        box-shadow: 0 12px 36px 0 rgba(19, 19, 23, 0.12);
        border-radius: 0.8em;
        display: table;
        margin: 1em 0;
        width: 100%;
        transform: scale(1);
        transform-origin: center;
    }

        section.course-specification .card.hoverable:hover {
            transform: scale(1.03);
            box-shadow: 0 12px 36px 0 rgba(19, 19, 23, 0.15);
        }

        section.course-specification .card > div {
            display: flex;
            align-items: center;
            justify-content: start;
            position: relative;
            padding: 2em 1.5em;
        }

            section.course-specification .card > div::before {
                content: "";
                display: block;
                position: absolute;
                height: 1px;
                width: 100%;
                left: 0;
                background-color: #EFEFEF;
                top: 0;
            }

            section.course-specification .card > div:first-of-type::before {
                display: none;
            }

        section.course-specification .card h4 {
            color: #2B2E4A;
            font-size: 1em;
            font-weight: 500;
            display: inline-flex;
            margin-right: 1em;
            position: relative;
        }

        section.course-specification .card div.icon {
            background-color: #F2F2F5;
            width: 3em;
            height: 3em;
            position: relative;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }

            section.course-specification .card div.icon > img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center;
                color: rgba(0,0,0,0);
            }

            section.course-specification .card div.icon > svg {
                width: 1.5em;
                height: 1.5em;
            }

    section.course-specification .capacity {
        padding-left: 9em;
    }

        section.course-specification .capacity h4 {
            padding-bottom: 1em;
        }

            section.course-specification .capacity h4::after {
                position: absolute;
                content: "ظرفیت کلاس";
                width: 5em;
                right: 0;
                bottom: -0.3em;
                text-align: right;
                color: #8D8D8D;
                font-size: 0.8em;
                font-weight: 400;
            }

        section.course-specification .capacity .capacity-remaining {
            color: #E8901C;
            font-size: 0.8em;
            font-weight: 400;
            margin-right: auto;
        }


    section.course-specification .teacher > a {
        display: inline-flex;
        margin-right: auto;
        font-size: 0.8em;
        font-weight: 400;
        color: #C2C2C2;
        display: flex;
        justify-content: center;
        align-items: center;
    }

        section.course-specification .teacher > a svg {
            transform: translateX(0);
        }

            section.course-specification .teacher > a svg path {
                stroke: #C2C2C2;
            }

        section.course-specification .teacher > a:hover {
            color: #63636c;
        }

            section.course-specification .teacher > a:hover svg {
                transform: translateX(-0.4em);
            }

                section.course-specification .teacher > a:hover svg path {
                    stroke: #74747d;
                }


    section.course-specification .demo {
        padding: 1em 1.5em !important;
        overflow: hidden;
        transform: none;
    }

        section.course-specification .demo > a {
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 100%;
            z-index: 2;
        }

        section.course-specification .demo div.icon {
            height: 2.4em;
            width: 2.4em;
            background-color: #131317;
            box-shadow: 0 12px 36px 0 rgba(19, 19, 23, 0.12);
        }

            section.course-specification .demo div.icon.success,
            section.course-specification .card.hoverable:hover .demo div.icon {
                background-color: #355B29;
            }

            section.course-specification .demo div.icon.fail {
                background-color: #7d0400;
            }

            section.course-specification .demo div.icon > svg {
                height: 1em;
                width: 1em;
            }

            section.course-specification .demo div.icon.success > svg {
                height: 1.1em;
                width: 1.1em;
            }

                section.course-specification .demo div.icon.play > svg.success,
                section.course-specification .demo div.icon.play > svg.fail,
                section.course-specification .demo div.icon.fail > svg.play,
                section.course-specification .demo div.icon.fail > svg.success,
                section.course-specification .demo div.icon.success > svg.play,
                section.course-specification .demo div.icon.success > svg.fail {
                    display: none;
                }

        section.course-specification .demo span.duration {
            color: #C2C2C2;
            font-size: 0.8em;
            margin-right: auto;
            font-weight: 500;
            text-align: left;
        }

    section.course-specification .card.hoverable:hover .demo span.duration {
        color: #63636c;
    }

    section.course-specification .seprator {
        width: 100%;
        height: 1px;
        background-color: #CBCBCB;
        opacity: 0.6;
        margin: 3em 0;
    }

    section.course-specification .price {
        display: flex;
        align-items: start;
        justify-content: space-between;
        margin: 1em 0 0.5em;
        width: 100%;
        position: relative;
    }

        section.course-specification .price > span {
            color: #8D8D8D;
            font-size: 1em;
            font-weight: 500;
        }

        section.course-specification .price > a {
            color: #2B2E4A;
            font-size: 1.05em;
            font-weight: 500;
            max-width: 60%;
            white-space: pre-line;
            text-align: left;
            line-height: 1.6;
        }

    section.course-specification > a.term-register {
        background-color: #355B29;
        text-align: center;
        padding: 1.1em 0;
        color: #ffffff;
        width: 100%;
        box-shadow: 5px 5px 25px rgba(53, 91, 41, 0.3);
        margin: 2em 0 0;
        display: flex;
        justify-content: center;
        font-weight: 500;
        height: 3.6em;
        opacity: 0.9;
        cursor: default;
    }

        section.course-specification > a.term-register.active {
            opacity: 1;
            cursor: pointer;
        }

        section.course-specification > a.term-register > svg {
            width: 0.9em;
            opacity: 0;
            margin-right: 0;
            /* transition: 0.3s; */
        }

        section.course-specification > a.term-register:hover > svg {
            margin-right: 1.5em;
            opacity: 1;
            box-shadow: 5px 5px 25px rgba(53, 91, 41, 0.35);
        }











@media(min-width:576px) {
    section.course-details h2.title {
        font-size: 2em;
    }

    section.course-details {
        padding: 1em 8% 2em;
    }

    section.course-specification .card > div {
        padding-left: 2em;
        padding-right: 2em;
    }
}

@media (min-width:768px) {
    section.course-details h2.title {
        font-size: 2.25em;
    }

    section.course-details {
        padding: 1em 12% 2em 8%;
    }

    section.course-specification {
        padding-top: 2em;
        padding-bottom: 5em;
    }
}

@media (min-width:1024px) {
}