:root{

     --white: #FFFFFF;

     --primary: #2181FF;
     --dark-black: #000000;

     --text-dark-gray: #606F78;
     --text-gray: #869099;
     --text-light-gray: #BBBBBB; 
     --text-blue: #508CDB;
     --text-grayish: #A5B8C4;
     --text-dark-grayish: #7D94A2;

     --bg-gray: #F3F7FC;
     --bg-light-gray: #F7F7F7;

     /* home-pages */

     --nav-links: #6F828D;
     --menu-links: #47525D;
}

html{
     box-sizing: border-box;
     font-size: 18px;
}
body, h1, h2, h3, h4, h5, h6, a, p, ol, ul, span, input,button{
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    font-weight: normal;
}
html, body {
     height: 100%;
}
.root{
     overflow-x: hidden;
}
.container{
     width: 1320px;
     margin: 0 auto;
     max-width: 100%;
}
img{
     width: 100%;
     height: auto;
}


/* LOGIN */

 
section.login .container{
     width: 1440px;
     margin: 0 auto;
     max-width: 100%;
}

section.login .wrapper{
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     width: 100%;
}

section.login .wrapper .left-side{
     display: flex;
     flex-direction: column;
     justify-content: center;
     width: 100%;
     margin: 0 80px;
    
}

section.login .left-side img.logo{
     width: 150px;
     height: 25px;
     margin-left: -10px;
     /* margin-bottom: 100px; */
}
section.login .responsive-logo img{
     display: none;
}
section.login .wrapper .left-side h1{
     font-weight: bold;
     font-size: 27px;
     margin-bottom: 10px;
     color: var(--dark-black);
}
section.login .wrapper .left-side p{
     font-size: 14px;
     color: var(--text-gray);
     margin-bottom: 40px;
}
section.login form h5{
     color: var(--text-blue);
     font-size: 14px;
     font-weight: 500;
     margin-bottom: 10px;
}
section.login form{
     display: flex;
     flex-direction: column;
}
section.login form input{
     padding: 10px 20px;
     font-style: italic;
     font-size: 14px;
     font-weight: 500;
     color: var(--text-light-gray);
     background: var(--bg-light-gray);
     border: none;
     border-radius: 10px;
     outline: none;
     width: 70%;
}

section.login .middle-text{
     display: flex;
     width: 70%;
     justify-content: space-between;
     align-items: center;
     margin-top: 50px;
}
section.login .middle-text .checkbox{
     display: flex;
}
section.login .middle-text .checkbox input{
     width: 18px;
     height: auto;
}
section.login .middle-text .checkbox label{
     margin-left: 10px;
     font-size: 15px;
     color: var(--dark-black);
     font-weight: 500;
}

section.login .middle-text .right-text a{
     text-decoration: none;
}

section.login .middle-text .right-text h5{
       margin-right: -40px;
       font-size: 15px;
       color: var(--text-dark-grayish);
       font-weight: 500;
}

section.login .buttons {
     display: flex;
     flex-direction: column;
     width: 77%;
     margin-top: 30px;
}
section.login .buttons .primary-btn  {
     padding: 12px;
     border: none;
     background: var(--primary);
     border-radius: 50px;
     font-size: 16px;
}
section.login .buttons .primary-btn a{
     text-decoration: none;
     color: var(--white);
}

section.login .buttons .secondary-btn {
     padding: 10px;
     margin-top: 18px;
     border: 3px solid var(--primary);
     background: var(--white);
     color: var(--primary);
     border-radius: 50px;
     font-size: 16px;
}
section.login .buttons .secondary-btn a{
     text-decoration: none;
     color: var(--primary);
}
section.login .lower-text{
     display: flex;
     width: 100%;
     justify-content: space-evenly;
     align-items: center;
     margin-top: 30px;
}
section.login .lower-text .left-side-text h5{
     color: var(--text-grayish);
     font-size: 14px;
}
section.login .lower-text .social-icons{
     display: flex;
     margin-top: 10px;
     margin-right: 150px;
}
section.login .lower-text .social-icons a{
     margin-left: 20px;
}

section.login .left-side .signup-for-mobile {
     display: none;
}

section.login .right-side{
     background: var(--bg-gray);
     height: 100vh;
     width: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     position: relative;
     
}
section.login .right-side img{
     margin-left: 30px;
}

section.login .right-side .lower-text{
     display: flex;
     flex-direction: column;
     text-align: center;
     margin-top: 30px;
     margin-right: 70px;
}
section.login .right-side .lower-text h3{
     font-size: 19px;
     color: var(--text-dark-gray);
     line-height: 2;
}
section.login .right-side .lower-text h5{
     font-size: 16px;
     color: var(--text-dark-grayish);
     margin-top: 30px;
}
section.login .right-side .lower-text img.lower-text-bg{
     display: none;
}






/* Sign up */

section.signup .container{
     width: 1440px;
     margin: 0 auto;
     max-width: 100%;
}
section.signup .portion-wrapper{
     display: flex;
     justify-content: space-between;
     height: 100vh;
}
section.signup .portion-wrapper .middle-portion{
     display: flex;
     flex-direction: column;
     margin-top: 100px;
     margin-right: 100px;
}
section.signup .portion-wrapper .middle-portion .logo img{
     width: 150px;
     height: 25px;
     margin-bottom: 100px;
}
section.signup .portion-wrapper .middle-portion .responsive-logo img{
     display: none;
}
section.signup .portion-wrapper .middle-portion h1{
     font-weight: bold;
     font-size: 27px;
     margin-bottom: 10px;
     color: var(--dark-black);
}
section.signup .portion-wrapper .middle-portion p{
     font-size: 14px;
     font-weight: 500;
     color: var(--text-gray);
     margin-bottom: 40px;
}
section.signup .portion-wrapper .middle-portion form{
     display: flex;
     margin-bottom: 50px;
     z-index: 1;
}
section.signup form h5{
     color: var(--text-blue);
     font-size: 14px;
     font-weight: 500;
     margin-bottom: 10px;
}
/* 
section.signup form .pro-goals{
     position: relative;
     z-index: 100;
}
section.signup form .pro-goals img.image{
     position: absolute;
     width: 24px;
     height: 23px;
     top: 45px;
     right: -30px;
     z-index: 0;
     cursor: pointer;
}
section.signup form .pro-goals img.arrow{
     position: absolute;
     width: 14px;
     height: 10px;
     top: 52px;
     right: -25px;
     z-index: 0;
} */
section.signup .portion-wrapper .middle-portion form .last-name{
     margin-left: 130px;
}
section.signup .portion-wrapper .middle-portion form .email-address{
     margin-left: 130px;
}
section.signup .portion-wrapper .middle-portion form .confirm-password{
     margin-left: 130px;
}
section.signup .portion-wrapper .middle-portion form input {
     padding: 20px 130px 20px 20px;
     font-style: italic;
     font-size: 14px;
     font-weight: 500;
     color: var(--text-light-gray);
     background: var(--bg-light-gray);
     border: none;
     border-radius: 10px;
     outline: none;
     width: 80%;
} 
 
section.signup .portion-wrapper .left-portion{
     background: var(--bg-gray);
     padding-top: 400px;   
}
section.signup .portion-wrapper .right-portion{
     background: var(--bg-gray);
     padding-top: 200px;
}

section.signup .portion-wrapper .middle-portion .data .secondary-btn{
     padding: 10px 130px;
     margin-top: 20px;
     margin-left: 70px;
     border: 3px solid var(--primary);
     background: var(--white);
     color: var(--primary);
     border-radius: 50px;
     font-size: 16px;
}
section.signup .portion-wrapper .middle-portion .data .secondary-btn a{
     text-decoration: none;
     color: var(--primary);
     
}
section.signup .portion-wrapper .middle-portion .data .lower-button{
     display: flex;
     justify-content: center;
     align-items: center;
}


/* ------------------------------------------------------------------------------------- */


/* HOME PAGE - NOT ENROLLED */

section.home{
     background: var(--white);
     box-shadow: -1px 10px 11px -10px rgba(0,0,0,0.10);
}

section.home .container {
     /* width: 1440px; */
     margin: 0 auto;
     max-width: 100%;
}
 
section.home .nav-wrapper button.hamburger-btn img{
     display: none;
}
section.home .nav-wrapper .logo img{
     width: 139px;
     height: 28px;
     /* margin-left: -70px; */
}
section.home nav .nav-wrapper{
     display: flex;
     /* justify-content:space-between; */
     align-items: center;
     padding-top: 20px;
     padding-bottom: 20px;
     margin: 0px 40px;
     position: relative;
}
section.home nav .nav-wrapper .logo{
     cursor: pointer;
     margin-right: auto;
}
section.home nav .nav-wrapper .search-bar{
     display: flex;
     position: relative;
}
section.home nav .nav-wrapper .search-bar img{
     width: 17px;
     height: 16.5px;
     position: absolute;
     left: 20px;
     top: 12px;
     cursor: pointer
}
section.home nav .nav-wrapper .search-bar input{
     background: var(--bg-gray);
     padding: 10px 60px 10px 60px; 
     border-radius: 50px;
     border: none;
     outline: none;
     color: #9DB1C9;
     
     
}
section.home nav .nav-wrapper .nav-links{
     display: flex;
     /* margin-right: 100px; */
}
section.home nav .nav-wrapper .nav-links ul.nav-link{
     display: flex;
     align-items: center;
}

section.home nav .nav-wrapper .nav-links .nav-link .icon{
     display: flex;
     margin-left: 50px;
     text-decoration: none;
     align-items: center;
     color: var(--nav-links);
     font-size: 15px;
}
section.home nav .nav-wrapper .nav-links .nav-link:nth-child(2){
     display: none;
}
section.home nav .nav-wrapper .nav-links .nav-link:nth-child(3){
     display: none;
}
section.home nav .nav-wrapper .nav-links .nav-link .icon img{
     width: 20px;
     height: 16px;
     margin-right: 10px;
}
section.home nav .nav-wrapper .nav-links ul.nav-link li{
     list-style-type: none;
}
section.home nav .nav-wrapper .nav-links img.small-profile-pic{
     width: 37px;
     height: 37px;
     margin-left: 40px;
     /* margin-right: -100px; */
     margin-top: 10px;
     cursor: pointer;
}
section.home nav .nav-wrapper .nav-links .profile{
     position: relative;
}
 
section.home nav .nav-wrapper .nav-links .menu{
     position: absolute;
     right: 0;
     top: 100px;
     padding: 10px 20px;
     background: var(--white);
     width: 250px;
     box-sizing: 0 5px 25px rgba(0,0,0,0.1);
     border-radius: 15px;
     transition: 0.5s;
     visibility: hidden;
     opacity: 0;
     box-shadow: 0px 0px 13px -8px rgba(0,0,0,0.84);
     z-index: 10;
}
section.home nav .nav-wrapper .nav-links .menu.active{
     visibility: visible;
     opacity: 1;
}

section.home nav .nav-wrapper .nav-links .menu ul li{
     list-style-type: none;
    
     padding: 10px 10px;
     margin-top: 10px;
}
section.home nav .nav-wrapper .nav-links .menu ul li:nth-child(1){
     background: #E6EEF9;
     border-radius: 8px;
} 
section.home nav .nav-wrapper .nav-links .menu ul li:nth-child(6){
     margin-bottom: 20px;
      
}
section.home nav .nav-wrapper .nav-links .menu a{
     text-decoration: none;
     font-size: 16px;
     font-weight: 500;
     color: var(--dark-black);
     width: 100%;
     cursor: pointer;
}
section.home nav .nav-wrapper .nav-links .menu:before{
     content: "";
     position: absolute;
     top: -12px;
     right: 12px;
     width: 28px;
     height: 28px;
     transform: rotate(45deg);
     background:var(--white);
}

.profile-menu-wrapper{
     display: none;
}


 .close-btn{
      display: none;
 }




section.profile{
     border-bottom: 1px solid rgba(0,0,0,0.10);
     position: relative;
}
/* 
section.profile .container{
     width: 1220px;
     margin: 0 auto;
     max-width: 100%;
} */

section.profile .profile-wrapper{
     display: flex;
     align-items: center;
     margin: 50px 80px;
     /* margin: 50px 100px; */
     position: relative;
     
} 

section.profile .profile-wrapper .profile-main-pic{
     width: 130px;
     height: 130px;
     position: relative;
     top: 0;
     left: 0;
     border-radius: 50%;
     overflow: hidden;
}
section.profile .profile-wrapper .profile-main-pic #photo{
     width: 100%;
     height: 100%;
}
section.profile .profile-wrapper .profile-main-pic #file{
     display: none;
}
section.profile .profile-wrapper .profile-main-pic #uploadBtn{
     height: 40px;
     width: 100%;
     position: absolute;
     bottom: 0;
     left: 50%;
     top: 80%;
     transform: translateX(-50%);
     text-align: center;
     background: rgba(196,196,196,0.3);
     color: white;
     font-size: 14px;
     font-family: 600;
     line-height: 25px;
     cursor: pointer;
}

section.profile .profile-wrapper .profile-text{
     transform: translateX(30%);
     z-index: 1;
}
section.profile .profile-wrapper .profile-text h1{
     font-size: 28px;
     font-weight: 500;
     margin-bottom: 15px;
}
section.profile .profile-wrapper .profile-text h5{
     font-size: 15px;
     color: #7893B5;
     font-weight: 500;
}
section.profile .container{
     overflow: hidden;
     position: relative;
}

section.profile img.profile-left-vector{
     position: absolute;
     width: 52%;
     top: 0;
     left: 0;
}
section.profile img.profile-middle-vector{
     position: absolute;
     top: 0;
     width: 12%;
     height: 100%;
     right: 30%;
}
section.profile img.profile-right-vector{
     position: absolute;
     width: 20%;
     top: 0;
     right: 0;
}
section.profile img.left-vector-mobile{
    display: none;
}



/* Profile Main links */


section.profile-main-links{
     border-bottom: 1px solid rgba(0,0,0,0.10);
}

section.profile-main-links .container{
     /* width: 1440px; */
     margin: 0 auto;
     max-width: 100%;
}

section.profile-main-links .profile-links-wrapper{
     margin: 0px 40px;
}
section.profile-main-links .profile-links-wrapper button{
     display: inline;
     padding: 14px 0;
     background: none;
     border: none;
     text-decoration: none;
     color: #7D7D7D;
     font-size: 15px;
     font-weight: 600;
     transition: all .3s ease-in-out;
}
section.profile-main-links .profile-links-wrapper button:hover{
     color: var(--primary);
}
section.profile-main-links .profile-links-wrapper button.active{
     color: var(--primary);
}
section.profile-main-links .profile-links-wrapper .tab > * + * {
     margin-left: 80px;
}

section.profile-main-links button.profilelink{
     position: relative;
}  

section.profile-main-links button.profilelink::before,
section.profile-main-links button.profilelink.active::before{
     content: "";
     position: absolute;
     left: 0;
     bottom: 0;
     background: var(--primary);
     width: 100%;
     height: 3px;
     transform: scaleX(0);
     transition:  transform 650ms;
}

section.profile-main-links button.profilelink.active::before{
     transform: scaleX(1);
}

.tabcontent{
     display: none;
}

.tabcontent{
     animation: fadeEffect 1s;
}
@keyframes fadeEffect{
     from {opacity: 0;}
     to {opacity: 1;}
}

/* Profile main links end */



/* 
.profile-link:hover::before{
     transform: scaleX(1);
} */

section.in-progress{
     background:var(--bg-gray);
     
}
/* 
section.in-progress .container{
     width: 1120px;
} */

section.in-progress .card-wrapper{
     margin: 0px 50px;
     display: flex;
     align-items: center;
     /* margin: 0px 0px 0px 100px; */
     padding: 50px 0;
     width: 100%;
     height: 100%;
     padding-bottom: 23.5%;
}

.open-popup{
     display: none;
}

section.in-progress .card{
     background: var(--white);
     padding: 20px 15px 0px 15px;
     border-radius: 20px;
     margin-top: -152px;
     margin-left: -10px;
}
section.in-progress .content li {
     list-style-type: none;
     margin-bottom: 20px;
}
section.in-progress .content a {
     text-decoration: none;
     font-size: 15px;
     font-weight: 600;
     color: var(--dark-black);
}
section.in-progress .content .heading a{
     background: var(--bg-light-gray);
     padding: 12px 100px 14px 20px;
     color: var(--dark-black);
     border-radius: 10px;
}
section.in-progress .content .heading.active a{
     background: #FFEFF5;
     padding: 12px 100px 14px 20px;
     color: #EB2E75;
     border-radius: 10px;
}
section.in-progress .content .sub-headings{
     margin-left: 40px;
     border-left: 2px solid rgba(0,0,0,.15);
     padding-left: 20px;
     padding-top: 10px;
}
section.in-progress .content .sub-headings .progress-link.active{
     color: #EB2E75;
}

.sub-headings .progress-link{
     position: relative;
}  

.sub-headings .progress-link::before,
.sub-headings .progress-link .active::before{
     content: "";
     position: absolute;
     left: -23px;
     bottom: -5px;
     background: #EB2E75;
     width: 3px;
     height: 150%;
     transform: scaleX(0);
     transition:  transform 650ms;
}

.sub-headings .progress-link.active::before{
     transform: scaleX(1);
}
section.in-progress .content .another-sub-headings li{
     margin-bottom: 30px;
}
section.in-progress .content .another-sub-headings  li:nth-child(1) .progress-link{
     padding: 0px 10px 0px 20px;
}
section.in-progress .content .another-sub-headings  li:nth-child(1) .progress-link.active{
     background: #FFEFF5;
     padding: 12px 127px 14px 20px;
     color: #EB2E75;
     border-radius: 10px;
}
section.in-progress .content .another-sub-headings li:nth-child(2) .progress-link{
     background: var(--bg-light-gray);
     padding: 14px 100px 14px 20px;
     border-radius: 10px;
}
section.in-progress .content .another-sub-headings li:nth-child(2) .progress-link.active{
     background: #FFEFF5;
     padding: 12px 100px 14px 20px;
     color: #EB2E75;
     border-radius: 10px;
}
section.in-progress .image img{
     margin-top: 40px;
}
section.in-progress{
     display: flex;
     align-items: center;
     justify-content: center;
}
section.in-progress .image{
     /* transform: translateX(70%); */
     margin-left: 270px;
     text-align: center;
}

section.in-progress .image h2{
     font-size: 20px;
     color: #7B90A9;
     font-weight: bold;
     margin-top: 20px;
     margin-bottom: 20px;
}

section.in-progress .image h3{
     font-size: 16px;
     color: #7B90A9;
     font-weight: 500;
} 

.button button{
     padding: 12px 70px;
     border-radius: 50px;
     background:var(--primary) ;
     border: none;
     outline: none;
     margin-top: 20px;
}
.button button a{
     text-decoration: none;
     font-size: 15px;
     color: var(--white);
}
.button{
     position: relative;
}

section.in-progress .image .button img{
     position: absolute;
     width: 5%;
     top: -3.5px;
     right: 105px;
}


/* Instructor-led */

.button.profile{
     position: absolute;
     right: 60px;
     z-index: 1;
}
.button img{
     position: absolute;
     width: 7%;
     top: 38px;
     right: 20px;
}

section.in-progress .card.instructor-led{
     margin-top: -80px;
}

/* progress bar */

.image.instructor-led .wrapper .bar{
     background: #E7E7E7;
     display: block;
     height: 5px;
     width: 70%;
     border: none;
     border-radius: 3px;
     overflow: hidden;
     margin-top: 20px;
}
.bar span{
     height: 4px;
     border-radius: 3px;
     float: left;
     background: var(--primary);
}
.data-science{
     width: 55%;
     animation: data-science 2s;
}

@keyframes data-science {
     0%{
          width: 0%;
     }
     100%{
          width: 55%;
     }
}
/* progress bar end */

section.in-progress .image.instructor-led{
     display: flex;
     flex-direction: column;
     /* width: 60%; */
     margin-left: 87px;
     margin-right: 50px;
}
.image.instructor-led h1, p{
     text-align: left;
}
.image.instructor-led h1{
     text-transform: uppercase;
     font-size: 18px;
     font-weight: 700;
     color: var(--dark-black);
     margin-bottom: 20px;
}
.image.instructor-led p{
     font-size: 14px;
     line-height: 1.6;
     font-style: italic;
     color: #8D959F;
}
.image.instructor-led p > a{
     font-size: 14px;
     text-decoration: underline;
     color: #8D959F;
}
.image.instructor-led .wrapper .flex-wrapper .data-science-img img{
     width: 58px;
     height: 60px;
     padding: 20px;
     border-radius: 30px;
     background-color: #F3F7FC;
}

.image.instructor-led .wrapper .flex-wrapper{
     display: flex;
     align-items: center;
     justify-content: space-between;
     background: var(--white);
     border-radius: 20px;
     width: 100%;
     padding: 13px 40px;
     margin-top: 40px;
}
section.in-progress.instructor-led .image{
     width: 100%;
     margin-right: 200px;
}
.image.instructor-led .wrapper .flex-wrapper .left{
     display: flex;
     align-items: center;
     justify-content: space-between;
}
.image.instructor-led .wrapper .flex-wrapper img{
     margin-top: 0px;
}
.image.instructor-led .wrapper .flex-wrapper .data-science-content{
     display: flex;
     flex-direction: column;
     margin-left: 30px;
     margin-top: -30px;
     text-align: left;
}
.image.instructor-led .wrapper .flex-wrapper .data-science-content a{
     text-decoration: none;
     font-size: 16px;
     font-weight: 600;
}
.image.instructor-led .wrapper .flex-wrapper .data-science-content h2{
     color: var(--dark-black);
     margin-bottom: 3px;
}
.image.instructor-led .wrapper .flex-wrapper .data-science-content span.uni-name{
     font-size: 12px;
     font-weight: 600;
     color: #919CAB;
     margin-bottom: 15px;
}
.image.instructor-led .wrapper .data-science-btn{
     width: 26px;
     height: 26px;
     background: #C7D2DF;
     border-radius:5px;
     position: relative;
}
.image.instructor-led .wrapper .data-science-btn img{
     position: absolute;
     top: 0;
     right: 0;
}

section.in-progress.instructor-led{
     padding-bottom:5.5%;
}
section.in-progress.instructor-led .content .heading-i-icon{
     display: flex;
     align-items: center;
}
section.in-progress.instructor-led .content .heading-i-icon img{
     width: 17px;
     height: 17px;
     margin-top: -18px;
     margin-left: 10px;
     display: none;
}



/* SELF-PACED */

section.in-progress .card.self-paced{
     margin-top: -370px;
}


/* Applied */

.image.instructor-led .wrapper .flex-wrapper .data-science-content span.status{
     display: flex;
     font-size: 13px;
     font-weight: 600;
     margin-top: 10px;
     font-style: italic;
}
.image.instructor-led .wrapper .flex-wrapper .data-science-content span.status a,span.status a > span{
     font-size: 13px;
     font-weight: 660;
     margin-left: 10px;
     text-decoration: none;
     font-style: italic;
     color: #EB2E75;
}
.image.instructor-led .wrapper .flex-wrapper .data-science-content span.status a > span{
     margin-left: 5px;
}

.image.applied .wrapper .flex-wrapper{
     width: 100%;

}
.image.applied .wrapper{
     width: 100%;
}
section.in-progress.applied .image{
     width: 100%;
     margin-right: 200px;
     
}

section.in-progress .card.applied{
     margin-top: -13px;
     z-index: 1;
}

section.in-progress.applied{
     padding-bottom: 140px;
}
.image.applied{
     margin-right: 100px;
}

/* Completed */

.image.completed{
     margin-right: 100px;
}
 
.image.completed .wrapper .flex-wrapper{
     width: 100%;
}

section.in-progress .card.completed{
     margin-top: -305px;
}

.image.completed .wrapper .flex-wrapper a.completed{
     font-size: 12px;
     font-weight: 600;
     text-decoration: none;
     background: #7792B6;
     color: var(--white);
     padding: 3px 25px 2px 25px;
     border-radius: 20px;
     margin-right: auto;
}


.menu-opened button.close-opened-menu{
     display: none;
}

/* ------------------------------------------------------------------------------------------------------ */


/* Browse Courses */

/* Sub Navbar */

section.sub-navbar{
     border-bottom: 1px solid rgba(0,0,0,0.10);
}
nav.sub-nav{
     margin: 0 40px;
}
nav.sub-nav ul{
     display: flex;
     align-items: center;
     list-style-type: none;
     padding: 20px 0px;
}
nav.sub-nav ul > * + * {
     margin-left: 60px;
}
ul.sub-nav-links li a{
     text-decoration: none;
     font-size: 14px;
     color: #6E7E92;
}
@media (max-width:800px){
     section.sub-navbar{
          display:none;
     }
}

/* Sub Navbar End */


/* Opened Links  */

nav.open-links{
     margin: 0 40px;
}
nav.open-links ul{
     display: flex;
     align-items: center;
     list-style-type: none;
     padding: 20px 0px;
}
nav.open-links ul > * + * {
     margin-left: 10px;
} 
ul.open-link li{
     display: flex;
     align-items: center;
}
ul.open-link li span{
     color: #AFB8BD;
     margin-right: 10px;
}
ul.open-link li a{
     text-decoration: none;
     font-size: 13px;
     color: #AFB8BD;
     transition: all .3s ease-in-out;
}
ul.open-link li a:hover{
     color: #6E7E92;
}

/* Opened Links End */


/* Browse Courses  */

section.browse-courses{
     margin: 0px 80px;
}
section.browse-courses .flex{
     display: flex;
     justify-content: center;
     align-items: center;
     width: 100%;
}
.browse-bar{
     display: flex;
     align-items: center;
     position: relative;
     padding: 40px 0px;
}
.browse-bar input{
     width: 100%;
     padding: 18px 20px 18px 70px;
     font-style:normal;
     font-weight: 700;
     font-size: 15px;
     border-radius: 50px;
     border: none;
     outline: none;
     box-shadow: 0px 0px 20px 8px rgba(0,0,0,0.07);
}
.browse-bar input::placeholder{
     color: #ACB6C2;
     font-style: italic;
     font-weight: 400;
}
.browse-bar img{
     width: 18px;
     height: 18px;
     position: absolute;
     left: 30px;
     top: 50%;
     transform: translateY(-50%);
}
.browse-bar button{
     position: absolute;
     right: 40px;
     background: none;
     border: none;
     background: var(--primary);
     padding: 10px 40px;
     border-radius: 100px;
}
.browse-bar button a{
     text-decoration: none;
     color: var(--white);
}

/* Browse Courses End  */



/* Tabs  */

.browse-tabs{
     border-bottom: 1px solid rgba(0,0,0,0.10);
}
.browse-tabs .tab{
     display: flex;
     margin: 0px 40px;
     overflow-x: auto;
}

.browse-tabs .tab::-webkit-scrollbar{
     display: none;
}
.browse-tabs .tab button{
     display: flex;
     padding: 14px 0;
     background: none;
     border: none;
     text-decoration: none;
     color: #7D7D7D;
     font-size: 13px;
     font-weight: 500;
     transition: all .3s ease-in-out;
     cursor: pointer;
}
.browse-tabs .tab > * + * {
     margin-left: 44px;
}

.browse-tabs .tab button:hover{
     color: var(--primary);
}
.browse-tabs .tab button.active{
     color: var(--primary);
}
.browse-tabs .tab button.profilelink{
     position: relative;
}  

.browse-tabs .tab button.profilelink::before,
.browse-tabs .tab button.profilelink.active::before{
     content: "";
     position: absolute;
     left: 0;
     bottom: 0;
     background: var(--primary);
     width: 100%;
     height: 3px;
     transform: scaleX(0);
     transition:  transform 650ms;
}

.browse-tabs .tab button.profilelink.active::before{
     transform: scaleX(1);
}

section.tabs .tabcontent{
     padding: 30px 0px;
     margin: 0px 40px;
}
section.tabs{
     background: var(--bg-gray);
}


@media (max-width:650px){
     .browse-tabs .tab{
          margin: 0px 20px;
     }
     section.tabs .tabcontent{
          margin: 0px 20px;
     }
}

/* Tabs End  */

/* Tab Content */

.main-wrapper{
     display: flex;
     justify-content: space-between;  
     height: 100%;
}

.left-wrapper{
     /* width: 30%; */
     flex: 1 0 208px;
     height: 990px;
     /* background-color: orangered; */
     margin-right: 20px;
     background: var(--white);
     box-shadow: 0px 0px 40px 10px rgba(0,0,0,0.02);
     border-radius: 25px;
     padding: 40px 30px;
}

.right-wrapper{
     /* width: 70%; */
     flex: 1 0 60%;
     height: 1686px;
     /* background-color: purple; */
     margin-left: 20px;
     padding: 10px;
}
 
