@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 900;
    src: url('../fonts/iransans/eot/IRANSansWeb(FaNum)_Black.eot');
    src: url('../fonts/iransans/eot/IRANSansWeb(FaNum)_Black.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
    url('../fonts/iransans/woff2/IRANSansWeb(FaNum)_Black.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
    url('../fonts/iransans/woff/IRANSansWeb(FaNum)_Black.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('../fonts/iransans/ttf/IRANSansWeb(FaNum)_Black.ttf') format('truetype');
}
@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: bold;
    src: url('../fonts/iransans/eot/IRANSansWeb(FaNum)_Medium.eot');
    src: url('../fonts/iransans/eot/IRANSansWeb(FaNum)_Medium.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
    url('../fonts/iransans/woff2/IRANSansWeb(FaNum)_Medium.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
    url('../fonts/iransans/woff/IRANSansWeb(FaNum)_Medium.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('../fonts/iransans/ttf/IRANSansWeb(FaNum)_Medium.ttf') format('truetype');
}
@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/iransans/eot/IRANSansWeb(FaNum)_Light.eot');
    src: url('../fonts/iransans/eot/IRANSansWeb(FaNum)_Light.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
    url('../fonts/iransans/woff2/IRANSansWeb(FaNum)_Light.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
    url('../fonts/iransans/woff/IRANSansWeb(FaNum)_Light.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('../fonts/iransans/ttf/IRANSansWeb(FaNum)_Light.ttf') format('truetype');
}
@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 200;
    src: url('../fonts/iransans/eot/IRANSansWeb(FaNum)_UltraLight.eot');
    src: url('../fonts/iransans/eot/IRANSansWeb(FaNum)_UltraLight.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
    url('../fonts/iransans/woff2/IRANSansWeb(FaNum)_UltraLight.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
    url('../fonts/iransans/woff/IRANSansWeb(FaNum)_UltraLight.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('../fonts/iransans/ttf/IRANSansWeb(FaNum)_UltraLight.ttf') format('truetype');
}
@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/iransans/eot/IRANSansWeb(FaNum).eot');
    src: url('../fonts/iransans/eot/IRANSansWeb(FaNum).eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
    url('../fonts/iransans/woff2/IRANSansWeb(FaNum).woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
    url('../fonts/iransans/woff/IRANSansWeb(FaNum).woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('../fonts/iransans/ttf/IRANSansWeb(FaNum).ttf') format('truetype');
}

body {
    direction: rtl;
    font-family:iransans, sans-serif;
    line-height:34px;
    font-weight:normal;
    color:#464749;
    font-size:0.87rem;
    background-color: #F8F9FA;
}

.scroller {
    scrollbar-color: #00B4FF #ffffff00;
    scrollbar-width: thin;
}
::-webkit-scrollbar {
    width: 6px;
    height: 6px
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 1)
}

::-webkit-scrollbar-thumb {
    background-color: #00B4FF
}
audio::-webkit-media-controls-enclosure {
    background-color: #00B4FF;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6{
    line-height: 1.6 !important;
}
p{
    line-height: 2.5 !important;
}
a{
    text-decoration: none !important;
}
.ltr{
    direction: ltr !important;
}
.offcanvas-end{
    left: unset !important;
    right: 0px !important;
    transform: translateX(100%);
}
.bg-gray{
    background-color: #EBEBEB !important;
}
.bg-red{
    background-color: #00B4FF;
}
.bg-green{
    background-color: #1FBD50;
}
.bg-footer{
    background-color: #353338;
}
.text-red{
    color:#00B4FF !important;
}
.pointer{
    cursor: pointer;
}
.bold{
    font-weight: bolder;
}
.text-justify{
    text-align: justify;
}
.text-gray{
    color: #4C5C6F;
}
.text-purple{
    color: #be62f7;
}
.btn-hover:hover{
    box-shadow: 0px 0px 8px #00B4FF;
}
.border-dash{
    border: 1px dashed gainsboro;
}
.border-bottom-dash{
    border-bottom: 1px dashed gainsboro;
}
.border-bottom-red{
    border-bottom: 3px solid  #00B4FF ;
}
.button{
    color: white;
    background-color: #00B4FF;
}
.button:hover{
    color: white;
    box-shadow: 0px 0px 10px #00B4FF;
}
.link{
    text-decoration: none;
    color: #464749;
    transition: color 0.3s ease;
}
.link:hover{
    color: #00B4FF;
}

.nowrap{
    white-space: nowrap !important;
}
.teacher-pic{
    width: 60px;
    height: 60px;
}
#main-navbar{
    top: 0px;
    z-index: 1000;
    -webkit-box-shadow:0 .125rem .25rem rgba(0, 0, 0, .075);
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
}
#nav-list .nav-link.active{
    color: #00B4FF;
}
#nav-list .nav-link{
    color: #464749;
}
#nav-list .nav-link:hover{
    color: #00B4FF;
}
#nav-logo img
{
    max-width: 133px;
    max-height: 72px;
}
#nav-btn button , #nav-btn a{
    padding: 10px;
}
#nav-btn button i{
    padding: 4px 8px;
}
.dropdown-toggle::after {
    vertical-align: middle;
}
/*--------------------------HEADER SEARCH BOX-------------------------*/
.searchBox {
    position: absolute;
    top: 50%;
    left: 50%;
    transform:  translate(-50%,50%);
    background: #2f3640;
    height: 40px;
    border-radius: 40px;
    padding: 10px;

}
#header form.search {
    position: relative;
}

#header form.search input {
    width: 100%;
    height: 100%;
    padding: 10px 10px 9px;
    line-height: 1.833;
    font-family:iransans, sans-serif;
    font-weight: 300;
    font-size:  1rem;
    border-radius: 7px;
    background-color: #ffffff;
    border: 1px solid #d5dadd;
    color: #474747;
    outline: none;
}

#header form.search button {
    width: 60px;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border: none;
    border-radius: 7px 0 0 7px;
    background-color: #00B4FF;
    cursor: pointer;
    outline: none;
}

