/* ================= ASOSIY SOZLAMALAR ================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

body {
    background-color: #fff;
}

/* ================= YUQORI QISM ================= */
.top-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 20px;
    font-size: 12px;
    color: #444;
    border-bottom: 1px solid #ddd;
    flex-wrap: wrap;
    gap: 20px;
    background-color: #fcfcfc;
}

.languages {
    display: flex;
    gap: 15px;
}

.languages span {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: color 0.2s;
}

.languages span:hover {
    color: #000;
}

/* Bayroqlar uchun bo'sh joy (Rasm qo'yilguncha kulrang turadi) */
.flag-icon {
    width: 18px;
    height: 12px;
    background-color: #ccc; 
    border-radius: 2px;
    object-fit: cover;
}

.contact-info {
    display: flex;
    gap: 15px;
    margin-left: 20px;
    color: #555;
}

.contact-info span {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* ================= ASOSIY MENYU ================= */
.main-nav {
    background-color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 30px;
    border-bottom: 2px solid #eee;
}

/* Logotip uchun bo'sh joy (Rasm qo'yilguncha kulrang kvadrat bo'lib turadi) */
.main-logo {
    width: 200px;
    height: 50px;
    background-color: #e0e0e0; 
    object-fit: contain;
}

.nav-links {
    display: flex;
    list-style: none;
    align-items: center;
}

.nav-links li {
    display: flex;
    align-items: center;
}

.nav-links li:not(:last-child)::after {
    content: "|";
    color: #999;
    margin: 0 12px;
    font-size: 14px;
}

.nav-links a {
    text-decoration: none;
    color: #555;
    font-size: 16px;
    transition: color 0.3s;
}

.nav-links a:hover {
    color: #000;
}

.nav-links .active a {
    background-color: #0088cc;
    color: white;
    padding: 5px 12px;
    border-radius: 3px;
    font-weight: bold;
}

/* ================= VIDEO FONLI QISM ================= */
.hero-section {
    position: relative;
    width: 100%;
    height: 600px;
    overflow: hidden; /* Video chegaradan chiqib ketmasligi uchun */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #222; /* Video yuklanguncha ko'rinadigan qora fon */
}

/* Video stili */
.hero-section video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Videoni ekranga to'ldirish */
    z-index: 1; /* Eng pastki qavatda turadi */
}

/* Video ustidagi qoraytirilgan (shaffof) qatlam - Matn yaxshi ko'rinishi uchun */
.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3); /* 0.3 qorayish darajasi */
    z-index: 2; /* Videoning ustida */
}

/* Rasmning o'ng chetidagi skroll (oq qalin chiziq) */
.hero-section::after {
    content: '';
    position: absolute;
    right: 20px;
    top: 40px;
    width: 6px;
    height: 250px;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 4px;
    z-index: 3;
}

/* Matnlar qismi */
.hero-content {
    position: relative; 
    z-index: 4; /* Eng yuqori qavat (videodan va qoraytirilgan qatlamdan ustun) */
    text-align: center;
}

.hero-content h1 {
    color: white;
    font-size: 70px;
    font-weight: bold;
    letter-spacing: 1px;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6);
    margin-bottom: 5px;
}

