body {
    background:rgb(141, 138, 138);
    margin: 0px;
}

.bosh {
    /* background: rgb(255, 255, 255); */
    color: white;
    height: 400px;
    /* text-align: center; */
    padding: 15% 10% 15% 10%;
    border-radius: 8px;
}

.header {
  display: flex;              /* yonma-yon joylashadi */
  justify-content: space-between; /* chapda menyu, o‘ngda logo */
  align-items: center;        /* vertikal markazlash */
  padding: 20px 10% 20px 10%;
  background: #585454;
  box-shadow: 0px 5px 5px rgba(0,0,0,0.7);
}

.leftright {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px 0;     /* endi yon padding containerdan keladi */
  /* box-shadow: 0px 5px 5px rgba(0,0,0,0.7); */
}

.mirodilleft {
  list-style: none;
  display: flex;          /* flex qoldiramiz */
  flex-direction: column; /* ichidagi elementlar ustma-ust */
  gap: 20px;
  margin: 0px 10px 0px 0px;
  padding: 20px;
  background: #393a34;
  border-radius: 8px;
  width: 220%;
}

.aside {
  list-style: none;
  display: flex;
  flex-direction: column; /* ustma-ust joylashadi */
  gap: 20px;
  margin: 0px 0px 0px 10px;
  padding: 20px;
  background: #781f1f;
  border-radius: 8px;
  width: 50%;
}

.orasi {
  margin: 0px;
}

.menyu ul {
  list-style: none;
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0;
  
}

.menyu a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
  color: black;
}

.logo img {
  height: 40px; /* logotip balandligi */
}

footer {
  text-align: right;   /* matnni o‘ng tomonga suradi */
  padding: 20px;
  background: #222;
  color: #fff;
}

.rasm {
  width: 100%;
  height: 400px;
  background-image: url('/images/kodrasmi.png');
  background-size: cover;
  background-position: center;
  border-radius: 8px;
  margin: 20px 0;

  background-color: rgba(0,0,0,0.5); /*50% black overlay*/
  background-blend-mode: darken;    /*rasmni qoraytiradi*/

  display: flex;              /* ichidagi elementlarni boshqarish */
  flex-direction: column;     /* elementlar ustma-ust */
  justify-content: center;    /* vertikal markaz */
  align-items: center;        /* gorizontal markaz */
  text-align: center;         /* matnni markaz qilish */
}


.centre {
padding: 0 10% 0 10%;
}

.kichkina_slogancha {
    font-size: 14px;  /* kichikroq qiling */
    font-weight: normal;
}

.button {
    display: inline-block;
    padding: 12px 24px;          /* Tugma o'lchami */
    font-size: 16px;             /* Matn hajmi */
    font-weight: 600;            /* Matn qalinligi */
    color: #fff;                 /* Matn rangi */
    background-color: #007BFF;   /* Asosiy tugma rangi */
    border: none;                /* Chegara olib tashlash */
    border-radius: 8px;          /* Yumaloq burchaklar */
    cursor: pointer;             /* Kursor ko'rsatkich */
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease;  /* Animatsiya uchun */
}

.button:hover {
    background-color: #0056b3;   /* Hover effekti */
    transform: translateY(-2px); /* Biroz ko‘tarish effekti */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Soyabon effekti */
}

.button:active {
    transform: translateY(1px); /* Tugma bosilganda effekt */
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

form {
  padding: 20px 20px 20px 20px;
max-width: 96%;
display: grid;
background: rgb(32, 30, 30);
border-radius: 8px;
color: white;
}

label {
  padding: 10px 10px 10px 0px;
}

input, textarea {
  padding: 10px 10px 10px 10px;
  background-color: #0e0e0e;
  border-radius: 8px;
  border: 1px solid;
  border-color: rgb(57, 57, 53);
  color: #fff;
}

button {
  padding: 10px;
  margin: 20px 0 0 0;
  border-radius: 8px;
  max-width: 20%;
}