#header form.search button img {
    width: 25px;
}
/*--------------------------HEADER SEARCH BOX-------------------------*/
#course-card .card,#intern-card .card,#blog-card .card{
    border-radius: 15px !important;
    overflow: visible;
    color: #6c757d;
    transition: transform 0.2s;
}
#course-card .card .card-footer,#intern-card .card .card-footer{
    border-bottom-left-radius: 15px !important;
    border-bottom-right-radius: 15px !important;
}

#course-card .card:hover,#intern-card .card:hover,#blog-card .card:hover{
    box-shadow: 0 6px 20px rgba(168, 172, 185, .3);
    transform: translateY(-5px);
}
#course-card .card img,#intern-card .card img,#blog-card .card img{
    border-radius: 15px !important;
    height: 200px ;
}
#course-card .card-body img,#intern-card .card-body img,#blog-card .card-footer img{
    width: 30px;
    height: 30px;
}
#blog-card .cover img{
    height: 170px !important;
}
/*--------------------------BLOG CAROUSEL-------------------------*/

.MultiCarousel { float: left; overflow: hidden; padding: 15px; width: 100%; position:relative; }
.MultiCarousel .MultiCarousel-inner { transition: 1s ease all; float: left; }
.MultiCarousel .MultiCarousel-inner .item { float: left;transition: transform 0.4s ease;}
.MultiCarousel .MultiCarousel-inner .item:hover { transform: translateY(-6px);}
.MultiCarousel .MultiCarousel-inner .item > div { text-align: right; padding:10px; margin:15px; background:#f1f1f1; color:#666;border: unset;border-radius: 15px;overflow: hidden;}
.MultiCarousel .MultiCarousel-inner .item .card-body a{color:#464749;transition: color 0.3s ease;}
.MultiCarousel .MultiCarousel-inner .item .card-body a:hover{color:#00B4FF;}
.MultiCarousel .MultiCarousel-inner .item .card-body{box-shadow: 0px -13px 16px 0px white; border: unset;}



.MultiCarousel .leftLst, .MultiCarousel .rightLst { position:absolute; border-radius:50%;top:calc(50% - 20px); }
.MultiCarousel .leftLst { left:0; }
.MultiCarousel .rightLst { right:0; }

.MultiCarousel .leftLst.over, .MultiCarousel .rightLst.over { pointer-events: none; background:#ccc; }
#blog-carousel .item img{
    height: 170px !important;
}
/*--------------------------BLOG CAROUSEL-------------------------*/
#footer {
    color: white;
    background-color: #353338;
    margin-top: 100px;
}
#footer h5::after{
    content: "";
    width: 20px;
    display: inline-block;
    height: 3px;
    background-color: #00B4FF;
    margin-right: 10px;
}
#footer .list li{
    color: white;
    border: unset;
    background-color: unset;
}