.hero-content p {
    color: white;
    font-size: 30px;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8);
}


  /* Umumiy sozlamalar */
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  body {
    font-family: Arial, Helvetica, sans-serif;
    padding: 20px;
    background-color: #ffffff;
  }

  .container {
    max-width: 1100px;
    margin: 0 auto;
  }

  /* Header qismi */
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    flex-wrap: wrap;
    gap: 20px;
  }

  .logo {
    font-size: 56px;
    font-weight: bold;
    letter-spacing: -1px;
  }

  .logo .prime {
    color: #0070c0; /* Ko'k rang */
  }

  .logo .tours {
    color: #00b050; /* Yashil rang */
  }

  /* Statistika bloklari */
  .stats-container {
    display: flex;
    gap: 30px;
  }

  .stat-item {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .stat-icon {
    width: 40px;
    height: 40px;
    fill: #00b050; /* Yashil ikonka */
  }

  .stat-text {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.1;
    color: #000;
  }

  /* Rasmlar paneli */
  .image-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
  }

  /* Rasm kartochkalari */
  .card {
    width: 100%;
    height: 320px;
    background-color: #d8edf8; /* Ochiq ko'k osmon foni */
    position: relative;
    overflow: hidden;
  }

  /* CSS yordamida rasmdagi bulut va qirlar dizaynini (placeholder) chizish */
  .card::before {
    content: "";
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 30px;
    background: #fff;
    border-radius: 50px;
    box-shadow: 
      -20px -15px 0 5px #fff, 
      15px -10px 0 2px #fff;
  }

  .card::after {
    content: "";
    position: absolute;
    bottom: -5%;
    left: -10%;
    width: 120%;
    height: 35%;
    background-color: #bad371; /* Orqa qir */
    border-radius: 50% 50% 0 0;
    box-shadow: 10px 20px 0 15px #7da702; /* Old qir */
  }
  
  /* Haqiqiy rasm qo'shilganda qanday ko'rinishi uchun sozlama */
  .card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
    z-index: 10; /* Rasmni placeholder ustiga chiqarish */
  }

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

  body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #f4f4f4; /* Rasmning eng pastki qismidagi och kulrang fon */
    padding: 20px;
  }

  .gallery-container {
    max-width: 1100px;
    margin: 0 auto;
    background-color: #ffffff;
    padding-bottom: 20px;
  }

  /* Sarlavha dizayni */
  .gallery-title {
    text-align: center;
    color: #007ce2; /* Och ko'k rang */
    font-size: 22px;
    font-weight: bold;
    padding: 20px 0;
  }

  /* Rasmlar to'ri (Grid) */
  .gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px; /* Rasmlar orasidagi juda kichik masofa */
    padding: 0 4px;
  }

  /* Har bir rasm kartochkasi */
  .gallery-item {
    background-color: #dcf2ff; /* Ochiq osmon rangi */
    aspect-ratio: 4 / 3; /* To'g'ri to'rtburchak proporsiyasi */
    position: relative;
    overflow: hidden;
  }

  /* Tanlangan (binafsharang hoshiyali) element */
  .gallery-item.selected {
    border: 2px solid #7a3deb; /* Binafsharang hoshiya */
  }

  /* CSS yordamida bulut chizish */
  .gallery-item::before {
    content: "";
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translateX(-50%);
    width: 45px;
    height: 22px;
    background: #fff;
    border-radius: 50px;
    box-shadow: 
      -18px -12px 0 4px #fff, 
      14px -8px 0 2px #fff;
    z-index: 1;
  }

  /* CSS yordamida qirlarni chizish */
  .gallery-item::after {
    content: "";
    position: absolute;
    bottom: -15%;
    left: -10%;
    width: 120%;
    height: 45%;
    background-color: #c4d975; /* Orqa ochiq yashil qir */
    border-radius: 50% 50% 0 0;
    box-shadow: 10px 18px 0 12px #88a902; /* Old to'q yashil qir */
    z-index: 1;
  }

  /* Agar kelajakda haqiqiy rasm qo'shsangiz */
  .gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
    z-index: 10;
  }

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

  body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }

  /* Footer (Ko'k qism) sozlamalari */
  .footer {
    background-color: #3cb0fd; /* Yorqin ko'k fon */
    width: 100%;
    padding: 30px 20px 20px;
    margin-top: auto;
  }

  .footer-container {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 20px;
  }

  /* Chap va o'ng tarafdagi oq bloklar (Rasmlar uchun joy) */
  .footer-box {
    background-color: #fff;
    padding: 10px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .footer-box img {
    max-height: 100%;
    object-fit: contain;
  }

  /* O'rta qism: Kontakt va Tarmoqlar */
  .footer-center {
    flex: 1;
    text-align: center;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .footer-title {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 15px;
  }

  .social-icons {
    display: flex;
    gap: 12px;
    margin-bottom: 15px;
  }

  .social-icon {
    width: 32px;
    height: 32px;
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: transform 0.2s;
  }

  .social-icon:hover {
    transform: translateY(-3px);
  }

  .social-icon svg {
    width: 18px;
    height: 18px;
    fill: #3cb0fd; /* Ikonkalar rangi fon bilan bir xil */
  }

  .copyright {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.5px;
  }

  /* Umumiy sozlamalar */
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
  }

  body {
    background-color: #f5f5f5;
  }

  /* Eng yuqoridagi til va aloqa paneli */
  .top-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    padding: 8px 20px;
    background-color: #fff;
    border-bottom: 1px solid #eee;
    font-size: 11px;
    color: #555;
    flex-wrap: wrap;
  }

  .top-bar-item {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
  }

  .top-bar-item:hover {
    color: #007ce2;
  }

  .contact-info {
    margin-left: 20px;
    display: flex;
    gap: 15px;
  }

  /* Asosiy navigatsiya paneli */
  .navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 40px;
    background-color: #fff;
    border-bottom: 1px solid #ddd;
    position: relative;
    z-index: 100; /* Ochiluvchi menyu orqa fonga o'tib ketmasligi uchun */
  }

  /* Logotip dizayni */
  .logo-container {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
  }

  .logo-icon {
    width: 40px;
    height: 35px;
    fill: #007ce2;
  }

  .logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
  }

  .logo-prime {
    font-size: 24px;
    font-weight: bold;
    color: #007ce2;
    letter-spacing: 1px;
  }

  .logo-sub {
    font-size: 13px;
    font-weight: bold;
    color: #00b050;
  }

  /* Menyu havolalari */
  .nav-links {
    display: flex;
    align-items: center;
    list-style: none;
  }

  .nav-item {
    position: relative;
  }

  /* Menyu orasidagi ajratuvchi chiziqlar (|) */
  .nav-item:not(:first-child):not(.no-line)::before {
    content: "|";
    color: #aaa;
    margin: 0 10px;
    font-weight: normal;
  }

  .nav-link {
    text-decoration: none;
    color: #444;
    font-size: 15px;
    padding: 5px 8px;
    transition: 0.2s;
  }

  .nav-link:hover {
    color: #007ce2;
  }

  /* Rasmdagidek aktiv tugma dizayni */
  .nav-link.active {
    background-color: #007ce2;
    color: #fff;
  }

  /* Ochiluvchi menyu (Dropdown) */
  .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 15px;
    background-color: #fff;
    min-width: 180px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border: 1px solid #eee;
    z-index: 200;
    list-style: none;
    padding: 5px 0;
  }

  .nav-item.dropdown:hover .dropdown-menu {
    display: block; /* Sichqoncha borganda menyu ochiladi */
  }

  .dropdown-item {
    padding: 8px 15px;
    display: block;
    text-decoration: none;
    color: #555;
    font-size: 14px;
  }

  .dropdown-item:hover {
    background-color: #f5f5f5;
    color: #007ce2;
  }

  /* Asosiy Banner (Hero/Video qismi) */
  .hero-section {
    position: relative;
    width: 100%;
    height: 600px;
    /* Shu joyga haqiqiy fon rasmini qo'yasiz: background-image: url('rasm.jpg'); */
    background-color: #c4a482; 
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  /* Banner ustidagi qoraytiruvchi fon (matn o'qilishi uchun) */
  .hero-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.2);
    z-index: 1;
  }

  /* Banner ichidagi matn va tugma */
  .hero-content {
    position: relative;
    z-index: 10;
    text-align: center;
    color: #fff;
    width: 100%;
  }

  /* Matnni menyu orqasida qolgandek ko'rsatish uchun joylashuv (rasmdagidek) */
  .hero-title-group {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    font-size: 60px;
    font-weight: bold;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
    margin-bottom: 10px;
  }

  .hero-subtitle {
    font-size: 32px;
    text-shadow: 1px 1px 8px rgba(0,0,0,0.5);
  }

  /* Markazdagi "Play" tugmasi */
  .play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 15;
    transition: background 0.3s;
  }

  .play-button:hover {
    background-color: rgba(0, 0, 0, 0.8);
  }

  .play-icon {
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 25px solid #fff;
    margin-left: 5px; /* Uchburchakni markazlashtirish uchun */
  }

  /* Menyu uchun umumiy sozlamalar (saytingiz buzilmasligi uchun alohida klasslar berildi) */
  .custom-navbar {
    font-family: Arial, sans-serif;
    display: flex;
    align-items: center;
    background-color: #ffffff;
    padding: 10px 0;
  }

  .nav-menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 10px; /* Menyu elementlari orasidagi masofa */
  }

  .nav-menu > li {
    position: relative; /* Drop-down o'z o'rnida ochilishi uchun muhim */
    display: flex;
    align-items: center;
  }

  .nav-link {
    text-decoration: none;
    color: #555555;
    font-size: 16px;
    padding: 6px 12px;
    transition: all 0.2s ease;
  }

  .nav-link:hover {
    color: #007acc; /* Hover bo'lgandagi matn rangi */
  }

  .divider {
    color: #cccccc;
    margin: 0 5px;
    font-weight: 300;
  }

  /* --- Drop-down maxsus sozlamalari --- */
  .dropdown:hover .dropbtn {
    background-color: #0088cc; /* Rasmda ko'rsatilgan ko'k fon */
    color: #ffffff;
  }

  .dropdown-content {
    display: none; /* Odatiy holatda yashirin turadi */
    position: absolute;
    top: 100%; /* Menyuning aynan tagidan boshlanadi */
    left: 0;
    background-color: #ffffff;
    min-width: 200px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.15); /* Yengil soya */
    z-index: 999; /* Boshqa elementlar ustida turishi uchun */
    padding: 10px 0;
  }

  .dropdown-content a {
    color: #555555;
    padding: 6px 20px;
    text-decoration: none;
    display: block;
    font-size: 14px;
    line-height: 1.4;
  }

  .dropdown-content a:hover {
    background-color: #f8f9fa;
    color: #0088cc;
  }

  /* Sichqoncha olib borganda (hover) ro'yxatni ko'rsatish */
  .dropdown:hover .dropdown-content {
    display: block;
  }



