@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');

:root {
    --color-primary: #35ad53;
    --color-secondary: #6734ee;
    --color-blue: #1f72bd;
    --color-black: #2e2e2e;
    --color-darker: #636363;
    --color-white: #ffffff;
    --color-darkwhite: #fbfbfb;
    --color-danger: #ff0040;
    --color-violet: #800080;
    --color-pink: #DB7093;
    --box-shadow:  0px 6px 20px -3px rgba(0,0,0,0.09);
    --shadow-1: 0px 6px 34px rgba(215, 216, 222, 0.41);
    --shadow-form: 0px 13px 16px 0px rgba(0,0,0,0.20);
    --font-poppins: 'Poppins', sans-serif;
    --primary-opacity: #2f57ef21;
}

* {
    margin: 0;
    padding: 0;
    outline: 0;
    appearance: 0;
    border: 0;
    text-decoration: none;
    box-sizing: border-box;
    list-style: none;
}

body {
    background-color: #fbfbfb !important;
    font-family: var(--font-poppins);
}
@font-face {
    font-family: Glamour;
    src: url(../../fonts/Glamour.otf);
}
a:hover {
    text-decoration: none !important;
}

/* ===============  card css ================ */
.cardmain{
    border: 2px solid #d7d5d5;
    background: #fff;
    border-radius: 10px;
    margin-top: 30px;
}
.cardHeading{
    background: #4f4d4d;
    padding: 12px 20px;
    border-radius: 5px 5px 0 0;
    box-shadow: var(--box-shadow);
    margin: 0 -15px 24px;
}
.cardHeading h6{
    font-family: var(--font-poppins);
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    color: #fff;
}
.cardHeading h6 span{
    color: #e8e970;
}
.boardMain{
    margin-top: 30px;
}
/* ======= navbar ======= */
.bg-mynavbar{
    background: #fff;
    -webkit-box-shadow: 0px 3px 13px 3px rgba(0,0,0,0.12);
    -moz-box-shadow: 0px 3px 13px 3px rgba(0,0,0,0.12);
    box-shadow: 0px 3px 13px 3px rgba(0,0,0,0.12);
}
.bg-mynavbar .navbar-brand{
cursor: pointer;
}
.bg-mynavbar.navbar-dark .navbar-nav .nav-item{
    padding: 0 10px;
}
.bg-mynavbar.navbar-dark .navbar-nav .nav-item.active a{
    color: var(--color-primary);
}
.bg-mynavbar.navbar-dark .navbar-nav .nav-link{
    color: #373737;
    font-family: var(--font-poppins);
    font-weight: 500;
    font-size: 16px;
    display: flex;
    align-items: center;
    transition: 0.5s;
}
.bg-mynavbar.navbar-dark .navbar-nav .nav-link:hover, .bg-mynavbar.navbar-dark  .navbar-nav .nav-link:focus {
    color: rgb(54, 174, 84);
}  
.bg-mynavbar.navbar-dark .navbar-nav .nav-link img{
    height: 16px;
    margin-right: 7px;
}
.bg-mynavbar .navbar-nav{
    margin-left: auto;
    align-items: center;
}
.usericon{
    width: 30px !important;
    height: 30px !important;
    border-radius: 50%;
}
.menuUsername{
    color: #040404;
    font-family: var(--font-poppins);
    font-weight: 400;
    font-size: 16px;
    margin: 0;
    text-align: right;
    line-height: 21px;
}
.menuUsername span{
    color: #4f54ec;
    text-transform: capitalize;
}
.login, .signup{
    padding: 8px 20px;
    color: var(--color-white);
    font-family: var(--font-poppins);
    font-weight: 500;
    font-size: 18px;
    border-radius: 4px;
}
.login{
    background: var(--color-primary);
    margin-right: 25px;
}
.signup{
    background: var(--color-secondary);
}
.navbar-dark .navbar-brand img{
    height: 40px;
}
.dropdownul >ul{
    background: var(--color-black);
}
.dropdownul >ul > li > a{
    font-family: var(--font-poppins);
    font-weight: 500;
    font-size: 15px;
    color: var(--color-white);
}
.lang-btn{
    font-family: var(--font-poppins);
    font-weight: 500;
    font-size: 17px;
    color: #000;
    margin-right: 30px;
}
.lang-btn img{
    width: 25px;
}

/* ==== form ==== */
.loginForm{
    background-color: var(--color-white);
    padding: 25px 35px!important;
    border-radius: 15px;
    -webkit-box-shadow: 0px 3px 13px 3px rgba(0,0,0,0.12);
    -moz-box-shadow: 0px 3px 13px 3px rgba(0,0,0,0.12);
    box-shadow: 0px 3px 13px 3px rgba(0,0,0,0.12);
    width: 70%;
    margin: 0 auto 20px;
}
.loginForm h4{
    color: #444444;
    font-family: var(--font-poppins);
    font-weight: 700;
    font-size: 25px;
    margin: 0 0 40px;
    position: relative;
}
.loginForm h4::before{
    content: '';
    width: 15px;
    height: 3px;
    background: #000000;
    position: absolute;
    bottom: -10px;
    border-radius: 8px;
}
.loginForm h4::after{
    content: '';
    width: 60px;
    height: 3px;
    background: var(--color-secondary);
    position: absolute;
    bottom: -10px;
    left: 20px;
    border-radius: 8px;
}
.formField{
    margin-bottom: 25px;
}
.passwordinput{
    width: 100%;
    position: relative;
}
.passwordinput label{
    position: absolute;
    margin: 0;
    top: 2px;
    right: 2px;
    background: #dfdfdf;
    font-size: 20px;
    padding: 10px 15px;
    cursor: pointer;
    border-radius: 0 3px 3px 0;
}
.passwordinput label input{
    display: none;
}
.formField a h3{
    color: var(--color-blue);
}
.formField h3{
    color: #585858;
    font-family: var(--font-poppins);
    font-weight: 500;
    font-size: 18px;
    margin: 0 0 10px;
}
.formField h3 span.fieldrequired{
    color: red;
}
.formField h5{
    color: #a1a1a1;
    font-family: var(--font-poppins);
    font-weight: 400;
    font-size: 17px;
    margin: 0 0 15px;
}
.formField input, .formField select{
    background: #fdfcfc;
    color: #5e5e5e;
    font-family: var(--font-poppins);
    font-weight: 500;
    font-size: 18px;
    padding: 24px 20px 26px;
    border: 2px solid #b3b3b3;
    border-radius: 7px;
}
.formField textarea{
    width: 100%;
    background: #333;
    background-color: rgb(51, 51, 51);
    margin: 0;
    border-radius: 10px;
    background-color: var(--color-darkwhite);
    border: 2px solid #b3b3b3;
    height: 120px;
    font-family: var(--font-poppins);
    font-size: 21px;
    font-weight: 500;
    color: #333;
    padding: 10px 20px;
}
.vue__time-picker{
    width: 100% !important;
}
.vue__time-picker input.display-time{
    font-size: 18px !important;
    padding: 24px 20px 26px !important;
    border: 2px solid #b3b3b3 !important;
    width: 100% !important;
}
.formField input[type=date]{
    padding: 12px 20px 38px;
}
.rcButton{
    background: #fdfcfc;
    color: #5e5e5e;
    font-family: var(--font-poppins);
    padding: 10px 15px;
    border: 2px solid #b3b3b3;
    border-radius: 7px;
}
.rcButton>div{
    background: #eee;
  padding: 3px 10px;
  border: 1px solid #e3e1e1;
  border-radius: 4px;
  margin: 5px 0;
}
.rcButton label{
    color: #585858;
  font-family: var(--font-poppins);
  font-weight: 500;
  font-size: 17px;
  margin: 0 0 0 5px;
  cursor: pointer;
}
.formField select{
    height: 54px;
    padding: 0 20px;
}
.formField input[type=file]{
    padding: 10px 15px;
    height: 50px;
}
.formField .form-control:focus{
    background: var(--color-white);
    box-shadow: none;
    border: 2px solid #b966e7;
}
.loginForm .submitBtn {
    background: var(--color-primary);
    padding: 9px 25px;
    color: var(--color-white);
    font-family: var(--font-poppins);
    font-weight: 500;
    font-size: 18px;
    border-radius: 4px;
}
.loginForm button[disabled=disabled]{
    opacity: 0.7;
}
.errormessage{
    color: red;
    font-family: var(--font-poppins);
    font-weight: 500;
    font-size: 13px;
}
.banner {
    background-color: var(--color-light);
    padding: 50px 150px;
    padding-bottom: 100px;
    position: relative;
    overflow: hidden;
    background: url('../img/bg-2.png') no-repeat;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
}

.banner::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    background: url('../img/banner-bg-shape.svg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    width: 100%;
    height: 145px;
    z-index: 9;
}
.ctabtn a:hover{
    color: var(--color-white);
}
.bannertext {
    width: 75%;
    text-align: center;
    padding: 0 0 40px;
    margin: 0 auto;
}
.bannerimg {
    width: 40%;
    height: 100%;
}
.bannerimg img{
    width: 100%;
    object-fit: cover;
    height: 100%;
    border-radius: 10px;
}
.bannertext h1{    
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.001);
    font-size: 60px;
    line-height: 77px;
    color: #202020;
    font-weight: 800;
    margin: 0 0 25px;
    font-family: var(--font-poppins);
}
.bannertext h4{
    font-size: 21px;
    color: #202020;
    font-weight: bold;
    margin: 0 0 25px;
    font-family: Glamour;
}
.bannertext p{
    font-size: 20px;
    line-height: 36px;
    font-family: var(--font-poppins);
    color: #6b7385;
}
.bannerwrapper{
    width: 100%;
}
.prevbtn, .nextbtn {
    position: absolute;
    cursor: pointer;
    top: 15rem;
}
.prevbtn span, .nextbtn span {
    font-size: 35px;
    color: #444;
}
.prevbtn{
    left: -100px;
}
.nextbtn {
    right: -100px;
}
.splash-service-main {
    margin-top: 60px;
    border-radius: 10px;
}
.service-wrapper {
    position: relative;
    z-index: 10;
    border-radius: 10px;
    backdrop-filter: blur(15px);
}
.service__style--1 {
    z-index: 2;
    text-align: left;
    padding: 25px 20px 10px;
    position: relative;
    border-right: 1px solid #ffffff1a;
    height: 100%;
    transition: 0.3s;
    background: rgba(39, 0, 255, 0.5);
    border-radius: 15px;
    width: 19%;
}
.service__style--1 .icon {
    margin-bottom: 22px;
    text-align: center;
}
.service__style--1 .icon img {
    width: 75%;
    border-radius: 5px;
    box-shadow: var(--box-shadow);
}
.service__style--1 .content{
    text-align: center;
}
.service__style--1 .content .title {
    color: var(--color-white);
    font-size: 22px;
    font-weight: bold;
    padding: 0 0 10px;
    margin: 0;
    font-family: Glamour;
    line-height: 31px;
}
.service__style--1 .content p {
    color: #ffffffb3;
    font-size: 15px;
    font-weight: 400;
    margin: 0;
    font-family: var(--font-poppins);
}
.service__style--1 a {
    text-decoration: none;
    font-size: 17px;
    font-weight: 500;
    color: var(--color-white);
    font-family: var(--font-poppins);
    display: flex;
    align-items: center;
    gap: 5px;
    transition: 0.5s;
    padding: 5px 0;
    position: relative;
    justify-content: center;
    cursor: pointer;
}
.service__style--1 a:hover{
    color: #34ad54;
}
.service.service__style--1::after {
    content: "";
    width: 80%;
    height: 50%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-darker);
    bottom: 0;
    border-radius: 0;
    filter: blur(10px);
    z-index: -5;
    opacity: 0;
    transition: 0.3s;
}
.service__style--1:hover {
    transform: translateY(-20px) scale(1.03);
    border-color: transparent;
}
.service__style--1:hover::before {
    opacity: 1;
    transform: scale(1);
}
.service__style--1::before {
    content: "";
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: var(--color-darker);
    z-index: -1;
    position: absolute;
    border-radius: 10px;
    opacity: 0;
    transition: 0.3s;
}
.ctabtn{
    display: flex;
    gap: 10px;
    color: var(--color-white);
    justify-content: center;
}
.ctabtn a{
    background: var(--color-primary);
    font-family: Glamour;
    color: var(--color-white);
    padding: 10px 13px;
    font-size: 16px;
    text-decoration: none;
    border-radius: 3px;
    cursor: pointer;
    text-align: center;
}
.ctabtn a:nth-child(2){
    background: var(--color-blue);
}
.ctabtn a:last-child{
    background: var(--color-secondary);
}

