@import url("https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Sarabun:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap");

:root {
  /* fonts  */
  --primary-font: "Poppins", sans-serif;
  --secondary-font: "Roboto", sans-serif;
  --tertiary-font: "Lato", sans-serif;
  --fourth-font: "Sarabun", sans-serif;

  /* color */
  --primary-color: #eb7903;
  --secondary-color: #5340b0;
  --tertiary-color: #f1f4ff;
  --white-color: #ffffff;
  --black-color: #5b5b5b;
  --text-color: #5b5b5b;
  --text-color-1: #4d5765;
  --text-color-2: #1d1b20;
  --blue-text: #0f2239;
  --footer-text: #b3c1d3;
  --card-color: #f1f1f1;
  --blue-color: #5340b0;
  --yelloworange-color: #eb7903;
  --yellow-color-1: #ede409;
  --blue-card-color: #f1f4ff;
  --purple-color: #684d94;
  --dark-btn: #3d3d3d;
  --light-card: #f2f6fa;
  --course-card: #dff0e7;
  --live: rgba(240, 109, 121, 1);
  --bg-blue: #5340b0;
  --info-color: #1eb3bf;

  /* box shadow  */
  --box-shadow: 0 4px 9px -5px rgb(0 0 0 / 0.1), 0 4px 9px -6px rgb(0 0 0 / 0.1);
  /* --box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); */
}

* {
  margin: 0;
  padding: 0;
  box-sizing: none;
  outline: none;
  text-decoration: none;
  list-style: none;
  letter-spacing: 0.3px;
}

