* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}



.open-sans {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

.noto-serif-bengali {
  font-family: "Noto Serif Bengali", serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

.bangla {
    font-family: 'Noto Serif Bengali', serif;
}


@keyframes scroll {
    0% {
        transform: translateX(300%);
    }

    100% {
        transform: translateX(-100%);
    }
}

.animate-scroll {
    display: inline-flex;
    animation: scroll 20s linear infinite;
}

/* Navbar links */
.nav-link {
    background-color: var(--primary);
    color: var(--text);
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    transition: background-color 0.3s, color 0.3s;
}

.nav-link:hover {
    background-color: var(--secondary);
    color: var(--text);
}

/* Buttons */
.btn-primary {
    transition: background-color 0.3s, color 0.3s;
}


.dropbtn {
  background-color: var(--primary);
  color: var(--text);
  padding: 16px;
  font-size: 16px;
  border: none;
  z-index: 50;
  transition: background-color 0.3s ease; /* smooth hover */
}

.dropdown {
  position: relative;
  display: inline-block;
  z-index: 50;
}

.dropdown-content {
  position: absolute;
  background-color: var(--primary);
  min-width: 160px;
  box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
  border-radius: 4px;
  right: 0;
  overflow: hidden;
  opacity: 0;             /* hidden by default */
  visibility: hidden;     /* hidden by default */
  transition: opacity 0.3s ease, transform 0.3s ease; /* smooth fade + slide */
  transform: translateY(10px); /* slightly lower for slide-up effect */
  z-index: 999;
}

.dropdown-content a {
  color: var(--text);
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  z-index: 999;
  transition: background-color 0.3s ease;
}

.dropdown-content a:hover {
  background-color: var(--secondary);
}

.dropdown:hover .dropdown-content {
  opacity: 1;
  visibility: visible;
  transform: translateY(0); /* slide into place */
}

.dropdown:hover .dropbtn {
  background-color: var(--secondary);
}