:root {
  /* ===== Light Mode ===== */
  --primary-color: 68, 155, 146;      /* #449b92 */
  --primary-light: 95, 194, 182;      /* #5fc2b6 */
  --primary-dark: 47, 107, 100;       /* #2f6b64 */

  --secondary-color: 255, 184, 77;    /* #ffb84d */
  --secondary-dark: 224, 162, 60;     /* #e0a23c */
  
  --third-color: 242, 1, 133;       /* #f20185 */

  --background-color: 249, 253, 252;  /* #f9fdfc */
  --surface-color: 255, 255, 255;     /* #ffffff */
  --border-color: 215, 235, 232;      /* #d7ebe8 */

  --text-color: 30, 42, 41;           /* #1e2a29 */
  --text-muted: 90, 109, 107;         /* #5a6d6b */

  --hover-color: var(--primary-light);
  
  --correct-color: 33, 173, 77;     /* #21ad4d */
}

/* ===== Dark Mode ===== */
/*@media (prefers-color-scheme: dark) {*/
/*  :root {
/*    --primary-color: 95, 194, 182;    /* #5fc2b6 */
/*    --primary-light: 127, 214, 202;   /* #7fd6ca */
/*    --primary-dark: 49, 122, 115;     /* #317a73 */

/*    --secondary-color: 255, 199, 95;  /* #ffc75f */
/*    --secondary-dark: 224, 162, 60;   /* #e0a23c */

/*    --background-color: 18, 24, 22;   /* #121816 */
/*    --surface-color: 28, 37, 35;      /* #1c2523 */
/*    --border-color: 47, 60, 58;       /* #2f3c3a */

/*    --text-color: 232, 246, 244;      /* #e8f6f4 */
/*    --text-muted: 160, 184, 181;      /* #a0b8b5 */

/*    --hover-color: var(--primary-dark);
/*  }
/*}*/




body {
    /*background-image: url('../img/bg4.png');*/
    /*background-color: cadetblue;*/
    /*background: linear-gradient(to right, rgba(220, 245, 255, 0.9), rgba(180, 242, 253, 0.9)), url('../img/bg3.jpg');
    */
    /*background-color: rgba(var(--surface-color), 1);
    background-size: cover;
    /* Adjust the size of the image to cover the entire viewport */
    background-attachment: fixed;
    /* Fixes the background image in place */
    background-position: center;
    /* Centers the image in the viewport */
    background-repeat: no-repeat;
    /* Prevents repeating the image */
    margin: 0;
    /* Removes default margin */
    padding: 0;
    /* Removes default padding */
}

  /* 🔹 Blur when MathJax is rendering */
.blur1 {
    filter: blur(5px);
    pointer-events: none; /* Prevent interaction */
    /*opacity: 0.6;*/
}

/* Optional overlay */
#overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5em;
    color: #333;
    text-align: center;
    z-index: 999;
}

  #overlay.hidden {
    display: none;
  }

/************backgrouns****************/

.bg-nav {
    background-color: rgba(var(--surface-color), 1);
}
.bg-lesson {
 background-color: rgb(246, 249, 255);
    }
.bg-course {
 background-color: rgba(var(--surface-color), 1);
}
.bg-course-left {
    background-color: #ffffff;
 /*background: 
    url('../img/background-course.png') left top no-repeat fixed;*/
}
.bg-course-right {
    background-color: #ffffff;
 /*background: 
    url('../img/background-course1.png') center bottom no-repeat;*/
}
.bg-course-cstm {
    background-color: var(--primary-light);
}
.border-cstm {
  border: 3px solid rgba(var(--third-color), 1);
}
.bg-choice-cstm {
    background-color: rgba(var(--secondary-color), 0.3);
}

.bg-question-cstm {
    background-color: rgba(var(--secondary-color), 0.5);
}

.bg-correct-cstm {
    background-color: #d9fbe5 !important;
    border-right: 4px solid #2ecc71;  /*--correct-color*/
}

.bg-wrong-cstm {
    background-color: #ffe6e6 !important;
    border-right: 4px solid #e74c3c;
}

/*******************sidbar***********/
.sidebar {

    left: 0;
    margin: 0;
    padding: 0;

    position: fixed;
    height: 100%;
    overflow: auto;
}



/********** common setting **********/
h2 {
    font-size: 2.8rem !important;
    font-weight: 700;
}

img {
    display: block;
    max-width: 100%;
}

a,
button {
    cursor: pointer;
}

.jumbotron {
    margin-bottom: 0 !important;
}