body {
  font-family: var(--primary-font);
  margin: 0;
  padding: 0;
  box-sizing: none;
  outline: none;
  overflow-x: hidden;
  position: relative;
  user-select: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
a,
b,
li,
ul,
ol,
a {
  margin: 0;
  padding: 0;
  box-sizing: none;
  outline: none;
  list-style: none;
  letter-spacing: 0.5px;
  text-decoration: none;
  font-size: 16px;
  color: var(--text-color);
}

img {
  width: 100%;
  height: auto;
}

a:hover {
  text-decoration: none;
}

::-webkit-scrollbar {
  width: 3px;
  height: 3px !important;
}

::-webkit-scrollbar-track {
  background-color: var(--white-color);
}

::-webkit-scrollbar-thumb {
  background-color: #cacaca;
  border-radius: 8px;
}

.navbar-toggler:hover,
.btn-close:hover {
  box-sizing: none;
  box-shadow: none;
  border: none;
}

.navbar-toggler:focus,
.btn-close:focus {
  box-sizing: none;
  box-shadow: none;
  border: none;
}

.dropdown:hover .dropdown-menu {
  display: block;
}

/* fonts  */
.primary-font {
  font-family: var(--primary-font) !important;
}

.secondary-font {
  font-family: var(--secondary-font) !important;
}

.tertiary-font {
  font-family: var(--tertiary-font) !important;
}

/* fonts  */

/* headings  */
.heading {
  font-size: 24px;
  color: var(--text-color);
  font-family: var(--tertiary-font);
  font-weight: 700;
}

/* headings  */

/* bg color  */
.bg-primary {
  background-color: var(--primary-color) !important;
}

.bg-secondary {
  background-color: var(--secondary-color) !important;
}

.bg-tertiary {
  background-color: var(--tertiary-color) !important;
}

.bg-blue {
  background-color: var(--blue-color);
}

.bg-blue-1 {
  background-color: #0061f4;
}

.bg-dark-btn {
  background-color: var(--dark-btn);
}

.bg-light-card {
  background-color: var(--light-card);
}

.bg-blue-card-color {
  background-color: var(--blue-card-color);
}

.bg-purple-color {
  background-color: var(--purple-color);
}

.bg-card-color {
  background-color: var(--card-color);
}

.bg-course-card {
  background-color: var(--course-card);
}

.bg-yellow-1 {
  background-color: var(--yellow-color-1) !important;
}

.bg-light-green {
  background-color: #e9f9dc;
}

.bg-light-pink {
  background-color: #fce7ed;
}

.bg-light-purple {
  background-color: #f3e7fe;
}

.bg-light-orange {
  background-color: #fff0dc;
}

.bg-live {
  background-color: var(--live) !important;
}

.bg-text-color {
  background-color: var(--text-color);
}

/* bg color  */

/* text color  */
.heading-text {
  color: var(--text-color) !important;
}

.para-text {
  color: var(--text-color-1);
}

.primary-color {
  color: var(--primary-color);
}

.secondary-color {
  color: var(--secondary-color);
}

.tertiary-color {
  color: var(--tertiary-color);
}

.footer-text {
  color: var(--footer-text);
}

.blue-color {
  color: var(--blue-color) !important;
}

.yellow-color {
  color: var(--yellow-color);
}

.purple-color {
  color: var(--purple-color) !important;
}

.light-green {
  color: #e9f9dc;
}

.light-pink {
  color: #fce7ed;
}

.text-color-2 {
  color: #637381 !important;
}

.text-color-3 {
  color: #b2bcca;
}

/* text color  */

/* box shadow  */
.box-shadow {
  box-shadow: var(--box-shadow);
}

.box-shadow-none {
  box-shadow: none !important;
}

/* box shadow  */

/* padding  */
.section {
  padding: 70px 0px;
}

/* letter-spacing  */
.ls-1 {
  letter-spacing: 1px;
}

.ls-2 {
  letter-spacing: 2px;
}

.ls-3 {
  letter-spacing: 3px;
}

/* letter-spacing  */

/* padding  */

/* font size  */
.fs-6a {
  font-size: 6px !important;
}

.fs-8 {
  font-size: 8px;
}

.fs-10 {
  font-size: 10px !important;
}

.fs-12 {
  font-size: 12px !important;
}

.fs-13 {
  font-size: 13px !important;
}

.fs-14 {
  font-size: 14px !important;
}

.fs-15 {
  font-size: 15px !important;
}

.fs-16 {
  font-size: 16px !important;
}

.fs-17 {
  font-size: 17px !important;
}

.fs-18 {
  font-size: 18px;
}

.fs-20 {
  font-size: 20px !important;
}

.fs-22 {
  font-size: 22px !important;
}

.fs-24 {
  font-size: 24px !important;
}

.fs-26 {
  font-size: 26px !important;
}

.fs-28 {
  font-size: 28px !important;
}

.fs-30 {
  font-size: 30px !important;
}

.fs-32 {
  font-size: 32px !important;
}

/* font size  */

/* border  */
.border-bottom {
  border-bottom: 1px solid #808080;
}

.border-top {
  border-top: 1px solid #f1f1f1;
}

.border-right {
  border-right: 1px solid #808080;
}

.border-left {
  border-left: 1px solid #808080;
}

.border-all {
  border: 1px solid var(--card-color);
}

.border-all-1 {
  border: 1px solid #808080;
}

s .border-light-all {
  border: 1px solid #e9eaf0;
}

.border-light-all-1 {
  border: 2px solid rgba(231, 231, 231, 1);
}

.border-dashed {
  border: 1px dashed var(--black-color);
}

.border-dashed-bottom {
  border-bottom: 1px dashed var(--black-color);
}

.border-primary {
  border: 1px solid var(--primary-color);
}

.border-bottom-primary {
  border-bottom: 2px solid var(--primary-color);
}

.border-blue {
  border: 1px solid var(--secondary-color) !important;
}

.border-red-top {
  border-top: 2px solid #dd3646;
}

.border-dashed-top {
  border-top: 1px dashed #dd3646;
}

.border-bottom-2 {
  border-bottom: 2px solid var(--text-color-1) !important;
}

.boredr-blue-top {
  border-top: 2px solid #5facdf !important;
}

.border-secondary-all {
  border: 1px solid var(--secondary-color);
}

.card-border-2px {
  border: 2px solid rgba(0, 0, 0, 0.1) !important;
}

/* border  */

/* font weight  */
.fw-semibold {
  font-weight: 600;
}

.fw-extrabold {
  font-weight: 900;
}

/* font weight  */

.list-style-type {
  list-style-type: disc;
  list-style-position: inside;
}

.btn-color {
  background-color: #f46d0d;
}

/* form  */

.form-control,
.form-select {
  padding: 14px;
  border: 1px solid #adadad;
}

.form-control:focus,
.form-control:hover,
.form-select:focus,
.form-select:hover,
.form-check-input:focus,
.form-check-input:hover {
  box-shadow: none;
  border: 1px solid rgba(30, 30, 30, 0.6);
}

.form-icons {
  position: relative;
}

.form-icons input {
  padding-left: 35px;
}

.form-icons .img {
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  width: 25px;
}

.form-icons .img-right {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  width: 25px;
}

.form-check-input:checked {
  background: #4f4f4f;
  border: transparent;
  box-shadow: none;
}

.form-check-input[type="checkbox"] {
  border-radius: 3px;
}

.form-check-input:checked[type="checkbox"] {
  background-image: url("../img/New/check-mark.png") !important;
}

.form-check-input:checked[type="checkbox"] {
  background-image: url("../img/check.svg") !important;
}

.green .form-check-input:checked {
  background: var(--primary-color) !important;
  border: transparent !important;
}

.green .form-check-input:checked[type="checkbox"] {
  background-image: url("../img/check.svg") !important;
}

/* form  */

/* card  */
.card-color {
  background-color: var(--card-color);
}

/* card  */

/* img-circle */
.img-circle {
  width: 70px;
  height: 70px;
  border: 3px solid var(--white-color);
}

.img-square {
  width: 150px;
  height: 150px;
  background-color: #e8e8e8;
}

.img-black-layer {
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.5)),
    url("../img/New/gk-details.png") no-repeat center center;
  background-size: cover;
  height: 180px;
  border-radius: 10px;
}