.videopoll{
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.video{
    width: 45%;
    background: linear-gradient(to right, #35ad53, #6734ee);
    padding: 10px 10px 5px;
    box-shadow: var(--shadow-form);
}
.video video{
    width: 100%;
}
.poll{
    width: 45%;
    background: linear-gradient(to right, #6734ee, #35ad53);
    padding: 10px 10px 20px;
    box-shadow: var(--shadow-form);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
.poll img{
    width: 100%;
}
.carselboxdesc{
    padding: 0 0 15px;
    text-align: center;
}
.carselboxdesc p{
    color: #fff;
    font-size: 19px;
    line-height: 30px;
    font-family: Glamour;
    margin: 15px 0 10px;
    font-weight: 400;
}
.carselboxdesc h3{
    color: #fff;
    font-size: 26px;
    line-height: 30px;
    margin: 25px 0 25px;
    font-weight: 800;
    font-family: var(--font-poppins);
}
.ideasbtn{
    padding: 7px 15px;
    color: #fff;
    font-family: var(--font-poppins);
    font-weight: 400;
    font-size: 17px;
    border-radius: 4px;
    background: var(--color-blue);
}
.openresourcetoolbar{
    padding: 30px 0 0;
}
.openresourcetoolbar ul{
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0;
    padding: 0;
}
.openresourcetoolbar.videosubtoolbar ul{
    justify-content: center;
}
.openresourcetoolbar ul li{
    padding: 5px 8px;
    color: var(--color-white);
    font-family: var(--font-poppins);
    font-weight: 400;
    font-size: 16px;
    border-radius: 1px;
    background: var(--color-blue);
    cursor: pointer;
    border: 2px solid #065093;
}
.openresourcetoolbar ul li.active{
    background: var(--color-primary);
    border: 2px solid #0d6d35;
}

/* ========== about us ===== */
.thechallenge{
    margin: 50px 0 0;
}
.thechallenge h1{
    font-family: Glamour;
    color: #6734ee;
    padding: 5px 10px;
    font-size: 40px;
    font-weight: bold;
    margin: 0;
}
.thechallenge p{
    font-family: Glamour;
    color: #090909;
    padding: 15px 18px;
    font-size: 20px;
    margin: 0;
    line-height: 32px;
}
.thechallenge .thechallenge-img{
    background: var(--color-white);
    border-radius: 10px;
    padding: 15px;
    box-shadow: var(--shadow-1);
}
.thechallenge img{
    border-radius: 10px;
}
.biosection{
    padding: 30px 0;
}

.testimonailMain{
    padding: 50px 0;
}
.rbt-testimonial-box {
    position: relative;
    z-index: 2;
    border-radius: var(--radius);
}
.rbt-testimonial-box .inner {
    position: relative;
    padding: 25px 20px;
    z-index: 2;
    background: var(--color-white);
    border-radius: 10px;
    box-shadow: var(--shadow-1);
    margin-bottom: 20px;
}
.rbt-testimonial-box .inner::before {
    position: absolute;
    content: "";
    right: 20px;
    top: 15px;
    z-index: -1;
    background-image: url(../img/icon/quote.svg);
    background-repeat: no-repeat, repeat;
    width: 36px;
    height: 32px;
    background-size: 100%;
}
.rbt-testimonial-box .clint-info-wrapper {
    display: flex;
    align-items: center;
}
.rbt-testimonial-box .clint-info-wrapper .thumb {
    position: relative;
    z-index: 1;
    display: inline-block;
    height: 60px;
    padding: 1px;
    background: var(--color-white);
    border-radius: 100%;
    overflow: hidden;
    min-width: 60px;
    border: 2px solid var(--primary-opacity);
}
.rbt-testimonial-box .clint-info-wrapper .thumb img {
    height: 100%;
    object-fit: cover;
    width: 100%;
    border-radius: 100%;
}
.rbt-testimonial-box .clint-info-wrapper .client-info {
    padding-left: 25px;
}
.rbt-testimonial-box .clint-info-wrapper .client-info h5 {
    margin-bottom: 5px;
    font-family: var(--font-poppins);
}
.rbt-testimonial-box .description {
    margin-top: 20px;
    height: 140px;
    overflow: auto;
    padding: 0 10px 0 0;
}
.rbt-testimonial-box .description p {
    margin-bottom: 0;
    font-family: var(--font-poppins);
    color: #6a6a6a;
    font-size: 16px;
}
.rbt-testimonial-box .clint-info-wrapper .client-info span {
    line-height: 28px;
    display: inline-block;
    font-size: 16px;
    color: #6b7385;
    font-family: var(--font-poppins);
}
.loginimg{
    border: 5px solid #fff;
  border-radius: 38px 0 38px 0;
  -webkit-box-shadow: 0px 3px 13px 3px rgba(0,0,0,0.12);
  -moz-box-shadow: 0px 3px 13px 3px rgba(0,0,0,0.12);
  box-shadow: 0px 3px 13px 3px rgba(0,0,0,0.12);
}
/* ========== modal css ==== */
.modalclose{
    position: absolute;
    right: -10px;
    top: -10px;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: #333;
    color: #fff;
    z-index: 22;
}
.vm--modal{
    overflow: visible !important;
    border-radius: 7px !important;
}
/* ========== video ======== */
.videoSecion,
.polls {
    background: var(--color-white);
    padding: 20px;
    border-radius: 15px;
    box-shadow: var(--shadow-1);
}

.videomain {
    padding: 30px 0 90px;
    background: var(--color-white);
}

.pollmain {
    padding: 0 0 90px;
    background: var(--color-white);
}

.polls {
    background: var(--color-white);
}
.polls p{
    font-size: 17px;
    line-height: 30px;
    font-family: Glamour;
    color: var(--color-darker);
    margin: 25px 0 0;
    font-weight: 400;
}
.title h2 {
    font-size: 40px;
    color: #202020;
    font-weight: 700;
    margin: 20px 0 0;
    font-family: var(--font-poppins);
}

.title {
    margin: 0 0 35px;
}

.title h2 span {
    color: var(--color-secondary);
}
.paragraph-text p{
    font-size: 16px;
    color: #202020;
    font-weight: 400;
    margin: 0 0 30px;
    font-family: var(--font-poppins);
    line-height: 25px;
}

.what {
    background: #efefef;
    padding: 60px 0 100px;
}

.whatbox {
    background: rgba(39, 0, 255, 0.5);
    padding: 30px 10px;
    border-radius: 10px;
    text-align: center;
    margin: 15px 0;
    box-shadow: var(--shadow-1);
}

.whatbox img {
    width: 80%;
  border-radius: 10px;
}

.whatbox p {
    font-size: 22px;
    font-weight: 600;
    margin: 10px 0 10px;
    color: #fff;
    font-family: Glamour;
}

.whatbox a {
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    color: #192335;
    font-family: var(--font-poppins);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: 0.5s;
    padding: 5px 0;
    position: relative;
    cursor: pointer;
}

.whatbox a:hover {
    color: var(--color-primary);
}

.whatbox a span {
    transition: 0.5s;
}

.whatbox a:hover span {
    transition: 0.5s;
    margin-left: 10px;
}
.dashboardtitle h2{
    text-align: left;
    margin: 0;
}
.pagelink{
    width: 100%;
    background: #fff;
    border: 2px solid #dfdfdf;
    border-radius: 10px;
    margin-bottom: 25px;
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, .2);
}
.linkcontent{
    width: 22%;
    background: #f5f5f5;
    padding: 20px 10px 15px;
    border-radius: 10px;
    text-align: center;
    border: 2px solid #e4e4e4;
    cursor: pointer;
}
.linkcontent img{
    width: 30px;
}
.linkcontent h4{
    font-size: 15px;
    color: #35ad53;
    font-weight: 600;
    margin: 7px 0 0;
    font-family: var(--font-poppins);
    line-height: 28px;
}
/* ============ WHY CHOOSE US =============== */
.why {
    padding: 40px 0 250px;
    background: var(--color-darkwhite);
}

.row--30 {
    margin-left: -30px;
    margin-right: -30px;
}

.row--30>[class*=col],
.row--30>[class*=col-] {
    padding-left: 30px;
    padding-right: 30px;
}

.pl--50 {
    padding-left: 50px !important;
}

.text-start {
    text-align: left !important;
}

.section-title .subtitle {
    font-size: 14px;
    line-height: 15px;
    font-weight: 500;
    color: #192335;
    margin-bottom: 15px;
    font-family: var(--font-poppins);
    display: inline-block;
    padding: 10px 20px;
    border-radius: 100px;
    text-transform: uppercase;
    display: inline-block;
    background: rgb(219 112 147 / 13%);
    color: rgb(219 112 147) !important;
}

.section-title .title {
    font-size: 30px;
    color: #202020;
    font-weight: 700;
    margin: 0 0 30px;
    line-height: 40px;
    padding: 10px 0 0;
    font-family: var(--font-poppins);
}

.section-title p {
    font-size: 20px;
    line-height: 36px;
    font-family: var(--font-poppins);
    color: #6b7385;
}

.rbt-counterup {
    background: var(--color-white);
    border-radius: 5px;
    text-align: center;
    padding: 30px 30px 50px;
    z-index: 1;
    overflow: hidden;
    position: relative;
    box-shadow: var(--shadow-1);
}

.rbt-hover-03 {
    transition: transform 0.65s cubic-bezier(0.23, 1, 0.32, 1);
}

.rbt-counterup .inner .content h3 {
    font-weight: 700;
    font-size: 50px;
    line-height: 56px;
    position: relative;
    display: inline-block;
    padding: 0 24px;
    margin-bottom: 9px;
    font-family: var(--font-poppins);
}

.rbt-counterup .inner .content .subtitle {
    display: block;
    font-family: var(--font-poppins);
}

.rbt-counterup .inner .icon {
    margin: 0 auto;
    margin-bottom: 20px;
}

.rbt-counterup .inner .icon img {
    max-height: 100px;
}

.rbt-feature {
    display: flex;
}

.rbt-feature+.rbt-feature {
    margin-top: 30px;
}

.rbt-feature .icon {
    width: 50px;
    min-width: 50px;
    height: 50px;
    background: #b966e7;
    display: flex;
    border-radius: 100%;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
}

.bg-primary-opacity {
    background: #2f57ef21 !important;
    color: #2f57ef;
}

.rbt-feature .icon.bg-primary-opacity i {
    color: #2f57ef;
    font-size: 24px;
}

.bg-secondary-opacity {
    background: #b966e721 !important;
    color: #b966e7 !important;
}

.rbt-feature .icon.bg-secondary-opacity i {
    color: #b966e7;
    font-size: 24px;
}

.bg-pink-opacity {
    background: rgb(219 112 147 / 13%) !important;
    color: rgb(219 112 147) !important;
}

.rbt-feature .icon.bg-pink-opacity i {
    color: #db7093;
    font-size: 24px;
}

.rbt-feature .feature-content .feature-title {
    font-weight: 500;
    font-size: 20px;
    line-height: 32px;
    margin-bottom: 0;
    font-family: var(--font-poppins);
}

/* ================ about ================= */
.aboutstyle {
    position: relative;
    z-index: 2;
    padding: 80px 0;
}

.about-wrapper {
    background: var(--color-white);
    border-radius: 10px;
    padding: 15px;
    box-shadow: var(--shadow-1);
}

.theme-shape {
    position: relative;
    z-index: 2;
    overflow: hidden;
}

.align-items-center {
    align-items: center !important;
}
.theme-shape::before {
    position: absolute;
    left: -250px;
    top: 250px;
    right: auto;
    bottom: auto;
    z-index: -1;
    width: 500px;
    height: 500px;
    border-radius: 1000px;
    background-image: linear-gradient(45deg, var(--color-primary), var(--color-secondary));
    opacity: 0.2;
    filter: blur(100px);
    content: "";
}
.theme-shape::after {
    position: absolute;
    z-index: -1;
    width: 500px;
    height: 500px;
    border-radius: 1000px;
    opacity: 0.2;
    filter: blur(100px);
    content: "";
    left: auto;
    top: -250px;
    right: -250px;
    bottom: auto;
    background-image: linear-gradient(45deg, var(--color-violet), var(--color-pink));
}

.about-wrapper .thumbnail img {
    border-radius: 10px;
    width: 100%;
}

.about-wrapper .content .inner {
    padding: 0 40px;
}

.about-wrapper .content .inner .title {
    font-size: 32px;
    margin: 0;
    font-weight: 800;
    line-height: 45px;
    font-family: var(--font-poppins);
}
.biotext p, .biotext ul li{
    margin: 20px 0;
    font-size: 18px;
    line-height: 27px;
    color: #6b7385;
    font-family: var(--font-poppins);
}
.biotext ul li{
    position: relative;
  padding: 0 0 0 15px;
  margin: 10px 0;
}
.biotext ul li::before{
    content: '';
    width: 8px;
    height: 8px;
    background-color: #717171;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 9px;
}
.theme-gradient {
    background: linear-gradient(90deg, #2f57ef, #b966e7);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.001);
}

.about-wrapper .content .inner p {
    margin-bottom: 20px;
    width: 80%;
    font-size: 18px;
    line-height: 27px;
    color: #6b7385;
    font-family: var(--font-poppins);
}

.contact-address {
    padding: 0;
    margin: 0;
    list-style: none;
}

.contact-address li {
    font-size: 15px;
    line-height: 27px;
    color: #6b7385;
    padding: 2px 0;
    font-weight: 500;
    font-family: var(--font-poppins);
    display: flex;
    align-items: center;
    gap: 15px;
}

.row--0>[class*=col] {
    padding-left: 0px;
    padding-right: 0px;
}

.contact-address li span {
    color: #727272;
    width: 15px;
    font-size: 19px;
}


/* =========== why ============= */
.how {
    background: var(--color-darkwhite);
    padding: 60px 0 100px;
}

.how .title {
    padding: 30px 0 45px;
}

.whybox {
    background: #fffccf;
    border-radius: 5px;
    padding: 30px;
    height: 370px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: var(--shadow-1);
}

.whybox2 {
    background: #ffedff;
}

.whybox3 {
    background: #ffe8eb;
}

.whybox4 {
    background: #e9f6ff;
}

.whybox img {
    width: 50px;
}

.whybox h5 {
    font-size: 21px;
    margin: 25px 0 15px;
    font-weight: 700;
    font-family: var(--font-poppins);
    color: #192335;
}

.whybox p {
    margin-bottom: 20px;
    font-size: 17px;
    line-height: 26px;
    color: #6b7385;
    font-family: var(--font-poppins);
}

.whybox a {
    text-decoration: none;
    font-size: 15px;
    line-height: 26px;
    color: #000000;
    font-weight: 500;
    font-family: var(--font-poppins);
}

.addmeetingtoolbar{
    padding: 40px 0 15px;
}
.addmeetingtoolbar button{
    font-size: 17px;
  margin: 0 15px 0 0;
  font-weight: 400;
  font-family: var(--font-poppins);  
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}
/* ========== footer ============ */
footer {
    background: #f3f3f3;
    padding: 60px 0 0;
    font-family: var(--font-poppins);
}

footer ul {
    padding: 0;
    margin: 0;
}

footer ul li {
    list-style: none;
    padding: 5px 0;
}

footer ul li p {
    list-style: none;
    margin: 0;
}

footer ul li p strong {
    font-weight: 500;
    color: #7c7c7c;
}
.footerlogo{
    height: 65px;
}
footer p {
    margin: 5px 0;
    font-size: 16px;
    line-height: 23px;
    color: #6b7385;
    font-family: var(--font-poppins);
}

footer h5 {
    font-size: 18px;
    margin: 0 0 20px;
    font-weight: 600;
    color: #192335;
}

footer li a {
    text-decoration: none;
    font-size: 15px;
    line-height: 26px;
    color: #000;
    cursor: pointer;
    font-weight: 500;
}

.sociallink {
    display: flex;
}

.sociallink li {
    padding: 0 15px 0 0;
}

.sociallink li a {
    font-size: 18px;
}

.copyright {
    padding: 20px 0;
    border-top: 1px solid #efeaea;
    text-align: center;
}

.copyright p {
    margin: 0;
    font-size: 15px;
    line-height: 23px;
    color: #a8aab1;
}

.mt--20 {
    margin-top: 20px !important;
}

.row--0 {
    margin-left: 0px;
    margin-right: 0px;
}

.mt--60 {
    margin-top: 60px !important;
}

.mt--30 {
    margin-top: 30px !important;
}

/* ============= bulletin ======= */
.questionmainhead{
    display: flex;
    justify-content: space-between;
}
.bulletinWrapper{
    background: var(--color-white);
    padding: 8px 15px 10px;
    box-shadow: var(--shadow-form);
    margin: 0 0 10px;
    border-radius: 5px;
    border: 1px solid #eceaea;
}
.bulletinhead{
    display: flex;
    column-gap: 15px;
    align-items: center;
}
.bulletinUserImg{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
}
.bulletinhead img{
    width: 100%;
    object-fit: cover;
    height: 100%;
}
.bulletinhead h4{
    font-family: var(--font-poppins);
    font-size: 17px;
    margin: 0 0 2px;
    font-weight: 500;
    cursor: pointer;
    color: #575757;
}
.bulletinhead p{
    font-family: var(--font-poppins);
    font-size: 15px;
    font-weight: 400;
    color: #979797;
    margin: 0;
}
.bulletinBody{
    background-color: var(--color-darkwhite);
    padding: 2px 13px 5px;
    margin: 10px 0 0;
    border: 1px solid #f3f3f3;
    border-radius: 5px;
}
.bulletinBody p{
    font-family: var(--font-poppins);
    font-size: 19px;
    font-weight: 400;
    color: var(--color-black);
    margin: 0;
    line-height: 27px;
}
.bulletinFooter{
    display: flex;
    justify-content: space-between;
}
.bulletinFooter h6{
    font-family: var(--font-poppins);
    font-size: 15px;
    font-weight: 400;
    color: var(--color-danger);
    margin: 0;
    line-height: 32px;
    cursor: pointer;
}
.viewReply{
    display: flex;
    column-gap: 10px;
    align-items: center;
}
.viewReply p{
    font-family: var(--font-poppins);
    font-size: 15px;
    font-weight: 400;
    color: var(--color-darker);
    margin: 0;
    line-height: 32px;
}
.bulletinFooter button{
    background-color: var(--color-danger);
    color: var(--color-white);
    font-family: var(--font-poppins);
    padding: 7px 15px;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 500;
}
.bulletinFooter button.reply {
    background-color: #b7e3c2;
    padding: 2px 7px;
    font-size: 15px;
    color: #333;
    border: 1px solid #a7bdac;
}
.bulletinFooter button.questiondeletebtn{
    background-color: #f35555;
    padding: 2px 7px;
    font-size: 15px;
    color: #fff;
    border: 1px solid #f58585;
}
.bulletinpost, .addmembergroupform, .replyform{
    background: var(--color-white);
    box-shadow: var(--shadow-form);
    padding: 20px;
    margin: 30px 0 10px;
    border-radius: 10px;
}
.addmembergroupform{
    margin: 20px 0 50px;
}
.replyform{
    margin: 20px 0 70px;
}
.bulletinpost h4, .addmembergroupform h4, .replyform h4{
    font-family: var(--font-poppins);
    font-size: 21px;
    margin: 0 0 20px;
    font-weight: 700;
    color: #333;
}
.bulletinpost textarea, .replyform textarea, .addmembergroupform textarea{
    width: 100%;
    background: #333;
    margin:0;
    border-radius: 10px;
    background-color: var(--color-darkwhite);
    border: 2px solid #b3b3b3;
    height: 120px;
    font-family: var(--font-poppins);
    font-size: 21px;
    font-weight: 500;
    color: #333;
    padding: 10px 20px;
}
.bulletinpost button, .addmembergroupform button, .replyform button{
    font-family: var(--font-poppins);
font-size: 18px;
font-weight: 500;
background: var(--color-primary);
color: var(--color-white);
padding: 9px 25px;
border-radius: 5px;
}
.bulletinpost button[disabled=disabled], .addmembergroupform button[disabled=disabled], .replyform button[disabled=disabled]{
    opacity: 0.7;
}
.customPagination{
    text-align: center;
    margin: 10px 0 30px;
}
.customPagination button{
    font-family: var(--font-poppins);
    font-size: 20px;
    font-weight: 400;
    background: var(--color-primary);
    color: var(--color-white);
    padding: 3px 11px;
    border-radius: 5px;
    margin: 0 10px;
}
.customPagination button[disabled=disabled]{
    opacity: 0.7;
}
.customPagination p{
    font-family: var(--font-poppins);
    font-size: 15px;
    font-weight: 400;
    color: #979797;
    margin: 10px 0 0;
}
.bulletinDetailsWrapper{
    background: var(--color-white);
    padding: 15px 20px 15px;
    box-shadow: var(--shadow-form);
    margin: 30px 0 15px;
    border-radius: 5px;
    border: 1px solid #eceaea;
}
.bulletinDetailsWrapper button{
    padding: 8px 20px;
    color: var(--color-white);
    font-family: var(--font-poppins);
    font-weight: 500;
    font-size: 18px;
    border-radius: 4px;
    background: var(--color-primary);
}
.boardReplyWrapper{
    margin-left: 30px;
}
.boardReply{
    border-bottom: none;
    background: var(--color-white);
    padding: 10px 15px;
    box-shadow: var(--shadow-form);
    margin: 0 0 15px;
    border-radius: 10px;
}
.boardReply p{
    font-family: var(--font-poppins);
    font-size: 18px;
    font-weight: 400;
    color: var(--color-black);
    line-height: 32px;
    background: #f9f9f9;
      background-color: rgb(249, 249, 249);
    background-color: var(--color-darkwhite);
    background-color: var(--color-darkwhite);
    padding: 2px 13px 5px;
    margin: 10px 0 0;
    border: 1px solid #f3f3f3;
    border-radius: 5px;
}
.replyuserDetails{
    display: flex;
    column-gap: 13px;
    align-items: center;
}
.replyusericon{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
}
.replyusericon img{
    width: 100%;
    object-fit: cover;
    height: 100%;
}
.userdetail h4{
    font-family: var(--font-poppins);
    font-size: 16px;
    margin: 0;
    font-weight: 500;
    cursor: pointer;
    color: #404040;
}
.userdetail span {
    font-family: var(--font-poppins);
    font-size: 14px;
    font-weight: 400;
    color: #979797;
    margin: 0;
}
.inboxWrapper{
    background-color: var(--color-white);
}
.inboxWrapper .inboxWrapper{
    background-color: var(--color-white);
}
.inboxcard .row:last-child .boardReply{
    border-bottom: 2px solid #e1e1e1;
}
/* ============= Members ================ */
.memberWrapper{
    background: var(--color-white);
    padding: 30px 15px 5px;
    box-shadow: var(--shadow-form);
    text-align: center;
    position: relative;
    margin-bottom: 30px;
    border-radius: 7px;
    overflow: hidden;
}
.memberWrapper button{
    background: none;
    position: absolute;
    top: 10px;
    right: 15px;
    color: #0c5460;
    font-size: 18px;
}
.memberImg{
    width: 50px;
    height: 50px;
    display: inline-block;
    border-radius: 50%;
    border: 2px solid #ccc;
}
.memberImg img{
    width: 100%;
    object-fit: cover;
    height: 100%;
    border-radius: 100%;
}
.memberWrapper p{
    color: var(--color-black);
    font-family: var(--font-poppins);
    font-weight: 500;
    font-size: 18px;
    margin: 5px 0 3px;
}
.memberancher{    
    margin: 0 -15px -5px;
}
.memberancher p{
    color: var(--color-white);
    font-family: var(--font-poppins);
    font-weight: 500;
    font-size: 16px;
    margin: 0;
    cursor: pointer;
    padding: 5px;
    background: #636363;
}
.memberancher p.memberblock{
    background-color: var(--color-danger);
}
.memberancher p.memberunblock{
    background-color: var(--color-primary);
}
.memberWrapper p.blockedusertext{
    font-size: 14px;
  position: absolute;
  right: 10px;
  top: 0;
  color: red;
  margin: 0;
}
.scoretext{
    font-family: var(--font-poppins);
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 600;
    color: #065093;
}
.emailverified{
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 10px;
    overflow: hidden;
}
.emailverified p{
    color: var(--color-white);
    font-family: var(--font-poppins);
    font-weight: 500;
    font-size: 14px;
    margin: 0;
    padding: 0px 8px;
    background: var(--color-primary);
}
.emailverified p.emailnotverified{
    background: var(--color-danger);
}


/* ============= Edit Profile =========== */
.editProfileWrapper{
    margin: 20px 0 0;
}
.editprofileLeft{
    background: var(--color-white);
    padding: 30px 0 0;
    box-shadow: var(--box-shadow);
    border-radius: 5px;
    border: 2px solid var(--color-darkwhite);
}
.editPhoto{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: relative;
    margin: 0 auto;
}
.editPhoto img{
    width: 100%;
    object-fit: cover;
    height: 100%;
    border-radius: 50%;
}
.editPhotoIcon{
    width: 30px;
    height: 30px;
    position: absolute;
    background: var(--color-primary);
    border-radius: 50%;
    color: var(--color-white);
    font-size: 12px;
    text-align: center;
    line-height: 25px;
    border: 2px solid var(--color-white);
    right: 0;
    top: 68%;
    cursor: pointer;
}
.profileName{
    text-align: center;
    padding: 20px 0;
}
.profileName h4{
    color: var(--color-black);
    font-family: var(--font-poppins);
    font-weight: 600;
    font-size: 19px;
    margin: 0;
}
.profileName p{
    color: #878585;
    font-family: var(--font-poppins);
    font-weight: 500;
    font-size: 13px;
    margin: 0;
}
.profileDetailsBox{
    display: flex;
    justify-content: space-between;
    border-top: 2px solid var(--color-darkwhite);
    padding: 10px 20px;
}
.profileDetailsBox p{
    color: #616060;
    font-family: var(--font-poppins);
    font-weight: 500;
    font-size: 14px;
    margin: 0;
}
.profileDetailsBox span{
    font-family: var(--font-poppins);
    font-weight: 500;
    font-size: 16px;
    margin: 0;
}
.profileDetailsBtn{
    border-top: 2px solid var(--color-darkwhite);
    padding: 0 20px;
}
.ancbox, .linkcopy{
    border: 2px solid #ebe9e9;
    padding: 8px;
    font-family: var(--font-poppins);
    text-align: center;
    border-radius: 3px;
    margin: 20px 0;
    cursor: pointer;
}
.ancbox a{
    font-weight: 500;
    font-size: 17px;
    color: #7b7a7a;
}
.linkcopy{
    display: flex;
    align-items: center;
    padding: 0;
}
.linkcopy p{
    margin: 0;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 85%;
    border-right: 2px solid #ebe9e9;
    font-family: var(--font-poppins);
    font-weight: 500;
    font-size: 13px;
    color: #7b7a7a;
    padding: 8px 10px;
}
.linkcopy i{
    text-align: center;
    width: 15%;
    cursor: pointer;
}
.messageSensSuccessMessage{
    padding: 50px 0;
    text-align: center;
}
.messageSensSuccessMessage h1{
    margin: 0;
    font-family: var(--font-poppins);
    font-weight: 500;
    font-size: 23px;
    color: green;
    padding: 8px 10px;
    text-align: center;
}
.messageSensSuccessMessage button{
    background: #3b58ee;
    margin: 20px 0 0;
    padding: 10px 20px;
    color: var(--color-white);
    font-family: var(--font-poppins);
    font-weight: 400;
    font-size: 15px;
    border-radius: 4px;
}
.editprofiletoolbarbtn{
    border-bottom: 2px solid #c4bfbf;
}
.editprofiletoolbarbtn button{
    border: 2px solid #c4bfbf;
    background-color: transparent;
    font-family: var(--font-poppins);
    font-weight: 500;
    font-size: 20px;
    border-radius: 0;
    padding: 6px 15px;
    color: #919191;
    margin-right: 20px;
    border-bottom: none;
}

/* ============= login ================== */
.loginLeft{
    background: rgb(38,84,239);
    background: linear-gradient(356deg, rgba(38,84,239,1) 0%, rgba(67,110,245,1) 35%, rgba(123,191,245,1) 100%);
    height: 93vh;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0 0 90px 0;
    position: relative;
}
.loginLeft::after{
    content: '';
    width: 100px;
    height: 100px;
    background: url(../img/icon/login-corner.png) no-repeat;
    position: absolute;
    right: -99px;
    top: 0px;
}
.loginLeft img{
    width: 80%;
    padding: 15px;
    background: #ffffff;
}
.loginLeft h1{
    color: var(--color-white);
    font-family: var(--font-poppins);
    font-weight: 600;
    font-size: 40px;
    margin: 0 0 40px;
}
.loginLeft p{
    color: var(--color-white);
    font-family: var(--font-poppins);
    font-weight: 400;
    font-size: 16px;
    line-height: 30px;
}
.loginButton{
    width: 70%;
    margin: 0 auto 60px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.loginButton p{
    color: var(--color-black);
    font-family: var(--font-poppins);
    font-weight: 500;
    font-size: 16px;
    line-height: 30px;
    margin: 0;
}
.loginButton p span{
    color: var(--color-blue);
    cursor: pointer;
}
.loginLogo{
    width: 70%;
    margin: 10vh auto 30px;
    text-align: center;
}
.loginLogo img{
    width: 210px;
    cursor: pointer;
}
.bulletinTextBox{
    width: 100%;
    background: var(--color-white);
    background: var(--color-white);
    box-shadow: var(--shadow-form);
    padding: 35px;
    margin: 40px 0 10px;
    border-radius: 10px;
    margin: 40px 0 10px;
    text-align: center;
}
.bulletinTextBox img{
    width: 35%;
    border-radius: 8px;
}
.bulletinTextBox h3{
    font-family: var(--font-poppins);
    font-size: 30px;
    margin: 35px 0 20px;
    font-weight: 700;
    color: var(--color-secondary);
}
.bulletinTextBox ul li{
    font-family: var(--font-poppins);
    font-size: 17px;
    font-weight: 400;
    color: var(--color-black);
    line-height: 30px;
    margin: 40px 0;
}
.bulletinTextBox p{
    font-family: var(--font-poppins);
    font-size: 17px;
    font-weight: 400;
    color: var(--color-black);
    margin: 0 0 25px;
    line-height: 24px;
}
.bulletinTextBox p span{
    color: var(--color-primary);
    cursor: pointer;
}
.boardFile{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(290px,1fr));
    grid-gap: 20px;
}
.bulletinImage{
    background: #fff url(../img/logo.png) no-repeat;
    background-position-x: 0%;
    background-position-y: 0%;
    background-size: auto;
  background-size: auto 20px;
  background-position: center;
  border-radius: 5px;
  min-height: 200px;
  padding: 10px;
  margin: 20px auto;
  width: 50%;
  -webkit-box-shadow: 0px 4px 10px 1px rgba(0,0,0,0.21);
  -moz-box-shadow: 0px 4px 10px 1px rgba(0,0,0,0.21);
  box-shadow: 0px 4px 10px 1px rgba(0,0,0,0.21);
}
.bulletinImage img{
    width: 100%;
    object-fit: cover;
    height: 100%;
    border-radius: 5px;
}


/* ============= resourceList =========== */
.resourceList{
    background: var(--color-white);
    padding: 15px;
    box-shadow: var(--box-shadow);
    position: relative;
    font-family: var(--font-poppins);
    margin-bottom: 25px;
    border: 2px solid #e6e6e6;
    border-radius: 8px;
}
.resourceHead{
    background: url('../../dashboard/img/book/book-cover.png') no-repeat;
    background-size: auto;
    background-size: 100% 100%;
    height: 260px;
    padding: 15px 25px;
    text-align: center;
    position: relative;
    border-radius: 8px;
}
.resourceList.book .resourceHead{
    background: var(--color-blue);
}
.resourceList.journalArticle .resourceHead{
    background: var(--color-secondary);
}
.resourceList.magazineArticle .resourceHead{
    background: var(--color-primary);
}
.resourceList.videoresource .resourceHead{
    background: #0e9dd5;
}
.resourceHead h1{
    color: var(--color-white);
  margin: 40px 0 15px;
  font-size: 21px;
  font-weight: 500;
  cursor: pointer;
}
.resourceHead h2{
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    background: #fffffff2;
    display: inline-block;
    color: #050505;
    padding: 5px 13px;
    border-radius: 30px;
    cursor: pointer;
}
.authorresources{
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 25px;
    align-items: center;
}
.authorresources p{
    color: var(--color-white);
    font-size: 17px;
    font-weight: 500;
    margin: 0;
}
.authorresources a img{
    width: 20px;
}

.resourceHead h4{
    color: #f54438;
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    position: absolute;
    right: 5px;
    top: 5px;
    font-family: var(--font-poppins);
}
.resourceList h3{
    color: var(--color-darker);
    margin: 0 0 5px;
    font-size: 17px;
    font-weight: 400;
}
.resourceListFooter p{
    color: #595858;
    margin: 10px 0 0;
    font-size: 17px;
    font-weight: 500;
    line-height: 23px;
}
.resourceListFooter a{
    color: var(--color-blue);
    margin: 10px 0;
    font-size: 15px;
    font-weight: 400;
    display: block;
}
.resourceListFooter button.delete{
    background: #f54438;
    color: #fff;
    padding: 2px 8px 3px;
    font-size: 15px;
    font-weight: 500;
    border-radius: 5px;
}
.resourceListFooter button img{
    width: 20px;
}
.resourceListFooter button.approvedbtn{
    background: #248224;
    margin-right: 7px;
    padding: 2px 8px 3px;
    color: #fff;
    font-size: 15px;
    border-radius: 5px;
}
.resourceListFooter button.deletebtn{
    background: #f04334;
    margin-right: 7px;
    padding: 3px 10px;
    color: #fff;
    font-size: 15px;
    border-radius: 5px;
}
.resourceListFooter button.editbtn{
    background: #3788bc;
    margin-right: 7px;
    padding: 3px 10px;
    color: #fff;
    font-size: 15px;
    border-radius: 5px;
}
.successRegister{
    text-align: center;
    padding: 60px 10px 60px;
    background: #fff;
    margin: 5% 0;
    border-radius: 10px;
    box-shadow: var(--shadow-1);
}
.successRegister h1{
    font-family: var(--font-poppins);
    font-size: 30px;
    font-weight: 600;
    color: #36a463;
    margin: 30px 0 0;
}
.successRegister h3{
    font-family: var(--font-poppins);
    font-size: 22px;
    font-weight: 600;
    color: #474747;
    margin: 20px 0 0;
}
.successRegister p{
    font-family: var(--font-poppins);
    font-size: 17px;
    font-weight: 400;
    color: #7e7e7e;
    margin: 10px 0 0;
}
.leftMenu{
    background: #e6e6e6;
    width: 100%;
}
.leftMenu ul{
    margin: 0;
    padding: 10px 15px;
    display: flex;
    justify-content: center;
    gap: 5px;
}
.leftMenu ul li{
    color: var(--color-blue);
    font-family: var(--font-poppins);
    padding: 10px 10px;
    font-size: 15px;
    background: #fff;
    margin: 5px 0;
    cursor: pointer;
    border: 2px solid #d2d2d2;
    font-weight: 600;
    display: flex;
    align-items: center;
    transition: 0.5s;
}
.leftMenu ul li:hover{
    border: 2px solid var(--color-blue);
}
.leftMenu ul li.active{
    background: var(--color-blue);
    color: var(--color-white);
    border: 2px solid #065093;
}
.leftMenu ul li img{
    width: 15px;
    margin: 0 5px 0 0;
}
.resourcecardbtn{
    margin: 10px 0 0;
}
.daily-video{
    border: 2px solid #39a622;
}
/* ============= Group List ============= */
.groupList{
    background: #fff;
    padding: 20px 20px;
    position: relative;
    margin-bottom: 30px;
    border-radius: 6px;
    border: 2px solid #f2f2f2;
    transition: 0.5s;
    cursor: pointer;
}
.groupList:hover{
    box-shadow: var(--box-shadow);
}
.groupList h5{
    font-family: var(--font-poppins);
    margin: 20px 0 15px;
    font-size: 20px;
    font-weight: 500;
    color: #424242;
    cursor: pointer;
}
.groupdetailstoolbar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--color-white);
    box-shadow: var(--shadow-form);
    padding: 15px 20px;
    margin: 30px 0 10px;
    border-radius: 5px;
}
.groupdetailstoolbar h3{
    font-family: var(--font-poppins);
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--color-secondary);
}
.groupdetailstoolbar > div{
    font-size: 18px;
    font-family: var(--font-poppins);
    color: #535252;
    cursor: pointer;
}
.groupdetailstoolbar > div img{
    width: 16px;
    margin-right: 10px;
}
.groupdetailstoolbar button{
    padding: 8px 20px;
    background: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-poppins);
  font-weight: 500;
  font-size: 18px;
  border-radius: 4px;
  transition: 0.5s;;
}
.groupdetailstoolbar button:hover{
    box-shadow: var(--box-shadow);
    background: #31a24d;
}
.grouplistIcon{
    width: 50px;
    height: 50px;
    background: #f0f0f0;
    border-radius: 8px;
    padding: 8px;
}
.grouplistIcon img{
    width: 100%;
}
.groupList button{
    background: none;
    font-family: var(--font-poppins);
    margin: 0;
    font-size: 15px;
    font-weight: 400;
    color: #999797;
}
.groupList button img{
    width: 20px;
}

