@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

/* Custom Reset */
body {
      font-family: "Tajawal", sans-serif;
      background: #041120;
      direction: rtl;
      --body-color: 0 0 100%;
      --heading-font: "Tajawal", sans-serif;
      --body-font: "Tajawal", sans-serif;
      --heading-color: 0 0 100%;
}

.form--control {
      color: hsl(var(--body-color));
}

.wrapper {
      overflow: hidden;
}

a.active,
a:focus,
button:focus,
button.active {
      outline: none;
}

a {
      text-decoration: none;
}

a:focus,
a:hover,
a:active {
      outline: 0;
      box-shadow: none;
}

a:focus,
a:hover {
      text-decoration: none;
}

.navbar {
      --bs-navbar-active-color: #D4A966;
}

h1,
h2,
h3,
h4,
h5,
h6 {
      --heading-font: "Tajawal", sans-serif;
      margin: 0;
      padding: 0;
}

a {
      text-decoration: none;
      transition: all 0.5s ease-in-out;
}

a:hover {
      text-decoration: none;
}

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

ul li {
      list-style: none;
}

p {
      margin: 0;
      padding: 0;
}

input:focus,
select:focus,
textarea:focus {
      outline: none;
}

img {
      border-style: none;
      display: inline-block;
      max-width: 100%;
      height: auto;
}

/* ==== header ===== */
header {
      border-bottom: 2px solid rgba(255, 255, 255, 0.08);
      background: rgba(29, 29, 29, 0.52);
      backdrop-filter: blur(6px);
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 9999;
}

header .navbar {
      padding: 10px 0px 15px;
}

.navbar-brand {
      margin: 0;
      padding: 0;
}

header .nav-item .nav-link {
      color: #FFF;
      text-align: right;
      font-size: 20px;
      padding: 0px 27px !important;
      font-weight: 400;
}

header .nav-item .nav-link:hover {
      color: #E0B46F;
}

header .navbar-nav {
      border-left: 1px solid rgba(255, 255, 255, 0.16);
      padding-left: 30px;
}

.btn-default {
      color: #FFF;
      text-align: center;
      text-shadow: 0px 4px 4.9px rgba(0, 0, 0, 0.19);
      font-size: 20px;
      font-weight: 400;
      text-transform: uppercase;
      border-radius: 29px;
      border: 1px solid rgba(245, 193, 112, 0.44);
      background: rgba(221, 221, 221, 0.04);
      backdrop-filter: blur(3px);
      display: flex;
      width: 228px;
      height: 65px;
      align-items: center;
      justify-content: center;
}

