* {
    font-family: 'Poppins', sans-serif;
}

html {
    scroll-behavior: smooth;
}

header {
    height: 190px;
    background-image: url(https://res.cloudinary.com/people-matters/image/upload/f_auto,q_auto/v1605643063/benext-website/course_background.png);
    background-position: center;
    background-size: cover;
    background-color: black;
    color: rgb(231, 231, 231);
}

header .rating {
    font-size: 0.80rem;
}

.main-website-block {
    width: 100% !important;
}

.main-website-block.cart {
    width: calc(100% - 200px) !important;
}

.right-side-cart {
    width: 200px;
    padding-top: 90px !important;
    border-left: 2px solid #ccc;
}

.down-arrow::before {
    display: inline-block;
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-bottom: 0;
    border-left: .3em solid transparent;
}

.up-arrow::before {
    display: inline-block;
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
    border-top: 0;
    border-right: .3em solid transparent;
    border-bottom: .3em solid;
    border-left: .3em solid transparent;
}

.background-main {
    height: 500px;
    background-color: #F5F6F8;
    background-size: contain;
    min-height: 10rem;
    margin-top: 82px;
}

.inside-main-page, .cart-main-page {
    margin-top: 82px;
}

.top-heading {
    margin-top: 32px;
    font-size: 34px;
    font-weight: 600;
}

.top-heading-button {
    border-radius: 12px;
}

.yellow {
    color: #ffc82e;
}

.circle {
    height: 250px;
    width: 250px;
    border-radius: 50%;
    border: solid 1px;
    transform: scale(1.2,1.2);
}

.img-circle {
    border-radius: 90%;
}

.circle-bellow-text-color {
    color: #756d6d;
}

.sub-box {
    background-color: #ffc82e;
    border-radius: 12px;
    left: 10%;
    top: -34px;
}

.sub-box input, #get-in-touch input, #get-in-touch textarea, #dedicated-form input, #dedicated-form textarea {
    background: none;
    border: 0;
    border-bottom-color: currentcolor;
    border-bottom-style: none;
    border-bottom-width: 0px;
    border-bottom: 2px solid #999;
    box-shadow: none;
    border-radius: 0;
    padding: 0 0 15px 0;
    margin-right: 20px;
    color: #FFFFFF;
}

.sub-box input {
    padding: 0 0 4px 0;
}

.margin-sub {
    margin-top: 140px;
}

.sub-box-intouch {
    left: 10%;
    top: -80px;
}

.design-thinking {
    /*         left: 10%;
             top: -80px;*/
}

.the-course-swiper {
    margin-top: -20px;
}

.subscription {
    margin-top: -20px;
}

:root {
    --star-size: 20px;
    --star-color: #fff;
    --star-background: #fc0;
}

.Stars {
    --percent: calc(var(--rating) / 5 * 100%);
    display: inline-block;
    font-size: var(--star-size);
    font-family: Times;
    line-height: 1;
}

.Stars::before {
    content: '★★★★★';
    letter-spacing: 3px;
    background: linear-gradient(90deg, var(--star-background) var(--percent), var(--star-color) var(--percent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

#description .point::before,
.course-title::before {
    content: '.';
    font-weight: bold;
    color: #ffc82e;
    margin-right: 10px;
    font-size: 40px;
    line-height: 1;
}

.course-title::before {
    line-height: 0.2;
}

.course-info-box {
    background-color: #fafafa;
    margin-top: -160px;
    border-radius: 15px;
}

.course-info-box .course-info {
    font-size: 0.90rem;
}

.enroll-now {
    margin-top: -36px;
}

.course-carousel .accordion .card {
    border-radius: 20px !important;
}

.carousel-title {
    background-color: #ffc82e;
    color: #000;
    border-radius: 20px !important;
}

.carousel-title button {
    color: #000;
    text-decoration: none;
    font-weight: 600;
}

.carousel-title button:hover {
    text-decoration: none;
    color: #000;
}

.course-title,
.course-duration,
.assignment-p {
    font-size: 0.88rem;
    font-weight: 300;
}

.course-duration {
    min-width: 70px;
}

.course-icon {
    width: 22px;
}

.certificate-img {
    margin-top: -120px;
}

.swiper-before::before {
    content: "";
    background-image: url(https://res.cloudinary.com/people-matters/image/upload/f_auto,q_auto/v1605812693/benext-website/swiper_element.png);
    width: 115px;
    height: 115px;
    position: absolute;
    top: -80px;
    left: -80px;
}


.newsletter-field {
    border: 0;
    border-bottom-color: currentcolor;
    border-bottom-style: none;
    border-bottom-width: 0px;
    border-bottom: 2px solid #002354;
    border-radius: 0;
    outline: none;
    padding-left: 3px;
}

.coming-soon-tag {
    position: absolute;
    background-color: red;
    color: #fff;
    font-size: 0.86rem;
    padding: 5px 10px;
    font-weight: 500;
}

footer .signup-button {
    position: absolute;
    right: 0;
    bottom: 10px;
}

#dedicated-form {
    background-color: #515152;
    color: #fff;
}

@media screen and (max-width: 765px) {
    header {
        height: 400px;
    }

    .main-website-block.cart {
        width: 100% !important;
    }

    .inside-main-page, .cart-main-page {
        margin-top: 60px;
    }

    a.navbar-brand img {
        width: 90px;
    }
}

@media screen and (max-width: 576px) {
    header {
        height: 400px;
    }

    .main-website-block.cart {
        width: 100% !important;
    }

    .background-main {
        height: 925px;
        margin-top: 60px;
    }

    .inside-main-page, .cart-main-page {
        margin-top: 60px;
    }

    .circle-bellow-text {
        margin-top: 5px;
    }

    .circle {
        position: unset;
        margin: 0 auto;
        transform: scale(1,1);
    }

    .sub-box {
        left: 0px;
    }

    .subscription {
        position: relative;
    }

    .mobile-sub-input {
        width: 180px;
    }

    .margin-sub {
        margin-top: 50px;
    }

    .sub-box-intouch {
        left: 0px;
    }

    .design-thinking {
        /*         left: 10%;
                 top: -80px;*/
    }

    .the-course-swiper {
        margin-top: 20px;
    }

    .subscription {
        margin-top: 0;
    }

    .course-info-box {
        margin-top: 20px;
    }

    a.navbar-brand img {
        width: 90px;
    }

    .cc {
        text-align: center;
    }
}