.answered {
    background-color: var(--answer-btn-color) !important;
}

.not-answered {
    background-color: var(--notanswer-btn-color) !important;
}

.marked {
    background-color: var(--mark-review-btn-color) !important;
}

.not-visited {
    background-color: var(--notvisited-btn-color) !important;
}

#footer .footer-top {
    background-color: var(--footer-topbackground-color) !important;
}

#footer {
    background-color: var(--footer-bottombackground-color) !important;
}

#footer .footer-top .footer-contact p,
#footer .footer-top .footer-links ul a,
#footer p {
    color: var(--footer-text-color) !important;
}

#footer h1,
#footer h2,
#footer h3,
#footer h4,
#footer h6,
#footer .copyright {
    color: var(--footer-heading-color) !important;
}

#footer .footer-top .social-links a {
    background-color: var(--social-links-icons-color) !important;

}

.main-sidebar {
    background-color: var(--sidbar-color);
}

.card-primary:not(.card-outline)>.card-header {
    background-color: var(--content-header-color);
}

.sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link.active,
.sidebar-light-primary .nav-sidebar>.nav-item>.nav-link.active {
    background-color: var(--link-active-color);

}

.content-wrapper .btn-primary {
    background-color: var(--buttons-color);
}

.main-sidebar [class*='sidebar-dark'] .brand-link,
[class*='sidebar-dark-'] .sidebar a,
.main-sidebar h1,
.main-sidebar h2,
.main-sidebar h3,
.main-sidebar h4,
.main-sidebar h5,
.main-sidebar h6,
.main-header,
.main-sidebar .card-title,
.main-sidebar .brand-link {
    color: var(--text-dashborad-color) !important;
}

.brand-link .brand-image {
    background-color: azure;
}

[class*='sidebar-dark'] .brand-link,
[class*='sidebar-dark'] .user-panel {
    border-bottom: 1px solid var(--text-dashborad-color);
}

[class*='sidebar-dark-'] .nav-treeview>.nav-item>.nav-link.active {
    background-color: var(--link-active-color);
    opacity: 0.7;
}

[class*='sidebar-dark-'] .nav-treeview>.nav-item>.nav-link.active,
[class*='sidebar-dark-'] .nav-treeview>.nav-item>.nav-link.active:hover,
[class*='sidebar-dark-'] .nav-treeview>.nav-item>.nav-link.active:focus {
    background-color: var(--link-active-color);
    opacity: 0.7;
}

.markQuestionBtn {
    background-color: var(--mark-review-next-question-btnColor) !important;
    color: white;
}

.prevQuestionBtn {
    background-color: var(--previous-question-btnColor) !important;
    color: white;
}

.clearAnswerBtn {
    background-color: var(--clear-answer-btnColor) !important;
    color: white;
}

.nextQuestionBtn {
    background-color: var(--next-question-btnColor) !important;
    color: white;
}

.submitMarkAnswerBtn {
    background-color: var(--submit-answer_mark-btnColor) !important;
    color: white;
}

.submitAnswerBtn {
    background-color: var(--submit-answer-next-btnColor) !important;
    color: white;

}

.unMarkQuestionBtn {
    background-color: var(--unmark-question-btnColor) !important;
    color: white;
}


.btn-primary {
    /* color: #fff; */
    background-color: #327b74;
    border-color: #327b74;
}

.btn-primary:hover {
    /* color: #fff; */
    background-color: #327b74;
    border-color: #327b74;
}

.heading h2 {
    color: #111111 !important;
    font-size: 50px !important;
}

h1 {
    color: #111111 !important;
}

.count-number {
    color: #111111 !important;
}

.count-number-desc {
    color: #327b74;
}

.why_choose_ul {
    text-align: left;
    font-size: 20px;
    color: #111111;
    list-style: none;
    margin-left: 100px;
}

.why_choose_ul li {
    margin-bottom: 15px;
}

.hwt_heading {
    text-align: left;
    color: #111111;
    font-size: 22px;
}

.hwt_p {
    text-align: left;
    color: #327b74;
}


/*New Css Start*/

/* Center-left caption */
.carousel-caption.caption-left {
    position: absolute;          
    top: 50%;                    
    left: 10%;                   
    transform: translateY(-50%); 
    text-align: left;            
    color: #fff;                 
    z-index: 10;                 
}

/* Add shadow to text */
.carousel-caption.caption-left h1,
.carousel-caption.caption-left p {
    text-shadow: 2px 2px 8px rgba(0,0,0,0.7); /* horizontal, vertical, blur, color */
}