.ltx-overlay-main-waves {
    background-color: #00B4FF;
    display: block;
    height: 64px;
    z-index: 10;
    pointer-events: none;
    overflow: hidden;
    margin-top: -64px;
    mask-image: url(../image/image/wave1.svg);
    -webkit-mask-image: url(../image/image/wave1.svg);
    mask-size: 1940px;
    -webkit-mask-size: 1940px;
    position: absolute;
    left: 0px;
    right: 0;
    transform: scaleX(-1);
}
.ltx-overlay-black-waves{
    background-color: #353338;
    display: block;
    height: 64px;
    z-index: 10;
    pointer-events: none;
    overflow: hidden;
    margin-top: -55px;
    mask-image: url(../image/image/wave2.svg);
    -webkit-mask-image: url(../image/image/wave2.svg);
    mask-size: 1940px;
    -webkit-mask-size: 1940px;
    position: absolute;
    left: 0px;
    right: 0;
}
/*--------------------------BLOG CAROUSEL-------------------------*/

#nav-list .dropdown:hover .dropdown-menu {
    display: flex;
    margin-top: 0;
    min-width:600px;
    border-top: 4px solid #00B4FF;
    right: -100px
}

#nav-list .dropdown:hover .dropdown-menu li {
    border: unset;
}

#offcanvasNavbar .nav-link.active{
    color: #00B4FF;
}
#blog-dl-box button{
    color: white;
    background-color: #00B4FF;
}
#blog-dl-box a{
    text-decoration: none;
    color:#2e2e2e ;
}
#blog-dl-box li:hover a{
    color:#00B4FF ;
}
#blog-search{
    font-size: 16px !important;
    font-weight: 300 !important;
    color: #333 !important;
    line-height: 1.625 !important;

    background-color: #fff !important;
    background-image: url(2022/asset/image/image/blog-search.png) !important;
    background-repeat: no-repeat;
    background-position: 3% 50%;

    border: 1px solid  #4c5c6f50!important;
    border-radius: 4px !important;

    width: 100% !important;
    padding: 15px !important;
    cursor: auto !important;
}
#course-search{
    font-size: 16px !important;
    font-weight: 300 !important;
    color: #333 !important;
    line-height: 1.625 !important;

    background-color: #fff !important;
    background-image: url(2022/asset/image/image/blog-search.png) !important;
    background-repeat: no-repeat;
    background-position: 3% 50%;

    border: 1px solid  #4c5c6f50!important;
    border-radius: 4px !important;
    width: 100% !important;
    padding: 7px !important;
    cursor: auto !important;
}
#commet-box img{
    width: 80px;
}
#course-accord .accordion ul li:hover h6{
    transition: color 0.3s ease;
    color: #00B4FF;
}
#course-accord .accordion-button h5{
    font-size: 1.125rem !important;
}
#course-register a{
    background-color:#1FBD50 ;
    color: white;
    width: 100%;
    padding: 10px;
}
@media screen and (max-width:992px) {
    #course-register{
        position:fixed;
        bottom: 0px;
        right: 0px;
        left: 0px;
        z-index: 1200;
        border-bottom-left-radius: 0%;
        border-bottom-right-radius: 0%;
    }
    #course-register a{
        border-bottom-left-radius: 0%;
        border-bottom-right-radius: 0%;
    }
}
#course-register a:hover{
    color: white;
    box-shadow: 0px 0px 10px #1FBD50;
}
.selec2~span span:nth-child(1) {
    display: inline-block !important;
    width: 100% !important;
    height: 38px !important;
}

.select2-selection__clear {
    display: none;
}

.select2 {
    width: 100% !important;
}


.pagination {
    direction: ltr
}

.pagination .page-item {
    margin: 0 3px
}

.pagination .page-item .page-link {
    border-radius: 50%;
    background-color: #ffffff;
    color: #000000;
    border: 1px solid #87bddb;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pagination .active .page-link {
    background-color: #00B4FF;
    border: 1px solid #cfd1d3;
    color: #ffffff
}

@media screen and (max-width:992px) {
    li.page-item {
        display: none
    }
    .page-item.active,
    .page-item.disabled,
    .page-item:first-child,
    .page-item:last-child,
    .page-item:nth-child( 2),
    .page-item:nth-last-child( 2) {
        display: block
    }
}