.sections h3{
     color: var(--dark-black);
     font-size: 16px;
     font-weight: 700;
     margin-bottom: 20px;
}
.sections label{
     color: var(--dark-black);
     font-size: 14px;
     margin-left: 20px;
     font-weight: 550;
}
.sections > * + * {
     margin-top: 30px;
}
.sections .checkbox{
     margin-bottom: 10px;
}
.sections .checkbox:last-child{
     margin-bottom: 40px;
}
.sections .section{
     margin-bottom: 40px;
     border-bottom: 1px solid rgba(0,0,0,.15);
}

.sections .dropdown{
     position: relative;
     background: #F7F7F7;
     margin-bottom: 25px;
     padding: 10px 20px;
     border-radius: 10px;
     
}
.sections .dropdown span{
     position: relative;
     font-size: 14px;
     font-weight: 600;
}
.sections .dropdown img{
     position: absolute;
     background: #A7B9CF;
     padding: 7px 4.5px;
     border-radius: 5px;
     width: 16px;
     height: 10px;
     right: 20px;
     top: 50%;
     transform: translateY(-50%);
}
.sections .section:last-child{
     border-bottom: none;
}



.right-wrapper .heading h1{
     display: none;
}
.dropdown-buttons{
     display: none;
}

.text-row{
     display: flex;
     justify-content: space-between;
}
.text-row .left-text span{
     color: #A0ACBB;
     font-size: 15px;
     font-weight: 400;
}
.text-row .left-text strong{
     color: #717C8B;
}
.text-row .right-text{
     display: flex;
     align-items: center;
}
.text-row .right-text h6{
     font-size: 14px;
     color: #A0ACBB;
}
.text-row .right-text button{
     background: none;
     border: none;
     outline: none;
     margin-left: 20px;
     font-size: 14px;
     font-weight: 600;
     color: #717C8B;
}
.text-row .right-text img{
     width: 10px;
     height: 8px;
     margin-left: 5px;
}


.right-wrapper .card{
     width: 100%;
     height: 169px;
     background: white;
     border-radius: 20px;
     margin-top: 35px;
     padding-right: 10px;
     display: flex;
     align-items: center;
     box-shadow: 0px 0px 40px 10px rgba(0,0,0,0.02);
}
.card-image img{
     width: 60px;
     height: 60px;
     padding: 20px;
     background: #F3F7FC;
     border-radius: 30px;
     margin: 0px 30px;
}
.card-detail a{
     text-decoration: none;
     font-size: 19px;
     font-weight: 600;
     color: var(--dark-black);
}
.card-detail {
     display: flex;
     flex-direction: column;
}
.card-detail span{
     font-size: 14px;
     color: #818B95;
     font-weight: 500;
}
.card-detail .detail {
     display: flex;
     flex-direction: column;
}
.card-detail .detail-img{
     display: none;
}
.card-detail span{
     margin-top: 8px;
     margin-bottom: 15px;
}
.experiance-detail > * + *{
     margin-left: 80px;
}
.experiance-detail img{
     width: 14px;
     height: 14px;
     margin-right: 15px;
}
.experiance-detail span{
     font-size: 13px;
     color: #4C4C4C;
     display: inline;
}
@media (max-width:1200px){
     .experiance-detail > * + *{
          margin-left: 40px;
     }    
}
@media (max-width:1100px){
     .experiance-detail > * + *{
          margin-left: 20px;
     }    
}
@media (max-width:1043px) and (min-width:925px){
     .experiance-detail{
          display: flex;
          flex-direction: column;
     }
     .experiance-detail > * + *{
          margin-left: 0px;
     }
     .right-wrapper .card{
          height: 250px;
     }
     .right-wrapper{
          height: 150%;
     }
}
@media (max-width:924px) {
     .left-wrapper{
          display: none;
     }
     .experiance-detail > * + *{
          margin-left: 60px;
     }
     .right-wrapper .heading h1{
          display: block;
          font-size: 22px;
          font-weight: 600;
          margin-bottom: 10px;
     }
     .right-wrapper .right-text{
          display: none;
     }  
     .dropdown-buttons{
          display: flex;
          margin-top: 20px;
     }
     .dropdown-buttons > * + * {
          margin-left: 30px;
     }
     .sort button, .filter button{
          display: flex;
          width: 133px;
          justify-content: space-between;
          padding: 10px;
          background: #E6EEF9;
          border: none;
          outline: none;
          border-radius: 5px;
          color: #818E9F;
          font-size: 15px;
     }
     img.sort-img, img.filter-img, img.arrow{
          width: 22px;
          height: 22px;
     }
      
     .right-wrapper{
          margin-left: -10px;
     }
     .right-wrapper .card{
          display: flex;
     }

     /* Sort Dropdown */
     .main-wrapper{
          position: relative;
     }
     .left-wrapper{
          display: none;
          position: absolute;
          top: 150px;
          left: 60px;
          border-radius: 5px;
          transition: all .3s ease-in-out;
          z-index: 1;
     }
     .left-wrapper.active{
          display: block; 
     }
     .filter button.active{
          color: var(--white);
          background: var(--primary);
          transition: all .3s ease-in-out;
     }
     .right-wrapper .card-wrapper.active{
          transition: all .3s ease-in-out;
          filter: blur(2px);
     }
     .left-wrapper{
          top: 160px;
          left: 50px;
          width: 70%;
     }

}
@media (max-width:788px){
     .experiance-detail{
          display: flex;
          flex-direction: column;
     }
     .experiance-detail > * + *{
          margin-left: 0px;
     }
     .experiance-detail{
          padding-top: 20px;
          border-top: 1px solid rgba(0,0,0,.12);
     }
     .right-wrapper .card{
          height: 210px;
          padding: 60px 0px 40px 30px;
     }
     .card-detail .detail-img{
          display: block;
     }
     .card-detail .detail-img img{
          width: 45px;
          height: 45px;
          padding: 20px;
          background: #F3F7FC;
          border-radius: 20px;
          margin-right: 30px;
     }
     .responsive-card{
          display: flex;
          align-items: center;
          margin-bottom: 20px;
     }
     .card .card-image{
          display: none;
     }
     .right-wrapper{
          height: 150%;
     }
     
}
@media (max-width:650px){
     .browse-bar button{
          display: none;
     }
     .right-wrapper{
          margin-right: 50px;
          margin-left: -10px;
     }
     .right-wrapper .card{
          padding-right: 30px;
     }
}
@media (max-width:486px){
     .browse-bar input{
          padding: 10px 10px 10px 50px;
     }
     .browse-bar input::placeholder{
          font-size: 13px;
     }
     .browse-bar img{
          width: 14px;
          height: 14px;
          left: 20px;
     }
}
@media (max-width:454px){
     .right-wrapper .heading h1{     
          font-size: 17px;
     }
     .text-row .left-text span{
          font-size: 13px;
     }
     .dropdown-buttons > * + * {
          margin-left: 20px;
     }
     .sort button, .filter button{
          width: 113px;
          padding: 5px;
          font-size: 13px;
     }
     img.sort-img, img.filter-img, img.arrow{
          width: 15px;
          height: 15px;
     }         
     .card-detail .detail-img img{
          width: 33px;
          height: 33px;
     }
     .card-detail a{
          font-size: 15px;
     }
     .card-detail span{
          font-size: 13px;
     }
     .experiance-detail img{
          width: 15px;
          height: 15px;
          margin-right: 20px;
     }
     .experiance-detail span{
          font-size: 12px;
          margin-bottom: 5px;
     }
     .right-wrapper .card{
          height: 210px;
          padding: 40px 40px 30px 20px;
     }
     .left-wrapper{
          top: 140px;
          left: 25px;
          width: 70%;
     }
   
}
@media (max-width:416px){
     .browse-bar input::placeholder{
          font-size: 10px;
     }
}
@media (max-width:392px){
     .right-wrapper .card{
          height: 210px;
          padding: 20px 18px 40px 15px;
          width: 113%;
     }
     .right-wrapper .card a{
          margin-top: 30px;
     }
     .responsive-card{
          margin-bottom: 0px;
     }
     .experiance-detail{
          padding-top: 10px;
     }
}
@media (max-width:373px){
     .browse-bar input::placeholder{
          font-size: 9px;
     }
}
@media (max-width:360px){
     .left-wrapper{
          top: 140px;
          left: 20px;
          width: 70%;
     }
     
}

/* Tab Content End */

/* Browse Courses End*/



/* Course Info Section  */

section.course{
     background: #F9FBFD;
}

.course-info-wrapper{
     padding: 40px;
}

.course-info-top{
     display: flex;
     width: 100%;
     justify-content: space-between;
}
.enroll-card{
     width: 26%;
}

.course-info-right-wrapper{
     display: flex;
     justify-content: space-between;
}

.tab-wrapper{
     width: 65%;
     margin-top: -110px;
   
}
.key-facts{
     width: 26%;
}

.course-flex{
     padding-top: 20px;
}

/* Star Rating  */

.rating{
     display: flex;
     padding: 0;
     margin: 0;
}
.rating li{
     list-style-type: none;
}

.rating-item{
     font-size: 20px;
     cursor: pointer;
     color: #FFC42C;
}

.rating-item::before{
     content: "\2605";
}

.rating-item.active ~ .rating-item::before{
     content: "\2606";
}

.rating:hover .rating-item::before{
     content: "\2605";
}

.rating-item:hover ~ .rating-item::before{
     content: "\2606";
}

/* Star Rating End */

.course-review, .star-rating, .language span{
     display: flex;
     align-items: center;
}
.star-rating > * + *{
     margin-left: 20px;
}
.language span{
     margin-left: 80px;
}
.language span > img{
     margin-right: 15px;
}
.course-name-detail{
     margin-bottom: 20px;
}
.course-name-detail h1{
     font-size: 28px;
     font-weight: 500;
     margin-bottom: 40px;
}
.course-name-detail p{
     font-size: 16px;
     line-height: 1.5;
     margin-bottom: 20px;
     font-weight: 400;
}
.course-name-detail span{
     font-size: 14px;
     font-weight: 500;
     color: #919CAB;
}

.course-review{
     margin-top: 15px;
}
.star-rating h2{
     font-size: 16px;
     padding-top: 3px;
}
.language img{
     width: 24px;
     height: 24px;
}
.language span{
     font-size: 16px;
     font-weight: 400;
}
 


/* CONSULT POP UP */

.home{
     position: relative;
}
.consult-popup{
     width: 40%;
     padding: 60px;
     background: #F9FBFD;
     box-shadow: 0px 0px 40px 10px rgba(0,0,0,0.1);
     position: fixed;
     z-index: 1000;
     border-radius: 10px;
     left: 26.2%;
     transform: translateY(30%);
     display: none;
}
.consult-popup{
     animation: fadeEffect 1s;
}
@keyframes fadeEffect{
     from {opacity: 0;}
     to {opacity: 1;}
}

.full-blur.active{
     transition: all .1s ease-in-out;
     filter: blur(2px);
}

.consult-popup.active{
     display: block;

}
.consult-popup.active .course{
     filter: blur(2px);
}

img.close-icon-2{
     width: 24px;
     height: 24px;
     position: absolute;
     right: 4%;
     top: 5%;
     cursor: pointer;
}

.consult-popup h1{
     font-size: 18px;
     font-weight: 600;
     margin-bottom: 40px;
}
.consult-popup p{
     font-size: 16px;
     line-height: 1.7;
     margin-bottom: 40px;
}
.consult-inputs{
     padding-right: 40px;
}

.name-input, .email-input{
     display: flex;
     flex-direction: column;
}
.consult-inputs label{
     font-size: 14px;
     font-weight: 500;
     color: #47525D;
     margin-bottom: 20px;
}
.consult-inputs input{
     border: none;
     outline: none;
     background: var(--white);
     padding: 15px 10px 15px 30px;
     width: 100%;
     border-radius: 6px;
     box-shadow: 0px 0px 40px 10px rgba(0,0,0,0.02);
     margin-bottom: 30px;
}
.consult-inputs input::placeholder{
     color: var(--dark-black);
     font-size: 14px;
     font-size: 500;
}
.consult-btn{
     margin-top: 30px;
}
.consult-btn button{
     font-size: 16px;
     border: none;
     outline: none;
     padding: 10px 60px;
     border-radius: 50px;
     background: var(--white);
     cursor: pointer;
}

.consult-btn .submit{
     background: var(--primary);
     color: var(--white);
}
.consult-btn .cancel{
     background: var(--white);
     border: 1px solid var(--primary);
     color: var(--primary);
     margin-left: 40px;
}


/* CONSULT POP UP END */





/* Tabs  */

section.tabs.course-info{
     background: none;
}
.browse-tabs.course-info{
     border-bottom: none;
}
.tab.course-info{
     background-color: #F1F7FE;
     border-radius:10px 10px 0px 0px;
     margin-left: 0px;
     margin-top: 70px;
     margin-bottom: 10px;
     padding: 0px 0px;
     width: 100%;
}
.tab.course-info > * + * {
     margin-left: 0px;
}

.tab.course-info .profilelink{
     background-color: #F1F7FE;
     padding: 18px 37.7px;
     font-size: 17px;
     font-weight: 500;
     border-bottom: 2px solid #DDECFF;
}
.tab.course-info .profilelink.active{
     border-top: 2px solid #DDECFF;
     border-right: 2px solid #DDECFF;
     border-left: 2px solid #DDECFF;
     border-bottom: none;
     background-color: var(--white);
     font-weight: 600;
     border-radius: 10px 10px 0px 0px;
}
.browse-tabs.course-info .tab button:hover{
     color: #47525D;
}
.browse-tabs.course-info .tab button.active{
     color: #47525D;
}
.browse-tabs .tab button.profilelink::before,
.browse-tabs .tab button.profilelink.active::before{
     left: 21%;
     bottom: 4px;
     width: 56%;
}

.browse-tabs.course-info .tab{
     overflow-x: visible;
}


@media (max-width:1230px){
     .tab.course-info .profilelink{
          padding: 15px 25px;
     }    
}

@media (max-width:1100px) and (min-width:1024px) {
     .tab.course-info .profilelink{
          padding: 13px 21px;
     }    
}

@media (max-width:1024px) and (min-width:768px) {
     .tab.course-info .profilelink{
          padding: 11px 19px;
     }    
}




/* Tab content */

/* Overview */

.tabs.course-info .tabcontent{
     margin-left: 0px;
}
.tabs.course-info .tabcontent h3{
     font-size: 18px;
     font-weight: 500;
     margin-bottom: 25px;
}
.tabs.course-info .tabcontent p{
     font-size: 16px;
     line-height: 1.5;
     margin-bottom: 50px;
     padding: 0 45px 0 0;
}







/* Enrrol Card */

.enroll-card{
     padding: 10px 0px;
     border-radius: 20px;
     background: var(--white);
     box-shadow: 0px 0px 40px 10px rgba(0,0,0,0.02);
}

.video.course{
     padding-top: 20px;
     padding-bottom: 35px;
     display: flex;
     justify-content: center;
     
}

.video.course video{
     border-radius: 20px;
     width: 90%;
}
.enroll-card .buttons{
     display: flex;
     flex-direction: column;
     justify-content: center;
     padding-top: 35px;
     margin: 0px 30px;
     border-top: 1px solid rgba(0,0,0,0.10);
}
.enroll-card .buttons button{
     margin-bottom: 20px;
     padding: 10px 0px;
     border-radius: 50px;
     border: none;
     outline: none;
     background: var(--white);
     font-size: 16px;
     font-weight: 500;
     cursor: pointer;
}
.enroll-card .buttons a{
     border: 1px solid var(--primary);
     border-radius: 50px;
     text-align: center;
     margin-bottom: 20px;
     padding: 10px 0px;
     text-decoration: none;
     color: var(--white);
     background: var(--primary);
     font-size: 16px;
     font-weight: 400;
     cursor: pointer;
}
.enroll-card .buttons button.primary-btn{
     background: var(--primary);
     color: var(--white);
}
.enroll-card .buttons button.secondary-btn{
     background: var(--white);
     color: var(--primary);
     border: 1px solid var(--primary);
}

/* Enrrol Card End */




/* Key Facts */

.course-info-right-wrapper h3{
     font-size: 18px;
     font-weight: 600;
     margin-bottom: 20px;
}


.key-facts{
     margin-top: 40px;
}

.key-facts-col{
     background: var(--white);
     padding: 20px 0px;
     border-radius: 20px;
     box-shadow: 0px 0px 40px 10px rgba(0,0,0,0.02);
}
.key-facts-data{
     display: flex;
     margin: 0px 30px;
     padding: 20px 0px;
}
.col-data{
     margin: 0px 20px;
}
.key-facts-data img{
     width: 27px;
     height: 27px;
}
.col-data h4{
     font-size: 16px;
     font-weight: 600;
     margin-bottom: 8px;
}
.col-data span{
     font-size: 14px;
     color: #919CAB;
}


/* Key Facts End */


/* Module */

.module-col .module{
     display: flex;
     border-top: 1px solid rgba(0,0,0,0.10);
     padding: 20px 0px;
}

.module-col h2{
     font-size: 17px;
     font-weight: 600;
     margin: 0 50px 0 20px;     
}
.module-col span{
     font-size: 17px;
     padding: 0 30px;
}
.module-col:last-child{
     border-bottom: 1px solid rgba(0,0,0,0.10);
}


/* Module End */


/* Instructor */


.instructor-profile{
     display: flex;
     margin-top: 100px;
     margin-bottom: 60px;
}

.instructor-profile > * + * {
     margin-left: 45px;
}
.profile-card{
     width: 500px;
     height: 270px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     border-radius: 20px;
     box-shadow: 0px 0px 40px 10px rgba(0,0,0,0.02);
     background: white;
}
@media (max-width:1030px) and (min-width:1020px){
     .profile-card img{
          padding: 0 100px;
     }
}
.profile-card img{
     width: 75%;
     height: 75%;
     margin-top: -20px;
     /* padding: 0 125px; */
}
.profile-card a{
     text-decoration: none;
     font-size: 18px;
     font-weight: 500;
     color: #47525D;
     width: 100%;
}
.profile-card h4{
     font-size: 16px;
     font-weight: 500;
     margin-top: 20px;
}

.profile-card-info{
     margin: 20px 15px 40px 15px;
     text-align: center;
}

@media (max-width:1024px) and (min-width:768px){
     .profile-card img{
          width: 85%;
          height: 75%;
     }
     .tabs.course-info .tabcontent p{
          padding: 0px;
     }
}

/* Instructor End */


/* FEES */


#tab4 button{
     padding: 10px;
     padding-left: 30px;
     width: 40%;
     display: flex;
     align-items: center;
     justify-content: space-between;
     font-size: 14px;
     font-weight: 600;
     border: none;
     outline: none;
     background: var(--white);
     box-shadow: 0px 0px 40px 10px rgba(0,0,0,0.04);
     cursor: pointer;

}
#tab4 button > img{
     width: 15px;
     height: 15px;
     padding: 7px;
     background: #C3D0DF;
     border-radius: 10px;
}
.fees-chart{
     margin-top: 50px;
     margin-bottom: 80px;
}
.fees-chart .headings{
     display: flex;
     justify-content: space-between;
     border-bottom: 1px solid rgba(0,0,0,0.10);
     padding: 20px 30px;
}
.fees-chart .headings .right-heading{
     display: flex;
     justify-content: space-between;
     align-items: center;
     width: 40%;
}
.fees-chart .headings h4{
     font-size: 18px;
     font-weight: 600;
     text-transform: uppercase;
}
.fees-chart .detail-row{
     display: flex;
     justify-content: space-between;
     align-items: center;
     border-bottom: 1px solid rgba(0,0,0,0.10);
     padding: 20px 30px;
}
.fees-chart .detail-row h4{
     font-size: 16px;
     font-weight: 500;
}
.fees-chart .detail-row span{
     margin: 0px;
     margin-right: 10px;
     font-size: 16px;
     font-weight: 500;
}
.fees-chart .detail-row .fees{
     display: flex;
     width: 39.5%;
     justify-content: space-between;
}

/*  FEES End */


/* Feedback */


.feedback-profile{
     display: grid;
     grid-template-columns: 1fr 1fr;
     grid-gap: 40px;
     row-gap: 70px;
     margin-top: 80px;
}
.feedback-profile img{
     width: 119px;
     height: 119px;
     margin-top: -30px;
}

.feedback-profile-card{
     border-radius: 20px;
     box-shadow: 0px 0px 40px 10px rgba(0,0,0,0.02);
     background: var(--white);
     position: relative;
}
.feedback-profile-card .upper-part{
      display: flex; 
      align-items: center;
      margin-left: 30px; 
     
}
.inner-flex{
     margin-top: 10px;
     margin-left: 30px;
}
.inner-flex a{
     text-decoration: none;
     font-size: 18px;
     font-weight: 500;
     color: #47525D;
}
.inner-flex h4{
     font-size: 16px;
     font-weight: 500;
     margin-top: 15px;
}
.feedback-profile-card p{
     margin: 30px;
     padding: 10px 30px 0px 30px;
     font-size: 16px;
}
.feedback-h3{
     margin-top: 100px;
}


/* Feedback End */




/* 
.slider-dots .dots{
     list-style-type:  none;
     display: flex!important;
     justify-content: center;
 }
 
.slider-dots{
     margin-top: 3rem;
 }
 
.slider-dots button{
     font-size: 0;
     width: 8px;
     height: 5px;
     margin-right: 0.3rem;
     border: none;
     outline: none;
     background-color: grey;
     border-radius: 50%;
     cursor: pointer;
 }
 
.dots li.slick-active button{
     background-color: var(--primary);
     width: 20px;
 } */
 

/* FAQ */


.faq-buttons{
     margin: 40px 0px 50px 0px;
}

.faq-buttons > * + * {
     margin-left: 20px;
     opacity: 0.3;
     transition: all .3s ease-in-out ;
}
.faq-buttons button:hover{
     opacity: 1;
}
.faq-buttons button{
     width: 17%;
     padding: 10px;
     border: 1px solid var(--primary);
     outline: none;
     background: white;
     color: var(--primary);
     font-size: 16px;
     font-weight: 600;
     border-radius: 40px;
     cursor: pointer;
}
.tabcontent.faq h1{
     font-size: 18px;
     font-weight: 600;
}


.accordian{
     margin-top: 30px;
}
.accordian:last-child{
     border-bottom: 1px solid rgba(0,0,0,0.10);
}
.accordian-item{
     border-top: 1px solid rgba(0,0,0,0.10);
     padding: 40px;
}
.accordian-item img{
     width: 15px;
     height: 15px;
     padding: 10px;
     background-color: #C3D0DF;
     border-radius: 10px;
     cursor: pointer;
     margin-right: 40px;
}
.accordian-item .up{
     display: none;
     background-color: var(--primary);
}
a.accordian-link{
     display: flex;
     align-items: center;
     text-decoration: none;
     font-size: 18px;
     font-weight: 500;
     color: var(--dark-black);
     padding: 0 40px 0 0;
}

.answer{
     max-height: 0;
     overflow: hidden;
     transition: all .4s ease-in-out ;
}
.answer p{
     font-size: 16px;
     font-weight: 400;
     color: var(--dark-black);
     padding: 20px 0px 20px 75px;
     
}
.tabs.course-info .tabcontent:last-child p{
     padding: 20px 0px 20px 75px;
}
.accordian-item:target .answer{
     max-height: 140px;
}


.accordian-item:target .up{
     display: block;
}
.accordian-item:target .down{
     display: none;
}
.accordian-item .answer.one.active{
     max-height: 0;
}

.accordian-item .answer.two.active{
     max-height: 0;
}

.accordian-item .answer.three.active{
     max-height: 0;
}
.accordian-item .answer.four.active{
     max-height: 0;
}

.faq-topics{
     display: none;
}




@media (max-width:1118px){
     .faq-buttons button{
          padding: 8px;
          font-size: 14px;
     }
     .faq-buttons > * + * {
          margin-left: 10px;
     }
}

/* FAQ End */

/* Tabs End */

.course{
     position: relative;
}

.enroll-mobile-buttons{
     display: none;
}
@media (max-width:984px){
     .consult-btn .cancel{
          margin-left: 15px;
     }
     
}
@media (max-width:950px){
     .enroll-mobile-buttons{
          display: block;
          width: 95%;
          background: var(--white);
          box-shadow: 0px 0px 40px 10px rgba(0,0,0,0.02);
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 20px 20px;
          position: fixed;
          bottom: 0;

     }
     .enroll-mobile-buttons button{
          font-size: 16px;
          background: none;
          outline: none;
          padding: 10px 20px;
          border-radius: 50px;
          width: 47%;
     }
     .enroll-mobile-buttons a{
          border: 1px solid var(--primary);
          border-radius: 50px;
          width: 43%;
          text-align: center;
          padding: 10px;
          text-decoration: none;
          color: var(--white);
          background: var(--primary);
          font-size: 16px;
          font-weight: 400;
          cursor: pointer;
     }
     .enroll-mobile-buttons .left-btn{
          border: none;
          background: var(--primary);
          color: var(--white);
     }
     .enroll-mobile-buttons .right-btn{
          border: 1px solid black;
          color: var(--dark-black);
     }

     .course-info-wrapper{
          padding-top: 0px;
     }
     .course-info-top{
          padding-bottom: 30px;
          flex-direction: column-reverse;
          background-color: white;
          padding: 30px;
          width: 105%;
          margin-left: -50px;
     }
     .hr-line{
          border-bottom: 2px solid rgba(0,0,0,0.10);
          transform:translateX(5%);
          margin-left: -120px;

     }
     .enroll-card{
          width: 100%;
          background: none;

     }
     .enroll-card .buttons{
          display: none;
     }
          
     .video{
          padding-top: 0px;
          padding-bottom: 0px;
     }
          
     .video video{
          width: 100%;
     }
     .course-info-right-wrapper{
          flex-direction: column-reverse;
     }
          
     .tab-wrapper{
          width: 100%;
          margin-top: 0px;
     
     }
     .key-facts{
          width: 100%;
     }
     
     .browse-tabs.course-info .tab{
          overflow-x: auto;
     }

     .tabs.course-info .tabcontent p{
          padding: 0px;
     }
     .tab.course-info .profilelink{
          padding: 15px 23.7px;
     }  
     
     #tab4 button{
          width: 60%;
     }

     .instructor-profile{
          overflow-x: auto;
     }
     .instructor-profile::-webkit-scrollbar{
          display: none;
     }
     .profile-card img{
          width: 58%;
          height: 50%;
          margin-top: 30px;
          padding: 0 120px;
     }
     
     .module-col:last-child{
          margin-bottom: 40px;
     }

     .consult-btn button{
          width: 100%;
     }
     .consult-btn .cancel{
          margin-left: 0px;
          margin-top: 20px;
     }
     
     

}

@media (max-width:768px){
     .feedback-profile{
          display: flex;
          overflow-x: auto;
     }
     .feedback-profile img{
          margin-top: 10px;
          
     }
     .feedback-profile-card p{
          width: 400px;
     }
    
     .faq-buttons{
          display: none;
     }
     .faq-topics{
          display: flex;
          margin-top: 30px;
     }
     .faq-topics > * + * {
          margin-left: 30px;
     }
     .faq-topics span{
          font-size: 16px;
          color: #919CAB;
     }
     .faq-topics .topics-btn{
          display: flex;
          justify-content: center;
          align-items: center;
          background: none;
          border: none;
          outline: none;
          font-size: 16px;
          font-weight: 500;
          color: #607C9C;
     }
     .tabcontent.faq h1{
          font-size: 20px;
     }

     .accordian-item{
          padding: 20px 0 20px 10px;
     }
     .accordian-item img{
          width: 11px;
          height: 11px;
          padding: 7px;
          border-radius: 7px;
          margin-right: 30px;
          margin-top: 5px;
     }
     .tabs.course-info .tabcontent:last-child p {
          padding: 20px 0px 20px 57px;
     }
     a.accordian-link {
          padding: 0px;
          align-items: flex-start;
     }

     .consult-popup{
          width: 65%;
          left: 10.2%;
          top: -20px;
     }
     .consult-popup h1{
          font-size: 15px;
          margin-bottom: 15px;
     }
     .consult-popup p{
          font-size: 13px;
          margin-bottom: 15px;
     }
     .consult-inputs label{
          font-size: 13px;
     }
     .consult-inputs input{
          padding: 10px;
          margin-bottom: 15px;
     }
     .consult-inputs input::placeholder{
          font-size: 12px;
     }
     .consult-btn{
          margin-top: 15px;
     }
     .consult-btn button{
          font-size: 13px;
          padding: 8px 20px;
     }

}