/* ============= office hour ============ */
.officehourcard{
    background: #fff;
    padding: 13px 15px 15px;
    position: relative;
    margin-bottom: 30px;
    border-radius: 6px;
    border: 2px solid #d3cfcf;
    transition: 0.5s;
    box-shadow: var(--box-shadow);
}
.officehourcard h1{
    font-family: var(--font-poppins);
    margin: 0 0 5px;
    font-size: 22px;
    font-weight: 600;
    color: #5265ce;
}
.officehourdate{
    background: #e3effd;
    padding: 4px 11px;
    border-radius: 15px;
    width: fit-content;
    display: flex;
    align-items: center;
    column-gap: 10px;
    border: 2px solid #d6e3f2;
}
.officehourdate span{
    width: 8px;
    height: 8px;
    background: #90a3f5;
    border-radius: 50%;
}
.officehourdate p{
    font-family: var(--font-poppins);
    margin: 0;
    font-size: 17px;
    font-weight: 500;
    color: #254499; 
}
.officehourcard h5{
    font-family: var(--font-poppins);
    margin: 10px 0 10px;
    font-size: 16px;
    font-weight: 400;
    color: #4e5055;
    height: 73px;
    overflow: hidden;
    line-height: 24px;
}
.officehourcard a{
    font-family: var(--font-poppins);
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    color: var(--color-primary);
}
.officehourcard p{
    font-family: var(--font-poppins);
    margin: 0 0 3px;
    font-size: 16px;
    font-weight: 500;
    color: #848282;
    line-height: 25px;
}
.officehourcardIcon >div> img {
    width: 100%;
}
.officehourcard ul{
    padding: 0px 10px;
    background: #ecf4fe;
    margin: 0;
    border-radius: 7px;
    border: 2px solid #adc8ea;
}
.officehourcard ul li{
    font-family: var(--font-poppins);
    margin: 10px 0;
    font-size: 17px;
    font-weight: 500;
    color: var(--color-primary);
    background: #fff;
    padding: 7px 15px;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
}
.officehourcard ul li span{
    font-family: var(--font-poppins);
    font-size: 17px;
    font-weight: 400;
    color: #353535;
    display: inline-block;
}
.officehourbtn{
    margin: 15px 0 0;
}
.officehourbtn img{
    width: 20px;
}
.officehourbtn .deletebtn, .officehourbtn .upgradebtn, .officehourbtn .opentoall{
    padding: 4px 10px;
    color: var(--color-white);
    font-family: var(--font-poppins);
    font-weight: 500;
    font-size: 17px;
    border-radius: 4px;
    background: var(--color-danger);
}
.officehourbtn .detailsbtn{
    color: var(--color-white);
    font-family: var(--font-poppins);
    font-weight: 500;
    font-size: 17px;
    border-radius: 4px;
    background: var(--color-blue);
    padding: 4px 10px;
}
.officehourbtn .upgradebtn{
    width: 100%;
}
.officehourbtn .opentoall{
    background: #0c790c;
    width: 100%;
}
.officehourbtn h3{
    display: inline-block;
    font-family: var(--font-poppins);
    margin: 0 10px 0 0;
    font-size: 23px;
    position: relative;
    top: 1px;
    font-weight: 600;
}