/* Distination toshkent faylining dizayni */

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

  body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #ffffff;
    padding: 20px;
  }

  /* Asosiy konteyner */
  .tashkent-container {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    background-color: #fff;
    gap: 20px; /* Matn va rasm orasidagi masofa */
  }

  /* Chap tomon: Matnlar qismi */
  .text-column {
    flex: 1.4; /* Matn qismi sal kengroq turadi */
    display: flex;
    flex-direction: column;
  }

  .main-title {
    color: #007acc; /* Moviy rang */
    text-align: center;
    font-size: 32px;
    font-family: 'Arial Black', Impact, sans-serif; /* Qalinroq shrift */
    letter-spacing: 0.5px;
    margin-bottom: 5px;
  }

  .divider {
    border-top: 1px solid #d3d3d3;
    margin-bottom: 15px;
  }

  .subtitle {
    color: #007acc;
    text-align: center;
    font-style: italic;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 15px;
  }

  .description {
    font-size: 13.5px;
    line-height: 1.5;
    color: #000000;
    text-align: justify;
    margin-bottom: 10px;
    text-indent: 25px; /* Xat boshidan tashlab yozish */
  }

  /* Highlights (E'tiborli joylar) qismi */
  .highlights-title {
    color: #007acc;
    text-align: center;
    font-size: 15px;
    font-weight: bold;
    margin: 10px 0;
  }

  .highlights-box {
    background-color: #0084d1; /* Moviy fon */
    color: #ffffff;
    display: flex;
    justify-content: space-around;
    padding: 12px 10px;
    font-size: 12.5px;
    font-weight: 500;
  }

  .highlights-list {
    list-style: none;
    text-align: center;
  }

  .highlights-list li {
    margin-bottom: 4px;
  }

  /* O'ng tomon: Rasm qismi */
  .image-column {
    flex: 1; /* Rasm qismi */
  }

  .image-column img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Rasm o'lchamini buzmasdan to'ldirish */
    display: block;
  }

  /* Telefonlar uchun moslashuvchanlik (Responsive) */
  @media (max-width: 768px) {
    .tashkent-container {
      flex-direction: column;
    }
    .highlights-box {
      flex-direction: column;
      gap: 15px;
    }
  }




