html {
    line-height: 1.15; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
}

*,
*::before,
*::after {
    box-sizing: border-box; /* 3 */
}

:root {
    --e-global-color-primary: #5D5FEF;
    --e-global-color-primary-darker: #3c3ed0;
}

/* Sections
*/
body {
    margin: 0;
    font-family: "Tajawal", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    direction: rtl;
    font-size: 1rem;
    font-weight: normal;
    line-height: 1.5;
    color: #171721;
    background-color: #F7F9FF;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

}

/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1, h2, h3, h4, h5, h6 {
    margin-block-start: 0.5rem;
    margin-block-end: 1rem;
    font-family: inherit;
    font-weight: 600;
    line-height: 1.2;
    color: inherit;
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.75rem;
}

h4 {
    font-size: 1.5rem;
}

h5 {
    font-size: 1.25rem;
}

h6 {
    font-size: 1rem;
}

p {
    margin-block-start: 0;
    margin-block-end: 0.9rem;
}

/* Grouping content
*/
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
    box-sizing: content-box; /* 1 */
    height: 0; /* 1 */
    overflow: visible; /* 2 */
}

/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
    white-space: pre-wrap;
}

/* Text-level semantics
*/
a {
    background-color: transparent;
    text-decoration: none;
    color: var(--e-global-color-primary);
}
a:hover, a:active {
    color: var(--e-global-color-primary-darker);
}
a:not([href]):not([tabindex]) {
    color: inherit;
    text-decoration: none;
}
a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus {
    color: inherit;
    text-decoration: none;
}
a:not([href]):not([tabindex]):focus {
    outline: 0;
}

/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
    border-block-end: none; /* 1 */
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted; /* 2 */
}

/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
    font-weight: bolder;
}

/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
}

/**
* Add the correct font size in all browsers.
*/
small {
    font-size: 80%;
}

/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

/* Embedded content
*/
/**
* Remove the border on images inside links in IE 10.
*/
img {
    border-style: none;
    height: auto;
    max-width: 100%;
}

/* Interactive
*/
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details {
    display: block;
}

/*
* Add the correct display in all browsers.
*/
summary {
    display: list-item;
}

figcaption {
    font-size: 16px;
    color: #333333;
    line-height: 1.4;
    font-style: italic;
    font-weight: normal;
}

/* Misc
*/
/**
* Add the correct display in IE 10+.
*/
template {
    display: none;
}

/**
* Add the correct display in IE 10.
*/
[hidden] {
    display: none;
}

label {
    font-size:14px;
    font-weight:normal;
    color:#8083A3;
    cursor: pointer;
    margin-bottom:4px;
}

input, textarea, select{
    width: 100%;
    display: block;
    border:1px solid #E4E6E8;
    border-radius:10px;
    padding:6px 12px;
    min-height: 40px;
}

input[type="radio"], input[type="checkbox"], select{
    display: inline-block;
    width: unset;
    min-height: unset;
}

button, input[type=submit], .button{
    width: 100%;
    display: block;
    border:1px solid var(--e-global-color-primary);
    background-color:var(--e-global-color-primary);
    color:#ffffff;
    border-radius:10px;
    padding:12px 24px;
    min-height: 40px;
    text-align:center;
    font-size:16px;
    font-weight:bold;
    margin-bottom:10px;
    margin-top:10px;
    cursor: pointer;
    font-family: inherit;
}

button[type=submit]:hover, input[type=submit]:hover, .button:hover{
    border:1px solid var(--e-global-color-primary-darker);
    background-color:var(--e-global-color-primary-darker);
    color:#fff;
}

.button.secondary{
    border:1px solid var(--e-global-color-primary);
    background-color: #fff;
    color:var(--e-global-color-primary);
}

.margin-top-20{
    margin-top:20px;
}

.alert{
    background-color: #f8f9fc;
    width: 100%;
    display: block;
    border:1px solid #e8e9ec;
    border-radius:6px;
    padding:12px;
    color:#9c9fb1;
    text-align:right;
    font-size:14px;
}

.alert.success{
    background-color: #ccf1d4;
    border:1px solid #2bc149;
    color:#1b9534;
}

