@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
*{
    padding:0;
    margin:0;
    box-sizing: border-box;
    font-family: "Roboto", sans-serif;
    scroll-behavior: smooth;
}

.accordion-item,
.accordion-button,
.accordion-body {
    background-color: transparent !important;
    box-shadow: none !important;
    border:0;
}

/* email animation */

#loadingOverlay{
    display: none;
    width:30px; 
    background:white;
}

#loadingOverlay img{
    width:30px;
}

/* delay show */
.aos-item {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.8s ease-out;
}

html, body, main.main-user, .container-fluid, .row.flex-nowrap {
    height: 100vh;  /* Full viewport height */
}

.col.ps-md-2.pt-2.overflow-auto {
  height: 100%;   /* Take full height of row */
  overflow-y: auto; /* Enable vertical scroll */
}

.aos-item.show {
  opacity: 1;
  transform: translateY(0);
}

.main-user .data-con{
    background:white;
    padding:50px;
    margin-top:30px;
    border-radius:12px;
}

.quioner-container{
    position: absolute;
    z-index: 100;
    right:30px;
    bottom:100px;
    cursor:pointer;
    animation:shake 2s infinite ease-in-out;
}

.quioner-container::before {
    content: "Test your Knowledge";
    left: 0;
    color: #fff;
    background: #333;
    padding: 5px 10px;
    border-radius: 5px;
    opacity: 0;
    animation: showText 2s infinite;
}

@keyframes showText {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

@keyframes shake {
    0%   { transform: rotate(0, 0); }
    25%  { transform: rotate(-1px, 0); }
    50%  { transform: rotate(1px, 0); }
    75%  { transform: rotate(-1px, 0); }
    100% { transform: rotate(0, 0); }
}
  
.quioner-container img{
        width: 50px;
}

nav {
    position: relative;
    z-index: 10; 
}

.aos-animate {
    z-index: auto; 
}

.lesson_add textarea{
    height:100px;
}

.btn-cancel{
  background:#a9a9a9;
  color:white;
}

.btn-cancel:hover{
  background:#808080;
  color:white;
}

.btn-save{
  background:#006400;
  color:white;
}

.btn-save:hover{
  background:#1c352d;
  color:white;
}

.btn-add{
    background: #00bf63;
    color:white;
}

.btn-add:hover{
    background:#009700;
    color:white;
}

.error-alert{
    color:white;
    background-color: #f44336;
    padding: 10px;
}

.success-alert{
    color:white;
    background-color: #008000;
    padding: 10px;
}

.landing-header  .toggle-icon {
    content: url('../images/icons-logo/close.png'); 
}

.landing-header .icons{
    width:15px;
}

.landing-header  #navbar-button{
    width: 30px;
    height: 30px;
}

.landing-header .navbar{
    background:white;
    box-shadow: 1px 1px 20px gray;
    padding:20px 0;
}

.landing-header .navbar .navbar-brand span:nth-child(1){
    color:white;
    font-weight: bold;
    background-color:#00bf63; 
    padding:10px;
}

.landing-header .navbar .navbar-brand span:nth-child(2){
    color:#00bf63;
    font-weight: bold;
    background-color: white;
    padding:10px;
}

.landing-header .navbar .navbar-nav {
    overflow: hidden;
}

.landing-header .navbar .navbar-nav li{
    padding:0 20px 0 20px;
    position: relative;
    display: flex;
    justify-content: center;
    overflow: hidden;
    align-items: center;
}

.landing-header .navbar .navbar-nav li::before{
   content: "";
   border-bottom:3px solid #00bf63;
   padding:20px;
   position: absolute;
   width:100%;
   left:-800px;
   top:-10px;
}

.landing-header .navbar .navbar-nav li:hover::before {
    content: "";
    left:0px;
    transition: 0.7s ease-in-out;
 }

.landing-header .navbar .navbar-nav li:last-child {
    background:#00bf63;
    border-radius: 20px;
    color:white;
}

.landing-header .navbar .navbar-nav li:last-child:hover {
    background:#008c49;
}

.landing-header .navbar .navbar-nav li:not(:last-child) a {
    color: black;
    font-weight: 500;
}  

.landing-header .navbar .navbar-nav li:last-child  a{
    color:white;
    font-weight: 500;
}

.landing-header .banner{
    background-image: url('./../images/background/banner-bg.jpg');
    width: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    padding:50px 0 50px 0;
}

.landing-header .banner .inner-banner{
    padding:200px 0 50px 0;
    display: flex;
    flex-direction: column;
}

.landing-header .banner .inner-banner h1{
    color:white;
    font-size:50px !important;
}

.landing-header .banner .inner-banner .btn-learn-more{
    width: fit-content;
    background-color: rgb(43, 135, 249);
    color:white;
    font-weight: bold;
}