.calendarday{
    background: #f9f9f9;
    padding: 20px 20px 15px;
    position: relative;
    margin-bottom: 30px;
    border-radius: 6px;
    border: 2px solid #d3cece;
    transition: 0.5s;
    box-shadow: var(--box-shadow);
}
.calendardaybox{
    background: #fff;
    border-radius: 10px;
}
.calendardaybox.isOver .calendaryear{
    background: #888;
}
.calendardaybox.isOver .calendarMonth{
    background: #ccc;
}
.calendarday h2{
    font-family: var(--font-poppins);
    margin: 0 0 15px;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    color: var(--color-blue);
}
.calendarMonth{
    margin: 0 0 15px;
    background: #fff;
    width: 100%;
    border-radius: 20px;
    border: 3px solid #444645;
    overflow: hidden;
    text-align: center;
    box-shadow: var(--box-shadow);
}
.calendarMonth.active{
    background: #4ea464;
}
.calendarMonth.active h2, .calendarMonth.active h5{
    color: #fff;
}
.calendaryear{
    background: var(--color-secondary);
    padding: 10px 0;
    border-bottom: 3px solid #444645;
}
.calendarMonth h3{
    font-family: var(--font-poppins);
    margin: 0;
    font-size: 26px;
    font-weight: 600;
    color: var(--color-white);
}
.calendarMonth h4{
    font-family: var(--font-poppins);
    margin: 5px 0 0;
    font-size: 22px;
    font-weight: 500;
    color: var(--color-white);
}
.calendardaybox h2{
    font-family: var(--font-poppins);
    margin: 10px 0 0;
    font-size: 70px;
    font-weight: 600;
    color: #444645;
}
.calendarMonth h5{
    font-family: var(--font-poppins);
    font-size: 21px;
    font-weight: 500;
    color: #444645;
    margin: 0 0 25px;
}
.calendardayboxbtn{
    display: flex;
}
.calendardayboxbtn a, .calendardayboxbtn .decline{
    font-family: var(--font-poppins);
    font-size: 16px;
    font-weight: 500;
    color: #fff !important;
    transition: 0.5s;
    background: var(--color-primary);
    width: 100%;
    display: block;
    text-align: center;
    padding: 8px;
    border-radius: 5px;
    cursor: pointer;
}
.calendardayboxbtn .decline{
    background: var(--color-blue);
    margin-left: 10px;
}
.calendardaybox a:hover{
    color: #fff;
    background: #35ad53;
}
.calendardaybox a img{
    width: 15px;
    margin-right: 5px;
}