.pagination li .page-link:hover {
    background-color: #36b2ea;
    border: 1px solid #cfd1d3;
    color: #ffffff
}

.pagination li.disabled {
    display: none;
}
#course-card .card-footer{
    font-size: 16px;
}
#course-card .card-footer .badge{
    font-size: 18px;
    position: relative;
}
#course-card .card-footer .badge::before{
    content: " ";
    display: block;
    position: absolute;
    width: 10px;
    left: -4px;
    transform: rotate(45deg);
    top: 10px;
    height: 10px;
    background-color: rgb(255, 255, 255);
}
.courses-filter ul li{
    padding: 0.2rem 1rem;
}
.courses-filter ul li::before{
    content: '';
    width: 11px;
    height: 11px;
    display: block;
    background: #fff;
    border: 2px solid #d4dcde;
    position: absolute;
    -webkit-border-radius: 10%;
    -moz-border-radius: 10%;
    border-radius: 30px;
    top: 50%;
    right: 0;
    -webkit-transform: translate(60%, -50%);
    -ms-transform: translate(60%, -50%);
    transform: translate(60%, -50%);
    -webkit-box-shadow: 0 0 0 3px #fff;
    box-shadow: 0 0 0 3px #fff;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
}

.courses-filter ul li:hover{
    background-color:#f8f9fa ;
}
.courses-filter ul li:hover label{
    display: inline-block;
    transform: translateX(-10px);
    transition: all 0.5s ease;
}
.courses-filter ul li:hover::before{
    background-color:#00B4FF !important ;
}

/*************SKILL step bax*************/
#progressbar{
    display: flex;
    justify-content: start;
    flex-wrap: wrap;
    padding: 0px;
}

#progressbar li {
    list-style-type: none;
    font-size: 15px;
    position: relative;
    font-weight: 400;
    text-align: center;
    margin: 10px 0px;
    overflow: hidden;
    display: flex;
    justify-content: center;
}


#progressbar li .card {
    position: relative;
    display: block;
    width: 90%;
    max-width: 230px;
    height: 200px;
    margin-bottom: 10px;
    margin-top: 30px;
    color: white;
    font-weight: bold;
    border-radius: calc(var(--curve) * 1px);
    font-size: 1rem;
    overflow: hidden;
    z-index: 600;
    border: unset;
}
#progressbar li.doc .card{
    border: 6px solid #407CC7;
}
#progressbar li.doc .skill-num{
    background-color:#407CC7;
}
#progressbar li.media .card{
    border: 6px solid #FB9A46;
}
#progressbar li.media .skill-num{
    background-color:#FB9A46;
}
#progressbar li.exam .card{
    border: 6px solid #C74343;
}
#progressbar li.exam .skill-num{
    background-color:#C74343;
}
#progressbar li:before {
    width: 50px;
    height: 50px;
    line-height: 45px;
    display: block;
    font-size: 20px;
    color: #ffffff;
    background: lightgray;
    border-radius: 50%;
    margin: 0 auto 10px auto;
    padding: 2px;
}

#progressbar li:after {
    content: '';
    width: 100%;
    height: 8px;
    background: lightgray;
    position: absolute;
    left: 0;
    top: 45%;
    z-index: 500
}
#progressbar li.pass:after{
    background-color: #00B4FF;
}


:root {
    --surface-color: #fff;
    --curve: 40;
}

#internship_card .badge {
    top: 10px;
    right: 0px;
    padding: 6px 15px 6px 10px;
    background-color: #1FBD50;
}
#internship_card .short-view{
    right: unset !important;
    left: 8px;
}

#internship_card li:not(.pass,.show) .card__image {
    filter: brightness(20%);
}
#internship_card li:not(.pass) .badge {
    background-color: #6C757D;
}
.card__image {
    width: 100%;
    height: auto;
}
@keyframes wink{
    from{
        filter: brightness(20%);
    }
    to{
        filter: brightness(100%);;
    }
}
#internship_card li.start .card__image{
    animation: wink 1s ease 0s infinite alternate;
}

.card__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    background-color: var(--surface-color);
    transform: translateY(100%);
    transition: 0.8s ease-in-out;
}

.card__header {
    position: relative;
    display: flex;
    align-items: center;
    padding: 10px;
    background-color: var(--surface-color);
    transform: translateY(-100%);
    transition: 0.8s ease-in-out;
}

