/*
Theme Name: LEMT UK - London European Management of Technology
Theme URI: https://lemt.com
Author: LEMT Education
Author URI: https://lemt.com
Description: Complete official theme for LEMT UK - London European Management of Technology. 100% faithful conversion from React source. Features Tailwind CSS, hero with Pexels background, image slider, study abroad, course diplomas, UK degrees, international universities, LMS, payment, contact and footer.
Version: 9.4.0
Requires at least: 5.8
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: lemt-theme
*/

/* Base */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;margin:0;background:linear-gradient(to bottom right,#f8fafc,#eff6ff,#eef2ff);min-height:100vh;}
img{max-width:100%;height:auto;}
button{font-family:'Inter',system-ui,-apple-system,sans-serif;cursor:pointer;}
input,textarea,select{font-family:'Inter',system-ui,-apple-system,sans-serif;}
::-webkit-scrollbar{width:8px;}
::-webkit-scrollbar-track{background:#f1f5f9;}
::-webkit-scrollbar-thumb{background:#94a3b8;border-radius:4px;}
::-webkit-scrollbar-thumb:hover{background:#64748b;}
.line-clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.5;}}
@keyframes bounce{0%,100%{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1);}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1);}}
@keyframes spin{to{transform:rotate(360deg);}}
.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite;}
.animate-spin{animation:spin 1s linear infinite;display:inline-block;}
.animate-bounce{animation:bounce 1s infinite;}

/* ── WORDPRESS CRITICAL FIXES ──────────────────────────────────── */

/* Fixed navbar height compensation */
#leps-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 9999; background: #fff; }
main { padding-top: 0; }

/* Ensure sections render properly */
section, footer { position: relative; z-index: 1; }

/* Hero must cover full screen */
#sec-home {
  min-height: 100vh;
  padding-top: 130px; /* navbar height */
}

/* All dynamic sections visible by default */
#sec-programme-levels,
#sec-why-leps,
#sec-how-it-works,
#sec-popular-courses,
#sec-courses,
#sec-uk-degree,
#sec-intl-universities,
#sec-testimonials,
#sec-study-abroad,
#sec-lms,
#sec-payment,
#sec-hreflang,
#sec-policies,
#sec-verify,
#sec-contact,
#leps-footer,
#wa-widget {
  display: block;
  min-height: 10px;
}

/* WordPress admin bar fix */
body.admin-bar #leps-nav {
  top: 32px;
}
@media screen and (max-width: 782px) {
  body.admin-bar #leps-nav {
    top: 46px;
  }
}

/* Ensure images load */
img { max-width: 100%; height: auto; }

/* Fix mobile overflow */
html, body { overflow-x: hidden; max-width: 100vw; }

