/* ============================================================
   front2 — Global Styles
   ============================================================ */

:root {
    --bs-primary:      #1877f2;
    --bs-primary-rgb:  24,119,242;
    --bs-secondary:    #1a2332;
    --bs-accent:       #f4a61d;
    --bs-light-mint:   #eef4ff;
    --bs-body-font-family: 'Nunito', sans-serif;
}

body { font-family: 'Nunito', sans-serif; color: #1a2332; background: #fff; }

/* ── Buttons ─────────────────────────────────────────────── */
.btn-primary  { background:#1877f2; border-color:#1877f2; color:#fff; }
.btn-primary:hover  { background:#1558c0; border-color:#1558c0; color:#fff; }
.btn-outline-primary { color:#1877f2; border-color:#1877f2; }
.btn-outline-primary:hover { background:#1877f2; border-color:#1877f2; color:#fff; }

/* ── Text colours ────────────────────────────────────────── */
.text-primary { color:#1877f2 !important; }
.text-accent  { color:#f4a61d !important; }

/* ── Backgrounds ─────────────────────────────────────────── */
.bg-primary   { background:#1877f2 !important; }
.bg-accent    { background:#f4a61d !important; }
.bg-dark-navy { background:#1a2332 !important; }
.bg-mint      { background:#eef4ff !important; }

/* ── Badge ───────────────────────────────────────────────── */
.badge-accent { background:#f4a61d; color:#1a2332; }

/* ── Border ──────────────────────────────────────────────── */
.border-primary { border-color:#1877f2 !important; }
.border-accent  { border-color:#f4a61d !important; }

/* ── Breadcrumb ──────────────────────────────────────────── */
.breadcrumb-item a { color:#1877f2; text-decoration:none; }
.breadcrumb-item.active { color:#1877f2; }
.breadcrumb-item + .breadcrumb-item::before { color:#6c757d; }

/* ── Card hover ──────────────────────────────────────────── */
.card-hover { transition: transform .25s, box-shadow .25s; }
.card-hover:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(24,119,242,.14) !important; }

/* ── Section title underline ─────────────────────────────── */
.section-title::after {
    content:''; display:block; width:56px; height:4px;
    background:#1877f2; border-radius:2px; margin:12px auto 0;
}
.section-title.text-start::after { margin-left:0; }

/* ── Scroll-to-top button ────────────────────────────────── */
#scrollTop {
    position:fixed; bottom:28px; right:28px; width:44px; height:44px;
    border-radius:50%; background:#1877f2; color:#fff; border:none;
    display:flex; align-items:center; justify-content:center;
    opacity:0; visibility:hidden; transition:.3s; z-index:999; cursor:pointer;
}
#scrollTop.show { opacity:1; visibility:visible; }
#scrollTop:hover { background:#1558c0; }

html { scroll-behavior: smooth; }

/* ── Navbar ──────────────────────────────────────────────── */
.navbar-main { background:#0f1f3d; padding:12px 0; }
.navbar-main .navbar-brand { font-weight:800; font-size:1.3rem; color:#fff !important; }
.navbar-main .nav-link { color:rgba(255,255,255,.8) !important; font-weight:600; padding:8px 14px !important; border-radius:6px; transition:.2s; }
.navbar-main .nav-link:hover,
.navbar-main .nav-link.active { color:#fff !important; background:rgba(255,255,255,.1); }
.navbar-main .nav-link.active { color:#f4a61d !important; }

/* ── Hero section ────────────────────────────────────────── */
.hero-section {
    background: linear-gradient(135deg, #0f2060 0%, #1877f2 65%, #60aaff 100%);
    min-height: 88vh;
    display:flex; align-items:center;
}

/*
   Hero badge matni mobilda KESILIB qolardi: Bootstrap `.badge` da
   `white-space: nowrap` bor, `.hero-section` da esa `overflow: hidden` —
   ya'ni matn sahifani cho'zmasdan, jimgina qirqilardi (467px matn 372px
   ekranda).

   Media so'rov ATAYLAB yo'q: `normal` matnni faqat sig'magan joyda
   o'raydi. Desktopda badge bir qatorga sig'adi va hech narsa o'zgarmaydi,
   boshqa tillardagi uzunroq tarjima esa o'zi to'g'ri o'raladi.
*/
.hero-section .badge {
    white-space: normal;
    text-align: left;
}

/* Ikonka ko'p qatorli matn yonida siqilib ketmasin. */
.hero-section .badge > i {
    flex-shrink: 0;
}

/* ── Stats card (hero) ───────────────────────────────────── */
.hero-stat-card {
    background:rgba(255,255,255,.12);
    backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,.2);
    border-radius:14px;
}

/* ── Feature icon box ────────────────────────────────────── */
.feature-icon {
    width:56px; height:56px; border-radius:14px;
    display:flex; align-items:center; justify-content:center; font-size:1.4rem;
}

/* ── Direction card image placeholder ───────────────────── */
.dir-img-placeholder {
    height:200px; background:linear-gradient(135deg,#e8f0ff,#c8d8ff);
    display:flex; align-items:center; justify-content:center; font-size:3.5rem; color:#1877f2; opacity:.5;
}

/* ── News card image placeholder ────────────────────────── */
.news-img-placeholder {
    height:192px; background:linear-gradient(135deg,#e8f0ff,#c8d8ff);
    display:flex; align-items:center; justify-content:center; font-size:3rem; color:#1877f2; opacity:.45;
}

/* ── Contact form ────────────────────────────────────────── */
.form-control:focus, .form-select:focus { border-color:#1877f2; box-shadow:0 0 0 .2rem rgba(24,119,242,.2); }

/* ── Leader card ─────────────────────────────────────────── */
.leader-avatar { width:140px; height:140px; border-radius:50%; object-fit:cover; border:4px solid #1877f2; }
.leader-avatar-placeholder {
    width:140px; height:140px; border-radius:50%;
    background:linear-gradient(135deg,#1877f2,#1558c0);
    display:flex; align-items:center; justify-content:center;
    font-size:2.8rem; color:rgba(255,255,255,.6); border:4px solid #f4a61d;
}

/* ── Footer ──────────────────────────────────────────────── */
.footer-main { background:#0f1f3d; }
.footer-main a { color:rgba(255,255,255,.65); text-decoration:none; transition:.2s; }
.footer-main a:hover { color:#f4a61d; }
.footer-social a {
    width:38px; height:38px; border-radius:50%; display:inline-flex;
    align-items:center; justify-content:center; background:rgba(255,255,255,.1);
    color:rgba(255,255,255,.7); transition:.2s; text-decoration:none;
}
.footer-social a:hover { background:#1877f2; color:#fff; }

/* ── About stats block ───────────────────────────────────── */
.stat-box {
    border-radius:16px; padding:28px 20px; text-align:center;
}

/* ── Prose (article content) ─────────────────────────────── */
.prose-content img { max-width:100%; border-radius:12px; }
.prose-content p { margin-bottom:1rem; line-height:1.8; color:#444; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width:991px) {
    .hero-section { min-height:auto; padding:80px 0; }
}