.card__arc_right {
    width: 80px;
    height: 80px;
    position: absolute;
    bottom: 100%;
    right: 0;
    z-index: 1;
}
.card__arc_left {
    width: 80px;
    height: 80px;
    position: absolute;
    bottom: 100%;
    z-index: 1;
    left: 0 ;
    transform: rotateZ(90deg);
}

.card__arc_right path,.card__arc_left path {
    fill: var(--surface-color);
    d: path("M 40 80 c 22 0 40 -22 40 -40 v 40 Z");
}

.card__title {
    text-align: right;
    font-size: 1rem;
    color: #6A515E;
    margin-bottom: 0px;
}
.card__status {
    font-size: .9em;
    color: #6b6a6b;
}
.card__description {
    display: flex;
    justify-content: space-between;
    padding: 0px 20px 5px;
    margin: 0;
    color: #D7BDCA;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.card__description a {
    background-color: #1991C6;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 9px;
}
/*#progressbar li.pass .card:hover .card__overlay {
    transform: translateY(0);
}
#progressbar li.pass .card:hover .card__header {
    transform: translateY(0);
}*/
.skill_trans{
    transform: translateY(0);
}

#progressbar li .skill-num{
    position: absolute;
    z-index: 900;
    color: white;
    font-size: 1.5rem;
    font-weight: bolder;
    padding: 0 3px;
    border-top-right-radius: 24px;
    border-top-left-radius: 24px;
    min-width: 80px;
}
/*************SKILL step bax*************/

#users_skill table th,#users_skill table td{
    padding: .5rem .3rem !important;
    vertical-align: middle !important;
}
#users_skill table img{
    width: 50px;
    border-radius: 100%;
}
#sort-tbl th{
    text-align: center;
}
/********************************comment box************************************/
#comment-box{
    background-color: #AFDAFF73;
}

.comments-container h1 {
    font-size: 36px;
    color: #283035;
    font-weight: 400;
}

.comments-container h1 a {
    font-size: 18px;
    font-weight: 700;
}

.comments-list {
    position: relative;
    padding: 0px;
}

/**
* Comments - details
-----------------------*/
.comments-list:before {
    content: '';
    width: 2px;
    height: 100%;
    background: #c7cacb;
    position: absolute;
    right: 0px;
    top: 0;
}

.reply-list:before,
.reply-list:after {
    display: none;
}

.reply-list li:before {
    content: '';
    width: 30px;
    height: 2px;
    background: #c7cacb;
    position: absolute;
    top: 25px;
    right: -30px;
}


.comments-list li {
    margin-bottom: 15px;
    display: block;
    position: relative;
}

.comments-list li:after {
    content: '';
    display: block;
    clear: both;
    height: 0;
    width: 0;
}

.reply-list {
    padding-right: 30px;
    clear: both;
    margin-top: 15px;
}

/**
* Profile Avatar - ---------------------------*/
.comments-list .comment-avatar {
    width: 55px;
    height: 55px;
    position: relative;
    z-index: 99;
    float: right;
    border: 3px solid #FFF;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.comments-list .comment-avatar img {
    width: 100%;
    height: 100%;
}

.reply-list .comment-avatar {
    width: 51px;
}

.comment-main-level:after {
    content: '';
    width: 0;
    height: 0;
    display: block;
    clear: both;
}

/**
* -------------- Comment Box ---------------------------*/
.comments-list .comment-box {
    position: relative;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}

.comments-list .comment-box:before,
.comments-list .comment-box:after {
    content: '';
    height: 0;
    width: 0;
    position: absolute;
    display: block;
    border-width: 10px 12px 10px 0;
    border-style: solid;
    border-color: transparent #FCFCFC;
    top: 8px;
    right: -11px;
}

.comments-list .comment-box:before {
    border-width: 11px 13px 11px 0;
    border-color: transparent rgba(0, 0, 0, 0.05);
    right: -12px;
}



