.demo-header{
    background-color: #181A20;
    color:white;
}
.demo-header .navbar{
    box-shadow: 0px 0px 5px #6A6B6B;
}
.demo-header-logo{
    width: 100px;
}
    .navbar-expand-lg .navbar-nav {
        gap: 50px;
    }
    
    .demo-header-button{
        width: 150px;
        border:1px solid #6A6B6B !important;
       color: #6A6B6B !important;
               font-weight: 600 !important;

    }
      .demo-header-buttons{
        gap:10px;
        align-items: center;
      }
      .demo-header-buttons i{
        font-size: 25px;
        color:white;
      }
.navbar-expand-lg .navbar-nav .dropdown-menu{
     background-color: #1E1E1E;
}
.navbar-expand-lg .navbar-nav .dropdown-menu li a:hover{
    background-color: #6A6B6B !important;
    color:#FCD535 !important;
}
      .demo-header .navbar-nav li a{
        color:white;
      }

      .navbar-nav .nav-link.active, .navbar-nav .nav-link.show{
        color:yellow !important;
      }

      .dropdown-toggle::after{
        display: none !important;
      }

      .demo-header-button.nav-button-active{
        background-color: #FCD535 !important;
        color:black !important;
      }


      /* nav transform into X symbol */
      .navbar-toggler-icon {
  display: none;
}

/* Basic bar styles */
.custom-toggler .bar {
  display: block;
  width: 25px;
  height: 2px;
  background-color: #ffd900;
  margin: 5px auto;
  transition: all 0.3s ease;
}

/* Transform to X when .open is added */
.custom-toggler.open .top-bar {
  transform: translateY(7px) rotate(45deg);
}

.custom-toggler.open .middle-bar {
  opacity: 0;
}

.custom-toggler.open .bottom-bar {
  transform: translateY(-7px) rotate(-45deg);
}
      @media (max-width:1100px) {
        .navbar-expand-lg .navbar-nav {
            gap:20px
        }
      }

      @media (max-width:986px) {
        .navbar-expand-lg .navbar-nav{
            gap:0px;
        }
      }

/* -------------------------------------------- */
.demo-login-page-section{
    background-color: #181A20;
   padding-block: 50px;
}
.demo-login-page-section-container{
    border:1px solid #0B0E11;
    box-shadow: 0px 0px 5px #63686d;
    border-radius: 1rem;
     margin-inline: 100px;
}
.demo-login-page-section-left{
  width: 100%;
  height: 100%;
  background: url(/images/login.jpg);
  background-position: center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 1rem 0 0 1rem;
}
.demo-login-page-section-left img{
      max-width: 150%;
  max-height: 100%;
  width: 100%;
  height: auto;
  object-fit: cover; 
  z-index: 2;
}
.demo-login-page-section-right{
    padding:20px 50px;
}

.demo-login-page-section-right-header{
    text-align: center;
    color:white;
}