.alert.success a{
    color:#1b9534;
    font-weight:bold;
}

.alert.error{
    background-color: #f1cccc;
    border:1px solid #c12b2b;
    color:#951b1b;
}

.alert.error a{
    color:#951b1b;
    font-weight:bold;
}

.logo img{
    width: 100%;
    max-width: 160px;
}

.section-full{
    display: flex;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    width:100%;
}

.section-limit{
    display: flex;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    width:100%;
    max-width: 1270px;
    padding-top:61px;
}

.header{
    margin-top:40px;
}

.align-center{
    align-items: center;
    align-content: center;
}

form{
    display:flex;
    flex-direction: column;
    margin-top:20px;
    text-align:right;
}

form div, form div{
    margin-bottom:10px;
    margin-top:4px;
}

.width-400{
    width:100%;
    max-width: 400px;
    margin:auto;
}

.bg-white{
    background-color: #ffffff;
}

.bg-image{
    background-position: center center;
    background-size: cover;
}

.height-full{
    min-height:100vh;
}

.padding-relaxed{
    padding:60px 20px;
}

.menu{
    background:#3477d1;
    border-bottom:1px solid #3477d1;
    display: flex;
    justify-content: space-between;
    padding: 10px 20px;
    align-items: center;
    z-index:999;
    position: fixed;
    top:0px;
    left:0px;
    width:100%;
    color:#fff;
}