.atlas-cta {
    border-radius: 22px !important;
    padding: 12px 30px !important;
    font-weight: 700;
    transition: .3s ease-in-out !important;
}

.atlas-cta:hover {
    text-decoration: none;
    transform: translateY(-5px);
}

.atlas-cta-wide {
    width: 100%;
}

.cta-green {
    background: #00FFAD;
    color: #192440;
}

.cta-green:hover {
    color: #ffffff;
    background: #00e69c;
}

.cta-blue {
    background: #192440;
    color: #ffffff;
}

.cta-blue:hover {
    color: #ffffff;
    background: #121a2e;
}

.cta-ghost {
    border: 2px solid #192440 !important;
    color: #192440;
}

.cta-ghost:hover {
    color: #ffffff;
    background: #121a2e;
}

#banner {
    background-size: cover;
}

/********** banner **********/
#banner header {
    overflow: hidden;
}

#banner header img {
    max-width: 80px;
}

/********** feature (skew background) **********/
.feature img {
    width: 100%;
    max-width: 480px;
}

#feature-first {
    background: linear-gradient(175deg, #ffffff 55%, #a0a0a0 0);
}

#feature-last {
    background: linear-gradient(175deg, #a0a0a0 55%, #ffffff 0);
}

/********** price table **********/
#price-table {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
}

#price-table__premium {
    background: #a0a0a0;
    color: #ffffff;
}

#price-table ul li {
    padding: 5px 0;
}

/********** contact **********/
#contact {
    background-size: cover;
}

#contact ul li {
    padding: 3px 0;
}

#contact form {
    color: #a0a0a0;
}

#contact form input,
#contact form textarea {
    background: transparent;
    border: 1px solid #a0a0a0;
    color: #ffffff;
}

/********** copyright **********/
#copyright {
    background: #192440;
    padding: 2rem 3rem;
}

#copyright #social-media a {
    width: 40px;
    height: 40px;
    border-radius: 99%;
    background: #ffffff;
    transition: .4s ease;
}

#copyright #social-media a i {
    color: #192440;
    font-size: 1.2rem;
    line-height: 40px;
}

#copyright #social-media a:hover {
    background: #192440;
}

#copyright #social-media a:hover i {
    color: #ffffff;
}

/********** RWD **********/
@media (max-width: 575px) {
    #banner h1 {
        font-size: 3.6rem;
    }
}

/*********LOGiN**********/
.divider:after,
.divider:before {
    content: "";
    flex: 1;
    height: 1px;
    background: #eee;
}

.h-custom {
    height: calc(100% - 73px);
}

@media (max-width: 450px) {
    .h-custom {
        height: 100%;
    }
}

/* The Modal (background) */
.modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 1;
    /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(3, 75, 18, 0.856);
    /* Black w/ opacity */
    padding-top: 60px;
}

/* icon hover */
.fa:hover {
    color: red;
}

/* rircular sprogress bar */

/*steps progress bar */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800&display=swap");



.hoverDiv:hover {
    background: #f5f5f5 !important;
    color: rgb(54, 54, 54) !important
}

.hoverDivch:hover {
    background: #f5f5f5 !important;
    color: rgb(54, 54, 54) !important
}

.hoverDivch:active {
    background: #deffd9 !important;
    color: rgb(0, 0, 0) !important
}

.wrong .fa-check {
    display: none;
}

.good .fa-times {
    display: none;
}

.valid-feedback,
.invalid-feedback {
    margin-left: calc(2em + 0.25rem + 1.5rem);
}

/*******/
.topBtn {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Fixed/sticky position */
    bottom: 10px;
    /* Place the button at the bottom of the page */
    right: 30px;
    /* Place the button 30px from the right */
    z-index: 99;
    /* Make sure it does not overlap */
}

.btnBackLg {
    position: fixed;
    /* Fixed/sticky position */
    top: 65px;
    /* Place the button at the bottom of the page */
    right: 30px;
    /* Place the button 30px from the right */
    z-index: 99;
    /* Make sure it does not overlap */
}

.btnBackSm {
    position: fixed;
    /* Fixed/sticky position */
    bottom: 10px;
    /* Place the button at the bottom of the page */
    left: 10px;
    /* Place the button 30px from the left */
    z-index: 99;
    /* Make sure it does not overlap */
}

.showTimer {
    position: fixed;
    /* Fixed/sticky position */
    top: 60px;
    /* Place the button at the bottom of the page */
    left: 10px;
    /* Place the button 30px from the right */
    z-index: 99;
    /* Make sure it does not overlap */
}

.blur {
    filter: blur(5px);
    pointer-events: none; /* Prevent interaction */
    opacity: 0.5;
  }