.meetingtoolbar{
  background: var(--color-white);
  box-shadow: var(--shadow-form);
  margin: 30px 0 10px;
  border-radius: 5px;
}
.meetingtoolbar h3{
    font-family: var(--font-poppins);
    margin: 10px 0 0;
    font-size: 27px;
    font-weight: 600;
    color: var(--color-secondary);
    padding: 0 19px;
}
.meetingbtn{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 2px solid #eeeded;
}
.meetingbtn img{
    width: 16px;
    margin-right: 10px;
}
.meetingbtn div{
    font-size: 18px;
  font-family: var(--font-poppins);
  color: #535252;
  cursor: pointer;
}
  .meetingbtn button{
    padding: 8px 20px;
    background: var(--color-danger);
    color: var(--color-white);
    font-family: var(--font-poppins);
    font-weight: 500;
    font-size: 18px;
    border-radius: 4px;
    transition: 0.5s;
  }
  .meetingtoolbar p {
    color: #555;
    font-family: var(--font-poppins);
    padding: 15px 20px;
    font-size: 18px;
    margin: 5px 0;
  }

  /* ============= calendar design =========== */
  .calendar {
    width: 100%;
    border: 1px solid #ccc;
    font-family: var(--font-poppins);
  }
  
  .header {
    background-color: #f0f0f0;
    padding: 10px;
    text-align: center;
  }
  .header span{
    font-family: var(--font-poppins);
    font-size: 20px;
  }
  
  .days {
    display: flex;
    background-color: #f0f0f0;
  }
  
  .day {
    flex: 1;
    text-align: center;
    padding: 10px;
  }
  
  .dates {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border-top: 1px solid #ccc;
  }
  
  .date {
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding: 10px;
    text-align: center;
    min-height: 120px;
  }
  .date p{
    font-family: var(--font-poppins);
    font-size: 20px;
    font-weight: 500;
    margin: 0;
    text-align: right;
  }

  .date.blank p{
    opacity: 0;
  }
  
  .date:nth-child(7n) {
    border-right: none;
  }
  
  .date.today {
    background-color: #e0e0e0;
  }
  
  .date.event {
    background-color: #b3e5fc;
  }
  
  .date:after {
    content: attr(data-date);
    display: block;
  }
  .attenddot{
    width: 14px;
    height: 14px;
    background: red;
    border-radius: 50%;
    position: absolute;
    top: -6px;
    left: -9px;
  }

  /* ============ flip flop festival == */
  .flipflop h2{
    font-family: var(--font-poppins);
    font-size: 25px;
  font-weight: 600;
  }
  .flipflop h3{
font-family: var(--font-poppins);
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 20px;
  }
  .flipflop h4{
font-family: var(--font-poppins);
  font-size: 19px;
  font-weight: 500;
  margin-bottom: 20px;
  }
  .flipflop p{
    font-family: var(--font-poppins);
    font-size: 16px;
  font-weight: 400;
  }  
  .flipflop a{
font-family: var(--font-poppins);
  font-size: 16px;
  font-weight: 400;
  display: flex;
  gap: 7px;
  }
  /* =========== Chart ================= */