.menu .logo img{
    width: 100%;
    max-width: 130px;
    margin-left:20px;
    margin-bottom:-10px;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropbtn {
    color: #fff;
    font-size: 16px;
    border: none;
    cursor: pointer;
    background-color: transparent;
    padding:0px;
    font-weight:bold;
    margin:0px;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #fff;
    min-width:200px;
    max-width:300px;
    border:1px solid #E4E6E8;
    border-radius: 10px;
    z-index: 1;
    overflow: hidden;
}

.dropdown-program strong{
    color: #171721;
    font-size:16px;
    text-decoration: none;
    margin:4px;
    border-bottom:1px solid #E4E6E8;
    display:block;
}

.dropdown-content a {
    color: #171721;
    padding: 8px 12px;
    text-decoration: none;
    display: block;
    border-radius:10px;
    margin:4px;
}

.dropdown-content a:hover {
    background-color: #f2f2f2;
}

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

.profile-image {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    margin-left:10px;
}

.user-profile, .user-profile .dropbtn{
    display: flex;
    align-items: center;
}

.user-profile .dropdown-content{
    left:0px;
}

.programs-container, .courses-container {
    display: grid;
    flex-wrap: wrap;
    column-gap: 20px;
    row-gap: 20px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.program-card, .course-card {
    color: #171721;
    margin:0px;
    text-align: right;
    border: 1px solid #E4E6E8;
    padding: 0px;
    width: 100%;
    border-radius:10px;
    background-color: #fff;
    overflow:hidden;
    cursor: pointer;
    position: relative;
}

.program-card .status, .course-card .status, .course-card .locked{
    background-color: #E4E6E8;
    color: #171721;
    font-weight: normal;
    padding: 10px 16px 6px 16px;
    border-radius:10px;
    position: absolute;
    top:10px;
    right:10px;
}

.course-card .locked{
    left: 10px;
    right: unset;
    padding: 11px 10px 3px 10px;
}

.program-card img, .course-card img{
    width: 100%;
    height:180px;
    object-fit: cover;
}

.program-card h2, .course-card h3{
    padding:10px 20px 0px 20px;
    font-size:20px;
}

.program-card p, .course-card p{
    padding:0px 20px 10px 20px;
    font-weight:normal;
    color:#8083A3;
}

.program-card.enrolled , .course-card.enrolled{
    border-color: var(--e-global-color-primary);
}

.program-card.enrolled .status, .course-card.enrolled .status{
    background-color: var(--e-global-color-primary);
    color:#fff;
}

.course-card.enrolled .locked{
    background-color: #E4E6E8;
    color:#8083A3;
}

.sidebar {
    width: 250px;
    position: fixed;
    right: 0;
    top: 0;
    height: 100%;
    background-color: #F7F9FF;
    padding: 20px;
    z-index:1;
    padding-top:71px;
    border-left:1px solid #E4E6E8;
    overflow-x: hidden;
    transition: 0.5s;
}

.main-content {
    margin-top:61px;
    background:#fff;
    min-height: calc(100vh - 61px);
    margin-right: 250px; /* Adjusted to accommodate the sidebar */
    padding: 20px;
}

.accordion-button {
    background-color: transparent;
    cursor: pointer;
    padding: 0px;
    border-radius: 0px;
    font-size:20px;
    text-align: right;
    border: none;
    outline: none;
    width: 100%;
    transition: 0.4s;
    margin-bottom: 5px;
}

.accordion-button:hover{
    background-color: transparent;
}

.course-button {
    width: 100%;
    text-align: right;
    border: none;
    outline: none;
    padding: 10px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.course-button:hover {
    background-color: #EFEFFD;
}

.topic-list {
    padding-right: 12px;
    margin-right:4px;
    border-right:1px solid #E4E6E8;
    margin-bottom:10px;
}

.topic.active{
    font-weight: bold;
}

.sidebar a {
    display: block;
    color: black;
    padding: 5px 0;
    text-decoration: none;
    font-size: 14px;
}

.sidebar a:hover {
    text-decoration: underline;
}

.accordion-content {
    padding: 6px 0px;
}

.completion-bar{
    margin-top:-20px;
    margin-left:-20px;
    margin-right:-20px;
    background-color: #F7F9FF;
    height: 10px;
    position: relative;
    margin-bottom: 20px;
    border-radius: 0px;
    overflow: hidden;}

.completion-rate{
    height: 100%;
    background-color: #B2D939;
    transition: width 0.3s ease;
}

.desktop-remove{display: none !important;}

/* Lessons container */
.lessons-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.lesson-item {
    display: flex;
    cursor: pointer;
    align-items: center;
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    border:1px solid #E4E6E8;
    transition: background-color 0.3s ease;
}

.lesson-item:hover {
    background-color: #F7F9FF;
}

.lesson-image {
    width: 200px;
    height: 150px;
    object-fit: cover;
    border-radius:10px;
}

.lesson-status-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    border:2px solid #fff;
    border-radius:100px;
}

.lesson-details{
    padding-right:20px;
}

.lesson-details h2 {
    margin: 0 0 10px;
    font-size: 20px;
}

.lesson-container {
    max-width: 1000px;
    margin: 20px auto;
}

.lesson-container h1 {
    text-align: center;
    font-size: 28px;
    margin-bottom: 20px;
}

.lesson-intro {
    margin-bottom: 20px;
    padding: 20px;
    background-color: #f7f9ff;
    border-radius: 10px;
}

.lesson-video {
    margin-bottom: 30px;
    border-radius: 10px;
    overflow: hidden;
    line-height: 0px;
}

.lesson-text {
    margin-bottom: 20px;
}

.lesson-pdfs {
    margin-bottom: 20px;
}

.pdf-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: right;
}

.pdf-card {
    background-color: #f7f9ff;
    padding: 20px;
    border: 1px solid #e4e6e8;
    border-radius: 10px;
    text-align: center;
    width: 200px;
    overflow: hidden;
}

.pdf-card img {
    width: 60px;
    height: 60px;
    margin-bottom: 10px;
    object-fit: contain;
}

.pdf-card a {
    font-size: 14px;
    text-decoration: none;
    color: #000000;
    width: 100%;
    display: block;
    text-overflow: initial;
}

.quiz-section{
    background-color: #f7f9ff;
    padding: 20px;
    border: 1px solid #e4e6e8;
    border-radius: 10px;
}

.quiz-section h3{
    font-size:20px;
}

#submit_quiz{
 display:inline-block;
 width:200px;
}

.mark-completed {
    text-align: center;
    margin: 20px 0px;
    background: #B2D939;
    padding: 30px 20px 40px 20px;
    border-radius: 10px;
    border: 1px solid #e4e6e8;
    color:#fff;
}