.carousel-caption.caption-left h1 {
    font-size: 3rem;
    font-weight: bold;
}

.carousel-caption.caption-left p {
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

.carousel-caption.caption-left .btn {
    font-size: 1rem;
    padding: 0.5rem 1rem;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.6); /* optional button text shadow */
}
.trust-stat-card {
    background: #fff;
}
.count-number {
    font-size: 2.5rem;
    font-weight: 700;
}



.social-icons a {
    display: inline-block;
    width: 55px;
    height: 55px;
    line-height: 55px;
    margin: 5px;
    border-radius: 50%;
    background: #f1f1f1;
    color: #111111;
    font-size: 20px;
    transition: 0.3s ease;
}

.social-icons a:hover {
    background: #007bff;
    color: #fff;
    transform: translateY(-3px);
}

.start-test-btn {
    position: fixed;
    left: 20px;
    bottom: 50px;
    background: linear-gradient(45deg, #007bff, #00c6ff);
    color: #fff;
    padding: 12px 20px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    z-index: 9999;
    transition: 0.3s ease;
}

.start-test-btn:hover {
    background: linear-gradient(45deg, #0056b3, #0096c7);
    transform: translateY(-3px);
    color: #fff;
}
.owl-nav {
    position: absolute;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    pointer-events: none; /* allow clicks only on buttons */
}

.owl-nav button {
    pointer-events: all;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5) !important;
    color: #fff !important;
    border: none !important;
    font-size: 18px;
    transition: 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.owl-nav button:hover {
    background: #007bff !important;
    transform: scale(1.1);
}

.owl-prev {
    margin-left: 10px;
}

.owl-next {
    margin-right: 10px;
}
.owl-nav button {
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(10px);
    color: #000 !important;
}
.owl-nav button {
    background: #fff !important;
    color: #333 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}

.owl-nav button:hover {
    background: #007bff !important;
    color: #fff !important;
}
.owl-dots {
    text-align: center;
    margin-top: 15px;
}

.owl-dots .owl-dot {
    display: inline-block;
    margin: 0 5px;
}

.owl-dots .owl-dot span {
    width: 10px;
    height: 10px;
    background: #ccc;
    display: block;
    border-radius: 50%;
    transition: 0.3s ease;
}

.owl-dots .owl-dot.active span {
    background: #007bff;
    width: 25px;
    border-radius: 20px;
}

.owl-dots .owl-dot:hover span {
    background: #007bff;
}
.owl-dots .owl-dot span {
    width: 10px;
    height: 10px;
    background: #ddd;
    border-radius: 50%;
    transition: all 0.4s ease;
}

.owl-dots .owl-dot.active span {
    width: 30px;
    background: linear-gradient(45deg, #007bff, #00c6ff);
}

.btn-outline-primary:hover {
    color: #fff;
    background-color: #327b74;
    border-color: #327b74;
}

.btn-outline-primary {
    color: #327b74;
    border-color: #327b74;
}

.btn-outline-primary:not(:disabled):not(.disabled).active, .btn-outline-primary:not(:disabled):not(.disabled):active, .show>.btn-outline-primary.dropdown-toggle
 {
    color: #fff;
    background-color: #327b74;
    border-color: #327b74;
}

@media(max-width:768px){
    .start-test-btn {
        right: 10px;
        left: 10px;
        bottom: 15px;
        text-align: center;
        border-radius: 10px;
    }
}
@media(max-width:768px){
    .owl-nav {
        display: none;
    }
}

@media (max-width: 900px) {  
.heading h2 {
    font-size: 30px !important;
}
.count-number {
    font-size: 20px !important;
}
}


.slide-box { padding: 16px; box-shadow: 0px 4px 4px rgba(117,123,146,25%); border-radius: 8px;  
    /*background:linear-gradient(#f9e6c8 30%, #fff 50%) !important;*/
    border: 1px solid #00000026;
 }

.social {  background:linear-gradient(#fff 40% , #E9EDF0 100%) !important;  }
.aside-right .social, .user-area {  background:linear-gradient(rgba(233,237,240,0%) 5% , #E9EDF0 80%) !important;  }
  .social-box { margin-bottom: 20px; background: #fff; box-shadow: 0px 2px 4px rgba(95,125,149,25%);  border-radius: 4px; min-height: 59px; }
.social-box:hover {  box-shadow: 0px 2px 8px rgba(95,125,149,25%); }
.social-box a { display: flex; align-items: center; padding: 10px; text-decoration: none; }
.social-box a img {  margin-right: 15px; }
.social-box a span, .social-box a { font-size: 18px; font-weight: 600; }
.col-md-3:last-child .social-box span { font-size: 16px; color: #1273EB;}
.col-md-3:last-child .social-box { box-shadow: none;}
.aside-right .social .social-box  a { justify-content: center;}
.aside-right .social .social-box { box-shadow: 0px 2px 4px rgba(95,125,149,25%); min-height: auto; border-radius: 4px; }
.aside-right .social .social-box  a img { margin-right: 0px; width: 30px; height: 30px; }
.call-image img { position: relative; top: -25px; left: 0px; }

.upcoming-exam, .bg-grad-pink { background:linear-gradient(#fff 20% , #FFF2F4 100%) !important;  }
.bg-green-grad {  background:linear-gradient(rgba(36,216,119,25%) 40% , rgba(36,216,119,0) 100%) !important; }
.upcoming-exam .h4 { font-weight: 600; font-size: 24px; margin-bottom: 0px;}
.span-grad  { background:linear-gradient(118deg, #F06377, #BF43F9); font-size: 18px; font-weight: 600;  }
.span-red-grad { background:linear-gradient(118deg, #F06377, #F94343); }
.span-grad-green { background:linear-gradient(118deg, #55DA76, #27B079); }
/*.span-grad-light-green { background:linear-gradient(118deg, #55DAC2, #27B06E); }*/
.span-grad-light-green { background: linear-gradient(118deg,  #F19400,#f194006b);}
.span-grad-blue-green {  background:linear-gradient(118deg, #12B7EB, #12EBC4); }
.span-grad-green-blue {  background:linear-gradient(118deg, #54FFCC, #2D74FF); }
.upcoming-exam .span-round { margin-right: 10px; }

.span-round {
    border-radius: 5px;
    padding: 10px;
}

.bg-danger {
    background-color: #fff !important;
}

    .hero {
        background: linear-gradient(to right, #eef3f7, #dbe9f4);
        padding: 60px 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-radius: 20px;
        margin: 20px;
    }
    .hero-text {
        max-width: 500px;
    }

    .hero-text h1 {
        font-size: 32px;
        margin: 10px 0;
    }

    .hero-text p {
        color: #666;
        margin: 10px 0;
    }

    .tags {
        color: green;
        font-size: 14px;
    }

    .btn {
        display: inline-block;
        margin-top: 20px;
        padding: 12px 20px;
        background: #2ecc71;
        color: white;
        border-radius: 6px;
        text-decoration: none;
        font-weight: bold;
    }

    .store-buttons img {
        height: 40px;
        margin-left: 10px;
    }

    .hero img {
       /* width: 350px;*/
    }

    .stats {
        /*display: flex;
        justify-content: space-around;*/
        background: #e3edf6;
        padding: 20px;
        border-radius: 15px;
        width: 70%;
     
        box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    }

    .stat-box {
        text-align: left;
           padding-top: 15px;
          padding-bottom: 15px;
    }

   

 .whatsapp span { 
    
 }
 

    .whatsapp {
       /* position: fixed;
        bottom: 20px;
        right: 20px;
        background: #25D366;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0 4px 10px rgba(0,0,0,0.3);
        cursor: pointer;*/
    }

     .hero {
        background: linear-gradient(to right, #eef3f7, #dbe9f4);
        padding: 60px 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-radius: 20px;
        margin: 20px;
    }

    .hero-text {
        max-width: 500px;
    }

    .hero-text h1 {
        font-size: 32px;
        margin: 10px 0;
    }

    .hero-text p {
        color: #666;
        margin: 10px 0;
    }

    .tags {
        color: green;
        font-size: 14px;
    }

    .btn {
        display: inline-block;
        margin-top: 20px;
        padding: 12px 20px;
        background: #327B74;
        color: white;
        border-radius: 6px;
        text-decoration: none;
        font-weight: bold;
        border: 0;
    }

    .store-buttons img {
        height: 40px;
        margin-left: 10px;
    }

    .hero img {
      /*  width: 350px;*/
    }

   
    .stat-box {
        text-align: left;
    }

    .stat-box h3 {
        margin: 5px 0;
        font-size: 26px;
    }

    .stat-box p {
        color: gray;
        font-size: 18px;
        margin: 0;
    }
.store-buttons {
    display: flex;
    align-items: center;
    gap: 10px; /* space between items */
    flex-wrap: wrap; /* optional for mobile */
}

.store-buttons img {
    height: 40px;
}

.btn:hover{
        background: #F19400;
    color: white;
   
}
.category-img {
    width: 30px;
    height: 30px;
    object-fit: cover;
    border-radius: 50%;
}
.sub_title{
    font-size:16px;
    padding-top: 10px;
}
.latest-popular-course{
    padding: 20px;
}
.sub_sect {
    font-weight: 700;
    color: #000;
}

/** card design */
/* Tabs */
.tabs {
    text-align: center;
    margin: 30px 0;
    width:100%;
}
.tabs button {
    padding: 10px 18px;
    border: none;
    margin: 5px;
    border-radius: 20px;
    background: #327B74;
    cursor: pointer;
    transition: 0.3s;
}
.tabs button.active {
    background: #2f80ed;
    color: #fff;
}



/* Pricing Layout */
.pricing {
    display: flex;
    justify-content: center;
    gap: 25px;
    flex-wrap: wrap;
    padding: 20px;
}

/* Card */

.card {
     /*background: #fff;
    border-radius: 12px;
    padding: 20px;
   width: 280px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    position: relative;
    transition: 0.3s;*/
}
.card:hover {
   /* transform: translateY(-5px);*/
}

/* Popular Card */
.card.popular {
    border: 2px solid orange;
    /*transform: scale(1.05);*/
}
.admin.badge {
	position: initial;
}

/* Badge */
.front.badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: orange;
    color: #fff;
    padding: 5px 12px;
    font-size: 12px;
    border-radius: 20px;
}

/* Text */
.card h4 {
    color: #888;
    margin: 0;
}
.card h3 {
    margin: 10px 0;
}

/* Price */
.price {
    font-size: 24px;
    font-weight: bold;
    color: #27ae60;
}
.old-price {
    text-decoration: line-through;
    color: #aaa;
    font-size: 14px;
    margin-left: 8px;
}

/* Features */
.features {
    list-style: none;
    padding: 0;
    margin: 15px 0;
}
.features li {
    margin: 8px 0;
}

.custom_badge{
    background: orange;
    color: #fff;
    padding: 5px 12px;
    font-size: 12px;
    border-radius: 20px;
}

.pack_name {
        font-size: 25px;
    font-weight: bold;
}

 .slide_heade { 
  font-weight: 700;   
 }

.pagination .page-link {
    color: #327B74;              /* text color */
    border: 1px solid #327B74;  /* border color */
    margin: 0 3px;
    border-radius: 6px;
}

.pagination .page-item.active .page-link {
    background-color: #327B74;  /* active background */
    border-color: #327B74;
    color: #fff;
}

.pagination .page-link:hover {
    background-color: #F19400;  /* hover color */
    border-color: #F19400;
    color: #fff;
}
.badge_img {
   position: absolute;
    top: 35px;
    left: 50px;
  }
  
  /*how it work*/
   
 #how_it_work .step {
    display: flex;
    align-items: flex-start;
    margin-bottom: 40px;
    position: relative;
  }

 #how_it_work  .icon {
    width: 80px;
    height: 80px;
    background: #dff2e1;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    position: relative;
  }

 #how_it_work  .icon::after {
    content: "";
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 40px;
    background: #9ccfa5;
  }

  #how_it_work .step:last-child .icon::after {
    display: none;
  }

  #how_it_work  .icon img {
    width: 40px;
    height: 40px;
  }

  #how_it_work .content h2 {
    margin: 0 0 8px;
    font-size: 20px;
    text-align: left;
    font-weight: 700;
    color: #000;
  }

  #how_it_work .content p {
    margin: 0;
    color: #5c6f68;
    line-height: 1.5;
     text-align: left;
  }

@media (max-width: 991px) {   
  .row {

    margin-right: 0px;
    margin-left: 0px;
}  
      .whatsapp {

        bottom: 70px;
     
    }
    
    
    .why_choose_ul {
    margin-left:0;
}
    
    
    .slide_heade {
        text-align: center;
        font-size: 25px;
    }
.slide_desc{
    text-align: center;
    font-size: 18px;
}
.slide_btn{
    text-align: center;
 
}

.stats {

        width: 90%;
     
  
    }
}

#teachersTile h3{
	color:#000;
}

#teachersTile p{
	color:#000;
}

.js-tilesAttempted  .bg-danger {
	background-color: #dc3545 !important;
}