@media (max-width:635px){
     .instructor-profile{
          overflow-x: auto;
     }
     .instructor-profile::-webkit-scrollbar{
          display: none;
     }
     .profile-card-info{
          margin: 15px 0px 25px 0px;
     }
     .profile-card-info h4{
          margin-top: 0px;
     }
     .profile-card img{
          width: 58%;
          height: 50%;
          margin-top: -10px;
          padding: 0 120px;
     }
     .instructor-profile > * + * {
          margin-left: 30px;
     }
     section.tabs.course-info{
          margin-left: 0px;
     }
     .course-info-wrapper{
          padding-left: 20px;
     }
     .course-info-top{
          margin-left: -30px;
     }
     .enroll-mobile-buttons{
          width: 90%;
     }
     .enroll-mobile-buttons button{
          width: 47%;
     }

     .course-name-detail h1{
          font-size: 17px;
          margin-bottom: 20px;
     }
     .course-name-detail p{
          font-size: 15px;
          line-height: 1.7;
          margin-bottom: 10px;
     }
     .course-name-detail span{
          font-size: 13px;
     }
     .rating-item{
          font-size: 17px;
     }
     .star-rating h2{
          font-size: 12px;
     }
     .language img{
          width: 14px;
          height: 14px;
     }
     .language span{
          font-size: 12px;
     }

     .course-info-right-wrapper h3{
          font-size: 17px;
     }
     .key-facts-data img{
          width: 20px;
          height: 20px;
     }
     .col-data h4{
          font-size: 15px;
     }
     .col-data span{
          font-size: 13px;
     }
     .tab.course-info .profilelink{
          font-size: 13px;
     }
     .tabs.course-info .tabcontent h3{
          font-size: 15px;
     }
     .tabs.course-info .tabcontent p{
          font-size: 14px;
          line-height: 1.7;
          padding: 0 5px 0 0;
     }
     .module-col h2{
          font-size: 15px;
     }
     .module-col span{
          font-size: 15px;
          width: 300px;
          padding: 0px;
     }
     .module-col h2{
          margin: 0px;  
          width: 150px;   
     }
     .module-col:last-child{
          border-bottom: 1px solid rgba(0,0,0,0.10);
          margin-bottom: 40px;
     }
     
     #tab4 button{
          width: 100%;
          font-size: 13px;
     }
     #tab4 button > img{
          width: 11px;
          height: 11px;
          padding: 5px;
          border-radius: 7px;
     }
     .fees-chart .headings{
          padding: 20px 0px 20px 10px;
     }
     .fees-chart .headings .right-heading{
          width: 100%;
          justify-content: center;
          margin-left: 20px;
     } 
     .fees-chart .headings .right-heading > * + * {
          margin-left: 30px;
     } 

     .fees-chart .headings h4{
          font-size: 15px;
     }
     .fees-chart .detail-row{
          padding: 20px 0px;
     }


     .fees-chart .detail-row h4{
          font-size: 15px;
          padding: 0 25px 0 10px;
     }
     .fees-chart .detail-row span{
          font-size: 15px;
     }

     .fees-chart .detail-row .fees{
          display: flex;
          width: 99.5%;
          justify-content: space-between;
     }

     .consult-popup{
          padding: 30px;
          width: 80%;
          left: 5%;
     }
     
}
@media (max-width:456px){
     .enroll-mobile-buttons a{
          padding: 10px 30px;
          width: 30%;
     }
}
@media (max-width:425px){
     .feedback-profile-card p{
          width: 250px;
     }
     .faq-topics span{
          font-size: 13px;
     }
     .faq-topics .topics-btn{
          font-size: 13px;
     }
     .tabcontent.faq h1{
          font-size: 17px;
     }
     .enroll-mobile-buttons a{
          font-size: 13px;
     }
     .enroll-mobile-buttons button{
          font-size: 13px;
          padding: 10px 10px;
     }
     .consult-popup{
          padding: 30px;
          width: 71%;
          left: 7%;
     }
     
}

@media (max-width:375px){
     .consult-popup{
          padding: 30px;
          width: 71%;
          left: 6%;
     }
}
@media (max-width:360px){
     .consult-popup{
          padding: 30px;
          width: 68%;
          left: 7%;
     }
}
@media (max-width:330px){
     .consult-popup{
          top: -90px;
     }

     .enroll-mobile-buttons{
          padding: 20px 13px;
     }
     .enroll-mobile-buttons a{
          padding: 10px 20px;
          font-size: 11px;
     }
     .enroll-mobile-buttons button{
          font-size: 11px;
     }
}
@media (max-width:290px){
     .consult-popup{
          top: -30px;
          padding: 24px;
     }
     .consult-popup h1{
          font-size: 13px;
     }
     .consult-popup p{
          font-size: 12px;
     }
}

/* Course Info Section End */



/* Payment */
/* __Payment personal details */

.payment-wrapper{
     display: flex;
     margin: 0 40px;
     
}

.payment-wrapper-left{
     /* width: 750px; */
     /* height: 1400px; */
     /* background: teal; */
     margin: 0 50px 0 0;
     padding: 30px 0 60px 0;
     flex: 1 0 60%;
}

.payment-wrapper-right{
     background: #F3F7FC;
     /* width: 370px; */
     height: 110vh;
     flex: 1 0 25%;
     margin-top: 30px;
     border-radius: 10px 10px 0 0;
}

.personal-details{
     padding: 30px 0px;
     border-bottom: 2px solid rgba(0,0,0,0.10);
}
.input-wrapper:nth-child(2) {
     margin-bottom: -30px;
}
.personal-details h3, .address h3{
     font-size: 18px;
     font-weight: 600;
     margin-bottom: 60px;
}
.inputs{
     display: grid;
     grid-template-columns: 1fr 1fr;
     column-gap: 40px;
     margin-bottom: 60px;
}
.input{
     display: flex;
     flex-direction: column;
}
.input input{
     border: none;
     outline: none;
     border-radius: 8px;
     background: #F7F7F7;
     padding: 15px 20px;
}
.inputs .input label{
     font-size: 14px;
     font-weight: 500;
     color: #47525D;
     margin-bottom: 20px;
}
.input input::placeholder{
     font-size: 14px;
     font-weight: 500;
     color: black;
}
.payment-hr{
     display: none;
}
.address{
     margin-top: 60px;
}
.selection{
     display: grid;
     grid-template-columns: 1fr 1fr;
     column-gap: 40px;
     margin-bottom: 70px;
}
.state, .country{
     display: flex;
     flex-direction: column;
}
.selection label{
     font-size: 14px;
     font-weight: 500;
     color: #47525D;
     margin-bottom: 20px;
}
.selection select{
     font-size: 14px;
     font-weight: 500;
     padding: 15px;
     width: 100%;
     border: none;
     outline: none;
     border-radius: 8px;
     background: #F7F7F7;
     color: black;
}
.payment-btn{
     margin-top: 60px;
}
.payment-btn a{
     text-decoration: none;
     font-size: 16px;
     font-weight: 500;
     padding: 15px 70px;
     border-radius: 50px;
}

.payment-btn a.secondary-btn{
     background: white;
     color: var(--primary);
     border: 1px solid var(--primary);
}
.payment-btn a.primary-btn{
     background: var(--primary);
     color: var(--white);
     margin-left: 30px;
}
.order-summary{
     padding: 20px;
}
.order-summary .heading h3{
     font-size: 18px;
     font-weight: 600;
     text-transform: uppercase;
}
.order-summary .heading.two, .address .heading.two{
     display: none;
}
.order-img-btn{
     display: flex;
     align-items: center;
     justify-content: center;
     border: none;
     outline: none;
     position: relative;
}
.order-img-btn img{
     padding: 15px;
     background: #CFDFF2;
     width: 30px;
     height: 30px;
     border-radius: 15px;
}
.order-row .notification-badge{
     position: absolute;
     font-size: 14px;
     top: -10px;
     right: -10px;
     display: flex;
     justify-content: center;
     align-items: center;
     width: 25px;
     height: 25px;
     background: var(--primary);
     color: var(--white);
     border-radius: 50%;
}
.order-row{
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 20px;
}
.order-price h5{
     color: var(--dark-black);
     font-size: 14px;
     font-weight: 500;
}
.order-text h4{
     font-size: 16px;
     font-weight: 500;
     margin-bottom: 40px;
}

.order{
     margin-top: 40px;
     border-bottom: 1px solid rgba(0,0,0,0.10);
}

.total-price{
     padding: 30px 0;
     display: flex;
     justify-content: space-between;
     align-items: center;
     border-bottom: 1px solid rgba(0,0,0,0.10)
}
.total-price span{
     font-size: 16px;
     font-weight: 500;
}
.total-price h2{
     font-size: 28px;
     font-weight: 600;
}

/* Payment personal details end */


/* payment methods */

.payment-method{
     background: #F0F8FF;
     overflow: hidden;
     border-radius: 8px;

}
.payment-wrapper-left .heading h2{
     font-size: 18px;
     font-weight: 600;
     text-transform: uppercase;
     margin-bottom: 40px;
     margin-top: 20px;
}

.payment-method input{
     margin: 30px 30px 30px 60px;
}
.input-label{
     font-size: 16px;
     font-weight: 600;
     cursor: pointer;
}
.input-content{
     background: white;
     display: none;
}
.input-content{
     animation: fadeEffect .5s;
}
@keyframes fadeEffect{
     from {opacity: 0;}
     to {opacity: 1;}
}

.payment-input:checked ~ .input-content{
     display: block;  
}
.payment-radio-input{
     position: relative;
     border: .1px solid #DDECFF;    
}
.payment-radio-input input[type=radio] {
     transform: scale(1.4);
}
.payment-radio-input img{
     position: absolute;
     width: 56px;
     height: 38px;
     cursor: not-allowed;
}

/* images sequence */

.payment-img-5{
     right: 270px;
     top: 17px;
}
.payment-img-4{
     right: 200px;
     top: 17px;
}
.payment-img-3{
     right: 130px;
     top: 17px;
}
.payment-img-2.more{
     right: 60px;
     top: 17px;
}
.payment-img-2{
     right: 90px;
     top: 17px;
}
.payment-img-1{
     right: 20px;
     top: 17px;
}
.payment-img-1.more{
     top: 22px;
     width: 25px;
     height: 25px;
}

/* images sequence end */

/* Payment 1 */

.input-content{
     padding: 30px 60px;
}

.pay-methods{
     display: flex;
     flex-direction: column;
     background: #F3F7FC;
     border-radius: 10px;
     padding: 40px 50px;
}
.pay-methods input{
     margin: 0px;
}

.pay-methods label{
     margin-left: 20px;
     font-size: 16px;
     font-weight: 500;
}
.pay-methods span{
     margin-left: 35px;
     font-size: 14px;
     color: #919CAB;
     margin-top: -10px;
}
.pay-methods h3{
     font-size: 18px;
     font-weight: 500;
     margin-bottom: 20px;
}
.input-div{
     display: flex;
     align-items: baseline;
     margin-bottom: 15px;
}
.col-inputs,
.text-input{
     display: flex;
     flex-direction: column;
}
.text-input{
     margin-top: 40px;
}
.text-input label{
     font-size: 14px;
     color: #47525D;
     margin-bottom: 15px;
}
.text-input input{
     outline: none;
     margin: 0px;
     border: 1px solid #E6EEF8;
     border-radius: 8px;
     box-shadow: -1px 10px 11px -10px rgba(0,0,0,0.10);
     padding: 13px 13px 13px 30px;
}
.text-input input::placeholder{
     font-size: 14px;
     font-weight: 500;
     color: var(--dark-black);
}

.row-inputs{
     display: grid;
     grid-template-columns: 1fr 1fr;
     column-gap: 30px;
     margin-bottom: 30px;
}

/*  Payment 1 End */

/* Payment 2  */

.input-content h3{
     font-size: 16px;
     font-weight: 600;
     margin-bottom: 30px;
}
.input-content p{
     font-size: 14px;
     font-weight: 400;
     color: #919CAB;
     margin-bottom: 50px;
}

.radio-input input{
     margin: 0px;
}
.radio-input label{
     margin-left: 20px;
     font-size: 16px;
     font-weight: 500;
     transition: all .3s ease-in-out;
}
.radio-input{
     background: #F3F7FC;
     padding: 18px 30px;
     margin: 20px 0;
     border: 1px solid #E6ECF4;
     border-radius: 10px;
}
.radio-input input:checked ~ label{
     color: #0062FF;
}
.radio-input{
     position: relative;
}
.radio-input .radio-input-img{
     position: absolute;
     right: 20px;
     top: 12px;
     cursor: not-allowed;
}

/* Payment 2 end  */

/* Payment 3  */

.input-content h4{
     font-size: 16px;
     font-weight: 400;
     margin-bottom: 30px;
}
.bank-account-details{
     display: flex;
     flex-direction: column;
     background: #F3F7FC;
     border-radius: 20px;
     padding: 40px 50px 20px 50px;
     margin-bottom: 30px;
}
.bank-account-details span{
     font-size: 16px;
     font-weight: 500;
     line-height: 1.6;
     margin-bottom: 20px;
}
p.bank-transfer-para{
     font-size: 16px;
     font-weight: 400;
     color: var(--dark-black);
}
p.bank-transfer-para a{
     text-decoration: none;
     font-weight: 600;
     color: #0062FF;
}

/* Payment 3 end  */

/* Payment Completed */

.enrolling-completed{
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     margin-left: 40px;
     margin-right: 40px;
     
}
section.payment-completed .middle{
     margin-top: 10%;
  
}
section.payment-completed .middle .payment-btn{
     text-align: center;
}
.thank-you{
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
}
.thank-you img{
     width: 221px;
     height: 221px;
     margin-bottom: 50px;
}
.thank-you h3{
     font-size: 18px;
     font-weight: 600;
     margin-bottom: 50px;
     text-align: center;
}
.thank-you p{
     font-size: 16px;
     font-size: 500;
     margin-bottom: 50px;
     text-align: center;
}
.thank-you p > a{
     text-decoration: none;
     font-weight: 600;
     color: var(--dark-black);
}

/* Payment Completed End */

/* Payment Responsive */


@media (max-width:950px){
     .payment-wrapper{
          flex-direction: column-reverse;
          margin: 0px;
     }
     .payment-wrapper-right{
          margin: 0px;
          padding: 0 40px;
     }
     .payment-wrapper-left{
          padding: 0 40px;
          margin: 0px;
          overflow: hidden;
     }
     .order-summary{
          padding: 20px 0 0 0;
     }
     .address .heading.two{
          display: block;
     }
     .order-summary .heading, .address .heading{
          display: none;
     }
     .order-summary .heading.two{
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding-bottom: 30px;
          padding-top: 10px;
     }
     .order-summary .heading.two h3{
          font-size: 20px;
     }
     .order-summary .heading.two img{
          width: 30px;
          height: 30px;
     }
     .order-summary .heading.two button{
          background: none;
          border: none;
          outline: none;
     }
     .order-summary .orders{
          display: none;
     }
     .order-summary .orders.active{
          display: block;
     }
     .orders{
          animation: fadeEffect 1.2s;
     }
     @keyframes fadeEffect{
          from {opacity: 0;}
          to {opacity: 1;}
     }
     .personal-details h3, .address h3{
          font-size: 20px;
     }
     .personal-details{
          border: none;
     }
     .payment-hr{
          display: block;
          height: 8px;
          width: 130%;
          margin-left: -40px;
          background: rgba(242, 242, 242, 1);
          box-shadow: -1px 10px 11px -10px rgba(0,0,0,.10);
     }
     .payment-btn{
          text-align: center;
          padding-bottom: 60px;
     }

     /* Payment methods */

     .payment-wrapper-right.hide{
          display: none;
     }
     .payment-wrapper-left .heading h2{
          font-size: 20px;
          margin: 30px 0;
     }
    










     /* Payment methods end */

}
@media (max-width:800px){

      /* images sequence */

     .payment-img-5{
          right: 150px;
          top: 17px;
     }
     .payment-img-4{
          right: 80px;
          top: 17px;
     }
     .payment-img-3{
          display: none;
     }
     .payment-img-2.more{
          display: none;
     }
     .payment-img-1.more {
          right: 20px;
          top: 0;
     }

     /* images sequence end */
}

@media (max-width:768px){
     input.payment-input {
          margin: 30px 30px 30px 25px;
     }
}

@media (max-width:675px){
     .thank-you img{
          width: 150px;
          height: 150px;
     }
     .thank-you{
          margin: 0 20px;
     }
}

@media (max-width:600px) {
     .inputs{
          grid-template-columns: 1fr;
          row-gap: 30px;
     }
     .selection{
          grid-template-columns: 1fr;
          row-gap: 30px;
     }

     /* Payment-method */

     .row-inputs{
          grid-template-columns: 1fr;
     }
     .payment-btn a{
          padding: 10px 40px;
     }

     /* Payment-method end */
}

@media (max-width:528px){
     /* payment 1  */

     .payment-wrapper-left{
          padding: 0 20px;
     }
     .input-content{
          padding: 20px;
     }
     .pay-methods{
          padding: 30px 35px;
     }
     .payment-radio-input input[type=radio] {
          transform: scale(1.3);
     }
     .pay-methods h3{
          margin-bottom: 10px;
     }
     input.payment-input{
          margin: 20px;
     }
     input.paying-total{
          margin: 20px 20px 10px 5px;
     }
     input.paying-in-month{
          margin: 10px 20px 20px 5px;
     }
     .pay-methods label{
          margin: 0px;
     }
     .input-div{
          margin-bottom: 20px;
     }
     .pay-methods span{
          margin-left: 38px;
     }
     .col-inputs input,
     .row-inputs input{
          margin: 0px;
     }

     /* payment 1 end */

     /* images sequence */

     .payment-radio-input img{
          width: 31px;
          height: 19px;
     }
     .payment-img-5{
         right: 100px;
         top: 17px;
    }
    .payment-img-4{
         right: 57px;
         top: 17px;
    }
    .payment-img-2{
         right: 48px;
         top: 17px;
    }
    .payment-img-1{
         right: 10px;
         top: 17px;
    }
    .payment-img-1.more {
         padding: 0;
         width: 31px; 
         height: 19px; 
         right: 12px;
         top: 17px;
    }      
     
    /* images sequence end */

    .payment-wrapper-left .heading h2{
         font-size: 17px;
    }
    .input-label,
    .pay-methods h3{
         font-size: 15px;
    }
    .pay-methods label{
         font-size: 14px;
    }
    .pay-methods span,
    .text-input label{
         font-size: 13px;
    }

     /* payment 2  */    
     
     .radio-input{
          padding: 10px 10px 10px 15px;
     }
     .radio-input .radio-input-img{
          top: 14px;
     }
     .input-content h3,
     .radio-input label{
          font-size: 15px;
     }
     .input-content p{
          font-size: 13px;
     }

     /* payment 2 end  */

     /* payment 3 */

     .input-content h4,
     .bank-account-details span,
     p.bank-transfer-para{
          font-size: 15px;
     }
     .bank-account-details{
          padding: 30px 30px 15px 30px;
     }

     /* payment 3 */

     /* payment-completed */

     .thank-you img{
          width: 107px;
          height: 107px;
     }
     .thank-you h3{
          font-size: 17px;
     }
     .thank-you p{
          font-size: 15px;
     }
     .enrolling-completed{
          margin: 0px;
     }

     .payment-btn.completed{
          display: flex;
          flex-direction: column;
          margin: 0 20px;
     }

     .payment-btn.completed .primary-btn{
          margin-left: 0px;
          margin: 20px 0;
     }

     /* payment-completed end */


     .payment-btn a{
          padding: 10px 40px;
          font-size: 15px;
     }
}
@media (max-width:425px){
     .order-summary .heading.two h3{
          font-size: 17px;
     }
     .order-summary .heading.two img{
          width: 26px;
          height: 26px;
     }
     .personal-details h3,
     .address h3{
          font-size: 17px;
     }
     .order-img-btn img{
          padding: 13px;
          width: 28.42px;
          height: 29.44;
     }
     .order-price h5{
          font-size: 13px;
     }
     .order-text h4,
     .total-price span,
     .input input::placeholder,
     .payment-btn a{
          font-size: 15px;
     }
     .total-price h2{
          font-size: 20px;
     }
     .inputs .input label{
          font-size: 13px;
     }
     .payment-btn a.primary-btn{
          margin-left: 10px;
     } 
     .payment-btn a{
          padding: 10px 30px;
     }
     .payment-hr{
          height: 6px;
     }
}
@media (max-width:365px){
     .payment-btn a{
          padding: 10px 25px;
          font-size: 15px;
     }
}
@media (max-width:350px){

     .payment-img-1.more,
     .payment-img-1,
     .payment-img-2,
     .payment-img-4,
     .payment-img-5{
          display: none;
     }
     .payment-btn{
          display: flex;
          flex-direction: column-reverse;
     }
     .payment-btn a.primary-btn{
          margin-left: 0px;
          margin-bottom: 20px;
     }
}

/* Payment Responsive End*/

/* Payment End */



/* Dashboard - Instructor led  */

/* Dashboard upper section  */

.upper-white-bg{
     height: 180px;
     background: var(--white);
}
.db-nav-sec{
     padding: 35px 40px;
     margin: 0px 40px;
     background: #DDECFF;
     border-radius: 20px;
     margin-top: -130px;
     position: relative;
}
.db-nav-sec .greeting-text h3{
     font-size: 28px;
     font-weight: 600;
     margin-bottom: 10px;
}
.db-nav-sec .greeting-text p{
     font-size: 15px;
     line-height: 1.6;
     color: #7893B5;
}
.db-nav-sec .greeting-text span{
     font-size: 15px;
     line-height: 1.6;
     color: #7893B5;
}
.db-nav-sec .greeting-text{
     margin-bottom: 55px;
}
ul.db-nav-links{
     display: flex;
}
.db-nav ul li{
     position: relative;
     list-style-type: none;
}
.db-nav ul > * + * {
     margin-left: 45px;
}
a.db-nav-link{
     text-decoration: none;
     font-size: 17px;
     font-weight: 400;
     color: #738499;
}
a.db-nav-link.active{
     font-weight: 600;
     color: #282F39;
}


a.db-nav-link::before,
a.db-nav-link.active::before{
     content: "";
     position: absolute;
     left: 0;
     bottom: -5px;
     background: var(--primary);
     width: 100%;
     height: 3px;
     transform: scaleX(0);
     transition: transform 650ms;
}
a.db-nav-link.active::before{
     transform: scaleX(1);
}

.db-vector img{
     width: 271px;
     height: 262px;
     position: absolute;
     right: 30px;
     bottom: 0;
}


/* Dashboard upper section End */


/* Dashboard link  */

.dashboard-link{
     background: #F3F7FC;
     margin-top: -123px;
     padding-top: 123px;
     padding-bottom: 30px;
}
.db-wrapper{
     margin: 0px 40px;
     display: flex;
     gap: 70px;
    
}
.db-left-wrapper{
     /* width: 750px; */
     /* height: 140vh; */
     /* background: purple; */
     flex: 1 0 60%;
}
.db-right-wrapper{
     /* width: 390px; */
     /* height: 140vh; */
     /* background: orange; */
     flex: 1 0 30%;
}

/* Upcomming lesson  */

.upcoming-lessons {
     padding-top: 30px;
}
.upcoming-lessons .parent-btn h3{
     font-size: 18px;
     font-weight: 600;
     margin: 30px 0 30px 0;
}
.db-wrapper button.parent-btn{
     background: none;
     border: none;
     outline: none;
}
.db-wrapper button.parent-btn img{
     width: 25px;
     height: 25px;
     display: none;
}
.upcoming-lessons-card{
     padding: 20px 20px;
     background: white;
     border-radius: 20px;
     box-shadow: 0px 0px 40px 10px rgba(0,0,0,0.02);
     margin-bottom: 30px;
}
.card-row{
     display: flex;
     margin: 0 15px;
     padding: 20px 0px;
}
.card-row .date{
     padding: 0 20px 50px 0;
     flex: 1 0 6%;     
}
.card-row .date span{
     font-size: 14px;
     font-weight: 500;
     color: #919CAB;
}
.play-img img{
     width: 25px;
     height: 25px;
     position: absolute;
     left: -13px;
     top: 33%;
     transform: translateY(-50%);
     display: none;
}
.play-img{
     position: relative;
     border-left: 2px solid rgba(0,0,0,0.13);
     margin-right: 20px;
}
.card-row .row{
     flex: 1 0 78%;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 20px;
     box-shadow: 0px 0px 40px 10px rgba(0,0,0,0.06);
     border-radius: 12px;
     border-left: 10px solid #6C6AFF;
}

.left-col .heading a{
     text-decoration: none;
     color: var(--dark-black);
     font-size: 16px;
     font-weight: 500;
}
.left-col .time-info span{
     font-size: 14px;
     font-weight: 400;
     color: #919CAB;
}
.time-info > * + * {
     margin-left: 15px;
}
.right-col{
     display: flex;
     flex-direction: column;
     margin-top: 10px;
}
.right-col .live-class{
     display: flex;
     align-items: center;
     justify-content: space-between;
}
.right-col .live-class h6{
     font-size: 13px;
     font-weight: 600;
     color: #00C8AE;
     margin-right: 10px;
}
.right-col .live-class p{
     width: 10px;
     height: 10px;
     background: #00C8AE;
     border-radius: 50%;
     margin-top: -2.5px;
}
.right-col .btn button{
     border: none;
     background: none;
     outline: none;
     margin-top: 10px;
}
.right-col .btn a{
     text-decoration: none;
     font-size: 15px;
     font-weight: 300;
     padding: 5px 30px;
     border-radius: 100px;
     color: var(--white);
     background: #2181FF;
}

/* 2nd and 3rd Row */

.card-row.second .row{
     border-left: 10px solid #00C8C2;
}
.card-row.second .right-col .btn{
     margin-top: 20px;
}
.card-row.third .row{
     border-left: 10px solid #EB2E75;
}
.card-row.third .right-col .btn{
     margin-top: 20px;
}

/* 2nd and 3rd Row End */

.see-all-schedule{
     display: flex;
     justify-content: flex-end;
     margin: 0 20px;
}
.see-all-schedule button{
     display: flex;
     align-items: center;
     border: none;
     background: none;
     outline: none;
}
.see-all-schedule a{
     text-decoration: none;
     font-size: 14px;
     font-weight: 600;
     color: #0062FF;
     margin-right: 15px;
}
.see-all-schedule img{
     width: 24px;
}


/* Upcomming lesson End */

/* Announcement  */

.announcement button.parent-btn h3{
     font-size: 18px;
     font-weight: 600;
     margin: 60px 0 30px 0;
}
.announcement-card{
     padding: 20px 40px;
     background: white;
     border-radius: 20px;
     box-shadow: 0px 0px 40px 10px rgba(0,0,0,0.02);
     margin-bottom: 30px;
}
.announcement-row:nth-child(3){
     margin-bottom: 20px;
}
.announcement-row{
     display: flex;
     align-items: flex-start;
     justify-content: center;
     padding: 30px 0;
     border-bottom: 1.5px solid rgba(0,0,0,0.07);
}
.announcement-row .left-div{
     display: flex;
     align-items: center;
}
.announcement-row .month-and-date{
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     padding: 5px 24px;
     border-radius: 20px;
     background: #DDDDFF;
     box-shadow: 0px 0px 40px 10px rgba(0,0,0,0.02);
}
.announcement-row .responsive-heading{
     display: none;
}
.announcement-row .left-div span{
     font-size: 28px;
     font-weight: 600;
     color: #6C6AFF;
}
.announcement-row .left-div h5{
     font-size: 14px;
     font-weight: 600;
     color: #6C6AFF;
}
.announcement-row .right-div{
     padding: 0 30px;
}
.announcement-row .right-div h4{
     font-size: 16px;
     font-weight: 600;
     margin-bottom: 10px;
}
.announcement-row .right-div p{
     font-size: 14px;
     font-weight: 400;
     line-height: 1.6;
     color: #919CAB;
}
.announcement-row .right-div p > a{
     text-decoration: none;
     font-size: 14px;
     font-weight: 500;
     color: #2181FF;
     margin-left: 10px;
}

/* 2nd and 3rd announcement row  */

.announcement-row.second .month-and-date{
     background-color: #D7F8F7;
}
.announcement-row.second .month-and-date span,
.announcement-row.second .month-and-date h5{
     color: #00C8C2;
}

.announcement-row.third .month-and-date{
     background-color: #FFDFEB;
}
.announcement-row.third .month-and-date span,
.announcement-row.third .month-and-date h5{
     color: #EB2E75;
}

/* 2nd and 3rd announcement row end */

/* Announcement End */

/* TASKS */