.landing-header .banner .inner-banner .btn-learn-more:hover{
    background-color: #549FFB;
}

/* forgot password */
#forgot_password_id{
    background:url('../images/background/forgot_pass-bg.jpg');
    width: 100%;
    background-position:center;
    background-size:cover;
}

#forgot_password_id .forgot-password-section form{
    background:white;
    width:500px;
    padding:30px;
    border-radius:12px;
}

#forgot_password_id .forgot-password-section{
    padding:50px 0;
}

#forgot_password_id .forgot-password-section .text-header{
    text-align:center;
    margin-bottom:30px;
}

#forgot_password_id .forgot-password-section .text-header img{
    width:50px;   
    background:#e8e8ff;
    border-radius:50%;
    padding:10px;
    margin-bottom:20px;
}

#forgot_password_id .forgot-password-section input[type='email']::placeholder{
    color:gray;
    font-size:12px;
    padding:10px;
}

#forgot_password_id .forgot-password-section .verify_pass{
    display: flex;
    gap:10px;
    padding:0;
}

#forgot_password_id .forgot-password-section .verify_pass li{
    list-style: none;
}

#forgot_password_id .forgot-password-section .verify_pass li input{
    text-align: center;
    bordeR:1px solid gray;
}

#forgot_password_id .forgot-password-section  input{
    bordeR:1px solid gray;
}

@media(max-width:720px){
    #forgot_password_id .forgot-password-section form{
        width:100%;
    }
}

/*about us*/
.aboutus-section{
    padding:100px 0;
}

.aboutus-section h1{
    border-bottom:5px solid #00bf63;
    width: fit-content;
    margin:0 auto 50px auto;
}

.aboutus-section .inner-aboutus{
    text-align: center;
}

.aboutus-section .inner-aboutus .description{
    width:60%;
    margin:auto;
}

/*lesson*/
.lesson-section{
    background:#d3d3d3;
    padding:100px 0;
}
.lesson-section .text-header{
    border-bottom:3px solid white;
}
.lesson-section .inner-lesson {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 10px;
    padding: 100px 0;
}
.lesson-section .box {
    background: white;
    border-radius: 10px;
    border-bottom: 10px solid #006400;
    display: flex;
    flex-direction: column;
    height: 100%; 
    overflow: hidden; 
}

.lesson-section .top {
    flex: 1; /* Make the top part flexible to fill available space */
    overflow: hidden; /* Prevent image from overflowing */
}

.lesson-section .top img {
    border-top-left-radius:10px;
    border-top-right-radius:10px;
    width: 100%;
    height: 200px; /* Adjust this value to ensure consistency */
    object-fit: cover; /* Ensures image covers space without distortion */
}

.lesson-section .bot {
    padding: 10px;
    color: black;
}  

/*footer*/
.landing-footer{
    padding:50px 0 20px 0;
    background:#00bf63;
}

.landing-footer .logo{
    text-align: center;
    padding:0 0 50px 0;
}

.landing-footer .logo span:nth-child(1){
    color:white;
    font-weight: bold;
    background-color:#00bf63; 
    padding:10px;
    border:1px solid white;
}

.landing-footer .logo span:nth-child(2){
    color:#00bf63;
    font-weight: bold;
    background-color: white;
    padding:10px;
}

.landing-footer .shorcut-link ul {
    list-style-type: none;
    display:flex;
    justify-content: center;
    gap:10px;
 }

 .landing-footer .shorcut-link{
    padding:0 0 30px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
 }

 .landing-footer .shorcut-link  p{
    color:white;
 }

.landing-footer .shorcut-link ul a{
   text-decoration: none;
   color:white;
}

.landing-footer .shorcut-link ul a:hover{
    color:black;
}

.landing-footer .credits{
    text-align: center;
    color:white;
}

.login-form #body-modal{
    background:#00bf63;
    width: 100%;
    padding:20px;
    background-position: center;
    background-size: cover;
}

.login-form input{
    border:none;
    background:transparent;
    border:1px solid white;
}

.login-form .top img{
    width:150px;
}

.login-form .btn-signin{
    width:100%;
    background:#228b22;
    color:white;
    border:none;
}

.login-form .btn-signin:hover{
    background:#006400;
}

.login-form .btn-cancel{
    width:100%;
    color:white;
    background:#808080;
    border:none;
}

.login-form .btn-cancel:hover{
    background:#555555;
}

.login-form  span{
    display:flex;
    justify-content:right;
}

.login-form label{
    color:white;
}

.login-form .password_container{
    display:flex;
}

.login-form .password_container input{
    border-right:0;
    border-top-right-radius:0;
    border-bottom-right-radius:0;
}

.login-form .password_container input:focus img{
    background:white;
}

.login-form .password_container img{
    width:50px;
    border:1px solid white;
    border-left:0;
    padding:0 10px 0 10px;
    border-top-right-radius:7px;
    border-bottom-right-radius:7px;
    cursor:pointer;
}