/* Gradient text support */
.gradient-text {
  background: linear-gradient(135deg, #67e8f9, #bfdbfe, #a5b4fc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Card hover effects */
.hover\:shadow-xl:hover { box-shadow: 0 20px 60px rgba(0,0,0,.15) !important; }
.hover\:-translate-y-0\.5:hover { transform: translateY(-2px) !important; }

/* Ensure navbar white background on scroll */
#leps-nav { box-shadow: 0 1px 12px rgba(0,0,0,.08); }

/* Fix z-index stacking */
#apply-modal { z-index: 99999 !important; }
#wa-widget { z-index: 9998 !important; }
#scroll-top { z-index: 9990 !important; }
.group:hover .group-hover\:scale-110 { transform: scale(1.1); }

/* ── MOBILE RESPONSIVE FIXES ───────────────────────────────────── */
@media (max-width: 1279px) {
  .nav-links { display: none !important; }
  .nav-hamburger { display: flex !important; }
}
@media (min-width: 1280px) {
  .nav-hamburger { display: none !important; }
  .nav-links { display: flex !important; }
  #mob-menu { display: none !important; }
}

/* Non-grid mobile fixes (kept) */
@media (max-width: 767px) {
  .max-w-7xl { padding-left: 16px !important; padding-right: 16px !important; }
  [style*="font-size:clamp"] { font-size: clamp(1.5rem,6vw,2.5rem) !important; }
  #sec-home { min-height: 100svh; }
  #apply-modal .bg-white { margin: 1rem; max-height: calc(100vh - 2rem); }
  .topbar-contacts { gap: 12px; }
  .topbar-link { font-size: 11px; }
}

/* ── ENSURE ALL SECTIONS VISIBLE ──────────────────────────────── */
section { display: block; width: 100%; }
section:empty { min-height: 0; padding: 0; }

/* ── SCROLLBAR ─────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 3px; }

/* ── BODY SCROLL LOCK ──────────────────────────────────────────── */
body.mob-open { overflow: hidden !important; position: fixed; width: 100%; }

/* ── APPLY MODAL MOBILE ────────────────────────────────────────── */
@media (max-width: 640px) {
  #apply-modal > div {
    margin: 0.5rem;
    border-radius: 16px;
    padding: 1.25rem;
  }
}

/* ── CARD GRID ─────────────────────────────────────────────────── */
.courses-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (max-width: 1023px) {
  .courses-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 639px) {
  .courses-grid { grid-template-columns: 1fr; }
}

/* ── MARQUEE PAUSE ON HOVER ────────────────────────────────────── */
.marquee-track { will-change: transform; }

/* ── CRITICAL TAILWIND FALLBACKS ─────────────────────────────────
   These ensure layout works even if Tailwind CDN is blocked,
   delayed, or "unused CSS" removal strips classes before JS renders. */

/* Layout */
.max-w-7xl{max-width:1280px;margin-left:auto;margin-right:auto;}
.max-w-4xl{max-width:896px;margin-left:auto;margin-right:auto;}
.max-w-3xl{max-width:768px;margin-left:auto;margin-right:auto;}
.max-w-2xl{max-width:672px;margin-left:auto;margin-right:auto;}
.max-w-md{max-width:448px;margin-left:auto;margin-right:auto;}
.max-w-xl{max-width:576px;margin-left:auto;margin-right:auto;}
.mx-auto{margin-left:auto;margin-right:auto;}
.px-4{padding-left:1rem;padding-right:1rem;}
.py-20{padding-top:5rem;padding-bottom:5rem;}
.py-16{padding-top:4rem;padding-bottom:4rem;}
.py-10{padding-top:2.5rem;padding-bottom:2.5rem;}
.relative{position:relative;}
.absolute{position:absolute;}
.fixed{position:fixed;}
.overflow-hidden{overflow:hidden;}
.overflow-x-hidden{overflow-x:hidden;}
.overflow-y-auto{overflow-y:auto;}
.z-50{z-index:50;}
.inset-0{top:0;right:0;bottom:0;left:0;}
.w-full{width:100%;}
.h-full{height:100%;}
.min-h-screen{min-height:100vh;}

/* Flexbox */
.flex{display:flex;}
.inline-flex{display:inline-flex;}
.flex-col{flex-direction:column;}
.flex-wrap{flex-wrap:wrap;}
.items-center{align-items:center;}
.items-start{align-items:flex-start;}
.items-end{align-items:flex-end;}
.justify-center{justify-content:center;}
.justify-between{justify-content:space-between;}
.justify-end{justify-content:flex-end;}
.gap-1{gap:.25rem;}
.gap-1\.5{gap:.375rem;}
.gap-2{gap:.5rem;}
.gap-3{gap:.75rem;}
.gap-4{gap:1rem;}
.gap-5{gap:1.25rem;}
.gap-6{gap:1.5rem;}
.gap-8{gap:2rem;}
.flex-1{flex:1 1 0%;}
.flex-shrink-0{flex-shrink:0;}

/* Grid */
.grid{display:grid;}
.grid-cols-1{grid-template-columns:repeat(1,1fr);}
.grid-cols-2{grid-template-columns:repeat(2,1fr);}
.grid-cols-3{grid-template-columns:repeat(3,1fr);}
.grid-cols-4{grid-template-columns:repeat(4,1fr);}
.grid-cols-5{grid-template-columns:repeat(5,1fr);}
.gap-4{gap:1rem;}
.gap-5{gap:1.25rem;}
.gap-6{gap:1.5rem;}
@media(min-width:768px){
  .md\:grid-cols-2{grid-template-columns:repeat(2,1fr);}
  .md\:grid-cols-3{grid-template-columns:repeat(3,1fr);}
}
@media(min-width:1024px){
  .lg\:grid-cols-2{grid-template-columns:repeat(2,1fr);}
  .lg\:grid-cols-3{grid-template-columns:repeat(3,1fr);}
  .lg\:grid-cols-4{grid-template-columns:repeat(4,1fr);}
  .lg\:grid-cols-5{grid-template-columns:repeat(5,1fr);}
  .lg\:col-span-1{grid-column:span 1/span 1;}
}
@media(min-width:640px){
  .sm\:grid-cols-2{grid-template-columns:repeat(2,1fr);}
  .sm\:grid-cols-3{grid-template-columns:repeat(3,1fr);}
}
@media(min-width:1280px){
  .xl\:grid-cols-5{grid-template-columns:repeat(5,1fr);}
}

/* Spacing utility (margin/padding generic patterns) */
.mb-1{margin-bottom:.25rem;} .mb-2{margin-bottom:.5rem;} .mb-3{margin-bottom:.75rem;}
.mb-4{margin-bottom:1rem;} .mb-5{margin-bottom:1.25rem;} .mb-6{margin-bottom:1.5rem;}
.mb-8{margin-bottom:2rem;} .mb-10{margin-bottom:2.5rem;} .mb-12{margin-bottom:3rem;}
.mt-1{margin-top:.25rem;} .mt-2{margin-top:.5rem;} .mt-3{margin-top:.75rem;}
.mt-4{margin-top:1rem;} .mt-6{margin-top:1.5rem;} .mt-8{margin-top:2rem;} .mt-12{margin-top:3rem;}
.p-3{padding:.75rem;} .p-4{padding:1rem;} .p-5{padding:1.25rem;} .p-6{padding:1.5rem;} .p-8{padding:2rem;}
.px-3{padding-left:.75rem;padding-right:.75rem;}
.px-5{padding-left:1.25rem;padding-right:1.25rem;}
.px-6{padding-left:1.5rem;padding-right:1.5rem;}
.px-8{padding-left:2rem;padding-right:2rem;}
.py-2{padding-top:.5rem;padding-bottom:.5rem;}
.py-2\.5{padding-top:.625rem;padding-bottom:.625rem;}
.py-3{padding-top:.75rem;padding-bottom:.75rem;}
.py-4{padding-top:1rem;padding-bottom:1rem;}

/* Typography */
.text-xs{font-size:.75rem;} .text-sm{font-size:.875rem;} .text-base{font-size:1rem;}
.text-lg{font-size:1.125rem;} .text-xl{font-size:1.25rem;} .text-2xl{font-size:1.5rem;}
.text-3xl{font-size:1.875rem;} .text-4xl{font-size:2.25rem;} .text-5xl{font-size:3rem;}
.font-medium{font-weight:500;} .font-semibold{font-weight:600;} .font-bold{font-weight:700;}
.font-black{font-weight:900;}
.text-center{text-align:center;} .text-left{text-align:left;} .text-right{text-align:right;}
.uppercase{text-transform:uppercase;}
.tracking-wide{letter-spacing:.025em;} .tracking-widest{letter-spacing:.1em;}
.leading-tight{line-height:1.25;} .leading-relaxed{line-height:1.625;}
.italic{font-style:italic;}

/* Colors (most common) */
.text-white{color:#fff;} .text-gray-900{color:#111827;} .text-gray-700{color:#374151;}
.text-gray-600{color:#4b5563;} .text-gray-500{color:#6b7280;} .text-gray-400{color:#9ca3af;}
.text-blue-900{color:#1e3a8a;} .text-blue-700{color:#1d4ed8;} .text-blue-600{color:#2563eb;}
.text-blue-200{color:#bfdbfe;} .text-blue-300{color:#93c5fd;}
.text-cyan-300{color:#67e8f9;}
.text-orange-700{color:#c2410c;} .text-purple-700{color:#7e22ce;}
.text-green-600{color:#16a34a;} .text-red-600{color:#dc2626;}
.bg-white{background-color:#fff;} .bg-gray-50{background-color:#f8fafc;}
.bg-gray-100{background-color:#f1f5f9;} .bg-gray-200{background-color:#e2e8f0;}
.bg-blue-50{background-color:#eff6ff;} .bg-blue-100{background-color:#dbeafe;}
.bg-blue-900{background-color:#1e3a8a;}
.bg-green-500{background-color:#22c55e;} .bg-green-600{background-color:#16a34a;}
.bg-orange-500{background-color:#f97316;} .bg-orange-600{background-color:#ea580c;}
.bg-purple-100{background-color:#f3e8ff;}
.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-from,#1e3a8a),var(--tw-to,#1d4ed8));}
.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-from,#1e3a8a),var(--tw-to,#1d4ed8));}

/* Borders/Radius */
.rounded-full{border-radius:9999px;}
.rounded-xl{border-radius:.75rem;} .rounded-2xl{border-radius:1rem;} .rounded-3xl{border-radius:1.5rem;}
.border{border-width:1px;border-style:solid;border-color:#e5e7eb;}
.border-gray-100{border-color:#f3f4f6;} .border-gray-200{border-color:#e5e7eb;}

/* Shadow */
.shadow-md{box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);}
.shadow-lg{box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);}
.shadow-xl{box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);}
.shadow-2xl{box-shadow:0 25px 50px -12px rgba(0,0,0,.25);}

/* Misc */
.cursor-pointer{cursor:pointer;}
.col-span-2{grid-column:span 2/span 2;}
.transition-all{transition:all .2s ease;}
.duration-300{transition-duration:.3s;}
.opacity-0{opacity:0;} .opacity-100{opacity:1;}
.visible{visibility:visible;} .invisible{visibility:hidden;}
.object-cover{object-fit:cover;}
.whitespace-nowrap{white-space:nowrap;}
.select-none{user-select:none;}

/* ── ZERO-JS NAV COMPATIBILITY ─────────────────────────────────── */
/* Ensure anchor-based nav scrolling works smoothly everywhere */
html{scroll-behavior:smooth;}
[id^="sec-"]{scroll-margin-top:105px;}
@media(max-width:640px){[id^="sec-"]{scroll-margin-top:88px;}}

/* Mobile menu z-index stacking (above everything incl. modals from app.js) */
#mob-menu{z-index:99998!important;}
.mob-overlay{z-index:99997!important;}
#leps-nav{z-index:99999!important;}
.mob-toggle{z-index:100000;}

/* Ensure Google Translate widget doesn't break topbar layout on mobile */
@media(max-width:639px){
  .topbar-inner{justify-content:center;gap:10px;}
  #google_translate_element{order:3;width:100%;text-align:center;margin-top:4px;}
  .topbar-contacts{justify-content:center;width:100%;}
}

/* Prevent Google Translate from adding top margin to body */
html{margin-top:0!important;}
body{margin-top:0!important;position:relative;}

/* ══════════════════════════════════════════════════════════════
   PRECISE RESPONSIVE GRID SYSTEM
   Replicates Tailwind breakpoints exactly (sm:640 md:768 lg:1024 xl:1280)
   for every grid-cols combination used across the theme.
   Uses !important + compound attribute selectors so it works
   standalone even if Tailwind CDN is delayed/blocked.
   ══════════════════════════════════════════════════════════════ */
.grid{display:grid!important;}

/* A: grid-cols-1 md:grid-cols-2 (no lg) → <768:1  >=768:2 */
[class*="grid-cols-1"][class*="md:grid-cols-2"]:not([class*="lg:grid-cols"]){grid-template-columns:repeat(1,1fr)!important;}
@media(min-width:768px){
  [class*="grid-cols-1"][class*="md:grid-cols-2"]:not([class*="lg:grid-cols"]){grid-template-columns:repeat(2,1fr)!important;}
}

/* B: grid-cols-1 md:grid-cols-2 lg:grid-cols-3 → <768:1  768-1023:2  >=1024:3 */
[class*="grid-cols-1"][class*="md:grid-cols-2"][class*="lg:grid-cols-3"]{grid-template-columns:repeat(1,1fr)!important;}
@media(min-width:768px){
  [class*="grid-cols-1"][class*="md:grid-cols-2"][class*="lg:grid-cols-3"]{grid-template-columns:repeat(2,1fr)!important;}
}
@media(min-width:1024px){
  [class*="grid-cols-1"][class*="md:grid-cols-2"][class*="lg:grid-cols-3"]{grid-template-columns:repeat(3,1fr)!important;}
}

/* C: grid-cols-1 md:grid-cols-2 lg:grid-cols-4 → <768:1  768-1023:2  >=1024:4 */
[class*="grid-cols-1"][class*="md:grid-cols-2"][class*="lg:grid-cols-4"]{grid-template-columns:repeat(1,1fr)!important;}
@media(min-width:768px){
  [class*="grid-cols-1"][class*="md:grid-cols-2"][class*="lg:grid-cols-4"]{grid-template-columns:repeat(2,1fr)!important;}
}
@media(min-width:1024px){
  [class*="grid-cols-1"][class*="md:grid-cols-2"][class*="lg:grid-cols-4"]{grid-template-columns:repeat(4,1fr)!important;}
}

/* D: grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 (Study Abroad)
   <640:1  640-767:2  768-1023:3  1024-1279:4  >=1280:5 */
[class*="grid-cols-1"][class*="sm:grid-cols-2"][class*="xl:grid-cols-5"]{grid-template-columns:repeat(1,1fr)!important;}
@media(min-width:640px){
  [class*="grid-cols-1"][class*="sm:grid-cols-2"][class*="xl:grid-cols-5"]{grid-template-columns:repeat(2,1fr)!important;}
}
@media(min-width:768px){
  [class*="grid-cols-1"][class*="sm:grid-cols-2"][class*="xl:grid-cols-5"]{grid-template-columns:repeat(3,1fr)!important;}
}
@media(min-width:1024px){
  [class*="grid-cols-1"][class*="sm:grid-cols-2"][class*="xl:grid-cols-5"]{grid-template-columns:repeat(4,1fr)!important;}
}
@media(min-width:1280px){
  [class*="grid-cols-1"][class*="sm:grid-cols-2"][class*="xl:grid-cols-5"]{grid-template-columns:repeat(5,1fr)!important;}
}

/* G: lg:grid-cols-2 only (no base grid-cols, e.g. LMS section) → <1024:1  >=1024:2 */
[class*="grid"][class*="lg:grid-cols-2"]:not([class*="grid-cols-1"]):not([class*="md:grid-cols"]):not([class*="grid-cols-4"]){
  grid-template-columns:repeat(1,1fr)!important;
}
@media(min-width:1024px){
  [class*="grid"][class*="lg:grid-cols-2"]:not([class*="grid-cols-1"]):not([class*="md:grid-cols"]):not([class*="grid-cols-4"]){
    grid-template-columns:repeat(2,1fr)!important;
  }
}

/* H: lg:grid-cols-4 md:grid-cols-2 (Footer, no base grid-cols-N) → <768:1  768-1023:2  >=1024:4 */
[class*="grid"][class*="lg:grid-cols-4"][class*="md:grid-cols-2"]:not([class*="grid-cols-1"]){
  grid-template-columns:repeat(1,1fr)!important;
}
@media(min-width:768px){
  [class*="grid"][class*="lg:grid-cols-4"][class*="md:grid-cols-2"]:not([class*="grid-cols-1"]){
    grid-template-columns:repeat(2,1fr)!important;
  }
}
@media(min-width:1024px){
  [class*="grid"][class*="lg:grid-cols-4"][class*="md:grid-cols-2"]:not([class*="grid-cols-1"]){
    grid-template-columns:repeat(4,1fr)!important;
  }
}

/* I: md:grid-cols-2 only, no lg, no base grid-cols (e.g. policies grid) → <768:1  >=768:2 */
[class*="grid"][class*="md:grid-cols-2"]:not([class*="grid-cols-1"]):not([class*="lg:grid-cols"]):not([class*="grid-cols-4"]){
  grid-template-columns:repeat(1,1fr)!important;
}
@media(min-width:768px){
  [class*="grid"][class*="md:grid-cols-2"]:not([class*="grid-cols-1"]):not([class*="lg:grid-cols"]):not([class*="grid-cols-4"]){
    grid-template-columns:repeat(2,1fr)!important;
  }
}

/* E/F: bare grid-cols-2 / grid-cols-3 (no responsive prefix) keep their column
   count at all sizes (short form fields / info bars), but shrink gap+font
   slightly on very small phones so they don't overflow */
@media(max-width:374px){
  [class="grid grid-cols-2 gap-3 text-sm"],
  [class="grid grid-cols-2 gap-3"],
  [class="grid grid-cols-2 gap-4 mb-4"],
  [class="grid grid-cols-2 gap-4 mb-5"],
  [class="grid grid-cols-2 gap-4 mb-8"],
  [class="grid grid-cols-2 gap-5 mb-5"]{
    gap:.5rem!important;
  }
  [class="grid grid-cols-3 border-b border-gray-100"],
  [class="grid grid-cols-3 border-b border-gray-100 bg-gray-50"],
  [class="grid grid-cols-3 bg-gray-50 border-b border-gray-100"]{
    font-size:11px;
  }
}

/* Remove the old unconditional base grid-cols-1..5 rules' effect on
   combo elements above by ensuring our !important combo rules always win
   (already handled via !important + higher specificity attribute selectors) */

/* ── MODAL RESPONSIVENESS (course detail, intl uni, degree, country, payment) ── */
@media(max-width:639px){
  [style*="min-height:100vh"][style*="overflow-y:auto"] > div,
  [style*="min-height:100vh"][style*="overflow-y: auto"] > div{
    margin:0.5rem;
  }
  .max-w-4xl,.max-w-3xl,.max-w-2xl,.max-w-xl,.max-w-md{
    max-width:100%!important;
  }
  /* Reduce modal inner padding on phones */
  .p-8{padding:1.25rem!important;}
  .p-6{padding:1rem!important;}
}

/* ── DESKTOP/LAPTOP CONTAINER WIDTH SAFETY ───────────────────────── */
@media(min-width:1280px){
  .max-w-7xl{max-width:1280px;}
}
@media(min-width:1536px){
  .max-w-7xl{max-width:1400px;}
}

/* ── HERO RESPONSIVE TUNING ──────────────────────────────────────── */
@media(max-width:380px){
  .hero-h1, [id="hero-title"], [id="hero-subtitle"]{font-size:1.85rem!important;}
}

/* ══ STATIC INDEX.PHP MOBILE RESPONSIVE ══════════════════════════
   These target the inline-style grids in index.php
   (grid-template-columns:repeat(4,1fr) etc.)
   Since inline styles win over class selectors we use
   @media overrides on the parent section IDs.
   ════════════════════════════════════════════════════════════════ */

/* Stats bar: 4-col → 2-col on tablet, 2-col on mobile */
@media(max-width:767px){
  /* Stats bar */
  #sec-home + div [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="repeat(4,1fr)"][style*="text-align:center"]{
    grid-template-columns:repeat(2,1fr)!important;
  }
}

/* Programme levels: auto-fit already handles mobile */

/* Why LEMT features: auto-fit handles mobile */

/* How it works steps: auto-fit handles mobile */

/* LMS 2-col → 1-col on tablet */
@media(max-width:900px){
  #sec-lms [style*="grid-template-columns:1fr 1fr"],
  #sec-contact [style*="grid-template-columns:1fr 1fr"]{
    grid-template-columns:1fr!important;
  }
  #sec-lms [style*="grid-template-columns:1fr 1fr"] > *:last-child{
    margin-top:1.5rem;
  }
}

/* Footer 4-col → 2-col → 1-col */
#leps-footer [style*="grid-template-columns:2fr 1fr 1fr 1fr"]{
  grid-template-columns:1fr 1fr!important;
}
@media(max-width:600px){
  #leps-footer [style*="grid-template-columns:2fr 1fr 1fr 1fr"],
  #leps-footer [style*="grid-template-columns:1fr 1fr"]{
    grid-template-columns:1fr!important;
  }
}

/* Contact info 2-col cards → 1-col on phone */
@media(max-width:599px){
  #sec-contact [style*="grid-template-columns:1fr 1fr"]{
    grid-template-columns:1fr!important;
  }
}

/* Country grid: already auto-fill minmax(160px,1fr) - works on all screens */

/* Degree grid static placeholder: auto-fill handles it */

/* Footer bottom flex-wrap: ensure it wraps cleanly on phone */
@media(max-width:639px){
  #leps-footer [style*="justify-content:space-between"]{
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:.5rem!important;
  }
  #leps-footer [style*="justify-content:center"][style*="gap:1.5rem"]{
    gap:.875rem!important;
  }
  /* Contact page 2-col grid → 1 col */
  #sec-contact > div > div[style*="grid-template-columns:1fr 1fr"]{
    grid-template-columns:1fr!important;
  }
  /* Hero buttons stack */
  #sec-home [style*="display:flex"][style*="gap:1rem"][style*="flex-wrap:wrap"]{
    flex-direction:column!important;
    align-items:stretch!important;
  }
  #sec-home [style*="display:flex"][style*="gap:1rem"][style*="flex-wrap:wrap"] a,
  #sec-home [style*="display:flex"][style*="gap:1rem"][style*="flex-wrap:wrap"] button{
    justify-content:center!important;
  }
}

/* Trust badges row on hero: wrap on small screens */
@media(max-width:479px){
  #sec-home [style*="gap:1.5rem"][style*="color:rgba(255,255,255,.7)"]{
    gap:.75rem!important;
    font-size:12px!important;
  }
}

/* ── GOOGLE TRANSLATE BANNER — ALWAYS HIDDEN ─────────────────── */
.goog-te-banner-frame{display:none!important;visibility:hidden!important;}
.goog-te-balloon-frame{display:none!important;}
.goog-te-ftab-float{display:none!important;}
.goog-te-spinner-pos{display:none!important;}
iframe.goog-te-banner-frame{display:none!important;}
.skiptranslate>iframe{display:none!important;}
#goog-gt-tt{display:none!important;}
body{top:0!important;position:relative!important;}
html body{top:0!important;}
.goog-te-gadget-simple{min-width:80px;}

/* ── NOTRANSLATE ─────────────────────────────────────────────── */
.notranslate,.notranslate *{font-style:inherit;}

/* ── MOBILE MODAL FIXES ──────────────────────────────────────────
   Ensure all dynamic modals are full-width and scrollable on mobile
   ─────────────────────────────────────────────────────────────── */
#course-detail-modal,
#intl-detail-modal,
#apply-modal,
#payment-modal{
  position:fixed!important;
  inset:0!important;
  z-index:100000!important;
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch!important;
}

/* Prevent body scroll when modal is open */
body.modal-open{overflow:hidden!important;position:fixed!important;width:100%!important;}

/* On mobile make modals full-screen */
@media(max-width:640px){
  #course-detail-modal > div > div,
  #intl-detail-modal > div > div,
  #apply-modal > div > div,
  #payment-modal > div > div{
    max-width:100%!important;
    border-radius:12px!important;
    margin:4px!important;
  }
  /* Reduce font size inside modals on phones */
  #course-detail-modal h2,
  #intl-detail-modal h2{
    font-size:16px!important;
  }
}

/* Course cards grid responsive */
#courses-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:1.25rem;
}
@media(max-width:639px){
  #courses-grid{
    grid-template-columns:1fr!important;
  }
}

/* Sticky close button in modals */
[style*="position:sticky"][style*="z-index:10"]{
  position:sticky!important;
}