.tasks h3{
     font-size: 18px;
     font-weight: 600;
     margin: 60px 0 30px 0;
}
.calendar-card{
     padding: 30px 30px 23px;
     background: white;
     border-radius: 20px;
     box-shadow: 0px 0px 40px 10px rgba(0,0,0,0.02);
     margin-bottom: 30px;
}
.months{
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 30px;
}
.months button{
     display: flex;
     align-items: center;
     justify-content: center;
     border: none;
     outline: none;
     background: none;
     cursor: pointer;
}
.months img{
     padding: 7px;
     width: 12px;
     height: 12px;
     background-color: #CCDAED;
     border-radius: 8px;
}
.months span{
     font-size: 17px;
     font-weight: 600;
}
.row.one,
.row.two,
.row.three,
.row.four,
.row.five,
.row.six{
     display: grid;
     grid-template-columns: repeat(7, 1fr);
     justify-items: center;
}
.days{
     padding-bottom: 20px;
     border-bottom: 1px solid rgba(0,0,0,0.10);
}
.days .row{
     margin: 10px 0;
}
.days h4{
     display: flex;
     align-items: center;
     justify-content: center;
     width: 32px;
     height: 32px;
     cursor: pointer;
}
.days .row.one h4{
     font-size: 16px;
     font-weight: 400;
     color: #C0CCDB;
     cursor: text;
}
.row.two,
.row.three,
.row.four,
.row.five,
.row.six{
     font-size: 16px;
     font-size: 500;
     color: #607C9C;
}
.days h4.active{
     background-color: #ADACFF;
     color: var(--white);
     border-radius: 10px;
}


.assignment{
     margin: 20px 0;
}
.assignment-row{
     display: flex;
     align-items: center;
     justify-content: space-between;
}
.assignment-row.second{
     display: none;
}
.assignment-row .left-side{
     display: flex;
     align-items: flex-start;
}
.left-side .green-dot{
     width: 16px;
     height: 16px;
     background-color: #00C8AE;
     border-radius: 50%;
     margin: 5px 20px 0 0 ;
}
.assignment-row .heading{
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     justify-content: center;
}
.assignment-row .left-side a{
     text-decoration: none;
     font-size: 15px;
     font-weight: 500;
     color: var(--dark-black);
     margin-bottom: 7px;
}
.assignment-row .left-side span{
     font-size: 13px;
     font-weight: 400;
     color: #919CAB;
}
.assignment-row .right-side img{
     width: 14px;
     height: 14px;
     padding: 9px;
     background-color: #2181FF;
     border-radius: 10px;
}

.see-all-schedule.task{
     margin: 0px;
}

/* TASKS END  */

/* GRADE */


.grade h3{
     font-size: 18px;
     font-weight: 600;
     margin: 60px 0 30px 0;
}

.grade-card{
     padding: 50px 30px 23px;
     background: white;
     border-radius: 20px;
     box-shadow: 0px 0px 40px 10px rgba(0,0,0,0.02);
     margin-bottom: 30px;
}

.percent-row{
     display: flex;
     align-items: center;
     justify-content: space-between;
}

svg circle{
     position: relative;
     width: 100%;
     height: 100%;
     fill: none;
     stroke: #EDF0F4;
     stroke-width: 12;
     stroke-linecap: round;
     transform: translate(6px,6px);
}
 
svg circle:nth-child(2){
    stroke-dasharray: 310;
    stroke-dashoffset: calc( 310 - (310 * 65) / 100 );
    stroke: #3E90FB;
 
}
.percent{
    position: relative;
    width: 110px;
    height: 110px;
}
.percent .number{
    width: 110px;
    height: 110px;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
 
}
.percent .number h2{
    font-size: 34px;
    font-weight: 600; 
    color: #4E86D0;
}
.percent-row h2{
    font-size: 26px;
    font-weight: 500;
    color: #607C9C;
}
 
.percent-bars{
     margin: 10px 0;
}

 .percent-bar{
      display: flex;
      flex-direction: column;
      margin: 40px 0;
 }
 .percent-bar .upper-row{
      display: flex;
      align-items: center;
      justify-content: space-between;
 }
 .percent-bar .upper-row h5,
 .percent-bar .upper-row h4{
      font-size: 16px;
      font-weight: 400;
      color: #607C9C;
 }
 .lower-row .secondary-bar{
     background: #E7E7E7;
     display: block;
     height: 10px;
     width: 100%;
     border: none;
     border-radius: 3px;
     overflow: hidden;
     margin-top: 10px;
 }
 .lower-row .secondary-bar span{
     height: 10px;
     border-radius: 3px;
     float: left;
     background: #6C6AFF;
 }
 .lower-row .primary-bar{
     width: 65%;
     animation: primary-bar 2s;
 }
 
@keyframes primary-bar {
     0%{
          width: 0%;
     }
     100%{
          width: 65%;
     }
}

/* 2nd percent bar */

.percent-bar.second .secondary-bar span{
     background: #00C8C2;
}
.percent-bar.second .lower-row .primary-bar{
     width: 70%;
     animation: primary-bar-second 2s;
}
@keyframes primary-bar-second {
     0%{
          width: 0%;
     }
     100%{
          width: 70%;
     }
}

/* 2nd percent bar End */

/* 3rd percent bar */


.percent-bar.third .secondary-bar span{
     background: #EB2E75;
}

.percent-bar.third .lower-row .primary-bar{
     width: 80%;
     animation: primary-bar-third 2s;
}
@keyframes primary-bar-third {
     0%{
          width: 0%;
     }
     100%{
          width: 80%;
     }
}
 
/* 3rd percent bar End*/
 
/* GRADE END */

/* Dashboard link End */


/* Schedule Link  */

/* Upcoming lessons */

/* Upper Section */

.ul-card{
     padding: 30px 40px;
     background: white;
     border-radius: 20px;
     box-shadow: 0px 0px 40px 10px rgba(0,0,0,0.02);
     margin-bottom: 30px;
}
.upper-sec{
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 10px 0 30px;
     border-bottom: 1px solid rgba(0,0,0,0.10);
}

.upper-sec .months{
     width: 40%;
     margin-bottom: 0px;
}
.upper-sec .months span{
     padding: 0px 10px;
}
.upper-sec .buttons{
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 20px;
}
.upper-sec .buttons a{
     text-decoration: none;
     font-size: 15px;
     font-weight: 600;
     color: #2181FF;
}
.upper-sec .buttons button{
     display: flex;
     align-items: center;
     justify-content: center;
     border: none;
     outline: none;
     background: none;
}
.upper-sec .buttons button a + a{
     margin-left: 10px;
}
.upper-sec button.create img,
.upper-sec button.import img{
     width: 10px;
     height: 10px;
     padding: 4px;
     margin-top: 5px;
     border: 2px solid #2181FF;
     border-radius: 50%;
}

.months-btn,
.buttons-dots{
     display: none;
}

/* Upper Section End */

/* Middle section */

.middle-sec{
     padding: 30px 0;
}

.middle-sec .dates{
     display: flex;
     align-items: center;
     justify-content: space-around;
     margin-left: 20px;
}
.middle-sec .date{
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
}
.middle-sec .date h5{
     font-size: 17px;
     font-weight: 500;
     color: #4C5561;
}
.middle-sec .date h4{
     display: none;
}
.middle-sec .date span{
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 17px;
     font-weight: 400;
     color: #B9C4D3;
     padding: 10px;
     width: 10px;
     height: 10px;
}
.middle-sec .date span.active{
     padding: 10px;
     background: #ADACFF;
     color: var(--white);
     border-radius: 50%;
}

/* Middle section End  */

/* Lower Section */


.lower-sec .row{
     display: flex;
     align-items: flex-start;
     margin-top: 3px;
}
.lower-sec .row .left-side h5{
     font-size: 14px;
     font-weight: 500;
     color: #C3CBD6;
     width: 50px;
     margin-top: -10px;
}
.lower-sec .row .right-side{
     width: 100%;
}
.lower-sec .hr-line-ul{
     border-top: 1px solid rgba(0,0,0,0.08);
     margin-bottom: 3px;
}
.lower-sec .inner-text{
     padding: 12px 20px;
     background-color: #EBFBFB;
     border-radius: 10px;
}
.lower-sec .inner-text h4{
     font-size: 15px;
     font-weight: 500;
     color: #44484F;
}
.lower-sec .inner-text span{
     font-size: 12px;
     font-weight: 500;
     color: #A5AEB7;
}

.row.blank .inner-text{
     background-color: white;
     height: 45px;
}

.lower-sec .row:nth-child(6) .inner-text{
     background: #FFEFF5;
}

/* Lower Section End */

/* Upcoming lessons End */

/* Schedule Calender */

.tasks.schedule{
     margin-top: 115px;
}
.tasks.schedule .days{
     border-bottom: none;
     padding-bottom: 0px;
}

/* Schedule Calender End */

/* Mentoring Sessions */


.mentoring-session h3{
     font-size: 18px;
     font-weight: 600;
     margin: 60px 0 30px 0;
}

.ms-card{
     padding: 30px 30px 23px;
     background: white;
     border-radius: 20px;
     box-shadow: 0px 0px 40px 10px rgba(0,0,0,0.02);
     margin-bottom: 30px;
}
.days-and-dates{
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
}
.ms-card .left-arrow,
.ms-card .right-arrow{
     cursor: pointer;
}
.days-and-dates img{
     width: 12px;
     height: 12px;
}
.days-and-dates .mid-text h5{
     font-size: 14px;
     font-weight: 500;
}
.days-and-dates .mid-text span{
     font-size: 13px;
     font-weight: 500;
     color: #9BA3AD;
}
.days-and-dates .mid-text{
     width: 100%;
     display: flex;
     align-items: flex-start;
     justify-content: space-around;
}
.days-and-dates .mid-text .item{
     display: flex;
     flex-direction: column;
     align-items: center;
}
.item .lower-items{
     display: flex;
     flex-direction: column;
     margin-top: 10px;
}
.item .lower-items span{
     font-size: 13px;
     background-color: #F3F7FC;
     /* margin-bottom: 3px; */
     padding: 25px 20px;
     margin: 3px;
     border-radius: 6px;
     
}
.item .lower-items span.active{
     font-weight: 600;
     color: #EB2E75;
     background: #FFEFF5;
}
.book-session-btn{
     display: flex;
     justify-content: center;
     align-items: center;
     margin: 20px 0;
}
.book-session-btn button{
     background: #2181FF;
     border: none;
     outline: none;
     padding: 10px;
     border-radius: 20px;
     width: 90%;
}
.book-session-btn a{
     text-decoration: none;
     font-size: 15px;
     font-weight: 400;
     color: var(--white);
}

/* Mentoring SessionsEnd */

/* Schedule Link End */

/* Dashboard Link self-paced */

.self-paced-play-icon{
     width: 25px;
     height: 25px;
     display: none;
}
.card-rows{
     border-left: 1px solid rgba(0,0,0,0.10);
     margin: 0 30px;
}
.self-paced-span{
     margin: 10px 30px;
}
.self-paced-span span{
     font-size: 15px;
     font-weight: 500;
     color: #919CAB;
}
.self-paced-play-img{
     margin-right: 10px;
}
.self-paced-play-img img{
     width: 35px;
     height: 35px;
}
.calendar-card.self-paced .see-all-schedule{
     padding: 7px 0px;
}
.card-rows.self-paced button{
     border: none;
     outline: none;
     background: none;
     cursor: pointer;
}
.card-rows.self-paced span{
     font-style: italic;
}

/* Dashboard Link self-paced end */

/* Schedule Link Self-paced */


.card-rows.schedule .card-row.for-mobile{
     display: none;
}


.card-rows.schedule .card-row.first .row,
.card-rows.schedule .card-row.second .row,
.card-rows.schedule .card-row.third .row{
     border-left: 10px solid #6C6AFF;
}

.card-row.fourth .row,
.card-row.fifth .row{
     border-left: 10px solid #00C8C2;
    
}
.card-row.sixth .row{
     border-left: 10px solid #EB2E75;
}
.upcoming-lessons-card.schedule button{
     border: none;
     outline: none;
     background: none;
     cursor: pointer;
}
.card-row.fifth img.download-icon{
     padding: 8px;
     border-radius: 10px;
     width: 17px;
     height: 17px;
     background-color: #2181FF;
}

.see-all-schedule.self-paced{
     padding: 10px 0px;
}


/* Schedule Link Self-paced End  */



/* Module Link */


.module-wrapper{
     display: flex;
     margin: 30px 40px;
}
.left-module{
     /* height: 100vh; */
     flex: 1 0 25%;
     margin-top: 30px;
     margin-right: 60px;
     /* background-color: teal; */
}
.right-module{
     /* height: 100vh; */
     flex: 1 0 70%;
     margin-top: 30px;
     /* background-color: chocolate; */
     
}
.module-wrapper .overview-btn{
     display: none;
}
.left-module .card{
     background-color: var(--white);
     display: flex;
     align-items: center;
     padding: 20px;
     border-radius: 20px;
     box-shadow: 0px 0px 40px 10px rgba(0,0,0,0.02);
}
.left-module .card .heading{
     width: 100%;
}
.left-module .card li{
     list-style-type: none;

     padding: 10px 0;
     margin: 5px 0;
     border-radius: 10px;
     /* background-color: orange; */
}
.left-module .card li.active{
     background-color: #FFEFF5;
     color: var(--dark-black);
}
.left-module .card li.active a{
     font-weight: 600;
}
.left-module .card li.semi-active{
     background-color: #F7F7F7;
}
.left-module .card li a{
     text-decoration: none;
     font-size: 15px;
     font-weight: 500;
     color: var(--dark-black);
     padding: 0 15px;
}
.sub-headings{
     margin-left: 40px;
     border-left: 1px solid rgba(0,0,0,0.10);
}
.sub-headings .week-link{
     position: relative;
}
.sub-headings .week-link.active::before{
     content: "";
     position: absolute;
     left: -1.5px;
     bottom: -5px;
     background: #EB2E75;
     width: 3px;
     height: 150%;
     transform: scaleX(1);
     transition:  transform 650ms;
}
.sub-headings .week-link.active::before{
     transform: scaleX(1);
}
.sub-headings .week-link.active{
     color: #EB2E75;
}
.module-overview{
     padding: 20px;
}
.module-overview h3{
     font-size: 18px;
     font-weight: 600;
     margin-bottom: 30px;
}
.module-overview p{
     font-size: 15px;
     margin-bottom: 40px;
     line-height: 1.6;
}
.module-data{
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 20px 20px;
     border-top: 1px solid rgba(0,0,0,.2);
}
.module:last-child .module-data{
     border-bottom: 1px solid rgba(0,0,0,.2);
}
.module-data .left-side h4{
     font-size: 15px;
     font-weight: 400;
     margin-right: 10px;
}
.module-data .right-side button{
     background: #CCDAED;
     border: none;
     outline: none;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 10px;
     z-index: 10;
}
.module-data .right-side img{
     width: 15px;
     height: 15px;
     padding: 7px;
}
.lectures {
     margin: 0px 60px;
     padding: 20px 30px;
     position: relative;
     border-left: 1px solid rgba(104, 31, 31, 0.1);
     display: none;
     animation: fadeEffect .5s;
}
#lecture{
     padding: 15px 0;
}
.lectures img{
     position: absolute;
     width: 13px;
     height: 13px;
     left: -15px;
     border: 1px solid #87AFE4;
     padding: 6px;
     border-radius: 50%;
     background: none;
}
.lectures a{
     text-decoration: none;
     font-size: 15px;
     font-weight: 400;
     margin-top: 3px;
     margin-left: 10px;
     color: var(--dark-black);
}
.row4 a,
.row5 a{
     font-style: italic;
     font-weight: 100;
     color: #6A7079;
}
.lectures.active{
     display: block;
}

.module-data:hover{
     background-color: #E4EEFA;
}
.module-data.active{
     background-color: #E4EEFA;
     border-bottom: 1px solid rgba(0,0,0,.2);
}
.module-data.active button{
     background-color: #2181FF;
}
.module-data.active h4{
     color: #2181FF;
}

.lectures.one{
     display: block;
}
.lectures.one.active{
     display: none;
}
.module-data.one button{
     background-color: #2181FF;
}
.module-data.one h4{
     color: #2181FF;
}
.module-data.one:hover{
     background-color: #E4EEFA;
}
.module-data.one{
     background-color: #E4EEFA;
     border-bottom: 1px solid rgba(0,0,0,.2);
}
.module-data.one.active button{
     background: #CCDAED;
}
.module-data.one.active{
     background: none;
     border-bottom: none;
}
.module-data.one.active h4{
     color: var(--dark-black);
}

/* Module Link End */


/* Task link */

.tasks-wrapper{
     margin: 0 40px;
}

/* Upper Section */

.upper-section{
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-top: 30px;
}
.upper-section .left-side h3{
     font-size: 18px;
     font-weight: 600;
}
.upper-section .right-side{
     display: flex;
     margin-top: 20px;
}
.upper-section .right-side > * + * {
     margin-left: 40px;
}
.upper-section .right-side div{
     display: flex;
     align-items: center;
     justify-content: space-between;
}
.upper-section .right-side div img{
     width: 15px;
     height: 15px;
}
.upper-section .right-side div img.arrow-img{
     cursor: pointer;
     width: 10px;
     height: 10px;
}
.upper-section .right-side div h4{
     font-size: 15px;
     font-weight: 400;
     color: #818E9F;
     padding: 0 10px;
}

/* Upper Section End */

/* Lower Section */

.lower-section{
     margin-top: 20px;
     margin-bottom: 30px;
}
.lower-section .task-card{
     background: var(--white);
     padding: 40px;
     border-radius: 20px;
     margin-top: 40px;
}
.lower-section .task-card .heading-row{
     display: flex;
     justify-content: space-between;
     align-items: center;
     border-bottom: 1px solid rgba(0,0,0,.07);
     padding-bottom: 30px;
}
.lower-section .task-card .heading-row .right-heading{
     /* display: flex;
     align-items: center;
     justify-content: space-between;
     width: 68%; */
     display: grid;
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
     column-gap: 10%;
     width: 68%;
}
.lower-section .task-card h5{
     font-size: 15px;
     font-weight: 500;
     color: #ACACF5;
}
.data-row{
     display: grid;
     /* grid-template-columns:  25% 15% 15% 15% 8% 20%; */
     grid-template-columns:  30% 15% 10% 10% 8% 8%;
     column-gap: 20px;
     border-bottom: 1px solid rgba(0,0,0,.07);
     padding: 20px 0;
}
.data-row .second-last,
.data-row .last-child{
     display: flex;
     /* justify-content: flex-end; */
     
     margin-right: -60%;
}
.data-row .last-child{
     justify-content: flex-end;
     margin-right: -75%;
}
.data-row .status{
     margin-left: -15%;
}
.data-row h4,
.data-row button,
.data-row span{
     display: flex;
     align-items: center;
     justify-content: center;
}
.data-row h4{
     justify-content: flex-start;
     font-size: 14px;
     font-weight: 500;
}
.data-row .deadline{
     justify-content: center;
     margin-left: -70%;
}
.data-row button{
     /* justify-content: flex-end; */
     padding: 10px 30px;
     width: 80%;
     border: none;
     background: #2181FF;
     color: var(--white);
     font-size: 14px;
     border-radius: 20px;
     margin-left: -20%;
     cursor: pointer;
}
.data-row span{
     font-size: 14px;
     font-weight: 500;
     color: #ABABAB;
}
.data-row.two .view-btn,
.data-row.three .view-btn{
     width: 100%;
     margin-left: 110%;
}
.data-row.two .upload-btn,
.data-row.three .upload-btn{
     background: #CAD1DA;
} 
.data-row.two .status{
     color: #6060E4;
}
.data-row.two .second-last,
.data-row.three .second-last{
     color: var(--dark-black);
}
.data-row.three .status{
     color: #1BB9A5;
}
.data-row.five .status,
.data-row.six .status{
     color: #D91E63;
}

/* Lower Section End */











/* feedback popup */

.tasks-wrapper{
     position: relative;
}
.feedback-popup,
.upload-popup{
     width: 43%;
     padding: 50px 60px 40px;
     background: #F9FBFD;
     box-shadow: 0px 0px 40px 10px rgba(0,0,0,0.1);
     position: fixed;
     z-index: 1000;
     border-radius: 10px;
     left: 24%;
     transform: translateY(30%);
     top: -80px;
     display: none;    
}
.upload-popup{
     display: block;
}
.feedback-popup{
     animation: fadeEffect .3s;
}
.feedback-popup.active{
     display: block;
}
.feedback-popup .upper-div{
     margin-bottom: 30px;
}
.feedback-popup .upper-div h4{
     font-size: 14px;
     font-weight: 400;
     margin: 20px 0;
}
.feedback-popup .feedback{
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 20px 0;
     border-bottom: 1px solid rgba(0,0,0,.07);
}
.feedback-popup .feedback h4{
    font-size: 15px;
    font-weight: 500;
    color: #47525D;
}
.feedback-popup .feedback span{
    font-size: 15px;
    font-weight: 500;
    color: #B6BFCC;
}
.feedback-popup .introduction-quiz,
.feedback-popup .css-design-project{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 30px 0;
}
.feedback-popup .introduction-quiz h4,
.feedback-popup .css-design-project h4{
    font-size: 14px;
    font-weight: 500;

}
.feedback-popup p{
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 30px;
    padding: 0 100px 0 0;
}

.feedback-popup .done-btn{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 40px;
}

.feedback-popup .done-btn button{
    font-size: 16px;
    font-weight: 500;
    padding: 10px 30px;
    background-color: #0062FF;
    color: var(--white);
    border: none;
    border-radius: 50px;
    cursor: pointer;
}

/* feedback popup End */

/* Upload popup  */

.upload-popup{
    display: none;
    animation: fadeEffect .3s;
}

.upload-popup.active{
    display: block;
}
.close-icon{
    cursor: pointer;
}
.upload-popup h4{
    font-size: 18px;
    font-weight: 600;
}
.upload-popup .upload-file{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #F3F7FC;
    border: 5px dashed #C3D0DF;
    margin: 50px 0;
    padding: 50px 0;
    border-radius: 40px;
}
.upload-popup .upload-file img{
    width: 108px;
    height: 108px;
    margin-bottom: 20px;
    cursor: pointer;
}
.upload-popup .upload-file span{
    font-size: 14px;
    font-weight: 400;
    color: #919CAB;
}
.downloaded-file{
    display: flex;
    align-items: center;
    background-color: var(--white);
    padding: 15px 20px;
    box-shadow: 0px 20px 40px 10px rgba(0,0,0,0.03);
    border-radius: 5px;
    margin-bottom: 20px;
}
.downloaded-file .left-col{
    display: flex;
    align-items: center;
    width: 100%;
}
.downloaded-file .left-col img{
    width: 33px;
    height: 34px;
}
.downloaded-file .left-col a{
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    color: var(--dark-black);
}
.downloaded-file.first .left-col a{
    margin-left: 20px;
}
.downloaded-file .right-col img{
    width: 20px;
    height: 20px;
}
.heading-with-progress{
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0 20px;
}
.heading-with-progress .secondary-bar{
    background: #E7E7E7;
    display: block;
    height: 5px;
    width: 100%;
    border: none;
    border-radius: 3px;
    overflow: hidden;
    margin-top: 10px;
}
.heading-with-progress .secondary-bar span{
    height: 5px;
    border-radius: 3px;
    float: left;
    background: #00C8C2;
}
.heading-with-progress .primary-bar{
    width: 40%;
    animation: progress-bar 2s;
}
@keyframes progress-bar{
     0%{
          width: 0%;
     }
     100%{
          width: 40%;
     }
}


.upload-popup .submit-all{
     display: flex;
     justify-content: center;
     align-items: center;
     margin-top: 40px;
 }
 
 .upload-popup .submit-all button{
      font-size: 16px;
      font-weight: 500;
      padding: 10px 30px;
      background-color: #0062FF;
      color: var(--white);
      border: none;
      border-radius: 50px;
      cursor: pointer;
 }

/* Upload popup End */

.upper-sec-for-mob,
.lower-sec-for-mob{
     display: none;
}

/* Task link End */

/* Grade Page*/

/* Grade Overview */


section.grade{
     background-color: #F9FBFD;
     padding: 20px 0;
}
.grade.page{
     margin: 0px;
}
section.grade .grade-wrapper{
     margin: 0 40px;
}
.grade-wrapper .heading{
     padding: 20px 0;
}
.grade-wrapper .heading h4{
     font-size: 18px;
     font-weight: 600;
     /* margin-bottom: 20px; */
}
.grade-overview{
     /* display: flex; */
     display: grid;
     grid-template-columns: 22% 54% 18%;
     column-gap: 40px;
     margin-bottom: 30px;
}

/* Grade Overview - Left Section */

.grade-overview .left-section{
     background-color: var(--white);
     box-shadow: 0px 0px 40px 10px rgba(0,0,0,0.02);
     padding: 20px;
     border-radius: 20px;
     display: flex;
     justify-content: space-around;
     align-items: center;
     flex-direction: column;
}
.left-section .score{
     display: flex;
     align-items: center;
     justify-content: space-between;
     /* width: 40%; */
}
.left-section .score h5{
     font-size: 18px;
     font-weight: 500;
     color: #919CAB;
     margin: 0 15px 0 20px;
}
.left-section .score h6{
     font-size: 18px;
     font-weight: 500;
     color: #607C9C;
     margin: 0 15px 0 20px;
}

/* Grade Overview - Left Section End */


/* Grade Overview - Middle Section */

.middle-section{
     display: flex;
     align-items: center;
     justify-content: center;
     background-color: var(--white);
     box-shadow: 0px 0px 40px 10px rgba(0,0,0,0.02);
     padding: 20px;
     border-radius: 20px;
}

.middle-section .first-col{
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: flex-end;
     border-right: 1px solid rgba(0,0,0,.07);
     padding: 0 15px;
     margin: 18px 0 30px 0;
}
.middle-section .first-col span{
     font-size: 14px;
     font-weight: 400;
     color: #919CAB;
     margin-bottom: 20px;
}
.middle-section .first-col span:last-child{
     margin-bottom: 0px;
}

.grade-module{
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     margin: 0 10px;
     padding: 10px;
}

.grade-module .secondary-bar{
     background: #E7E7E7;
     width: 10px;
     height: 100px;
     border: none;
     border-radius: 3px;
     overflow: hidden;
     position: relative;
}
.grade-module span{
     width: 100%;
     display: block;
     height: 40%;
     /* background-color: #6C6AFF; */
     border-radius: 3px;
     position: absolute;
     bottom: 0;   
}

.grade-module .percentage h4{
     font-size: 14px;
     font-weight: 400;
     color: #919CAB;
     margin-bottom: 10px;
}
.grade-module .module-name h3{
     font-size: 14px;
     font-weight: 400;
     color: #919CAB;
     margin-top: 20px;
     margin-bottom: 0px;
     width: 150%;
}

.grade-module.one span{
     height: 62%;
     background-color: #6C6AFF;
     animation: grade-module-one 2s;
}

@keyframes grade-module-one {
     0%{
          height: 0%;
     }
     100%{
          height: 62%;
     }
}

.grade-module.two span{
     height: 73%;
     background-color: #00C8C2;
     animation: grade-module-two 2s;
}

@keyframes grade-module-two {
     0%{
          height: 0%;
     }
     100%{
          height: 73%;
     }
}


.grade-module.three span{
     height: 53%;
     background-color: #EB2E75;
     animation: grade-module-three 2s;
}

@keyframes grade-module-three {
     0%{
          height: 0%;
     }
     100%{
          height: 53%;
     }
}

.grade-module.four span{
     height: 62%;
     background-color: #6C6AFF;
     animation: grade-module-four 2s;
}

@keyframes grade-module-four {
     0%{
          height: 0%;
     }
     100%{
          height: 62%;
     }
}

.grade-module.five span{
     height: 73%;
     background-color: #00C8C2;
     animation: grade-module-five 2s;
}


@keyframes grade-module-five {
     0%{
          height: 0%;
     }
     100%{
          height: 73%;
     }
}

/* Grade Overview - Middle Section End */

/* Grade Overview - Right Section */

.grade-overview .right-section{
     display: flex;
     justify-content: center;
     align-items: flex-start; 
     background-color: var(--white);
     box-shadow: 0px 0px 40px 10px rgba(0,0,0,0.02);
     padding: 20px;
     border-radius: 20px;
}
.grade-overview .right-section img{
     width: 21px;
     height: 21px;
}
.right-section .upper{
     display: flex;
     align-items: center;
}
.right-section .upper h4{
     font-size: 28px;
     font-weight: 600;
     margin-left: 20px;
}
.right-section .lower span{
     font-size: 14px;
     font-weight: 400;
     color: #919CAB;
}

.right-section .task-completed{
     margin: 10px 0 30px 0;
}

/* Grade Overview - Right Section End */

/* Grade Overview End */

/* Certifeid Associate */

