@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap");

:root {
  --bg-body: #ffffff;
  --primary-color: #f8ac50;
  --text-color: #0d0d0d;
  --second-basic-color: #0d0d0d;
  --bg-swiper: #ffffff;
  --border-color: #fae8ce;
  --basic-color: #ffffff;
  --hover-color: #fef3e6;
  --secondary-hover: #e09c49;
  --sub-title: #6f6f6f;
  --input-border: #f2f2f2;
  --placeholder-color: #b1b1b1;
  --accordion: #fffaf4;
  --cancel-btn: #c52d2d;
  --input-label: #1a1a1a;
  --auth-border: #e7e7e7;
  --completed-color: #27ae60;
  --bg-completed: #f0f9f4;
  --not-complete: #e4e4e4;
  --label-profile: #6b7177;
  --cancel-payment: #f40000;
  --course-card: #ffffff;
  --inside-progress: #f0f9f4;
  --auth-bg: #00000000;
}

body.dark {
  --primary-color: #f8ac50;
  --text-color: #ffffff;
  --border-color: #222222;
  --second-basic-color: #0d0d0d;
  --basic-color: #ffffff;
  --bg-body: #131313;
  --bg-swiper: #0d0d0d;
  --accordion: #131313;
  --input-border: #222222;
  --bg-completed: #171717;
  --course-card: #171717;
  --inside-progress: #f0f9f4;
  --auth-bg: #131313;
}

body {
  font-family: "IBM Plex Sans Arabic", sans-serif;
}

.author img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.course-card .course-img {
  overflow: hidden;
}

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

body.dark .devolum-appbar .pages .light {
  display: none;
}

body.dark .devolum-appbar .pages .dark {
  display: flex;
}

body.dark .devolum-header {
  background-image: none;
  background-color: var(--course-card);
}

body.dark .devolum-banner .banner {
  background-image: none;
  background-color: var(--course-card);
  box-shadow: 0px 7px 58px 0px rgba(15, 15, 15, 0.3019607843);
  border: 1px solid var(--border-color);
}

body.dark .devolum-contact .contact-banner {
  background-image: none;
  background-color: var(--course-card);
  box-shadow: 0px 7px 58px 0px rgba(15, 15, 15, 0.3019607843);
  border: 1px solid var(--border-color);
}

.float-whats {
  padding: 8px 16px;
  position: fixed;
  bottom: 40px;
  right: 30px;
  background-color: var(--primary-color);
  color: var(--basic-color);
  text-align: center;
  font-size: 25px;
  z-index: 100;
  border: 2px solid var(--primary-color);
  transition: 0.5s all ease;
  border-radius: 50%;
}

.first-float {
  /* line-height: 2; */
}

.float-whats:hover {
  border: 2px solid var(--primary-color);
  color: var(--primary-color);
  background: transparent;
}

/* @media (max-width: 600px) {
  .float-whats {
    display: none;
  }
} */

body.dark .devolum-footer {
  background-image: none;
}

body.dark .devolum-footer .footer .light {
  display: none;
}

body.dark .devolum-footer .footer .dark {
  display: flex;
}

body.dark .course-card {
  box-shadow: none;
}

body.dark .course-card .description .fav .light {
  display: none;
}

body.dark .course-card .description .fav .dark {
  display: flex;
}

body.dark .price-card {
  box-shadow: none;
  background-color: var(--course-card);
}

body.dark .devolum-page-courses .filter-courses {
  box-shadow: none;
}

body.dark .devolum-single-courses .overview,
body.dark .devolum-single-courses .about-instructor,
body.dark .devolum-single-courses .lectures,
body.dark .devolum-single-courses .advantages {
  box-shadow: none;
}

body.dark .devolum-payment .payment {
  box-shadow: none;
}

body.dark .devolum-single-mycourses .about-lec {
  box-shadow: none;
}

body.dark .devolum-single-mycourses .lec-files .file-bar {
  box-shadow: none;
}

body.dark .share-modal .modal-content .modal-body .modal-title .btn-close {
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e")
    center/1em auto no-repeat;
}

body.dark .devolum-profile .profile-settings,
body.dark .devolum-profile .settings-content {
  box-shadow: none;
}

body.dark .modal-auth .modal-dialog .modal-content {
  box-shadow: none;
}

body.dark .devolum-auth .auth .auth-card {
  box-shadow: none;
}

.container-fluid {
  max-width: 1350px;
}

section {
  margin-bottom: 80px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

.logo-img {
  margin-inline-end: 60px;
  max-width: 90px;
  min-width: 70px;
}

.logo-img img {
  width: 100%;
}

.auth-btn {
  display: flex;
  align-items: center;
  color: var(--primary-color);
  margin-inline-end: 15px;
  cursor: pointer;
}

.auth-btn:hover {
  color: var(--secondary-hover);
}

.auth-btn:hover img {
  filter: brightness(0) saturate(100%) invert(89%) sepia(9%) saturate(7495%)
    hue-rotate(324deg) brightness(94%) contrast(86%);
}

.devolum-appbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-color);
  padding: 15px 0;
} 
.pt-52{
  padding-top: 52px !important ;
}

.devolum-appbar .pages {
  display: flex;
  align-items: center;
}

.devolum-appbar .pages .dark {
  display: none;
}

.devolum-appbar .pages ul {
  display: flex;
  align-items: center;
}

.devolum-appbar .pages ul li:not(:last-child) {
  margin-inline-end: 30px;
}

.devolum-appbar .pages ul li a {
  color: var(--text-color);
  font-weight: 700;
}

.devolum-appbar .pages ul li a:hover,
.devolum-appbar .pages ul li a.active {
  color: var(--primary-color);
}

.devolum-appbar .settings {
  display: flex;
  align-items: center;
}

.devolum-appbar .settings hr {
  border: none;
  border-left: 2px solid var(--border-color);
  height: 60px;
  margin-inline-end: 15px;
  width: 1px;
  border-radius: 5px;
  margin-top: 0;
  margin-bottom: 0;
  opacity: 1;
}

.devolum-appbar .settings .account {
  display: flex;
  align-items: center;
  margin-inline-end: 15px;
}

.devolum-appbar .settings .account .acc-img {
  margin-inline-end: 10px;
  max-width: 48px;
}

.devolum-appbar .settings .account .acc-img img {
  width: 100%;
}

.devolum-appbar .settings .account .acc-info div {
  color: var(--text-color);
  font-weight: 700;
  font-size: 15px;
}

.devolum-appbar .settings .account .acc-info span {
  color: var(--sub-title);
  font-size: 15px;
}

.devolum-appbar .settings .btns {
  display: flex;
  align-items: center;
}

.devolum-appbar .settings .btns .dark-mode,
.devolum-appbar .settings .btns .search,
.devolum-appbar .settings .btns .lang {
  border: none;
  background-color: transparent;
  margin: 0;
  padding: 0;
}

.devolum-appbar .settings .btns .dark-mode .toggle-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.devolum-appbar .settings .btns .dark-mode .toggle-wrap .toggle-switch {
  width: 0;
  height: 0;
  visibility: hidden;
}

.devolum-appbar .settings .btns .dark-mode .toggle-wrap .toggle {
  position: relative;
  padding: 20px;
  border-radius: 100px;
  width: 90px;
  padding: 23px 0;
  background-color: transparent;
  border: 1px solid var(--primary-color);
  cursor: pointer;
}

.devolum-appbar .settings .btns .dark-mode .toggle-wrap .toggle::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 8px;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  transition: all 0.3s ease-in-out;
  background-color: var(--primary-color);
}

.devolum-appbar .settings .btns .dark-mode .toggle-wrap .toggle .moon,
.devolum-appbar .settings .btns .dark-mode .toggle-wrap .toggle .sun {
  position: absolute;
  font-size: 40px;
  z-index: 1;
}

.devolum-appbar .settings .btns .dark-mode .toggle-wrap .toggle .moon {
  top: 12px;
  right: 10px;
}

.devolum-appbar .settings .btns .dark-mode .toggle-wrap .toggle .sun {
  top: 12px;
  left: 16px;
}