.demo-login-page-section-right-para{
    text-align: center;
    color:white;
    padding-block: 10px;
    margin-bottom: 0px !important;
}
.demo-login-page-section-right-form{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.demo-login-page-section-right-form-email{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.demo-login-page-section-right-form-password{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.demo-login-page-section-right-form label{
    color:white;
}
.demo-login-page-section-right-form input{
    border:1px solid #504F4F;
    border-radius: 0.5rem;
    padding:10px 
}
.demo-login-page-section-right-form-login button{
    width: 100%;
    padding:10px 20px;
    background-color:#FCD535;
    border:none;
    border-radius: 0.5rem;
}
.demo-login-page-section-right-form-forget {
    text-align: center;
    width: 100%;
}
.demo-login-page-section-right-form-forget a{
 color:#FCD535;
 padding-block: 10px;
}
.demo-login-page-section-right-form-others{
    position: relative;
    margin-block: 20px;
}
.demo-login-page-section-right-form-others-hr{
    color:#504F4F;
}
.demo-login-page-section-right-form-other{
    width: fit-content;
    background-color: #181A20;
    padding-inline: 10px;
    position: absolute;
    z-index: 1;
    text-align: center;
    left:50%;
    transform: translate(-50%,-30px);
    /* background-color: #0B0E11; */
}
.demo-login-page-section-right-logo{
    text-align: center;
}
.demo-login-page-section-right-logo img{
    width: 50px;
}
.demo-login-page-section-right-register-link{
    text-align: center;
    padding-top: 10px;
    color:#909090;
}
.demo-login-page-section-right-register-hyperlink{
    color:#FCD535
}

.demo-screen-section-container-left-slide-img{
            width: 120%;
     height: 500px; 
      display: flex;
    align-items: center;
      justify-content: center;
      overflow: hidden;
       }

 .demo-screen-section-container-left-slide-img img {
  max-width: 150%;
  max-height: 100%;
  width: 100%;
  height: auto;
  object-fit: cover; 
  z-index: 2;
}
.demo-login-page-section-right-form input {
  font-size: 14px;
}
.demo-login-page-section-right-form label {
  font-size: 14px;
}
@media (max-width:550px) {
    .demo-login-page-section-right{
        padding:20px 50px
    }
}
@media (max-width:486px){
     .demo-login-page-section-right{
        padding:20px 10px
    }
}

/* Tablet */
@media (max-width: 992px) {
  .demo-login-page-section-container {
    margin-inline: 40px;
  }

  .demo-login-page-section-right {
    padding: 20px 30px;
  }

  .demo-header-buttons {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .demo-login-page-section-container {
    margin-inline: 20px;
    flex-direction: column;
  }

  .demo-login-page-section-right {
    padding: 20px;
  }

  .demo-login-page-section-left {
    display: none !important; /* hide the left side image on small screens */
  }

  .demo-header-buttons {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .demo-header-button {
    width: 100%;
  }

  .demo-login-page-section-right-form-other {
    transform: translate(-50%, -20px);
  }

  .demo-register-page-section-right-logo img {
    width: 40px;
  }
}

/* Small Devices (extra small) */
@media (max-width: 480px) {
  .demo-login-page-section-container {
    margin-inline: 10px;
  }

  .toggle-password {
    right: 10px;
    top: 35px;
  }

  .demo-login-page-section-right-header,
  .demo-login-page-section-right-para {
    font-size: 18px;
  }

  .demo-header-logo {
    width: 80px;
  }

  .navbar-toggler {
    padding: 0.25rem 0.5rem;
  }

  .custom-toggler .bar {
    width: 20px;
    margin: 4px auto;
  }
}
.toggle-password {
  position: absolute;
  right: 15px;
  top: 40px;
  cursor: pointer;
  color: #ccc;
  font-size: 16px;
}

.toggle-password:hover {
  color: #FCD535;
}





/* ----------------------------- */
/* Modal Overlay */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.75);
  display: none; /* Hidden by default */
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

/* Modal Box */
.modal-box {
  background: linear-gradient(to bottom, #1c1c1e, #1a1a1c);
  border-radius: 16px;
  padding: 30px 20px;
  max-width: 360px;
  width: 90%;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
  text-align: center;
  color: white;
}

/* Lock Icon */
.modal-box i {
  font-size: 40px;
  color: #fcd535;
  margin-bottom: 15px;
}

/* Email Masked */
.modal-box .email {
  color: #fcd535;
  margin-bottom: 15px;
  font-size: 14px;
}

/* Info Text */
.modal-box .info-text {
  color: #c0c0c0;
  font-size: 13px;
  margin-bottom: 25px;
  line-height: 1.5;
}

/* Buttons */
.modal-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.modal-buttons button {
  flex: 1;
  padding: 10px;
  border-radius: 6px;
  border: none;
  font-weight: bold;
  cursor: pointer;
}

.btn-cancel {
  background-color: #3a3a3a;
  color: #ccc;
}

.btn-continue {
  background-color: #fcd535;
  color: #111;
}

.btn-continue:hover {
  background-color: #e4c220;
}