.certified-associate{
     background-color: var(--white);
     box-shadow: 0px 0px 40px 10px rgba(0,0,0,0.02);
     padding: 30px 40px;
     border-radius: 20px;
     margin: 20px 0 30px;
}
.certified-associate-headings{
     display: grid;
     grid-template-columns: 45% 12% 12% 12% 12%;
     column-gap: 20px;
     justify-items: center;
     align-content: center;
     border-bottom: 1px solid rgba(0,0,0,.07);
     padding: 20px 20px 20px 0;
}
.certified-associate-headings h6{

     font-size: 18px;
     font-weight: 600;
     margin: 0px;
     display: flex;
     justify-content: center;
     align-items: center;
}
.certified-associate-headings .flex{
     display: flex;
     justify-content: center;
     align-items: center;
}
.certified-associate-row{
     display: grid;
     grid-template-columns: 45% 12% 12% 12% 12%;
     column-gap: 20px;
     /* justify-items: center; */
     padding: 20px 20px 20px 40px;
     border-bottom: 1px solid rgba(0,0,0,.07);
}
.certified-associate-row span{
     display: flex;
     justify-content: center;
     align-items: center;
     margin-left: -20px;
     font-size: 16px;
     font-weight: 400;
}
.certified-associate-row h4{
     font-size: 16px;
     font-weight: 400;
}
.certified-associate-row button{
     padding: 10px;
     width: 100%;
     border: none;
     outline: none;
     border-radius: 50px;
     background-color: #2181FF;
     color: var(--white);
     cursor: pointer;
     font-size: 15px;
}

.certified-associate-row.two,
.certified-associate-row.five,
.certified-associate-row.six,
.certified-associate-row.nine,
.certified-associate-row.ten,
.certified-associate-row.eleven,
.certified-associate-row.twelve{
     border-bottom: none;
}

.certified-associate-row.one span,
.certified-associate-row.one h4,
.certified-associate-row.four span,
.certified-associate-row.four h4,
.certified-associate-row.eight span,
.certified-associate-row.eight h4{
     font-weight: 600;
}

.see-all-schedule.grade-link{
     margin: 20px 10px 10px;
}


.certified-associate-mobile{
     display: none;
}



/* Feedbak Popup */

.introduction-quiz.grade{
     padding-bottom: 20px;
     border-bottom: 1px solid rgba(0,0,0,.07);
}

.introduction-quiz.grade h4{
     font-size: 15px;
     font-weight: 600;
     color: #47525D;
}

.introduction-quiz.d-m{
     margin-bottom: 40px;
}

.introduction-quiz.d-m h4{
     font-size: 14px;
     font-weight: 600;
}

/* Feedbak Popup End */

/* Certifeid Associate End */

/* Grade Page End*/

/* Announcement Page */

.announcement.page{
     background-color: #F9FBFD;
     /* padding: 20px 0; */
     padding-bottom: 20px;
}

.announcement.page .announcement{
     border-bottom: none;
}

.announcement-wrapper{
     margin: 0 40px;
}

.announcement-wrapper .announcement-row{
     background-color: var(--white);
     box-shadow: 0px 0px 40px 10px rgba(0,0,0,0.02);
     margin: 0 0 20px 0;
     padding: 30px 20px;
     border-radius: 10px;
}

.announcement.page .upper-section{
     margin: 10px 40px 40px 40px;
}

.see-all-schedule.announcement{
     justify-content: flex-start;
     margin-left: 1px;
     margin-top: 10px;
}
.announcement-row.five .month-and-date{
     background-color: #D7F8F7;
}
.announcement-row.five .month-and-date span,
.announcement-row.five .month-and-date h5{
     color: #00C8C2;
}

/* Announcement Page End */

/* Class - Discussion Board  */

.discussion-board{
     background-color: #F9FBFD;
}

.class-upper-heading{
     margin: 0 40px;
}
.class-upper-heading h4{
     font-size: 18px;
     font-weight: 500;
     color: #738499;
     padding: 40px 30px;
}
.class-upper-heading h4 > strong{
     color: var(--dark-black);
}
.video.class-discussion{
     margin: 0 40px;
}
.video.class-discussion video{
     width: 100%;
     border-radius: 10px;
}
.class-lower-section{
     margin: 20px 40px;
     display: grid;
     grid-template-columns: 65% 30%;
     justify-content: space-between;
}
.discussion-left-side{
     margin-bottom: 50px;
}
.discussion-query-input{
     display: flex;
     justify-content: center;
     align-items: center;
}
.start-discussion-heading h3{
     font-size: 18px;
     font-weight: 600;
     padding: 20px 0;
}
.discussion-query-input{
     padding-bottom: 20px;
     border-bottom: 1px solid rgba(0,0,0,.07);
}
input.query-input{
     width: 100%;
     padding: 18px 15px;
     border: none;
     border-radius: 10px;
     outline: none;
     box-shadow: 0px 0px 40px 10px rgba(0,0,0,0.02);
}
input.query-input::placeholder{
     font-size: 14px;
     font-weight: 500;
     color: #919CAB;
}

.search-keywords-row{
     display: flex;
     align-items: baseline;
}
.search-keywords-row .text-input{
     position: relative;
     box-shadow: 0px 0px 40px 10px rgba(0,0,0,0.02);
}
.text-input .search-icon{
     width: 16px;
     height: 16px;
     position: absolute;
     top: 50%;
     transform: translate(100%, -50%);
     cursor: pointer;
}
.text-input input{
     padding: 10px 10px 10px 40px;
     border-radius: 50px;
}
.text-input input::placeholder{
     font-size: 14px;
     font-weight: 500;
     color: #919CAB;
}

.discussion-checkbox input[type=checkbox]{
     transform: scale(2);
     border-radius: 10px;
     -ms-transform: scale(2); /* IE */
     -moz-transform: scale(2); /* FF */
     -webkit-transform: scale(2); /* Safari and Chrome */
     -o-transform: scale(2); /* Opera */
     padding: 10px;
     margin-right: 10px;
}
.discussion-checkbox label:first-child{
     margin-left: 30px;
}
.discussion-checkbox label{
     margin-left: 45px;
     font-size: 14px;
     font-weight: 500;
     color: #919CAB;
}

.discussion-card{
     padding: 40px;
     margin: 50px 0 0 0;
     background-color: var(--white);
     box-shadow: 0px 0px 40px 10px rgba(0,0,0,0.02);
     border-radius: 10px;
     position: relative;
     margin-left: 30px;
}

.discussion-card .upper-flex{
     display: flex;
     justify-content: space-between;
     align-items: center;
}
.upper-flex .left-heading{
     padding-left: 15px;
}
.upper-flex .left-heading .profile-picture{
     width: 70px;
     height: 70px;
     position: absolute;
     left: -35px;
}
.discussion-card .heading-title a{
     text-decoration: none;
     color: var(--dark-black);
     font-size: 16px;
     font-weight: 600;
}

.discussion-card .meta-data{
     margin: 5px 0;
}
.discussion-card .meta-data span{
     font-size: 14px;
     font-weight: 400;
     color: #919CAB;
     margin: 0 5px;
}
.discussion-card .meta-data span:first-child{
     margin: 0px;
}

.discussion-card .right-icons img{
     width: 25px;
     height: 25px;
     margin-right: 25px;
     cursor: pointer;
}
.discussion-card .upper-data p{
     font-size: 16px;
     font-weight: 400;
     margin: 30px 0;
}
.discussion-card .upper-data{
     border-bottom: 1px solid rgba(0,0,0,.1);
}

.lower-data .sub-data{
     display: flex;
     align-items: flex-start;
}
.sub-data .sub-profile-picture img{
     width: 45px;
     height: 45px;
     margin-top: 20px;
}
.sub-data .sub-right-text{
     margin: 10px 0 10px 30px;
}
.meta-data.sub{
     margin-bottom: 10px;
}
.sub-right-text p{
     font-size: 16px;
     font-weight: 400;
     margin: 20px 0;
}
.sub-right-text a{
     text-decoration: none;
     font-size: 15px;
     font-weight: 500;
     color: #0062FF;
     display: flex;
     justify-content: flex-end;
     margin: 10px 0 0 0;
}

.class-overview-heading h3,
.reading-material-heading h3{
     font-size: 18px;
     font-weight: 600;
     padding: 20px 0;
}

.class-overview-card,
.reading-materail-card{
     background-color: var(--white);
     padding: 20px;
     border-radius: 10px;
     box-shadow: 0px 0px 40px 10px rgba(0,0,0,0.02);
     margin-bottom: 30px;
}
.class-overview-row{
     padding: 10px 20px;
}
.class-overview-row h4{
     font-size: 16px;
     font-weight: 500;
     margin-bottom: 5px;
}
.class-overview-row span{
     font-size: 14px;
     font-weight: 400;
     color: #919CAB;     
}

.reading-material-row{
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 20px;
}
.reading-material-row.active{
     background-color: #E6EEF9;
     border-radius: 10px;
}
.reading-material-row.active .right-side img{
     background-color: #2181FF;
}
.reading-material-row .left-side{
     display: flex;
     align-items: center;
}
.reading-material-row .left-side img{
     width: 35px;
     height: 35px;
}
.reading-material-row .left-side a{
     text-decoration: none;
     color: var(--dark-black);
     font-size: 15px;
     font-weight: 500;
     margin-left: 15px;
     margin-right: 15px;
}

.reading-material-row .right-side img{
     width: 14px;
     height: 14px;
     padding: 6px;
     border-radius: 9px;
     background-color: #c4d1e4;
}

.download-all{
     margin:20px;
}

.download-all a{
     text-decoration: none;
}
.download-all a > button{
     font-size: 16px;
     border: none;
     color: var(--white);
     background-color: #2181FF;
     border-radius: 20px;
     padding: 10px;
     width: 100%;
     cursor: pointer;
}

.tags-for-mob{
     display: none;
}

/* Reply Popup One */

.reply-popup{
     position: absolute;
     top: -64%;
     right: 7.5%;
     z-index: 10;
     background-color: #F9FBFD;
     padding: 30px;
     border-radius: 10px;
     box-shadow: 0px 0px 40px 10px rgba(0,0,0,0.08);
     border: 2px solid #E0EBFD;
     width: 78%;
     display: none;
}
.reply-popup::before{
     content: "";
     width: 30px;
     height: 30px;
     background-color: #F9FBFA;
     position: absolute;
     bottom: -6%;
     right: 8%;
     transform: rotate(45deg);
     border-bottom: 2px solid #E0EBFD;
     border-right: 2px solid #E0EBFD;
}

.reply-popup h4{
     font-size: 16px;
     font-weight: 500;
     margin-bottom: 20px;
}
.reply-popup textarea{
     border: none;
     outline: none;
     border-radius: 20px;
     padding: 20px;
     box-shadow: 0px 0px 40px 10px rgba(0,0,0,0.03);
     resize: none;
     width: 93%;
}
.reply-popup textarea::placeholder{
     font-size: 14px;
     color: #919CAB;
     font-weight: 500;
     font-style: italic;
}
.reply-popup .lower-buttons{
     display: flex;
     justify-content: flex-end;
     align-items: center;
     margin: 30px 0 0;
}
.reply-popup .lower-buttons button{
     padding: 4px 30px;
     margin-left: 20px;
     border-radius: 20px;
     border: none;
     background: none;
     font-size: 15px;
     cursor: pointer;
}

.reply-popup .lower-buttons button.primary-btn{
     background-color: #2181FF;
     color: var(--white);
     border:1px solid #2181FF;
}


.reply-popup .lower-buttons button.secondary-btn{
     color: #2181FF;
     border: 1px solid #2181FF;
}

.reply-popup.active{
     display: block;
}

/* Reply Popup One End */

/* Reply Popup Two */


.reply-popup.two{
     top: 21%;
     right: 7.5%;
     display: none;
}
.reply-popup.two::before{
     top: -6%;
     border-top: 2px solid #E0EBFD;
     border-left: 2px solid #E0EBFD;
     border-bottom: none;
     border-right: none;
}
.reply-popup.two.active{
     display: block;
}

/* Reply Popup Two End */

/* Three Dots More Popup */

.more-popup{
     position: absolute;
     right: 7%;
     top: 24%;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     padding: 7px 15px;
     z-index: 10;
     background-color: #F9FBFD;
     box-shadow: 0px 0px 40px 10px rgba(0,0,0,0.08);
     border: 2px solid #E0EBFD;
     display: none;
}
.more-popup a{
     text-decoration: none;
     font-size: 15px;
     font-weight: 600;
     color: #0062FF;
     padding: 5px 20px;
}

.more-popup a:first-child{
     border-bottom: 1px solid rgba(0,0,0,.08);
}

.more-popup::before{
     content: "";
     width: 20px;
     height: 20px;
     background-color: #F9FBFA;
     position: absolute;
     top: -15%;
     right: 8%;
     transform: rotate(45deg);
     border-top: 2px solid #E0EBFD;
     border-left: 2px solid #E0EBFD;
}
.more-popup.two{
     top: 19%;
}

.more-popup.active{
     display: flex;
}
.more-popup.two.active{
     display: flex;
}


/* Three Dots More Popup End */


/* Class - Discussion Board End */


/* Inbox */

.inbox-wrapper{
     margin: 0 40px;
     display: grid;
     grid-template-columns: 27% 46% 27%;
     /* height: 100vh; */
     /* margin-bottom: 30px; */
}

.inbox-wrapper .left-col{
     /* background-color: chocolate; */
     border: 1px solid rgba(0,0,0,.1);
}

.inbox-wrapper .middle-col{
     /* background-color: purple; */
     border: 1px solid rgba(0,0,0,.1);
}

.inbox-wrapper .right-col{
     /* background-color: grey; */
     margin: 0px;
}

/* Left Col */

.inbox-heading{
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 25px;
     background: var(--white);
}
.inbox-heading h4{
     font-size: 18px;
     font-weight: 600;
}
.inbox-heading button{
     background: none;
     outline: none;
     border: none;
     cursor: pointer;
}
.inbox-heading img{
     width: 21px;
     height: 21px;
}

.left-col .text-input{
     position: relative;
     margin: 0 15px 20px;
     background-color: var(--white);
}
.left-col .text-input img{
     position: absolute;
}
.left-col .text-input input{
     background-color: #F3F7FC;
     box-shadow: none;
}
.left-col .text-input input::placeholder{
     font-size: 14px;
     font-weight: 600;
     color: #7893B5;
}
.inbox-chats{
     height: 800px;
     overflow-y: auto;
}

/* ScrollBar */

.inbox-chats:hover::-webkit-scrollbar{
     width: 7px;
}
.inbox-chats::-webkit-scrollbar {
     width: 2px;
}
.inbox-chats::-webkit-scrollbar-track {
     background: #f1f1f1; 
}   
.inbox-chats::-webkit-scrollbar-thumb {
     background: #888; 
}
.inbox-chats::-webkit-scrollbar-thumb:hover {
     background: #555; 
}

/* ScrollBar End */

.inbox-chats .chat{
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     background-color: var(--white);
     padding: 15px 23px;
     border-top: 1px solid rgba(0,0,0,.07);
     transition: all .3s ease-in-out;
     cursor: pointer;
}
.inbox-chats .chat:last-child{
     border-bottom: 1px solid rgba(0,0,0,.07);
}
.inbox-chats .chat.active{
     background-color: #DDECFF;
}
.inbox-chats .chat:hover{
     background-color: #DDECFF;
}
.chat .chat-profile img{
     width: 50px;
     height: 50px;
     border-radius: 50%;
     background-color: #AAA;
}
.chat .flex{
     display: flex;
     align-items: flex-start;
}
.chat-name{
     margin-left: 15px;
}
.chat-name h3{
     font-size: 16px;
     font-weight: 600;
     cursor: pointer;
}
.chat-name span,
.chat .right-side span{
     font-size: 14px;
     font-weight: 500;
     color: #919CAB;
}

/* Left Col End */

/* Middle Col */

.chat-title{
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 30px;
     border-bottom: 1px solid rgba(0,0,0,.07);
     background-color: var(--white);
}
.chat-title .left-side{
     display: flex;
}
.chat-title .chat-name h3{
     font-size: 18px;
     font-weight: 600;
}
.chat-title .right-side img{
     width: 22px;
     height: 5.5px;
}
.chat-title .right-side button{
     transform: rotate(90deg);
     background: none;
     border: none;
     outline: none;
     cursor: pointer;
}

.inner-chat{
     background-color: #F9FBFD;
     padding: 10px 0;
     border-bottom: 1px solid rgba(0,0,0,.07);
     border-top: 1px solid rgba(0,0,0,.07);
     height: 700px;
     overflow-y: hidden;
     
}

.inner-chat:hover{
     overflow-y: auto;
}


/* ScrollBar */

.inner-chat::-webkit-scrollbar {
     width: 7px;
}
.inner-chat::-webkit-scrollbar-track {
     background: #f1f1f1; 
}   
.inner-chat::-webkit-scrollbar-thumb {
     background: #888; 
}  
.inner-chat::-webkit-scrollbar-thumb:hover {
     background: #555; 
}

/* ScrollBar End */

.inner-chat .my-msg{
     display: flex;
     justify-content: flex-end;
     align-items: center;
     margin: 10px 0;
     width: 100%;
}
.inner-chat .my-msg span{
     font-size: 16px;
     background-color: var(--white);
     box-shadow: 0px 0px 40px 10px rgba(0,0,0,0.04);
     padding: 8px 15px;
     border-radius: 10px 10px 0;
     margin-right: 10px;
}
.others-msg{
     display: flex;
     /* align-items: center; */
     justify-content: flex-start;
     /* margin: 10px 0; */
     width: 100%;
}

.others-msg img{
     margin: 23px 15px 0 15px;
     width: 40px;
     height: 40px;
     border-radius: 50%;
     background-color: #AAA;
}
.others-msg .msg h6{
     font-size: 12;
     font-weight: 500;
     color: #BBBBBB;
     margin-bottom: 10px;
}
.others-msg .msg span{
     font-size: 16px;
     background-color: #DDECFF;
     box-shadow: 0px 0px 40px 10px rgba(0,0,0,0.04);
     padding: 8px 15px;
     border-radius: 10px 10px 10px 0;
}
.others-msg .msg.flex{
     display: flex;
     flex-direction: column;

}
.others-msg .msg.flex span{
     margin-bottom: 10px;
}
.others-msg .msg.flex span.flex{
     display: flex;
     align-self: flex-start;
}
.others-msg.many img{
     margin: 75px 15px 0 15px;
}
.my-msg.photo button{
     font-size: 14px;
     color: #919CAB;
     display: flex;
     padding: 10px 10px 0 0px;
     margin-right: 10px;
     background: var(--white);
     border-radius: 20px 20px 0 0;
     border: none;
     outline: none;
     box-shadow: 0px 0px 40px 10px rgba(0,0,0,0.04);
}
.my-msg.photo button > img{
     width: 40px;
     height: 30px;
}
.my-msg.photo{
     display: flex!important;
     flex-direction: column;
     align-items: flex-end;
}
.my-msg.photo img.chat-image{
     width: 247px;
     margin-top: -5px;
}

.send-msg {
     display: flex;
     align-items: center;
     padding: 20px;
     background-color: var(--white);
}
.send-msg button{
     border: none;
     background: none;
     outline: none;
}
.send-msg img{
     width: 30px;
     height: 30px;
     padding: 10px;
     cursor: pointer;
}
.send-msg input{
     width: 100%;
     margin: 0 20px;
     padding:10px 10px 10px 20px;
     border: none;
     outline: none;
     background: #F2F6F9;
     border-radius: 20px;
}
.send-msg input::placeholder{
     font-size: 14px;
     color: #919CAB;
}

/* Middle Col End */

/* Right Col */


.inbox-wrapper .right-col{
     background-color: #F9FBFD;
     border: 1px solid rgba(0,0,0,.07);
}

.right-col .members-upper-flex{
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 30px 20px 20px;
}
.members-heading h4{
     font-size: 18px;
     font-weight: 600;     
}

.add-members button{
     display: flex;
     align-items: center;
     border: none;
     outline: none;
     background: none;
}
.add-members button h5{
     font-size: 15px;
     font-size: 700;
     color: #2181FF;
     margin-right: 10px;
}
.add-members button img{
     width: 10px;
     height: 10px;
     padding: 5px;
     border: 3px solid #2181FF;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
}

.members .member a{
     display: flex;
     align-items: center;
     margin: 10px 20px 20px;
     background-color: var(--white);
     padding: 15px 20px;
     border-radius: 10px;
     box-shadow: 0px 0px 40px 10px rgba(0,0,0,0.03);
     text-decoration: none;
     
}

.member img{
     width: 34px;
     height: 34px;
}
.member .member-img{
     position: relative;
}
.member .member-img::before{
     content: "";
     position: absolute;
     width: 12px;
     height: 12px;
     border-radius: 50%;
     background-color: #00C8C2;
     bottom: 5px;
     right: -4px;
}
.members .member a h4{
     font-size: 16px;
     font-weight: 500;
     color: black;
     margin-left: 10px;
}

.see-all-members{
     display: flex;
     align-items: center;
     justify-content: flex-end;
     padding: 10px 20px;
}
.see-all-members button{
     border: none;
     background: none;
     outline: none;
     cursor: pointer;
}
.see-all-members button h4{
     font-size: 15px;
     font-weight: 600;
     color: #0062FF;
}

.shared-file-heading,
.shared-media-heading{
     padding: 20px;
}
.shared-file-heading h4,
.shared-media-heading h4{
     font-size: 18px;
     font-weight: 600;
}

.shared-file{
     display: flex;
     align-items: center;
     margin: 20px;
     padding: 20px;
     background-color: var(--white);
     border-radius: 10px;
     box-shadow: 0px 0px 40px 10px rgba(0,0,0,0.03);
}
.shared-file img{
     width: 34px;
     height: 34px;
}
.shared-file a{
     text-decoration: none;
     color: var(--dark-black);
     font-size: 16px;
     font-weight: 500;
     margin-left: 10px;
}
.shared-media{
     margin-top: 30px;
}
.shared-media-gallery{
     padding: 10px;
     background-color: var(--white);
     border-radius: 10px;
     margin: 0 20px 0px;
}
.shared-media-gallery img{
     border-radius: 10px;
     background-color: #AAA;
}
.shared-media-gallery .upper-images{
     display: flex;
     align-items: center;
     column-gap: 10px;
     cursor: pointer;
}
.shared-media-gallery .lower-images{
     display: flex;
     align-items: center;
     cursor: pointer;
}
.shared-media-gallery .lower-images img{
     width: 100px;
}
 
/* Right col End */

/* Inbox End */

.financial-info{
     background-color: #F9FBFD;
     padding-bottom: 30px;
}

.financial-overview{
     margin: 0 40px;
     margin-bottom: 40px;
}

.financial-overview-heading h4{
     font-size: 18px;
     font-weight: 600;
     padding: 20px 0;
}
.financial-overview-grid{
     display: grid;
     grid-template-columns: 35% 28% 28%;
     column-gap: 50px;
}
.financial-overview-grid .left-card,
.financial-overview-grid .middle-card,
.financial-overview-grid .right-card{
     background-color: var(--white);
     padding: 30px;
     border-radius: 20px;
     box-shadow: 0px 0px 40px 10px rgba(0,0,0,0.03);
}

.left-card h6{
     font-size: 18px;
     font-weight: 500;
     margin-bottom: 30px;
}
.left-card .price{
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-right: 30px;
     margin-bottom: 20px;
}
.left-card .price h3{
     font-size: 28px;
     font-weight: 500;
}
.left-card .price h5{
     font-size: 18px;
     font-weight: 400;
}
.finance-progress-bar{
     margin-right: 30px;
     margin-bottom: 50px;
}
.lower-bar{
     width: 100%;
     height: 15px;
     background-color: #E5EBF2;
     border-radius: 20px;
     border: none;
     position: relative;
     overflow: none;
}
.upper-bar{
     position: absolute;
     left: 0;
     width: 50%;
     height: 15px;
     border-radius: 20px;
     background-color: #EB2E75;
     animation: upperBar 2s;
}

@keyframes upperBar{
     0%{
          width: 0%;          
     }
     100%{
          width: 50%;
     }
}

.left-card a.pay-now button{
     font-size: 15px;
     font-weight: 400;
     border: none;
     outline: none;
     color: var(--white);
     background-color: #2181FF;
     border-radius: 20px;
     padding: 4px 30px;
     margin-bottom: 10px;
     cursor: pointer;
}

.financial-overview-grid .middle-card h5{
     font-size: 18px;
     font-weight: 500;
     margin-bottom: 30px;
}
.financial-overview-grid .middle-card h3{
     font-size: 28px;
     font-weight: 500;
     margin-bottom: 20px;
}
.financial-overview-grid .middle-card span{
     font-size: 14px;
     font-weight: 500;
     color: #919CAB;
}
.manage-btn{
     margin-top: 39px;
}
.manage-btn a button{
     font-size: 15px;
     font-weight: 400;
     border: none;
     outline: none;
     color: var(--white);
     background-color: #2181FF;
     border-radius: 20px;
     padding: 4px 30px;
     margin-bottom: 10px;
     cursor: pointer;
}

.right-card h5{
     font-size: 18px;
     font-weight: 500;
     margin-bottom: 40px;
}
.right-card .ammount{
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 35px;
}
.right-card .ammount h4{
     font-size: 16px;
     font-weight: 500;
}
.right-card .ammount span{
     font-size: 14px;
     font-weight: 400;
}




/* Payment History */

.payment-history{
     margin: 0 40px;
}

.payment-history-heading h4{
     font-size: 18px;
     font-weight: 600;
     padding: 20px 0;
}

.payment-history-card{
     background-color: var(--white);
     padding: 30px;
     border-radius: 20px;
     box-shadow: 0px 0px 40px 10px rgba(0,0,0,0.03);
     margin-bottom: 30px;
}

.phc-titles{
     display: grid;
     grid-template-columns: 25% 25% 25% 25%;
     
     padding: 20px;
     margin-bottom: 20px;
     border-bottom: 1px solid rgba(0,0,0,.09);
}
.phc-titles h4{
     font-size: 18px;
     font-weight: 600;
     display: flex;
     justify-content: center;
}

.phc-data{
     display: grid;
     grid-template-columns: 25% 25% 25% 25%;
     padding: 22px;
}

.phc-data .data{
     display: flex;
     justify-content: center;
}

.phc-data .data.one span{
     font-size: 16px;
     font-weight: 500;
     margin-left: -90px;
     margin-right: 50px;
}

.phc-data .data h5{
     font-size: 16px;
     font-weight: 400;
}

.payment-history-card-mob{
     display: none;
}

/* Payment History End */


/* Notification Page */

.notifications{
     background-color: #F9FBFD;

}

.notification-page{
     margin: 0 40px;
}
.notification-page .upper-section{
     margin-top: 10px;
}

.notification-wrapper{
     padding: 20px 0;
}

.notification-wrapper .notification{
     display: flex;
     align-items: center;
     justify-content: space-between;
     background-color: var(--white);
     padding: 25px 30px;
     border-radius: 20px;
     box-shadow: 0px 0px 40px 10px rgba(0,0,0,0.03);
     margin: 30px 0;
     position: relative;
}

.notification .left-side{
     display: flex;
     align-items: center;
}
.notification .left-side img{
     width: 39px;
     height: 39px;
     border-radius: 50%;
     background-color: #AAA;
}

.notification .left-side h5{
     font-size: 16px;
     font-weight: 400;
     margin-left: 30px;
     margin-right: 20px;
}

.notification .right-side a img{
     width: 25px;
     height: 25px;
     background-color: #C3D0DF;
     border-radius: 5px;
}

.notification.active{
     margin-left: 40px;
}

.notification.active::before{
     content: "";
     width: 10px;
     height: 10px;
     background-color: #EB2E75;
     border-radius: 50%;
     position: absolute;
     left: -35px;
}

/* Notification Page End */



/* Settings */

.settings-page{
     background-color: #F9FBFD;
     scroll-behavior: smooth;
}

.settings-wrapper{
     display: grid;
     grid-template-columns: 24% 70.5%;
     column-gap: 60px;
     /* height: 100vh; */
     margin: 0 40px;
     padding: 40px 0;
}

.left-side .profile-main-pic,
.settings-wrapper-mob .profile-main-pic,
.settings-profile-pic .profile-main-pic{
     width: 147px;
     height: 147px;
     position: relative;
     top: 0;
     left: 0;
     border-radius: 50%;
     overflow: hidden;
     margin-top: 20px;
}
.left-side .profile-main-pic #photo,
.settings-wrapper-mob .profile-main-pic #photo,
.settings-profile-pic .profile-main-pic #photo{
     width: 100%;
     height: 100%;
}
.left-side .profile-main-pic #file,
.settings-wrapper-mob .profile-main-pic #file,
.settings-profile-pic .profile-main-pic #file{
     display: none;
}
.left-side .profile-main-pic #uploadBtn,
.settings-wrapper-mob .profile-main-pic #uploadBtn,
.settings-profile-pic .profile-main-pic #uploadBtn{
     height: 40px;
     width: 100%;
     position: absolute;
     bottom: 0;
     left: 50%;
     top: 80%;
     transform: translateX(-50%);
     text-align: center;
     background: rgba(159, 159, 159, .6);
     color: white;
     font-size: 14px;
     font-family: 600;
     line-height: 25px;
     cursor: pointer;
}