.comment-box .comment-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #FCFCFC;
    padding: 10px 12px;
    border-bottom: 1px solid #ffdede;
    overflow: hidden;
    -webkit-border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
    border-radius: 4px 4px 0 0;
}
.comment-box .comment-head div{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.comment-box .comment-head i {
    float: left;
    margin-right: 14px;
    position: relative;
    top: 2px;
    color: #A6A6A6;
    cursor: pointer;
    -webkit-transition: color 0.3s ease;
    -o-transition: color 0.3s ease;
    transition: color 0.3s ease;
}

.comment-box .comment-head i:hover {
    color: #03658c;
}

.comment-box .comment-name {
    color: #283035;
    font-size: 14px;
    font-weight: 700;
    float: right;
    margin-left: 10px;
}

.comment-box .comment-name a {
    color: #283035;
}

.comment-box .comment-head span {
    float: right;
    color: #999;
    font-size: 13px;
    position: relative;
    top: 1px;
}

.comment-box .comment-content {
    background: #FFF;
    padding: 12px;
    font-size: 15px;
    color: #595959;
    -webkit-border-radius: 0 0 4px 4px;
    -moz-border-radius: 0 0 4px 4px;
    border-radius: 0 0 4px 4px;
}

.comment-box .comment-name.by-author,
.comment-box .comment-name.by-author a {
    color: #03658c;
}

.comment-box .comment-name.by-author:after {
    content: 'author';
    background: #03658c;
    color: #FFF;
    font-size: 12px;
    padding: 3px 5px;
    font-weight: 700;
    margin-right: 10px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

/** =====================
* Responsive
========================*/
.vcode {
    color: #4d4d4d;
    background-color: rgba(62, 79, 79, 0.25);
    width: 40px;
    width: 2.5rem;
    height: 56px;
    height: 3.5rem;
    /*  background-color: #f7f7f7;*/
    padding: 0;
    text-align: center;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    border: 1px solid #00B4FF;
   -webkit-transition: all 0.1s linear;
    -o-transition: all 0.1s linear;
    transition: all 0.1s linear;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 3px;
    margin: 7px;
    float: left;
}

.vcode:focus {
    border-color: darkred !important;
}
.social-media{
    font-size: 22px;
    float: left;
}
.social-media a{
    margin: 1px;
    color: #97bdf6 !important
}
.social-media a:hover{
    color: #1d76fa !important
}
footer li a{
    color: white;
    text-decoration: none;
}
footer li a:hover{
    color: #00B4FF;
}
.select2-container--default .select2-search--inline .select2-search__field{
    height: 30px !important;
    vertical-align: top !important;
    margin: 0px !important;
}

.form-check{
    display: flex;
    align-items: center;
}
.form-check label{
    margin-right: 0.5rem;
}
#offcanvasCart .card-footer:hover i{
    color: #00B4FF !important;
}
#offcanvasCart .card-footer a{
    height: 20px;
    display: flex !important;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}
#skill-nav {
    background-color: #00B4FF !important;
    border-radius: 15px;
    padding: 5px;
}
#skill-nav .nav-menu a {
    cursor: pointer;
    color: white ;
}

#skill-nav .nav-menu a:hover {
    color: #000000 !important;
    transform: translateX(-8px);
    transition: all 0.5s ease;
}

#skill-nav .nav-menu span {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    color: black;
    width: 25px;
    height: 25px;
    border-radius: 100%;
}
#teacher-info .info{
    border-radius: 100%;
    width: 50px;
    height: 50px;
    border: 1px solid grey;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.3rem;
}
#teacher-info img{
    border: 1px dashed grey;
}
#events .carousel-indicators button{
    background-color: #00B4FF;
}
/* Dropzone css */
/* ------------ */
.dropzone {
    min-height: 100px;
    border: 2px dashed #5A8DEE;
    background: #F2F4F4;
}

.dropzone .dz-message {
    /* dropzone message customization */
    font-size: 1.5rem;
    position: absolute;
    top: 44%;
    right: 0;
    width: 100%;
    height: 100px;
    margin-top: -30px;
    color: #5A8DEE;
    text-align: center;
    line-height: 1.85;
    padding-left: 15px;
    padding-right: 15px;
}

.dropzone .dz-message:before {
    /* dropzone message icon */
    content: '\ea81';
    font-family: 'boxicons';
    font-size: 3.5rem;
    position: absolute;
    top: 30px;
    width: 80px;
    height: 80px;
    display: inline-block;
    right: 50%;
    margin-right: -40px;
    line-height: 1;
    z-index: 2;
    color: #5A8DEE;
    text-indent: 0;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
}

.dropzone .dz-preview {
    background: transparent;
    direction: ltr;
    text-align: left;
}

.dropzone .dz-preview .dz-error-mark,
.dropzone .dz-preview .dz-success-mark {
    background-image: url('../../../images/dropzone/spritemap.png');
}

