/* oquv.css — extracted from oquv.html (CSP cleanup) */

        :root {
            --accent: #06b6d4;
            --bg-dark: #070c1c;
            --header-bg: #0a122a;
            --card-bg: rgba(255, 255, 255, 0.04);
            --text-gray: #e2e8f0;
            --muted: #94a3b8;
        }

        * { box-sizing: border-box; margin: 0; padding: 0; font-family: "Poppins", sans-serif; }
        body { background: var(--bg-dark); color: var(--text-gray); line-height: 1.6; overflow-x: hidden; }
        a { text-decoration: none; color: inherit; }

        /* HEADER COMPATIBILITY FOR PRE-LOAD */
        body {
            padding-top: var(--navbar-offset, 86px);
        }


        /* FIXED SECTION */
        .education-header { 
            text-align: center; padding: 40px 20px; background: var(--bg-dark);
            border-bottom: 1px solid rgba(255,255,255,0.05);
        }
        .education-header h1 { font-size: 2.2rem; color: #fff; margin-bottom: 10px; }
        .education-header p { color: var(--muted); max-width: 600px; margin: 0 auto; font-size: 0.9rem; }

        /* CONTENT */
        .container { max-width: 1200px; margin: 0 auto; padding: 40px 20px; }
        
        .courses-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 25px; margin-bottom: 60px; }
        .course-card { 
            background: var(--card-bg); padding: 30px; border-radius: 20px; 
            border: 1px solid rgba(255,255,255,0.05); display: flex; flex-direction: column; transition: 0.3s;
        }
        .course-card:hover { transform: translateY(-10px); border-color: var(--accent); }
        .course-card h3 { color: var(--accent); margin-bottom: 15px; }
        .course-card p { font-size: 0.9rem; margin-bottom: 15px; }
        .course-card ul { list-style: none; margin-bottom: 25px; color: var(--muted); font-size: 0.85rem; }
        .course-card ul li { margin-bottom: 8px; }
        .course-card ul li::before { content: '•'; color: var(--accent); margin-right: 10px; }

        .enroll-button { 
            background: var(--accent); color: #071029; padding: 12px; text-align: center; 
            border-radius: 12px; font-weight: 600; margin-top: auto;
        }

        /* LUG'AT */
        .resources { background: var(--card-bg); padding: 40px; border-radius: 25px; border: 1px solid rgba(255,255,255,0.05); }
        .resources h2 { text-align: center; margin-bottom: 30px; color: #fff; }

        .resource-item { 
            background: rgba(255,255,255,0.03); padding: 18px 25px; border-radius: 12px; 
            margin-bottom: 10px; cursor: pointer; display: flex; justify-content: space-between; 
            align-items: center; transition: 0.3s;
        }
        .resource-item:hover { background: rgba(6, 182, 212, 0.1); }
        .resource-content { 
            display: none; padding: 25px; background: rgba(0,0,0,0.3); 
            border-radius: 0 0 15px 15px; border-left: 4px solid var(--accent); margin-bottom: 15px;
        }
        .resource-content h4 { color: var(--accent); margin-bottom: 5px; }

        footer { text-align: center; padding: 40px; border-top: 1px solid rgba(255,255,255,0.1); }

        /* ============================================================
           HAMBURGER TOGGLE — index.html bilan AYNAN bir xil dizayn
        ============================================================ */
        .menu-toggle {
          display: flex; flex-direction: column; gap: 5px;
          cursor: pointer; z-index: 1101; position: relative;
          width: 34px; min-height: 36px; margin-left: 12px;
          background: transparent; border: none; padding: 4px;
          align-items: stretch; justify-content: center;
          appearance: none; -webkit-appearance: none;
        }
        .menu-toggle:focus {
          outline: 2px solid var(--accent);
          outline-offset: 4px;
        }
        .menu-toggle span {
          display: block; height: 2.5px; width: 100%;
          background: var(--accent); border-radius: 3px; transition: 0.4s;
        }
        .menu-toggle.active span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
        .menu-toggle.active span:nth-child(2) { opacity: 0; }
        .menu-toggle.active span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

        @media (min-width: 1025px) {
          .menu-toggle { display: none !important; }
        }

        /* nav#menu dizayni shared-ui.css dan keladi — barcha sahifalarda bir xil. */

        /* ============================================================
           DESKTOP NAVBAR — ul li lar orasidagi gap kamaytirildi,
           natijada logo va qidiruv (search) ustiga chiqib ketmaydi
        ============================================================ */
        .nav-shell {
          max-width: 1760px;
          padding: 0 24px;
        }
        .desktop-nav {
          display: none;
          flex: 1 1 auto;
          justify-content: center;
          align-items: center;
          min-width: 0;
        }
        @media (min-width: 1025px) {
          .desktop-nav {
            display: flex !important;
            justify-content: center;
            align-items: center;
            margin: 0 auto;
            position: static;
          }
          .desktop-nav-list {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0;
            list-style: none;
            margin: 0;
            padding: 0;
            flex-wrap: nowrap;
          }
          .desktop-nav-list li { margin: 0; position: relative; }
          .desktop-nav-list .nav-link {
            color: var(--muted);
            font-weight: 600;
            font-size: 0.8rem;
            transition: color 0.25s ease, transform 0.25s ease, background 0.25s ease;
            padding: 6px 7px;
            position: relative;
            letter-spacing: 0.02em;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            white-space: nowrap;
          }
          .desktop-nav-list .nav-link-icon { display: none; }
          .desktop-nav-list .nav-link:hover,
          .desktop-nav-list .nav-link.active {
            color: #fff;
            background: rgba(6, 182, 212, 0.12);
            transform: translateY(-1px);
          }
          .desktop-nav-list .nav-link::after {
            content: '';
            position: absolute;
            left: 12px;
            right: 12px;
            bottom: 3px;
            height: 2px;
            background: linear-gradient(90deg, var(--accent), #0891b2);
            border-radius: 2px;
            transform: scaleX(0);
            transform-origin: center;
            transition: transform 0.25s ease;
          }
          .desktop-nav-list .nav-link:hover::after,
          .desktop-nav-list .nav-link.active::after {
            transform: scaleX(1);
          }
        }
        .nav-link-icon {
          font-size: 13px;
          color: var(--accent);
          transition: transform 0.25s ease;
          flex-shrink: 0;
        }
        .nav-link:hover .nav-link-icon,
        .nav-link.active .nav-link-icon {
          transform: scale(1.2);
        }

        /* Ko'proq DROPDOWN */
        .nav-more-btn {
          background: none;
          border: none;
          cursor: pointer;
          font-family: "Poppins", sans-serif;
          display: inline-flex;
          align-items: center;
          gap: 6px;
          white-space: nowrap;
        }
        .nav-more-chevron {
          font-size: 10px;
          color: var(--muted);
          transition: transform 0.25s ease;
        }
        .nav-more-btn[aria-expanded="true"] .nav-more-chevron {
          transform: rotate(180deg);
        }
        .nav-more-dropdown {
          position: absolute;
          top: calc(100% + 14px);
          left: 50%;
          transform: translateX(-50%) translateY(-8px);
          min-width: 220px;
          background: rgba(10, 14, 28, 0.96);
          backdrop-filter: blur(20px);
          -webkit-backdrop-filter: blur(20px);
          border: 1px solid rgba(6, 182, 212, 0.18);
          border-radius: 18px;
          padding: 8px;
          opacity: 0;
          visibility: hidden;
          pointer-events: none;
          transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
          z-index: 2000;
          box-shadow: 0 24px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04);
        }
        .nav-more-dropdown::before {
          content: '';
          position: absolute;
          top: -6px;
          left: 50%;
          transform: translateX(-50%);
          border-left: 6px solid transparent;
          border-right: 6px solid transparent;
          border-bottom: 6px solid rgba(6, 182, 212, 0.3);
        }
        .nav-more-item:hover .nav-more-dropdown,
        .nav-more-item .nav-more-btn[aria-expanded="true"] ~ .nav-more-dropdown {
          opacity: 1;
          visibility: visible;
          pointer-events: auto;
          transform: translateX(-50%) translateY(0);
        }
        .nav-more-item-link {
          display: flex;
          align-items: center;
          gap: 12px;
          padding: 11px 14px;
          border-radius: 12px;
          color: var(--muted);
          font-size: 13.5px;
          font-weight: 500;
          transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
          text-decoration: none;
        }
        .nav-more-item-link i {
          width: 18px;
          text-align: center;
          color: var(--accent);
          font-size: 14px;
          flex-shrink: 0;
        }
        .nav-more-item-link:hover {
          background: rgba(6, 182, 212, 0.1);
          color: #fff;
          transform: translateX(3px);
        }
        .nav-phone-link { color: var(--accent) !important; font-weight: 600; }
        .nav-phone-link:hover { background: rgba(6, 182, 212, 0.12) !important; }
        .nav-more-divider { height: 1px; background: rgba(255,255,255,0.07); margin: 6px 8px; border-radius: 1px; }
        .nav-more-signin {
          background: rgba(6, 182, 212, 0.08);
          color: var(--accent) !important;
          font-weight: 700;
          margin-top: 2px;
          border: 1px solid rgba(6, 182, 212, 0.2);
        }
        .nav-more-signin:hover {
          background: var(--accent) !important;
          color: #071029 !important;
          border-color: var(--accent);
          transform: none;
        }
        .nav-more-signin i { color: inherit !important; }

        .nav-actions {
          display: flex;
          align-items: center;
          gap: 16px;
          margin-left: auto;
        }

        @media (min-width: 1560px) {
          .desktop-nav-list { gap: clamp(4px, 1vw, 16px); }
          .desktop-nav-list .nav-link { font-size: 14px; padding: 8px 12px; }
          .desktop-nav-list .nav-link-icon { display: inline-block; }
        }
        @media (max-width: 1024px) {
          .nav-search { display: none; }
        }

        /* Til almashtirgich — mobil o'lchamlarda barqaror kenglik */
        @media (max-width: 860px) {
          .lang-switcher { flex: 0 0 112px; width: 112px; max-width: 112px; }
          .lang-switcher-button { width: 100%; justify-content: center; }
        }

        /* ============================================================
           NAVBAR & HAMBURGER — 480 / 360 / 320px gacha aniqlik
        ============================================================ */
        @media (max-width: 480px) {
          .nav-shell { padding: 0 14px; height: 64px; }
          .brand-text strong { font-size: 15px; }
          .brand-text small { font-size: 8px; letter-spacing: 1.5px; }
          .brand-mark { width: 32px; height: 32px; font-size: 17px; border-radius: 7px; }
          .menu-toggle { width: 30px; margin-left: 8px; }
        }
        @media (max-width: 360px) {
          .nav-shell { padding: 0 10px; height: 60px; }
          .brand-text strong { font-size: 14px; }
          .brand-text small { font-size: 7px; letter-spacing: 1px; }
          .brand-mark { width: 30px; height: 30px; font-size: 15px; }
          .nav-actions { gap: 8px; }
          .lang-switcher { flex: 0 0 96px; width: 96px; max-width: 96px; font-size: 11px; }
          .nav-signin { display: none; }
          .menu-toggle { width: 28px; margin-left: 4px; }
        }
        @media (max-width: 320px) {
          .nav-shell { padding: 0 8px; height: 58px; }
          .brand-text strong { font-size: 13px; }
          .brand-mark { width: 28px; height: 28px; font-size: 14px; }
          .lang-switcher { flex: 0 0 88px; width: 88px; max-width: 88px; font-size: 10px; }
          .menu-toggle { width: 26px; }
        }