/* img-circle */

/* swiper  */
.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* swiper  */

/* bg img  */
.bg-img {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

/* bg img  */

/* =========================== active class =========================== */
.blue-card {
  background-color: var(--secondary-color);
  color: var(--white-color);
  border: transparent;
}

.blue-card h3 {
  color: var(--white-color);
}

.blue-card p {
  color: var(--white-color);
}

/* course-details-tabs */
.course-details-tabs {
  color: var(--primary-color);
  border-bottom: 2px solid var(--primary-color);
}

/* course-details-tabs */

/* =========================== active class =========================== */

/* btn  */
.btn-white-border {
  padding: 10px 30px;
  border: 1px solid var(--white-color);
  transition: all 0.3s ease-in-out;
}

.btn-white-border:hover {
  background-color: var(--white-color);
  color: var(--black-color) !important;
  font-weight: 600;
}

.green-linear-bg {
  background: linear-gradient(rgba(117, 205, 37, 1), rgba(37, 205, 113, 1));
}

/* btn  */

/* vertical-btn */
.vertical-btn {
  padding: 10px 25px;
  border: 0;
  outline: 0;
  transition: 0.5s ease all;
  position: fixed;
  top: 80%;
  right: -70px;
  transform: translateY(-50%) rotate(-90deg);
  z-index: 10;
}

/* vertical-btn */

/* .accordion */
.my-account .accordion-button::after {
  background-image: url("../img/play.png") !important;
}

.my-account .accordion-button:not(.collapsed)::after {
  background-image: url("../img/play.png") !important;
  /* background-image: url('../img/package-select/minus-sign.png') !important; */
}

/* .accordion */
.icon-button::after {
  background-image: url("../img/play.png") !important;
}

.icon-button:not(.collapsed)::after {
  background-image: url("../img/play.png") !important;
  /* background-image: url('../img/package-select/minus-sign.png') !important; */
}

.accordion-button:focus {
  box-shadow: none;
}

.accordion-button:not(.collapsed) {
  background-color: transparent;
  color: var(--text-color-1);
}

.accordion-button {
  padding: 25px 5px;
}

.accordion-body {
  padding: 20px 5px;
}

.accordion-button:not(.collapsed) {
  box-shadow: none;
}

del {
  text-decoration: line-through;
}

.text-ellipsis {
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* column-5 */
.column-5 {
  width: 20%;
}

/* column-5 */

/* width  */
.w-20 {
  width: 20px;
}

.w-25a {
  width: 25px;
}

.w-30 {
  width: 30px;
}

.w-40 {
  width: 40px;
}

.w-50a {
  width: 50px;
}

.w-60 {
  width: 60px;
}

.w-70 {
  width: 70px;
}

.w-80 {
  width: 80px;
}

.w-90 {
  width: 90px;
}

.w-100 {
  width: 100px;
}

/* width  */

.line-pattern {
  width: 50px;
  height: 2px;
  background-color: var(--primary-color);
}

/* active class  */
.sessionsactive {
  background-color: transparent;
  border-left: 2px solid var(--primary-color) !important;
  color: var(--text-color);
  font-weight: 500;
  border: 0px;
  border-bottom: 1px solid var(--light-card) !important;
}

.quizanswer {
  background-color: #f2f8e7 !important;
  border: transparent !important;
}

/* active class  */

/* tabs  */
/* green  */
.green-tabs .nav-item .nav-link.active {
  background-color: #f2f8e7;
  color: var(--primary-color);
  font-weight: 500;
  border-bottom: 2px solid var(--primary-color);
}

.green-tabs .nav-item .nav-link:not(.active) {
  background-color: transparent !important;
}

.green-tabs .nav-item .nav-link {
  color: #7c828f;
}

/* green  */

/* purple tabs  */
.purple-tabs .nav-item .nav-link.active {
  background-color: transparent;
  border-bottom: 2px solid var(--purple-color);
  color: #666666 !important;
}

/* purple tabs  */

/* black-tabs */
.black-tabs .nav-item .nav-link.active {
  background-color: #4e4e4e;
  color: var(--white-color);
  font-weight: 600;
}

.black-tabs .nav-item .nav-link {
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: var(--text-color);
  font-weight: 400;
  margin: 0px 5px !important;
}

/* black-tabs  */

/* light primary tabs  */
.light-primary-tabs .nav .nav-link.active {
  background: rgba(242, 248, 231, 1);
  color: var(--text-color);
}

/* light primary tabs  */
/* gray-tabs */
.gray-tabs .nav .nav-link.active {
  background-color: #efefef !important;
}

.gray-tabs .nav .nav-link {
  border: 2px solid #f0f0f0;
}

/* gray-tabs */
/* tabs  */

/* radio buttons  */
.greenradio .form-check-input[type="radio"] {
  border: 1px solid var(--primary-color) !important;
}

.greenradio .form-check-input:checked {
  background-color: var(--primary-color) !important;
  color: var(--white-color) !important;
}

/* radio buttons  */

/* course details  */
.course-details-content {
  max-height: 100px;
  overflow: hidden;
  transition: max-height 0.5s ease-in-out;
}

.hidden-radio {
  display: none;
}

.radio-button {
  display: inline-block;
}

.radio-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--primary-color);
  border-radius: 5px;
  padding: 10px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}

