*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#1f2937;line-height:1.55;background:#fff}
a{color:inherit;text-decoration:none}

.header{display:flex;align-items:center;justify-content:space-between;gap:16px;background:#0b74de;color:#fff;padding:16px}
.header .logo{height:52px}
.header .title{text-align:center;flex:1}
.header .title h1{margin:0;font-size:20px;font-weight:700;letter-spacing:.4px}
.header .tagline{opacity:.9;font-size:13px}
.header .lang button{background:#ffffff22;border:1px solid #ffffff55;color:#fff;padding:6px 10px;border-radius:6px;margin-left:6px;cursor:pointer}
.header .lang button.active{background:#fff;color:#0b74de;border-color:#fff}

.container{max-width:1100px;margin:0 auto;padding:24px 16px}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center;padding:24px 16px;max-width:1100px;margin:0 auto}
.hero-text h2{font-size:28px;margin:0 0 8px}
.hero-text p{margin:0 0 12px}
.btn{display:inline-block;background:#ff7a00;color:#fff;padding:10px 16px;border-radius:8px}
.hero-media .yt-wrap{position:relative;padding-bottom:56.25%;height:0;border-radius:10px;overflow:hidden;box-shadow:0 6px 18px rgba(0,0,0,.08)}
.hero-media .yt-wrap iframe{position:absolute;inset:0;width:100%;height:100%}
.hero video{width:100%;border-radius:10px;box-shadow:0 6px 18px rgba(0,0,0,.08)}

.about h3,.timeline h3,.contact h3{margin:8px 0 10px}
.timeline ul{margin:0;padding-left:20px}
.timeline li{margin:6px 0}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.card{border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.03)}
.card img{display:block;width:100%;height:170px;object-fit:cover}
.card .cap{padding:8px 10px}

.footer{background:#f3f4f6;color:#6b7280;text-align:center;padding:18px;margin-top:20px}

@media (max-width:900px){
  .hero{grid-template-columns:1fr}
  .header .title h1{font-size:18px}
}

/* HERO maketi va markazlash */
.hero{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:24px;
  align-items:center;
  justify-items:center;        /* kartalarni o'rtaga */
  padding:24px 16px;
  max-width:1100px;
  margin:0 auto;
}
.hero-text{
  text-align:center;           /* matnni o'rtaga */
  max-width:560px;
}
.hero-text h2{font-size:28px;margin:0 0 8px}
.hero-text p{margin:0 0 14px}
.hero-media video{
  width:100%;
  max-width:640px;             /* juda katta bo'lmasin */
  border-radius:10px;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}

@media (max-width:900px){
  .hero{grid-template-columns:1fr}
}
.hero {
  display: flex;
  flex-direction: column;   /* matn yuqorida, video pastda */
  align-items: center;      /* hammasini markazga */
  gap: 20px;
  padding: 20px;
}

.hero-video video {
  width: 90%;               /* ekranning 90% qismini egallaydi */
  max-width: 1000px;        /* juda katta bo‘lib ketmasin */
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
}