body {
    background: #FFF5E5 !important;
}
 h6{
    letter-spacing: 2px;
    text-decoration: none;
    position: relative;
    display: inline-block;
}
 h6 > small {
    color: var(--primary-color);
    background: rgba(56, 132, 146, 0.1);
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 10px;
    letter-spacing: 1px;
}
.course-image{
    width: 75%;
    height: auto;
    border-radius: 5px;
}
input{
    margin: 0 0 5px 0 !important;
}
.btn-action {
    background: var(--primary-color);
    border-radius: 20px;
}
.course-content > p {
    text-align: justify;
    letter-spacing: 1px;
}
.course-details-box{
    border: 1px solid #ccc;
    margin: 5px 0px;
    border-radius: 5px;
    padding: 20px 10px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}
.modal { width: 45% !important ;}
.close-modal{
    top: 10px;
    position: fixed;
    right: 10px;
}
.course-details > i{
    color: var(--primary-color);
    font-size: 35px;
    display: inline-flex;
    vertical-align: sub;
}
.course-details > div > small{
    color: #5c5c5c;
}
.course-details > div > div {
    font-size: 13px;
}
@media screen and (course-imagex) {
    .course-details{
        text-align: center;
    }
    .modal { width: 60% !important ;}
}
@media screen and (max-width: 600px) {
    .modal { width: 90% !important ;}
}
.form-card{
    margin: -0.5rem 0 1rem 0 !important;
}
.form-card > div > h6{
    margin: 20px 0;
    letter-spacing: 1px;
    font-size: 22px;
}
.form-card > div > h6 > small{
    color: var(--primary-color);
}