/* TOURS BO'LIMI */
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #ffffff;
    padding: 20px;
  }

  .tours-container {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    /* Jami 6 ta ustunli to'r yaratamiz */
    grid-template-columns: repeat(6, 1fr); 
  }

  .tour-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
  }

  /* Yuqori qatordagi 3 ta kartochka (har biri 2 ta ustunni egallaydi: 2+2+2=6) */
  .card-top {
    grid-column: span 2;
    border-bottom: 2px solid #f2f2f2; /* Pastki chiziq */
  }

  /* 1- va 2-kartochkalarning o'ng tomonidagi chiziq */
  .card-top:nth-child(1), 
  .card-top:nth-child(2) {
    border-right: 2px solid #f2f2f2;
  }

  /* Pastki qatordagi 2 ta kartochka (har biri 3 ta ustunni egallaydi: 3+3=6) */
  .card-bottom {
    grid-column: span 3;
  }

  /* 4-kartochkaning o'ng tomonidagi chiziq */
  .card-bottom:nth-child(4) {
    border-right: 2px solid #f2f2f2;
  }

  /* Rasm sozlamalari */
  .tour-image {
    width: 100%;
    height: 220px;
    object-fit: cover; /* Rasmni siqmasdan to'ldirish */
    margin-bottom: 15px;
  }

  /* Moviy hoshiyali tugma (Sarlavha) */
  .tour-title {
    border: 2px solid #4ebaf5;
    border-radius: 30px;
    padding: 8px 25px;
    color: #4ebaf5;
    font-size: 22px;
    font-family: 'Impact', 'Arial Black', sans-serif; /* Qalin va zich shrift */
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    min-width: 70%;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
  }

  .tour-title:hover {
    background-color: #4ebaf5;
    color: #ffffff;
  }

  /* Telefonlar uchun moslashuvchanlik */
  @media (max-width: 768px) {
    .card-top, .card-bottom {
      grid-column: span 6; /* Ekranni to'liq egallaydi */
      border-right: none !important; /* O'ng chiziqlar olib tashlanadi */
    }
  }