.mark-completed button {
    width:200px;
    padding: 15px 30px;
    background-color: #fff;
    border:1px solid #fff;
    color: #86ae0d;
    border-radius: 50px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    margin:0px auto;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.mark-completed button:hover {
    background-color: #efe9e9;
    border:1px solid #efe9e9;
    color: #5d5fef;
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

.mark-completed button:active {
    background-color: #efe9e9;
    border:1px solid #efe9e9;
    color: #5d5fef;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
}

.forum-card {
    border-radius: 10px;
    padding: 20px;
    margin-top: 30px;
    border: 1px solid #e4e6e8;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.forum-card h3{
    text-align: center;
    margin: 20px 0px;
    background: #efeffd;
    padding: 30px 20px;
    border-radius: 10px;
    border: 1px solid #e4e6e8;
}

.forum-card .forum-post{
    padding: 20px;
    background-color: #f7f9ff;
    border-radius:10px;
    border: 1px solid #e4e6e8;
    margin-bottom:20px;
}

.forum-card .forum-post .post-time, .forum-card .forum-post .reply-time{
    font-size: 12px;
    color: #a6a8b0;
}

.forum-card .forum-post .post-author, .forum-card .forum-post .post-reply .reply-author {
    font-weight: bold;
    margin-bottom: 10px;
    position: relative;
}

.forum-card .forum-post .post-author .profile-picture, .forum-card .forum-post .post-reply .reply-author .profile-picture {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-left: 10px;
    vertical-align: middle;
    object-fit: cover;
}

.reply-author svg {
    vertical-align: bottom;
    margin-right: -19px;
    position: absolute;
    bottom: 0px;
    z-index: 999;
}

.post-author svg {
    vertical-align: bottom;
    margin-right: -22px;
    position: absolute;
    bottom: 0px;
    z-index: 999;
}

.forum-card .forum-post .post-content, .forum-card .forum-post .post-reply .reply-content {
    margin-bottom: 10px;
}

.forum-card .reply-form {
    margin-top:10px;
    padding:10px 20px 20px 20px;
    background-color: #fff;
    border-radius:10px;
    border: 1px solid #e4e6e8;
}

.forum-card .forum-post .post-reply {
    border: 1px solid #e4e6e8;
    margin-top:10px;
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
}

.profile-card, .reset-card, .guest-view {
    background-color: white;
    border: 1px solid #e4e6e8;
    max-width: 600px;
    margin: 40px auto;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    margin-top:101px;
}
.profile-card h2 {
    margin-bottom: 10px;
}
.profile-card img {
    border-radius: 50%;
    margin-bottom: 20px;
    width: 150px;
    height: 150px;
    object-fit: cover;
}
.profile-card form {
    display: flex;
    flex-direction: column;
    margin-top:0px;
}
.profile-card label {
    width: 100%;
    text-align: right;
    margin-bottom: 5px;
    margin-top:10px;
}

.reset-card h2 {
    margin-bottom: 0px;
}
.reset-card form {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top:0px;
}
.reset-card label {
    width: 100%;
    text-align: left;
    margin-bottom: 5px;
    margin-top:10px;
}

.lesson-upload {
    background-color: #f7f9ff;
    border: 1px solid #e4e6e8;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 10px;
}

.lesson-upload h3 {
    font-size: 1.5rem;
    margin-bottom: 20px;
    color: #171721;
    font-weight: 600;
}

.lesson-upload form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lesson-upload label {
    font-size: 14px;
    font-weight: normal;
    color: #8083a3;
    margin-bottom: 4px;
    cursor: pointer;
}

.lesson-upload input[type="file"] {
    display: block;
    width: 100%;
    border: 1px solid #e4e6e8;
    border-radius: 10px;
    padding: 10px;
    font-size: 16px;
    min-height: 40px;
    color: #171721;
}

.lesson-upload button {
    width: 100%;
    background-color: var(--e-global-color-primary);
    color: #fff;
    border: 1px solid var(--e-global-color-primary);
    border-radius: 10px;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    margin-top: 10px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.lesson-upload button:hover {
    background-color: var(--e-global-color-primary-darker);
    border-color: var(--e-global-color-primary-darker);
}


@media (min-width: 768px) {
    .col-50{
        width: 50%;
    }
}

.desktop-remove {
    display: none !important;
}

.modal-content {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  max-width: 900px;
  margin: auto;
}

#lockedModal .modal-content{
    max-width: 400px;
}

.modal-body {
  display: flex;
  flex-direction: column-reverse;
  gap: 20px;
}

/* Desktop layout */
@media (min-width: 768px) {
  .modal-body {
    flex-direction: row;
  }

  .payment-column {
    width: 60%;
  }

  .course-column {
    width: 40%;
  }

  .payment-column {
    padding-right: 20px;
    border-right: 1px solid #ddd;
    align-items: right;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
  }

  .course-column {
    padding-left: 20px;
    position: relative;
  }

  #lockedModal .course-column{
    padding-left: 0px;
    width: 100%;
  }
}

.modal-course-image {
  width: 100%;
  border-radius: 6px;
  margin-bottom: 10px;
}

.modal-title {
  font-size: 1.5rem;
  margin-bottom: 10px;
}

.modal-message {
  font-size: 1rem;
  margin-bottom: 10px;
  direction: rtl;
}

.modal-close-btn {
    position: absolute;
    right: 10px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: 1.2rem;
    line-height: 1;
    padding: 8px 15px 6px 15px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    width: unset;
    transition: background 0.2s ease-in-out;
}

.modal-close-btn:hover {
  background: rgba(0, 0, 0, 0.8);
}

.pricing-options {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 768px) {
  .pricing-options {
    flex-direction: row;
    justify-content: space-between;
  }
}

.pricing-card {
  flex: 1;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 16px;
  background: #f9f9f9;
  text-align: center;
  transition: all 0.3s ease;
}

.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.1);
}