.secondbox{
    display: flex;
    justify-content: space-between;
}
.secondbox .board {
    width: 48%;
}
.board {
    width: 100%;
    margin-bottom: 28px;
    background: #fff;
    padding: 0 0 20px;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, .2);
}
@media (max-width: 576px) {
    .board {
        width: 80%;
        margin: 0 auto;
   }
}
.board .headerModal {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 0 auto;
    padding: 15px 0 15px;
    background: #f5f5f5;
    border-bottom: 2px solid #f2f0f0;
}
 .board .headerModal h1 {
    font-size: 18px;
    color: #35ad53;
    text-align: center;
    font-weight: 700;
    margin: 0;
    font-family: var(--font-poppins);
}
.board h2 {
    font-size: 26px;
    font-weight: 700;
    margin: 24px 0 0;
    font-family: var(--font-poppins);
    color: #35ad53;
    text-align: center;
}
.board .headerModal p {
    font-size: 17px;
    opacity: 0.5;
    color: #202020;
    text-align: center;
    font-weight: 500;
    margin: 0;
    font-family: var(--font-poppins);
}
.board .bodyModal {
    width: 100%;
    margin: 10px 0 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}
@media (max-width: 576px) {
.board .bodyModal:nth-child(3n) {
        display: none;
   }
}
.board .bodyModal .bars {
    display: flex;
    flex-direction: column;
    width: 200%;
    height: 100%;
    align-self: flex-end;
    justify-content: flex-end;
}
@media (max-width: 576px) {
.board .bodyModal .bars:nth-child(10) {
        display: none;
   }
.board .bodyModal .bars:nth-child(9) {
        display: none;
   }
}
.board .bodyModal .bars .bar {
    width: 125px;
    height: 125px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(40deg, rgba(101, 78, 163, 0.76), rgba(147, 108, 237, 0.5));
    margin: 0 auto;
}
.board .bodyModal .bars .bar .ba {
    width: 100px;
    height: 100px;
    background: #fff;
    transform-origin: bottom center;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.board .bodyModal .bars .bar .ba p{
    color: #0b0000;
    font-family: var(--font-poppins);
    font-weight: 600;
    font-size: 30px;
    line-height: 40px;
    text-align: center;
    display: block;
    width: 100%;
    margin: 0;
}
@keyframes bars {
    0% {
        transform: scaleY(0);
   }
    100% {
        transform: scaleY(1);
   }
}
.board .bodyModal .bars .values {
    height: 15%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}
.board .bodyModal .bars h4 {
    color: #232323;
    font-family: var(--font-poppins);
    font-weight: 600;
    font-size: 17px;
    margin: 10px 0 0;
    line-height: 17px;
    text-align: center;
}
.board .bodyModal .bars .values span {
    font-size: 13px;
    color: #232323;
    opacity: 0.5;
    font-family: var(--font-poppins);
    font-weight: 500;
    margin: 0;
}
@keyframes top {
    0% {
        opacity: 0;
        bottom: -80px;
   }
    100% {
        opacity: 1;
        bottom: 0px;
   }
}
@keyframes icon {
    0% {
        opacity: 0;
        transform: scale(0);
   }
    50% {
        opacity: 1;
        transform: scale(1.3) rotate(-2deg);
   }
    100% {
        opacity: 1;
        bottom: 0px;
   }
}

/* ============= Calenar ================ */
.calendarbox{
    border: 1px solid #eaeaea;
    background: #eee;
    margin: 15px 0;
}
.calendarboxhead{
    padding: 5px 13px 0px;
    border-bottom: 1px solid #eaeaea;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.calendarboxhead h3{
    font-family: var(--font-poppins);
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    color: #323232;
}
.calendarboxhead h4{
    font-family: var(--font-poppins);
    margin: 5px 0 5px;
    font-size: 18px;
    font-weight: 600;
    color: var(--color-primary);
}
.calendarboxhead h5{
    font-family: var(--font-poppins);
    margin: 0;
    font-size: 30px;
    font-weight: 700;
    color: #6734ee;
}
.calendarbody{
    height: 80px;
    background: #fff;
    padding: 0 5px;
    overflow-y: scroll;
}
.calendarevent{
    background: #e6e6e6;
    margin: 5px 0;
    border-radius: 4px;
    padding: 1px 5px 5px;
    border: 1px solid #ddd;
    color: #fff;
    font-family: var(--font-poppins);
    position: relative;
}
.calendarevent h4, .calendarevent a{
    font-family: var(--font-poppins);
    margin: 0;
    font-size: 15px;
    font-weight: 400;
    color: #fff;
    cursor: pointer;
    text-align: left;
    display: block;
}
.calendarevent a:hover{
    color: #fff;
}
.calendarevent.attended{
    background: green;
    border: 1px solid #0c790c;
}
.calendarevent.attended h4{
    color: #fff;
}
.calendarevent.office-hour{
    background-color: var(--color-blue);
    border: 1px solid #1f72bd;
}
.calendarevent.learning-group{
    background-color: var(--color-primary);
    border: 1px solid #35ad53;
}
.calendarevent.other{
    background-color: var(--color-secondary);
    border: 1px solid #6734ee;
}

.officehourcard.office-hour{
    background-color: #cee8ff;
    border: 1px solid #cee8ff;
}
.officehourcard.learning-group{
    background-color: var(--color-primary);
    border: 1px solid #49cc6a;
}
.officehourcard.learning-group h1, .officehourcard.learning-group h5 {
    color: #fff;
}
.officehourcard.other{
    background-color: #ede8f9;
    border: 1px solid #ccbafc;
}

.questionpopup{
    text-align: center;
    padding: 20px 20px 50px;
}
.questionpopup p{
    font-family: var(--font-poppins);
    font-size: 23px;
    font-weight: 500;
    text-align: center;
    margin: 30px 0 30px;
}
.questionpopup button{
    padding: 8px 20px;
  color: var(--color-white);
  font-family: var(--font-poppins);
  font-weight: 500;
  font-size: 18px;
  border-radius: 4px;
  background: var(--color-primary);
}
/* ============= feedback =============== */
.feedbacklist{
    background: #fff;
    padding: 13px 15px 15px;
    position: relative;
    margin-bottom: 30px;
    border-radius: 6px;
    border: 2px solid #d3cfcf;
    transition: 0.5s;
    box-shadow: var(--box-shadow);
}
.feedbackuser{
    display: flex;
    align-items: center;
    padding: 0 0 10px;
    border-bottom: 1px solid #f4f3f3;
}
.feedbackuser img{
    width: 25px;
}
.feedbackuser h2{
    font-family: var(--font-poppins);
    margin: 0;
    font-size: 17px;
    font-weight: 500;
    color: #6c6c6c;
}
.ratingstar{
    font-size: 13px;
    color: #ffb300;
    padding: 0 0 0 10px;
}
.feedbackuser img{
    width: 40px !important;
    height: 40px !important;
    border-radius: 50%;
}
.feedbacklist h3{
    font-family: var(--font-poppins);
    margin: 10px 0 0 0;
    font-size: 18px;
    font-weight: 400;
    color: #403f3f;
}

.feedbackadmin{
    background: #f0f0f0;
    padding: 15px;
    margin-top: 25px;
    border-radius: 10px;
}
.feedbackadmin p{
    font-size: 15px;
    font-family: var(--font-poppins);
    margin: 0 0 5px;
}
.feedbackadmin p strong{
    font-size: 15px;
    font-weight: 500;
    color: #757474;
}
.mainreview{
    display: flex;
    gap: 90px;
    align-items: center;
    padding: 20px 50px;
    background: #ececec;
    border: 2px solid #ccc;
    border-radius: 13px;
    margin-top: 30px;
}
.mainreview h2{
    font-size: 50px;
    font-family: var(--font-poppins);
    margin: 0 0 5px;
    font-weight: 600;
    text-align: center;
}
.mainreview h2 span{
    font-size: 18px;
    display: block;
    font-weight: 500;
}
.mainreview p span{
    width: 25px;
    display: inline-block;
    text-align: center;
    color: #333;
    font-weight: 600;
    font-size: 19px;
}
.mainreview p{
    font-size: 15px;
    font-family: var(--font-poppins);
    margin: 0;
    font-weight: 400;
    text-align: left;
    color: #ffb300;
    display: flex;
    align-items: center;
}

/* ============= Session Details ======== */
.sessiondetailbox{
    background: #fff;
    margin: 40px 0 10px;
    border: 1px solid #f0f0f0;
    padding: 30px;
    box-shadow: var(--shadow-form);
    border-radius: 5px;
}
.sessiondetailbox h1{
    font-family: var(--font-poppins);
    font-weight: 500;
    font-size: 35px;
}
.sessiondetailbox h2{
    font-family: var(--font-poppins);
    font-weight: 300;
    font-size: 22px;
    line-height: 33px;
    margin: 0 0 50px;
}
.sessiondetail{
    display: flex;
    gap: 40px;
    align-items: center;
}
.sessiondetailtime{
    background: #040404;
    width: 200px;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid #000;
    text-align: center;
}
.sessiondetailtime.other{
    background: #229C5D;
}
.sessiondetailtime h3{
    font-family: var(--font-poppins);
    font-weight: 500;
    font-size: 19px;
    line-height: 33px;
    color: #fff;
    margin: 0;
}
.sessiondetailtime h4{
    font-family: var(--font-poppins);
    font-weight: 300;
    font-size: 21px;
    line-height: 33px;
    color: #fff;
    margin: 0;
}
.sessiondetailtime h5{
    font-family: var(--font-poppins);
    font-weight: 600;
    font-size: 50px;
    line-height: 33px;
    color: #fff;
    margin: 23px 0 15px;
}
.sessiondetailtime h6{
    font-family: var(--font-poppins);
    font-weight: 500;
    font-size: 22px;
    line-height: 33px;
    color: #fff;
}
.sessiondetailtimehead{
    padding: 10px;
}
.sessiondetailtimehead.office-hour{
    background-color: var(--color-blue);
    border: 1px solid #1f72bd;
}
.sessiondetailtimehead.learning-group{
    background-color: var(--color-primary);
    border: 1px solid #35ad53;
}
.sessiondetailtimehead.other{
    background-color: var(--color-secondary);
    border: 1px solid #6734ee;
}
.sessiondetail p{
    font-family: var(--font-poppins);
    font-weight: 500;
    font-size: 22px;
    line-height: 33px;
    color: #22619C;
    margin: 10px 0;
}
.sessiondetail p span{
    color: #000;
}
.sessionmatter{
    min-width: 50%;
}
.resourceList h4{
    font-size: 14px;
    margin: 5px 0 0;
    position: absolute;
    top: -19px;
    background: red;
    color: #fff;
    padding: 2px 10px;
    border-radius: 10px;
}
.resourceList h5{
    font-size: 14px;
    margin: 5px 0 0;
    position: absolute;
    top: -17px;
    background: #248224;
    color: #fff;
    padding: 1px 7px;
    border-radius: 10px;
    right: 10px;
}
.resourceList h5.membervideos{
    background: #3788bc;
}
/* =================== score =============== */
.scorecard{
    background: #f7f7f7;
    padding: 10px 15px;
    margin-bottom: 20px;
    border: 2px solid #f3f3f3;
    border-radius: 10px;
    position: relative;
}
.scorecardhead{
    display: flex;
    justify-content: space-between;
}
.scorecardhead h5{
    font-family: var(--font-poppins);
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #35ad53;
}
.completed .scorecardhead h5{
    color: #f00;
}
.scorecard.professional h4{
    background: var(--color-secondary);
}
.scorecard.personal h4{
    background: var(--color-primary);
}
.scorecard.completed h4{
    background: #777;
}
.scorecard.completed{
    background: #dfdfdf;
}
.scorecard h2{
    font-family: var(--font-poppins);
    margin: 5px 0 0;
    font-size: 18px;
    font-weight: 500;
    color: #404040;
    text-align: center;
}
.scorecard p{
    font-family: var(--font-poppins);
    margin: 0px 0 10px;
    font-size: 15px;
    font-weight: 400;
    color: #666;
    overflow: hidden;
    line-height: 19px;
    text-align: center;
    padding: 5px 0;
}
.scorecard ul{
    padding: 0px 10px;
    background: #ecf4fe;
    margin: 0;
    border-radius: 7px;
    border: 2px solid #adc8ea;
}
.scorecard ul li{
    font-family: var(--font-poppins);
    margin: 10px 0;
    font-size: 16px;
    font-weight: 500;
    background: #fff;
    padding: 7px 15px;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    color: #494848;
}
.scorecard ul li strong{
    font-weight: 600;
    font-size: 16px;
    color: var(--color-primary);
}
.scorecard.professional ul li strong{
    color: var(--color-secondary);
}
.scorecard button{
    padding: 2px 8px;
    font-family: var(--font-poppins);
    font-size: 15px;
    border-radius: 4px;
    margin: 10px 0 0px;
    font-weight: 500;
}
.scorecard button.addscorebtn{
    background: var(--color-primary);
  color: #fff;
}
.scorecard button.viewscorebtn{
    background: var(--color-blue);
  color: #fff;
}
.scorecard button.closebtn{
    background: #f00;
  color: #fff;
}
.scorecard h4{
    font-size: 14px;
    color: #fff;
    padding: 3px 10px;
    border-radius: 10px;
    font-family: var(--font-poppins);
    border: 1px transparent;
    font-weight: 500;
}
.goalnodata{
    width: 100%;
    background: #fff;
    border: 2px solid #dfdfdf;
    border-radius: 10px;
    margin-bottom: 25px;
    padding: 20px;
    text-align: center;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, .2);
}
.goalnodata img{
    width: 40%;
}
.goalnodata h1{
    font-family: var(--font-poppins);
    font-size: 22px;
    margin: 25px 0 12px;
    color: #333;
}
.goalnodata button{
    padding: 3px 7px;
    color: var(--color-white);
    font-family: var(--font-poppins);
    font-weight: 400;
    font-size: 15px;
    background: var(--color-blue);
    border: 1px solid #065093;
    border-radius: 3px;
}

