body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: linear-gradient(to right, #4f46e5, #9333ea);
    color: white;
    text-align: center;
}

header {
    padding: 50px;
}

button {
    padding: 10px 20px;
    border: none;
    background: white;
    color: #4f46e5;
    border-radius: 8px;
    cursor: pointer;
}
body {
  margin: 0;
  padding: 0;
  background: url("Backgroun.jpg") no-repeat center center fixed;
  background-size: cover;
  font-family: Arial, sans-serif;
}
body {
  margin: 0;
  background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
              url("Backgroun.jpg") no-repeat center center fixed;
  background-size: cover;
  font-family: Arial, sans-serif;
}
:root {
  --primary-yellow: #FFD700; /* Sariq / tillarang rang */
}

/* Body va background rasm */
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background: url("Backgroun.jpg") no-repeat center center fixed;
  background-size: cover;
}

/* Text bloklar umumiy uslubi */
.text-block {
  padding: 20px;
  border-radius: 12px;
  margin: 15px 0;
  border: 2px solid var(--primary-yellow); /* chet sariq/tillarang */
}

/* Sarlavha va paragraf */
.text-block h1,
.text-block h2 {
  margin: 0 0 10px 0;
}

.text-block p {
  margin: 0;
}

/* Tugmalar umumiy uslubi */
.btn {
  padding: 12px 28px;
  border-radius: 10px;
  font-weight: 600;
  border: 2px solid var(--primary-yellow);
  cursor: pointer;
  transition: 0.3s ease;
}

/* Tun rejimi */
@media (prefers-color-scheme: dark) {
  body {
    color: #fff; /* Yozuv oq */
  }

  .text-block {
    background-color: rgba(0, 0, 0, 0.6); /* 60% qora, 40% shaffof */
    color: #fff;
  }

  .btn {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
  }

  .btn:hover,
  .btn:active {
    background-color: var(--primary-yellow);
    color: #000; /* Matn kontrast */
  }
}

/* Kun rejimi */
@media (prefers-color-scheme: light) {
  body {
    color: #000; /* Yozuv qora */
  }

  .text-block {
    background-color: rgba(255, 255, 255, 0.6); /* 60% oq, 40% shaffof */
    color: #000;
  }

  .btn {
    background-color: rgba(0, 0, 0, 0.1);
    color: #000;
  }

  .btn:hover,
  .btn:active {
    background-color: var(--primary-yellow);
    color: #fff; /* Matn kontrast */
  }
        }
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(15, 15, 15, 0.98); /* To'q qora fon */
    display: flex;
    justify-content: space-around;
    padding: 12px 0;
    border-top: 1px solid rgba(212, 175, 55, 0.3); /* Nozik tillarang chiziq */
    backdrop-filter: blur(15px);
    z-index: 9999;
}

.nav-item {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #8e8e8e; /* Faol bo'lmagan tablar kulrang */
    font-size: 10px;
    transition: all 0.3s ease;
    flex: 1;
}

.nav-item i {
    font-size: 20px;
    margin-bottom: 5px;
}

/* Faol (sariq tillarang) tab */
.nav-item.active {
    color: #d4af37; /* Oltin/Sariq rang */
    transform: scale(1.1); /* Kichik effekt */
}