.pricing-card.highlighted {
  background-color: #f0f8ff;
  border-color: #00aaff;
}

.pricing-header {
  margin-bottom: 12px;
}

.pricing-title {
  font-size: 1.2rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 4px;
}

.pricing-price {
  font-size: 1.4rem;
  color: #111;
}

.pricing-price span {
  font-size: 0.9rem;
  color: #777;
}

.pricing-card button {
  margin-top: 8px;
  background: #00aaff;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 10px 16px;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  transition: background 0.2s ease;
}

.pricing-card button:hover {
  background: #008ecc;
}


@media (max-width: 768px) {

    .lesson_image_box{
        width:100%;
    }

    .lesson_image_box .locked {
        margin-bottom: 20px;
    }

    .desktop-remove {
    display: block !important;
  }

  .lesson-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .lesson-image {
    width: 100%;
    height: 250px;
    object-fit: cover;
    margin-bottom: 20px;
  }

  .lesson-details {
    padding-right: 0px;
  }


    .main-content {
        margin-right: 0px; /* Adjusted to accommodate the sidebar */
        padding: 20px;
    }

    .sidebar{
        padding:0px;
        width:0px;
        border-left:0px;
        z-index:11;
    }

    .desktop-remove{display: block !important;}

    .mobile-menu{
        font-size: 24px;
        cursor: pointer;
        background-color: #ffffff;
        border: 1px solid #e4e6e8;
        padding: 22px 10px 18px 10px;
        border-radius: 100%;
        position: fixed;
        top: 80px;
        right: 10px;
        line-height: 0px;
        color: #a2a3a3;
        z-index:9;
    }

    .closebtn{
        font-size: 24px !important;
        cursor: pointer;
        background-color: #ffffff;
        border: 1px solid #e4e6e8;
        padding: 18px 10px 14px 10px !important;
        border-radius: 100%;
        line-height: 0px !important;
        color: #a2a3a3 !important;
        float: right;
        margin-bottom: 16px;
        margin-top: 10px;
    }

    .col-50{
        width: 100%;
    }
    .phone-remove{
        display: none;
    }

    .programs-container, .courses-container{
        display: grid;
        flex-wrap: wrap;
        gap: 20px;
        grid-template-columns: 1fr;
    }

        .modal-close-btn {
        right: 30px;
        padding: 10px 15px 6px 15px;
    }

  .modal-content{
    max-width: 100%;
    margin: 10% !important;
    max-height: calc(100vh - 10%);
    overflow: auto;
  }

}