.scoreviewdetails{
    width: 100%;
    background: #fff;
    border: 2px solid #dfdfdf;
    border-radius: 10px;
    margin: 25px 0;
    padding: 20px;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, .2);
}
.scoreviewdetails h2{
    font-family: var(--font-poppins);
    font-weight: 600;
    font-size: 30px;
}
.scoreviewdetails h5{
    font-family: var(--font-poppins);
    font-weight: 400;
    font-size: 18px;
    color: #414141;
    margin: 15px 0;
}
.scoreviewdetails table{
    width: 100%;
    font-family: var(--font-poppins);
    font-weight: 400;
    font-size: 16px;
    color: #414141;
    margin: 10px 0;
}
.scoreviewdetails table th{
    font-size: 16px;
  font-weight: 600;
  color: #525252;
  width: 50%;
}
.scoreslink{
    display: flex;
    margin: 25px 0 5px;
    gap: 40px;
}
.scoreslink a{
    display: flex;
    text-align: center;
    flex-direction: column;
    background: #eaeaea;
    padding: 15px 20px 10px;
    border-radius: 7px;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, .1);
    border: 1px solid #d9d6d6;
}
.scoreslink a span{
    display: block;
    font-family: var(--font-poppins);
    font-weight: 500;
    font-size: 15px;
    color: #333;
    margin: 7px 0 0;
}
.scoreslink a img{
    width: 25px;
    margin: 0 auto;
}
.scorestitle{
    font-family: var(--font-poppins);
    font-weight: 600;
    font-size: 25px;
    color: #4f54ec;
}
.scoresbox{
    width: 100%;
    background: #fff;
    border: 1px solid #ededed;
    border-radius: 10px;
    margin: 10px 0 10px;
    padding: 10px 20px 15px;
}
.scoresbox table{
    width: 100%;
    font-family: var(--font-poppins);
    font-weight: 400;
    font-size: 17px;
    color: #414141;
}
.scoresbox table th{
    font-size: 15px;
  font-weight: 600;
  color: #525252;
}
.scoresbox .scoreslink{
    margin: 0;
}
.scoresbox .scoreslink a{
    display: block;
    padding: 2px 10px 8px;
    margin: 16px 0 0;
}
.scoresbox .scoreslink a span{
    display: inline-block;
}
/* ========== quartely stats =========== */
.quarterscorecard{
    background: #f5f5f5;
  padding: 10px 15px;
  margin-bottom: 20px;
  border: 2px solid #e4e4e4;
  border-radius: 10px;
}
.quarterscorecard h2{
    font-family: var(--font-poppins);
    margin: 0 0 5px;
    font-size: 17px;
    font-weight: 600;
    color: #000;
}
.quarterscorecard p{
    font-family: var(--font-poppins);
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 600;
    color: #065093;
}
.quarterscorecard h3{
    font-family: var(--font-poppins);
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 600;
    color: #4f54ec;
}
.quarterscorecard ul{
    padding: 8px 10px;
    background: #fff;
    margin: 3px 0;
    border-radius: 7px;
    border: 2px solid #d6d9dd;
}
.quarterscorecard ul li{
    font-family: var(--font-poppins);
    font-size: 16px;
    font-weight: 500;
    padding: 2px 0px;
    border-radius: 5px;
    color: #494848;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
}
.quarterscorecard ul li strong{
    font-weight: 500;
    font-size: 15px;
    color: #22619C;
    display: inline-block;
}
.quarterscorecard ul li span{
    display: inline-block;
    font-size: 16px;
    margin-left: 10px;
    color: #35ad53;
}
.user-image{
    background: #f5f5f5;
    padding: 5px 5px;
    margin-bottom: 20px;
    border: 2px solid #e4e4e4;
    border-radius: 10px;
}
.user-image img{
    width: 100%;
    border-radius: 7px;
}
.userdetails{
    background: #f5f5f5;
  padding: 10px 15px;
  margin-bottom: 20px;
  border: 2px solid #e4e4e4;
  border-radius: 10px;
}
.userdetails h4{
    font-family: var(--font-poppins);
    margin: 0 0 4px;
    font-size: 28px;
    font-weight: 600;
    color: #040404;
}
.userdetailsmain{
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
}
.userdetailsbox{
    background: #fff;
    border: 1px solid #ececec;
    margin: 0.6%;
    padding: 5px 5px;
    width: 32%;
}
.userdetailsbox h6{
    font-family: var(--font-poppins);
    margin: 0 0 2px;
    font-size: 17px;
    font-weight: 600;
    color: #4f54ec;
    text-align: center;
}
.userdetailsbox p{
    font-weight: 600;
    font-size: 16px;
    color: #22619C;
    text-align: center;
    margin: 0;
}
.userdetails .memberancher{
    margin: 10px 0;
}
.memberancher button{
    font-family: var(--font-poppins);
    font-size: 15px;
    font-weight: 500;
    margin-right: 5px;
    padding: 4px 10px;
}

