.card-text {
    word-wrap: break-word !important;
}
body {
    background-color: #f6f4f4;
}

h1 {
    font-size: calc(5vw + 2vh);
}

.video-frame {
    border-radius: 40px;
}
.course-image img {
    border-radius: 40px;
}

.badge {
    font-size: 1.7rem;
    box-shadow: 2px 2px 10px #b9b9b9;
    font-weight: 500;
    background-color: #fff;
}

.watch-button {
    min-height: 4rem;
    padding: 0 3rem;
    border-radius: 50px;
    font-size: 1.9rem;
    font-weight: 500;
    color: #fff;
}

.watch-button .text-muted {
    color: #fff !important;
    font-size: calc(1vw + 1vh);
}

.release-date {
    font-size: calc(0.8vw + 0.8vh);
}

.watch-button:focus {outline:0;}

.cv-course-container p {
    margin-bottom: 0;
    font-size: 1vw;
}

.instructor h2 {
    font-size: 2vw;
    font-weight: 600;
}

.instructor h3 {
    font-size: 1.3vw;
    font-weight: 200;
}

@media screen and (max-width: 991px) {
    .cv-course-container p {
        font-size: 1.3vw;
    }
}

@media screen and (max-width: 650px) {
    .cv-course-container p {
        font-size: 1.3vh;
    }

    .instructor h3 {
        font-size: 1.3vh;
    }

    .instructor h2 {
        font-size: 2vh;
    }
}

.learning-description {
    border-radius: 50px 0 50px;
    background-color: #e9e9e9;
    box-shadow: #c1c1c1 0px 0px 16px;
    /* box-shadow: #00a19a 0px 0px 16px -4px; */
}

.learning-description ol {
    margin-left: 1.5rem;
}

.instructor {
    background-color: #505050;
    color: #fff;
}

.instructor img {
    min-width: 130px;
    max-width: 11vw;
}

@media screen and (max-width: 1292px) and (min-width: 992px) and (max-height: 800px) {
    .course-row
    {
        max-height: 325px;
    }
}

.course-rating
{
    font-size: calc(1vw + 1vh);
}

.blocked {
    text-decoration: line-through;
}

.blocked:active
{
    animation: shake 0.05s 2;
}

@keyframes shake
{
    0% { transform: translate(2px, 0px)  }
    50% { transform: translate(-4px, 0px)  }
    100% { transform: translate(2px, 0px) }
}

.review-circle {
    height: calc(6vw + 6vh);
    width: calc(6vw + 6vh);
    background-color: rgba(0,161,154,1);
    color: #fff;
    border-radius: 50%;
}

.review-circle i {
    font-size: calc(3.5vw + 3.5vh);
}

.reviews {
    color: #636363;
}

.reviews h2 {
    font-size: calc(2vw + 2vh);
    font-weight: 600;
}

.reviews h3 {
    font-weight: 400;
    font-size: calc(1.2vw + 1.2vh);
}

.reviews p {
    font-weight: 300;
    font-size: calc(1vw + 1vh);
}

.nav-link {
    color: #444444 ;
}

.nav-link:hover {
    color: rgba(0,161,154,1) !important;
}

.nav-link.active {
    color: rgba(0,161,154,1) !important;
    background-color: #eaeaea !important;
}

.tab-pane {
    min-height: 46vh;
}

.separator {
    display: flex;
    align-items: center;
    text-align: center;
    color: rgb(105, 105, 105);
    font-size: 1.3rem;
}
  
.separator::before,
.separator::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #ccc;
    margin-top: 0.3rem;
}

.separator:not(:empty)::before {
    margin-right: .25em;
}

.separator:not(:empty)::after {
    margin-left: .25em;
}

.about-button {
    margin-top: 12px;
    text-align: center;
    font-size: 1.1rem;
    color: #000;
}

@media (max-width: 449px) {
    .watch-button {
        padding: 0 1.39rem;
        font-size: 1.4rem;
    }
}

@media (max-width: 768px) {
    .about-button {
        margin-top: 4px;
        margin-bottom: 10px;
    }
    
    .badge {
        font-size: 1.4rem;
    }
}

@media (max-width: 1248px) and (min-width: 992px) {
    .watch-button {
        padding: 0 2rem;
        font-size: 1.5rem;
    }
}