.dropzone .dz-preview .dz-error-message {
    /* dropzone error message */
    min-width: 113px;
    top: 0;
    right: 0;
}

.dropzone .dz-preview .dz-remove {
    font-size: 1.1rem;
    color: #00B4FF;
    line-height: 2rem;
}

.dropzone .dz-preview .dz-remove:before {
    content: '\eb61';
    font-family: 'boxicons';
    display: inline-block;
    line-height: 1;
    z-index: 2;
    text-indent: 0;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    vertical-align: middle;
    margin-top: -2px;
}

.dropzone .dz-preview .dz-remove:hover {
    text-decoration: none;
    color: #FF2829;
}

/* For Small Screen drop Logo */
@media (max-width: 575px) {
    .dropzone .dz-message:before {
        top: 7.14rem;
    }
}
#details_box button,#rel_box button{
    border-radius: 10px;
}
#details_box button.active,#rel_box button.active{
    color: #fff;
    background-color: #0d6efd;
    border-color: #0d6efd;
}
.red {
    color: red;
}
.green {
    color: green;
}
.discount-badge{
    position: absolute;
    top: -10px;
    left: -10px;
    background: url("../image/image/discont.png") no-repeat;
    width: 55px;
    height: 55px;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
    line-height: 15px;
    font-size: 12px;
    display: flex;
    transform: rotate(-30deg);
    transition: all .3s;
}
.amazing-bnner{
    position: absolute;
    top: -23px;
    height: 65px;
    left: 0px;
    right: 0px;
    margin: auto;
    width: 60%;
    max-width: 250px;
}
.discount-badge.amazing{
    background: url("../image/image/amazing.png") no-repeat !important;
}
#course-card .card:hover .discount-badge{
    transform: rotate(0deg);
}
.short-view{
    position: absolute;
    top: 8px;
    right: 8px;
    background-color:rgba(0, 0, 0, .37) ;
    width: 40px;
    height: 40px;
    justify-content: center;
    align-items: center;
    display: flex;
    color: white;
    text-align: center;
    font-size: 18px;
    border-radius: 100%;
    text-decoration: none;
}
.short-view:hover {
    background-color: rgba(255, 255 , 255);
    color: #6d6d6d;
}