.chartmain, .progressstatement{
    width: 100%;
    background: #fff;
    border: 2px solid #dfdfdf;
    border-radius: 10px;
    margin-bottom: 25px;
    padding: 20px;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, .2);
}
.progressstatement{
    margin: 30px 0 0;
    border: none;
}
.progressstatement h3{
    font-size: 18px;
    color: #6734ee;
    font-weight: 600;
    margin: 0;
    font-family: var(--font-poppins);
}
.progressstatement p{
    font-size: 17px;
    color: #4c4c4c;
    font-weight: 400;
    margin: 10px 0 20px;
    font-family: var(--font-poppins);
}
.progressstatement button{
    padding: 3px 7px;
    color: var(--color-white);
    font-family: var(--font-poppins);
    font-weight: 400;
    font-size: 15px;
    background: var(--color-blue);
    border: 1px solid #065093;
    border-radius: 3px;
}

.publiccalendarpopupbox{
    padding: 50px 20px;
}
.publiccalendarpopupbox.other{
    background-color: var(--color-secondary); 
}
.publiccalendarpopupbox.learning-group{
    background-color: var(--color-primary);  
}
.publiccalendarpopupbox.office-hour{
    background-color: var(--color-blue); 
}
.publiccalendarpopupbox h2{
    color: var(--color-white);
    font-family: var(--font-poppins);
    font-weight: 600;
    font-size: 25px;
    margin: 0 0 10px;
}
.publiccalendarpopupbox h3{
    color: var(--color-white);
    font-family: var(--font-poppins);
    font-weight: 500;
    font-size: 18px;
    margin: 0;
}
.publiccalendarpopupbox a{
    background: #fff;
    color: #000;
    font-family: var(--font-poppins);
    font-weight: 500;
    font-size: 16px;
    margin: 20px 0 0;
    padding: 6px 15px;
    display: inline-block;
    border-radius: 5px;
    cursor: pointer;
}
.publiccalendarpopupbox p{
    color: var(--color-white);
    font-family: var(--font-poppins);
    font-weight: 400;
    font-size: 17px;
    margin-bottom: 25px;
}
.publiccalendarpopupbox ul li{
    color: var(--color-black);
    font-family: var(--font-poppins);
    font-weight: 400;
    font-size: 17px;
    margin: 10px 0;
    background: #f8f8f8;
    padding: 5px 15px;
    border: 1px solid #f3f3f3;
    border-radius: 4px;
}
.publiccalendarpopupbox ul li span{
    color: #22619C;
    font-weight: 500;
    font-size: 17px;
}
.publicresourcepopupbox{
    text-align: center;
    padding: 30px 15px;
}
.publicresourcepopupbox h2{
    color: var(--color-black);
    font-family: var(--font-poppins);
    font-weight: 500;
    font-size: 25px;
    margin-bottom: 20px;
}

.servicelist{
    background: url('../img/services-bg.jpg') no-repeat;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 10px 0;
  border-radius: 5px;
  padding: 50px 30px;
}
.servicelist h1{
    color: var(--color-white);
    font-family: var(--font-poppins);
    font-weight: 600;
    font-size: 30px;
    margin: 0 0 10px;
}
.servicelist h4{
    color: var(--color-white);
    font-family: var(--font-poppins);
    font-weight: 500;
    font-size: 26px;
    margin: 0;
}
.servicelist p{
    color: var(--color-white);
    font-family: var(--font-poppins);
    font-weight: 400;
    font-size: 22px;
    margin-bottom: 25px;
}
.servicelist h3{
    color: #fff !important;
}

/* =========== breadcrumbs ============== */
.mainbredcrumbs{
    background: #e0edfc;
    margin-top: 20px;
    border-radius: 10px;
    padding: 15px;
    display: flex;
}
.mainbredcrumbs li{
    font-family: var(--font-poppins);
    font-weight: 500;
    font-size: 16px;
    color: #277ced;
    margin: 0 15px;
    position: relative;
    cursor: pointer;
}
.mainbredcrumbs li::after{
    position: absolute;
    content: '>';
    right: -20px;
    top: 1px;
}
.mainbredcrumbs li:last-child{
    color: #333;
    cursor: default;
}
.mainbredcrumbs li:last-child:after{
    content: '';
}

.individual_growth{
    width: 100%;
    background: #fff;
    border: 2px solid #dfdfdf;
    border-radius: 10px;
    margin-bottom: 25px;
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, .2);
    justify-content: space-between;
    align-items: center;
}
.individual_growth_text{
    width: 65%;
}
.individual_growth_image{
    width: 30%;
}
.individual_growth_image img{
    width: 100%;
    border-radius: 10px;
}
.individual_growth_text h2{
    font-size: 24px;
    color: #202020;
    font-weight: 600;
    margin: 0 0 20px;
    font-family: var(--font-poppins);
    line-height: 25px;
}
.individual_growth_text p{
    font-size: 16px;
    color: #646464;
    font-weight: 400;
    margin: 0 0 15px;
    font-family: var(--font-poppins);
    line-height: 24px;
}
.individual_growth_text a{
    font-size: 18px;
    color: #35ad53 !important;
    font-weight: 500;
    font-family: var(--font-poppins);
    display: flex;
    gap: 7px;
    align-items: center;
    cursor: pointer;
}
/* ============= responsive ============= */
@media (max-width: 1399.98px) {}
@media (max-width: 1199.98px) {    
    .bannertext{
        width: 100%;
    }    
    .bannertext h1{
        font-size: 50px;
        line-height: 65px;
    }
}
@media (max-width: 991.98px) {
    .banner{
        padding: 50px 0;
    }
    .service__style--1{
        width: 32%;
    }
    .navbar-dark .navbar-toggler-icon{
        background: url('../img/icon/menu.png')!important;
        background-size: 100% !important;
    }
    .bg-mynavbar .navbar-nav{
        display: block;
        text-align: right;
    }
    .bg-mynavbar .navbar-nav a{
        display: block;
    }
    footer h5{
        margin: 0 0 5px;
    }
    .copyright{
        margin-top: 25px;
    }
    footer p{
        line-height: 10px;
    }
}

@media (max-width: 767.98px) {
    .banner{
        padding: 50px 10px;
    }
    .bannerwrapper{
        flex-wrap: wrap;
        gap: 2rem;
    }
    .bannertext, .bannerimg{
        width: 100%;
        padding: 0 0 40px;
    }
    .bannertext h1{
        font-size: 24px;
        text-align: center;
        margin: 0 0 20px;
        line-height: 35px;
    }
    .ctabtn{
        flex-wrap: wrap;
        justify-content: center;
    }
    .ctabtn a{
        font-size: 14px;
        width: 100%;
    }
    .service__style--1{
        padding: 30px 10px 10px;
        border-right: none;
    }
    .about-wrapper .content .inner {
        padding: 0 10px;
    }
    .loginLeft{
        height: auto;
        padding: 50px 0;
    }
    .loginForm, .loginLogo{
        width: 100%;
        margin: 60px auto 20px;
    }
    .loginButton{
        width: 100%;
    }
    .loginregisterbtn{
        flex-direction: row !important;
        justify-content: flex-end;
    }
    .login, .signup{
        padding: 6px 15px;
        font-weight: 400;
        font-size: 15px;
    }
    .login{
        margin-right: 10px;
    }
    .videopoll{
        flex-wrap: wrap;
    }
    .video, .poll{
        width: 100%;
    }
    .video{
        margin-bottom: 30px;
    }
    .testimonailMain {
        padding: 0 0 50px;
    }
    .what {
        padding: 10px 0 40px;
    }
    .service__style--1{
        width: 48%;
    }
    .mainbredcrumbs{
        flex-wrap: wrap;
    }
    .individual_growth_text, .individual_growth_image{
        width: 100%;
    }
    .orderfirst .individual_growth_image{
        order: 1;
    }
    .orderfirst .individual_growth_text{
        order: 2;
    }
    .individual_growth_text h2{
        font-size: 21px;
        margin: 0 0 10px;
    }
}
@media (max-width: 575.98px) {
    
    .mt_mobile--40 {
        margin-top: 40px !important;
    }
    .loginButton{
        flex-direction: column;
    }
}