:root {
                      /* color  */
                      --btn-color: #20B486;
                      --banner-btn: #96BB7C;
                      --heder-black: #21212F;
                      --heder-blue: #3461FD;
                      --heder-green: #20B486;
                      --join: #E9F8F3B2;
                      --light-gray: #D9D9D9;
                      --text-color: #252B42;
                      --text-color2: #737373;
                      --pink: #FEF9EC;
                      --pink-light: #FCF1EB;
                      --blue-light: #DBF4F7;
                      --gray: #6D737A;
                      --star: #FFC27A;
                      --gray-2: #484C55;
                      --orange: #FE6100;
                      --green: #007527;
                      --yellow: #FFBE00;
                      --yellow-2: #FFCC00;
                      --black: #000000;
                      --red: #FF1010;
                      --blue: #652ae6;
                      --footer-bg: #8057DB;
                      --white: #FFFFFF;
                      --bg-color: #FBF9F9;
                      --grident: linear-gradient(121deg, rgb(255, 194, 122) 25%, rgb(255, 163, 55) 100%);
                      /* font-size */
                      --font-size150: 150px;
                      --font-size97: 97px;
                      --font-size60: 60px;
                      --font-size50: 50px;
                      --font-size55: 55px;
                      --font-size45: 45px;
                      --font-size32: 32px;
                      --font-size30: 30px;
                      --font-size40: 40px;
                      --font-size26: 26px;
                      --font-size24: 24px;
                      --font-size20: 20px;
                      --font-size18: 18px;
                      --font-size16: 16px;
                      --font-size12: 12px;
                      --font-size14: 14px;
                      --font-size10: 10px;
                      --font-size7: 7px;
                      --font-size8: 8px;
                      /* font-weight */
                      --font-normal: 400;
                      --font-semi-bold: 500;
                      --font-bold: 700;
                      /* font-family */
                      --font-family-Raleway: 'Raleway', sans-serif;
                      --font-family-Montserrat: 'Montserrat', sans-serif;
                      --font-family-Public: 'Public Sans', sans-serif;
                      --font-family-Lora: 'Lora', serif;
                  }
                  /* ====================== Common css end ===================== */
                  /* =========================================home page  start ===========================================  */
                  /* ================== banner section start ==================== */

                  .banner-area {
                      margin-top: 70px;
                      position: relative;
                  }

                  .banner-area .banner-content {
                      padding-top: 50px;
                  }

                  .banner-area .banner-content .online p {
                      color: var(--btn-color);
                      font-family: var(--font-family-Montserrat);
                      font-size: var(--font-size20);
                      font-weight: var(--font-bold);
                      margin-bottom: 30px;
                  }

                  .banner-area .banner-content h1 {
                      font-family: var(--font-family-Raleway);
                      font-weight: var(--font-bold);
                      font-size: var(--font-size60);
                      color: var(--text-color);
                      margin-bottom: 30px;
                      line-height: 80px;
                  }

                  .banner-area .banner-content h4 {
                      color: var(--text-color2);
                      font-family: var(--font-family-Montserrat);
                      font-size: var(--font-size20);
                      font-weight: var(--font-normal);
                      line-height: 30px;
                      letter-spacing: 0.2px;
                  }

                  .banner-area .banner-content .banner-btn {
                      margin-top: 60px;
                  }

                  .banner-area .banner-content .banner-btn .get-btn {
                      margin-right: 10px;
                      background: var(--btn-color);
                      border: 2px solid transparent;
                  }

                  .banner-area .banner-content .banner-btn .get-btn:hover {
                      background: var(--white);
                      border: 2px solid var(--btn-color);
                  }

                  .banner-area .banner-content .banner-btn .learn-btn {
                      margin-right: 10px;
                      background: var(--white);
                      color: var(--btn-color);
                      border: 2px solid var(--btn-color);
                  }

                  .banner-area .banner-content .banner-btn .learn-btn:hover {
                      background: var(--btn-color);
                      color: var(--white);
                  }

                  .banner-area .banner-circle img {
                      width: 100%;
                      height: 100%;
                      object-fit: contain;
                  }
                  /* ==================== banner section end ==================== */
                  /* ==================== counting section start ==================== */

                  .counting-area {
                      margin-top: 50px;
                  }

                  .review-icon {
                      width: 100%;
                      height: 100%;
                      display: flex;
                      border-radius: 10px;
                      background-color: var(--white);
                      box-shadow: 0 0 8px var(--light-gray);
                      padding: 20px;
                      align-items: center;
                  }

                  .review-icon .icon i {
                      color: var(--white);
                      background-color: var(--btn-color);
                      width: 87px;
                      height: 87px;
                      font-size: var(--font-size30);
                      line-height: 87px;
                      border-radius: 50%;
                      margin: 10px 20px;
                  }

                  .review-count {
                      color: var(--h2);
                      font: var(--font-family-Montserrat);
                      text-align: start;
                  }

                  .review-count h2 {
                      font-size: var(--font-size26);
                      font-weight: 700;
                      margin-bottom: 0;
                      text-align: center;
                      color: var(--black);
                  }

                  .review-count p {
                      color: var(--black);
                      font-weight: var(--font-semi-bold);
                      /* line-height: 50px; */
                      font-size: var(--font-size16);
                      font-weight: 700;
                      margin: 10px 0;
                  }
                  /* ==================== counting section end ==================== */
                  /* ==================== about section start ==================== */

                  .about-area {
                      margin-top: 120px;
                  }

                  .about-area .about-wrapper .about-left {
                      background-color: var(--white);
                      box-shadow: 0 0 10px var(--light-gray);
                      padding: 18px;
                      border-radius: 3px;
                  }

                  .about-area .about-wrapper .about-left .about-img {
                      height: 303px;
                      border-radius: 5px;
                  }

                  .about-area .about-wrapper .about-left .about-img img {
                      width: 100%;
                      height: 100%;
                      border-radius: 5px;
                      object-fit: contain;
                  }

                  .about-area .about-wrapper .about-left .about-content {
                      text-align: center;
                      padding: 10px 0;
                  }

                  .about-area .about-wrapper .about-left .about-content h3 {
                      font-size: var(--font-size30);
                      font-weight: var(--font-bold);
                      font-family: var(--font-family-Montserrat);
                      color: var(--black);
                      line-height: 35px;
                  }

                  .about-area .about-wrapper .about-left .about-content span {
                      font-size: var(--font-size20);
                      font-weight: var(--font-bold);
                      color: var(--black);
                      font-family: var(--font-family-Montserrat);
                      line-height: 35px;
                  }

                  .about-area .about-wrapper .about-left .about-content p {
                      font-size: var(--font-size18);
                      font-weight: var(--font-normal);
                      font-family: var(--font-family-Montserrat);
                      color: var(--black);
                      line-height: 30px;
                  }

                  .about-area .about-wrapper .about-right {
                      margin-left: 30px;
                  }

                  .about-area .about-wrapper .about-right p {
                      font-family: var(--font-family-Montserrat);
                      font-weight: var(--font-semi-bold);
                      font-size: var(--font-size16);
                      text-align: justify;
                      line-height: 36px;
                      margin-bottom: 20px;
                  }

                  .about-area .about-wrapper .about-right .social-media-heading {
                      margin-bottom: 20px;
                  }

                  .about-area .about-wrapper .about-right .social-media-heading h4 {
                      font-family: var(--font-family-Raleway);
                      font-weight: var(--font-bold);
                      font-size: var(--font-size24);
                      line-height: 30px;
                  }
                  /* ==================== about section end ==================== */
                  /* =============== populer-categories section start ============ */

                  .populer-categories-area {
                      margin-top: 80px;
                  }

                  .populer-categories-area .populer-categories-wrapper {
                      padding: 20px;
                      border-radius: 10px;
                      box-shadow: 0 0 8px var(--blue-light);
                  }

                  .populer-categories-area .populer-categories-wrapper {
                      padding: 20px;
                  }

                  .populer-categories-area .populer-categories-wrapper .populer-card {
                      padding: 30px 55px;
                      border-radius: 4px;
                  }

                  .populer-categories-area .populer-categories-wrapper .populer-card .icon-img {
                      width: 150px;
                      height: 150px;
                      line-height: 150px;
                      border-radius: 50%;
                      text-align: center;
                      background-color: var(--white);
                      box-shadow: 0 0 8px var(--light-gray);
                  }

                  .populer-categories-area .populer-categories-wrapper .populer-card .icon-img img {
                      width: 100%;
                      height: 100%;
                      padding: 30px;
                  }

                  .populer-categories-area .populer-categories-wrapper .populer-card .populer-content {
                      margin: 50px 0;
                  }

                  .populer-categories-area .populer-categories-wrapper .populer-card .populer-content p {
                      font-family: var(--font-family-Montserrat);
                      font-weight: var(--font-semi-bold);
                      font-size: var(--font-size20);
                      text-align: justify;
                      line-height: 31px;
                      text-align: center;
                  }

                  .populer-categories-area .populer-categories-wrapper .card-1 {
                      background-color: var(--pink-light);
                      box-shadow: 0 0 8px var(--light-gray);
                  }

                  .populer-categories-area .populer-categories-wrapper .card-2 {
                      background-color: var(--blue-light);
                      box-shadow: 0 0 8px var(--light-gray);
                  }

                  .populer-categories-area .populer-categories-wrapper .card-3 {
                      background-color: var(--pink);
                      box-shadow: 0 0 8px var(--light-gray);
                  }

                  .populer-categories-area .populer-categories-wrapper .card-4 {
                      background-color: var(--pink-light);
                      box-shadow: 0 0 8px var(--light-gray);
                  }
                  /* =============== populer-categories section end ============ */
                  /* =============== populer-course section start ============ */

                  .populer-course-area {
                      margin-top: 80px;
                      /* background-color: blue; */
                  }
                  /* slide  */

                  .populer-course-area .social-media .social-media-slide {
                      display: flex;
                  }
                  /* ====================== populer-course section end ======================= */
                  /* ====================== best-instuctor section start ======================= */

                  .best-instuctor-area {
                      margin-top: 80px;
                  }

                  .best-instuctor-area .best-instuctor-heading span {
                      color: var(--btn-color);
                  }
                  /* ====================== best-instuctor section end ======================= */
                  /* ===================== student-feedback section start ==================== */

                  .student-feedback-area {
                      margin-top: 80px;
                  }
                  /* .student-feedback-area .student-feedback-heading span {
color: var(--blue);
} */

                  .slide-wrapper .student-feedback-slide {
                      width: 100%;
                  }
                  /* ====================== student-feedback  end ======================= */
                  /* ====================== join-world  start ======================= */

                  .join-world-area {
                      margin-top: 40px;
                  }

                  .join-world-area .join-world-wrapper {
                      padding: 70px 20px;
                  }

                  .join-world-area .join-world .join-world-img {
                      width: 100%;
                      height: 600px;
                  }

                  .join-world-area .join-world .join-world-img img {
                      width: 100%;
                      height: 100%;
                      object-fit: contain;
                  }

                  .join-world-area .join-world-heading {
                      margin-top: 100px;
                  }

                  .join-world-area .join-world-heading h2 {
                      font-size: var(--font-size40);
                      line-height: 64px;
                  }

                  .join-world-area .join-world-heading span {
                      font-size: var(--font-size40);
                  }

                  .join-world-area .join-world-content span {
                      font-family: var(--font-family-Montserrat);
                      font-weight: var(--font-semi-bold);
                      font-size: var(--font-size24);
                      color: var(--heder-black);
                      line-height: 70px;
                  }

                  .join-world-area .join-world-content p {
                      font-family: var(--font-family-Montserrat);
                      font-weight: var(--font-normal);
                      font-size: var(--font-size18);
                      color: var(--heder-black);
                      line-height: 24px;
                  }

                  .join-world-area .join-world-btn a {
                      border-radius: 30px;
                      margin-top: 30px;
                  }
                  /* ====================== student-feedback section end ======================= */
                  /* =========================================home page  end ===========================================  */
                  /* =========================================about page  start ===========================================  */
                  /* ==================== paytolearn-net section start ==================== */

                  .paytolearn-about-area {
                      margin-top: 120px;
                  }

                  .paytolearn-about-area .paytolearn-heading span {
                      font-family: var(--font-family-Raleway);
                      font-weight: var(--font-bold);
                      font-size: var(--font-size20);
                      color: var(--btn-color);
                      display: block;
                  }

                  .paytolearn-about-area .paytolearn-wrapper .learn-about h5 {
                      font-family: var(--font-family-Raleway);
                      font-weight: var(--font-bold);
                      font-size: var(--font-size26);
                      color: var(--black);
                      margin-bottom: 40px;
                  }

                  .paytolearn-about-area .paytolearn-wrapper .learn-about p {
                      font-family: var(--font-family-Montserrat);
                      font-weight: var(--font-normal);
                      font-size: var(--font-size20);
                      text-align: justify;
                      color: var(--black);
                      line-height: 38px;
                      margin-bottom: 20px;
                      padding-right: 60px;
                  }

                  .paytolearn-about-area .paytolearn-wrapper .abou-img {
                      width: 526px;
                      /* height: 526px; */
                      border-radius: 50%;
                  }

                  .paytolearn-about-area .paytolearn-wrapper .abou-img img {
                      width: 100%;
                      height: 100%;
                      border-radius: 50%;
                      object-fit: contain;
                  }
                  /* ==================== paytolearn-net section end ==================== */
                  /* =========================================about page  end ===========================================  */
                  /* =========================================all course page  start ===========================================  */
                  /* ==================== select-course section start ======================= */

                  .select-course-area {
                      margin-top: 120px;
                  }

                  .select-course-area .hello-info p span {
                      font-size: 30px;
                      /* margin: 22px 8px; */
                  }

                  .select-course-area .hello-info p span {
                      font-family: var(--font-family-Public);
                      font-weight: var(--font-bold);
                      font-size: var(--font-size20);
                      color: var(--btn-color);
                  }
                  /* =========================== */

                  .select-course-area .subscribe form {
                      height: 45px;
                  }

                  .select-course-area .subscribe {
                      position: relative;
                      overflow: hidden;
                      border-radius: 4px;
                  }

                  .select-course-area .footer-btn {
                      margin-top: 30px;
                  }

                  .select-course-area .subscribe input {
                      width: 100%;
                      height: 45px;
                      color: var(--black);
                      background: var(--light-gray);
                      outline: none;
                      border: 1px solid var(--btn-color);
                      border-radius: 4px;
                      padding: 0 10px;
                  }

                  .select-course-area .subscribe input::placeholder {
                      font-family: var(--font-family-inter);
                      font-weight: var(--font-semi-bold);
                      font-size: var(--font-size14);
                      color: var(--white);
                  }

                  .select-course-area .subscribe button {
                      position: absolute;
                      right: 0;
                      top: 0;
                      height: 100%;
                      background-color: var(--btn-color);
                      padding: 0 15px;
                      border: none;
                  }

                  .select-course-area .subscribe button i {
                      color: var(--white);
                      font-size: var(--font-size20);
                      line-height: 30px;
                  }
                  /* =========================== */
                  /* according start  */

                  .select-course-area .select-category-group {
                      border-radius: 5px;
                      overflow: hidden;
                      margin-top: 30%;
                  }

                  .select-course-area .select-category-group span {
                      font-size: 15px;
                      line-height: 20px;
                  }

                  .select-course-area .items {
                      padding: 10px 13px 10px;
                      background-color: var(--white);
                  }

                  .select-course-area label {
                      display: block;
                      margin-bottom: 10px;
                  }

                  .select-course-area .accordion-item {
                      margin-top: 5px;
                  }

                  .select-course-area .accordion-button:not(.collapsed) {
                      font-size: var(--font-size20);
                      font-weight: var(--font-bold);
                      color: var(--btn-color);
                      background-color: transparent;
                      box-shadow: inset 0 calc(var(--bs-accordion-border-width) * -1) 0 var(--bs-accordion-border-color);
                  }

                  .select-course-area .accordion-button:focus {
                      z-index: 3;
                      border-color: transparent;
                      box-shadow: transparent;
                      outline: none;
                      border: none;
                  }

                  .select-course-area .accordion-button {
                      border: none;
                      outline: none;
                  }
                  /* category search  */

                  .select-course-area .accordion-body .items .select-according-course {
                      display: flex;
                      justify-content: space-between;
                  }

                  .select-course-area .accordion-body .items .category-search {
                      padding: 6px 10px;
                      width: 100%;
                      outline: none;
                      border-radius: 3px;
                      border: 1px solid #333;
                  }

                  .select-course-area .accordion-body .items .category-search:focus {
                      outline: .5px solid var(--bs-accordion-btn-focus-border-color);
                      border: 1px solid transparent;
                  }
                  /* country search  */

                  .select-course-area .accordion-body .items .country-search {
                      padding: 6px 10px;
                      width: 100%;
                      outline: none;
                      border-radius: 3px;
                      border: 1px solid var(--black-3);
                  }

                  .select-course-area .accordion-body .items .country-search:focus {
                      outline: .5px solid var(--main-color);
                      border: 1px solid transparent;
                  }

                  .select-course-area .accordion-button {
                      width: 100%;
                      padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);
                      font-size: var(--font-size20);
                      color: var(--bs-accordion-btn-color);
                      font-weight: var(--font-bold);
                  }

                  .select-course-area .accordion {
                      --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='var%28--bs-body-color%29'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
                      --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='var%28--bs-body-color%29'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
                      --bs-accordion-btn-focus-border-color: #86b7fe;
                      --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem none;
                      --bs-accordion-active-color: #000;
                  }
                  /* according-end  */
                  /* card  */
                  /* ==================== select-course section start ======================= */
                  /* =========================================all course page  end ===========================================  */
                  /* =========================================blog details page  start ===========================================  */
                  /* ==================== blog details section start ======================= */

                  .blog-details-area {
                      margin-top: 120px;
                  }

                  .blog-details-area .sub-heading {
                      margin: 20px 0;
                  }

                  .blog-details-area .sub-heading p {
                      font-family: var(--font-family-Montserrat);
                      font-weight: var(--font-bold);
                      font-size: var(--font-size24);
                      color: var(--btn-color);
                      display: block;
                  }

                  .blog-details-area .author {
                      margin-right: 30px;
                  }

                  .blog-details-area .blog-details-wrapper .blog-details-top {
                      border-radius: 5px;
                      box-shadow: 0 0 8px var(--light-gray);
                      padding: 40px;
                      margin-bottom: 40px;
                  }

                  .blog-details-area .blog-details-wrapper .blog-details-top .blog-details-img {
                      height: 610px;
                      box-shadow: 0 0 8px var(--light-gray);
                  }

                  .blog-details-area .blog-details-wrapper .blog-details-top .blog-details-img img {
                      width: 100%;
                      height: 100%;
                      border-radius: 5px;
                      object-fit: cover;
                  }

                  .blog-details-area .blog-details-wrapper .blog-details-top .blog-content-heading {
                      text-align: center;
                      margin: 30px 0;
                  }

                  .blog-details-area .blog-details-content p {
                      font-family: var(--font-family-Montserrat);
                      font-weight: var(--font-normal);
                      font-size: var(--font-size20);
                      text-align: justify;
                      color: var(--black);
                      line-height: 40px;
                      margin-bottom: 20px;
                  }

                  .blog-details-area .blog-details-content ul {
                      padding: 0 40px;
                  }

                  .blog-details-area .blog-details-content ul li {
                      font-family: var(--font-family-Montserrat);
                      font-weight: var(--font-normal);
                      font-size: var(--font-size20);
                      text-align: justify;
                      color: var(--black);
                      line-height: 30px;
                      /* margin-top: 10px; */
                      list-style: disc;
                  }

                  .blog-details-area .blog-details-content ul li {
                      font-family: var(--font-family-Montserrat);
                      font-weight: var(--font-normal);
                      font-size: var(--font-size20);
                      text-align: justify;
                      color: var(--black);
                      line-height: 30px;
                      margin-top: 10px;
                      list-style: disc;
                  }

                  .blog-details-area .blog-details-bottom {
                      padding: 60px;
                      border-radius: 5px;
                      box-shadow: 0 0 8px var(--light-gray);
                  }

                  .blog-details-area .blog-details-bottom .blog-details-bottom-wrapper {
                      margin-bottom: 80px;
                  }

                  .blog-details-area .blog-bottom-content {
                      padding-right: 20px;
                  }

                  .blog-details-area .blog-bottom-content .bottom-content-heading h2 {
                      display: inline-block;
                      font-family: var(--font-family-Raleway);
                      font-size: var(--font-size32);
                      font-weight: var(--font-bold);
                      color: var(--heder-black);
                      cursor: pointer;
                      position: relative;
                  }

                  .blog-details-area .blog-bottom-content .coaching p {
                      font-family: var(--font-family-Montserrat);
                      font-weight: var(--font-normal);
                      font-size: var(--font-size20);
                      text-align: justify;
                      color: var(--black);
                      line-height: 40px;
                  }

                  .blog-details-area .details-bottom-img {
                      width: 100%;
                      height: 380px;
                      border-radius: 10px;
                      box-shadow: 0 0 8px var(--light-gray);
                      border: 20px solid var(--white);
                  }

                  .blog-details-area .details-bottom-img img {
                      width: 100%;
                      height: 100%;
                      object-fit: cover;
                  }
                  /* ==================== blog details section end ======================= */
                  /* =========================================blog details page  end ===========================================  */
                  /* ========================================= contact page  start ===========================================  */
                  /* ======================== contact section start ====================== */

                  .contact-area {
                      margin: 120px 0;
                  }

                  .contact-area .contact-wrapper .contact-content {
                      width: 80%;
                  }

                  .contact-area .contact-wrapper .contact-content .location p {
                      font-weight: var(--font-semi-bold);
                      font-size: var(--font-size16);
                      text-align: justify;
                      color: var(--black-2);
                      line-height: 30px;
                  }

                  .contact-area .contact-wrapper .contact-img-content .contact-img {
                      width: 100%;
                      height: 450px;
                      border-radius: 5px;
                      box-shadow: 0 0 8px var(--light-gray);
                  }

                  .contact-area .contact-wrapper .contact-img-content .contact-img img {
                      width: 100%;
                      height: 100%;
                      object-fit: cover;
                  }

                  .contact-area .contact-wrapper .contact-img-content .contact-location {
                      font-family: var(--font-family-Raleway);
                      font-weight: var(--font-semi-bold);
                      font-size: var(--font-size20);
                      text-align: justify;
                      color: var(--black-2);
                      line-height: 30px;
                      margin: 20px 0;
                  }

                  .contact-social-media-heading {
                      margin: 10px 0;
                  }

                  .social-media-icons-2 {
                      margin-top: 40px;
                  }

                  .contact-area .contact-wrapper .contact-social-heading h2 {
                      font-size: var(--font-size26);
                  }

                  .contact-area .contact-wrapper .social-icons li a i {
                      margin: 6px;
                  }
                  /* ======================== contact section end ====================== */
                  /* ========================== form section start ======================== */

                  .form-area .information-form {
                      box-shadow: 0 0 6px var(--light-gray);
                      padding: 40px 20px;
                      border-radius: 4px;
                  }

                  .form-area .information-form textarea {
                      outline: none;
                      width: 100%;
                      padding: 10px;
                      border-radius: 5px;
                      border: 1px solid transparent;
                      box-shadow: 0 0 8px var(--light-gray);
                      transition: all linear .2s;
                  }

                  .form-area .information-form textarea:focus {
                      border-color: var(--main-color);
                  }

                  .form-area .Submit-btn {
                      width: 200px;
                      margin: 0 auto;
                      display: flex;
                      justify-content: center;
                      margin-top: 20px;
                  }
                  /* iframe */

                  .contact-map {
                      margin-top: 80px;
                  }

                  .contact-map iframe {
                      width: 100%;
                      height: 530px;
                      border-radius: 4px;
                      box-shadow: 0 0 5px var(--light-gray);
                  }
                  /* ========================== form section end ======================== */
                  /* =============== information section start  =============== */

                  .information-area {
                      margin: 120px 0;
                  }

                  .information-area .heading {
                      margin: 40px auto;
                      width: 60%;
                      text-align: center;
                  }
                  /* information form  */

                  .information-area .information-wrapper .information-content {
                      width: 100%;
                  }

                  .information-area .information-content .information-btn {
                      width: 100%;
                      margin: 20px 0;
                  }
                  /* ================= information section end  =============== */
                  /* =============== otp section start  =============== */

                  .otp-area {
                      margin: 120px 0;
                  }

                  .otp-area .heading {
                      margin: 40px auto;
                      width: 60%;
                      text-align: center;
                  }
                  /* submit form  */

                  .otp-area .submit-content .submit-form {
                      padding-top: 10%;
                  }

                  .otp-area .submit-content .submit-form form {
                      display: flex;
                      justify-content: space-between;
                      margin-bottom: 20px;
                      padding: 0 15px;
                  }

                  .otp-area .submit-content .submit-form form input {
                      display: inline-block;
                      width: 76px;
                      height: 50px;
                      text-align: center;
                      color: var(--black);
                      outline: none;
                      border: none;
                      border-bottom: 1px solid var(--gray);
                      background-color: transparent;
                  }

                  .otp-area .submit-content .otp-btn {
                      width: 100%;
                      margin: 20px 0;
                  }
                  /* submit img  */

                  .otp-area .submit-img {
                      width: 530px;
                      height: 300px;
                      margin: 0 auto;
                  }

                  .otp-area .submit-img img {
                      width: 100%;
                      height: 100%;
                      object-fit: contain;
                  }
                  /* ================= otp section end  =============== */
                  /* =============== sign-up section start  =============== */

                  .sign-up-area {
                      margin-top: 120px;
                  }

                  .sign-up-area .heading {
                      margin: 40px auto;
                      width: 60%;
                      text-align: center;
                  }

                  .sign-up-area .sign-up-btn {
                      width: 100%;
                      margin: 20px 0;
                  }
                  /* ================= sign-up section end  =============== */
                  /* ========================================= contact page  end ===========================================  */
                  /* ========================================= course details page  start ===========================================  */
                  /* ==================== course details section start ==================== */

                  .course-details-area {
                      margin-top: 100px;
                  }

                  .course-details-area .Course-details {
                      margin: 20px 0;
                      padding: 15px 35px;
                      border-radius: 4px;
                      box-shadow: 0 0 8px var(--light-gray);
                  }

                  .course-details-area .Course-details .details-about p {
                      font-family: var(--font-family-Montserrat);
                      font-size: var(--font-size24);
                      font-weight: var(--font-semi-bold);
                      color: var(--black);
                      line-height: 45px;
                      text-align: justify;
                      margin-bottom: 38px;
                  }
                  /* contact-preview start  */

                  .course-details-area .contact-preview .details-about .what-you ul li {
                      display: flex;
                      display: inline-block;
                      padding: 5px 0;
                      border-bottom: 1px solid var(--light-gray);
                  }

                  .course-details-area .buy-course-card .right-icon ul li i {
                      font-size: 16px;
                      line-height: 40px;
                      width: 40px;
                      height: 40px;
                      border-radius: 50%;
                      color: var(--white);
                      margin: 0 10px 5px 0;
                      background-color: var(--btn-color);
                      text-align: center;
                  }

                  .course-details-area .contact-preview .details-about .what-you .Content-btn {
                      text-align: end;
                      margin-top: 10px;
                  }
                  /* contact-preview end  */
                  /* how to  */

                  .course-details-area .how-to a {
                      color: var(--btn-color);
                      transition: all linear .5s;
                  }

                  .course-details-area .how-to a:hover {
                      text-decoration: underline;
                  }
                  /* certificate */

                  .course-details-area .course-certificate ul li {
                      padding-bottom: 20px;
                  }

                  .certificate-img {
                      margin: 20px 0;
                  }

                  .course-details-area .course-certificate .certificate-img img {
                      width: 100%;
                      height: 100%;
                      object-fit: cover;
                  }
                  /* right  */

                  .course-details-area .buy-course-card {
                      padding: 20px;
                      box-shadow: 0 0 8px var(--light-gray);
                      border-radius: 4px;
                  }

                  .course-details-area .buy-course-card .buy-course-img {
                      height: 300px;
                  }

                  .course-details-area .buy-course-card .buy-course-img iframe {
                      height: 100%;
                      width: 100%;
                  }

                  .course-details-area .buy-course-content .populer-start {
                      display: flex;
                  }

                  .course-details-area .buy-course-content .buy-course {
                      display: flex;
                      justify-content: space-between;
                  }

                  .course-details-area .buy-course-content .populer-start .star ul li {
                      display: inline-grid;
                  }

                  .course-details-area .buy-course-content .populer-start .star ul li i {
                      font-size: var(--font-size20);
                      color: var(--star);
                      margin-right: 4px;
                  }

                  .course-details-area .buy-course-content .populer-start .count span {
                      font-family: var(--font-family-Montserrat);
                      font-weight: var(--font-bold);
                      font-size: var(--font-size18);
                      color: var(--black);
                  }

                  .course-details-area .buy-course-content .dolars {
                      font-family: var(--font-family-Montserrat);
                      font-weight: var(--font-bold);
                      font-size: var(--font-size18);
                      color: var(--black);
                  }

                  .course-details-area .buy-course-content .buy-course {
                      text-align: center;
                      padding: 20px 0;
                  }

                  .course-details-area .buy-course-content .buy-course-btn {
                      text-align: center;
                      margin-bottom: 20px;
                  }

                  .course-details-area .buy-course-content .what-you {
                      padding: 20px;
                      border-radius: 4px;
                      box-shadow: transparent;
                  }
                  /* =======frequently  start ============== */

                  .frequently-area .frequently-wrapper {
                      padding: 40px 0;
                  }

                  .frequently-wrapper .frequently-accordion .contentBx {
                      position: relative;
                      margin: 10px 0;
                  }

                  .frequently-wrapper .frequently-accordion .contentBx .label {
                      position: relative;
                      font-weight: var(--font-bold);
                      font-size: var(--font-size20);
                      background-color: var(--white);
                      color: var(--black);
                      cursor: pointer;
                      padding: 20px 15px;
                      border-bottom: 1px solid var(--main-color);
                  }

                  .frequently-wrapper .frequently-accordion .contentBx .label::before {
                      content: '+';
                      position: absolute;
                      top: 50%;
                      right: 20px;
                      transform: translateY(-50%);
                      font-size: 1.5em;
                  }

                  .frequently-wrapper .frequently-accordion .contentBx.frequently-active .label::before {
                      content: '-';
                      color: var(--main-color);
                  }

                  .frequently-wrapper .frequently-accordion .contentBx.frequently-active .label {
                      color: var(--main-color);
                  }

                  .frequently-wrapper .frequently-accordion .contentBx .content {
                      position: relative;
                      background-color: var(--white);
                      overflow: hidden;
                      height: 0;
                      transition: 0.2s;
                  }

                  .frequently-wrapper .frequently-accordion .contentBx.frequently-active .content {
                      height: auto;
                      padding: 10px 15px;
                  }

                  .frequently-wrapper .frequently-accordion .contentBx.frequently-active .content p {
                      font-weight: var(--font-normal);
                      font-size: var(--font-size16);
                      line-height: 32px;
                      /* text-align: justify; */
                      color: var(--black);
                  }

                  .frequently-wrapper .frequently-accordio .items {
                      padding: 10px 30px 10px;
                      background-color: #456;
                  }

                  .frequently-wrapper .frequently-accordio label {
                      display: block;
                      margin-bottom: 10px;
                  }
                  /* =========== frequently  end ========== */
                  /* ==================== course details section end ==================== */
                  /* ==================== social media section start ==================== */

                  .social-media-area .social-icons li a i {
                      width: 50px;
                      height: 50px;
                      line-height: 50px;
                      text-align: center;
                      font-size: var(--font-size24);
                      color: var(--btn-color);
                      border-radius: 50%;
                      background-color: var(--white);
                      box-shadow: 0 0 15px var(--light-gray);
                      margin: 10px;
                      transition: all linear .3s;
                  }
                  /* ==================== social media section end ==================== */
                  /* ========================================= course details page  end ===========================================  */
                  /* ========================================= exam details page  start ===========================================  */
                  /* ==================== exam details section start ==================== */

                  .exam-details-area {
                      margin-top: 120px;
                  }

                  .exam-details-area .exam-img {
                      height: 550px;
                      border-radius: 5px;
                      margin: 40px 0;
                      box-shadow: 0 0 8px var(--light-gray);
                  }

                  .exam-details-area .exam-img img {
                      width: 100%;
                      height: 100%;
                      object-fit: cover;
                      border-radius: 5px;
                  }

                  .exam-details-area .exam-input-icon {
                      display: flex;
                      padding: 10px 0;
                  }

                  .exam-details-area .exam-input-icon .icon {
                      width: 5%;
                  }

                  .exam-details-area .exam-input-icon .exam-input {
                      width: 95%;
                  }

                  .exam-details-area input {
                      width: 100%;
                      height: 45px;
                      color: var(--black);
                      background: var(--light-gray);
                      outline: none;
                      border: 1px solid var(--btn-color);
                      border-radius: 4px;
                      padding: 0 10px;
                  }

                  .exam-details-area input::placeholder {
                      font-family: var(--font-family-Montserrat);
                      font-weight: var(--font-semi-bold);
                      font-size: var(--font-size14);
                      color: var(--white);
                  }

                  .exam-details-area .contact-preview-exam .details-about .what-you ul li {
                      display: flex;
                      display: block;
                      padding: 20px 0;
                      margin-bottom: 20px;
                      border-bottom: 1px solid var(--light-gray);
                  }

                  .exam-details-area .details-about p {
                      font-family: var(--font-family-Montserrat);
                      font-size: var(--font-size20);
                      font-weight: var(--font-semi-bold);
                      line-height: 38px;
                      margin-bottom: 16px;
                      text-align: justify;
                  }

                  .exam-submit-btn {
                      text-align: center;
                  }
                  /* ==================== exam details section end ==================== */
                  /* ========================================= exam details page  end ===========================================  */
                  /* ========================================= pdf course page  end ===========================================  */
                  /* ==================== pdf course  section start ==================== */

                   .course-details-area .instructor-pdf {
                       display: flex;
                       margin: 0;
                       border-radius: 4px;
                       box-shadow: 0 0 5px var(--light-gray);
                   }

                   .course-details-area .contact-preview-pdf .details-about .what-you ul li {
                       display: flex;
                       display: block;
                       padding: 5px 0;
                       border-bottom: 1px solid var(--light-gray);
                   }

                   .pdf-btn {
                       text-align: center;
                       margin-top: 20px;
                   }

                   .course-details-area .contact-preview-pdf .details-about .what-you ul li {
                       display: flex;
                       display: block;
                       padding: 10px 0;
                       border-bottom: 1px solid var(--light-gray);
                   }

                   .course-details-area .buy-course-card-pdf {
                       padding: 20px;
                       box-shadow: 0 0 8px var(--light-gray);
                       border-radius: 4px;
                       background-color: var(--btn-color);
                       height: 609px;
                       position: relative;
                   }

                   .course-details-area .buy-course-card-pdf .card-pdf-icon {
                       font-size: var(--font-size150);
                       width: 180px;
                       height: 180px;
                       line-height: 180px;
                       position: absolute;
                       top: 50%;
                       left: 50%;
                       transform: translate(-50%, -50%);
                       text-align: center;
                   }

                   .course-details-area .buy-course-card-pdf .card-pdf-icon i {
                       color: var(--white);
                       cursor: pointer;
                   }

                  .pdf-details-area {
                      margin-top: 120px;
                  }

                  .pdf-details-area .instructor-pdf {
                      display: flex;
                      margin: 0;
                      border-radius: 4px;
                      box-shadow: 0 0 5px var(--light-gray);
                  }

                  .pdf-details-area .buy-course-card-pdf {
                      padding: 20px;
                      box-shadow: 0 0 8px var(--light-gray);
                      border-radius: 4px;
                      background-color: var(--btn-color);
                      height: 550px;
                      position: relative;
                  }

                  .pdf-details-area .buy-course-card-pdf .card-pdf-icon {
                      font-size: var(--font-size150);
                      width: 180px;
                      height: 180px;
                      line-height: 180px;
                      position: absolute;
                      top: 50%;
                      left: 50%;
                      transform: translate(-50%, -50%);
                      text-align: center;
                  }

                  .pdf-details-area .buy-course-card-pdf .card-pdf-icon i {
                      color: var(--white);
                      cursor: pointer;
                  }

                  .pdf-details-area .Course-details .details-about p {
                      font-size: var(--font-size24);
                      margin-bottom: 14px;
                      line-height: 42px;
                      text-align: justify;
                  }

                  /* ==================== pdf course  section end ==================== */
                  /* ===== read title start ======== */

                  .overlay2 {
                      width: 100%;
                      height: 100vh;
                      background-color: var(--light-gray);
                      opacity: 60%;
                      position: fixed;
                      top: 0;
                      left: 0;
                      opacity: 0;
                      z-index: -1;
                  }

                  .showoverlay2 {
                      opacity: 1;
                      z-index: 9999;
                  }

                  .btn-login2 {
                      z-index: 1;
                  }

                  .buy-now-cart2 {
                      width: 70%;
                      height: auto;
                      margin: 0 auto;
                      background-color: var(--white);
                      position: fixed;
                      top: -100%;
                      left: 50%;
                      transform: translate(-50%, -50%);
                      z-index: 9999;
                      transition: all linear -1s;
                  }

                  .showcart2 {
                      top: 75%;
                  }

                  .buy-now-cart2 .buy-icon2 i {
                      position: absolute;
                      right: 0;
                      top: 0;
                      color: var(--white);
                      cursor: pointer;
                      font-size: 40px;
                      width: 50px;
                      height: 50px;
                      line-height: 50px;
                      text-align: center;
                      background-color: var(--btn-color);
                  }
                  /* popup end */

                  .buy-now-cart2 .buy-now-datails2 {
                      padding: 50px;
                  }

                  .buy-now-cart2 .buy-now-datails2 .buy-now-content {
                      background-color: var(--light-gray);
                      /* opacity: 60%; */
                      border: 15px solid var(--btn-color);
                  }

                  .buy-now-cart2 .buy-now-datails2 .buy-now-content .cart-document {
                      width: 100%;
                      height: 100vh;
                      overflow: scroll;
                  }

                  .buy-now-cart2 .buy-now-datails2 .buy-now-content .cart-document img {
                      margin-bottom: 20px;
                      height: auto;
                  }

                  .buy-now-cart2 .buy-now-content img {
                      width: 100%;
                      height: 100%;
                  }
                  /* ====== read title btn end ====== */
                  /* ========================================= pdf course page  end ===========================================  */
                  /* =========================================vedio page  end ===========================================  */
                  /* ========================  Videos section start ======================= */

                  .video-area {
                      margin-top: 120px;
                  }

                  .video-area .video-wrapper .video-card {
                      width: 100%;
                      padding: 20px;
                      border-radius: 5px;
                      margin-bottom: 40px;
                      box-shadow: 0 0 8px var(--light-gray);
                  }

                  .video-area .video-wrapper .video-card .video-img {
                      width: 100%;
                      height: 220px;
                      border-radius: 5px;
                      margin: 0px auto;
                      box-shadow: 0 0 5px var(--light-gray);
                  }

                  .video-area .video-wrapper .video-card .video-img img {
                      width: 100%;
                      height: 100%;
                      object-fit: cover;
                      border-radius: 6px;
                  }

                  .video-area .video-wrapper .video-card .video-content {
                      padding: 20px 0;
                  }

                  .video-area .video-wrapper .video-card .video-content p {
                      font-family: var(--font-family-Public);
                      font-weight: var(--font-bold);
                      font-size: var(--font-size20);
                      color: var(--black);
                      text-align: justify;
                      line-height: 32px;
                  }

                  .video-area .video-wrapper .video-btn {
                      text-align: center;
                  }
                  /* ========================  Videos section end ======================= */
                  /* =========================================vedio page  end ===========================================  */
                  /* ========================================= checkout page  start ===========================================  */

                  .checkout-area {
                      margin-top: 100px;
                  }
                  /* method  */

                  .checkout-area .payment-method {
                      height: 100%;
                  }

                  .checkout-area .payment-method p {
                      color: var(--black);
                      font-size: 15px;
                      line-height: 25px;
                  }

                  .checkout-area .payment-method .radio-inline input {
                      margin-right: 4px;
                  }

                  .checkout-area .payment-method .radio-inline {
                      line-height: 25px;
                      display: block;
                  }

                  .checkout-area .payment-method .we-accepted h3 {
                      color: var(--black);
                      font-size: 14px;
                      font-weight: 400;
                      line-height: 20px;
                      margin-bottom: 10px;
                  }

                  .checkout-area .payment-method .we-accepted img {
                      height: 100%;
                      width: 100%;
                  }
                  /* checkout */

                  .checkout {
                      display: flex;
                      justify-content: space-between;
                      border-top: 2px solid var(--light-gray);
                      box-shadow: 0px 2px 0px 0 var(--light-gray);
                      padding: 30px 0;
                      margin-top: 20px;
                  }

                  .checkout .i-have-text {
                      line-height: 40px;
                  }

                  .checkout .i-have-text a {
                      color: var(--cyan);
                  }

                  .checkout .i-have-text a:hover {
                      color: var(--main-color);
                      text-decoration: underline;
                  }
                  /* amount start */

                  .checkout-area .bg-white {
                      background-color: var(--white);
                  }

                  .checkout-area .table-bordered>:not(caption)>*>* {
                      border-width: 0 0px;
                      padding: 10px 0;
                  }

                  .checkout-area tbody,
                  td,
                  tfoot,
                  th,
                  thead,
                  tr {
                      border-color: var(--light-gray);
                      border-style: solid;
                      border-width: 0;
                  }

                  .checkout-area .table-bordered {
                      width: 100%;
                  }

                  .checkout-area .table-bordered thead td {
                      padding: 14px 10px;
                      color: var(--white);
                      font-size: 13px;
                      font-weight: 600;
                      background-color: var(--main-color);
                  }

                  .checkout-area .table-bordered tbody td {
                      padding: 12px 10px;
                      font-weight: var(--font-bold);
                      border-bottom: 1px solid var(--light-gray);
                  }

                  .checkout-area .table-bordered tbody h4 {
                      font-size: var(--font-size24);
                      font-weight: 900;
                      display: inline-block;
                  }

                  .checkout-area .text-right {
                      text-align: right;
                  }

                  .checkout-area .amount {
                      font-weight: 600;
                      color: var(--amount);
                  }

                  .checkout-area .name a {
                      color: var(--black);
                      line-height: 30px;
                  }

                  .checkout-area .name .fades {
                      color: var(--black);
                  }
                  /* amount end */

                  .checkout-area .paynow-btn {
                      margin-top: 20px;
                      text-align: end;
                  }
                  /*===================== profile  start =================*/

                  .profile-wapper {
                      padding: 20px;
                      margin: 0 auto;
                      background-color: var(--white);
                      box-shadow: 0 0 10px var(--light-gray);
                  }
                  /* payment-method start  */

                  .profile-wapper .payment-method {
                      justify-content: center;
                      margin: 20px 0;
                  }

                  .payment-method .method-card {
                      background-color: var(--white);
                      box-shadow: 0 2px 7px 4px var(--light-gray);
                      border-radius: 6px;
                      text-align: center;
                      margin-right: 20px;
                      padding: 10px;
                  }

                  .payment-method .method-card {
                      width: 100px;
                      height: 70px;
                  }

                  .payment-method .method-card img {
                      width: 100%;
                      height: 100%;
                      object-fit: contain;
                  }

                  .payment-method .method-card i {
                      font-size: var(--font-size18);
                  }

                  .payment-method .method-card h4 {
                      font-family: var(--font-family-inter);
                      font-weight: var(--font-semi-bold);
                      font-size: var(--font-size12);
                      margin-top: 8px;
                  }

                   .payment-method .method-number {
                       background-color: var(--white);
                       box-shadow: 0 2px 7px 4px var(--light-gray);
                       border-radius: 6px;
                       text-align: center;
                       margin-right: 20px;
                       padding: 10px;
                   }

                   .payment-method .method-number {
                       width: 150px;
                       height: 70px;
                   }
                   .payment-method .method-number p{
                       color: var(--main-color);
                   }

                   .payment-method .method-number i {
                       font-size: var(--font-size18);
                   }

                  /* payment-method end  */

                  .checkout-area form {
                      width: 100%;
                      padding: 20px 10px;
                  }

                  .checkout-area form label {
                      font-family: var(--font-family-Raleway);
                      font-weight: var(--font-bold);
                      font-size: var(--font-size16);
                      color: var(--main-color);
                      line-height: 20px;
                      margin-bottom: 10px;
                  }

                  .checkout-area form select,
                  form input {
                      font-weight: var(--font-normal);
                      color: var(--gray);
                      font-size: var(--font-size14);
                      width: 100%;
                      border: 1px solid var(--light-gray);
                      outline: none;
                      padding: 8px 10px;
                      margin-bottom: 20px;
                      border-radius: 3px;
                      transition: all linear .1s;
                  }

                  .checkout-area form input:focus {
                      border-color: var(--main-color);
                  }

                  .checkout-area form .form-group input {
                      box-shadow: none;
                  }

                  .checkout-area form input::placeholder {
                      color: var(--gray);
                      font-size: var(--font-size14);
                      font-weight: 400;
                      line-height: 20px;
                  }

                  .checkout-area .profile-btn {
                      background: var(--btn-color);
                      font-family: var(--font-family-Raleway);
                      font-size: var(--font-size14);
                      font-weight: var(--font-semi-bold);
                      color: var(--white);
                      border: 2px solid transparent;
                      border-radius: 4px;
                      padding: 6px 20px;
                  }
                  /*===================== profile  end =================*/
                  /* ========================================= checkout page  end ===========================================  */
                  /* ========================================= skill course page  start ===========================================  */

                  .skills-course-area .skills-course-left {
                      margin-top: 100px;
                  }

                  .skills-course-area .skills-course-left .skills-course-video {
                      width: 100%;
                  }

                  .skills-course-area .buy-course-card-pdf {
                      padding: 20px;
                      box-shadow: 0 0 8px var(--light-gray);
                      border-radius: 4px;
                      background-color: var(--btn-color);
                      height: 455px;
                      position: relative;
                  }

                  .skills-course-area .buy-course-card-pdf .card-pdf-icon {
                      font-size: var(--font-size150);
                      width: 180px;
                      height: 180px;
                      line-height: 180px;
                      position: absolute;
                      top: 50%;
                      left: 50%;
                      transform: translate(-50%, -50%);
                      text-align: center;
                  }

                  .skills-course-area .buy-course-card-pdf .card-pdf-icon i {
                      color: var(--white);
                      cursor: pointer;
                  }

                  .skills-course-area .skills-course-left .skills-course-video-header h2 {
                      color: var(--main-color);
                      margin: 20px 0;
                  }

                  .skills-course-area .skills-course-left .skills-course-video-header p {
                      color: var(--black);
                      font-size: var(--font-size14);
                  }

                  .skills-course-area .admission-test {
                      font-size: var(--font-size24);
                      color: var(--main-color);
                      margin: 20px 0;
                  }

                  .skills-course-area .skills-course-left .skills-course-share {
                      display: flex;
                      justify-content: space-between;
                  }

                  .skills-course-area .skills-course-left .skills-course-share ul {
                      display: flex;
                  }

                  .skills-course-area .skills-course-left .skills-course-share ul li:nth-child(2) {
                      margin-left: 20px;
                  }

                  .skills-course-area .skills-course-left .skills-course-share ul li a {
                      color: var(--black-6);
                      font-weight: 500;
                      line-height: 25px;
                      font-size: var(--font-size14);
                  }

                  .skills-course-area .skills-course-left .skills-course-share {
                      background-color: var(--white);
                      border-top: 1px solid var(--light-gray);
                      border-bottom: 1px solid var(--light-gray);
                      padding: 15px 2px;
                      margin: 20px 0;
                  }

                  .skills-course-area .skills-course-left .skills-course-links ul li {
                      background-color: var(--white);
                      box-shadow: 0 0 3px var(--light-gray);
                      padding: 15px 10px;
                      margin-bottom: 10px;
                  }

                  .skills-course-area .skills-course-left .skills-course-links ul li a {
                      color: var(--black);
                      font-size: var(--font-size18);
                      font-weight: 700;
                  }

                  .skills-course-area .skills-course-left .skills-course-links ul li a i {
                      width: 30px;
                      height: 30px;
                      border-radius: 50%;
                      line-height: 30px;
                      text-align: center;
                      font-size: var(--font-size14);
                      margin-right: 5px;
                      color: var(--white);
                      background-color: var(--main-color);
                  }
                  /* :right */

                  .skills-course-area .skills-course-right {
                      position: sticky;
                      top: 100px;
                      box-shadow: 0 0 3px var(--light-gray);
                  }

                  .skills-course-area .skills-course-right .accordion-design {
                      overflow-y: scroll;
                      height: 400px;
                  }
                  /* scroll start  */
                  /* width */

                  .skills-course-area .skills-course-right .accordion-design::-webkit-scrollbar {
                      width: 7px;
                  }
                  /* Track */

                  .skills-course-area .skills-course-right .accordion-design::-webkit-scrollbar-track {
                      background: var(--light-gray);
                  }
                  /* Handle */

                  .skills-course-area .skills-course-right .accordion-design::-webkit-scrollbar-thumb {
                      background: var(--main-color);
                  }
                  /* scroll end  */

                  .skills-course-area .skills-course-right .header {
                      display: flex;
                      justify-content: space-between;
                      border-bottom: 1px solid var(--shadow);
                      background-color: var(--white);
                      padding: 15px;
                  }

                  .skills-course-area .skills-course-right .header h3 {
                      font-weight: 700;
                      font-size: var(--font-size20);
                      line-height: 30px;
                      color: var(--black);
                  }

                  .skills-course-area .skills-course-right .header span {
                      font-weight: 500;
                      font-size: var(--font-size12);
                      line-height: 30px;
                      color: var(--black);
                  }

                  .skills-course-area .skills-course-right .skills-course-content ul li a {
                      display: flex;
                      font-weight: 700;
                      font-size: var(--font-size14);
                      color: var(--black);
                      line-height: 27px;
                  }

                  .skills-course-area .skills-course-right .skills-course-content ul li span {
                      margin-right: 4px;
                  }

                  .skills-course-area .skills-course-right .skills-course-content ul li p {
                      font-size: var(--font-size16);
                  }

                  .skills-course-area .skills-course-right .skills-course-content ul li a i {
                      width: 20px;
                      height: 20px;
                      border-radius: 50%;
                      line-height: 20px;
                      text-align: center;
                      font-size: var(--font-size10);
                      color: var(--white);
                      background-color: var(--red);
                      margin-right: 5px;
                  }

                  .skills-course-area .skills-course-right .skills-course-content ul li.video a i {
                      background-color: var(--main-color);
                  }
                  /* accordion start  */

                  .skills-course-area .skills-course-right .accordion-body .skills-course-content {
                      padding: 10px 10px;
                  }

                  .skills-course-area .skills-course-right .accordion-item {
                      border-radius: 10px;
                      background-color: var(--white);
                  }

                  .skills-course-area .skills-course-right .according-content {
                      justify-content: space-between;
                      padding: 10px 10px;
                      border-bottom: 1px solid var(--light-gray);
                  }

                  .skills-course-area .skills-course-right .skills-accordion-header h2 {
                      font-size: var(--font-size16);
                      font-weight: 700;
                      color: var(--black);
                  }

                  .skills-course-area .skills-course-right .skills-accordion-header span {
                      font-size: var(--font-size14);
                      font-weight: 400;
                      color: var(--black-6);
                  }

                  .skills-course-area .skills-course-right .accordint-btn button {
                      outline: none;
                      border: none;
                      background-color: transparent;
                  }

                  .skills-course-area .skills-course-right .accordint-btn button i {
                      font-size: var(--font-size20);
                      color: var(--main-color);
                  }
                  /* accordion end  */
                  /* ===== read title start ======== */

                  .overlay2 {
                      width: 100%;
                      height: 100vh;
                      background-color: var(--light-gray);
                      opacity: 60%;
                      position: fixed;
                      top: 0;
                      left: 0;
                      opacity: 0;
                      z-index: -1;
                  }

                  .showoverlay2 {
                      opacity: 1;
                      z-index: 9999;
                  }

                  .btn-login2 {
                      z-index: 1;
                  }

                  .buy-now-cart2 {
                      width: 70%;
                      height: auto;
                      margin: 0 auto;
                      background-color: var(--white);
                      position: fixed;
                      top: -100%;
                      left: 50%;
                      transform: translate(-50%, -50%);
                      z-index: 9999;
                      transition: all linear -1s;
                  }

                  .showcart2 {
                      top: 75%;
                  }

                  .buy-now-cart2 .buy-icon2 i {
                      position: absolute;
                      right: 0;
                      top: 0;
                      color: var(--white);
                      cursor: pointer;
                      font-size: 40px;
                      width: 50px;
                      height: 50px;
                      line-height: 50px;
                      text-align: center;
                      background-color: var(--btn-color);
                  }
                  /* popup end */

                  .buy-now-cart2 .buy-now-datails2 {
                      padding: 50px;
                  }

                  .buy-now-cart2 .buy-now-datails2 .buy-now-content {
                      background-color: var(--light-gray);
                      /* opacity: 60%; */
                      border: 15px solid var(--btn-color);
                  }

                  .buy-now-cart2 .buy-now-datails2 .buy-now-content .cart-document {
                      width: 100%;
                      height: 100vh;
                      overflow: scroll;
                  }

                  .buy-now-cart2 .buy-now-datails2 .buy-now-content .cart-document img {
                      margin-bottom: 20px;
                      height: auto;
                  }

                  .buy-now-cart2 .buy-now-content img {
                      width: 100%;
                      height: 100%;
                  }
                  /* ====== read title btn end ====== */
                  /* ========================================= skill course page  end ===========================================  */

                   /* ========================================= skill course page  end ===========================================  */


                   /* ========================================= student-panel pages  start =========================================  */


                   /* ============ .student-panel-heading common start ============ */

                   .student-panel-heading h2 {
                       display: inline-block;
                       font-weight: var(--font-semi-bold);
                       font-size: var(--font-size24);
                       color: var(--main-color);
                       margin-bottom: 20px;
                   }


                   /* ============ .student-panel-heading common end ============ */


                   /* ============ header-profile start ============ */

                   .dropdown {
                       position: relative;
                   }

                   ul.navber-item {
                       display: flex;
                       margin: 0;
                   }

                   .dp-main-menu a {
                       font-size: var(--font-size12);
                       color: var(--black);
                       width: 100%;
                       white-space: initial;
                       line-height: 13px;
                       border-bottom: 1px solid var(--light-gray);
                       align-items: center;
                       padding: 10px;
                   }

                   .dp-main-menu a i {
                       margin-right: 10px;
                   }

                   .user-profile-dropdown {
                       margin: 0 10px;
                       display: flex;
                       justify-content: space-between;
                       align-items: center;
                   }

                   .nav-link.user img {
                       width: 30px;
                       height: 30px;
                       border-radius: 50%;
                   }

                   .dropdown-menu {
                       z-index: 111;
                       max-width: 15rem;
                       right: -21px !important;
                       left: auto;
                       min-width: 14rem;
                       padding: 0;
                       border-radius: 5px;
                       --bs-dropdown-link-active-bg: transparent;
                   }

                   .dropdown-item:focus,
                   .dropdown-item:active {
                       color: var(--black-2);
                       background-color: var(--bs-dropdown-link-hover-bg);
                   }

                   img.user-note {
                       width: 35px;
                       height: 35px;
                       margin-right: 10px;
                   }

                   .dp-main-menu {
                       width: 100%;
                       box-shadow: 0px 4px 20px 0px var(--shadow);
                       border-radius: 5px;
                       padding: 10px 6px;
                   }

                   .media {
                       background: var(--main-color);
                       text-align: center;
                       padding: 10px;
                   }

                   img.img-fluid.mr-2 {
                       width: 50px;
                       height: 50px;
                       border-radius: 50%;
                       object-fit: cover;
                   }

                   .media-body p {
                       font-size: var(--font-size12);
                       color: var(--white);
                       font-weight: var(--font-normal);
                       margin-bottom: 0;
                   }


                   /* ============ header-profile end ============ */


                   /* ===================== view-profile page start ===================== */

                   .view-profile-area {
                       padding-top: 120px;
                   }

                   .view-profile-area .view-profile-wrapper {
                       padding: 40px;
                       background-color: var(--white);
                       box-shadow: 0 0 4px var(--light-gray);
                   }

                   .view-profile-area .view-profile-wrapper .view-profile-content {
                       font-weight: 600;
                       font-size: 16px;
                       color: var(--black);
                       line-height: 35px;
                   }

                   .view-profile-area .view-profile-img-upload {
                       width: 80px;
                       height: 80px;
                       margin: 20px 0;
                       position: relative;
                       border-radius: 50%;
                       overflow: hidden;
                   }

                   .view-profile-area .view-profile-img-upload img {
                       width: 100%;
                       height: 100%;
                       object-fit: cover;
                   }


                   /* ===================== view-profile page end ===================== */


                   /* ==================== transactions section start ======================= */

                   .transactions-area {
                       margin-top: 120px;
                   }

                   .transactions-area thead,
                   tr,
                   th {
                       font-weight: var(--font-semi-bold);
                       font-size: var(--font-size16);
                       color: var(--black);
                   }

                   .transactions-area tbody,
                   .transactions-area tr,
                   .transactions-area td {
                       font-weight: var(--font-normal);
                       font-size: var(--font-size16);
                       color: var(--black);
                   }


                   /* ==================== transactions section end ======================= */


                   /* ================== enroll profile page  start ===================== */


                   /* card common start  */

                   .enrolled-wrapper {
                       padding-top: 100px;
                   }

                   .enrolled-wrapper .common-card {
                       background-color: var(--white);
                       box-shadow: 0 0 10px var(--light-gray);
                       border-radius: 3px;
                       overflow: hidden;
                       transition: all linear .2s;
                   }

                   .enrolled-wrapper .common-card:hover {
                       box-shadow: 0 0 8px 4px var(--light-gray);
                   }

                   .enrolled-wrapper .common-card .card-img {
                       width: 100%;
                       height: 240px;
                       overflow: hidden;
                   }

                   .enrolled-wrapper .common-card .card-img img {
                       width: 100%;
                       height: 100%;
                       object-fit: cover;
                       transition: all linear .2s;
                   }

                   .enrolled-wrapper .card-content {
                       padding: 20px;
                   }

                   .enrolled-wrapper .card-content a h2 {
                       color: var(--black);
                       font-size: var(--font-size20);
                       line-height: 27px;
                       font-weight: 500;
                       margin-bottom: 30px;
                       transition: all linear .2s;
                   }

                   .enrolled-wrapper .common-card:hover a h2 {
                       color: var(--main-color);
                   }

                   .enrolled-wrapper .common-card .card-content a h3 {
                       display: inline-block;
                       color: var(--gray);
                       font-size: var(--font-size18);
                       line-height: 22px;
                       font-weight: 600;
                       margin-bottom: 10px;
                   }

                   .enrolled-wrapper .common-card .card-content .details-icon span {
                       color: var(--main-color);
                       font-size: 16px;
                       line-height: 27px;
                       font-weight: 600;
                       padding-bottom: 30px;
                       margin-top: 30px;
                   }

                   .enrolled-wrapper .common-card .card-content .progress {
                       margin: 20px 0;
                       height: 30px;
                   }

                   .enrolled-wrapper .common-card .download-btn a {
                       width: 100%;
                   }


                   /* card common end  */


                   /* ================== enroll profile page  end ===================== */


                   /* ==================== edit-profile page  start ==================== */

                   .edit-profile-area {
                       padding-top: 80px;
                   }

                   .edit-profile-area .edit-profile-wrapper {
                       padding: 40px;
                       background-color: var(--white);
                       box-shadow: 0 0 4px var(--light-gray);
                       border-radius: 4px;
                   }

                   .edit-profile-area .edit-profile-wrapper label {
                       font-weight: var(--font-semi-bold);
                       font-size: var(--font-size20);
                       color: var(--main-color);
                       margin-bottom: 10px;
                   }

                   .edit-profile-area .edit-profile-wrapper .content {
                       padding-top: 20px;
                   }

                   .edit-profile-area .edit-profile-wrapper input,
                   .edit-profile-area .edit-profile-wrapper textarea {
                       width: 100%;
                       padding: 10px;
                       border: 1px solid var(--black);
                       border-radius: 3px;
                       outline: none;
                       margin-bottom: 20px;
                   }

                   .edit-profile-area .edit-profile-wrapper input::placeholder {
                       font-size: 14px;
                       color: var(--black-1);
                       font-weight: var(--font-semi-bold);
                       padding: 10px 0;
                   }

                   .edit-profile-area .edit-profile-wrapper input:focus {
                       border-color: var(--main-color);
                   }


                   /* =============== filter  end =============== */

                   .edit-profile-area .row,
                   .row>.column {
                       padding: 8px;
                   }

                   .column {
                       display: none;
                       margin-bottom: 20px;
                       width: 100%;
                   }

                   .edit-profile-area .row:after {
                       content: "";
                       display: table;
                       clear: both;
                   }

                   .show {
                       display: block;
                   }


                   /* filter btn  */

                   .filter-btn {
                       border: none;
                       outline: none;
                       background-color: var(--white);
                       color: var(--main-color);
                       border-radius: 4px;
                       font-size: var(--font-size14);
                       font-weight: var(--font-semi-bold);
                       margin-right: 10px;
                       padding: 8px 20px;
                       cursor: pointer;
                       box-shadow: 0 0 4px var(--light-gray);
                       transition: all linear .3s
                   }

                   .filter-btn.active1,
                   .filter-btn.active2 {
                       color: var(--white);
                       background-color: var(--main-color);
                   }


                   /* =============== filter  end =============== */


                   /* ================== edit-profile page  end ===================== */


                   /* ========================================= student-panel pages  end ===========================================  */
                   .review-count {
                       color: var(--black);
                   }

                   .hover-btn-color:hover {
                       color: var(--btn-color) !important;
                   }
                   .btn-theme-bg-color {
                       background-color: var(--btn-color) !important;
                       border-color: var(--btn-color) !important;
                       color: var(--bg-color) !important;
                   }