:root{
    --colorone: #0C043E;
    --colortwo: #6E7197;
    --colorthree: #224C82;
    --colorfour: #FFC107;
    --light: #E7EDFA;
    --bgcolor: #0B192B;
    --bordercolor: #3A77C4;
}
.hide{
    display: none !important;
}


main{
    background: var(--bgcolor);
}

.large{
    right: 2.5vw;
    width: 50vw !important;
}
.small{
    width: 25vw;
}


.wrapper{
    position: relative;
    margin: 0 auto;
    width: 70% !important;
    height: auto;
}
.wrapper-title{
    align-self: flex-start;
}
.horizontal-wrapper{
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.vertical-wrapper{
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.align-start{
    align-items: flex-start;
    justify-content: flex-start;
}




.hero{
    position: relative;
    width: 100%;
    height: auto;
    padding: 15vh 0 5vh;
    background: var(--bgcolor);
    border-bottom-left-radius: 6rem;
}


.overview-wrapper{
    align-items: flex-start !important;
}


.overview-video{
    position: relative;
    width: 100%;
    height: 65vh;
    margin-bottom: 2.5vh;
    border-radius: 1rem !important;
}




.overview-wrapper .content .course-title{
    color: #FFF;
    font-size: 2vw;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
}
.overview-wrapper .content .course-category{
    color: #B6C3D4;
    font-weight: 500;
}

.star-rating-wrapper{
    position: relative;
    width: auto;
    margin-bottom: .5vh;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.star-rating-wrapper i{
    margin: 0 .25vw;
    color: #E2E6EC;
}
.star-rating-wrapper i.fill{
    margin: 0 .25vw;
    color: var(--colorfour);
}
.reviews-count{
    color: var(--light);
    font-family: 'Poppins', sans-serif;
    text-align: center;
    font-size: .9vw;
}


.overview-wrapper .course-desc{
    position: relative;
    width: auto;
    margin-top: 2.5vh;
    font-size: 1vw;
    color: #B6C3D4;
    text-align: left;
    align-self: flex-start;
}



.course-data-section{
    position: relative;
    width: 100%;
    height: auto;
    padding: 10vh 10vw;
    background: #FFF;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    border-top-right-radius: 6rem;
}
@media (min-width: 1820px) {
    .course-data-section{
        margin-bottom: 10vh;
    }
}
.course-data-wrapper{
    position: relative;
    width: 70%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
}

.curriculum-details{
    position: relative;
    width: 50%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    color: #988C86;
}


#price-card-wrapper{
    position: absolute;
    top: 0;
    right: -5vw;
    width: auto;
    /* height: 100vh; */
}

.price-card{
    position: sticky;
    top: 15vh;
    right: 0;
    width: 22vw;
    height: auto;
    padding: 3vh 2vw;
    border-radius: .5rem;
    background: #132741;
    z-index: 10;
}

.course-category-img{
    position: relative;
    width: 6vw;
    margin-bottom: 2vh;
}
.price-card .course-title{
    color: #FFF;
    font-size: 1.6vw;
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
    text-align: center;
}
.price-card .course-category{
    margin-bottom: 2vh;
    color: #FFF;
    font-size: 1.125vw;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
}


.price-card .course-keypoints{
    position: relative;
    width: 100%;
    margin-bottom: 1vh;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}
.price-card .course-keypoints p{
    color: #FFF;
    text-transform: capitalize;
    font-size: .9vw;
}
.price-card .course-keypoints .lessons{
    color: rgb(214, 30, 30);
}
.price-card .course-keypoints .duration{
    color: rgb(23, 153, 228);
}
.price-card .course-keypoints .languageico{
    color: var(--light);
}
.price-card .course-keypoints .level{
    color: var(--colorfour);
}

.price-card .course-keypoints .enrolled{
    color: #49ADF4;
}
.enrolled::before{
    content: '';
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    background: #FFF;
    border-radius: 50%;
}


.price-card .discount-form{
    position: relative;
    padding: .25rem;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background: var(--light);
    color: #000;
    border-radius: 12px;
}
.price-card .discount-form input{
    position: relative;
    width: 100%;
    margin-right: .5rem;
    padding-left: .5rem;
    border: none;
    outline: none;
    font-size: .8rem;
    background: transparent;
}
.price-card .discount-form button{
    position: relative;
    padding: .5rem;
    background: #006ADA;
    color: #FFF;
    font-size: .8rem;
    outline: none;
    border: none;
    border-radius: inherit;
}
.remove-coupon{
    transform: translateX(-1rem);
    font-size: .8rem;
    color: rgb(255, 75, 75);
}


.price-card .pricing-wrapper{
    position: relative;
    margin-top: 2vh;
}
.price-card .pricing-wrapper h1{
    color: #FFF;
    font-size: 1.5vw;
    font-weight: 500;
}
.ruppee-symbol{
    position: relative;
    font-size: 1.5vw;
}


.price-card .pricing-wrapper .buy-btn{
    position: relative;
    width: 100%;
    margin-top: 2vh;
    height: 8vh;
    border-radius: .5rem;
    color: #FFF;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: 1.25vw;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    background: linear-gradient(90deg, rgb(185, 135, 235), rgb(50, 50, 180));
    transition: all .3s ease;
}
.buy-btn:hover{
    filter: hue-rotate(-120deg);
}


.progress-track{
    position: relative;
    margin: .5vh auto 2vh;
    width: 100%;
    height: 1.5vh;
    background: aquamarine;
    border-radius: 16px;
}
.progress-track--inner{
    position: absolute;
    left: 0;
    height: 100%;
    border-radius: inherit;
    background: #006ADA;
}
.progress-num{
    position: absolute;
    bottom: -2.25vh;
    right: .5vw;
    font-size: .7vw;
    color: #78777A;
}



.accordion-wrapper{
    position: relative;
    width: 100%;
    height: auto;
}
.toggle-accordions{
    position: relative;
    cursor: pointer;
}
.accordion-div--main{
    position: relative;
    width: 100%;
    height: auto;
    margin: 2vh 0;
    padding: 1.5vh 1.5vw;
    border-radius: .5rem;
    background: #FFF;
    border: 1px solid var(--light);
    display: flex;
    flex-direction: row;
    align-items: center;
    cursor: pointer;
}
.accordion-icon-box{
    position: relative;
    width: 2vw;
    height: 3.25vh;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.accordion-icon-box .bi-dash-lg{
    position: absolute;
    top: 0;
    font-size: 1.35vw;
    color: #026DDD;
}
.movable{
    transition: .3s ease-in-out all;
}
.accordion-title{
    color: #026DDD;
    font-size: 1.125vw;
    font-weight: 600;
}

.accordion-content{
    position: relative;
    top: -2vh;
    left: 0;
    width: 100%;
    height: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgb(240, 248, 255);
}
.active{
    height: auto;
    display: flex !important;
}
.accordion-doc{
    position: relative;
    width: 100%;
    height: 8vh;
    padding: 0 1vw;
    border-top: 1px solid azure;
    border-bottom: 1px solid rgb(220, 220, 220);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}
.accordion-doc-icon{
    position: relative;
    margin-right: 1vw;
    font-size: 1vw;
    color: #78777A;
}
.accordion-doc-title{
    font-size: 1vw;
    font-family: 'Poppins', sans-serif;
    color: #78777A;
}



.objectives-container{
    position: relative;
    width: 100%;
    margin: 4vh 0;
    padding: 3vh 2vw;
    border-radius: .5rem;
    border: 1px solid var(--light);
}
.objectives-wrapper{
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
}
.objectives-wrapper .objectives{
    position: relative;
    width: 45%;
    height: auto;
    margin: 1vh 0;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start !important;
}
.objectives i{
    font-size: .9vw;
    margin-right: .5vw;
    color: rgb(0, 145, 55);
}
.objectives p{
    font-size: .9vw;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: #78777A;
    text-align: left;
}


.req-wrapper{
    position: relative;
    width: 100%;
    margin-bottom: 5vh;
}
.req-wrapper .wrapper-title{
    margin-bottom: 1rem;
}
.req-div{
    position: relative;
    width: 100%;
    margin-bottom: 1vh;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start !important;
}
.req-ico{
    font-size: 1vw;
    margin-right: .5vw;
    color: var(--bordercolor);
}
.req-txt{
    font-size: 1vw;
    font-family: 'Poppins', sans-serif;
    color: #78777A;
}


.target-wrapper{
    position: relative;
    width: 100%;
    margin-bottom: 5vh;
}
.target-wrapper .wrapper-title{
    margin-bottom: 1rem;
}
.target-div{
    position: relative;
    width: 100%;
    padding-left: 2vw;
    margin-bottom: 2vh;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start !important;
}
.target-ico{
    font-size: 1.125vw;
    margin-right: .5vw;
    color: green;
}
.target-txt{
    font-size: 1.125vw;
    font-family: 'Poppins', sans-serif;
    color: #78777A;
}


.mobile-purchase-row{
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 10vh;
    padding: 1rem;
    display: none;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background: var(--bgcolor);
    z-index: 9999;
}
.mobile-purchase-row .course-details-column{
    position: relative;
    width: 65%;
    margin-right: 1rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}
.mobile-purchase-row .course-details-column h1{
    font-size: 1rem;
    color: #FFF;
}
.mobile-purchase-row .course-details-column p{
    font-size: .8rem;
    color: var(--light);
}


.mobile-purchase-row .course-purchase{
    position: relative;
    width: auto;
    padding: .75rem 1rem;
    background: rgb(0, 195, 120);
    color: #222;
    font-size: .9rem;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 12px;
}


@media (max-width: 992px) {
    .wrapper{
        width: 85% !important;
    }

    .hero{
        padding: 5em 1rem;
    }

    .overview-video{
        height: 20em;
    }

    #price-card-wrapper{
        right: -2.5vw;
    }
    .price-card{
        top: 5em;
        width: 26vw;
    }
    .price-card .pricing-wrapper .buy-btn{
        height: auto;
        padding: .75rem 1.25rem;
    }

    
    .objectives p, .req-txt, .target-txt{
        font-size: .9rem;
    }
}



@media (max-width: 768px) {
    .hero{
        padding: 12vh 1rem;
        border-bottom-left-radius: 2rem;
    }
    .wrapper{
        width: 100% !important;
    }
    .overview-wrapper{
        width: 100%;
        flex-direction: column;
    }
    .large, .small{
        width: 100% !important;
        right: unset;
    }
    .overview-video{
        width: 100%;
        height: 35vh;
    }

    .overview-wrapper .content .course-title{
        font-size: 1.25rem;
    }
    .course-category{
        font-size: .9rem;
    }
    .course-desc{
        font-size: .8rem !important;
    }
    
    .reviews-count{
        font-size: .8rem;
    }

    #price-card-wrapper{
        position: relative;
        width: 100%;
        height: auto !important;
        margin-top: 2rem;
        padding: 0;
        top: unset;
        right: unset;
        z-index: 0;
    }

    .price-card{
        position: relative;
        width: 100%;
        top: unset;
        padding: 2rem;
    }

    .course-category-img{
        width: 4rem;
    }
    .price-card .course-title{
        font-size: 1.25rem;
    }
    .price-card .course-category{
        font-size: .8rem;
        margin-bottom: 1rem;
    }
    .price-card .course-keypoints{
        margin-bottom: 1rem;
    }
    .price-card .course-keypoints p{
        font-size: .9rem;
    }
    .overview-wrapper .price-card .pricing-wrapper h1{
        font-size: 1.5rem;
    }
    .ruppee-symbol{
        font-size: 1.5rem;
    }

    .price-card .pricing-wrapper .buy-btn{
        font-size: 1.25rem;
    }


    .course-data-section{
        border-top-right-radius: 2rem;
        padding: 2rem 1rem;
    }
    .course-data-wrapper{
        width: 100%;
    }

    .accordion-div--main{
        padding: 1rem;
    }
    .accordion-title{
        font-size: .9rem;
    }
    .accordion-doc{
        padding: 1rem;
    }
    .accordion-doc-icon, .accordion-doc-title{
        font-size: .9rem;
    }

    .objectives-container{
        padding: 1rem;
    }
    .objectives-wrapper .objectives{
        width: 100%;
    }
    .objectives i, .req-ico, .target-ico{
        margin-right: 1rem;
    }
    .objectives p, .req-txt, .target-txt{
        font-size: .9rem;
    }

    .target-wrapper{
        margin-bottom: 0;
    }

    .mobile-purchase-row{
        display: flex;
    }
    

}



@media (max-width: 530px) {
    .hero{
        padding: 10vh 1rem;
        border-bottom-left-radius: 2rem;
    }
    .wrapper{
        width: 100% !important;
    }
    .overview-wrapper{
        width: 100%;
        flex-direction: column;
    }
    .large, .small{
        width: 100% !important;
        right: unset;
    }
    .overview-video{
        width: 100%;
        height: 35vh;
    }

    .overview-wrapper .content .course-title{
        font-size: 1.25rem;
    }
    .course-category{
        font-size: .9rem;
    }
    .course-desc{
        font-size: .8rem !important;
    }

    .reviews-count{
        font-size: .8rem;
    }
    

    .overview-wrapper #price-card-wrapper{
        position: relative;
        width: 100%;
        margin-top: 5vh;
        padding: 0;
        top: unset;
        right: unset;
        z-index: 0;
    }

    .price-card{
        width: 100%;
        padding: 2rem;
    }
    .price-card .course-category{
        font-size: .8rem;
        margin-bottom: 1rem;
    }

    .course-category-img{
        width: 4rem;
    }
    .price-card .course-title{
        font-size: 1.25rem;
    }
    .price-card .course-keypoints{
        margin-bottom: 1rem;
    }
    .price-card .course-keypoints p{
        font-size: .9rem;
    }
    .overview-wrapper .price-card .pricing-wrapper h1{
        font-size: 1.5rem;
    }
    .ruppee-symbol{
        font-size: 1.5rem;
    }

    .price-card .pricing-wrapper .buy-btn{
        font-size: 1.25rem;
    }


    .course-data-section{
        border-top-right-radius: 2rem;
        padding: 2rem 0;
    }
    .course-data-wrapper{
        width: 100%;
        padding: 1rem;
    }
    .course-data-wrapper .vertical-wrapper .horizontal-wrapper{
        align-items: flex-start;
        justify-content: space-between;
    }

    .accordion-div--main{
        padding: 1rem;
    }
    .accordion-doc{
        padding: 1rem;
    }
    .accordion-doc-icon, .accordion-doc-title{
        font-size: .9rem;
    }

    .objectives-container{
        padding: 1rem;
    }
    .objectives-wrapper .objectives{
        width: 100%;
    }
    .objectives i, .req-ico, .target-ico{
        margin-right: 1rem;
        font-size: 1rem;
    }
    .objectives p, .req-txt, .target-txt{
        font-size: .9rem;
    }

    .target-wrapper{
        margin-bottom: 0;
    }

    .mobile-purchase-row{
        display: flex;
    }
    .mobile-purchase-row .course-purchase{
        width: 60%;
        display: grid;
        place-content: center;
    }
    

}