.icon {
  font-size: 24px;
}

.text {
  margin-top: 5px;
}

.hidden-radio:checked+.radio-label {
  background-color: var(--primary-color);
  color: white;
}

.rate {
  float: left;
  height: 46px;
}

.rate:not(:checked)>input {
  position: absolute;
  top: -9999px;
}

.rate:not(:checked)>label {
  float: right;
  width: 1em;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
  font-size: 30px;
  color: #ccc;
}

.rate:not(:checked)>label:before {
  content: "★ ";
}

.rate>input:checked~label {
  color: #ffc700;
}

.rate:not(:checked)>label:hover,
.rate:not(:checked)>label:hover~label {
  color: #deb217;
}

.rate>input:checked+label:hover,
.rate>input:checked+label:hover~label,
.rate>input:checked~label:hover,
.rate>input:checked~label:hover~label,
.rate>label:hover~input:checked~label {
  color: #c59b08;
}

.columns-1 {
  width: 1.333333%;
}

.columns-11 {
  width: 95.666667%;
}

.wrong-color {
  color: #a23829;
}

.wrong-bg {
  background: #ebd6c7;
}

.correct-answer-color {
  color: #78a229;
}

.correct-answer-bg {
  background: #d5ebc7;
}

/* changes  */
.bg-menu-theme .menu-link,
.bg-menu-theme .menu-horizontal-prev,
.bg-menu-theme .menu-horizontal-next {
  color: #ffffff !important;
}

.my-course-list img {
  width: 100%;
  object-fit: contain !important;
  height: 90px;
  border-radius: 10px !important;
}

.course-details-img {
  border: 2px solid #d0dfd7 !important;
  background: #dff0e7 !important;
}

.course-details-img img {
  width: 100% !important;
  height: 120px !important;
  object-fit: contain !important;
}

/* changes */