.login-form .modal-body{
    width:80%;
    margin:auto;
}

.login-form .or-separator {
    display: flex;
    align-items: center;
    text-align: center;
    color: white;
}

.login-form .or-separator::before,
.login-form .or-separator::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid white;
    margin: 0 10px;
}

.register-form .or-separator {
    display: flex;
    align-items: center;
    text-align: center;
    color: white;
}

.register-form .or-separator::before,
.register-form .or-separator::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid white;
    margin: 0 10px;
}

.register-form .btn-signup{
    width:100%;
    background:#228b22;
    color:white;
    border:none;
}

.register-form .btn-signup:hover{
    background:#006400;
}

.register-form .btn-cancel{
    width:100%;
    color:white;
    background:#808080;
    border:none;
}

.register-form .btn-cancel:hover{
    background:#555555;
}

.register-form .modal-body{
    background:#00bf63 !important;
} 

.register-form .modal-body form{
    width:80%;
    margin:auto;
}

.register-form label{
    color:white;
}

.register-form .password_container{
    display:flex;
}

.register-form .password_container input{
    border-right:0;
    border-top-right-radius:0;
    border-bottom-right-radius:0;
}

.register-form .password_container input:focus img{
    background:white;
}

.register-form .password_container img{
    width:50px;
    border:1px solid white;
    border-left:0;
    padding:0 10px 0 10px;
    border-top-right-radius:7px;
    border-bottom-right-radius:7px;
    cursor:pointer;
}

/*admin style*/
.main-admin #sidebar-nav {
    width: 200px;
    padding:20px;
    background: #00bf63;
}

.main-admin .sidebar-icon{
    width:20px;
}

.main-admin .sidebar-link{
   display:flex;
   gap:10px;
   text-decoration:none;
   color:white;
   padding:8px 10px 8px 10px;
}

.main-admin .head{
    margin: 0 0 30px 0;
    position:relative;
}

.main-admin .active{
    background:#2e8b57;
    border-radius:8px;
}

.main-admin th{
    background:#228b22;
    color:white;
}

.btn-search{
    background:#006400;
    color:white;
}

.btn-search:hover{
    background:#009700;
    color:white;
}

.search-bar form{
    display:flex;
    flex-wrap: wrap;
    justify-content:end;    
    gap:10px;
}

.search-input{
    width:30%;
}

.chapter_add .image-preview{
    padding:10px;
    border:1px dashed black;
    margin-top:10px;
}

.chapter_add .image-preview img{
    width:100%;
}

/* user style*/

.main-user #sidebar-nav {
    width: 200px;
    padding:20px;
    background: #00bf63;
    position: sticky;
    top:0;
}

.main-user .sidebar-icon{
    width:20px;
}

.main-user .sidebar-link{
   display:flex;
   gap:10px;
   text-decoration:none;
   color:white;
   padding:8px 10px 8px 10px;
}

.main-user .head{
    margin: 0 0 30px 0;
    position:relative;
}

.main-user .active{
    background:#2e8b57;
    border-radius:8px;
}
.main-user .lesson-user-section{
    height:100vh;
    overflow:hidden;
}

.main-user{
    background:#234f1e;
}

.main-user .lesson-user-section .box-container{
    display:flex;
    justify-content:space-around;
    flex-wrap:wrap;
    gap:10px;
}

.main-user .lesson-user-section .box {
    background: white;
    color:black;
    width: 32%;
    margin:20px 0;
    border-radius: 10px;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    height: auto; 
    overflow: hidden; 
}

 .main-user .lesson-user-section .content-img{
    width:100%;
    height:300px;
}

.main-user .main-user .lesson-user-section .box .bot{
    padding:20px;
}

.main-user .live_exam_section .timer_icon {
    width: 30px;
}

.main-user .live_exam_section .question_image {
    width: 100%;
}

.main-user .live_exam_section #timer {
    color: white;
    font-weight: bold;
    font-size: 1.5rem;
}

@media (max-width: 991px) {
    .lesson-section .inner-lesson {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); 
    }

    .main-user .lesson-user-section .box{
        width:66%;
    }
}

@media(max-width:767px){
    .landing-header br{
        display:none;
    }

    .landing-header .banner .inner-banner{
        padding:100px 0 50px 0;
    }

    .aboutus-section .inner-aboutus .description{
        width:100%;
    }

    .login-form .modal-body{
        width:100%;
    }

    .search-input{
        width:100%;
    }

    .lesson_add .left{
        margin: 0 0 20px 0;
    }

    .lesson-section .inner-lesson {
        grid-template-columns: 1fr; 
    }
     
    .main-user .lesson-user-section .box{
        width:100%;
        height: auto;
    }

    .main-user .lesson-user-section .content-img{
        height:auto;
    }

}