.devolum-appbar .settings .btns .dark-mode .toggle-wrap .background {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.devolum-appbar
  .settings
  .btns
  .dark-mode
  .toggle-wrap
  .toggle-switch:checked
  ~ .text {
  color: var(--basic-color);
}

.devolum-appbar
  .settings
  .btns
  .dark-mode
  .toggle-wrap
  .toggle-switch:checked
  ~ .toggle::after {
  transform: translateX(41px);
}

.devolum-appbar
  .settings
  .btns
  .dark-mode
  .toggle-wrap
  .toggle-switch:checked
  ~ .toggle
  .sun {
  filter: invert(38%) sepia(11%) saturate(9%) hue-rotate(75deg) brightness(101%)
    contrast(84%);
}

.devolum-appbar
  .settings
  .btns
  .dark-mode
  .toggle-wrap
  .toggle-switch:checked
  ~ .toggle
  .moon {
  filter: invert(0%) sepia(142%) saturate(15%) hue-rotate(261deg)
    brightness(103%) contrast(105%);
}

.devolum-appbar .settings .btns .search {
  border: 1px solid var(--border-color);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.devolum-appbar .settings .btns .search:hover {
  background-color: var(--hover-color);
}

.devolum-appbar .settings .btns .lang {
  min-width: 30px;
}

.devolum-appbar .settings .btns .lang img {
  width: 100%;
}

.devolum-appbar .settings .btns button:not(:last-child) {
  margin-inline-end: 10px;
}

.devolum-appbar .settings .mob-menu {
  display: none;
  color: var(--primary-color);
  font-size: 20px;
}

@media (max-width: 900px) {
  .devolum-appbar .pages ul {
    display: none;
  }

  .devolum-appbar .settings .auth-btn,
  .devolum-appbar .settings .account {
    display: none;
  }

  .devolum-appbar .settings hr {
    display: none;
  }

  .devolum-appbar .settings .btns .dark-mode .toggle-wrap .toggle {
    width: 85px;
    padding: 18px 0;
  }

  .devolum-appbar .settings .btns .dark-mode .toggle-wrap .toggle .moon {
    top: 7px;
    right: 8px;
  }

  .devolum-appbar .settings .btns .dark-mode .toggle-wrap .toggle .sun {
    top: 7px;
    left: 8px;
  }

  .devolum-appbar .settings .btns .dark-mode .toggle-wrap .toggle::after {
    top: 3px;
    left: 4px;
    width: 30px;
    height: 30px;
  }

  .devolum-appbar
    .settings
    .btns
    .dark-mode
    .toggle-wrap
    .toggle-switch:checked
    ~ .toggle::after {
    transform: translateX(45px);
  }

  .devolum-appbar .settings .btns .search {
    display: none;
  }

  .devolum-appbar .settings .btns button {
    margin-inline-end: 10px !important;
  }

  .devolum-appbar .settings .mob-menu {
    display: flex;
  }
}

.start_now {
  background-color: var(--primary-color);
  color: var(--second-basic-color);
  border-radius: 16px;
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  font-weight: 700;
}

.mybtn {
  padding: 16px;
  /* margin-bottom: 20px; */
  background-color: var(--primary-color);
  color: var(--basic-color);
  border-radius: 16px;
  min-width: 160px !important;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  font-weight: 700;
  /* width: 100%; */
}
.my-btn {
  color: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  font-weight: 700;
}
.my-btn .fa-arrow-left-long {
  padding: 6px;
}
.mybtn:hover {
  background-color: var(--secondary-hover);
}

.iti--allow-dropdown {
  width: 100%;
}
.devolum-course-title {
  margin-bottom: 0 !important;
}
.devolum-course-top-bar {
  margin-bottom: 32px;
}
.iti--allow-dropdown .iti__flag-container {
  direction: ltr;
  left: -1px;
}

.iti--allow-dropdown .iti__flag-container .iti__selected-flag {
  border-radius: 15px;
  background-color: transparent;
  padding: 0 6px 0 15px;
}

.iti--allow-dropdown
  .iti__flag-container
  .iti__selected-flag
  .iti__selected-dial-code {
  font-weight: 700;
  color: var(--text-color);
  font-size: 14px;
}

.iti--allow-dropdown input {
  height: 100%;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.lectures .accordion {
  --bs-accordion-border-color: none;
}

.lectures .accordion .accordion-item {
  margin-bottom: 10px;
  background-color: var(--course-card);
}
.course-card .course-img::after {
  content: url(http://127.0.0.1:8000/website/img/wave.svg) !important;
}
.lectures .accordion .accordion-item .accordion-button {
  background-color: var(--accordion);
  border-radius: 10px;
  color: var(--text-color);
  font-weight: 700;
}

.lectures .accordion .accordion-item .accordion-button:focus-visible {
  outline: none;
}

.lectures .accordion .accordion-item .accordion-button:focus {
  box-shadow: 0 0 0 0.25rem rgba(241, 241, 194, 0.3);
}

.lectures .accordion .accordion-item .accordion-button::after {
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f8ac50'%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")
    center/1em auto no-repeat;
  opacity: 1;
  transition: 0.5s;
}
.lectures .accordion .accordion-item .accordion-body .lecture-card {
  display: flex;
  flex-direction: column;
}

.lectures
  .accordion
  .accordion-item
  .accordion-body
  .lecture-card
  .lecture-name {
  font-weight: 700;
  color: var(--text-color);
  font-size: 15px;
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

.lectures
  .accordion
  .accordion-item
  .accordion-body
  .lecture-card
  .lecture-name
  .badge {
  background-color: var(--accordion);
  margin: 0 5px;
}

.lectures .accordion .accordion-item .accordion-body .lecture-card .duration {
  font-size: 13px;
  color: var(--text-color);
}

.lectures .accordion .accordion-item .accordion-body hr {
  color: var(--border-color);
  opacity: 1;
  margin: 20px 0;
}

.title {
  display: flex;
  margin-bottom: 30px;
  align-items: start;
}

.title .title-img {
  max-width: 35px;
  min-width: 35px;
  margin-inline-end: 5px;
}

.title .title-img img {
  width: 100%;
}

.title .headline h4 {
  color: var(--text-color);
  font-weight: 700;
  font-size: 35px;
  margin-bottom: 0;
}

.title .headline span {
  color: var(--sub-title);
}

@media (max-width: 768px) {
  .title .headline h4 {
    font-size: 30px;
  }
}

.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media (max-width: 500px) {
  .top-bar {
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }

  .top-bar .title {
    margin-bottom: 20px;
  }

  .top-bar .title .headline span {
    font-size: 11px;
  }

  .top-bar a:has(.mybtn) {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 40px;
  }
}

.swiper-btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  color: var(--primary-color);
}
.swiper {
  display: flex;
  justify-content: space-between;
}
.swiper-btn .custom-swiper-button-next,
.swiper-btn .custom-swiper-button-prev {
  font-size: 20px;
  border: 1px solid var(--primary-color);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-btn .custom-swiper-button-next:hover,
.swiper-btn .custom-swiper-button-prev:hover {
  background-color: var(--hover-color);
}

@media (max-width: 700px) {
  .swiper-btn {
    position: inherit;
  }
}

.course-card {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  box-shadow: 0px 4px 25px 0px rgba(179, 179, 179, 0.15);

  border-radius: 30px;
  background-color: var(--course-card);
  overflow: hidden;
}

.course-card i {
  position: absolute;
  top: 35%;
  right: 50%;
  transform: translate(50%, -50%);
  font-size: 54px;
  color: wheat;
  cursor: pointer;
}

.course-card i::before {
  position: relative;
  z-index: 2;
}

.course-card i::after {
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(50%, -50%);
  content: "";
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #171717;
  z-index: 1;
  animation-name: example;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

@keyframes example {
  from {
    transform: translate(50%, -50%) scale(1);
    opacity: 1;
  }

  to {
    transform: translate(50%, -50%) scale(2.5);
    opacity: 0;
  }
}

.course-card .course-img {
  /* position: relative; */

  overflow: hidden;
}
.course-card .devolum-course-img::after {
  content: "" !important;
}
.course-card .course-img img {
  /* width: 100%;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px; */
  width: 100%;
  /* height: 180px; */
  object-fit: cover;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
}

.course-card .description {
  /* padding: 25px 30px;
  padding-top: 5px; */
  /* padding: 25px 30px;
  flex: 1; */
  padding: 20px;
  /* margin-top: auto; */
  display: flex;
  flex: 1;
  /* flex-direction: column; */
  align-items: start;
  justify-content: space-between;
 
}
.description-course-box{
  display: block !important;
}
.course-pro-name{
  height: 60px ;
}
.course-card .description:has(.fav) {
  display: flex;
  align-items: center;
}

.course-card .description .fav .light {
  display: flex;
}

.course-card .description .fav .dark {
  display: none;
}
.sidenav .light-img {
  display: none;
}
.sidenav.dark .light-img {
  display: block;
}
.sidenav.dark .dark-img {
  display: none;
}
.course-card .description .course-name {
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 15px;
  color: var(--text-color);
}

.course-card .description .author {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.course-card .description .author .name {
  display: flex;
  align-items: center;
  color: var(--sub-title);
  font-weight: 700;
  font-size: 14px;
}

.course-card .description .author .name .img {
  max-width: 50px;
  margin-inline-end: 10px;
}
.course-card .description .author .name .profile-circle-img {
  margin-inline-end: 16
  px;
}

.profile-circle-img img{
  width: 50px !important;
  height: 50px !important;
  border-radius: 50%;
}
.course-card .description .author .name .img img {
  width: 100%;
}

.course-card .description .author .duration {
  display: flex;
  align-items: center;
  color: var(--sub-title);
  font-size: 12px;
}

.course-card .description .author .duration .clock-img {
  width: 18px;
  margin-inline-end: 5px;
}

.course-card .description .author .duration .clock-img img {
  width: 100%;
}

.course-card .description .fancybox {
  width: 100%;
}

.course-card .description .fancybox .mybtn {
  width: 100%;
}

.course-card .description .progress-bar {
  margin: 20px 0;
}

.course-card .description .progress-bar .progress-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.course-card .description .progress-bar .progress-container #myBarContainer {
  position: relative;
  width: 100%;
  height: 16px;
  background-color: var(--accordion);
  border-radius: 15px;
}

.course-card
  .description
  .progress-bar
  .progress-container
  #myBarContainer
  #myBar {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 40%;
  transition: width 0.1s;
  border-radius: 15px;
  background-color: var(--primary-color);
}

.course-card .description .progress-bar .progress-container #demo {
  margin: 0;
  margin-top: 5px;
  font-weight: 700;
  font-size: 14px;
  color: var(--primary-color);
  position: relative;
}

.course-card:hover {
  transform: scaleX(10px);
}

.badge {
  color: var(--primary-color);
  background-color: var(--border-color);
  padding: 14px 16px;
  border-radius: 100px;
  margin-bottom: 20px;
  font-weight: 700;
}

button {
  border: none;
  background-color: transparent;
}

.price-card {
  box-shadow: 0px 7px 58px 0px rgba(177, 177, 177, 0.1019607843);
  border-radius: 30px;
  color: var(--text-color);
}

.price-card .price-img {
  width: 100%;
}

.price-card .price-img img {
  margin: auto;
  padding-top: 24px;
  width: 50%;
  display: flex;
}

.price-card .content {
  padding: 30px 60px;
}

.price-card .content .price,
.price-card .content .definition,
.price-card .content ul {
  margin-bottom: 40px;
}

.price-card .content .price {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.price-card .content .price span {
  font-size: 18px;
  margin-bottom: 10px;
}

.price-card .content .price div {
  font-weight: 700;
  font-size: 40px;
}

.price-card .content .definition {
  color: var(--sub-title);
  display: flex;
}

.price-card .content ul li {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  font-weight: 700;
}

.price-card .content ul li .correct {
  margin-inline-end: 10px;
}

.price-card .content .mybtn {
  width: 100%;
}

@media (max-width: 465px) {
  .price-card .content {
    padding: 30px;
  }
}

.myinput {
  margin-bottom: 20px;
  position: relative;
}

.myinput label {
  color: var(--input-label);
  margin-bottom: 10px;
}

.myinput .input-group {
  width: 100% !important;
  flex-wrap: nowrap;
}

.myinput .input-group .input-group-text {
  border-radius: 15px;
  background-color: transparent;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  background-color: var(--bg-body);
  border: 1px solid var(--input-border);
  padding: 15px;
}

.myinput .input-group .input-group-text img {
  width: 20px;
}

.myinput .input-group input {
  border: 1px solid var(--input-border);
  border-radius: 15px;
  padding: 10px 10px;
  background-color: var(--bg-body);
}

.myinput .input-group input::-moz-placeholder {
  color: var(--placeholder-color);
  font-size: 14px;
}

.myinput .input-group input::placeholder {
  color: var(--placeholder-color);
  font-size: 14px;
}

.myinput .input-group input:focus-visible {
  outline: none;
}

.myinput .input-group input:focus {
  box-shadow: 0 0 0 0.25rem rgba(222, 211, 168, 0.25);
}

.myinput .reveal-pass .fa-eye {
  position: absolute;
  bottom: 16px;
  left: 15px;
  z-index: 5;
}
.eye-login{
  bottom: 45px !important;
}
.myinput .reveal-pass .fa-eye-slash {
  position: absolute;
  bottom: 16px;
  left: 14px;
  z-index: 5;
}
.myinput .forget-pass-btn {
  color: var(--primary-color);
  font-weight: 700;
  text-align: end;
  display: flex;
  justify-content: flex-end;
  margin-top: 5px;
  margin-bottom: 30px;
}

.myinput .forget-pass-btn:hover {
  color: var(--secondary-hover);
}

.myinput:has(.forget-pass-btn) .reveal-pass {
  bottom: 43px;
}

input[type="email"]::-moz-placeholder {
  text-align: right;
}

input[type="email"]::placeholder {
  text-align: right;
}

.course-img.single-course-img {
  /* min-height: 350px; */
}

.fav {
  /* border: 1px solid var(--primary-color);
  border-radius: 15px; */
  padding: 6px;
  margin-inline-end: 15px;
}

.fav .icon {
  max-width: 18px;
  min-width: 18px;
}

.fav .icon img {
  width: 100%;
}

.fav.active img {
  filter: brightness(0) saturate(100%) invert(86%) sepia(45%) saturate(2376%)
    hue-rotate(322deg) brightness(103%) contrast(94%);
}

.devolum-header {
  display: flex;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.devolum-header .intro {
  display: flex;
  justify-content: center;
  height: 100%;
  padding: 70px 0;
}

.devolum-header .intro:has(.page-headline) {
  justify-content: flex-start;
}

.devolum-header .intro:has(.single-headline) {
  justify-content: flex-start;
}

.devolum-header .intro .headline {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

@media (max-width: 767px) {
  .devolum-header .intro .headline {
    text-align: center;
  }
}

.devolum-header .intro .headline span {
  color: var(--text-color);
  font-size: 20px;
  margin-bottom: 15px;
}

.devolum-header .intro .headline h1 {
  margin-inline-end: 30px;
  font-weight: 700;
  font-size: 50px;
  line-height: 65px;
  margin-bottom: 40px;
  color: var(--text-color);
}

.devolum-header .intro .headline .all-btns {
  display: flex;
  align-items: center;
}

.devolum-header .intro .headline .all-btns .mybtn {
  color: var(--basic-color);
}

.devolum-header .intro .headline .all-btns a:not(:last-child) {
  margin-inline-end: 10px;
}

@media (max-width: 767px) {
  .devolum-header .intro .headline .all-btns a {
    flex: 1;
  }
}

.devolum-header .intro .headline .all-btns .courses {
  background-color: transparent;
  border: 1px solid var(--primary-color);
  color: var(--primary-color);
}

.devolum-header .intro .headline .all-btns .courses:hover {
  background-color: var(--primary-color);
  color: var(--basic-color);
}

.devolum-header .intro .page-headline {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.devolum-header .intro .page-headline h3 {
  font-size: 48px;
  font-weight: 700;
  color: var(--primary-color);
}
@media (max-width: 600px) {
  .devolum-header .intro .page-headline h3 {
    font-size: 32px;
  }
}
.devolum-register-btn {
  min-width: 250px !important;
}
.devolum-header .intro .page-headline .devolum-breadcrumb .mybreadcrumb {
  margin-top: 20px;
}

.devolum-header .intro .page-headline .devolum-breadcrumb .mybreadcrumb ol li {
  font-weight: 400;
  font-size: 16px;
}

.devolum-header
  .intro
  .page-headline
  .devolum-breadcrumb
  .mybreadcrumb
  ol
  li
  a {
  color: var(--text-color);
}

.devolum-header
  .intro
  .page-headline
  .devolum-breadcrumb
  .mybreadcrumb
  ol
  .breadcrumb-item.active {
  color: var(--text-color);
  font-weight: 700;
}

.devolum-header .intro .single-headline h3 {
  color: var(--text-color);
  font-weight: 700;
  font-size: 46px;
}

@media (max-width: 1000px) {
  .devolum-header .intro .single-headline h3 {
    font-size: 40px;
  }
}

@media (max-width: 880px) {
  .devolum-header .intro .single-headline h3 {
    font-size: 35px;
  }
}

@media (max-width: 900px) {
  .devolum-header .intro .headline h1 {
    margin-inline-end: 10px;
    font-weight: 700;
    font-size: 40px;
    line-height: 50px;
    margin-bottom: 40px;
  }
}

@media (max-width: 370px) {
  .devolum-header .intro .headline .all-btns {
    flex-direction: column;
  }

  .devolum-header .intro .headline .all-btns a:not(:last-child) {
    margin-inline-end: 0;
    margin-bottom: 10px;
  }
}

.sidenav.dark {
  background: #131313;
}

.sidenav {
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: 99;
  top: 0;
  bottom: 0;
  right: 0;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  background: var(--basic-color);
  overflow-x: hidden;
  transition: 0.5s;
}

.sidenav .topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 30px 25px;
  margin-bottom: 20px;
}

.sidenav .topbar .closebtn {
  font-size: 20px;
  color: var(--placeholder-color);
}

.sidenav .links {
  padding: 0px 25px;
  overflow-y: auto;
  width: 100%;
}

.sidenav .links .search-mob {
  position: relative;
  width: 100%;
  margin-bottom: 40px;
}

.sidenav .links .search-mob input {
  width: 100%;
  border: 1px solid var(--input-border);
  border-radius: 100px;
  padding: 10px;
}

.sidenav .links .search-mob input::-moz-placeholder {
  color: var(--placeholder-color);
}

.sidenav .links .search-mob input::placeholder {
  color: var(--placeholder-color);
}

.sidenav .links .search-mob input:focus-visible {
  outline: 1px solid var(--border-color);
}

.sidenav .links .search-mob .search-img {
  position: absolute;
  left: 20px;
  top: 12px;
}

.sidenav .links ul {
  margin-bottom: 60px;
}

.sidenav .links ul li {
  margin-bottom: 20px;
}

.sidenav .links ul li a {
  color: var(--text-color);
  font-size: 20px;
  font-weight: 700;
  display: flex;
  width: 100%;
}

.sidenav .links ul li a:hover {
  color: var(--primary-color);
}

.sidenav .links .auth-btn {
  margin-bottom: 20px;
  color: var(--primary-color);
  font-size: 18px;
  font-weight: 700;
  display: flex;
  width: 100%;
}

.sidenav .bottombar {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: 10px 0 0 0;
  box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
}

.sidenav .bottombar .social-icons {
  margin-bottom: 3px;
  display: flex;
}

.sidenav .bottombar .social-icons a {
  border-radius: 8px;
  width: 37px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--basic-color);
  background-color: var(--mobile-social);
}

.sidenav .bottombar .social-icons a:not(:last-child) {
  margin-inline-end: 10px;
}

.sidenav .bottombar .social-icons a:hover {
  background-color: var(--primary-color);
}

.devolum-departments a {
  width: 100%;
  height: 100%;
  display: inline-block;
  text-align: center;
}

.devolum-departments a img {
}

.devolum-departments a h2 {
  font-size: 14px;
  color: var(--primary-color);
}

.devolum-departments .departments-imgs-vertically {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.devolum-departments .departments-imgs-vertically a:not(:last-child) {
  margin-bottom: 20px;
}

.devolum-departments .departments-imgs-horizontally {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.devolum-departments .departments-imgs-horizontally a:first-child {
  margin-bottom: 20px;
}
.devolum-courses .row {
  flex-wrap: nowrap;

  margin-left: 0;
  margin-right: 0;
}
.devolum-courses .wrap{
  flex-wrap: wrap;
}

.devolum-courses .wrap .card-content{
  margin-bottom: 26px;
}
margin-inline-end: 10px;
.devolum-courses .myswiper {
  position: relative;
}
.devolum-courses .course-card-box{
  position: relative;
}
.devolum-courses .course-card-box .card-box {
  width: 100%;

  margin-left: auto;
  margin-right: auto;
  background-color: var(--bg-swiper);
}
.devolum-courses .course-card-box .card-bg{
  background-color: transparent;
}

.devolum-courses .myswiper .swiper {
  width: 100%;

  margin-left: auto;
  margin-right: auto;
  background-color: var(--bg-swiper);
}
.devolum-courses .course-card-box .card-content {
  display: flex !important;
  justify-content: center;
  align-items: center;
  margin-left: 0px !important;
  background-color: var(--bg-body);
} 
.devolum-courses .myswiper .swiper-slide {
  display: flex !important;
  justify-content: center;
  align-items: center;
  margin-left: 0px !important;
  background-color: var(--bg-body);
} /*
@media(max-width:1400px)
{
  .devolum-courses .myswiper .swiper-slide {
  margin:4px !important
}
}
@media(max-width:991px)
{
  .devolum-courses .myswiper .swiper-slide {
  margin:6px !important
}
}
@media(max-width:676px)
{
  .devolum-courses .myswiper .swiper-slide {
  margin:12px !important
}
}*/
.devolum-courses .myswiper .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.devolum-courses .course-card-box .card-content img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.devolum-courses .myswiper .swiper-slide .course-card {
  width: 100%;
}
.devolum-courses .course-card-box .card-content .course-card {
  width: 100%;
}

.devolum-banner .banner {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
  padding: 10px 20px;
  border: 1px solid var(--primary-color);
  border-radius: 30px;
}

.devolum-banner .banner .banner-img {
  margin-top: -50px;
  margin-inline-end: 40px;
}

.devolum-banner .banner .banner-content h4 {
  font-weight: 700;
  font-size: 35px;
  margin-bottom: 15px;
  color: var(--text-color);
}

.devolum-banner .banner .banner-content span {
  display: flex;
  margin-bottom: 30px;
  color: var(--text-color);
}

@media (max-width: 800px) {
  .devolum-banner .banner .banner-content h4 {
    font-size: 30px;
  }
}

@media (max-width: 760px) {
  .devolum-banner .banner {
    flex-direction: column;
  }

  .devolum-banner .banner .banner-img {
    margin-bottom: 40px;
    margin-inline-end: 0;
  }
}

.devolum-contact .contact-banner {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  padding: 60px 50px;
  border: 1px solid var(--primary-color);
  border-radius: 30px;
  width: 100%;
}

.devolum-contact .contact-banner .contact {
  display: flex;
  align-items: flex-start;
  color: var(--social-icons);
}

.devolum-contact .contact-banner .contact .social-img {
  margin-inline-end: 10px;
  max-width: 24px;
}

.devolum-contact .contact-banner .contact .social-img img {
  width: 100%;
}

.devolum-contact .contact-banner .contact div {
  display: flex;
  flex-direction: column;
}

.devolum-contact .contact-banner .contact div span {
  margin-bottom: 10px;
  color: var(--text-color);
  font-size: 20px;
  font-weight: 700;
}

.devolum-contact .contact-banner .contact div a {
  color: var(--text-color);
  font-size: 14px;
  font-weight: 400;
}

.devolum-contact .contact-banner .contact div a:hover {
  color: var(--primary-color);
}

.devolum-footer {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 155px;
}

.devolum-footer .footer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.devolum-footer .footer .dark {
  display: none;
}

.devolum-footer .footer .logo-img {
  margin-bottom: 40px;
  max-width: none;
  margin-inline-end: 0;
}

.devolum-footer .footer span {
  color: var(--text-color);
  margin-bottom: 30px;
}

.devolum-footer .footer ul {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}

.devolum-footer .footer ul li {
  margin: 0 20px;
}

.devolum-footer .footer ul li a {
  color: var(--text-color);
  font-weight: 700;
}

.devolum-footer .footer ul li a:hover {
  color: var(--primary-color);
}

.devolum-footer .copy-rights {
  border-top: 1px solid var(--border-color);
  color: var(--sub-title);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px 0;
}

.devolum-footer .copy-rights span {
  color: var(--primary-color);
}

.devolum-page-courses .filter-courses {
  box-shadow: 0px 7px 58px 0px rgba(177, 177, 177, 0.1019607843);
  border-radius: 30px;
  padding: 40px 25px;
  background-color: var(--course-card);
}

.devolum-page-courses .filter-courses .filter-title {
  color: var(--text-color);
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 20px;
}

.devolum-page-courses .filter-courses .filter-card {
  display: flex;
  flex-direction: column;
}

.devolum-page-courses .filter-courses .filter-card:not(:last-child) {
  margin-bottom: 30px;
}

.devolum-page-courses .filter-courses .filter-card .filter-name {
  color: var(--text-color);
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 15px;
}

.devolum-page-courses .filter-courses .filter-card .checkboxes {
  display: flex;
  flex-direction: column;
}

.devolum-page-courses .filter-courses .filter-card .checkboxes .form-check {
  margin-bottom: 15px;
}

.devolum-page-courses
  .filter-courses
  .filter-card
  .checkboxes
  .form-check
  .form-check-label {
  color: var(--text-color);
}

.devolum-page-courses
  .filter-courses
  .filter-card
  .checkboxes
  .form-check
  .form-check-input {
  background-color: transparent;
}

.devolum-page-courses
  .filter-courses
  .filter-card
  .checkboxes
  .form-check
  .form-check-input:checked {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.devolum-page-courses
  .filter-courses
  .filter-card
  .checkboxes
  .form-check
  .form-check-input:focus {
  box-shadow: 0 0 0 0.25rem rgba(217, 216, 78, 0.27);
}

.devolum-page-courses .filter-courses a:has(.mybtn) {
  width: 100%;
}

.devolum-page-courses .filter-courses .mybtn {
  width: 100%;
}

.devolum-single-courses .single-course-title {
  font-weight: 700;
  color: var(--text-color);
  font-size: 20px;
  margin-bottom: 20px;
}

.devolum-single-courses p {
  font-size: 16px;
  font-weight: 400;
  color: var(--text-color);
}

.devolum-single-courses .overview,
.devolum-single-courses .about-instructor,
.devolum-single-courses .lectures,
.devolum-single-courses .advantages {
  box-shadow: 0px 7px 58px 0px rgba(177, 177, 177, 0.1019607843);
  border-radius: 30px;
  padding: 30px;
  margin-bottom: 20px;
  background-color: var(--course-card);
}

.devolum-single-courses .about-instructor .author {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.devolum-single-courses .about-instructor .author .img {
  margin-inline-end: 10px;
}

.devolum-single-courses .about-instructor .author .name {
  color: var(--text-color);
  display: flex;
  flex-direction: column;
}

.devolum-single-courses .about-instructor .author .name div {
  font-size: 16px;
  font-weight: 700;
}

.devolum-single-courses .about-instructor .author .name span {
  font-size: 14px;
}

.devolum-single-courses .start-now {
  margin-top: -240px;
}

.devolum-single-courses .start-now .course-card {
  margin-bottom: 20px;
}

.devolum-single-courses .start-now .advantages ul li {
  display: flex;
  align-items: center;
  color: var(--text-color);
  margin-bottom: 15px;
}

.devolum-single-courses .start-now .advantages ul li .myicon {
  max-width: 20px;
  min-width: 20px;
  margin-inline-end: 5px;
}

.devolum-single-courses .start-now .advantages ul li .myicon img {
  width: 100%;
}

.devolum-single-courses .start-now .advantages ul li span {
  color: var(--text-color);
  font-weight: 700;
}

@media (max-width: 767px) {
  .devolum-single-courses .start-now {
    margin-top: 0;
  }
}

.devolum-prices .choose {
  color: var(--text-color);
  font-size: 20px;
  margin-bottom: 20px;
}

.devolum-payment .payment {
  box-shadow: 0px 7px 58px 0px rgba(177, 177, 177, 0.1019607843);
  padding: 30px;
  border-radius: 30px;
  margin-bottom: 20px;
  height: 80%;
  background-color: var(--course-card);
}

.devolum-payment .payment input::-moz-placeholder {
  color: var(--placeholder-color);
}

.devolum-payment .payment input::placeholder {
  color: var(--placeholder-color);
}

.devolum-payment .payment input:focus-visible {
  outline: none;
}

.devolum-payment .payment input:focus {
  box-shadow: none;
}

.devolum-payment .payment .payment-title {
  font-weight: 700;
  color: var(--text-color);
  font-size: 24px;
  margin-bottom: 30px;
}

.devolum-payment .payment .coupon {
  margin-bottom: 40px;
}

.devolum-payment .payment .coupon label {
  color: var(--sub-title);
  font-size: 14px;
  margin-bottom: 10px;
}

.devolum-payment .payment .coupon input {
  border-radius: 15px;
  border: 1px solid var(--input-border);
  padding: 10px 20px;
  background-color: var(--bg-body);
}

.devolum-payment .payment .coupon .coupon-input {
  position: relative;
}

.devolum-payment .payment .coupon .coupon-input .cancel-btn {
  position: absolute;
  left: 8px;
  bottom: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--cancel-btn);
  background-color: transparent;
  border-radius: 8px;
  color: var(--cancel-btn);
  height: 75%;
  padding: 10px 25px;
}

.devolum-payment .payment .coupon .coupon-input .cancel-btn:hover {
  background-color: var(--cancel-btn);
  color: var(--basic-color);
}

.devolum-payment .payment .methods {
  display: flex;
  flex-direction: column;
}

.devolum-payment .payment .methods .form-check {
  margin-bottom: 20px;
}

.devolum-payment .payment .methods .form-check-input:checked {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.devolum-payment .payment .methods label {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-color);
}

.devolum-payment .payment .methods .mygroup {
  margin-bottom: 30px;
}

.devolum-payment .payment .methods .mygroup .input-group-text {
  background-color: transparent;
  border-radius: 15px;
  border: 1px solid var(--input-border);
  background-color: var(--bg-body);
}

.devolum-payment .payment .methods .mygroup input {
  border-radius: 15px;
  border: 1px solid var(--input-border);
  background-color: var(--bg-body);
  padding: 10px 20px;
}

.devolum-payment .payment .methods .mygroup label {
  color: var(--sub-title);
  font-size: 14px;
  margin-bottom: 10px;
  font-weight: 400;
}

.devolum-payment button {
  /* width: 100% !important; */
  /* display: flex;
  justify-content: flex-end; */
}

.devolum-payment .modal-dialog .modal-content {
  border-radius: 30px;
  background-color: var(--bg-body);
}

.devolum-payment .modal-dialog .modal-content .modal-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px;
  text-align: center;
}

.devolum-payment .modal-dialog .modal-content .modal-body .done-img {
  max-width: 110px;
  margin-bottom: 30px;
}

.devolum-payment .modal-dialog .modal-content .modal-body .done-img img {
  width: 100%;
}

.devolum-payment .modal-dialog .modal-content .modal-body .done-text {
  font-size: 40px;
  font-weight: 700;
  color: var(--text-color);
  margin-bottom: 10px;
}

.devolum-payment .modal-dialog .modal-content .modal-body span {
  font-size: 16px;
  margin-bottom: 30px;
  color: var(--text-color);
}

.devolum-payment .modal-dialog .modal-content .modal-body a {
  width: 100%;
}

.devolum-payment .modal-dialog .modal-content .modal-body a .mybtn {
  width: 100%;
}

@media (max-width: 570px) {
  .devolum-payment .modal-dialog .modal-content .modal-body {
    padding: 20px;
  }

  .devolum-payment .modal-dialog .modal-content .modal-body .done-text {
    font-size: 27px;
  }
}

.devolum-auth .auth {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 30px 0;
}

.devolum-auth .auth .cancel-auth {
  border-radius: 50%;
  background-color: var(--course-card);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  margin-bottom: 20px;
}

.devolum-auth .auth .cancel-auth:hover {
  background-color: var(--primary-color);
}

.devolum-auth .auth .cancel-auth:hover img {
  filter: brightness(0) saturate(100%) invert(99%) sepia(28%) saturate(0%)
    hue-rotate(188deg) brightness(117%) contrast(100%);
}

.devolum-auth .auth .auth-card {
  background-color: var(--course-card);
  box-shadow: 0px 7px 58px 0px rgba(177, 177, 177, 0.1019607843);
  border-radius: 30px;
  padding: 40px;
  width: 600px;
}

.devolum-auth .auth .auth-card .title-auth {
  font-size: 30px;
  font-weight: 700;
  color: var(--text-color);
  text-align: center;
  margin-bottom: 30px;
}

.devolum-auth .auth .auth-card .title-auth span {
  color: var(--primary-color);
}

.devolum-auth .auth .auth-card .title-auth .sub-title {
  color: var(--sub-title);
  font-size: 15px;
  font-weight: 400;
  padding: 10px 0;
}

.devolum-auth .auth .auth-card .mybtn {
  width: 100%;
  margin-bottom: 30px;
}

.devolum-auth .auth .auth-card .sign-with {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.devolum-auth .auth .auth-card .sign-with span {
  color: var(--sub-title);
  margin-inline-end: 15px;
}

.devolum-auth .auth .auth-card .sign-with .apps {
  display: flex;
}

.devolum-auth .auth .auth-card .sign-with .apps img {
  max-width: 30px;
}

.devolum-auth .auth .auth-card .sign-with .apps img:not(:last-child) {
  margin-inline-end: 15px;
}

.devolum-auth .auth .auth-card .no-account {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-color);
}

.devolum-auth .auth .auth-card .no-account a {
  color: var(--primary-color);
  font-weight: 700;
}

.devolum-auth .auth .auth-card .no-account a:hover {
  color: var(--secondary-hover);
}

.devolum-auth .auth .auth-card .otp-label {
  color: var(--input-label);
  margin-bottom: 10px;
}

.devolum-auth .auth .auth-card .otp-inputs {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
}

.devolum-auth .auth .auth-card .otp-inputs .otp {
  width: 55px;
  height: 55px;
  border: 1px solid var(--input-border);
  border-radius: 10px;
  text-align: center;
  margin: 0 8px;
  font-weight: 700;
  font-size: 20px;
}

.devolum-auth .auth .auth-card .otp-inputs .otp:focus-visible {
  outline: 1px solid var(--primary-color);
}

@media (max-width: 660px) {
  .devolum-auth .auth .auth-card {
    padding: 40px 20px;
    width: 100%;
  }
}

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

.modal-auth .modal-dialog {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

.modal-auth .modal-dialog .modal-content {
  position: relative;
  background-color: var(--course-card);
  margin-top: 100px;
  width: 600px;
  box-shadow: 0px 7px 58px 0px rgba(177, 177, 177, 0.1019607843);
  border-radius: 30px;
  padding: 40px;
}

.modal-auth .modal-dialog .modal-content .cancel-auth {
  position: absolute;
  top: -82px;
  left: 50%;
  transform: translate(-50%, 0);
  border-radius: 50%;
  background-color: var(--course-card);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  margin-bottom: 20px;
  cursor: pointer;
}

.modal-auth .modal-dialog .modal-content .cancel-auth:hover {
  background-color: var(--primary-color);
}

.modal-auth .modal-dialog .modal-content .cancel-auth:hover img {
  filter: brightness(0) saturate(100%) invert(99%) sepia(28%) saturate(0%)
    hue-rotate(188deg) brightness(117%) contrast(100%);
}

.modal-auth .modal-dialog .modal-content .modal-body .devolum-auth {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 30px 0;
}

.modal-auth .modal-dialog .modal-content .modal-body .devolum-auth .auth-card {
  width: 100%;
}

.modal-auth
  .modal-dialog
  .modal-content
  .modal-body
  .devolum-auth
  .auth-card
  .title-auth {
  font-size: 30px;
  font-weight: 700;
  color: var(--text-color);
  text-align: center;
  margin-bottom: 30px;
}

.modal-auth
  .modal-dialog
  .modal-content
  .modal-body
  .devolum-auth
  .auth-card
  .title-auth
  span {
  color: var(--primary-color);
}

.modal-auth
  .modal-dialog
  .modal-content
  .modal-body
  .devolum-auth
  .auth-card
  .title-auth
  .sub-title {
  color: var(--sub-title);
  font-size: 15px;
  font-weight: 400;
  padding: 10px 0;
}

.modal-auth
  .modal-dialog
  .modal-content
  .modal-body
  .devolum-auth
  .auth-card
  .mybtn {
  width: 100%;
  margin-bottom: 30px;
}

.modal-auth
  .modal-dialog
  .modal-content
  .modal-body
  .devolum-auth
  .auth-card
  .sign-with {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.modal-auth
  .modal-dialog
  .modal-content
  .modal-body
  .devolum-auth
  .auth-card
  .sign-with
  span {
  color: var(--sub-title);
  margin-inline-end: 15px;
}

.modal-auth
  .modal-dialog
  .modal-content
  .modal-body
  .devolum-auth
  .auth-card
  .sign-with
  .apps {
  display: flex;
}

.modal-auth
  .modal-dialog
  .modal-content
  .modal-body
  .devolum-auth
  .auth-card
  .sign-with
  .apps
  img {
  max-width: 30px;
}

.modal-auth
  .modal-dialog
  .modal-content
  .modal-body
  .devolum-auth
  .auth-card
  .sign-with
  .apps
  img:not(:last-child) {
  margin-inline-end: 15px;
}

.modal-auth
  .modal-dialog
  .modal-content
  .modal-body
  .devolum-auth
  .auth-card
  .no-account {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-color);
}

.modal-auth
  .modal-dialog
  .modal-content
  .modal-body
  .devolum-auth
  .auth-card
  .no-account
  a {
  color: var(--primary-color);
  font-weight: 700;
}

.modal-auth
  .modal-dialog
  .modal-content
  .modal-body
  .devolum-auth
  .auth-card
  .no-account
  a:hover {
  color: var(--secondary-hover);
}

.modal-auth
  .modal-dialog
  .modal-content
  .modal-body
  .devolum-auth
  .auth-card
  .otp-label {
  color: var(--input-label);
  margin-bottom: 10px;
}

.modal-auth
  .modal-dialog
  .modal-content
  .modal-body
  .devolum-auth
  .auth-card
  .otp-inputs {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
}

.modal-auth
  .modal-dialog
  .modal-content
  .modal-body
  .devolum-auth
  .auth-card
  .otp-inputs
  .otp {
  width: 55px;
  height: 55px;
  border: 1px solid var(--input-border);
  border-radius: 10px;
  text-align: center;
  margin: 0 8px;
  font-weight: 700;
  font-size: 20px;
}

.modal-auth
  .modal-dialog
  .modal-content
  .modal-body
  .devolum-auth
  .auth-card
  .otp-inputs
  .otp:focus-visible {
  outline: 1px solid var(--primary-color);
}

@media (max-width: 660px) {
  .modal-auth .modal-dialog .modal-content {
    padding: 40px 20px;
    width: 100%;
  }
}

.devolum-mycourses .nav .nav-link {
  color: var(--primary-color);
  border-radius: 15px;
  padding: 13px 15px;
  font-weight: 700;
}

.devolum-mycourses .nav .nav-link.active {
  color: var(--basic-color);
  background-color: var(--primary-color);
}

.devolum-single-mycourses .progress-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  margin-bottom: 30px;
  background-color: var(--bg-completed);
  border-radius: 20px;
  padding: 10px 15px;
}

.devolum-single-mycourses .progress-bar .progress-circular {
  display: flex;
  align-items: center;
}

.devolum-single-mycourses .progress-bar .progress-circular .ui-widgets {
  position: relative;
  display: inline-block;
  margin-inline-end: 15px;
  width: 67px;
  height: 67px;
  border-radius: 50%;
  border: 0.4rem solid var(--completed-color);
  background-color: var(--inside-progress);
  text-align: center;
}

.devolum-single-mycourses
  .progress-bar
  .progress-circular
  .ui-widgets
  .ui-values {
  top: 19px;
  position: absolute;
  left: 5px;
  right: 0;
  font-weight: 700;
  font-size: 14px;
  color: var(--completed-color);
}

.devolum-single-mycourses .progress-bar .progress-circular span {
  color: var(--text-color);
  font-weight: 700;
  font-size: 20px;
}

.devolum-single-mycourses .progress-bar .show-btn {
  border-radius: 16px;
  background-color: var(--completed-color);
  color: var(--basic-color);
  width: 140px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 500px) {
  .devolum-single-mycourses .progress-bar {
    flex-direction: column;
  }

  .devolum-single-mycourses .progress-bar .progress-circular {
    margin-bottom: 15px;
  }

  .devolum-single-mycourses .progress-bar a:has(.show-btn),
  .devolum-single-mycourses .progress-bar .show-btn {
    width: 100%;
  }
}

.devolum-single-mycourses .myvideo {
  width: 100%;
  margin-bottom: 32px;
}

.devolum-single-mycourses .myvideo video {
  width: 100%;
  height: 100%;
  border-radius: 16px;
}

.devolum-single-mycourses .about-lec-title {
  color: var(--text-color);
  font-weight: 700;
  font-size: 24px;
  margin-bottom: 20px;
}

.devolum-single-mycourses .about-lec {
  box-shadow: 0px 7px 58px 0px rgba(177, 177, 177, 0.1019607843);
  border-radius: 16px;
  padding: 30px;
  margin-bottom: 20px;
  color: var(--text-color);
  background-color: var(--course-card);
}

.devolum-single-mycourses .about-lec div {
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 15px;
}

.devolum-single-mycourses .lec-files .file-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0px 7px 58px 0px rgba(177, 177, 177, 0.1019607843);
  border-radius: 16px;
  padding: 30px;
  background-color: var(--course-card);
  margin-bottom: 20px;
}

.devolum-single-mycourses .lec-files .file-bar .content {
  display: flex;
  align-items: center;
}

.devolum-single-mycourses .lec-files .file-bar .content .file-img {
  margin-inline-end: 15px;
  max-width: 65px;
  min-width: 45px;
}

.devolum-single-mycourses .lec-files .file-bar .content .file-img img {
  width: 100%;
}

.devolum-single-mycourses .lec-files .file-bar .content .filename {
  display: flex;
  flex-direction: column;
}

.devolum-single-mycourses .lec-files .file-bar .content .filename .name {
  font-weight: 700;
  color: var(--text-color);
  margin-bottom: 5px;
}

.devolum-single-mycourses .lec-files .file-bar .content .filename .size {
  font-weight: 400;
  color: var(--sub-title);
}

.devolum-single-mycourses .lec-files .file-bar .download {
  display: flex;
  align-items: center;
  color: var(--primary-color);
  font-weight: 700;
}

.devolum-single-mycourses .lec-files .file-bar .download .download-img {
  margin-inline-end: 5px;
  max-width: 23px;
}

.devolum-single-mycourses .lec-files .file-bar .download .download-img img {
  width: 100%;
}

.devolum-single-mycourses .lec-files .file-bar .download:hover {
  color: var(--secondary-hover);
}

.devolum-single-mycourses
  .lec-files
  .file-bar
  .download:hover
  .download-img
  img {
  filter: brightness(0) saturate(100%) invert(65%) sepia(97%) saturate(361%)
    hue-rotate(338deg) brightness(92%) contrast(90%);
}

@media (max-width: 500px) {
  .devolum-single-mycourses .lec-files .file-bar {
    padding: 15px 10px;
  }

  .devolum-single-mycourses .lec-files .file-bar .content .file-img {
    max-width: 50px;
    margin-inline-end: 8px;
  }

  .devolum-single-mycourses .lec-files .file-bar .content .filename {
    font-size: 14px;
  }

  .devolum-single-mycourses .lec-files .file-bar .download {
    font-size: 14px;
  }
}

.devolum-single-mycourses .lectures {
  border: 1px solid var(--input-border);
  border-radius: 16px;
  padding: 20px;
  background-color: var(--course-card);
}

.devolum-single-mycourses .lectures .single-course-title {
  color: var(--text-color);
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 20px;
}

.devolum-single-mycourses .lectures .lecture {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.devolum-single-mycourses .lectures .lecture .form-check-input {
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e")
    no-repeat center center;
  background-color: var(--not-complete);
  border-color: var(--not-complete);
  border-radius: 50%;
  width: 25px;
  height: 25px;
}

.devolum-single-mycourses .lectures .lecture .form-check-input:focus-visible {
  outline: none;
}

.devolum-single-mycourses .lectures .lecture .form-check-input:focus {
  box-shadow: 0 0 0 0.25rem rgba(121, 228, 112, 0.2117647059);
}

.devolum-single-mycourses .lectures .lecture .form-check-input:checked {
  background-color: var(--completed-color);
  border-color: var(--completed-color);
}

.devolum-certificate .certificate-img {
  margin-bottom: 40px;
  width: 100%;
}

.devolum-certificate .certificate-img img {
  width: 100%;
}

.devolum-certificate .certificate-btns {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.devolum-certificate .certificate-btns .mybtn {
  margin: 0 15px;
}

.devolum-certificate .certificate-btns .download .myimg {
  max-width: 19px;
  margin-inline-end: 8px;
}

.devolum-certificate .certificate-btns .download .myimg img {
  width: 100%;
  filter: brightness(0) saturate(100%) invert(1%) sepia(9%) saturate(32%)
    hue-rotate(314deg) brightness(90%) contrast(92%);
}

.devolum-certificate .certificate-btns .share {
  background-color: transparent;
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
}

.devolum-certificate .certificate-btns .share .myimg {
  max-width: 19px;
  margin-inline-end: 8px;
}

.devolum-certificate .certificate-btns .share .myimg img {
  width: 100%;
  filter: brightness(0) saturate(100%) invert(95%) sepia(10%) saturate(5426%)
    hue-rotate(315deg) brightness(94%) contrast(107%);
}

.devolum-certificate .certificate-btns .share-modal .modal-content {
  border-radius: 30px;
  padding: 15px;
  background-color: var(--course-card);
}

.devolum-certificate
  .certificate-btns
  .share-modal
  .modal-content
  .modal-body
  .modal-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
}

.devolum-certificate
  .certificate-btns
  .share-modal
  .modal-content
  .modal-body
  .modal-title
  div {
  color: var(--text-color);
  font-weight: 700;
}

.devolum-certificate
  .certificate-btns
  .share-modal
  .modal-content
  .modal-body
  .a2a_kit {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 25px;
}

.devolum-certificate
  .certificate-btns
  .share-modal
  .modal-content
  .modal-body
  .a2a_kit
  a {
  margin: 0 8px;
  border: 1px solid var(--input-border);
  border-radius: 50%;
  padding: 15px;
}

.devolum-certificate
  .certificate-btns
  .share-modal
  .modal-content
  .modal-body
  .a2a_kit
  a
  .a2a_svg {
  width: 25px;
  height: 25px;
}

.devolum-certificate
  .certificate-btns
  .share-modal
  .modal-content
  .modal-body
  .a2a_kit
  a:hover {
  box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 12px;
}

.devolum-certificate
  .certificate-btns
  .share-modal
  .modal-content
  .modal-body
  .copy
  #input {
  width: 100%;
  border: 1px solid var(--input-border);
  border-radius: 16px;
  padding: 10px;
  position: relative;
  color: var(--text-color);
  background-color: var(--bg-body);
}

.devolum-certificate
  .certificate-btns
  .share-modal
  .modal-content
  .modal-body
  .copy
  #input:focus-visible {
  outline: none;
}

.devolum-certificate
  .certificate-btns
  .share-modal
  .modal-content
  .modal-body
  .copy
  button {
  position: absolute;
  left: 25px;
  bottom: 27px;
  display: flex;
  align-items: center;
  color: var(--primary-color);
}

.devolum-certificate
  .certificate-btns
  .share-modal
  .modal-content
  .modal-body
  .popover {
  display: none;
  position: absolute;
  background-color: var(--text-color);
  color: var(--basic-color);
  padding: 10px;
  border-radius: 4px;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
}

@media (max-width: 420px) {
  .devolum-certificate .certificate-btns {
    flex-direction: column;
  }

  .devolum-certificate .certificate-btns a:has(.mybtn),
  .devolum-certificate .certificate-btns .mybtn {
    width: 100%;
    margin: 0;
  }

  .devolum-certificate .certificate-btns .download {
    margin-bottom: 15px;
  }
}

.devolum-profile .profile-settings {
  display: flex;
  flex-direction: column;
  box-shadow: 0px 7px 58px 0px rgba(177, 177, 177, 0.1019607843);
  background-color: var(--course-card);
  border-radius: 30px;
  padding: 30px;
}

.devolum-profile .profile-settings .setting-title {
  font-weight: 700;
  color: var(--text-color);
  margin-bottom: 15px;
}

.devolum-profile .profile-settings .setting-card {
  display: flex;
  align-items: center;
  color: var(--sub-title);
  margin-bottom: 10px;
  padding: 15px;
  border-radius: 30px;
}

.devolum-profile .profile-settings .setting-card .img {
  margin-inline-end: 8px;
}

.devolum-profile .profile-settings .setting-card:hover,
.devolum-profile .profile-settings .setting-card.active {
  background-color: var(--accordion);
  color: var(--primary-color);
  font-weight: 700;
}

.devolum-profile .profile-settings .sign-out {
  margin-bottom: 10px;
  padding: 15px;
  border-radius: 30px;
  color: var(--cancel-btn);
  font-weight: 700;
}

.devolum-profile .settings-content {
  box-shadow: 0px 7px 58px 0px rgba(177, 177, 177, 0.1019607843);
  background-color: var(--course-card);
  padding: 30px;
  border-radius: 30px;
  margin-bottom: 30px;
}

.devolum-profile .settings-content .title {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-color);
  margin-bottom: 25px;
}

.devolum-profile .settings-content .profile-img {
  position: relative;
  max-width: 100px;
  margin-bottom: 30px;
}

.devolum-profile .settings-content .profile-img .profile {
  width: 100%;
}

.devolum-profile .settings-content .profile-img .cam {
  position: absolute;
  bottom: 0;
  left: 0;
}

.devolum-profile .settings-content .myinput label {
  color: var(--label-profile);
}

.devolum-profile a:has(.mybtn) {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.devolum-profile .payment-card {
  display: flex;
  align-items: center;
  border: 1px solid var(--input-border);
  background-color: var(--bg-body);
  border-radius: 16px;
  padding: 15px;
  margin-bottom: 25px;
}

.devolum-profile .payment-card .payment-img {
  margin-inline-end: 15px;
  max-width: 100px;
  min-width: 70px;
}

.devolum-profile .payment-card .payment-img img {
  width: 100%;
  border-radius: 8px;
}

.devolum-profile .payment-card .payment-details {
  display: flex;
  flex-direction: column;
}

.devolum-profile .payment-card .payment-details div {
  font-weight: 700;
  color: var(--text-color);
  margin-bottom: 5px;
}

.devolum-profile .payment-card .payment-details span {
  color: var(--sub-title);
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 5px;
}

.devolum-profile .payment-card .payment-details span .content {
  color: var(--text-color);
}

@media (max-width: 520px) {
  .devolum-profile .payment-card {
    flex-direction: column;
  }

  .devolum-profile .payment-card .payment-img {
    margin-bottom: 20px;
  }
}

.devolum-profile .fav-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid var(--input-border);
  border-radius: 16px;
  padding: 15px;
  margin-bottom: 10px;
  background-color: var(--bg-body);
}

.devolum-profile .fav-card .fav-content {
  display: flex;
  align-items: center;
}

.devolum-profile .fav-card .fav-content .fav-img {
  margin-inline-end: 15px;
  max-width: 100px;
  min-width: 70px;
}

.devolum-profile .fav-card .fav-content .fav-img img {
  width: 100%;
  border-radius: 8px;
}

.devolum-profile .fav-card .fav-content .title {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.devolum-profile .fav-card .fav-content .title .lec-name {
  font-size: 16px;
  /* margin-bottom: 20px; */
}

.devolum-profile .fav-card .fav-content .title .author {
  font-size: 16px;
  color: var(--sub-title);
  display: flex;
  align-items: center;
}

.devolum-profile .fav-card .fav-content .title .author .img {
  margin-inline-end: 10px;
  max-width: 50px;
  min-width: 30px;
}

.devolum-profile .fav-card .fav-content .title .author .img img {
  width: 100%;
}

.devolum-profile .fav-card .fav {
  margin: 0;
}

@media (max-width: 500px) {
  .devolum-profile .fav-card {
    align-items: flex-end;
  }

  .devolum-profile .fav-card .fav-content {
    flex-direction: column;
    align-items: start;
  }

  .devolum-profile .fav-card .fav-content .fav-img {
    margin-bottom: 20px;
  }
}

.devolum-profile .cancel {
  background-color: var(--cancel-payment);
  color: var(--basic-color);
}

.devolum-profile .cancel:hover {
  background-color: var(--cancel-btn);
}

html[dir="ltr"] .title .title-img img {
  transform: scaleX(-1);
}

html[dir="ltr"] .intro-img {
  transform: scaleX(-1);
}

html[dir="ltr"] .fa-arrow-right,
html[dir="ltr"] .fa-arrow-left {
  transform: scaleX(-1);
}

html[dir="ltr"] .accordion-button::after {
  margin-left: auto;
  margin-right: 0;
}

html[dir="ltr"] .myinput .input-group .input-group-text {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: 15px !important;
  border-bottom-left-radius: 15px !important;
  border-right: none;
}

html[dir="ltr"] .myinput .input-group input {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-top-right-radius: 15px !important;
  border-bottom-right-radius: 15px !important;
}

html[dir="ltr"] .mygroup .input-group .input-group-text {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-top-left-radius: 15px !important;
  border-bottom-left-radius: 15px !important;
  border-right: none;
}

html[dir="ltr"] .mygroup .input-group input {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-top-right-radius: 15px !important;
  border-bottom-right-radius: 15px !important;
}

html[dir="ltr"]
  .devolum-payment
  .payment
  .methods
  .form-check
  .form-check-input {
  margin-right: auto;
  margin-inline-end: 10px;
  float: left;
}

html[dir="ltr"] .devolum-payment .payment .coupon .coupon-input .cancel-btn {
  right: 8px;
  left: auto;
}

html[dir="ltr"] .devolum-profile .settings-content .profile-img .cam {
  left: auto;
  right: 0;
}

html[dir="ltr"] .myinput .reveal-pass {
  right: 15px;
  left: auto;
}

html[dir="ltr"]
  .devolum-certificate
  .certificate-btns
  .share-modal
  .modal-content
  .modal-body
  .copy
  button {
  right: 25px;
  left: auto;
}

html[dir="ltr"] .iti--allow-dropdown .iti__flag-container {
  right: -1px;
  left: auto;
  direction: rtl;
}

/*# sourceMappingURL=style.css.map */
html[dir="ltr"] .intro-img {
  transform: unset !important;
}
.devolum-mycourses .devolum-m3refa-test {
  margin-bottom: 26px;
}
.devolum-mycourses .devolum-m3refa-test .card-txet .card-title {
  font-weight: 700;
  color: var(--text-color);
  font-size: 20px;
  margin-bottom: 20px;
  line-height: 1.5;
}
@media (max-width: 600px) {
  .devolum-mycourses .devolum-m3refa-test .card-txet .card-title {
    font-size: 16px;
  }
}
.devolum-mycourses .devolum-m3refa-test .radio-text {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.devolum-mycourses .devolum-m3refa-test .radio-text input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.devolum-mycourses .devolum-m3refa-test .checkmark {
  position: absolute;
  top: 0;
  right: 0;
  height: 20px;
  width: 20px;
  background-color: rgb(217, 217, 217);
  border-radius: 50%;
}

.devolum-mycourses .devolum-m3refa-test .radio-text:hover input ~ .checkmark {
  background-color: rgb(217, 217, 217);
  border: 1px solid rgba(177, 177, 177, 0.2);
}

.devolum-mycourses .devolum-m3refa-test .radio-text input:checked ~ .checkmark {
  background-color: white;
  border: 1px solid rgba(177, 177, 177, 0.2);
  border: 1px solid var(--primary-color);
}

.devolum-mycourses .devolum-m3refa-test .radio-text {
  font-size: 14px;
  font-weight: 400;
  color: black;
}

.devolum-mycourses .devolum-m3refa-test .radio-text .test-answer {
  padding: 0 30px;
  color: var(--text-color);
  margin-bottom: 15px;
  font-size: 16px;
}
.devolum-mycourses .devolum-m3refa-test .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.devolum-mycourses
  .devolum-m3refa-test
  .radio-text
  input:checked
  ~ .checkmark:after {
  display: block;
}

.devolum-mycourses .devolum-m3refa-test .radio-text .checkmark:after {
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--primary-color);
}
.form-btn {
  display: flex;
  align-items: center;
  justify-content: end;
}

.devolum-course-viedo-img {
  position: absolute !important;
}

body.dark .price-img .dark-img {
  display: none;
}
body.dark .price-img .light-img {
  display: block;
}
body .price-img .dark-img {
  display: block;
}
body .price-img .light-img {
  display: none;
}
.devolum-download-coures-btn {
  display: flex;
  justify-content: center;
  align-items: center;
}
.devolum-download-coures-btn a {
  color: var(--basic-color);
  font-weight: 700;
  pad: 10px;
}
.devolum-download-coures-btn a:hover,
.devolum-download-coures-btn a.active {
  color: var(--basic-color) !important;
}
.devolum-course-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 18px;
}
.devolum-course-btn .devolum-viedo-btn {
  background-color: var(--primary-color);
  color: var(--basic-color);
  min-width: 70px;
  text-align: center;
  font-weight: 700;
  padding: 6px;
  border-radius: 6px;
}
.invalid-feedback-erro {
  position: absolute;
  z-index: 100;
 transform: translateX(50% ,-50%);
  top:70px;
}
@media (max-width: 767px) {
  .invalid-feedback-erro {
    font-size: 12px;
  
  }
}
.solid-btn {
  background-color: var(--primary-color) !important;
  color: var(--basic-color) !important;
}
.regular-btn {
  background-color: var(--basic-color) !important;
  color: var(--primary-color) !important;
}
.fa-eye,
.fa-eye-slash {
  color: var(--primary-color);
  font-size: 18px;
}
@media (max-width: 600px) {
  .fa-eye,
  .fa-eye-slash {
    font-size: 16px;
  }
}
.auth-btn a {
  display: flex;
  align-items: center;
  justify-content: center !important;
}
.devolum-course-description {
  height: 60px !important;
}

.devolum-login-eye .fa-eye ,.devolum-login-eye .fa-eye-slash{
  position: absolute;
  bottom: 45px !important;
  left: 15px;
  z-index: 5;
}