*{ 
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-size: 18px;
     font-family: "Poppins", sans-serif;
}
a{
    font-size: 18px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
::-webkit-scrollbar{
    width: 8px;
    background-color: rgb(241, 241, 241);
}
::-webkit-scrollbar-track{
    width: 8px;
    border-radius: 0.2rem;
    background-color: rgb(241, 241, 241);
}
::-webkit-scrollbar-thumb{
    background-color: #A855F7;
    border-radius: 0.2rem;
}
::-webkit-scrollbar-corner {
  background: #f1f1f1;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
button{
    background:  #A855F7 ;
    color: white;
    border: none;
    border-radius: 5rem;
    padding: 10px;
    font-size: 17px;
    cursor: pointer;

}
body{
    background-color: #FFF7F2;
   
}
/* styling header  */
.header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.9);
    position: sticky;
    top: 0;
    width: 100%;
    height: 80px;
    margin-bottom: 3%;
    z-index: 100;
    padding: 20px;
}
.logo{
    display: flex;
    width: 10%;
    gap: 5px;
}
.logo-img{
   width: 100%;
}
.navbar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90%;

}
.navvy{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
    width: 90%;
}
.extra-navbar-href{
        display: flex;
        text-decoration: none!important;
        cursor: pointer;
        justify-content: center;
        align-items: center;
        width: auto;
        height: auto;
        transition: 1s;
        border-radius: 4rem;
    }
.navbar-links{
    padding: 10px;
    text-decoration: none;
    text-transform: capitalize;
    padding: 8px;
    transition: 300ms;
    border-radius: 3rem;
    color: #3b3b3b;
}

