/* ========================================================================== Apexsci International University — Theme (Navy + Antique Gold) جامعة أكاديميون العالمية — الهوية البصرية RTL · Responsive · Cairo/Poppins · Colors from official logo Author: redesign deliverable · v0.1 · 2026-06-16 -------------------------------------------------------------------------- NOTE for integration: this stylesheet is written for the static mockup, but the design tokens + component classes are reusable. For the live PHP site, the same variables/classes can override styles.min.css. ========================================================================== */ :root{ /* Steel/slate blue (muted, European-institutional) — replaces deep navy. Var NAMES kept (navy-*) so all existing rules keep working. */ --navy-900:#1B2A41; --navy-800:#27405C; --navy-700:#33536F; --navy-600:#4A6B86; /* Soft refined gold (lightened) */ --gold-600:#C29B4E; --gold-500:#D8B670; --gold-400:#E8CF92; /* Neutral / support */ --cream-100:#F2EEE4; --cream-50:#FAF7F0; --sky-500:#5B82A6; --gray-700:#3C434C; --gray-500:#6B7280; --gray-200:#E6E8EC; --white:#fff; /* tokens */ --container:1200px; --radius-card:14px; --radius-btn:10px; --shadow-sm:0 2px 10px rgba(27,42,65,.07); --shadow-md:0 10px 28px rgba(27,42,65,.12); /* lighter steel-blue hero gradient (matches reference image) */ --grad-navy:linear-gradient(135deg,#33536F 0%,#4A6B86 60%,#5B82A6 100%); --grad-gold:linear-gradient(90deg,#C29B4E 0%,#E8CF92 50%,#C29B4E 100%); } /* ---------- Base ---------- */ *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} /* Direction is driven by the attribute (set by lang.js per language), NOT hardcoded — so the layout actually flips RTL<->LTR. */ html[dir="rtl"] body{direction:rtl;text-align:right} html[dir="ltr"] body{direction:ltr;text-align:left} body{ font-family:"Cairo","Poppins",system-ui,"Segoe UI",Tahoma,sans-serif; color:var(--gray-700); background:var(--white); line-height:1.75; direction:rtl; text-align:right; font-size:17.5px; } img{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none;transition:.2s} ul{list-style:none} .container{max-width:var(--container);margin-inline:auto;padding-inline:16px;width:100%} .en{font-family:"Poppins",sans-serif;direction:ltr;unicode-bidi:isolate} /* ---------- Buttons ---------- */ .btn-x{display:inline-flex;align-items:center;gap:8px;font-weight:600; padding:11px 22px;border-radius:var(--radius-btn);border:2px solid transparent; cursor:pointer;transition:.2s;white-space:nowrap} .btn-navy{background:var(--navy-800);color:#fff} .btn-navy:hover{background:var(--navy-700);transform:translateY(-2px);box-shadow:var(--shadow-md)} .btn-gold{background:var(--gold-500);color:var(--navy-900)} .btn-gold:hover{background:var(--gold-400);transform:translateY(-2px);box-shadow:var(--shadow-md)} .btn-outline{border-color:var(--gold-500);color:var(--gold-600);background:transparent} .btn-outline:hover{background:var(--gold-500);color:var(--navy-900)} /* Hero "About Us" button — gold outline at rest; gold fill + black content on hover */ .hero-about-btn{color:#D9B968;border-color:#D9B968;background:transparent} .hero-about-btn:hover{background:var(--gold-500);border-color:var(--gold-500)} .hero-about-btn:hover,.hero-about-btn:hover i,.hero-about-btn:hover span{color:#1b2a41} .btn-lg{padding:14px 30px;font-size:1.05rem} /* ---------- Section title ---------- */ .title_bx{display:flex;align-items:center;justify-content:space-between; gap:12px;margin-bottom:28px;flex-wrap:wrap} .title_bx h2{color:var(--navy-800);font-size:1.95rem;font-weight:700;position:relative;padding-bottom:10px} .title_bx h2::after{content:"";position:absolute;bottom:0;right:0;width:64px;height:4px; background:var(--grad-gold);border-radius:4px} .title_bx .more{color:var(--gold-600);font-weight:600;font-size:.95rem;display:inline-flex;align-items:center;gap:6px} .title_bx .more:hover{color:var(--navy-700)} section{padding-block:64px} /* ========== TOP BAR (الشريط الأول - أزرق سماوي فاتح) — STICKY ========== */ .top_header_bx{background:#3F73A1;color:#fff;font-size:.85rem; position:sticky;top:0;z-index:60} .top_header_bx .container{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;min-height:44px} .top_header_bx .right_tools{justify-self:start} .top_header_bx .left_tools{justify-self:end} /* centered country / British badge (الشريط الأول - في المنتصف) */ .country_badge{justify-self:center;display:inline-flex;align-items:center;gap:8px;font-weight:700; letter-spacing:.5px;color:#fff;background:rgba(255,255,255,.06);border:1px solid rgba(201,162,75,.4); padding:5px 16px;border-radius:30px;white-space:nowrap} .country_badge i{color:var(--gold-400)} /* Real UK (Union Jack) flag — inline SVG, offline-safe */ .uk-flag{display:inline-block;width:22px;height:15px;border-radius:2px;flex:0 0 auto; vertical-align:middle;box-shadow:0 0 0 1px rgba(255,255,255,.35);background-size:cover;background-position:center; background-image:url('data:image/svg+xml;utf8,')} .top_header_bx .social{display:flex;gap:6px;align-items:center} .top_header_bx .social a,.top_header_bx .tool{width:30px;height:30px;display:grid;place-items:center; border-radius:8px;color:#cfd6e4;background:rgba(255,255,255,.06)} .top_header_bx .social a:hover,.top_header_bx .tool:hover{background:var(--gold-500);color:var(--navy-900)} .top_header_bx .right_tools,.top_header_bx .left_tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .top_header_bx .date{color:#fff} .top_header_bx .lang,.top_header_bx .coin{display:inline-flex;align-items:center;gap:6px; padding:5px 10px;border-radius:8px;background:rgba(255,255,255,.06);cursor:pointer} .top_header_bx .lang:hover,.top_header_bx .coin:hover{background:rgba(201,162,75,.25)} /* language switcher dropdown (site-wide) */ .lang-switcher{position:relative} .lang-switcher .lang-menu{position:absolute;top:calc(100% + 8px);inset-inline-end:0;min-width:150px; background:#fff;border:1px solid var(--gray-200);border-radius:10px;box-shadow:var(--shadow-md); padding:6px;margin:0;list-style:none;z-index:200;display:none} .lang-switcher.open .lang-menu{display:block} .lang-switcher .lang-menu li{padding:9px 12px;border-radius:8px;color:var(--navy-800);font-weight:600; font-size:.92rem;cursor:pointer;text-align:start} .lang-switcher .lang-menu li:hover{background:var(--cream-50);color:var(--gold-600)} .lang-switcher .lang-menu li.active{background:var(--navy-800);color:#fff} .flag-uk{font-weight:600;color:#fff} /* embassy tool: green glyph on a subtle green-tinted chip (not a solid block) */ .top_header_bx .tool.is-embassy{color:#2fd56f;background:rgba(255, 255, 255, .06)} .top_header_bx .tool.is-embassy i{color:#fff} .top_header_bx .tool.is-embassy:hover{background:var(--gold-500)} .top_header_bx .tool.is-embassy:hover i{color:var(--navy-900)} /* login button: same color/bg/hover as the top-bar .tool icons */ .top_header_bx .login-btn{color:#cfd6e4;background:rgba(255,255,255,.06);padding:5px 14px;border:none} .top_header_bx .login-btn:hover{background:var(--gold-500);color:var(--navy-900);transform:none;box-shadow:none} /* ========== NAV BAR (الشريط الثاني - بيج) — STICKY below bar 1 ========== */ .center_header_bx{background:var(--cream-50);border-bottom:2px solid var(--gold-500); position:sticky;top:44px;z-index:55;box-shadow:var(--shadow-sm)} .center_header_bx .container{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:78px} .logo_bx{display:flex;align-items:center;gap:12px} .logo_bx img{width:54px;height:54px} .logo_bx .uni-name{line-height:1.25;white-space:nowrap} .logo_bx .uni-name b{color:var(--navy-800);font-size:1.05rem;display:block;white-space:nowrap} .logo_bx .uni-name span{color:var(--gold-600);font-size:.74rem;font-family:"Poppins";letter-spacing:.3px;white-space:nowrap} /* ----- main menu (top level) ----- */ .main-nav{display:flex;align-items:center;gap:0;flex-wrap:nowrap} .main-nav>li{flex:0 0 auto;position:relative} .main-nav>li>a{display:inline-flex;align-items:center;gap:6px;padding:12px 11px;white-space:nowrap; color:var(--navy-800);font-weight:600;font-size:.95rem;border-radius:8px;position:relative;cursor:pointer} .main-nav>li>a:hover,.main-nav>li:hover>a{color:var(--gold-600);background:rgba(176,138,62,.10)} .main-nav>li>a.active{color:var(--gold-600)} .main-nav>li.has-drop>a::after{content:"\f107";font-family:"Font Awesome 6 Free";font-weight:900;font-size:.7rem;margin-inline-start:3px;opacity:.7} /* ----- dropdown panels ----- */ .main-nav .drop{position:absolute;top:calc(100% + 2px);inset-inline-start:0;min-width:230px; background:#fff;border:1px solid var(--gray-200);border-top:3px solid var(--gold-500); border-radius:0 0 12px 12px;box-shadow:var(--shadow-md);padding:8px;margin:0;list-style:none; opacity:0;visibility:hidden;transform:translateY(6px);transition:.18s;z-index:70} .main-nav li.has-drop:hover>.drop{opacity:1;visibility:visible;transform:translateY(0)} .main-nav .drop li{position:relative} .main-nav .drop a{display:flex;align-items:center;justify-content:space-between;gap:10px; padding:9px 12px;border-radius:8px;color:var(--navy-800);font-size:.92rem;font-weight:500} .main-nav .drop a:hover{background:var(--cream-50);color:var(--gold-600)} .main-nav .drop a .caret{display:none} /* replaced by auto arrow below */ /* auto arrow on any item that opens a nested submenu (points toward the flyout) */ .main-nav .drop li.has-sub>a::after{content:"\f0d9";font-family:"Font Awesome 6 Free";font-weight:900; font-size:.78rem;color:var(--gold-600);margin-inline-start:auto} html[dir="ltr"] .main-nav .drop li.has-sub>a::after{content:"\f0da"} /* arrow points right in LTR */ .main-nav .drop li.has-sub:hover>a::after{color:var(--gold-600)} /* nested (2nd level) flyout */ .main-nav .drop .sub{position:absolute;top:-9px;inset-inline-start:100%;min-width:210px; background:#fff;border:1px solid var(--gray-200);border-top:3px solid var(--gold-500); border-radius:12px;box-shadow:var(--shadow-md);padding:8px;margin:0;list-style:none; opacity:0;visibility:hidden;transform:translateX(0);transition:.18s;z-index:80} .main-nav .drop li.has-sub:hover>.sub{opacity:1;visibility:visible} .nav-cta{margin-inline-start:8px} /* CTA button = gold background with navy text */ .nav-cta>a{background:var(--gold-500);color:var(--navy-900);border-color:var(--gold-500)} .nav-cta>a:hover{background:var(--gold-400);color:var(--navy-900)} .nav-toggle{display:none;background:var(--gold-500);color:var(--navy-900);border:none;width:44px;height:44px; border-radius:10px;font-size:1.2rem;cursor:pointer} /* ===== LTR layout (all non-Arabic languages) ===== */ html[dir="ltr"] body{text-align:left} /* nav: logo and menu sit at opposite ends in both directions (space-between). In LTR the logo naturally lands left, menu right; in RTL it mirrors. */ html[dir="ltr"] .main-nav>li>a.active::after{left:14px;right:14px} /* active-underline uses logical insets so it follows direction automatically */ .main-nav>li>a.active::after{inset-inline-start:14px;inset-inline-end:14px;right:auto;left:auto} /* section-title underline + footer heading underline follow direction */ html[dir="ltr"] .title_bx h2::after,html[dir="ltr"] footer h5::after{right:auto;left:0} /* breadcrumb / lists read left-aligned in LTR */ html[dir="ltr"] .lang-switcher .lang-menu li{text-align:left} /* ========== HERO / BANNER (بنر كبير - شرائح صور متعددة) ========== */ .hero_bx{position:relative;color:#fff;overflow:hidden;padding-block:120px;background-color:var(--navy-900)} /* slideshow layers */ .hero_slides{position:absolute;inset:0;z-index:0} .hero_slide{position:absolute;inset:0;background-size:cover;background-position:center; opacity:0;transition:opacity 1.2s ease-in-out} .hero_slide.is-active{opacity:1} /* dark readability shade on the text (right) side so letters stand out on bright slides */ .hero_bx::after{content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(270deg,rgba(8,16,33,.78) 0%,rgba(8,16,33,.55) 40%,rgba(8,16,33,.15) 65%,transparent 80%)} .hero_bx::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none} .hero_bx .container{position:relative;z-index:3;max-width:var(--container)} /* dots */ .hero_dots{position:absolute;z-index:3;bottom:22px;inset-inline-start:0;inset-inline-end:0; display:flex;gap:9px;justify-content:center} .hero_dots button{width:11px;height:11px;border-radius:50%;border:2px solid rgba(255,255,255,.7); background:transparent;cursor:pointer;padding:0;transition:.2s} .hero_dots button.is-active{background:var(--gold-500);border-color:var(--gold-500);width:26px;border-radius:6px} .hero_txt{max-width:660px} .hero_txt h1{font-size:3.1rem;font-weight:700;line-height:1.35;margin-bottom:16px;color:#fff; text-shadow:0 3px 18px rgba(0,0,0,.65),0 1px 2px rgba(0,0,0,.5)} .hero_txt h1 .gold{color:var(--gold-400);text-shadow:0 3px 18px rgba(0,0,0,.6)} .hero_txt p{color:#f1f4fa;font-size:1.12rem;margin-bottom:26px;max-width:560px; text-shadow:0 2px 10px rgba(0,0,0,.6)} .hero_actions{display:flex;gap:14px;flex-wrap:wrap} .hero_badge{display:inline-flex;align-items:center;gap:9px;background:transparent; color:var(--gold-400);border:1.5px solid var(--gold-400);padding:7px 18px;border-radius:30px; font-size:.9rem;font-weight:700;letter-spacing:1px;margin-bottom:18px; text-shadow:0 1px 6px rgba(0,0,0,.5);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)} .hero_badge i{color:var(--gold-400)} @keyframes heroFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}} /* ========== QUICK ACTIONS (الأزرار) ========== */ .quick_bx{background:var(--white);margin-top:-40px;position:relative;z-index:5;padding-block:0} .quick_bx .grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;justify-content:center} .quick_card{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-card); padding:24px 16px;text-align:center;box-shadow:var(--shadow-sm);transition:.25s; display:flex;flex-direction:column;align-items:center;justify-content:flex-start} .quick_card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:var(--gold-500)} .quick_card .ic{flex:0 0 auto;width:58px;height:58px;display:grid;place-items:center;margin:0 auto 12px; background:transparent;color:var(--gold-500);font-size:1.9rem} /* fixed-height label area so all icons align on one baseline regardless of 1 or 2 lines */ .quick_card h4{color:var(--navy-800);font-size:1.08rem;line-height:1.45;margin:0; display:flex;align-items:flex-start;justify-content:center;min-height:3.2em} /* ========== INTRO (مساحة صورة + نص) ========== */ .intro_bx{background:var(--white);border-block:1px solid var(--gray-200)} .intro_bx .container{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center} .intro_bx img{border-radius:var(--radius-card);box-shadow:var(--shadow-md);border:1px solid var(--gray-200)} /* framed photo (e.g. library) filling the column */ .intro_photo{border-radius:var(--radius-card);overflow:hidden;box-shadow:var(--shadow-md); border:1px solid var(--gray-200);position:relative} .intro_photo::after{content:"";position:absolute;inset:0; border:2px solid rgba(201,162,75,.35);border-radius:var(--radius-card);pointer-events:none} .intro_photo img{width:100%;height:380px;object-fit:cover;display:block} /* emblem (book-shield) panel instead of a stretched photo */ .intro_media{display:grid;place-items:center;padding:40px;border-radius:var(--radius-card); background:radial-gradient(circle at 50% 40%,rgba(31,49,96,.10),rgba(14,27,51,.04)),var(--cream-50); border:1px solid var(--gray-200);box-shadow:var(--shadow-md);position:relative} .intro_media::before{content:"";position:absolute;inset:14px;border:2px solid var(--gold-500); border-radius:calc(var(--radius-card) - 4px);opacity:.45} .intro_media img{width:300px;max-width:80%;height:auto;border:none;box-shadow:none; filter:drop-shadow(0 10px 24px rgba(14,27,51,.25))} .intro_bx h2{color:var(--navy-800);font-size:1.9rem;margin-bottom:14px} .intro_bx h2 .rule{display:block;width:70px;height:4px;background:var(--grad-gold);border-radius:4px;margin-top:10px} .intro_bx p{color:var(--gray-700);margin-bottom:14px} /* ========== STATS (احصائيات) — blue, sharp & prominent ========== */ .stats_bx{background:linear-gradient(135deg,#3F6E97 0%,#4E7DA6 55%,#6E97BC 100%);color:#fff} .stats_bx .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px} .stat{ text-align:center;padding:18px} .stat .num{font-family:"Poppins";font-size:3rem;font-weight:700;color:var(--gold-400);line-height:1.05; letter-spacing:.5px;text-shadow:0 2px 10px rgba(0,0,0,.30)} .stat .lbl{color:#fff;font-size:1.05rem;font-weight:600;margin-top:8px;letter-spacing:.3px; text-shadow:0 1px 4px rgba(0,0,0,.25)} .stat+.stat{border-inline-start:1px solid rgba(255,255,255,.22)} /* ========== ACCREDITATIONS (الاعتمادات - 3 أعمدة) ========== */ .accred_bx .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .accred_card{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--gray-200); border-radius:var(--radius-card);padding:22px;box-shadow:var(--shadow-sm);transition:.25s} .accred_card:hover{box-shadow:var(--shadow-md);transform:translateY(-4px)} .accred_card .logo{flex:0 0 64px;width:64px;height:64px;border-radius:12px;background:var(--navy-800); display:grid;place-items:center;color:var(--gold-400);font-size:1.6rem;border:1px solid var(--navy-700)} .accred_card h4{color:var(--navy-800);margin-bottom:4px;font-size:1.05rem} .accred_card p{color:var(--gray-500);font-size:.9rem} /* compact 6-per-row variant (centered, icon + title only) */ .accred_bx .grid.accred6{grid-template-columns:repeat(6,1fr);gap:16px} .accred6 .accred_card{flex-direction:column;align-items:center;text-align:center;gap:14px;padding:26px 14px} /* gold filled circle with navy glyph (image-3 mark style) */ .accred6 .accred_card .logo{flex:0 0 58px;width:58px;height:58px;font-size:1.5rem;border-radius:50%; background:var(--grad-gold);border:none;color:var(--navy-900);box-shadow:0 6px 16px rgba(176,138,62,.30)} .accred6 .accred_card h4{font-size:.95rem;margin:0;line-height:1.4;color:var(--navy-800)} /* ========== PROGRAMS / CARDS (البرامج الأكاديمية) ========== */ .programs_bx .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px} .prog_card{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-card); overflow:hidden;box-shadow:var(--shadow-sm);transition:.25s;display:flex;flex-direction:column} .prog_card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)} .prog_card .thumb{height:150px;background:var(--grad-navy);position:relative;display:grid;place-items:center;color:var(--gold-400);font-size:2.4rem} .prog_card .thumb .tag{position:absolute;top:12px;inset-inline-start:12px;background:var(--gold-500); color:var(--navy-900);font-size:.75rem;font-weight:600;padding:4px 10px;border-radius:20px} .prog_card .body{padding:18px;flex:1;display:flex;flex-direction:column} .prog_card h4{color:var(--navy-800);font-size:1.05rem;margin-bottom:8px} .prog_card p{color:var(--gray-500);font-size:.88rem;margin-bottom:14px;flex:1} .prog_card .foot{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--gray-200);padding-top:12px} .prog_card .foot .price{color:var(--gold-600);font-weight:600} /* ========== CTA STRIP (مساحة عريضة قدم الآن) ========== */ .cta_bx{color:#fff;text-align:center;position:relative;overflow:hidden;background-color:var(--navy-900); background-image:linear-gradient(135deg,rgba(14,27,51,.55) 0%,rgba(31,49,96,.45) 100%), url("../assets/hero-4.jpg"); background-size:cover;background-position:center center;background-repeat:no-repeat; padding-block:96px} .cta_bx::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 0,rgba(201,162,75,.20),transparent 55%)} .cta_bx .container{position:relative} .cta_bx h2{font-size:2rem;margin-bottom:12px;text-shadow:0 2px 12px rgba(0,0,0,.55)} .cta_bx p{color:#eef2f9;max-width:640px;margin:0 auto 24px;text-shadow:0 1px 8px rgba(0,0,0,.5)} /* ========== FOOTER (5 أعمدة) ========== */ footer{background:var(--navy-700);color:#d2dbe4;padding-top:56px} footer .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1.2fr;gap:30px;padding-bottom:36px} footer h5{color:var(--gold-400);font-size:1.05rem;margin-bottom:16px;position:relative;padding-bottom:8px} footer h5::after{content:"";position:absolute;bottom:0;right:0;width:36px;height:3px;background:var(--grad-gold);border-radius:3px} footer .fcol a{display:block;padding:5px 0;color:#d2dbe4;font-size:.92rem} footer .fcol a:hover{color:var(--gold-400);padding-inline-start:4px} footer .fbrand img{width:64px;margin-bottom:12px} footer .fbrand b{color:#fff;display:block} footer .fbrand p{font-size:.9rem;margin-top:10px;max-width:280px} footer .fcontact li{display:flex;gap:10px;align-items:flex-start;margin-bottom:10px;font-size:.92rem} footer .fcontact i{color:var(--gold-400);margin-top:4px} footer .fsocial{display:flex;gap:8px;margin-top:14px} footer .fsocial a{width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.07);display:grid;place-items:center;color:#cfd6e4} footer .fsocial a:hover{background:var(--gold-500);color:var(--navy-900)} .copy_bx{border-top:1px solid rgba(255,255,255,.1);text-align:center;padding:18px 0;font-size:.88rem;color:#8e98ad} /* ========== RESPONSIVE ========== */ @media (max-width:992px){ .hero_bx{padding-block:90px;text-align:center} .hero_txt{max-width:none} .hero_actions{justify-content:center}.hero_txt p{margin-inline:auto} .quick_bx .grid{grid-template-columns:repeat(3,1fr)} .programs_bx .grid{grid-template-columns:repeat(2,1fr)} .accred_bx .grid,.accred_bx .grid.accred6{grid-template-columns:repeat(3,1fr)} .intro_bx .container{grid-template-columns:1fr} footer .cols{grid-template-columns:1fr 1fr} } @media (max-width:768px){ section{padding-block:44px} /* on mobile, drop sticky to avoid bar-height conflicts */ .top_header_bx,.center_header_bx{position:static} /* TOP BAR: stack into a centered single column so nothing overflows */ .top_header_bx{font-size:.8rem} .top_header_bx .container{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 12px;padding-block:8px} .top_header_bx .right_tools,.top_header_bx .left_tools{justify-self:center;flex-wrap:wrap;justify-content:center} .country_badge{order:-1} /* badge on its own line, centered, first */ /* NAV BAR: logo + hamburger; menu drops below as accordion */ .center_header_bx .container{justify-content:space-between;flex-wrap:nowrap;min-height:64px} .main-nav{display:none;position:absolute;top:100%;right:0;left:0;background:var(--cream-50); flex-direction:column;align-items:stretch;padding:8px;gap:2px;box-shadow:var(--shadow-md); border-top:2px solid var(--gold-500);z-index:60;max-height:78vh;overflow:auto} .main-nav.open{display:flex} .main-nav>li{flex:1 1 auto;position:static} .main-nav>li>a{padding:13px 14px;width:100%;justify-content:space-between} .main-nav>li>a.active::after{display:none} /* mobile dropdowns: not absolute — expand inline when parent .open */ .main-nav .drop,.main-nav .sub{position:static;opacity:1;visibility:visible;transform:none; box-shadow:none;border:none;border-top:0;border-radius:0;min-width:0;display:none; background:rgba(176,138,62,.06);margin:0;padding:0 0 4px} .main-nav li.open>.drop,.main-nav li.open>.sub{display:block} .main-nav .drop a,.main-nav .sub a{padding:11px 26px} .main-nav .sub a{padding-inline-start:40px} .main-nav li.has-drop>a::after,.main-nav .has-sub>a .caret{transition:transform .2s} .main-nav li.open>a::after,.main-nav li.open>a .caret{transform:rotate(-90deg)} .nav-cta{margin-inline-start:0} .nav-cta>a{justify-content:center} .nav-toggle{display:grid;place-items:center} .logo_bx img{width:46px;height:46px} .logo_bx .uni-name b{font-size:.95rem} .logo_bx .uni-name span{font-size:.68rem} .hero_txt h1{font-size:2rem} .stats_bx .grid{grid-template-columns:repeat(2,1fr)} .stat:nth-child(3){border-inline-start:none} .stat+.stat{border-inline-start:none} .stats_bx .grid .stat{border-top:1px solid rgba(255,255,255,.1)} } @media (max-width:560px){ .quick_bx .grid{grid-template-columns:repeat(2,1fr)} .programs_bx .grid{grid-template-columns:1fr} .accred_bx .grid,.accred_bx .grid.accred6{grid-template-columns:repeat(2,1fr)} footer .cols{grid-template-columns:1fr} /* hide non-essential top-bar items on phones to keep it clean */ .top_header_bx .date{display:none} .top_header_bx .coin{display:none} .top_header_bx .social li:nth-child(n+5){display:none} /* keep first 4 social icons */ .hero_txt h1{font-size:1.7rem} .hero_txt p{font-size:1rem} .logo_bx .uni-name span{display:none} /* hide long English name on very small screens */ } @media (max-width:380px){ .quick_bx .grid{grid-template-columns:1fr} .top_header_bx .social li:nth-child(n+4){display:none} /* keep 3 social icons */ }