.settings-profile-pic{
     display: flex;
     justify-content: center;
     align-items: center;
}

.settings-detail{
     background-color: var(--white);
     padding: 20px;
     border-radius: 20px;
     box-shadow: 0px 0px 40px 10px rgba(0,0,0,0.03);
     margin: 50px 0px 0;
}

.settings-detail ul li{
     list-style-type: none;
     padding: 8px 20px;
     margin: 10px 0;
     border-radius: 10px;
     transition: all .3s ease-in-out;
}
.settings-detail ul li.active,
.settings-detail ul li:hover{
     background-color: #FFEFF5;
}
.settings-detail ul li > a{
     text-decoration: none;
     font-size: 15px;
     font-weight: 500;
     color: var(--dark-black);
}
.settings-detail ul li > a.active{
     color: #EB2E75;
}

.settings-detail ul li > a.profile-setting-link.active{
     color: #EB2E75;
}







.setting-profile-card,
.contact-details-card,
.resume-card,
.account-setting-card,
.privacy-setting-card{
     background-color: var(--white);
     padding: 30px 40px;
     border-radius: 10px;
     box-shadow: 0px 0px 40px 10px rgba(0,0,0,0.03);
     margin: 20px 0 60px;
}

.setting-profile-card .upper-row{
     display: flex;
     justify-content: space-between;
     align-items: center;
}
.setting-profile-card .heading h4,
.contact-details-card .heading h4,
.resume-card .heading h4,
.account-setting-card .heading h4,
.privacy-setting-card .heading h4{
     font-size: 18px;
     font-weight: 600;
}
.see-all-schedule.profile{
     margin: 0px;
}
.setting-profile-card .lower-row{
     margin: 30px 0px 10px;
}

.lower-row form label{
     display: flex;
     flex-direction: column;

     font-size: 14px;
     font-weight: 500;
     color: #47525D;
}
.lower-row .upper-inputs{
     display: grid;
     grid-template-columns: 1fr 1fr;
     column-gap: 50px;
}
.lower-row form input{
     border: none;
     outline: none;
     padding: 15px;
     border-radius: 5px;
     background-color: #F7F7F7;
     margin-top: 10px;
     margin-bottom: 45px;
}
.lower-row form input::placeholder{
     font-size: 14px;
     color: var(--dark-black);
     font-weight: 500;
}
.lower-row form input.last-child{
     margin-bottom: 15px;
}




.contact-details-card p.para,
.resume-card p.para{
     font-size: 14px;
     font-weight: 400;
     color: #818B95;
     margin: 30px 0 40px;
}

.resume-card .lower-row h5{
     font-size: 16px;
     font-weight: 600;
     margin-bottom: 20px;
}

.upload-resume{
     display: flex;
     align-items: center;
     margin-bottom: 30px;
}
.upload-resume input{
     border: none;
     outline: none;
     padding: 15px;
     border-radius: 5px;
     background-color: #F7F7F7;
     
}
.upload-resume button{
     padding: 7px 40px;
     margin-left: 15px;
     border-radius: 20px;
     cursor: pointer;
}
.upload-resume-buttons{
     display: flex;
     align-items: center;
}
.upload-resume button.upload-resume-btn{
     border: none;
     background: none;
     background-color: #2181FF;
     color: white;
}
.upload-resume button.view-btn{
     border: 1px solid #2181FF;
     background: none;
     margin-top: 0px;
}


.account-setting-card .heading h4{
     margin-bottom: 50px;
}





.privacy-setting h5,
.notification-setting h5{
     font-size: 16px;
     font-weight: 500;
     margin-top: 40px;
     margin-bottom: 10px;
}

.privacy-setting,
.notification-setting{
     display: flex;
     flex-direction: column;
}

.privacy-setting input,
.notification-setting input{
     margin: 15px 20px 15px 0;
     width: 20px;
     height: 20px;

}
.privacy-setting label,
.notification-setting label{
     display: flex;
     align-items: center;

     font-size: 14px;
     font-weight: 400;
     margin: 10px 0;
}

.settings-wrapper-mob{
     display: none;
}

/* Settings End */



/* Profile */

.profile-page{
     background-color: #F9FBFD;
     border-bottom: 1px solid rgba(0,0,0,.07);
     padding: 20px 0 0 0;
}

.upper-profile-wrapper{
     margin: 0 40px;
     display: grid;
     grid-template-columns: 20% 78%;
     column-gap: 30px;
}

.left-profile-side{
     /* background-color: chocolate; */
     padding: 35px 0 55px;
}

.right-profile-side{
     padding: 70px 0 0;
     /* background-color: purple; */
}

.settings-profile-pic .profile-main-pic{
     width: 168px;
     height: 170px;
     display: flex;
     align-items: center;
}



.right-profile-side .upper-row{
     display: flex;
     justify-content: space-between;
}
.upper-row .profile-name h4{
     font-size: 25px;
     font-weight: 500;
     padding: 0 0 20px 0;
}
.upper-row .social-icons-links{
     margin-top: 10px;
}
.upper-row .social-icons-links img{
     width: 30px;
     height: 30px;
     margin: 0 5px;
}


.right-profile-side .lower-row{
     display: flex;
     align-items: center;
     justify-content: space-between;
}
.lower-row .location img{
     width: 11px;
     height: 11px;
}
.lower-row .job img{
     width: 12px;
     height: 12px;
}
.lower-row .location,
.lower-row .job{
     display: flex;
     align-items: center;
}
.lower-row .location h5,
.lower-row .job h5{
     font-size: 14px;
     color: #899097;
     margin-left: 20px;
}

.lower-row .right-side-data .primary-btn a{
     text-decoration: none;
}

.lower-row .right-side-data .primary-btn button{
     padding: 10px 70px;
     background-color: #2181FF;
     font-size: 15px;
     color: var(--white);
     border: none;
     outline: none;
     border-radius: 20px;
     margin-top: 20px;
     cursor: pointer;
}

.tab-content-section{
     margin: 0 40px;
}

.tab-content-grid{
     display: grid;
     grid-template-columns: 22% 56% 22%;
     column-gap: 20px;
}

.tabs-section .tab{
     margin-top: 60px;
     margin-left: -40px;
}   

.tabs-section section.profile-main-links{
     border: none;
     margin: 0px;
}
.tabs-section section.profile-main-links .profile-links-wrapper .tab > * + *{
     margin-left: 50px;
}

.tabs-section section.profile-main-links .profile-links-wrapper button{
     padding: 8px 0;
}

 
.settings-profile-pic .profile-main-pic #photo{
     object-fit: cover;
}

.middle-tab-content{
     margin: 0 10px;
}

/* About */

.middle-tab-content h3{
     font-size: 16px;
     font-weight: 600;
     margin: 40px 0 30px;
}
.middle-tab-content p{
     font-size: 15px;
     line-height: 1.7;
     margin-bottom: 30px;
}

/* About End */

/* Career */

.work-experiance h3{
     font-size: 16px;
     font-weight: 600;
}

.work-experiance .card{
     background-color: #FFFFFF;
     padding: 20px;
     border-radius: 10px;
     border: 1px solid #D8D8D8;
}
.card .facebook-heading{
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 20px;
}
.ux-design-heading{
     display: flex;
     align-items: center;
     justify-content: space-between;
}
.ux-design-manager p,
.ux-design-strategist p{
     padding-top: 5px;
     padding-bottom: 30px;
}

.card .facebook-heading h4,
.ux-design-heading h4{
     font-size: 14px;
     font-weight: 600;
}
.ux-design-heading h4{
     padding-left: 20px;
}
.card .facebook-heading span,
.ux-design-heading span{
     font-size: 13px;
     font-weight: 400;
     color: #7F7F7F;
}

.ux-design-detail p{
     font-size: 14px;
     padding-left: 20px;
}
.ux-design-manager .ux-design-detail p{
     border-left: 1px solid rgba(0,0,0,.07);
}
.ux-design-detail p > a{
     text-decoration: none;
     font-size: 13px;
     font-weight: 500;
     color: #2181FF;
     margin-left: 20px;
}
.ux-design-heading{
     position: relative;
}
.ux-design-heading h4::before{
     content: "";
     width: 8px;
     height: 9px;
     border-radius: 50%;
     background-color: #D8D8D8;
     position: absolute;
     left: -3px;
     top: 4px;
}


.work-experiance .lower-card,
.education .lower-card{
     background-color: #FFFFFF;
     padding: 20px;
     border-radius: 10px;
     border: 1px solid #D8D8D8;
     margin-top: 20px;
}
.work-experiance .lower-card h4,
.education .lower-card h4{
     font-size: 14px;
     font-weight: 600;
     margin-bottom: 5px;
}
.lower-card .span-flex{
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 5px;
}
.lower-card .span-flex span{
     font-size: 13px;
     font-weight: 400;
     color: #7F7F7F;
}
.work-experiance .lower-card p{
     font-size: 14px;
}


.education .lower-card p > a{
     text-decoration: none;
     font-size: 13px;
     font-weight: 500;
     color: #2181FF;
     margin-left: 20px;
}
.education:last-child{
     margin-bottom: 40px;
}

/* Career End */

/* Courses */

.courses-tab{
     margin: 40px 0;
}
.course-card .left-img img{
     width: 60px;
     height: 60px;
     background-color: #F3F7FC;
     padding: 15px;
     border-radius: 30px;
     margin: 0 30px 0 20px;
}
.course-card{
     display: flex;
     align-items: center;

     background-color: #FFFFFF;
     padding: 20px;
     border-radius: 10px;
     border: 1px solid #D8D8D8;
     margin-top: 20px;
}
.course-card .right-data{
     display: flex;
     flex-direction: column;
}
.course-card .right-data h4{
     font-size: 16px;
     font-weight: 500;
     margin-bottom: 10px;
}
.course-card .right-data span{
     font-size: 13px;
     color: #818B95;
     margin-bottom: 10px;
}
.course-card .right-data button{
     display: flex;
     align-self: flex-start;
     padding: 3.5px 30px;
     background: none;
     background-color: #7792B6;
     border: none;
     border-radius: 20px;
     color: var(--white);
     font-size: 12px;
}

.lower-bar.course{
     height: 7px;
}
.lower-bar.course .upper-bar{
     height: 7px;
     width: 50%;
     background-color: #2181FF;
     animation: courseUpperBar 2s;
}


@keyframes courseUpperBar{
     0%{
          width: 0%;          
     }
     100%{
          width: 50%;
     }
}

/* Courses End */

/* Portfolio */

.portfolio{
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 20px;

     margin-bottom: 30px;
}
.portfolio .portfolio-card{
     border: 3px solid rgba(0,0,0,.07);
     border-radius: 30px;
}

.portfolio .portfolio-card img{
     background-color: #AAA;
     border-radius: 30px 30px  0 0 ;
     object-fit: cover;
}
.portfolio-details{
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     padding: 20px;
     border-top: 1px solid rgba(0,0,0,.07);
}
.portfolio-details a{
     text-decoration: none;
     color: black;
     font-size: 16px;
     font-weight: 600;
}
.portfolio-details span{
     font-size: 13px;
     font-weight: 400;
     color: #818B95;
}


















/* Portfolio End */











/* Profile End */




/* Making Responsive */

@media (max-width:1234px){

     /* Class - Discussion Board */

     .discussion-checkbox label{
          margin-left: 10px;
     }
     .discussion-checkbox input[type=checkbox]{
          margin-right: 5px;
     }
     .discussion-checkbox{
          margin-left: -20px;
     }

     /* Class - Discussion Board End */

}

@media (max-width:1024px){

     /* Grade Page */
     
     .grade{
          margin-top: 80px;
     }

     /* Grade Page End */

     /* Task Page */

     .feedback-popup{
          top: -100px;
     }     

     .upload-popup{
          padding: 30px;
     }
     .upload-popup .upload-file{
          margin: 30px 0;
          padding: 20px 0;
     }

     /* Task Page End*/

     /* Inbox */

          
     .inbox-wrapper{
          grid-template-columns: 30% 40% 30%;
         
     }

     /* Inbox End */

     
     
}


@media (max-width:1023px){

     .db-vector img{
          display: none;
     }

     /* task link */

     .data-row .last-child{
          margin-right: -50%;
     }
     .data-row.two .view-btn, 
     .data-row.three .view-btn{
          margin-left: 80%;
     }
     .data-row .second-last{
          margin-left: -35%;
     }
     .data-row .status{
          margin-left: -45%;
     }

     /* task link End*/

     /* Grade Overview */

     .grade-overview{
          column-gap: 20px;
          grid-template-columns: 20% 58% 18%;
     }

     /* Grade Overview End */

     /* Settings */

          
     .settings-wrapper{
          grid-template-columns: 30% 64.5%;
          column-gap: 60px;
     }

     .upload-resume{
          flex-direction: column;
          align-items: flex-start;
     }
     .upload-resume-buttons{
          margin-top: 20px;
     }
     .upload-resume button{
          margin-left: 0px;
          padding: 7px 50px;
     }
     .upload-resume button.view-btn{
          margin-left: 30px;
     }









     /* Settings End */


}
@media (max-width:968px){

     .db-wrapper button.parent-btn{
          display: flex;
          align-items: center;
          justify-content: space-between;
     }
     .db-wrapper button.parent-btn img{
          display: block;
          margin-left: 20px;
     }
     .upcoming-lessons,
     .announcement,
     .tasks,
     .grade,
     .mentoring-session{
          border-bottom: 1px solid rgba(0,0,0,0.10);
     }
     .upcoming-lessons-card.active{
          display: none;
     }
     .upcoming-lessons-card{
          animation: fadeEffect 1.2s;
     }

     @keyframes fadeEffect {
          from{
               opacity: 0;
          }
          to{
               opacity: 1;
          }
     }

     .announcement button.parent-btn h3 {
          margin: 30px 0;
     }
     .announcement-card{
          display: none;
          animation: fadeEffect 1.2s;
     }
     .announcement-card.active{
          display: block;
     }

     .tasks{
          /* margin-bottom: 30px; */
          padding-bottom: 10px;
     }

     .tasks .calendar-card{
          display: none;
          animation: fadeEffect 1.2s;
     }
     .tasks .calendar-card.active{
          display: block;
     }
     .grade{
          margin-top: 0px;
     }
     .grade button.parent-btn h3{
          margin: 30px 0;
     }
     .grade-card{
          display: none;
          animation: fadeEffect 1.2s;
     }
     .grade-card.active{
          display: block;
     }

     /* Schedule link */

     .mentoring-session button.parent-btn h3{
          margin-top: 30px;
     }
    
     .ul-card{
          /* display: none; */
          animation: fadeEffect 1.2s
     }
     .ul-card.active{
          display: none;
     }


     .ms-card{
          display: none;
          animation: fadeEffect 1.2s;
     }
     .ms-card.active{
          display: block;
     }

     /* Schedule link end*/


     /* Dashboard link */

     .db-wrapper{
          flex-direction: column;
          gap: 0;
     }
     .tasks h3{
          margin: 30px 0 30px 0;
     }
     .calendar-card{
          margin-bottom: 0px;
     }
     .grade h3{
          margin: -20px 0 30px 0;
     }

     /* Dashboard link End */

     /* Schedule Link */

     .tasks.schedule{
          display: none;
     }
     .mentoring-session h3{
          margin-top: 20px;
     }

     /* Schedule Link End */

     /* Dashboard link self-paced */

     .card-rows.self-paced,
     .card-rows.schedule{
          margin: 0 10px;
     }
     .self-paced-span{
          margin: 10px 0px;
     }

     /* Dashboard link self-paced end  */

     /* Module link  */

     .module-wrapper{
          flex-direction: column;
          position: relative;
     }
     .left-module{
          position: absolute;
          z-index: 10;
          top: 20px;
          left: 15px;
          display: none;
          animation: fadeEffect .4s;
     }
     .left-module.active{
          display: block;
     }
     .left-module .card{
          border-radius: 5px;
     }

     .module-wrapper .overview-btn{
          display: flex;
          align-self: flex-start;
          align-items: center;
     }
     .module-wrapper button.overview-btn{
          padding: 10px 30px;
          background: #E6EEF9;
          border: none;
          outline: none;
          border-radius: 10px;
          animation: fadeEffect .3s;
     }
     .module-wrapper button.overview-btn.active{
          background: #2181FF;
     }
     .module-wrapper button.overview-btn.active ~ .right-module{
          filter: blur(2px);
     }
     button.overview-btn.active span{
          color: white;
     }
     .module-wrapper .overview-btn span{
          font-size: 15px;
          font-weight: 500;
          color: #818E9F;
          /* padding: 8px 20px; */
     }
     .module-wrapper .overview-btn img{
          width: 15px;
          height: 15px;
          margin-left: 20px;
          /* padding: 0 10px; */
     }

          
     .module-data:hover{
          background-color: none;
     }

     /* Module link End */

     /* Task Link */

     .feedback-popup{
          top: 0;
          width: 70%;
          left: 7%;
     }     

     .feedback.hide span{
          display: none;
     }
    

     /* Task Link End */


      /* Grade Overview */

     .grade-overview{
          display: flex;
          justify-content: space-between;
          overflow-x: auto;
     }

     /* Grade Overview End */

     /* Inbox */
          
     .inbox-wrapper{
          grid-template-columns: 1fr 1fr 1fr;
     }

     /* Inbox End */

     /* Financial Info */

     .financial-overview-grid{
          display: flex;
          overflow-x: auto;
          column-gap: 30px;
     }

     .financial-overview-grid .left-card{
          flex: 1 0 300px;
     }
     .financial-overview-grid .middle-card{
          flex: 1 0 250px;
     }
     .financial-overview-grid .right-card{
          flex: 1 0 300px;
     }

     /* Financial Info End */

}

@media (max-width:830px){

     /* Dashboard link */

     ul.db-nav-links{
          padding: 0 0 20px 0;
          overflow-x: auto;
     }
     ul.db-nav-links::-webkit-scrollbar{
          display: none;
     }
     a.db-nav-link::before,
     a.db-nav-link.active::before{
          bottom: -19px;
     }
     .db-nav-sec{
          padding: 35px 40px 0px;
     }

     /* Dashboard link End */

     /* Task link */

     .data-row .last-child{
          margin-right: -20%;
     }
     .data-row.two .view-btn, 
     .data-row.three .view-btn{
          margin-left: 40%;
     }
     .data-row .second-last{
          margin-left: -60%;
     }


     /* Task link end */

     /* Class - Discussion Board */

          
     .tags-for-mob{
          display: block;
     }

     .class-lower-section{
          grid-template-columns: 1fr;
          display: none;
     }
     
     .tabcontent.one,
     .tabcontent.two,
     .tabcontent.three{
          margin: 0 40px;
     }

     .class-upper-heading h4{
          padding: 20px 0;
     }

     .video.class-discussion{
          margin-bottom: 10px;
     }
     .class-overview-heading h3,
     .start-discussion-heading h3,
     .reading-material-heading h3{
          padding: 40px 0 30px;
     }

     .discussion-sort{
          display: flex;
          justify-content: flex-end;
          margin: 20px 0;
     }
     .discussion-sort img{
          width: 18px;
          height: 18px;
     }
     .discussion-sort .left-span{
          display: flex;
          align-items: center;
     }
     .discussion-sort .left-span span{
          font-size: 13px;
          font-weight: 500;
          color: #A0ACBB;
          padding: 0 10px;
     }

     .keywords-btn button img{
          width: 14px;
          height: 14px;
          margin-left: 10px;
     }

     .keywords-btn button{
          display: flex;
          align-items: center;

          font-size: 13px;
          font-weight: 600;
          color: #717C8B;
          background: none;
          border: none;
          outline: none;
          cursor: pointer;
     }

     .discussion-card{
          margin: 30px 0 40px 40px;
          padding: 40px 40px 10px;
     }

     .right-icons{
          display: flex;
          align-items: baseline;
          justify-content: flex-end;
          padding: 30px 0 10px;
     }
     .right-icons .comments-icon{
          display: flex;
          align-items: center;
     }
     .right-icons .comments-icon span{
          font-size: 14px;
          font-weight: 600;
          color: #2181FF;
          margin-left: 8px;
     }
     
     .right-icons.mob img{
          margin-right: 0px;
          margin-left: 20px;
          width: 20px;
          height: 20px;
     }

     .lower-data .sub-data{
          border-bottom: 1px solid rgba(0,0,0,.1);
     }

          
     .reply-popup.mob{
          display: none;
          position: absolute;
          top: -410%;
          right: 1%;
          width: 90%; 
     }
     .reply-popup.mob::before{
          right: 15%;
     }
     .right-icons.mob{
          position: relative;
     }
     .reply-popup.mob.first.active{
          display: block;
     }
     .reply-popup.mob.second.active{
          display: block;
     }


     .more-popup.mob{
          display: none;
          top: -120%;
          right: -3%;
     }
     .more-popup.mob::before{
          position: absolute;
          top: 87%;
          right: 10%;
          border-bottom: 2px solid #E0EBFD;
          border-right: 2px solid #E0EBFD;
          border-top: none;
          border-left: none;
     }

     .more-popup.mob.one.active{
          display: flex;
     }
     .more-popup.mob.two.active{
          display: flex;
     }

     /* Class - Discussion Board End */


     /* Financial Info */

     .payment-history-card{
          display: none;
     }

     .payment-history-card-mob{
          display: block;
     }

     .history-row{
          display: flex;
          align-items: center;
          justify-content: space-between;
          background-color: var(--white);
          padding: 20px;
          margin: 20px 0;
          border-radius: 20px;
          box-shadow: 0px 0px 40px 10px rgba(0,0,0,0.03);
     }
     .history-row .left-side{
          display: flex;
          align-items: center;
     }
     .history-row .left-img img{
          width: 30px;
          height: 30px;
          padding: 15px;
          border-radius: 10px;
          background-color: #F3F7FC;
     }
     .history-row .title{
          margin-left: 30px;
     }
     .history-row .title h3,
     .history-row .right-side h3{
          font-size: 18px;
          font-weight: 500;
     }
     .history-row .title span{
          font-size: 16px;
          color: #919CAB;
     }
     .history-row .right-side span{
          font-size: 16px;
          font-weight: 500;
          color: #1BB9A5;
     }


     .history-row.two .right-side span,
     .history-row.seven .right-side span{
          color: #607C9C;
     }
     .history-row.three .right-side span,
     .history-row.six .right-side span{
          color: #EB2E75;
     }

     /* Financial Info End */

     /* Notifications */

     .upper-section.AP .month{
          background-color: #E6EEF9;
          border-radius: 10px;
          padding: 10px;
     }

     .notification .left-side h5 > span{
          font-weight: 600;
     }
     
     /* Notifications End */
     
     
     /* Settings */
     
     .settings-wrapper{
          display: none;
     }

     .settings-wrapper-mob{
          display: block;
     }

     .settings-wrapper-mob .settings-profile-pic{
          display: flex;
          justify-content: center;
     }

     .setting-heading-mob{
          display: flex;
          justify-content: center;
          align-items: center;
          margin: 15px 0;
     }

     .setting-heading-mob h4{
          font-size: 20px;
          font-weight: 500;
     }

     section.profile-main-links .profile-links-wrapper.settings .tab > * + *{
          margin-left: 20px;
     }

     section.profile-main-links .profile-links-wrapper.settings .tab{
          display: flex;
          justify-content: space-between;
     }


     .settings-wrapper-mob .tabcontent{
          margin: 0 40px;
     }

     /* Settings End */

     /* Profile */


          
     .upper-profile-wrapper{
          display: flex;
          flex-direction: column;
     }
     .left-profile-side,
     .right-profile-side{
          padding: 0px;
     }

     .profile-page{
          padding: 0px;
     }
     .settings-profile-pic{
          justify-content: flex-start;
          margin: 10px 0 30px;
     }

     .right-profile-side .lower-row{
          flex-direction: column;
          justify-content: center;
          align-items: flex-start;
     }

     .right-profile-side .upper-row{
          position: relative;
     }
     .upper-row .social-icons-links{
          display: flex;
          flex-direction: column;
          position: absolute;
          top: -210px;
          right: -20px;

          background-color: #E3ECF8;
          padding: 15px 10px;
          border-radius: 30px;
          box-shadow: 0px 0px 40px 10px rgba(0,0,0,0.03);
     }
     .upper-row .social-icons-links img{
          width: 28px;
          height: 28px;
          margin: 4px 0;
     }

     .tab-content-grid{
          grid-template-columns: 1fr;
     }

     .left-tab-content,
     .right-tab-content{
          display: none;
     }

     /* Profile End */



}

@media (max-width:1300px){
          
     .middle-tab-content{
          margin: 0 -10px;
     }
}

@media (max-width:800px){

     /* Task Link */

          
     .tasks-wrapper .upper-section,
     .tasks-wrapper .lower-section{
         display: none;
     }

     .upper-sec-for-mob,
     .lower-sec-for-mob{
          display: block;
     }

    .upper-sec-for-mob{
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-top: 35px;
    }
    .upper-sec-for-mob .left-side h3{
         font-size: 18px;
         font-weight: 600;
    }

    .upper-sec-for-mob .right-side button{
         display: flex;
         align-items: center;
         justify-content: space-between;
         border: none;
         outline: none;
         font-size: 15px;
         background-color: #E6EEF9;
         border-radius: 10px;
         padding: 10px 20px;
    }
    .upper-sec-for-mob .right-side button h4{
         margin: 0 20px;
    }
    .upper-sec-for-mob .right-side button img{
         width: 23px;
         height: 23px;
    }
    .upper-sec-for-mob .right-side button img.arrow-img{
         width: 13px;
         height: 13px;
    }


    .task-card-mob{
         background-color: var(--white);
         padding: 10px 0;
         margin-top: 30px;
         border-radius: 10px;
    }

    .task-card-mob .task-data{
         display: flex;
         justify-content: space-between;
         align-items: center;
         border-bottom: 1px solid rgba(0,0,0,.07);
         padding: 20px;
         margin: 10px 10px 0;
    }
    .task-data .heading h4{
         font-size: 16px;
         font-weight: 500;
    }
    .task-data .status{
         display: flex;
         margin-top: 10px;
    }
    .task-data .status > * + * {
         margin-left: 30px;
    }
    .task-data .status span{
         font-size: 13px;
         color: #919CAB;
    }
    .task-data .right-col-btn button{
         display: flex;
         align-items: center;
         justify-content: space-between;
         border: none;
         outline: none;
         background-color: #C4D1E4;
         padding: 10px 8px;
         border-radius: 8px;
    }
    .task-data .right-col-btn img{
         width: 15px;
         height: 10px;
    }
    .task-dropdown div{
         display: flex;
         align-items: center;
         /* justify-content: space-between; */
         border-bottom: 1px solid rgba(0,0,0,.07);
         padding: 20px 0;
    }
    .task-dropdown div h6{
         font-size: 15px;
         font-weight: 500;
         color: #ACACF5;
    }
    .task-dropdown div button{
         padding: 8px 40px;
         background-color: #2181FF;
         color: var(--white);
         border: none;
         outline: none;
         border-radius: 20px;
         margin-left: 30%;
    }
    .task-dropdown div span{
         font-size: 15px;
         font-weight: 500;
         color: #ABABAB;
         margin-left: 31%;
    }
    .task-dropdown div .lower-span{
         margin-left: 26.5%;
    }
    .task-dropdown{
         padding: 0 35px;
         display: none;
    }

    /* Task One */

    .task.one .task-data{
         background-color: #F3F7FC;
         margin: 10px 20px 0;
         border-radius: 10px;
    }
    .task-dropdown.one{
         display: none;
    }
    .task-dropdown.one.active{
         display: block;
    }

    /* Task two */

    .task.two .task-data{
     /* background-color: #F3F7FC; */
     margin: 10px 20px 0;
     border-radius: 10px;
     }
     .task-dropdown.two{
          display: none;
     }
     .task-dropdown.two.active{
          display: block;
     }

     .task.two .status span.reviewed{
          color: #6060E4;
     }

     .task-dropdown.two button.upload{
          background-color: #CAD1DA;
          color: var(--white);
     }
     .task-dropdown.two span{
          color: var(--dark-black);
     }
     .task-dropdown.two button.view{
          margin-left: 24%;
     }


     /* Task three */

    .task.three .task-data{
     /* background-color: #F3F7FC; */
     margin: 10px 20px 0;
     border-radius: 10px;
     }
     .task-dropdown.three{
          display: none;
     }
     .task-dropdown.three.active{
          display: block;
     }

     .task.three .status .submitted{
          color: #1BB9A5;
     }
     .task-dropdown.three button.upload{
          background-color: #CAD1DA;
          color: var(--white);
     }
     .task-dropdown.three .view{
          margin-left: 24%;
     }


     /* Task four */

    .task.four .task-data{
     /* background-color: #F3F7FC; */
     margin: 10px 20px 0;
     border-radius: 10px;
     }
     .task-dropdown.four{
          display: none;
     }
     .task-dropdown.four.active{
          display: block;
     }

     /* Task five */

    .task.five .task-data{
     /* background-color: #F3F7FC; */
     margin: 10px 20px 0;
     border-radius: 10px;
     }
     .task-dropdown.five{
          display: none;
     }
     .task-dropdown.five.active{
          display: block;
     }

     .task.five .status .due{
          color: #D91E63;
     }


   
     /* Task six */

    .task.six .task-data{
     /* background-color: #F3F7FC; */
     margin: 10px 20px 0;
     border-radius: 10px;
     }
     .task-dropdown.six{
          display: none;
     }
     .task-dropdown.six.active{
          display: block;
     }

     .task.six .status .due{
          color: #D91E63;
     }


     .task-data button.task-data-btn.active{
          background-color: #2181FF;
     }

     /* Task Link End */

}