/* CLASSIC TOURS */


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

  body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #ffffff;
    padding: 20px;
    color: #333;
  }

  .container {
    max-width: 1200px;
    margin: 0 auto;
  }

  /* Yuqori qism (Header) */
  .header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 30px;
  }

  .back-btn {
    position: absolute;
    left: 0;
    font-size: 24px;
    color: #999;
    text-decoration: none;
    transition: color 0.2s;
  }

  .back-btn:hover {
    color: #333;
  }

  .page-title {
    border: 2px solid #56c2f5;
    border-radius: 30px;
    padding: 5px 40px;
    color: #56c2f5;
    font-size: 28px;
    font-family: 'Impact', 'Arial Black', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
  }

  /* Rasmlar to'ri (Grid) */
  .tours-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }

  /* Har bir tur kartochkasi */
  .tour-card {
    display: flex;
    flex-direction: column;
  }

  /* Rasm va uning ustidagi elementlar */
  .image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9; /* Rasm proporsiyasi */
    overflow: hidden;
    margin-bottom: 8px;
  }

  /* 1-rasmdagi binafsharang hoshiya */
  .image-wrapper.selected {
    border: 3px solid #7a3deb;
  }

  .image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Rasm ustidagi sariq sarlavha */
  .image-title {
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 100%;
    text-align: center;
    color: #ffde00; /* Sariq rang */
    font-size: 32px;
    font-family: 'Impact', 'Arial Black', sans-serif;
    letter-spacing: 1px;
    /* Yozuv atrofiga qora hoshiya berish */
    -webkit-text-stroke: 1px #000;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
  }

  /* Qizil "Most Popular" nishoni */
  .badge-popular {
    position: absolute;
    top: 0;
    right: 20px;
    background-color: #f03434;
    color: #ffffff;
    font-weight: bold;
    font-size: 13px;
    text-align: center;
    padding: 8px 15px 15px;
    /* Qizil bayroqcha shakli */
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 85%, 0 100%);
  }
  
  .badge-popular svg {
    width: 24px;
    height: 24px;
    fill: #fff;
    margin-bottom: 3px;
  }

  /* Kartochka pastidagi ma'lumotlar qismi */
  .info-wrapper {
    display: flex;
    align-items: stretch; /* Bo'ylari teng bo'lishi uchun */
    gap: 10px;
  }

  /* Ko'k lenta (Chap tomondagi) */
  .blue-tag {
    background-color: #008cd4;
    color: #ffffff;
    font-size: 11px;
    font-weight: bold;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px 10px 15px;
    width: 32%;
    /* Lenta oxirini uchburchak qilib qirqish */
    clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%);
    line-height: 1.2;
  }

  /* O'ng tomondagi matnlar qismi */
  .details {
    width: 68%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    font-size: 11px;
  }

  .duration {
    color: #008cd4; /* Ko'k rang */
    font-weight: bold;
    margin-bottom: 3px;
    font-size: 11.5px;
  }

  .availability {
    color: #000;
    margin-bottom: 5px;
  }

  .route {
    color: #333;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 4px;
  }

  .arrow {
    color: #008cd4; /* Strekalar ko'k rangda */
    font-weight: bold;
    font-size: 14px;
  }

  /* Telefonlar uchun (Responsive) */
  @media (max-width: 768px) {
    .tours-grid {
      grid-template-columns: 1fr;
    }
    .info-wrapper {
      flex-direction: column;
    }
    .blue-tag {
      width: 100%;
      clip-path: none; /* Telefonda to'rtburchak bo'ladi */
      padding: 10px;
    }
    .details {
      width: 100%;
      margin-top: 5px;
    }
  }