.sidebar {
  transform: translateX(-100%); /* Initially off-screen to the left */
  transition: transform 0.3s ease-out;
}

.sidebar.open {
  transform: translateX(0); /* Slide in */
}

.overlay {
  background-color: rgba(0, 0, 0, 0.5);
  transition: opacity 0.3s ease-out;
}

.overlay.hidden {
  opacity: 0;
  pointer-events: none; /* Allows clicks to pass through when hidden */
}

.search-header {
  background-image: radial-gradient(rgba(0, 0, 0, 0.344), rgba(0, 0, 14, 0.862)),url('../image/banner/banner1.jpg');
  background-size: cover;
  background-position: center;
}

.nav-dynamic-bg {
  background: var(--primary-500);
  transition: background-color 0.3s ease-in-out;
}

@media (min-width: 1024px) {
  .nav-dynamic-bg {
    background: var(--primary-500);
    transition: background-color 0.3s ease-in-out;
  }
}


/* language switcher */
.toggle-switch {
            position: relative;
            /* width: 220px; */
            height: 43px;
            background: var(--popover);
            color: var(--popover-foreground)!important;
            border-radius: 20px;
            border: 1px solid var(--foreground-50);
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;

        }
        
        
        .toggle-slider {
            position: absolute;
            left: 2px;
            top: 3px!important;
            bottom: 0;
            width: 110px;
            height: 34px;
            background: var(--primary);
            border-radius: 18px;
            transition: all 0.3s ease;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        
        .toggle-slider2 {
            position: absolute;
            left: 2px;
            top: 3px!important;
            bottom: 0;
            width: 110px;
            height: 34px;
            background: var(--primary);
            border-radius: 18px;
            transition: all 0.3s ease;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        
        .toggle-switch.active {
            background: var(--popover);
        }
        
        .toggle-switch.active .toggle-slider {
            transform: translateX(100px);
        }
        
        .toggle-switch.active .toggle-slider2 {
            transform: translateX(132px);
        }
        
        .language-text {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            font-size: 14px;
            font-weight: 500;
            transition: all 0.3s ease;
        }
        
        .lang-en {
            left: 40px;
            color: var(--popover-foreground);
        }
        
        .lang-bn {
            right: 40px;
            color: var(--popover-foreground);
        }
        
        .toggle-switch.active .lang-en {
            color: var(--popover-foreground);
        }
        
        .toggle-switch:not(.active) .lang-bn {
            color: var(--popover-foreground);
        }