@media (max-width:768px) {

     /* Grade link */

     .certified-associate{
          display: none;
     }
     .certified-associate-mobile{
          display: block;
     }

     .certified-row{
          background-color: var(--white);
          box-shadow: 0px 0px 40px 10px rgba(0,0,0,0.02);
          border-radius: 8px;
          margin: 20px 0;
     }
     
     .certified-row .card{
          padding: 20px 20px;
          display: flex;
          justify-content: space-between;
          align-items: center;
     }
     .certified-row .left-side h5{
          font-size: 15px;
          font-weight: 500;
          padding-right: 10px;
     }
     .certified-row .right-side{
          display: flex;
          justify-content: space-between;
          align-items: center;
     }
     .certified-row .right-side span{
          font-size: 17px;
          font-weight: 500;
          color: #EA4C89;
          margin-right: 20px;
          width: 70px;
     }
     .certified-row .right-side button{
          border: none;
          outline: none;
          background-color: #C4D1E4;
          padding: 5px;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 4px;
          cursor: pointer;
     }
     .certified-row .right-side button > img{
          width: 10px;
          height: 10px;
     }

     .sub-rows{
          border-top: 1px solid rgba(0,0,0,.07);
          /* padding-top: 10px; */
     }

     .sub-row{
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 15px 20px;
     }
     .sub-row .left-side h6{
          font-size: 15px;
          font-weight: 400;
          margin-right: 10px;
     }
     .sub-row .right-side span{
          color: #607C9C;
     }
     .sub-row .right-side button{
          padding: 1px;
          background-color: #2181FF;
     }
     .sub-row .right-side button > img{
          width: 18px;
          height: 18px;
     }

     .sub-rows{
          display: none;
     }
     .sub-rows.active{
          display: block;
     }
     .sub-rows.two{
          display: block;
     }

     .sub-rows.two.active{
          display: none;
     }

     /* Grade link End */

     /* Task Link */

     .upload-popup{
          width: 60%;
          left: 15%;
     }

     /* .introduction-quiz.hide,
     .para-hide{
          display: none;
     } */

     /* Task Link End */


      /* Financial Info */

      .financial-overview-grid{
          display: flex;
          overflow-x: auto;
          column-gap: 20px;
     }

     .financial-overview-grid .left-card{
          flex: 1 0 300px;
          height: 230px;
     }
     .financial-overview-grid .middle-card{
          flex: 1 0 300px;
          height: 230px;
     }
     .financial-overview-grid .right-card{
          flex: 1 0 300px;
          height: 230px;
     }

     .left-card a.pay-now button,
     .manage-btn a button{
          width: 90%;
     }

     /* Financial Info End */

     /* Notification */

     .notification .left-side h5{
          margin-left: 20px;
     }    
     .notification.active{
          margin-left: 0px;
     }
     .notification.active::before{
          left: -2px;
          top: -2px;
     }



     /* Notification End */


}


@media (max-width:650px){

     /* Dashboard link */

     .db-nav-sec{
          margin: 0px;
          padding: 35px 20px 0;
          border-radius: 0px;
     }
     .upper-white-bg{
          display: none;
     }
     .db-wrapper{
          margin: 0 20px;
     }

     /* Dashboard link End */

     /* Schedule Link */

     .upper-sec .months,
     .upper-sec .buttons{
          display: none;
     }

     .months-btn,
     .buttons-dots{
          display: block;
     }
     
     .months-btn button{
          display: flex;
          align-items: center;
          justify-content: space-between;
          border: none;
          background-color: #E6EEF9;
          border-radius: 5px;
     }
     .months-btn button span{
          font-size: 13px;
          padding: 10px 20px;
          color: #818E9F;
     }
     .months-btn button img{
          padding: 8px 5px;
          width: 25px;
          height: 25px;
     }
     .buttons-dots button{
          border: none;
          background: none;
     }
     .buttons-dots img{
          width: 21px;
          height: 5px;
     }

     /* Schedule Link End */


     /* Module Link */

     .module-wrapper{
          margin: 30px 0px;
     }
     .module-overview{
          padding: 0px;
     }

     .overview,
     .syllabus,
     .overview-btn{
          margin: 0 20px;
     }

     /* Module Link End  */


     /* Task Link */

     .tasks-wrapper{
          margin: 0 20px;
     }

     .feedback-popup{
          padding: 20px;
          width: 85%;
          left: 5%;
     }

     .introduction-quiz.hide,
     .para-hide{
          display: none;
     }


     /* Task Link End */

     /* Grade link */

     section.grade .grade-wrapper{
          margin: 0 20px;
     }
     .grade-wrapper .heading h4{
          font-size: 17px;
     }
     .grade-overview .left-section{
          width: 130px;
     }
     .left-section .score h5{
          margin: 0px;
     }
     .left-section .score{
          margin-left: 10px;
     }

     /* Grade link End */

     /* Announcement Page */

          
     .announcement-wrapper{
          margin: 0 20px;
     }
     nav.open-links ul{
          margin-left: -20px;
     }
     .announcement.page .upper-section{
          margin: 10px 20px 30px;
     }

     /* Announcement Page End */

     /* Class - Discussion  Board */

     .tabcontent.one,
     .tabcontent.two,
     .tabcontent.three,
     .class-upper-heading,
     .video.class-discussion{
          margin: 0 20px;
     }

     /* Class - Discussion  Board End */

     /* Financial Info */

     .financial-overview,
     .payment-history{
          margin: 0 20px;
     }

     /* Financial Info End */

     /* Notification */

     
     .notification-page{
          margin: 0 20px;
     }
     .notification-wrapper .notification{
          padding: 20px;
     }

     /* Notification End */


     /* Settings */

     .settings-wrapper-mob .tabcontent{
          margin: 0 20px;
     }
          
     .notification-setting input{
          width: 35px;
          height: 35px;

     }

     /* Settings End */


     /* Profile */

     .upper-profile-wrapper{
          margin: 0 20px;
     }

     .tabs-section .tab{
          margin-left: -20px;
     }

     .upper-row .social-icons-links{
          right: 0;
     }


     .portfolio{
          grid-template-columns: 1fr;
     }

     /* Profile End */


}
@media (max-width:600px) {

     /* Dashboard link */

     .db-nav-sec{
          padding: 35px 20px 0px;
     }
     .upcoming-lessons{
          padding-top: 10px;
     }
     .announcement h3{
          margin: 40px 0 30px 0;
     }
     .tasks h3{
          margin: 20px 0;
     }
     .grade h3{
          margin: 30px 0;
     }
     .grade{
          margin-top: 0px;
     }
     .play-img img{
          display: block;
     }
     .card-row{
          position: relative;
          padding: 10px 0;
     }
     .card-row .row .left-col{
          padding-left: 10px;
     }
     .card-row .date span{
          position: absolute;
          top: 0;
     }
     .play-img{
          margin-left: -80px;
          margin-top: 10px;
     }
     .card-row .date{
          padding: 0px;
     }

     .card-row .row{
          padding: 0px;
          border: none;
          box-shadow: none;
          padding: 20px 0 20px 0;
     }
     .right-col{
          display: none;
     }
     .card-row.second .row,
     .card-row.third .row{
          border: none;
     }

     .announcement-card{
          padding: 0 20px 20px 20px ;
     }
     .announcement-row .right-div{
          padding: 0px;
          margin-top: 15px;
     }
     .announcement-row{
          padding: 20px 0;
          flex-direction: column;
     }
     .announcement-row .right-div h4{
          display: none;
     }
     .announcement-row .responsive-heading{
          display: block;
          margin-left: 20px;
     }
     .announcement-row .responsive-heading h4{
          font-size: 16px;
          font-weight: 600;
          margin-bottom: 10px;
     }

     .calendar-card .months,
     .calendar-card .days,
     .left-side .green-dot{
          display: none;
     }
     .calendar-card{
          padding: 0px 20px 23px;
     }
     .assignment-row{
          padding-top: 30px;
          padding-bottom: 20px;
          border-bottom: 1px solid rgba(0,0,0,0.10);
     }
     .assignment-row.second{
          display: flex;
          padding-top: 20px;
     }

     .grade-card{
          padding: 30px 20px 23px;
     }
     /* Dashboard link End */

     /* Schedule Link */

     .ul-card{
          padding: 20px;
     }
     .middle-sec .dates{
     
          justify-content: space-between;
          margin-left: 0px;
     }
     .middle-sec{
          border-bottom: 1px solid rgba(0,0,0,0.10);
          margin-bottom: 30px;
          padding: 20px 0;
     }
     .middle-sec .date h5{
          display: none;
     }
     .middle-sec .date h4{
          display: block;
          font-size: 13px;
          font-weight: 500;
          color: #4C5561;
     }
     .middle-sec .date span{
          font-size: 15px;
     }
     .lower-sec .row .left-side h5{
          font-size: 12px;
     }
     .lower-sec .inner-text h4{
          font-size: 14px;
     }
     
     .ms-card{
          padding: 20px 20px 23px;
     }
     /* Schedule Link End */

     /* Dashboard Link self-paced  */

     .self-paced-play-icon{
          display: block;
          position: absolute;
          left: -27px;
          top: 13px;
     }

     .card-rows.self-paced .card-row .row{
          padding: 0px;
     }

     /* Dashboard Link self-paced End */

     /* Schedule Link self-paced */

     .card-rows.schedule .card-row .row{
          border-left: none;
     }
          
     .card-rows.schedule .card-row.first .row,
     .card-rows.schedule .card-row.second .row,
     .card-rows.schedule .card-row.third .row{
          border-left: none;
     }
     .card-rows.schedule .card-row .row{
          padding: 0px;
     }

     .card-rows.schedule .card-row.for-mobile{
          display: block;
     }
     .card-rows.schedule .card-row.second{
          display: none;
     }

     /* Schedule Link self-paced End */


     /* Announcement Page */

     .announcement.page .upper-section{
          margin-top: -30px;
          margin-bottom: 0px;
     }

     /* Announcement Page End */

     /* Class - Discussin Board */

     .reply-popup.mob::before{
          right: 21%;
     }

     /* Class - Discussin Board End  */

}

@media (max-width:550px){

     /* Announcement Page */

     .announcement.page .upper-section{
          flex-direction: column;
          align-items: flex-start;
     }
     .announcement.page .upper-section .left-side{
          height: 70px;
     }
     .announcement.page .upper-section .right-side{
          margin-bottom: 20px;
     }
     .upper-section.AP .month,
     .upper-section.AP .most-recent{
          display: flex;
          align-items: center;
          justify-content: space-between;
          border: none;
          outline: none;
          background-color: #E6EEF9;
          border-radius: 10px;
          padding: 10px; 
     }
     .upper-section.AP .month h4,
     .upper-section.AP .most-recent h4{
          font-size: 13px;
     }
     .upper-section.AP .most-recent{
          margin-left: 20px;
     }

     /* Announcement Page End */

     /* Task Page */

     .feedback-popup{
          top: -60px;
          left: 3%;
     }

     
     .upload-popup{
          width: 85%;
          left: 4%;
          padding: 20px;
     }

     /* Task Page End */

     /* Class - Discussin Board */

     .reply-popup.mob::before{
          right: 23%;
     }

     /* Class - Discussin Board End  */

     /* Settings */


     section.profile-main-links .profile-links-wrapper.settings{
          overflow-x: auto;
     }
     section.profile-main-links .profile-links-wrapper.settings::-webkit-scrollbar{
          display: none;
     }
     section.profile-main-links .profile-links-wrapper.settings .tab{
          justify-content: start;
     }

     section.profile-main-links .profile-links-wrapper.settings .tab{
          width: 500px;
     }
     section.profile-main-links .profile-links-wrapper.settings .tab > * + * {
          margin-left: 0px;
     }
     section.profile-main-links .profile-links-wrapper.settings .tab button{
          margin: 0 8px;
     }


     .lower-row .upper-inputs{
          grid-template-columns: 1fr;
     }

     /* Settings End */

     /* Proifle */

     .tabs-section .tab{
          margin-left: 0px;
     }
     .tabs-section .profile-links-wrapper.settings{
          display: flex;
          justify-content: space-between;
          margin-left: 0px;
     }

     .tabs-section section.profile-main-links .profile-links-wrapper.settings .tab{
          justify-content: space-between;
     }


     .ux-design-heading{
          flex-direction: column;
          align-items: flex-start;
     }
     .ux-design-heading span{
          padding-left: 20px;
          margin: 5px 0;
     }
     .card .facebook-heading span{
          display: none;
     }
     .work-experiance{
          margin: -5px;
     }

     .course-card .left-img img{
          width: 32px;
          height: 32px;
          border-radius: 15px;
          margin: 0 10px 0 10px;
     }
     .course-card{
          align-items: flex-start;
     }

     /* Proifle End */

      

}



@media (max-width:450px){

     /* Dashboard link  */

     .db-nav-sec .greeting-text h3{
          font-size: 20px;
          margin-bottom: 0px;
     }
     .db-nav-sec .greeting-text p{
          display: none;
     }
     .db-nav-sec .greeting-text span{
          font-size: 13px;
     }
     .db-nav-sec .greeting-text{
          margin-bottom: 30px;
     }
     a.db-nav-link{
          font-size: 14px;
     }
     .db-nav ul > * + * {
          margin-left: 30px;
     }

     .upcoming-lessons h3,
     .announcement h3,
     .tasks h3,
     .grade h3{
          font-size: 16px;
     }
     .card-row .date span{
          font-size: 13px;
          left: -15px;
     }
     .left-col .heading a{
          font-size: 15px;
     }
     .left-col .time-info .name{
          display: none;
     }
     .time-info > * + *{
          margin-left: 0px;
     }
     .left-col .time-info span{
          font-size: 13px;
     }
     .announcement-row .left-div span{
          font-size: 18px;
     }
     .announcement-row .left-div h5{
          font-size: 13px;
     }
     .announcement-row .month-and-date{
          padding: 5px 20px;
          border-radius: 15px;
     }
     .announcement-row .responsive-heading h4,
     .percent-bar .upper-row h5,
     .percent-bar .upper-row h4{
          font-size: 15px;
     }
     .lower-row .secondary-bar,
     .lower-row .secondary-bar span{
          height: 8px;
     }
     .percent-bar{
          margin: 20px 0;
     }
     /* Dashboard link End */

     /* Schedule Link */

     .mentoring-session h3{
          font-size: 16px;
     }

     .item .lower-items span{
          font-size: 10px;
          margin: 3px 1px;
          width: 45px;
     }
     .book-session-btn a{
          font-size: 14px;
     }

     /* Schedule Link End */

     .card-rows.schedule .card-row .left-col .time-info .name{
          display: block;
     }

     /* Module Link */

     .module-overview h3{
          font-size: 16px;
     }
     .module-wrapper button.overview-btn{
          padding: 8px 14px;
     }
     .module-wrapper .overview-btn span{
          font-size: 13px;
     }
     .module-wrapper .overview-btn img{
          width: 10px;
          height: 10px;
     }
     .lectures{
          margin: 0 30px;
     }


     /* Module Link End */


     /* Task Link */

     .task-data .heading h4{
          font-size: 14px;
     }

     .task-data .right-col-btn button{
          padding: 8px 5px;
          border-radius: 5px;
     }
     .task-dropdown div h6{
          font-size: 13px;
     }
     .task-dropdown div .lower-span{
          margin-left: 24%;
     }
     .upper-sec-for-mob .left-side h3{
          font-size: 16px;
     }
     .upper-sec-for-mob .right-side button h4{
          font-size: 13px;
          margin: 0 14px;
     }
     .upper-sec-for-mob .right-side button img{
          width: 18px;
          height: 18px;
     }
     .upper-sec-for-mob .right-side button{
          padding: 10px 14px;
     }
     .task.one .task-data{
          margin: 0 10px;
     }
     .task-card-mob .task-data{
          padding: 10px;
     }
     .task-data .right-col-btn img{
          width: 12px;
          height: 7px;
     }


     .upload-popup{
          width: 75%;
          left: 7%;
     }

     .upload-popup h4{
          font-size: 16px;
     }
     .upload-popup .upload-file{
          margin: 20px 0;
          padding: 10px 0;
          border: 3px dashed #C3D0DF;
     }
     .upload-popup .upload-file img{
          width: 90px;
          height: 90px;
     }
     .upload-popup .submit-all button{
          font-size: 12px;
     }

     /* Task Link End */

     /* Class - Discussion Board */

     .class-overview-card{
          padding: 20px 0px;
     }

     .class-upper-heading h4{
          color: #BBBBBB;
          font-size: 11px;
     }

     .class-upper-heading h4 > strong{
          color: #919CAB;
     }
     .class-overview-heading h3,
     .start-discussion-heading h3,
     .reading-material-heading h3{
          font-size: 17px;
     }
     .class-overview-row h4{
          font-size: 15px;
     }
     .class-overview-row span{
          font-size: 13px;
     }
     .discussion-card{
          padding: 20px 30px 10px;
          margin: 30px 0 40px 20px;
          
     }
     .upper-flex .left-heading .profile-picture{
          width: 50px;
          height: 50px;
          left: -25px;
     }
     .discussion-card .heading-title a,
     .discussion-card .upper-data p{
          font-size: 15px;
     }
     .discussion-card .meta-data span{
          font-size: 12px;
     }
     .sub-data .sub-profile-picture img{
          width: 40px;
          height: 40px;
     }
     .sub-data .sub-right-text{
          margin: 10px 0 10px 15px;
     }
     .sub-right-text p{
          margin: 10px 0 20px;
     }
     .reading-material-row .left-side img{
          width: 25px;
          height: 25px;
     }
     .reading-material-row .left-side a{
          font-size: 14px;
     }
     .download-all a > button{
          font-size: 15px;
     }
     .reply-popup.mob{
          top: -519%;
          width: 90%;
          right: -20px;
     }
     .reply-popup.mob::before{
          right: 33%;
     }

     .reply-popup textarea{
          width: 85%;
     }
     .reply-popup .lower-buttons{
          flex-direction: column;
     }
     .reply-popup .lower-buttons button{
          width: 100%;
          margin: 10px;
     }

     /* Class - Discussion Board End */

     /* Financial Info */

     /* Finance Overview */

     .financial-overview-heading h4{
          font-size: 17px;
     }

     /* Left card */

     .left-card h6,
     .financial-overview-grid .middle-card h5,
     .right-card h5{
          font-size: 13px;
     }
     .left-card .price h3,
     .financial-overview-grid .middle-card h3{
          font-size: 20px;
     }
     .left-card .price h5{
          font-size: 16px;
     }
     .lower-bar,
     .upper-bar{
          height: 8px;
     }
     .left-card .price,
     .finance-progress-bar{
          margin-right: 0px;
     }
     .finance-progress-bar{
          margin-bottom: 30px;
     }
     .left-card a.pay-now button,
     .manage-btn a button{
          width: 100%;
          padding: 8px;
     }

     .financial-overview-grid .left-card{
          flex: 1 0 250px;
          height: 180px;
     }

     /* Left card End  */


     /* Middle card */

     .financial-overview-grid .middle-card span{
          font-size: 12px;
     }
     .manage-btn{
          margin-top: 22px;
     }
     .financial-overview-grid .middle-card h5,
     .right-card h5{
          margin-bottom: 20px;
     }
     
     .financial-overview-grid .middle-card{
          flex: 1 0 250px;
          height: 180px;
     }

     /* Middle card End */

     /* Right Card */

     .right-card h5{
          margin-bottom: 30px;
     }

     .right-card .ammount h4{
          font-size: 14px;
     }
     .right-card .ammount span{
          font-size: 12px;
     }
     .right-card .ammount{
          margin-bottom: 25px;
     }
     
     .financial-overview-grid .right-card{
          flex: 1 0 220px;
          height: 180px;
     }

     /* Right Card End */

     /* Finance Overview End */

     /* Payment History */

     .payment-history-heading h4{
          font-size: 17px;
     }
     .history-row .left-img img{
          width: 22px;
          height: 22px;
          padding: 10px;
     }
     .history-row .title h3, 
     .history-row .right-side h3{
          font-size: 15px;
     }
     .history-row .title span{
          font-size: 13px;
     }
     .history-row .right-side span{
          font-size: 13px;
     }
     .history-row .title{
          margin-left: 20px;
     }


     /* Payment History End */

     /* Financial Info End */


     /* Notification */

     .notification .left-side img{
          width: 25px;
          height: 25px;
     }
     .notification .left-side h5{
          font-size: 14px;
     }
     .notification .right-side a img{
          width: 20px;
          height: 20px;
     }

     /* Notification End */

     /* Settings */

          
     .setting-profile-card,
     .contact-details-card,
     .resume-card,
     .account-setting-card,
     .privacy-setting-card{
          padding: 20px;
     }

     .setting-profile-card .heading h4, 
     .contact-details-card .heading h4, 
     .resume-card .heading h4, 
     .account-setting-card .heading h4, 
     .privacy-setting-card .heading h4{
          font-size: 17px;
     }

     .lower-row form label{
          font-size: 13px;
     }

     /* Settings End */

     /* Profile */

     .settings-profile-pic .profile-main-pic{
          width: 100px;
          height: 100px;
     }
     .upper-row .profile-name h4{
          font-size: 20px;
          padding-bottom: 10px;
     }
     .lower-row .location h5,
     .lower-row .job h5{
          font-size: 13px;
          margin-left: 10px;
     }
     .lower-row .right-side-data .primary-btn button{
          padding: 10px 40px;
     }
     .upper-row .social-icons-links{
          top: -140px;
     }

     .course-card .right-data h4{
          font-size: 15px;
     }
     .course-card .right-data span{
          font-size: 12px;
     }
     .course-card{
          padding: 20px 10px;
     }

     /* Profile End */

   

}

@media (max-width: 400px){

     .feedback-popup{
          top: -120px;
          width: 83%;
     }
     .feedback-popup p{
          padding: 0px;
     }

     .upload-popup{
          width: 80%;
          left: 4%;
     }

     /* Class - Discussion Board  */
    
     .reply-popup.mob::before{
          display: none;
     }

     /* Class - Discussion Board End */


     /* Settings */

     .upload-resume input{
          width: 80%;
     }

     /* Settings End */
}


@media (max-width: 360px){

     .task-dropdown div .lower-span{
          margin-left: 22%;
     }

     /* Settings */

     .upload-resume-buttons{
         flex-direction: column;
          
     }

     .upload-resume button.view-btn{
          margin-left: 0px;
          margin-top: 20px;
     }
     .upload-resume button{
          width: 100%;
          padding-left: 60px;
          padding-right: 60px;
     }

     /* Settings End */

     /* Task */

     .upload-popup{
          width: 75%;
          left: 7%;
     }
     .upload-popup .upload-file{
          margin: 20px 0; 
          padding: 10px 0;
          border: 3px dashed #C3D0DF;
     }
     .upload-popup .upload-file img{
          width: 80px;
          height: 80px;
     }
     .downloaded-file{
          padding: 10px;
     }

     /* Task End */
}

@media (max-width:340px){

     /* Dashboard link */

     .percent-row{
          /* flex-direction: column; */
          display: none;
     }
     
     /* Dashboard link End */

     .item .lower-items span{
          width: 40%;
     }

     /* Task Page */

     .feedback-popup{
          top: 0;
     }

     .introduction-quiz.hide,
     .para-hide{
          display: none;
     }

     /* Task Page End */

}

@media (max-width:300px){

      /* Payment History */

     .history-row .left-img img{
          width: 20px;
          height: 20px;
          padding: 8px;
     }
     .history-row .title h3, 
     .history-row .right-side h3{
          font-size: 13px;
     }
     .history-row .title span{
          font-size: 11px;
     }
     .history-row .right-side span{
          font-size: 11px;
     }
     .history-row .title{
          margin-left: 10px;
     }

     .history-row{
          padding: 10px;
          border-radius: 10px;
     }

     /* Payment History End */

}




/* Making Responsive End */


/* Dashboard - Instructor led End */






























































































/* Responsive */

/* LOGIN Responsive */


@media (max-width:831px) {
     section.login .left-side img.logo{
          display: none;
     }
     section.login .responsive-logo img{
          width: 150px;
          height: 35px;
          margin-top: 40px;
          margin-left: 40px;
          display: block;
     }
     section.login .wrapper{
        display: flex;
        flex-direction: column-reverse;
     }
     section.login .left-side h1{
          margin-top: 50px;
     }
     section.login .wrapper .left-side{
          margin: 0px 30px 0px 60px;
     }
     section.login .right-side .login-image img{
          display: none;
     }
     section.login .right-side{
          width: 100%;
          height: 15%;
          background: none;
     }
     section.login .right-side .lower-text{
          width: 80%;
          margin-left: 70px;
          background: var(--bg-gray);
          padding: 30px 40px;
          position: relative; 
          overflow: hidden;
          border-radius: 10px;
     }
     section.login .right-side .lower-text img.lower-text-bg{
          display: block;
          position: absolute;
          width: 100%;
          left: -30px;
     }
     section.login form input{
         margin-bottom: 20px;
     }
}


@media (max-width:550px) {
     section.login .responsive-logo img{
          width: 135px;
          height: 30px;
     }
     section.login .right-side .lower-text{
          width: 70%;
     }
     section.login .right-side .lower-text h3{
          font-size: 16px;
     }
     section.login .right-side .lower-text h5{
          font-size: 14px;
     }
     section.login .right-side .lower-text img.lower-text-bg{
           transform: scale(1.2);
     }
     section.login .wrapper .left-side h1{
          font-size: 20px;
          font-weight: 500;
     }
     section.login .wrapper .left-side p{
          font-size: 16px;
     }
     section.login form h5{
          font-size: 13px;
     }

     section.login .middle-text .checkbox label{
          font-size: 13px;
     }
     section.login .middle-text .right-text a > h5{
          font-size: 13px;
     }
     section.login .buttons .primary-btn {
          font-size: 17px;
          margin-bottom: -15px;
     }
     section.login .buttons .secondary-btn {
          display: none;
     }
          
     section.login .left-side .signup-for-mobile {
          display: block;
          font-size: 13px;
          text-align: center;
          margin-right: 25%;
          color: var(--dark-black);
          margin-top: 30px;
          margin-bottom: 30px;
     }
     section.login .left-side .signup-for-mobile a{
          color: var(--primary);
     }
     section.login .wrapper .left-side{
          margin: 0px 0px 0px 60px;
     }
     section.login .left-side h1{
         margin-top: 50px;
     }
     section.login .lower-text .social-icons{
          margin-right: 100px;
     }
}
@media (max-width:450px){
     section.login .wrapper .left-side{
          margin: 0px 40px;
     }
     section.login .wrapper .left-side h1 {
         margin-top: 50px;
     }
     section.login .right-side .lower-text{
          width: 65%;
     }
     section.login .lower-text .social-icons{
          margin-right: 90px;
     }
     section.login form input{
          font-size: 12px;
     }
}
@media (max-width:414px) {
     section.login .wrapper .left-side p{
          width: 80%;
          margin-right: 20px;
      }
      section.login .right-side .lower-text img.lower-text-bg{
           transform: scale(1.3);
      }
}
 
@media (max-width:378px) {
     section.login .wrapper .left-side p{
          width: 80%;
          margin-right: 20px;
      }
      section.login .right-side .lower-text h3{
          font-size: 14px;
     }
     section.login .right-side .lower-text h5{
          font-size: 12px;
     }
      
}

@media (max-width:360px) {
     section.login .responsive-logo img{
          width: 100px;
          height: 22px;
     }
     section.login .right-side .lower-text{
          width: 60%;
          padding-top: 10px;
          padding-bottom: 10px;
     }
     section.login .right-side .lower-text h3{
          font-size: 12px;
     }
     section.login .right-side .lower-text h5{
          font-size: 11px;
     }
     section.login .right-side .lower-text img.lower-text-bg{
           height: 23vh;
     }
     section.login .wrapper .left-side h1{
          font-size: 20px;
          font-weight: 500;
     }
     section.login .wrapper .left-side p{
          font-size: 13px;
     }
     section.login form h5{
          font-size: 12px;
     }
     section.login .middle-text .checkbox input{
          height: 50px;
     }
     section.login .middle-text .checkbox label{
          font-size: 11px;
          margin-top: 18px;
     }
     section.login .lower-text .social-icons img{
          width: 30px;
          height: 30px;
     }
     section.login .lower-text .social-icons img.google{
          margin-top: 3px;
     }
     section.login .lower-text .social-icons img.facebook{
          width: 25px;
     }
     section.login .lower-text .social-icons img.linkedin{
          width: 25px;
     }
     
     section.login .middle-text .right-text a > h5{
          font-size: 11px;
     }
     section.login .buttons .primary-btn {
          font-size: 13px;
          margin-bottom: -15px;
     }
     section.login .lower-text .left-side-text h5{
          font-size: 11px;
     }
}