.extra-navbar-href:hover{
    border: 3px solid #A855F7 ;
    
}
.navbar-startbutton{
    width: 130px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: 300;
    text-transform: capitalize;
}
/* styling header done */
/* styling hero page */
.hero{
    width: 100%;
    padding: 3% 4%;
    display: flex;
    height: 70vh;
    gap: 20px;
    margin-bottom: 7%;
    justify-content: center;
    align-items: center;
}
.hero-left{
    display: flex;
    flex-direction: column;
    width: 50%;
    gap: 20px;
    justify-content: center;
}
.hero-left-one{
    background-color: #dabff4;
    border: none;
    border-radius: 5rem;
    color: #A855F7;
    font-size: 15px;
    padding: 7px;
    width: 62%;
}
.hero-left-two{
    display: flex;
    flex-direction: column;
}
.hero-left-two-up{
    font-size: 50px;
    font-weight: 700;
    color: #A855F7;
}
.hero-left-two-down{
    font-size: 48px;
    font-weight: 700;
    color: black;
}
.hero-left-four{
    display: flex;
    gap: 20px;
}
.hero-left-three{
    font-size: 15px;
}
.hero-left-four-button1{
    border: none;
    padding: 20px;
    width: 250px;
    font-size: 15px;
    border-radius: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #A855F7;
    transition: 0.5s;
}
.hero-left-four-button1:hover,
.hero-left-four-button2:hover{
    transform: scale(1.02);
}
.hero-left-four-button1 i{
    transition: 0.5s;
}
.hero-left-four-button1:hover i{
    transform: translateX(4px);
}
.hero-left-four-button2{
    border: 3px solid #A855F7;
    background-color: white;
    padding: 20px;
    width: 250px;
    color: #A855F7;
    font-size: 15px;
    border-radius: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 500ms;
}
.hero-left-four-button1 i,
.hero-left-four-button2 i{
    font-size: 30px;
    padding: 0;
    margin: 0;
}
.hero-right{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1%;
    width: 50%;
}
.hero-right-background{
    position: relative;
    display: flex;
    z-index: 0;
    width: 100%;
    height: 62vh;
}
.bounce-ball{
    border-radius: 50%;
    width: 100px;
    position: absolute;
    right: 0;
    top: 0!important;
    animation: bounce 1s infinite alternate ease-in-out; /* Adjust duration and timing function */
}
@keyframes bounce {
    0% {
        transform: translateY(0); /* Starting position at the bottom */
    }
    50% {
        transform: translateY(-25px); /* Adjust for peak bounce height */
    }
    100% {
        transform: translateY(0); /* Return to starting position */
    }
}
.green-ball{
    width: 85px;
    height: 85px;
    background-color: #C3E64D;
    border-radius: 50%;
    display:flex;
    justify-content: center;
    align-items:center ;
    position: absolute;
    bottom: 0;
    left: 0;
}
.blue-ball{
    width: 95%;
    height: 95%;
    border-radius: 50%;
}
.hero-right-main{
    position: absolute!important;
    padding: 8px;
    display: flex;
    flex-direction:column;
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 0 5px #d5baef;
    width: 43%;
    height: 49vh;
    gap: 10px;
    transform: rotate(3deg);
    transition: 0.5s;
}
.hero-right-main:hover{
    transform: rotate(0deg);
}
.hero-right-main-first{
    display: flex;
    justify-content: space-between!important;
    align-items: center!important;
    width: 100%;
    padding: 10px;
}
.hero-right-title{
    font-size: 17px!important;
    font-weight: 700;
    color: black;
}
.hero-right-main-first-avatar{
    width: 50px;
}
.hero-right-main-first-avatar-cont{
    border-radius: 50%;
    padding: 5px;
    font-size: 35px;
    background: linear-gradient(to bottom,  #A855F7,  #EC4899 );
    width: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.courses-done{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 10px;
}
.course-done{
    display: flex;
    flex-direction: column;
    padding: 2px;
    justify-content: center;
    align-items: center;
    width: 49%;
    height: 70px;
    background-color: #FFF7F2;
    border-radius: 0.5rem;
}
.course-done h1{
    background-color: white;
    padding: 10px;
    font-size: 20px;
    border-radius: 50%;
    display: flex;
    text-align: center;
}
.course-done i{
    font-size: 25px!important;
}
.course-done p{
    font-size:14px;
}
.bouncer{
    transform: translateY(-70px);
}
.progress-bar{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 15px;
    background-color: #e5d1f7;
    border-radius: 0.5rem;
    gap: 15px;
}
.progress-titles{
    width: 100%;
    display: flex;
    padding: 1px;
    justify-content: space-between;
    align-items: center;
}
.progress-titles p{
    font-size: 15px;
    color: #A855F7;
}
.the-progress-bar {
    height: 15px;
    /* background-color: #eee;  */
    border: none; 
    width: 100%;
}
.the-progress-bar::-webkit-progress-bar{
          background-color: white;
          border-radius: 0.5rem;

}
.the-progress-bar::-webkit-progress-value{
    border-radius: 0.5rem;
    background-color: #A855F7;
}
/* styling hero page done */
/* styling landing page trustee  */
.landing-trustees{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px;
    margin-bottom: 7%;
    background-color: white;
    gap: 50px;
}
.landing-trustee{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;

}
.landing-trustee-icon{
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    padding: 17px;
    background-color: #A855F7;
    color: white;
}
.landing-trustee-icon i{
    font-size: 40px!important;
}
.landing-trustee-amount{
    font-size: 25px;
    font-weight: 600;
}
.landing-trustee-title{
    font-size: 15px;
}
/* styling landing page trustee done */
/* styling why us  */
.why-us{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 10px;
    margin-bottom: 7%;
}
.why-us-title{
    font-size: 35px;
    font-weight: 600;
}
.why-us-sub-title{
    font-size: 18px;
    width: 75%;
    text-align: center;
    color: rgb(86, 86, 86);
}
.why-us-cards{
    display: flex;
    justify-content:space-between;
    align-items: center;
    padding: 10px;
    margin-top: 40px;
}
.why-us-card{
    display: flex;
    flex-direction: column;
    padding: 2%;
    box-shadow: 0 0 3px #ece2f7;
    height: 270px;
    width: 23%;
    gap: 20px;
    background-color: white;
    border-radius: 1rem;
    transition: 500ms;
}
.why-us-card:hover{
    transform: translateY(-10px);
}
.why-us-card-icon{
    border-radius: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70px!important;
    height: 70px!important;
    padding: 10px;
}
.why-us-card-icon i{
    font-size: 40px;
    color: white;
    font-weight: 400!important;
}
.why-us-card-title{
    font-size: 23px;
}
.why-us-card-details{
    font-size: 15px;
    color: rgb(84, 84, 84);
}
/* styling why us done */
/* styling landing courses  */
.landing-courses-section{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
    margin-bottom: 7%;
    gap: 30px;
}
.landing-course-title-cont{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 15px;
}
.landing-courses-title{
    font-size: 40px;
}
.extra-style-landing-course-title{
    font-size: 40px;
}
.landing-course-subtitle{
    font-size: 18px;
    color: rgb(79, 78, 78);
    width: 75%;
    text-align: center;
}
.landing-courses{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    width: 100%;
    padding: 20px;
    flex-wrap: wrap;
}
.landing-course{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
    border-radius: 1rem;
    box-shadow: 0 0 7px #9d9d9d;
    width: 31.5%;
    height: 250px;
    gap: 10px;
    transition: 500ms;
    cursor: pointer;
}
.landing-course:hover{
    transform: scale(1.1);
}
.landing-course-icon{
    font-size: 50px;
}
.landing-course-title{
    font-size: 23px;
    font-weight: 600;
    text-align: center;
    color: black;
}
.landing-course-details{
    font-size: 15px;
    color: white;
    text-align: center;
    opacity: 0.7;
}
.landing-course-lessons{
    background-color: white;
    border-radius: 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:  5px 15px;
    width: 120px;
}
.landing-course-lessons i{
    font-size: 13px;
}
.landing-course-lessons p{
    font-size: 13px;
}
/* styling landing courses done */
/* styling what parent say  */
.what-parent-section{
    width: 100%;
    padding: 10px;
    margin-bottom: 3%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 50px;
}
.what-parent-title-cont{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
}
.what-parent-title{
    font-size: 35px;
}
.what-parent-subtitle{
    font-size: 18px;
    color: #474646;
}
.what-parent-carousel-cont{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
}
.what-parent-carousel{
    width: 75%;
    height: 250px;
    padding: 10px 40px;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    border-radius: 1rem;
    gap: 30px;
    box-shadow: 0 0 7px #d1d1d2;
}
.landing-what-parent-rating{
    display: flex;
    gap: 10px;
}
.landing-what-parent-rating i{
    font-size: 25px;
    color: gold;
}
.what-parent-carousel-comment{
    color: #3b3b3b;
    text-align: center;
}
.what-parent{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}
.what-parent-description{
    display: flex;
    flex-direction: column;
}
.what-parent-name{
    font-size: 20px ;
}
.what-parent-img{
    width: 65px;
    height: 60px;
    border-radius: 50%;
}
.landing-what-parent-carousel-indicators{
    display: flex;
    justify-content: center;
    align-items: center;
    gap:6px;
    width: 100%!important;
}
.landing-what-parent-carousel-indicator{
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background-color: #bebdbd;
    cursor: pointer;
}
.indi-active{
    background-color: #A855F7;
    width: 18px;
    height: 18px;
}
.lcaro-active{
    display: flex;
}
/* styling what parent say done */
/* styling landing banner */
.landing-banner{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    height: 75vh;
    background-color: #A855F7;
    gap: 30px;
}
.landing-banner-first-text{
    color: white;
    font-size: 45px;
    text-align: center;
}
.landing-banner-second-text{
    color: white;
    width: 50%;
    text-align: center;
}
.landing-banner-button{
    width: 300px;
    height: 100px;
    font-size: 18px;
    font-size: 600;
    color: #A855F7;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 1s;
}
.landing-banner-button:hover{
    transform: scale(1.04);
}

/* styling landing banner done */
/* styling footer  */
.footer{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px 40px 0px 40px;
    background-color: black;
}
.footer-main{
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #A855F7;
    border-bottom: 1px solid #A855F7;
    padding:  50px 0;
    height: 50vh;
    width: 100%;
}
.footer-kimba-details{
    justify-content: left;
    display: flex;
    width: 30%;
    flex-direction: column;
    gap: 20px;
    
}
.footer-motto{
    color: rgb(99, 99, 99);
    font-weight: 520;
    font-size: 15px;
}
.footer-min-sec{
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 23%;
}
.footer-title{
    font-size: 24px;
    color: white;
}
.footer-min-sec-cont{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.footer-list{
    color: rgb(99, 99, 99);
    font-size: 15px;

}
.footer-sub{
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    font-size: 15px;
}
/* styling footer done */
/* styling login/signup */
.login-page{
    background-color: #FFF7F2;
    display: flex;
    /* justify-content: center; */
    align-items: center;
    width: 100%;
}
.firstie{
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}
.first-section-login{
    width: 70%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 15px;
    gap: 20px;
}
.login-logo{
    width: 100%;
}
.login-logo-img{
    width: 120px;
}
.first-section-login-body{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 5px;
    gap: 30px;

}
.welcome-text-login{
    display: flex;

    flex-direction: column;
    width: 100%;
}
.welcome-text-main{
    color: black;
    font-size: 30px;
    text-align: left;
}
.welcome-text-main span{
    color: #A855F7;
    font-size: 30px;
}
.welcome-text-main{
    color: black;
    font-size: 30px;
}
.welcome-text-auxilliary{
    color: black;
    font-size: 15px;
}
.login-parent-benefits-section{
    display: flex;
    flex-direction: column;
    width: 100%;
}

.login-parent-benefits{
    width: 100%;
    padding: 2px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.login-parent-benefit{
    display: flex;
    gap: 15px;
    width: 100%;
}
.login-parent-benefit-bullet{
    color: black;
    font-size: 19px;
}
.login-parent-benefit-text{
    color: black;
    font-size: 15px;
}
.login-ratings-we-have{
    display: flex;

}
.login-ratings-we-have{
    display: flex;
    width: 100%;
    gap: 40px;
}
.login-ratings{
    display: flex;
    flex-direction: column;
}
.login-rating{
    color: #A855F7;
    font-size: 18px;
}
.login-rating-text{
    color: black;
    font-size: 15px;
}
.secondie{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40%;
    flex-direction: column;
    gap: 20px;
}
.second-section-login-page{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 30px;
    background-color: white;
    width: 90%;
    box-shadow: 0 0 8px #e0d0ef;
    border-radius: 1rem;
    gap: 10px;
}
.second-section-login-header{
    width: 100%;
    font-size: 23px;
    color: black;
    text-align: center;
}
.switch-links{
    width: 80%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px;
    background-color: #ede3f6;
    border-radius: 0.5rem;
}
.switch-link-text{
    font-size: 15px;
}
.switch-link{
    text-decoration: none;
    color: black;
    width: 50%;
    padding: 6px;
    text-align: center;
    cursor: pointer;
}
.login-link-active{
    background-color: white;
    border-radius: 0.5rem;
}
.login-form{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding: 15px;
    width: 100%;
    display: none;
    height: 100%;
}
.user-detail{
    display: flex;
    gap: 2px;
    flex-direction: column;
    width: 100%;
    border-radius: 0.5rem;
    padding: 5px 10px;
    background-color: #eae2f1;
}
.login-form-label{
    font-size: 11px;
    font-weight: 500;
    color: black;
}
.parent-login-form-input{
    border: none;
    outline: none;
    background-color: #eae2f1;
    font-size: 12px;
}
.user-detail:focus-within{
    box-shadow: 0 0 8px #d5acf9;
}
.login-extra-login-details{
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}
.remember-me{
    display: flex;
    gap: 5px;
    width: 50%;
    justify-content: center;
    align-items: center;
}
.remember-me-text{
    font-size: 13px;
}
.login-forgot-password{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
}
.login-forgot-password-link{
    font-size: 13px;
    text-align: center;
}
.login-button{
    width: 100%;
    border-radius: 0.5rem;
    font-size: 13px;
    padding: 15px;
    transition: 1s;
}
.login-button:hover{
    transform: scale(1.02);
}
.login-auxilliary{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 5px;
}
.login-auxilliary p{
    font-size: 13px;
}
.login-lines{
    width: 20%;
    height: 1px;
    background-color: black;
}
.login-extra-button{
    width: 90%;
    border-radius: 0.5rem;
    background-color: white;
    border: 3px solid black;
    color: black;
    font-size: 13px;
}
.coming-soon{
    font-size: 17px;
    text-align: center;
}
.form-active{
    display: flex;
}
/* styling login/signup done */
/* styling kids profile creation page  */
.kids-profile-creation-page{
    background: url(../img/kids-profile-background-img.jpg);
    padding: 0;
    margin: 0;
}
.kids-profile-creation-body{
    display: flex;
    padding: 30px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.4);
    gap: 30px;
}
.kids-profile-creation-header-cont{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-items: center;
}
.kids-profile-creation-header-fancy{
    display: flex;
    justify-content: center;
    gap: 5px;
    padding: 10px 30px;
    background-color: #e6ccfe;
    border-radius: 3rem;
    color: #A855F7;
    font-size: 13px;
}
.kids-profile-creation-header{
    font-size: 30px;
}
.kids-profile-creation-sub-header{
    font-size: 15px;
    color: #474646;
}
.kids-profile-creation-form-cont{
    background-color: white;
    padding: 20px;
    border-radius: 1.5rem;
    border: 0.5px solid #fdfbff;
    width: 50%;
}
.kids-profile-creation-form-intro{
    display: flex;
    flex-direction: column;
    gap: 5px;
    justify-content: center;
    align-items: center;
    width: 100%;

}
.kids-profile-creation-form-image-cont{
    width: 120px;
    height: 120px;
    background-color: #A855F7;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    font-size: 90px;

}

.kids-profile-creation-form-intro-first-text{
    font-size: 25px;
}
.kids-profile-creation-form-intro-second-text{
    font-size: 15px;
    color: #474646;
}
.kids-profile-creation-form{
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 30px;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.child-profile-creation-details{
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    justify-content: center;
    align-items: center;

}
.child-profile-creation-details-label{
    font-size: 18px;
    color: #474646;
    font-weight: 500;
    text-align: left;
    width: 85%;
}
.kids-profile-creation-age-range-input{
    padding: 10px;
    width: 85%;
    border-radius: 2rem;
    outline: none;
    border: 3px solid #474646;
    font-size: 15px;
    text-transform: capitalize;

}
.yeye-name-magic{
    text-decoration: capitalize;
}
.kids-profile-creation-age-range-input:focus{
    border: 3px solid #A855F7;
}
.kids-profile-creation-age-ranges{
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    align-items: center;
}
.kids-profile-creation-age-range{
    width: 40%;
    display: flex;
    padding: 10px;
    border: 3px solid #474646;
    height: 100px;
    gap: 20px;
    border-radius: 1rem;
    justify-content: center;
    align-items: center;
    transition: 0.5s;
    cursor: pointer;
}
.kids-profile-creation-age-range:hover{
    border: 3px solid #A855F7;
}
.img-age-range{
    background-color: #A855F7;
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0.5rem;
    height: 50px;
    width: 50px;
    
}
.kids-profile-creation-age-range-hidden-input{
    display: none;
}
.age-ranges-text{
    display: flex;
    flex-direction: column;
}
.age-ranges-first-text{
    font-size: 15px;
    font-weight: 700;
}
.age-ranges-second-text{
    font-size: 15px;
    font-weight: 400;
}
.kids-profile-creation-form-button{
    padding: 20px;
    width: 85%;
    border-radius: 1rem;
    transition: 1s;
}
.kids-profile-creation-form-button:hover{
    transform: scale(1.05);
}
.age-range-active{
    border: 3px solid #A855F7;
}
/* styling kids profile creation page done */

/* styling of main page  */
.main-page{
    background: linear-gradient(to right, #FFF7F2, #f3e1fa);
    padding: 0;
    margin: 0;
    overflow: hidden;
    height: 100vh;
}
.dashboard-cont{
    display: flex;
    width: 100%;
    height: 100vh;
}
.dashboard{
    display: flex;
    width: 100%;
    height: 100vh;
    position: relative;
    z-index: 20;
}
.navbar-menu-section{
    width: 25%;
    display: flex;
    height: 100vh;
    background-color: white;
    justify-content: center;
}
.navbar-menu{
    display: flex;
    flex-direction: column;
    padding: 10px;
    width: 100%!important;
    align-items: center;
    gap: 20px;
}
.navbar-menu-logo{
    width: 150px;
    overflow: hidden;
}
.navbar-menu-logo-img{
    width: 100%;
}
.navbar-menu-items{
    display: flex;
    flex-direction: column;
    width: 90%;
    padding: 20px 5px;
    gap: 15px;
}

.navbar-menu-item{
    width: 100%;
    background-color: white;
    color: rgb(72, 72, 72);
    box-shadow: 0 0 7px #e6daf1;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: 1s;
}
.navbar-menu-item:hover {
    transform: scale(1.05);
}
.navbar-active{
    background-color: #A855F7;
   
}
.navbar-active a{
     color: white!important;
     width: 100%;
     height: 100%;
}
.navbar-menu-item a{
    font-size: 15px;
    text-decoration: none;
    color: #3b3b3b;
    transition: 1s;
    display: flex;
    width: 100%;
    height: 100%;
    padding: 15px 10px;
}
.main-body{
    width: 75%;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 20px;
    gap: 30px;
    overflow: scroll;
    min-height: 100vh;
    justify-content: space-between;
}
.dashboard-welcome-text{
    font-size: 40px;
    text-align: center;
}
.dashboard-profile{
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.dashboard-profile-picture-cont{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background-color: #d8bcf1;
    font-size: 60px;
    padding: 20px!important;

}
.dashboard-profile-text{
    color: #3b3b3b;
    font-size: 20px;
    font-weight: 700;
}

.dashboard-status-section{
    background-color: white;
    padding: 30px;
    width: 100%;
    border-radius: 1rem;
    gap: 40px!important;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.dashboard-status-section-writeup{
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 10px;
}
.dashboard-status-section-writeup-header{
    font-size: 25px;
}
.dashboard-status-section-writeup-text,
.dashboard-status-section-writeup-text-two{
    font-size: 15px;
    color: #474646;
}
.dashboard-status-section-progress-cont{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 10px;
}
.dashboard-progress-bar-writeup{
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.dashboard-progress-bar-write-up1{
    font-size: 15px;
    color: #474646;
}
.dashboard-progress-bar{
    width: 100%;
    height: 30px;
    border: none;
}
.dashboard-progress-bar::-webkit-progress-bar{
    background-color: #f1e8f9;
    padding: 4px;
    border-radius: 2rem;
}
.dashboard-progress-bar::-webkit-progress-value{
    background-color: #A855F7;
    border-radius: 2rem;
}
.dashboard-progress-level{
    font-size: 15px;
    color: #474646;
}
/* styling of main page done */
/* styling hamburger menu */
.hamburger-menu{
    display: flex;
    padding: 10px 20px;
    border-radius: 0.5rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #A855F7;
    cursor: pointer;
    display: none;
}
.hamburger-icon{
    font-size: 70px;
    color: white;
    display: none;
}
.hamburger-icon-active{
    display: flex;
}
/* styling hamburger menu done */
/* styling main hamburger menu */
.main-hamburger-menu{
    padding: 10px 20px;
    border-radius: 0.5rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #A855F7;
    cursor: pointer;
    display: none;
    position: fixed;
}
.main-hamburger-icon{
    font-size: 70px;
    color: white;
    display: none;
}
.main-hamburger-icon-active{
    display: flex;
}
/* styling main hamburger menu done */

/* styling modal  */
/* modal base */
.modals-overlay {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(0,0,0,0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s ease, visibility .28s ease;
    z-index: 9999;
}

/* when visible */
.modals-overlay:not(.modal-inactive) {
  opacity: 1;
  visibility: visible;
}

/* modal card */
.modal {
  background: #fff;
  border-radius: 12px;
  width: min(92%, 520px);
  max-width: 470px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  transform: translateY(8px) scale(.80);
  transition: transform .28s cubic-bezier(.2,.9,.2,1), opacity .28s ease;
  opacity: 0;
  padding: 20px;
}

/* animate into place when overlay visible */
.modals-overlay:not(.modal-inactive) .modal {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.modal-header-cont {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 10px;
    width: 100%;
}
.modal-header {
    font-size:25px; 
    margin:0; 
    width: 95%;
    text-align: center;
}
.modal-cancel {
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
}
.modal-cancel i{
    font-size: 30px;
}
.modal-cancel:hover {
    background: #f2f2f2;
}
.modal-body{
    width: 100%;
}

/* avatar grid */
.the-change-avatar-form {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
    width: 100%;
}
.change-avatar {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 48%;
    gap: 8px;
    padding: 10px;
    border-radius: 10px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease,;
}
.avatar-choice{
    border-color: #EEE;
}
.change-avatar h1 {
    font-size:36px;
    margin:0; 
}
.change-avatar p {
    margin:0; font-size:14px;
    color:#333;
}


.change-avatar:hover {
    transform: translateY(-3px);
    border-color: #EEE;
}

.change-avatar-button {
    margin-top: 14px;
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    background: #A855F7;
    color: white;
    border: none;
}

/* styling modal done */
/* styling courses  */
.courses-cont{
    display: flex;
    width: 100%;
    height: 100vh;
}
.courses-section{
    display: flex;
    flex-direction: column;
    width: 75%;
    overflow-y: scroll;
    padding: 40px;
    gap: 20px;
}
.courses-header{
    font-size: 40px;
    width: 100%;
    text-align: center;
}
.courses{
    display: flex;
    width: 100%;
    gap: 2%;
    flex-wrap: wrap;
}
.course{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 47%;
    padding: 2%;
    margin: 1%;
    border-radius: 1rem;
    gap: 16px;
    transition: 1s;
    cursor: pointer;
}
.course:hover{
    transform: scale(1.04);
}
.course-icon{
    font-size: 50px;
    width: 100%;
    text-align: center;
}
.course-title{
    font-size: 23px;
}
.course-details{
    font-size: 15px;
    color: #474646;
    width: 100%;
    text-align: center;
}
.course-lesson{
    font-size: 15px;
    background: rgba(255, 255, 255, 0.6);
    padding: 10px 20px;
    border-radius: 3rem;
}
.course-button{
    width: 85%;
    padding: 15px;
    background-color: white;
    color: black;
    font-size: 16px;
    font-weight: 600;
    transition: 1s;
    border-radius: 1rem;
}
.course-button:hover{
    transform: scale(1.04);
}
.courses-subtitle{
    font-size: 18px;
    width: 100%;
    text-align: center;
    color: #474646;
}
.course-header-cont{
    display: flex;
    width: 100%;
    flex-direction: column;
}
.course-into-button{
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    height: fit-content;
}
/* styling courses done */
/* styling portfolio */
.portfolios-cont{
    display: flex;
    width: 100%;
    height: 100vh;
}
.portfolio-section{
    display: flex;
    flex-direction: column;
    width: 75%;
    overflow-y: scroll;
    padding: 40px;
    gap: 20px;
}
.portfolio-header-cont{
    display: flex;
    width: 100%;
    flex-direction: column;
}
.portfolio-header{
    font-size: 37px;
    width: 100%;
    text-align: center;
}
.portfolio-subtitle{
    font-size: 18px;
    width: 100%;
    text-align: center;
    color: #474646;
}
.portfolio-cont-title{
    font-size: 25px;
}
.portfolio-cont{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    flex-direction: column;
    gap: 10px;
}
.portfolio-cont-title{
    width: 100%;
    text-align: left;
}
.portfolios{
    display: flex;
    width: 100%;
    gap: 2%;
    flex-wrap: wrap;
}
.portfolio{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 47%;
    padding: 2%;
    margin: 1%;
    border-radius: 1rem;
    gap: 7px;
    transition: 1s;
    cursor: pointer;
}
.portfolio:hover{
    transform: scale(1.04);
}
.portfolio-icon{
    font-size: 35px;
    width: 100%;
    text-align: center;
}
.portfolio-title{
    font-size: 20px;
}
.portfolio-sub-title{
    font-size: 15px;
    color: #474646;
}
.portfolio-details{
    font-size: 15px;
    color: #474646;
    width: 100%;
    text-align: center;
}
.portfolio-button{
    width: 50%;
    padding: 5px 2px;
    border: 1px solid green;
    background-color: inherit;
    color: black;
    font-size: 15px;
    font-weight: 600;
    transition: 1s;
    border-radius: 1rem;
}
.portfolio-button:hover{
    transform: scale(1.04);
    background-color: green;
    color: white;
}

/* styling portfolio done */
/* styling sub-course  */

.course-cont{
    display: flex;
    width: 100%;
    height: 100vh;
}
.course-section{
    display: flex;
    flex-direction: column;
    width: 75%;
    overflow-y: scroll;
    padding: 40px;
    gap: 20px;
}
.individual-course-header-cont{
    display: flex;
    width: 100%;
    flex-direction: column;
}
.individual-course-up-cont{
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 10px;
}
.course-header{
    font-size: 40px;
    width: 100%;
}
.course-subtitle{
    font-size: 18px;
    width: 100%;
    color: #474646;
}
.back-to-courses-href{
    width: fit-content;
    height: fit-content;
    display: flex;
    text-decoration: none;
    cursor: pointer;
    transition: 1s;
}
.back-to-courses-href:hover{
    transform: scale(1.04);
}
.back-to-courses-button{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-size: 15px;
}
.sub-courses{
    display: flex;
    width: 100%;
    gap: 2%;
    flex-wrap: wrap;
}
.individual-sub-course{
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 47%;
    padding: 2%;
    margin: 1%;
    border-radius: 1rem;
    gap: 16px;
    transition: 1s;
    cursor: pointer;
    background-color: #e5d7f2;
}
.individual-sub-course:hover{
    transform: scale(1.04);
}
.sub-course-chapter{
    font-size: 23px;
    width: 100%;
    color:   #A855F7;
}
.sub-course-title{
    font-size: 23px;
}
.sub-course-details{
    font-size: 17px;
    color: #474646;
    width: 100%;
}
.course-extra-details{
    font-size: 15px;
    color: #474646;
    width: 100%;
}
.courses-status{
    display: flex;
    width: fit-content;
    justify-content: center;
    align-items: center;
    gap: 10px;
    color: green;
    font-size: 15px;
}
.sub-course-button{
    width: 85%;
    padding: 15px;
    color: white;
    font-size: 15px;
    font-weight: 600;
    transition: 1s;
}
.course-button:hover{
    transform: scale(1.04);
}
/* styling sub-course done */
/* styling course explanation  */
.main-course-cont{
    display: flex;
    width: 100%;
    height: 100vh;
}
.course-explanation-section{
    display: flex;
    flex-direction: column;
    width: 75%;
    overflow-y: scroll;
    padding: 40px;
    gap: 20px;
}
.course-explanation-header-cont{
    display: flex;
    gap: 20px;
    width: 100%;
    padding: 10px;
    border-bottom: 2px solid #A855F7;
}
.course-explain-parent{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 25%;
    padding: 10px;
    background-color: #A855F7;
    color: white;
    font-size: 25px;
    font-weight: 700;
}
.course-explain-header-details{
    display: flex;
    justify-content: center;
    width: 75%;
    flex-direction: column;
    gap: 10px;
}
.course-explain-chapter{
    font-size: 25px;
}
.course-explain-name{
    font-size: 20px;
}
.course-explain-main-body{
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.course-video-cont{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.course-video{
    width: 100%;
    
    z-index: 55;
}
.start-play-button{
    position: absolute;
    display: flex;
    top: 50;
    left: 50;
    z-index: 85;
    width: 60px;
    border-radius: 50%;
    height: 60px;
    justify-content: center;
    align-items: center;
    padding: 0;
    background: rgb(168,85,247,0.9);
}
.start-play-button i{
    font-size: 40px;
}
.course-explain-subdivision-cont{
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.course-explain-sub-division{
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 20px;
    padding: 20px 0px;
    border-bottom: 1px solid #A855F7;
}
.course-explain-sub-division:last-child{
    border-bottom: none;
}
.course-explain-subdivision-header-cont{
    display: felx;
    flex-direction: column;
    gap: 10px;
}
.course-explain-sub-division-header{
    font-size: 20px;
    width: 100%;
}
.course-explain-sub-division-details{
    width: 100%;
    color: #474646;
    font-size: 15px;
}
.course-explain-sub-division-list-cont{
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}
.course-explain-sub-division-lists-header{
    font-size: 17px;
    font-weight: 700;
    width: 100%;
}
.course-explain-sub-division-lists{
    width: 95%;
    display: flex;
    flex-direction: column;
    margin-left: 5%;
    gap: 10px;
}
.course-explain-sub-division-list{
    font-size: 15px;
    
}
.course-explain-sub-division-conclusion{
    font-size: 15px;
}
.course-explain-buttons-cont{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
}
.course-explain-href-houser{
    text-decoration: none;
    display: flex;
    width: fit-content;
}
.course-explain-button1{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    padding: 13px 20px;
    transition: 500ms;
}
.course-explain-button2{
    background-color: #bdbcbc;
    font-size: 18px;
    color: black;
    padding: 13px 20px;
    transition: 500ms;

}
.course-explain-button1:hover,
.course-explain-button2:hover{
    transform: scale(1.04);
}
.pop-messages-cont {
    width: fit-content;
    background-color: #4BB3FD;
    height: 65px!important;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 10rem;
    overflow: hidden;
    gap: 5px;
    opacity: 0;
    flex-wrap: nowrap;
    flex-shrink: 0!important;
     transition: width 0.6s ease;
}

.pop-up-assistant {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
    background-color: white;
    border-radius: 50%;
    font-size: 20px;
    min-width: 50px;
    min-height: 50px;
    flex-shrink: 0;
}

.pop-up-cancel {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
    font-size: 20px;
    min-width: 50px;
    cursor: pointer;
}

.pop-messaage {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    color: white;
    width: fit-content;
    text-align: center;
    text-wrap: nowrap;
}

/* Show Animation */
.show-pop {
    animation: pop-show 0.8s ease-out forwards;
}

/* Hide Animation */
.pop-hidden {
    animation: pop-hidden 1s ease-in forwards;
}
@keyframes pop-show {
    0% {
    opacity: 0;
    width: 12%;
    }
    50% {
    opacity: 0.5;
    width: 60%;
    }
    100% {
    opacity: 1;
    width: 85%;
    }
}

@keyframes pop-hidden {
    0% {
    opacity: 1;
    width: 85%;
    }
    50% {
    opacity: 1;
    width: 60%;
    }
    100% {
    width: 12%;
    opacity: 1;
    }
}
.pop-up-cancel, 
.pop-messaage {
  transition: opacity 0.3s ease;
}
.pop-hidden .pop-messaage,
.pop-hidden .pop-up-cancel {
    text-wrap: nowrap;
    opacity: 0;
    transition: opacity 0.5s ease;
}
/* styling course explanation done */
/* styling certificate  */
.certificate-cont{
    background: url(../img/certificate_background.jpg);
    width: 1123px;
    height: 794px;
}
/* styling certificate done */
@media screen and (max-width: 1024px){
    .pop-messages-cont{
        width:100%;
    }
    @keyframes pop-show {
        0% {
        opacity: 0;
        width: 12%;
        }
        50% {
        opacity: 0.5;
        width: 60%;
        }
        100% {
        opacity: 1;
        width: 100%;
        }
    }
    
    @keyframes pop-hidden {
        0% {
        opacity: 1;
        width: 100%;
        }
        50% {
        opacity: 1;
        width: 60%;
        }
        100% {
        width: 12%;
        opacity: 1;
        }
    }
    .pop-messaage{
        font-size: 1px!important;
        text-wrap: wrap!important;
    }
    .pop-assistant{
        width: 30px;
        height:30px;
    }
    .hamburger-menu{
        display: flex;
    }
     .header {
        flex-direction: column;
        height: auto;
        padding: 10px;
        gap: 10px;
        width: 100%;
        display: flex;
        justify-content: left;
        align-items: center;
        background-color: rgba(255, 255, 255, 1);
    }
    .logo {
        display: flex;
        width: 100%;
        justify-content: space-between;
        padding: 0px 10px;
    }
    .logo-img {
        width: 120px;
    }
    .navbar {
        flex-direction: column;
        gap: 15px;
        width: 100%;
        justify-content: left;
        display:flex;
    }
    .navvy{
        display: flex;
        justify-content: center;
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }
    .extra-navbar-href{
        display: flex;
        text-decoration: none!important;
        width: 100%!important;
        height: 50px;
        cursor: pointer;
        justify-content: center;
        align-items: center;
    }
    .extra-navbar-href:hover{
        border: none;
    }
    .extra-navbar-href:hover .navbar-links{
        color: white;
    }
    .navbar-links {
        padding: 10px;
        width: 100%;
        height: 100%;
        border-radius: 0rem;
    }
    .navbar-links:hover {
        background-color: #A855F7;
    }
    .navbar-startbutton {
        width: 100%;
        border-radius: 0.5rem;

    }
    .na{
       width: 100%; 
       padding: 5px;
    }
    .hidden{
        display: none;
    }
    .hero {
        flex-direction: column;
        height: auto;
        padding: 20px 5px;
        gap: 15px;
    }
    .hero-left, .hero-right {
        width: 100%;
        padding: 0;
    }
    .hero-left-two-up, .hero-left-two-down {
        font-size: 28px;
    }
    .hero-left-four {
        flex-direction: column;
        gap: 10px;
    }
    .hero-left-four-button1, .hero-left-four-button2 {
        width: 100%;
        padding: 15px;
        font-size: 14px;
    }
    /* .hero-right-background {
        width: 100%;
        height: 250px;
    }
    .hero-right-main {
        width: 100%;
        height: auto;
        min-height: 200px;
        position: static;
        transform: none;
    }
    .courses-done  {
        width: 100%;
        height: auto;
    } */
    .landing-trustees {
        flex-direction: column;
        gap: 20px;
        padding: 10px;
    }
    .why-us-cards {
        flex-direction: column;
        gap: 20px;
        padding: 0;
    }
    .why-us-card {
        width: 95%;
        height: auto;
    }
    .landing-courses {
        flex-direction: column;
        gap: 20px;
        padding: 10px;
    }
    .landing-course {
        width: 95%;
        height: auto;
    }
    .landing-banner {
        padding: 10px;
        height: auto;
        gap: 15px;
    }
    .landing-banner-first-text {
        font-size: 28px;
    }
    .landing-banner-second-text {
        width: 95%;
        font-size: 16px;
    }
    .landing-banner-button {
        width: 90%;
        height: 60px;
        font-size: 16px;
    }
    .footer-main {
        flex-direction: column;
        height: auto;
        gap: 20px;
        padding: 20px 0;
    }
    .footer-kimba-details, .footer-min-sec {
        width: 100%;
    }
    .login-page, .kids-profile-creation-page {
        flex-direction: column;
        align-items: stretch;
    }
    .firstie, .secondie {
        width: 100%;
        min-height: auto;
        padding: 10px 0;
    }
    .first-section-login, .second-section-login-page {
        width: 95%;
        padding: 10px;
    }
    .kids-profile-creation-form-cont {
        width: 95%;
        padding: 10px;
    }
    .kids-profile-creation-form {
        padding: 10px;
    }
    .kids-profile-creation-age-ranges {
        flex-direction: column;
        gap: 10px;
    }
    .kids-profile-creation-age-range {
        width: 95%;
        height: auto;
        gap: 10px;
        padding: 10px;
    }
    .why-us-title{
        display: flex;
        justify-content: center;
        flex-direction: column;
    }
    .hero{
        gap: 20px;
        padding: 20px;
        height: auto;
    }
    .hero-right{
        width: 100vw;
        overflow: hidden!important;
        height: 60vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .hero-right-main{
        width: 90vw;
        height: fit-content;
        overflow: hidden;
        gap: 15px;
    }
    .hero-right-background{
        width: 100vw;
        position: relative;
        height: 100%;
    }
    .bounce-ball{
         animation: bounce none ; 
    }
    .course-done{
        width: 48%;
    }
    .what-parent-carousel{
        width: 100%;
        height: auto;
    }
    .what-parent-carousel-comment{
        font-size: 15px;
    }
    .what-parent-name{
        font-size: 17px;
    }
    .what-parent-child{
        font-size: 14px;
    }
    .what-parent-img{
        width: 50px;
        height: 45px;
    }
    .hero-left-one{
        width: fit-content!important;
    }
    .landing-banner-button{
        width: 100%;
        padding: 10px 20px;
    }
    .firstie{
        display: none;
    }
    .login-page{
        justify-content: center;
        height: 100vh;
        padding: 5px;
    }
    .kids-profile-creation-form-cont{
    width: 110%;
    }
    .navbar-menu-logo{
        overflow: visible;
        height: auto;
    }
    .navvy{
        height: auto;
    }
    .navbar-menu-section{
        display: none;
        width: 100%;
    }
    .now-active{
        display: flex!important;
    }
    .main-page{
        width: 100%;
        overflow-y: visible;
    }
    .dashboard-cont,
    .courses-cont,
    .portfolios-cont,
    .course-cont,
    .main-course-cont {
        flex-direction: column;
        height: auto;
        min-height: 100vh;
    }
    .main-body {
        display: none;
        width: 100%;
        padding: 10px;
        height: auto;
        overflow: visible;
    }
    .dashboard-welcome-text,
    .courses-header,
    .portfolio-header,
    .course-header {
        font-size: 24px;
        text-align: center;
    }
    .dashboard-profile-picture-cont {
        width: 80px;
        height: 80px;
        font-size: 36px;
        padding: 10px !important;
    }
    .dashboard-profile-text {
        font-size: 16px;
    }
    .dashboard-status-section {
        padding: 15px;
        gap: 15px !important;
    }
    .dashboard-status-section-writeup-header {
        font-size: 18px;
    }
    .dashboard-progress-bar {
        height: 18px;
    }
    .dashboard-progress-bar-writeup {
        font-size: 13px;
    }
    .dashboard-progress-level {
        font-size: 13px;
    }
    .courses,
    .portfolios,
    .sub-courses {
        flex-direction: column;
        gap: 10px;
        width: 100%;
    }
    .course,
    .portfolio,
    .individual-sub-course {
        width: 98%;
        margin: 0 0 10px 0;
        padding: 10px;
        gap: 10px;
    }
    .course-title,
    .portfolio-title,
    .sub-course-title {
        font-size: 18px;
    }
    .course-details,
    .portfolio-details,
    .sub-course-details {
        font-size: 13px;
    }
    .course-button,
    .portfolio-button,
    .sub-course-button {
        width: 100%;
        padding: 10px;
        font-size: 14px;
    }
    .course-lesson,
    .portfolio-sub-title,
    .course-extra-details {
        font-size: 13px;
    }
    .navbar-menu-section {
        display: none;
    }
    /* styling hamburger menu */

    .main-hamburger-menu{
        display: flex;
        height: 55px;
        width: 55px;
        border-radius:50%;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: rgb(168,85,247,0.8);
        cursor: pointer;
        position: fixed;
        margin-left: 84%;
        margin-top: 1%;
        
    }
    .main-hamburger-icon{
        color: white;
        display: none;
    }
    .main-hamburger-icon-active{
        display: flex;
        font-size: 100px;
    }
    .main-hamburger-icon-active i{
        font-size: 30px;
    }
    .course-explain-parent{
        font-size: 18px;
        width: 40%;
    }
    .course-explain-button1{
        font-size: 12px;
    }
    .course-explain-button2{
        font-size: 12px;
    }
    .course-explain-buttons-cont{
        gap: 10px;
    }
    .modal-header{
        font-size: 19px;
    }

}