.btn-golden {
      color: var(--White, #FFF);
      text-shadow: 0px 4px 4.9px rgba(0, 0, 0, 0.19);
      font-size: 20px;
      font-weight: 700;
      padding: 0px 0px 3px;
      text-transform: uppercase;
      border-radius: 29px;
      background: linear-gradient(90deg, #AC884F -20%, #C39855 11.97%, #F5C170 43.95%, #815A1F 75.92%, #D4A966 107.89%);
      display: flex;
      width: 214px;
      height: 65px;
      align-items: center;
      justify-content: center;
      box-shadow: 3px 6px 17.7px 3px rgba(187, 163, 67, 0.38);
}

.btn-list {
      display: flex;
      align-items: center;
      justify-content: center;
      grid-gap: 23px;
      padding-right: 72px;
}

/* ======= hero-sec ====== */
.section-wrapper {
      background-image: url(../../../images/custom/hero-bg.png);
      background-repeat: no-repeat;
      background-size: cover;
      padding: 263px 0px 70px;
}

.hero-sec {
      padding-bottom: 139px;
}

.hero-sec .text-box h1 {
      color: #FFF;
      text-align: right;
      font-size: 47px;
      font-weight: 700;
}

.hero-sec .text-box h1 span {
      color: #D4A966;
}

.hero-sec .text-box p {
      color: var(--White, #FFF);
      text-align: right;
      font-size: 26px;
      font-weight: 700;
      margin-top: 80px;
}

.hero-sec ul {
      display: flex;
      align-items: center;
      grid-gap: 15px;
}

.hero-sec ul li span {
      color: #FFF;
      text-align: right;
      font-size: 18px;
      font-weight: 400;
}

.hero-sec .video-box {
      max-width: 568px;
      margin-right: auto;
}

.video-box {
      position: relative;
      display: block;
}

.video-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
}

.hero-sec .btn-golden {
      font-size: 27px;
      margin-top: 80px;
}

/* ====== course-sec === */
.course-sec .video-box {
      max-width: 1116px;
      margin: 90px auto 0;
}

.title h2 {
      color: var(--White, #FFF);
      text-align: center;
      font-size: 56px;
      font-weight: 700;
      line-height: normal;
}

.title h2 span {
      color: var(--White, #D4A966);
}

.course-sec {
      padding: 174px 0px 132px;
}

/* ===== creator-sec */
.title p {
      color: #FFF;
      font-size: 32px;
      font-weight: 400;
      padding-top: 10px;
      text-align: center;
      line-height: normal;
}

.title p span {
      color: #D4A966;
}

.creator-box {
      border-radius: 25px;
      border: 2px solid rgba(255, 255, 255, 0.03);
      background: rgba(29, 29, 29, 0.28);
      backdrop-filter: blur(6px);
      display: flex;
      align-items: center;
      justify-content: space-between;
      grid-gap: 10px;
      position: relative;
      margin-bottom: 34px;
}

.arrow-icon {
      position: absolute;
      bottom: 19px;
      right: 11px;
}

.creator-box .box-left {
      display: flex;
      align-items: center;
      grid-gap: 15px;
}

.creator-box h4 {
      color: var(--White, #FFF);
      font-size: 23px;
      font-weight: 400;
      line-height: 26px;
      max-width: 317px;
}

.creator-box .icon-box {
      border-radius: 25px;
      border: 2px solid rgba(255, 255, 255, 0.03);
      background: rgba(29, 29, 29, 0.28);
      box-shadow: 5px 6px 5.6px 0px rgba(0, 0, 0, 0.15);
      backdrop-filter: blur(6px);
      padding: 13px 16px;
      margin: -1px;
}

.box-left {
      padding-right: 19px;
}

.progrees-box {
      position: absolute;
      top: -14px;
      right: 45px;
}

.right-creator-box .box-left {
      padding-right: 0px;
}

.right-creator-box .box-right {
      padding-left: 26px;
}

.right-creator-box .arrow-icon {
      right: auto;
      left: 16px;
}

.right-creator-box .progrees-box {
      right: auto;
      left: 35px;
}

.box-after {
      border-radius: 25px 0px 0px 25px;
      border-right: none;
}

.box-after::after {
      content: '';
      border-radius: 0px 25px 25px 0px;
      border: 2px solid rgba(255, 255, 255, 0.03);
      background: rgba(29, 29, 29, 0.28);
      backdrop-filter: blur(6px);
      position: absolute;
      right: -100%;
      height: 104%;
      top: -2px;
      width: 100%;
      z-index: 99999;
      border-left: none;
}

.creator-inner {

      background-image: url(../../../images/custom/creator-bg.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      padding: 180px 0px 13px;
      position: relative;
}

.creator-sec .title {
      position: relative;
      z-index: 10;
}

.creator-inner-boxes {
      position: relative;
      z-index: 1;
      padding-left: 60px;
}


.creator-inner .btn-golden {
      margin: 118px auto 0;
}

.creator-sec {
      padding-top: 40px;
}

.creator-sec .img-holder {
      text-align: center;
      margin-right: -18px;
}

.creator-sec .img-holder img {
      width: 100%;
}

.btn-golden:hover {
      color: #fff;
      background: linear-gradient(270deg, #AC884F -20%, #C39855 11.97%, #F5C170 43.95%, #815A1F 75.92%, #D4A966 107.89%);
}

.title img {
      margin-top: 32px;
}

.experience-box {
      border-radius: 25px;
      border: 2px solid rgba(255, 255, 255, 0.06);
      background: rgba(28, 28, 28, 0.19);
      backdrop-filter: blur(6px);
      padding: 74px 53px 75px 39px;
      max-width: 578px;
      margin-right: 20px;
      position: relative;
}

.experience-box h4 {
      color: #FFF;
      font-size: 33px;
      font-weight: 700;
      line-height: 40px;
}

.experience-box h4 span {
      color: #D4A966;
}

.experience-box ul {
      margin-top: 36px;
}

.experience-box ul li {
      display: flex;
      align-items: center;
      grid-gap: 24px;
      margin-bottom: 24px;
}

.experience-box ul li span {
      color: var(--White, #FFF);
      font-size: 23px;
      font-weight: 400;
      line-height: normal;
}

.number-sec .title {
      margin-bottom: 120px;
}

.number-sec {
      padding: 200px 0px 214px;
}

.experience-box .btn-golden {
      font-size: 21px;
      width: 180px;
      margin-top: 64px;
}

.hat-img {
      position: absolute;
      bottom: 54px;
      z-index: -1;
      left: 0;
}

.isolog-img {
      position: absolute;
      top: -30px;
      right: -20px;
}

.progress {
      border-radius: 25px;
      border: 2px solid rgba(255, 255, 255, 0.03);
      background: rgba(245, 193, 112, 0.18);
      backdrop-filter: blur(6px);
      text-align: start;
      justify-content: end;
      width: 221px;
      position: absolute;
      top: -6px;
      height: 10px;
      left: 53px;
}

.progress-bar {
      border-radius: 25px;
      border: 2px solid rgba(255, 255, 255, 0.03);
      background: rgba(245, 193, 112, 0.18);
      backdrop-filter: blur(6px);
}

.curve-arrows {
      text-align: center;
      margin-top: -70px;
      position: relative;
}

.experience-box ul li span span {
      font-weight: 500;
}

/* ===== customer-sec */
.customer-sec .experience-box {
      max-width: 725px;
      position: relative;
}

.customer-sec .experience-box h4 {
      font-size: 42px;
}

.customer-sec .experience-box ul li span {
      font-size: 22px;
}

.customer-sec .experience-box ul li {
      align-items: start;
      margin-bottom: 40px;
}

.customer-sec .progress {
      left: auto;
      right: 27px;
}

.customer-sec .experience-box ul {
      margin-top: 78px;
}

.customer-sec .experience-box .isolog-img {
      bottom: -37px;
      left: -20px;
      top: auto;
      right: auto;
}

.customer-sec .image-holder {
      margin-top: 112px;
}

.right-arrows {
      margin-right: -18px;
      margin-top: -36px;
}

.customer-sec .title {
      margin-bottom: 112px;
}

.customer-sec {
      padding-bottom: 116px;
}

.title-box {
      color: var(--White, #FFF);
      text-align: center;
      text-shadow: 0px 4px 4.9px rgba(0, 0, 0, 0.19);
      font-size: 30px;
      font-weight: 400;
      text-transform: uppercase;
      border-radius: 29px;
      border: 1px solid rgba(255, 255, 255, 0.09);
      background: rgba(221, 221, 221, 0.08);
      backdrop-filter: blur(3px);
      display: flex;
      width: 492px;
      height: 56px;
      align-items: center;
      justify-content: center;
      margin: 18px auto 0px;
}

.guide-sec {
      padding: 160px 0px 120px;
      background-image: url(../../../images/custom/guide-bg.png);
      background-repeat: no-repeat;
      background-size: cover;
}

.guide-sec .title {
      margin-bottom: 83px;
}

.guide-sec .btn-golden {
      margin: 120px auto 0px;
}

.story-sec .btn-golden {
      margin: 0 auto;
}

.story-sec {
      margin-top: 184px;
      padding-bottom: 58px;
}

.story-sec .title {
      margin-bottom: 36px;
}

/* ======= faq-inner */
.faq-inner {
      max-width: 1148px;
      margin: 84px auto 0px;
}

.accordion-item {
      background-color: transparent;
      border: none;
      margin-bottom: 40px;
}

.accordion-button {
      border-radius: 16px !important;
      border: 1px solid rgba(255, 255, 255, 0.06);
      background: rgba(255, 255, 255, 0.03);
      padding: 31px 128px;
      color: var(--White, #FFF);
      font-size: 26px;
      font-weight: 700;
      line-height: normal;
      backdrop-filter: blur(6.699999809265137px);
}

.accordion-button:not(.collapsed) {
      color: #FFFFFF;
      background-color: transparent;
      box-shadow: none;
}

.accordion-body {
      padding: 34px 0px 0px 24px;
}

.accordion-body p {
      color: #FFF;
      font-size: 22px;
      font-weight: 400;
      line-height: normal;
}

.accordion-button:not(.collapsed)::after {
      background-image: url(../../../images/custom/down-chevron.png);
      transform: rotate(0deg);
}

.accordion-button::after {
      width: 1.25rem;
      height: 1.25rem;
      background-size: 1.25rem;
      transition: transform .2s ease-in-out;
      position: absolute;
      right: 40px;
      background-image: url(../../../images/custom/down-chevron.png);
}

.faq-sec {
      padding: 120px 0px 195px;
      background-image: url(../../../images/custom/faq-bg.png);
      background-size: auto;
      background-repeat: no-repeat;
      margin-top: 92px;
}

/* == question-sec */
.question-sec .text-box h2 {
      color: var(--White, #FFF);
      text-shadow: 0px 4px 4.9px rgba(0, 0, 0, 0.19);
      font-size: 64px;
      font-weight: 700;
      line-height: normal;
      text-transform: uppercase;
}

.question-sec .text-box p {
      color: rgba(255, 255, 255, 0.72);
      font-size: 24px;
      font-weight: 400;
      line-height: normal;
      margin: 32px 0px 36px;
}

.question-sec .text-box {
      max-width: 500px;
}

.question-sec {
      background-image: url(../../../images/custom/bg-5.png);
      background-repeat: no-repeat;
      background-size: cover;
      padding: 204px 0px 262px;
      margin-bottom: 140px;
}

.question-sec .text-box {
      max-width: 552px;
      margin-right: auto;
      text-align: end;
      margin-left: 38px;
}

.btn-contact {
      color: #FFF;
      text-shadow: 0px 4px 4.9px rgba(0, 0, 0, 0.19);
      font-size: 20px;
      font-weight: 400;
      text-transform: uppercase;
      border-radius: 29px;
      border: 1px solid rgba(245, 193, 112, 0.44);
      background: rgba(221, 221, 221, 0.04);
      backdrop-filter: blur(3px);
      display: flex;
      width: 173px;
      height: 65px;
      align-items: center;
      justify-content: center;
      margin-right: auto;
}

/* ======= footer ===== */
footer {
      border-top: 1px solid rgba(255, 255, 255, 0.04);
      background: rgba(255, 255, 255, 0.02);
      padding-top: 60px;
}

.footer-wrapper-left p {
      color: var(--White, #FFF);
      font-family: "Montserrat", sans-serif;
      font-size: 16px;
      font-weight: 400;
      line-height: normal;
      margin-top: 36px;
}

.footer-top {
      padding-bottom: 30px;
      border-bottom: 1px solid rgba(217, 217, 217, 0.12);
      display: flex;
      justify-content: center;
}

.footer-links {
      display: flex;
      align-items: center;
      grid-gap: 11px;
}

.footer-links li a {
      border-radius: 29px;
      border: 1px solid rgba(245, 193, 112, 0.44);
      background: rgba(221, 221, 221, 0.04);
      backdrop-filter: blur(3px);
      color: #FFF;
      text-shadow: 0px 4px 4.9px rgba(0, 0, 0, 0.19);
      font-size: 20px;
      font-weight: 400;
      line-height: normal;
      text-transform: uppercase;
      display: flex;
      width: 173px;
      height: 65px;
      align-items: center;
      justify-content: center;
      text-decoration: none;
}

.footer-links li a:hover,
.btn-contact:hover,
.btn-default:hover {
      border-radius: 29px;
      background: linear-gradient(90deg, #AC884F -20%, #E0B46F 11.97%, #B69157 43.95%, #815A1F 75.92%, #D4A966 107.89%);
      box-shadow: 3px 6px 17.7px 3px rgba(187, 163, 67, 0.38);
      color: #fff;
}

.footer-wrapper {
      display: flex;
      align-items: center;
      justify-content: space-between;
}

.footer-bottom {
      margin-top: unset;
      padding-top: unset;
      align-items: unset;
      gap: unset;
      justify-content: end;
      border-top: unset;
}

.footer-bottom p {
      color: var(--White, #FFF);
      text-align: center;
      font-family: "Montserrat", sans-serif;
      font-size: 16px;
      font-weight: 400;
}

.footer-bottom span {
      color: rgba(255, 255, 255, 0.36);
      text-align: center;
      font-family: "Montserrat", sans-serif;
      font-size: 12px;
      font-weight: 400;
}

.footer-bottom {
      padding: 36px 0px 32px;
      position: relative;
}

.social-icons {
      display: flex;
      justify-content: end;
      align-items: center;
      grid-gap: 30px;
}

/* ===== about-sec */
.about-sec .image-holder img {
      width: 100%;
      min-height: 1664px;
      object-fit: cover;
      object-position: center;
}

.swiper-button-prev:after,
.swiper-button-next:after {
      display: none;
}

.slider-inner {
      display: none;
}

.swiper-button-next {
      border-radius: 222px;
      background: rgb(212, 169, 102, 0.25);
      width: 34px !important;
      height: 33px !important;
      padding: 12px !important;
      transform: rotate(0deg);
}

.about-title {
      color: var(--White, #FFF);
      text-shadow: 0px 4px 4.9px rgba(0, 0, 0, 0.19);
      font-size: 34px;
      font-weight: 500;
      line-height: 22px;
      text-transform: uppercase;
      border-radius: 29px;
      border: 1px solid rgba(255, 255, 255, 0.09);
      background: rgba(221, 221, 221, 0.08);
      backdrop-filter: blur(3px);
      display: flex;
      width: 337px;
      height: 48px;
      align-items: center;
      justify-content: center;
      margin-bottom: 64px;
}

.about-inner {
      margin-top: -488px;
}

.about-inner h6 {
      color: #FFF;
      font-size: 32px;
      font-weight: 800;
      line-height: 54px;
      margin-bottom: 42px;
      max-width: 932px;
}

.about-inner p {
      color: #FFF;
      font-size: 22px;
      font-weight: 400;
      line-height: 61px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
      color: #FFF;
}

.mb-80 {
      margin-bottom: 60px;
}

.mb-20 {
      margin-bottom: 20px;
}

.about-sec {
      padding-bottom: 209px;
}

/* = */

.course-sec-wrapper {
      background-image: url(../../../images/custom/course-bg.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      padding: 183px 0px 230px;
      min-height: 1654px;
}

.check-list li {
      display: flex;
      align-items: center;
      grid-gap: 28px;
      color: #FFF;
      font-size: 20px;
      font-weight: 700;
      line-height: 48px;
}

.price-sec .title-box {
      font-size: 22px;
      width: 402px;
      height: 48px;
      margin: 29px 0 32px;
}

.price-sec .text-box h2 {
      color: #FFF;
      text-align: right;
      font-size: 42px;
      font-weight: 700;
      line-height: 56px;
      text-transform: capitalize;
}

.avatar-list {
      display: flex;
      align-items: center;
      grid-gap: 24px;
      margin-top: 48px;
}

.avatar-list h6 span {
      font-weight: 700;
}

.avatar-list h6 {
      color: #FFF;
      font-size: 24px;
      font-weight: 400;
      line-height: 48px;
}

.rating-list {
      display: flex;
      align-items: center;
      grid-gap: 18px;
}

.rating-list ul {
      display: flex;
      align-items: center;
      grid-gap: 5px;
}

.rating-list span {
      color: #FFF;
      text-align: right;
      font-size: 20px;
      font-weight: 400;
      line-height: 48px;
}

.rating-list h6 {
      color: #FFF;
      text-align: right;
      font-size: 26px;
      font-weight: 700;
      line-height: 48px;
}

.price-box {
      border-radius: 25px;
      border: 1px solid rgba(141, 101, 40, 0.44);
      background: rgba(13, 35, 58, 0.80);
      backdrop-filter: blur(2px);
      padding: 20px 24px 40px;
      max-width: 603px;
      position: relative;
}

/* .price-box::after {
      content: '';
      background-image: url(../../../images/custom/shadow.png);
      background-repeat: no-repeat;
      background-size: contain;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100%;
} */

.back-btn {
      color: rgba(255, 255, 255, 0.86);
      text-align: center;
      font-size: 14px;
      display: flex;
      align-items: start;
      font-weight: 400;
      grid-gap: 4px;
      justify-content: end;
      line-height: 21px;
      text-decoration-line: underline;
}

.price-list {
      display: flex;
      align-items: center;
      padding: 20px 0px 34px;
      border-bottom: 1px solid rgba(242, 242, 242, 0.06);
      justify-content: space-between;
}

.price-list h6 {
      color: #8F9AA4;
      text-align: right;
      font-size: 32px;
      font-weight: 700;
      line-height: 26px;
      text-transform: capitalize;
      position: relative;
}

.price-list h6::after {
      content: '';
      background-image: url(../../../images/custom/line.svg);
      background-size: contain;
      background-repeat: no-repeat;
      width: 70.403px;
      height: 43.006px;
      position: absolute;
      left: 10px;
      top: -7px;
}

.price-list h2 {
      color: #FFF;
      text-align: right;
      font-size: 56px;
      font-weight: 900;
      line-height: 36.4px;
      text-transform: capitalize;
}

.price-list .btn-golden {
      width: 226px;
}

.card-title h4 {
      color: #FFF;
      text-align: right;
      font-size: 32px;
      font-weight: 700;
      line-height: 23.4px;
}

.card-title h4 {
      color: #FFF;
      text-align: right;
      font-size: 32px;
      font-weight: 700;
}

.card-title ul {
      margin-top: 40px;
}

.card-title ul li {
      display: flex;
      align-items: center;
      grid-gap: 10px;
      margin-bottom: 14px;
}

.card-title ul span {
      color: #FFF;
      text-align: right;
      font-size: 17px;
      font-weight: 400;
      line-height: 21px;
}

.price-sec {
      padding-top: 84px;
}

.price-box .card-title {
      margin-bottom: 0px;
      margin-top: 34px;
}

.curve-line {
      margin-top: 140px;
}

.content-sec .icon-box {
      border-radius: 25px;
      border: 2px solid rgba(255, 255, 255, 0.03);
      background: rgba(13, 35, 58, 0.28);
      backdrop-filter: blur(2px);
      width: 137px;
      height: 116px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      margin: 0 auto;
      margin-top: -8.5rem;
}

.content-card {
      border-radius: 25px;
      border: 1px solid rgba(212, 169, 102, 0.44);
      background: rgba(13, 35, 58, 0.80);
      backdrop-filter: blur(6px);
      padding: 69px 22px 32px;
      display: flex;
      align-items: center;
      flex-direction: column;
}

.custom--container {
      margin-top: 5em;
}
.custom--container *{
      color: white;
}

.content-card ul.content-list {
      width: 100%;
}

.top-cards {
      display: grid;
      grid-gap: 69px;
      grid-template-columns: 4fr 4fr 4fr;
}

.cards-wrapper {
      max-width: 1280px;
      margin: 0 auto;
}

.content-card h4 {
      color: #FFF;
      text-align: center;
      font-size: 24px;
      font-weight: 700;
      line-height: normal;
      max-width: 170px;
      margin: 0 auto 32px;
      min-height: 72px;
}

.content-sec .title {
      margin-bottom: 162px;
}

.content-list li {
      display: flex;
      align-items: center;
      grid-gap: 14px;
      margin-bottom: 19px;
}

.content-list li:last-child {
      margin-bottom: 0px;
}

.content-list li span {
      color: #FFF;
      text-align: right;
      font-size: 14px;
      font-weight: 400;
      line-height: 21px;
}

.bottom-cards {
      display: grid;
      grid-template-columns: 4fr 4fr 4fr 4fr;
      grid-gap: 47px;
      margin-top: 150px;
}

.bottom-cards .content-card h4 {
      max-width: 221px;
}

.content-sec .btn-golden {
      font-size: 26px;
      margin: 85px auto 0px;
      width: 326px;
      height: 65px;

}

.content-sec {
      padding: 46px 0px 103px;
      margin-bottom: 70px;
      background-image: url(../../../images/custom/course-bg2.png);
      background-repeat: no-repeat;
      background-size: cover;
}

.checkout-list li {
      display: flex;
      align-items: center;
      grid-gap: 12px;
}

.checkout-list li h4 {
      color: #FFF;
      font-size: 36px;
      font-weight: 700;
      line-height: 48px;
}

.checkout-list li p {
      color: #FFF;
      font-size: 20px;
      font-weight: 400;
      line-height: 48px;
}

.checkout-sec .container-fluid {
      max-width: 100%;
      padding: 0px 90px;
}

.checkout-list {
      margin-top: 127px;
}

.top-box {
      justify-content: end;
      display: flex;
      align-items: center;
      margin-bottom: 74px;
}

.top-box h4 {
      color: #FFF;
      text-align: right;
      font-size: 26px;
      font-weight: 700;
      line-height: 48px;
}

.top-box p {
      color: #FFF;
      font-size: 20px;
      font-weight: 400;
      line-height: 48px;
}

.checkout-sec {
      padding: 90px 0px 98px;
      position: relative;
}

.checkout-sec .image-holder {
      position: absolute;
      top: 0;
      right: 0;
      z-index: -1;
      width: 50%;
}

.form-heading {
      display: flex;
      align-items: center;
      grid-gap: 18px;
      margin-bottom: 36px;
}

.form-box {
      border-radius: 22px;
      border: 1px dotted rgba(255, 255, 255, 0.09);
      background: rgba(255, 255, 255, 0.01);
      padding: 45px 45px 66px 60px;
      position: relative;
      cursor: pointer;
}

.form-heading h4 {
      color: #FFF;
      text-align: right;
      font-size: 22px;
      font-weight: 700;
      line-height: 48px;
}

.form-box .form-group label {
      color: #FFF;
      text-align: right;
      font-size: 16px;
      font-weight: 400;
      line-height: 25px;
      margin-bottom: 7px;
}

.form-box .form-group .form-control::placeholder {
      color: rgba(255, 255, 255, 0.70);
}

.form-box .form-group .form-control {
      color: #fff;
      text-align: right;
      font-size: 14px;
      font-weight: 400;
      border-radius: 8px !important;
      border: 1px solid rgba(255, 255, 255, 0.13);
      background: rgba(255, 255, 255, 0.04);
      line-height: 48px;
      height: 48px;
      padding: 16px 54px;
      background-color: transparent;
}

.input-group {
      border-radius: 10px;
      border: 2px solid rgba(212, 169, 102, 0.13);
      padding: 2px;
      margin-bottom: 16px;
}

.input-group .img-holder img {
      filter: grayscale(1);
}

.input-group.active {
      border: 2px solid rgba(212, 169, 102, 0.74);
}

.input-group.active .img-holder img {
      filter: grayscale(0);
}

.form-control:focus {
      box-shadow: none;
}

.input-group {
      position: relative;
}

.input-group .img-holder {
      position: absolute;
      top: 50%;
      transform: translate(0, -50%);
      right: 20px;
}

.bottom-img-holder {
      position: absolute;
      bottom: 15px;
      left: 10px;
}

.top-img-holder {
      position: absolute;
      top: 15px;
      right: 4px;
}

.form-box.form-box2 {
      padding: 14px;
}

.form-box-inner {
      border-radius: 22px;
      border: 1px solid rgba(255, 255, 255, 0.10);
      background: rgba(217, 217, 217, 0.01);
      padding: 18px 34px 15px 10px;
      position: relative;
}

.heading-wrapper {
      display: flex;
      align-items: start;
      justify-content: space-between;
      grid-gap: 10px;
      margin-bottom: 24px;
      width: 100%;
}

.heading-wrapper-left {
      display: flex;
      align-items: center;
      grid-gap: 12px;
      width: 63%;
}

.circle-inner {
      width: 35%;
}

.heading-wrapper-left h4 {
      color: #FFF;
      font-size: 20px;
      font-weight: 700;
      line-height: 36px;
}

.form-box-inner ul li p {
      color: rgba(255, 255, 255, 0.70);
      text-align: right;
      font-size: 12px;
      font-weight: 500;
      line-height: 20px;
}

.circle {
      background: rgba(255, 255, 255, 0.09);
      width: 30px;
      height: 30px;
      border-radius: 50%;
      margin-right: auto;
}

.course-price {
      display: flex;
      align-items: center;
}

.price-wrapper-left {
      display: flex;
      align-items: center;
      grid-gap: 24px;
}

.price-wrapper-left h6 {
      color: #FFF;
      text-align: right;
      font-size: 12px;
      font-weight: 700;
      line-height: 48px;
}

.number-box {
      border-radius: 12px;
      border: 1px dashed rgba(36, 176, 75, 0.65);
      background: rgba(217, 217, 217, 0.00);
      width: 104px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
}

.number-box2 {
      border-radius: 12px;
      border: 1px dashed rgba(232, 61, 50, 0.45);
      background: rgba(217, 217, 217, 0.00);
      width: 81px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
}

.number-box2 h2 {
      color: rgba(255, 255, 255, 0.52);
      font-size: 20px;
      font-weight: 800;
      line-height: 40.5px;
      position: relative;
}

.select-box {
      margin-top: 80px;
}

.text-divider {
      height: 2px;
      width: 57px;
      position: absolute;
      top: 50%;
      background-color: rgba(232, 61, 50, 0.67);
      transform: translate(0%, -50%);
}

.fw-semibold {
      font-weight: 500 !important;
      margin-bottom: 19px;
}

.number-box h2 {
      color: #FFF;
      font-size: 24px;
      font-weight: 800;
      line-height: 40.5px;
}

.btn-choose {
      color: #FFF;
      text-align: center;
      text-shadow: 0px 4px 4.9px rgba(0, 0, 0, 0.19);
      font-size: 16px;
      font-weight: 800;
      text-transform: uppercase;
      border-radius: 29px;
      border: 1px solid rgba(255, 255, 255, 0.10);
      background: rgba(221, 221, 221, 0.04);
      backdrop-filter: blur(3px);
      display: flex;
      width: 167px;
      height: 44px;
      align-items: center;
      justify-content: center;
}

.price-wrapper {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-left: 40px;
      margin-top: 32px;
}

.ticket-2 {
      position: absolute;
      bottom: 8px;
      left: 0;
}

.mt-31 {
      margin-top: 31px;
}

.checkbox-box .form-check-input {
      display: none;

}

.checkbox-box {
      border-radius: 22px;
      border: 1px solid rgba(255, 255, 255, 0.02);
      background: rgba(255, 255, 255, 0.01);
      padding: 9px 12px;
      margin-bottom: 25px;
}

.checkbox-box .form-check {
      padding: 0;
      margin: 0;
      border-radius: 22px;
      border: 1px solid rgba(255, 255, 255, 0.10);
      background: rgba(217, 217, 217, 0.01);
      padding: 14px 20px 14px 14px;
}

.form-box .form-group.form-group2 .form-control {
      padding-right: 14px;
}

.checkbox-box .form-check-label {
      color: #A1ADBC;
      text-align: right;
      font-size: 16px;
      font-weight: 400;
      line-height: 36px;
      display: flex;
      align-items: center;
      justify-content: space-between;
}

.form-check-left {
      display: flex;
      align-items: center;
      grid-gap: 16px;
}

.check-circle {
      background-color: rgba(255, 255, 255, 0.09);
      width: 21px;
      height: 21px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
}

.check-circle svg {
      display: none;
}

.checkbox-box.selected .form-check {
      border: 1px solid #D4A966;
}

.checkbox-box.selected .check-circle svg {
      display: block;
}

.checkbox-box.selected .check-circle {
      background-color: #D4A966;
}

.total-price-box .number-box {
      border: none;
      width: fit-content;
}

.total-price-box {
      border-top: 1px solid rgba(255, 255, 255, 0.03);
      padding-top: 12px;
      margin-top: 36px;
}

.total-price-box h6 {
      color: rgba(255, 255, 255, 0.30);
      text-align: right;
      font-size: 16px;
      font-weight: 400;
      line-height: 31px;
      margin-bottom: 5px;
}

.total-price-box .number-box h2 {
      font-size: 32px;
      font-weight: 800;
}

.total-price-box label {
      color: rgba(255, 255, 255, 0.70);
      text-align: right;
      font-size: 15px;
      font-weight: 400;
      line-height: 19px;
}

.total-price-box label a {
      text-decoration: underline;
      color: rgba(255, 255, 255, 0.70);
}

.total-price-box .form-check {
      margin-top: 24px;
      display: flex;
      grid-gap: 13px;
}

.total-price-box .form-check-input {
      border-radius: 8px;
      border: 1px solid rgba(255, 255, 255, 0.12);
      background: rgba(217, 217, 217, 0.03);
      width: 21px;
      height: 21px;
}

.form-check-input:checked[type=radio] {
      background-image: url(../../../images/custom/checked-icon.svg);
      background-color: #D4A966;
      background-size: 11px;
      background-repeat: no-repeat;
      background-position: center;
}

.btn-pay {
      width: 100%;
      color: #FFF;
      text-shadow: 0px 4px 4.9px rgba(0, 0, 0, 0.19);
      font-size: 20px;
      font-weight: 800;
      text-transform: uppercase;
      border-radius: 29px;
      border: 1px solid rgba(255, 255, 255, 0.10);
      background: #C39855;
      box-shadow: 2px -4px 14.7px 0px rgba(255, 200, 115, 0.26);
      backdrop-filter: blur(3px);
      height: 64px;
      display: flex;
      margin-top: 33px;
      align-items: center;
      position: relative;
      justify-content: center;
}

.payment-boxes {
      margin-top: 50px;
}

.btn-pay::after {
      content: '';
      background-image: url(../../../images/custom/wallet-icon4.svg);
      background-repeat: no-repeat;
      background-size: contain;
      width: 30px;
      height: 30px;
      position: absolute;
      left: 23px;
      top: 50%;
      transform: translate(0, -50%);
}

.form-box.form-box3 {
      padding: 40px 32px 38px;
}

.check-card {
      border-radius: 11px;
      border: 1px solid rgba(255, 255, 255, 0.06);
      background: rgba(217, 217, 217, 0.02);
      width: 49%;
      height: 72px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      grid-gap: 4px;
      color: #FFF;
      font-size: 20px;
      font-weight: 700;
      line-height: 36px;
}

.plus-box {
      border-radius: 1222px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background: rgba(255, 255, 255, 0.01);
      width: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 28px;
}

.btn-pay:hover {
      color: #fff;
      background: linear-gradient(90deg, #AC884F -20%, #E0B46F 11.97%, #B69157 43.95%, #815A1F 75.92%, #D4A966 107.89%);
}

.text-list {
      display: flex;
      align-items: center;
      grid-gap: 10px;
}

.form-box2 .circle img {
      display: none;
}

.form-box2.active {
      border: 3px dotted rgba(212, 169, 102, 0.32);
      background: rgba(255, 255, 255, 0.01);
}

.form-box2.active .circle {
      background-color: #D4A966;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      margin-top: 8px;
      margin-left: 11px;
      z-index: 9999;
      margin-right: auto;
}

.form-box2.active .circle img {
      display: block;
      height: 17px;
}

.form-box2.package-box.active .text-list {
      display: none;
}

.form-box2.package-box.active .hidden {
      display: flex;
}

.check-card.check-card2 {
      width: 46%;
}

.form-box2.active .btn-choose {
      border: 1px solid rgba(255, 255, 255, 0.10);
      background: #C39855;
      box-shadow: 2px -4px 14.7px 0px rgba(255, 200, 115, 0.26);
      backdrop-filter: blur(3px);
      color: #FFF;
}

.form-box2.package-box.active .form-box-inner {
      border: none;
      background-color: transparent;
      padding: 6px;
}

.footer-mobile-wrapper {
      display: none;
}

.form-box2.package-box.active .bottom-wrapper {
      border: 1px solid rgba(212, 169, 102, 0.65);
      padding: 20px;
      border-radius: 22px;
      border-top-left-radius: 0px;
      background-color: rgba(217, 217, 217, 0.01);
      margin-left: -6px;
      margin-top: -6px;
}

.shape {
      display: none;
}

.form-box2.active .form-box-inner {
      border: 1px solid rgba(212, 169, 102, 0.65);
}

.form-box2.package-box.active .shape {
      display: block;
      position: absolute;
      left: 0;
      height: auto;
}

.form-box2.package-box.active .shape img {
      max-width: inherit;
      width: 350px;
}

#video-container {
      position: relative;
      width: 100%;
      max-width: 560px;
      margin: auto;
}

.video-box {
      display: block;
      position: relative;
      cursor: pointer;
}

#video-iframe iframe {
      width: 100%;
      height: 315px;
}

.content-list.active {
      display: none;
}

.modal-content {
      background-color: transparent;
      border: none;
}

.modal-header {
      border: none;
}

.btn-close {
      opacity: 1;
      filter: invert(1);
}

.modal-dialog {
      max-width: 900px;
}

.modal-body iframe {
      height: 500px;
}

.customer-sec .experience-box ul li img {
      height: 31px;
}


#paymentModal>div>div>form>div>div>div:nth-child(2)>div>div:nth-child(3),
#paymentModal>div>div>form>div>div>div:nth-child(2)>div>div:nth-child(4),
#paymentModal>div>div>form>div>div>div:nth-child(2)>div>hr {
      display: none;
}

.password-show-hide {
      left: 20px;
      right: unset;
}

.form--check .form-check-label {
      padding-right: 12px;
      padding-left: unset;
      text-align: right;
}

.form--check .form-check-input {
      border-color: white;
      margin-top: 0;
}

.payment-item__name {
      padding-right: 10px !important;
}

.account .account-form .forgot-pass {
      color: hsl(var(--base));
}

#select2-country-1v-results .select2-results__option {
      color: black;
}

input[type="number"],
span.input-group-text.mobile-code {
      direction: ltr !important;
}

.dashboard .sidebar-menu {
      background-color: #041120;
      border-left: 1px solid;
}

.dashboard .sidebar-menu-list__link,
.dashboard .sidebar-menu-list__link .icon {
      color: white;
}

.dashboard .sidebar-menu-list__link .icon {
      margin-left: 12px;
      margin-right: unset;
}

.dashboard__right {
      background: #041120;
}

.dashboard__right h1,
.dashboard__right h2,
.dashboard__right h3,
.dashboard__right h4,
.dashboard__right h5,
.dashboard__right h6 {
      color: hsl(var(--heading-color) / 0.6);
}

.dashboard-card__content * {
      color: #041120 !important;
}

.dashboard__right p {
      color: #041120;
}

.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
      border-top-left-radius: inherit;
      border-bottom-left-radius: inherit;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
}

.input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3),
.input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-control,
.input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-select,
.input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) {
      border-top-right-radius: inherit;
      border-bottom-right-radius: inherit;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
}

.user-profile-info__content {
      width: unset;
}

.user-profile-info {
      gap: 5px;
}

.form-check-input[name=payment_method] {
      display: revert;
      margin: 0;
}

.course-list {
      background-color: #041120;
}

.course-view-inner-right .title {
      background: linear-gradient(90deg, #AC884F -20%, #C39855 11.97%, #F5C170 43.95%, #815A1F 75.92%, #D4A966 107.89%);
      position: sticky;
      top: 0;
      z-index: 999;
}

.course-view-inner-right .accordion-button,
.course-view-inner-right .accordion-button:not(.collapsed) {
      text-shadow: 0px 4px 4.9px rgba(0, 0, 0, 0.19);
      font-size: 20px;
      font-weight: 400;
      text-transform: uppercase;
      border-radius: 29px;
      border: 1px solid rgba(245, 193, 112, 0.44);
      background: rgba(221, 221, 221, 0.04);
      backdrop-filter: blur(3px);
      padding: 10px;
}

.course-view-inner-right .accordion-button::after {
      left: 22px;
      right: unset;
}

.course-view-inner-right .accordion-item {
      margin-bottom: 0;
}

.accordion-body {
      padding: 10px;
      border: 1px solid rgba(245, 193, 112, 0.44);
}

.course-view-inner-right {
      direction: ltr;
}

.course-view-inner-right * {
      direction: rtl;
      text-align: right;
}

.course-view-inner-right {
      max-height: 520px;
}

.jp-card-front {
      background-color: #041120;
}

.jp-card .jp-card-front .jp-card-lower .jp-card-expiry {
      float: left;
}

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
      -webkit-text-fill-color: grey !important;
}

button.btn.btn--rounded.btn--light.course-card-btn-enroll {
      background: linear-gradient(90deg, #AC884F -20%, #C39855 11.97%, #F5C170 43.95%, #815A1F 75.92%, #D4A966 107.89%);
}

.dashboard {
      background: revert;
}

.dashboard * {
      color: white;
}

.dashboard .button-list {
      display: none;
}

.iframe-view {
      height: 30rem;
}

.course-view-inner-right .course-lesson-content-video-link {
      color: white !important;
}

#paymentModal * {
      color: white;
}

.swiper-button-next {
      display: none;
}

.card-header {
      background: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity)) !important;
}

.social-media-bottom {
      width: 90%;
      margin: auto;
      margin-top: -6em;
      z-index: 2;
}