/* LOGIN Responsive End  */


/* SIGNUP Responsive */


@media (max-width:1160px) {
     section.signup .portion-wrapper .middle-portion form input{
          width: 80%;
     }
     section.signup .portion-wrapper .middle-portion{
          margin-left: 10px;
     }
     section.signup .portion-wrapper .middle-portion form .last-name{
          margin-left: 160px;
     }
     section.signup .portion-wrapper .middle-portion form .email-address{
          margin-left: 160px;
     }
     section.signup .portion-wrapper .middle-portion form .confirm-password{
          margin-left: 160px;
     }
}

@media (max-width:1025px) {

     section.signup .portion-wrapper .middle-portion form{
          flex-direction: column;
          margin-bottom: 20px;
     }
     section.signup .portion-wrapper .middle-portion form input{
          width: 90%;
          margin-bottom: 30px;
     }
     section.signup .portion-wrapper .middle-portion{
          margin-left: 0px;
     }
          
     section.signup .portion-wrapper .left-portion{
          height: 110vh;
     }
     section.signup .portion-wrapper .right-portion{
          height: 138vh;
     }
     section.signup .portion-wrapper .middle-portion form .last-name{
          margin-left: 0px;
     }
     section.signup .portion-wrapper .middle-portion form .email-address{
          margin-left: 0px;
     }
     section.signup .portion-wrapper .middle-portion form .confirm-password{
          margin-left: 0px;
     }
}

@media (max-width:840px) {
     section.signup .portion-wrapper .middle-portion form input{
          width: 100%;
     }
     section.signup .portion-wrapper .middle-portion{
          margin-left: 10px;
          width: 40%;
          /* margin-bottom: 30px; */
     }
     section.signup .portion-wrapper .middle-portion form .email-address{
          display: none;
     }
     section.signup .portion-wrapper .middle-portion form .pro-goals{
          margin-top: -15px;
          margin-bottom: -15px;
     }
     section.signup .portion-wrapper .middle-portion .data .secondary-btn{
          padding: 10px 120px;
          margin-top: 20px;
          margin-left: 90px;
          margin-right: -50pxpx;
          font-size: 13px;
          margin-bottom: 40px;
     }
     section.signup .portion-wrapper .left-portion{
          display: none;
     }
     section.signup .portion-wrapper .right-portion{
          display: none;
     }
     section.signup .portion-wrapper .middle-portion form{
          width: 100%;
     }
     section.signup .portion-wrapper .middle-portion form input{
          width: 100%;
          padding-right: 100px;
     }
     section.signup .portion-wrapper .middle-portion{
          margin: 10 40px;
          margin-left: 100px;
          width: 60%;
     }
      
} 

@media (max-width:716px) {
     section.signup .portion-wrapper .middle-portion{
          margin-left: 70px;
     }
     section.signup .portion-wrapper .middle-portion .data .secondary-btn{
          padding: 10px 100px;
     }
}
@media (max-width:650px) {
     section.signup .portion-wrapper .middle-portion{
           width: 60%;
     }
     section.signup .portion-wrapper .middle-portion .data .secondary-btn{
          padding: 10px 120px;
          margin-right: -100px;
          margin-left: 0px;
     }
}

@media (max-width:600px) {
     section.signup .portion-wrapper .middle-portion .logo img{
          display: none;
     }
     section.signup .portion-wrapper .middle-portion .responsive-logo img{
          display: block;
          width: 150px;
          height: 35px;
          margin-top: -40px;
          margin-bottom: 30px;
          
     }
     section.signup .portion-wrapper .middle-portion{
          margin-left: 20px;
          margin-right: 60px;
          width: 70%;
     }
     section.signup .portion-wrapper .middle-portion h1{
          font-size: 20px;
          font-weight: 500;
     }
     section.signup .portion-wrapper .middle-portion p{
          font-weight: 16px;
     }
     section.signup form h5{
          font-size: 13px;
     }
     section.signup .portion-wrapper .middle-portion form input{
          margin-bottom: 10px;
          font-size: 13px;
     }
     section.signup .portion-wrapper .middle-portion form{
          margin-bottom: 10px;
          width: 100%;
     }
     /* section.signup .portion-wrapper .middle-portion form .email-address{
          display: none;
     } */
     section.signup .portion-wrapper .middle-portion .data .secondary-btn{
          padding: 10px 100px;
          margin-left: 60px;
          margin-right: -50px;
     }
}

@media (max-width:500px) {
     section.signup .portion-wrapper .middle-portion{
          margin-left: 40px;
          margin-right: 20px;
          width: 60%;
     }section.signup .portion-wrapper .middle-portion .data .secondary-btn{
          margin-left: 40px;
          margin-right: -90px;
     }
}
@media (max-width:470px) {
     section.signup .portion-wrapper .middle-portion .responsive-logo img{
          display: block;
          width: 120px;
          height: 28px;
          margin-top: -80px;
          margin-bottom: 30px;
          
     }
     section.signup .portion-wrapper .middle-portion{
          width: 60%;
          margin-right: 0px;
          margin-top: 140px;
     }
     section.signup .portion-wrapper .middle-portion .data .secondary-btn{
          padding: 10px 120px;
          margin-left: 10px;
          margin-right: -110px;
          margin-bottom: 10px;
     }
}

@media (max-width:440px) {
     section.signup .portion-wrapper .middle-portion .data .secondary-btn{
          padding: 10px 120px;
          font-size: 10px;
          margin-right: -0px;
          margin-left: -10px;
          border: 1px solid var(--primary);
          margin-bottom: 20px;
     }
     section.signup .portion-wrapper .middle-portion{
          margin-right: 0px;
          margin-left: 30px;
          width: 95%;
          margin-top: 100px;
         
           
     }
     section.signup .portion-wrapper .middle-portion form input{
          padding: 15px 70px 15px 20px;
          margin-bottom: 10px;
          font-size: 12px;
          width: 70%;
     }
}
@media (max-width:398px) {
     section.signup .portion-wrapper .middle-portion .data .secondary-btn{
          padding: 10px 100px;
          margin-left: -50px;
          margin-right: -30px;
          font-size: 14px;
          font-weight: bold;
     }
     section.signup .portion-wrapper .middle-portion{
          margin-left: 20px;  
     }
     section.signup .portion-wrapper .middle-portion form input{
          padding: 15px 25px 15px 20px;
          width: 80%;
          margin-bottom: 25px;
     }

}
@media (max-width:310px){
     section.signup .portion-wrapper .middle-portion{
          margin-left: 20px; 
          width: 70%; 
     }
     section.signup .portion-wrapper .middle-portion .data .secondary-btn{
          padding: 10px 50px;
          margin-left: -40px;
          margin-right: -80px;
     }
     section.signup .portion-wrapper .middle-portion form input{
          padding: 15px 25px 15px 20px;
          width: 100%;
     }
}

/* SIGNUP Responsive End  */



/* HOME PAGE  - NOT ENROLLED Responsive */



@media (max-width:1243px){
     /* section.home nav .nav-wrapper .search-bar input{
          padding: 10px 40px 10px 40px; 
     }
     section.home nav .nav-wrapper .search-bar img{
          left: 18px;
          top: 10px;
     }
     section.home nav .nav-wrapper .nav-links .nav-link .icon{
          margin-left: 20px;
     }
          
     section.home .nav-wrapper .logo img{
          width: 100px;
          height: 20px;
     } */
}
@media (max-width:1080px){
     section.home nav .nav-wrapper .search-bar input{
          padding: 10px 20px 10px 30px; 
     }
     section.home nav .nav-wrapper .search-bar img{
          left: 10px;
          top: 12px;
          width: 14px;
          height: 14px;
     }
}
     
@media (max-width:1030px){
     section.home nav .nav-wrapper .nav-links .nav-link img{
          display: none;
     }
     section.in-progress .image{
          margin-left: 140px;
     }
}
@media (max-width:900px){
     section.home nav .nav-wrapper .nav-links .nav-link img{
          display: block;
     }
     section.home nav .nav-wrapper .nav-links .nav-link:nth-child(1){
          display: none;
     }
     section.home nav .nav-wrapper .nav-links .nav-link:nth-child(2){
          display: flex;
     }
     /* section.home .nav-wrapper .logo img{
          margin-left: -100px;
     } */
     section.home nav .nav-wrapper .search-bar{
          margin-left: 20px;
     }
     
}

@media (max-width:855px){
     section.in-progress .image{
          margin-left: 50px;
     }
     section.home nav .nav-wrapper .search-bar input{
          padding: 10px 10px 10px 30px; 
     }

}
@media (max-width:820px){
     section.in-progress .card{
          visibility: hidden;
          opacity: 0;
          position: absolute;
          transition: all .3s ease-in-out;
          left: 140px;
          z-index: 1;
     }
     section.in-progress .card.active{
          visibility: visible;
          opacity: 1;
     }
     section.in-progress .card-wrapper .image.active{
          transition: all .3s ease-in-out;
          filter: blur(2px);
     } 
     section.in-progress .image{
          margin-left: 70px;
          margin-top: 50px;
     }
     section.in-progress{
          position: relative;
     }
     section.in-progress .open-popup span{
          border: none;
          outline: none;
          background: #E6EEF9;
          padding: 10px 60px 10px 30px;
          border-radius: 10px;
          text-decoration: none;
          color: #818E9F;
          font-size: 16px;
          font-weight: 500;
     }
     section.in-progress .open-popup{
          display: flex;
          position: absolute;
          top: 0;
          margin-top: 20px;
     }
     section.in-progress .open-popup img{
          width: 25px;
          position: absolute;
          top: 14px;
          right: 10px;
     }
     section.in-progress .open-popup.active span{
          background: var(--primary);
          color: var(--white);
          transition: all .5s ease-in-out;
     }
     
}
@media (max-width:800px){
     section.home nav .nav-wrapper .nav-links .nav-link:nth-child(2){
          display: none;
     }
     section.home .nav-wrapper .logo img{
          width: 110px;
          height: 20px;
          margin-left: 200px;
     }
     section.home nav .nav-wrapper .search-bar input{
          display: none;
     }
     section.home nav .nav-wrapper .search-bar img{
          display: none;
     }
     section.home nav .nav-wrapper .nav-links .nav-link:nth-child(3){
          display: flex;
     }
     section.home nav .nav-wrapper .nav-links .nav-link:nth-child(3) img{
          width: 40px;
          height: 40px;
          margin: 0px;
     }
     section.home nav .nav-wrapper .nav-links img.small-profile-pic{
          width: 50px;
          height: 50px;
     }
     section.home .nav-wrapper button.hamburger-btn img{
          display: block;
     }
     section.profile .profile-wrapper .profile-main-pic{
          display: none;
     }
     section.profile .profile-wrapper .profile-text{
          transform: translateX(0);
          
     }
     section.home nav .nav-wrapper .nav-links img.small-profile-pic{
          display: none;
     }


     /* RESPONSIVE MENU FOR MOBILE */
     
     .profile-menu{
          display: flex;
          position: fixed;
          left: -400px;
          transform: translateX(-50%);
          width: 100%;
          max-height: 100%;
          top: 0;
          z-index: 100;
          transition: all .3s ease-in-out;
          background: rgba(0,0,0,0.30);   
     }

     .profile-menu.active{
          left: 50%;
     }

     .profile-menu-wrapper{
          display: flex;
          position: relative;
          flex-direction: column;
          flex: 1 0 80%;
          overflow-y: scroll;
          background-color: var(--white);
          padding: 30px 0px;
          border-radius: 0px 20px 20px 0px;
          padding-bottom: 0px;
     }
     .greeting{
          display: flex;
          align-items: center;
          margin-bottom: 20px;
          padding-left: 20px;
     }

     .flex{
          display: flex;
     }
     .all-courses img{
          width: 20px;
          position: absolute;
          right: 50px;
     }
     .more img{
          width: 15px;
          height: 15px;
          position: absolute;
          left: 90px;
          bottom: 2px;
     }
     .more li a.flex{
          color: var(--primary);
          margin: 20px 0px;
          position: relative;
     }

     .greeting .profile-img img{
          width: 49px;
          height: 49px;
          margin-top: 10px;
     }
     .greeting .profile-greeting{
          margin-left: 15px;
     }
     .greeting .profile-greeting button{
          background: none;
          border: none;
          outline: none;
     }
     .greeting .arrow-img{
          position: absolute;
          right: 40px;
     }
     .greeting .profile-greeting h2{
          font-size: 17px;
          font-weight: 550;
          margin-left: -25px;
     }
     
     .greeting .profile-greeting p{
          font-size: 13px;
          color: #919CAB;
     }

     .profile-menu-wrapper .same-bg{
          background-color: #fafafa;
          width: 100%;
     }
     .profile-menu-wrapper .same-bg li{
          list-style-type: none;
          margin-top: 10px;
     }
     .profile-menu-wrapper .same-bg span{
          font-size: 12px;
          color: var(--text-light-gray);
          
     }
     .profile-menu-wrapper .same-bg a{
          text-decoration: none;
          font-size: 15px;
          color: var(--dark-black);
          font-weight: 500;
     }
     .profile-menu-wrapper .mycourses, .mylearning, .all-courses, .more{
          padding: 30px 20px;
          border-bottom: 1px solid rgba(0,0,0,0.10);
     }
    
     button.hamburger-btn{
          border: none;
          background: none;
          outline: none;
          cursor: pointer;
          width: 18px;
          height: 13.5px;
          /* z-index: 1000; */
     }
     .close-wrapper{
          flex: 1 0 20%;
          width: 100%;
          max-height: 100%;
          /* background-color: rgba(0,0,0,0.07); */
     }
     .close-wrapper .close-btn{
          display: block;
          background: none;
          border: none;
          outline: none;
     }
     .close-wrapper .close-btn img{
          width: 50px;
          height: 50px;
          margin-top: 35px;
          margin-left: 30px;
     }
    

     /* Menu Opened */

     .menu-opened{
          display: flex;
          position: fixed;
          width: 100%;
          max-height: 100%;
          top: -25px;
          left: 0;
          z-index: 100;
          transition: all .3s ease-in-out;
          background: rgba(0,0,0,0.30);  
          display: none;
          
     }
     .menu-opened.active{
          display: none;
     }
     .menu-opened.active{
          display: block;
          z-index: 1000;
     }
     .menu-opened.active + .profile-menu{
          /* display: none; */
          opacity: 0;
     }
     .menu-opened .greeting{
          background: var(--white);
     }
     .menu-opened .greeting .arrow-img{
          position: absolute;
          left: 20px;
          top: 45px;
          width: 20px;
          height: 20px;
     }
     .menu-opened .greeting h1{
          margin-left: 50px;
     }
     .menu-opened .profile-menu-wrapper{
         width: 80%;
         height: 100vh;
     }

     .menu-opened button.close-opened-menu img{
          position: absolute;
          width: 50px;
          height: 50px;
          right: 40px;
          top: 60px;
     }
     .menu-opened .greeting .profile-greeting{
          padding: 10px 0 40px 0;
          background-color: var(--white);
          margin-left: 0px;
     }
     .menu-opened .greeting{
          padding-left: 0px;
     }
     .menu-opened .mylearning{
          border-bottom: none;
     }
     .menu-opened .profile-menu-wrapper{
          background-color: #fafafa;
     }

     .menu-opened button.close-opened-menu{
          display: block;
     }

     /* Menu Opened End */
     
     /* RESPONSIVE MENU FOR MOBILE END */
     

}

@media (max-width:740px){
     section.home .nav-wrapper .logo img{
          margin-left: 100px;
     }
}

@media (max-width:650px){
     section.home nav .nav-wrapper{
          margin-left: 20px;
          margin-right: 20px;
     }
     section.profile .profile-wrapper{
          margin-left: 20px;
          margin-right: 20px;
     }
     section.profile-main-links .profile-links-wrapper{
          margin-left: 20px;
          margin-right: 20px;
     }
     section.in-progress .card-wrapper{
          margin-left: 20px;
          margin-right: 20px;
     }
     section.in-progress .card{
          left: 50px;
     }
     section.in-progress .container{
          margin: 0px 0px;
     }
     
}
@media (max-width:560px){
     section.home .nav-wrapper .logo img{
          margin-left: 50px;
     }
}
@media (max-width:520px){
     section.home nav .nav-wrapper .nav-links .nav-link:nth-child(3) .icon img{
          width: 40px;
          height: 40px;
     }
     section.home .nav-wrapper .logo img{
          width: 92px;
          height: 18px;
     }
     section.in-progress .image{
          margin-left: 30px;
     }
     
}
@media (max-width:500px){
     section.home nav .nav-wrapper .nav-links .nav-link:nth-child(3) .icon{
          margin: 0px;
          margin-left: 20px;
     }
}
@media (max-width:460px){      
     section.profile img.profile-left-vector{
          display: none;
     }
     section.profile img.profile-middle-vector{
          position: absolute;
          top: 0;
          width: 20%;
          height: 100%;
          right: 10%;

     }
     section.profile img.profile-right-vector{
          display: none;
     }
     section.profile img.left-vector-mobile{
          display: block;
          position: absolute;
          top: 0;
          width: 60%;
          height: 100%;
          left: 0;
     }
   
     section.profile{
          border-bottom: none;
     }
     section.profile-main-links .profile-links-wrapper .tab > * + * {
          margin-left: 30px;
     }
     section.profile-main-links .profile-links-wrapper button{
          color: #919CAB;
          font-size: 14px;
     }
     section.in-progress .image{
          margin-left: 40px;
     }
     section.in-progress .image h2{
          font-size: 15px;
     }
     section.in-progress .image h3{
          font-size: 13px;
     }
     section.in-progress .image img.main-img{
          width: 214px;
          height: 105px;
     }
     .open-popup span{
          font-size: 13px;
          padding: 10px 40px 10px 15px;
     }
     .open-popup img{
          width: 22px;
          height: 22px;
          position: absolute;
          top: 10px;
          right: 10px;
     }
     section.in-progress .image .button img{
          right: 60px;
          top: -2px;
     }
     section.in-progress .card-wrapper{
          padding-bottom: 30%;
     }
     section.in-progress .card{ 
          left: 30px;
     }
     
     section.in-progress .card{
          margin-top: -20px;
     }
     section.in-progress .content a {
          font-size: 14px;
     } 
     .close-wrapper .close-btn img{
          margin-left: 10px;
     }
     .menu-opened button.close-opened-menu img{
          right: 15px;
     }
}
@media (max-width:420px){
     section.in-progress .image{
          margin-left: 10px;
     }
}
@media (max-width:400px){
     section.home nav .nav-wrapper .nav-links .nav-link:nth-child(3) .icon{
          margin: 0px;
          margin-left: 10px;
     }
     section.home .nav-wrapper .logo img{
          margin-left: 20px;
     }
}
@media (max-width:380px){
     section.in-progress .image{
          margin-left: 0px;
     }
}
@media (max-width:360px){
     section.profile .profile-wrapper .profile-text h1{
          font-size: 20px;
          font-weight: 600;
     }
     section.profile .profile-wrapper .profile-text h5{
          font-size: 14px;
     }
     /* section.in-progress .image button{
          padding: 12px 100px;
          margin-left: -20px;
     }
      */
}
@media (max-width:334px){
     section.home nav .nav-wrapper .nav-links .nav-link:nth-child(3) .icon img{
          width: 30px;
          height: 30px;
     }
     section.home .nav-wrapper .logo img{
          width: 80px;
          height: 15px;
     }
     section.profile-main-links .profile-links-wrapper .tab > * + * {
          margin-left: 10px;
     }
     section.profile-main-links .profile-links-wrapper button{
          font-size: 12px;
     }
     section.profile .profile-wrapper .profile-text h1{
          font-size: 18px;
          font-weight: 500;
     }
     section.profile .profile-wrapper .profile-text h5{
          font-size: 12px;
     }
     section.in-progress .image button{
          padding: 12px 70px;
          margin-left: -10px;
     }
     section.in-progress .image .button img{
          right:60px;
          top: -3px;
     }
     section.in-progress .image button a{
          font-size: 12px;
     }
     section.in-progress .image h2{
          font-size: 12px;
          padding: 0 20px;
     }
     section.in-progress .image h3{
          font-size: 11px;
          padding: 0 15px;
     }
     section.in-progress .image{
          margin-left: -30px;
     }
    
}

/* HOME PAGE  - NOT ENROLLED Responsive END  */



/* Instructor-led Responsive */

@media (max-width:1120px) and (min-width:945px) {
     .image.instructor-led .wrapper .flex-wrapper .data-science-img img{
          transform: translateX(0px);
          width: 40px;
          height: 40px;
     }
     .image.instructor-led .wrapper .flex-wrapper .data-science-content h2{
          font-size: 14px;
     }
     .image.instructor-led .wrapper .flex-wrapper .data-science-content{
          margin-left: 20px;
     }
     .image.instructor-led .wrapper .data-science-btn{
          right: 10px;
          width: 20px;
          height: 20px;
     }
     .image.completed .wrapper .flex-wrapper{
          width: 100%;
     }
     section.in-progress .card.completed{
          margin-top: -230px;
     }
    
}

@media (max-width:998px){
     .button.profile{
          display: none;
     }
}

@media (max-width:944px){
     section.in-progress.instructor-led .card{
          visibility: hidden;
          opacity: 0;
          position: absolute;
          transition: all .3s ease-in-out;
          top: 155px;
          left: 100px;
          z-index: 1;
     }
     section.in-progress .card{
          left: 65px;
          margin-top: -135px;
     }
     section.in-progress .card.self-paced{
          top: 445px;
          left: 80px;
     }
     section.in-progress .card.applied{
          top: 85px;
          left: 65px;
     }
     section.in-progress .card.completed{
          top: 380px;
          left: 70px;
     }
     section.in-progress.instructor-led .card.active{
          visibility: visible;
          opacity: 1;
     }
     section.in-progress.instructor-led .card-wrapper .image.active{
          transition: all .3s ease-in-out;
          filter: blur(2px);
     } 
     section.in-progress.instructor-led .image{
          margin-left: 70px;
          margin-top: 50px;
          width: 100%;
          margin-right: 100px;
     }
     section.in-progress.instructor-led .open-popup span{
          border: none;
          outline: none;
          background: #E6EEF9;
          padding: 10px 60px 10px 30px;
          border-radius: 10px;
          text-decoration: none;
          color: #818E9F;
          font-size: 16px;
          font-weight: 500;
     }
     section.in-progress.instructor-led{
          position: relative;
     }
     section.in-progress.instructor-led .open-popup{
          display: flex;
          position: absolute;
          top: 0;
          margin-top: 20px;
     }
     section.in-progress.instructor-led .open-popup img{
          width: 25px;
          position: absolute;
          top: 14px;
          right: 10px;
     }
     section.in-progress.instructor-led .open-popup.active span{
          background: var(--primary);
          color: var(--white);
          transition: all .5s ease-in-out;
     }

     section.in-progress.instructor-led .wrapper {
          width: 100%;
          margin-right: 100px;
     }
     section.in-progress.instructor-led .wrapper .flex-wrapper{
          width: 90%;
          
     }
     section.in-progress .image.instructor-led{
          margin-left: 0px;
     }
     section.in-progress.instructor-led .content .heading-i-icon img{
          display: flex;
     }
     section.in-progress.instructor-led .content p.instructor-led-para{
          display: none;
          color: #8D959F;
     }
     section.in-progress.instructor-led .content p.instructor-led-para.active{
          display: block;
     }
     section.in-progress.applied .content .heading-i-icon img{
          display: none;
     }
     section.in-progress.completed .content .heading-i-icon img{
          display: none;
     }
}

@media (max-width:800px){
     .image.instructor-led .content p{
          display: none;
     }
     .image.instructor-led .wrapper .flex-wrapper{
          width: 90%;
     }
     .image.instructor-led .wrapper .flex-wrapper .data-science-content a > h2{
          font-size: 16px;
     }
     .image.instructor-led .wrapper .flex-wrapper .data-science-content span.status a > span{
          display: none;
     }
}
@media (max-width:650px){
     .image.instructor-led{
          margin-left: 20px;
          margin-right: 80px;
     }
     section.in-progress.instructor-led .card{
          top: 100px;
          left: 80px;
     }
     section.in-progress .card.self-paced{
          top: 425px;
          left: 50px;
     }
     section.in-progress .card.applied{
          top: 85px;
          left: 50px;
     }
     section.in-progress .card.completed{
          top: 380px;
          left: 50px;
     }
}
@media (max-width:540px){
    
}
@media (max-width:500px){
     .image.instructor-led h1{
          font-size: 16px;
     }
     .image.instructor-led .wrapper .data-science-btn{
          display: none;
     }
     .image.instructor-led .wrapper .flex-wrapper .data-science-content{
          margin-left: 0px;
          margin-top: 0px;
          text-align: left;
     }
     /* .image.instructor-led .wrapper .flex-wrapper .data-science-content span.uni-name{
          display: block;
     } */
     .image.instructor-led .wrapper .flex-wrapper .data-science-content h2{
          margin-bottom: 10px;
          font-size: 15px;
          line-height: 2;
     }
     
     .image.instructor-led .wrapper .bar{
          height: 7px;
          width: 100%;  
     }
     .bar span{
          height: 7px;
     }
          
     .image.instructor-led .wrapper .flex-wrapper{
          padding: 0px 40px;
          margin-top: 40px;
          padding-bottom: 30px;
     }
     .image.instructor-led .wrapper .flex-wrapper .data-science-img img{
          margin-left: -20px;
          margin-top: 10px;
     }
     .image.instructor-led .wrapper .flex-wrapper .data-science-content{
          margin-left: 30px;
     }
}

@media (max-width:460px){
     .open-popup span{
          font-size: 14px;
          font-weight: 600;
     }
     .open-popup img{
          top: 11px;
     }
     section.in-progress.instructor-led .image{
          width: 78%;
          
     }
     .image.instructor-led .wrapper{
          width: 40%;
     }
     section.in-progress .card{
          left: 30px;
          margin-top: -20px;
     }
     section.in-progress.instructor-led .card{
          top: 155px;
          left: 40px;
     }
     section.in-progress.instructor-led .card.self-paced{
          top: 445px;
     }
     section.in-progress.instructor-led .card.completed{
          top: 380px;
     }
     section.in-progress.instructor-led .card.applied{
          top: 85px;
}

@media (max-width:440px){
     .image.instructor-led .wrapper .flex-wrapper .data-science-img img{
          width: 32px;
          height: 34px;
          padding: 15px;
          border-radius: 20px;
          margin-top: -20px;
     }
     .image.instructor-led{
          margin-left: 0px;
          margin-right: 110px;
     }
     .image.instructor-led .wrapper .flex-wrapper .data-science-content a > h2{
          font-size: 13px;
     }
     .image.instructor-led .wrapper .flex-wrapper .data-science-content span.uni-name{
          font-size: 10px;
     }
     .image.instructor-led .wrapper .flex-wrapper .data-science-content span.status{
          font-size: 10px;
     }
     .image.instructor-led .wrapper .flex-wrapper .data-science-content span.status a{
          font-size: 10px;
     }
     .image.instructor-led .wrapper .flex-wrapper{
          width: 100%;
          margin-left: -10px;
     }
    
     section.in-progress .image.applied .wrapper .flex-wrapper{
          margin-right: -10px;
     }
    
}

@media (max-width:360px){
     .image.instructor-led h1{
          font-size: 14px;
     }
     .open-popup span{
          padding: 10px 50px 10px 20px;
          font-size: 13px;
          font-weight: 600;
     }
     .open-popup img{
          top: 10px;
     }
     section.in-progress.instructor-led .image{
          width: 78%;
          
     }
     
}
@media (max-width:334px) {
     section.in-progress .image.applied .wrapper .flex-wrapper{
          margin-right: -100px;
     }
     .image.instructor-led .wrapper .flex-wrapper .left{
          flex-direction: column;
          justify-content: left;
     }
     .image.instructor-led .wrapper .flex-wrapper .left .data-science-img img{
          display: none;
     }
     .image.instructor-led .wrapper .flex-wrapper .data-science-content h2{
          padding: 0px;
     }
     .image.instructor-led .wrapper .flex-wrapper .data-science-content{
          margin: 0px;
     } 
 }

}