.side-price::before{
    content: '';
    width: 16px;
    height: 16px;
    border-left: 1px dashed #ddd;
    border-radius: 50%;
    background-color: #fff;
    position: absolute;
    top: calc(50% - 8px);
    right: -9px;
}
.side-price::after{
    content: '';
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #fff;
    position: absolute;
    top: calc(50% - 8px);
    left: -9px;
}
.side-price .bold{
    border-left: 1px dashed gainsboro;
}
.side-price{
    color: #777;
    background-color: #f9f9f9 !important;
    border-radius: 10px;
}
.side-price .discount{
    line-height: 18px;
    color: #464749 !important;
}
.side-price .bold{
    font-size: 20px;
}
.social-media .card-body{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.social-media input{
    font-size: 13px;
}
.social-media a{
    background-color: white;
    color: #b1bbbf !important;
    border: 2px solid #b1bbbf;
}
.social-media a:hover{
    color: #00B4FF !important;
}
.search .search-btn{
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
}
i{
    vertical-align: middle !important;
}
/*-------------------------count-down----------------------------------*/
.dir-ltr{
    direction: ltr !important;
}
.flex-c {
    display: flex;
    justify-content: start;
}
.flex-w {
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
}
.how-countdown {
    background-color: #fff;
    border-radius: 18px;
    margin: 5px;
}
.size2 {
    width: 17%;
    height: 50px;
}
.flex-col-c-m {
    -ms-align-items: center;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
}
.l1-txt3 {
    font-family:iransans, sans-serif;
    font-size: 18px;
    color: #555555;
    line-height: 1;
}
.p-b-9 {
    padding: 3px;
    border-radius: 5px;
    margin-bottom: 4px;
}
.s1-txt1 {
    font-family:iransans, sans-serif;
    font-size: 12px;
    color: #7d8da6;
    line-height: 1;
    text-transform: uppercase;
}
.bg-orange{
    background-color: #EA1D21;
}
.blog-social svg{
    position: relative;
    z-index: 2;
    fill: #fff;
    margin-top: 2px;
}
.blog-social .icon::before{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 10px 0 0 10px;
    -webkit-transform: skewX(-10deg);
    transform: skewX(-10deg);
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    z-index: 1;
    width: 86px;
}
.blog-social  svg{
    height: 48px;
    margin-right: 8px;
    width: 50px;
}
.blog-social .telegram .icon::before{
    -webkit-box-shadow: -13px 0 rgba(94,186,232,.2), -23px 0 rgba(94,186,232,.1);
    box-shadow: -13px 0 rgba(94,186,232,.2), -23px 0 rgba(94,186,232,.1);
    background: #5ebae8;
}
.blog-social .youtube .icon::before{
    -webkit-box-shadow: -13px 0 rgba(254,114,103,.2), -23px 0 rgba(254,114,103,.1);
    box-shadow: -13px 0 rgb(255 19 0 / 20%), -23px 0 rgb(255 19 0 / 10%);
    background: #ff004f;
    background: linear-gradient(295deg, #ff004f 0%,#ff1a00 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f76290", endColorstr="#fe7464", GradientType=1);
}
.blog-social .aparat .icon::before{
    -webkit-box-shadow: -13px 0 rgba(254,114,103,.2), -23px 0 rgba(254,114,103,.1);
    box-shadow: -13px 0 rgb(217 103 254 / 20%), -23px 0 rgb(189 103 254 / 10%);
    background: #be62f7;
    background: linear-gradient(295deg,#d262f7 0%,#9f64fe 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f76290", endColorstr="#fe7464", GradientType=1);
}
.blog-social .instagram .icon::before{
    -webkit-box-shadow: -13px 0 rgba(115, 210, 170, 0.2), -23px 0 rgba(88, 174, 217, 0.1);
    box-shadow: -13px 0 rgba(115, 210, 170, 0.2), -23px 0 rgba(88, 174, 217, 0.1);
    background: #65ea56;
}
#details_box_view figure.image img{
    max-width: 100%;
}

.breadcrumb{
    display: flex;
    align-items: center;
    height: 130px;
}
.breadcrumb p  ,.breadcrumb a{
margin-bottom: 0px;
    color: white;
}
.banner-new{
    position: absolute;
    top: -7px;
    height: 45px;
    right: -6px;
    z-index: 900;
    width: 50px;
}
button .banner-new{
    top: -5px;
    height: 40px;
    right: -5px;
}
h2 .banner-new{
    top: -9px;
}
@media screen and (max-width:992px) {
    h2 .banner-new{
        top: -6px;
    }
}
.banner-highlight{
    position: absolute;
    top: -7px;
    height: 60px;
    left: -9px;
    z-index: 900;
    width: 70px;
}
.modal-max{
    max-width: unset !important;
}
.modal .searchBox {
    position: absolute;
    top: 50%;
    left: 50%;
    transform:  translate(-50%,50%);
    background: #2f3640;
    height: 40px;
    border-radius: 40px;
    padding: 10px;

}
.modal form.search {
    position: relative;
}

.modal form.search input {
    width: 100%;
    height: 100%;
    padding: 10px 10px 9px;
    line-height: 1.833;
    font-family:iransans, sans-serif;
    font-weight: 300;
    font-size:  1rem;
    border-radius: 7px;
    background-color: #ffffff;
    border: 1px solid #d5dadd;
    color: #474747;
    outline: none;
}
#header .head_text{
color: #4C5C6F;
    text-align: justify;
    line-height: 3rem !important;
    margin-bottom: 1.5rem !important;
}
ul, #myUL {
    list-style-type: none;
}

/* Remove margins and padding from the parent ul */
#myUL {
    margin: 0;
    padding: 0;
}

/* Style the caret/arrow */
.caret {
    cursor: pointer;
    user-select: none; /* Prevent text selection */
}

/* Create the caret/arrow with a unicode, and style it */
.caret::before {
    content: "\25C0";
    color: rgb(255, 255, 255);
    display: inline-block;
    margin-left: 6px;
}
#myUL li span:not(.caret)::before{
    content: "\21E0";
    color: rgb(255, 255, 255);
    display: inline-block;
    margin-left: 6px;
    font-weight: bolder;
    font-size: 18px;
}

/* Rotate the caret/arrow icon when clicked on (using JavaScript) */
.caret-down::before {
    transform: rotate(-90deg);
}

/* Hide the nested list */
.nested {
    display: none;
}

/* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */
.active {
    display: block;
}
.heading-modal {
    background-color: #AFDAFF;
}