Enhanced PHP File Manager

⬆️ Go Up (..)

📊 Server Information

Server:

LiteSpeed

System:

Linux 5.14.0-687.66.1.el9_8.x86_64

PHP Version:

8.2.35

User:

flightbo

Directory:

/home2/flightbo/public_html/surecertificate.online/assets/css

Free Space:

135 GB

🔧 Quick Actions

✏️ Editing: custom-brand.css

/* ================================================================
   SureCertificate Custom Brand CSS
   Comprehensive fixes for logo, inner pages, overflow, branding
   ================================================================ */

/* ===== BODY OVERFLOW FIX ===== */
html, body {
  overflow-x: hidden !important;
}
body {
  overflow-y: auto !important;
}

/* ===== LOGO FIX ===== */
img[alt="kh logo"] {
  position: relative !important;
  width: auto !important;
  height: 65px !important;
  max-width: 240px !important;
  object-fit: contain !important;
  object-position: left center !important;
  left: 0 !important;
  top: 0 !important;
  margin-top: -6px !important;
}
span.relative:has(img[alt="kh logo"]),
div.relative:has(img[alt="kh logo"]) {
  width: 240px !important;
  height: 65px !important;
  overflow: visible !important;
  display: block !important;
}

/* ===== NAV AND HEADER FIXES ===== */
header, nav, section:first-child {
  overflow: visible !important;
}

/* ===== INNER PAGE FIXES ===== */
main, [role="main"],
div#__next > div,
div#__next > section {
  overflow: visible !important;
}
.sticky, [class*="sticky"] {
  z-index: 1000;
}

/* ===== MEGA MENU STYLES ===== */
.sc-all-courses-panel {
  display: none;
}
.sc-all-courses-panel.sc-open {
  display: block !important;
  position: fixed !important;
  top: 72px !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 99999 !important;
  background: white !important;
  box-shadow: 0 10px 40px rgba(0,0,0,0.18) !important;
  max-height: calc(100vh - 72px) !important;
  overflow-y: auto !important;
}

/* ===== UPGRAD OVERLAY BRANDING ===== */
.sc-brand-overlay {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 10;
  background: rgba(255,255,255,0.92);
  border-radius: 8px;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* ===== SCROLLBAR FIX ===== */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #5DA363; border-radius: 3px; }

/* ===== COLOR BRAND OVERRIDES ===== */
.text-primary-main { color: #5DA363 !important; }
.bg-primary-main { background-color: #5DA363 !important; }
.border-primary-main { border-color: #5DA363 !important; }

/* ================================================================
   CATEGORY PAGE HERO SECTION FIX
   Affects: artificial-intelligence-courses.php, agile-management.php,
   project-management-certifications.php, cyber-security-courses.php,
   cloud-computing-courses.php, itsm-certifications.php,
   data-science-courses.php, devops-courses.php, web-development-courses.php

Root causes:
   1. Banner image uses position:absolute inside a div with no height
      → image collapses to 0px and is invisible
   2. h1 has hardcoded w-62.5 (250px) → text clips on desktop/tablet
   3. The 12-col grid doesn't stack properly on mobile
   ================================================================ */

/* --- A. Give the image column a proper height so absolute img shows --- */
/* The image wrapper: col-md-5 which is flex justify-center col-12 col-md-5 items-center flex-col */
.col-12.col-md-5 {
  position: relative !important;
  min-height: 280px !important;
}
/* The inner relative h-full wrapper */
.col-12.col-md-5 > div.relative.h-full {
  width: 100% !important;
  height: 100% !important;
  min-height: 280px !important;
}
/* The absolutely positioned banner image */
.col-12.col-md-5 img[alt],
.col-12.col-md-5 > div.relative.h-full img {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 260px !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: 12px !important;
  display: block !important;
}

/* --- B. Fix the h1 fixed width (w-62.5 = 250px) --- */
.category-banner h1 {
  width: 100% !important;
  max-width: 100% !important;
}

/* --- C. On desktop: make the 12-col grid a proper 2-column layout --- */
@media (min-width: 768px) {
  /* The HERO grid row only: image left (5 cols), text right (7 cols)
     Selector targets the specific hero grid that has BOTH grid-cols-1 AND md:grid-cols-12 */
  div[class*="grid-cols-1"][class*="md:grid-cols-12"] {
    display: grid !important;
    grid-template-columns: 5fr 7fr !important;
    gap: 32px !important;
    align-items: center !important;
  }

/* Inner section grids (Prerequisites, etc.) that use 'grid-cols-12 grid'
     without the 'md:grid' prefix — give them a proper 2-col layout too */
  .grid.grid-cols-12.gap-5 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
    align-items: start !important;
    width: 100% !important;
  }

/* Image column: full height */
  .col-12.col-md-5 {
    min-height: 380px !important;
    height: 100% !important;
  }
  .col-12.col-md-5 > div.relative.h-full img {
    min-height: 360px !important;
  }

/* Text column: proper padding and full width */
  .col-12.col-md-7 {
    padding-left: 0 !important;
    width: 100% !important;
  }

/* Ratings row: keep on one line on desktop */
  .flex.gap-spacing20.py-spacing16.border-y-1 {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
  }
}

/* --- D. On mobile: stack image above text --- */
@media (max-width: 767px) {
  /* The hero grid row becomes a column stack */
  div[class*="grid-cols-1"][class*="md:grid-cols-12"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

/* Inner section grids: stack on mobile */
  .grid.grid-cols-12.gap-5 {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: 100% !important;
  }

/* Image first, take full width */
  .col-12.col-md-5 {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    min-height: 220px !important;
    order: -1 !important;
  }

/* Text column full width */
  .col-12.col-md-7 {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    padding-top: 20px !important;
  }

/* Category banner text alignment */
  .category-banner {
    padding: 0 4px !important;
  }
  .category-banner h1 {
    font-size: 1.6rem !important;
    line-height: 1.3 !important;
    width: 100% !important;
  }
  .category-banner h2 {
    font-size: 1rem !important;
    line-height: 1.5 !important;
  }

/* Ratings row on mobile: allow wrap but keep each rating item together */
  .flex.gap-spacing20.py-spacing16.border-y-1 {
    flex-wrap: wrap !important;
    gap: 12px !important;
  }
  /* Each rating item (Google 4.8/5, Facebook 4.7/5 etc): don't break internally */
  .flex.gap-spacing20.py-spacing16.border-y-1 > div,
  .flex.gap-spacing20.py-spacing16.border-y-1 > a {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }
}

/* ================================================================
   AI PAGE: "Immersive Learning for AI Courses" section fix
   The section uses an absolute-positioned layout for the demo
   screenshot/mockup images. On smaller screens it breaks.
   ================================================================ */

/* Immersive Learning section: ensure proper containment */
section[data-id="ImmersiveLearning"],
section[id="ImmersiveLearning"] {
  overflow: hidden !important;
}

/* The tabs row (Learn, Practice, Assess, Gain Insights, Apply) */
section[data-id="ImmersiveLearning"] ul,
section[id="ImmersiveLearning"] ul {
  overflow-x: auto !important;
  flex-wrap: nowrap !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Demo image container with absolute positioning */
section[data-id="ImmersiveLearning"] .relative,
section[id="ImmersiveLearning"] .relative {
  overflow: hidden !important;
}

@media (max-width: 768px) {
  /* Immersive learning: stack description + image on mobile */
  section[data-id="ImmersiveLearning"] .md\\:flex-row,
  section[id="ImmersiveLearning"] .md\\:flex-row {
    flex-direction: column !important;
  }

/* Demo image frame: cap height on mobile */
  section[data-id="ImmersiveLearning"] [class*="h-"],
  section[id="ImmersiveLearning"] [class*="h-"] {
    height: auto !important;
    max-height: 300px !important;
  }
}

/* ================================================================
   Responsive fixes (site-wide)
   ================================================================ */
img, video, iframe {
  max-width: 100%;
  height: auto;
}
body, p, a, li, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: anywhere;
}

/* Footer: 4 cols -> 2 cols -> 1 col */
@media (max-width: 1024px) {
  #sc-global-footer section[style*="grid-template-columns:repeat(4"] div[style*="grid-template-columns:repeat(4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 640px) {
  #sc-global-footer section[style*="grid-template-columns:repeat(4"] div[style*="grid-template-columns:repeat(4"] {
    grid-template-columns: 1fr !important;
  }
  #sc-global-footer section[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* Header search + buttons on small screens */
@media (max-width: 1100px) {
  .sc-search { display: none !important; }
  .sc-cta { display: none !important; }
  .sc-links { overflow-x: auto !important; }
}

/* Mega menu height on mobile */
@media (max-width: 640px) {
  #sc-mega { top: 68px !important; padding: 10px 0 !important; }
  .sc-mega-card { min-height: auto !important; }
}

/* ================================================================
   Internal pages alignment + legacy export cleanup
   ================================================================ */
.all-courses-menu.mega-menu {
  display: none !important;
}

/* Keep all page wrappers centered consistently */
section > [class*="w-full"][class*="max-w"],
div > [class*="w-full"][class*="max-w"] {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* Prevent sideways push by sliders/carousels */
.slider-container, .slider-frame, .slider-list, .swiper, .swiper-wrapper {
  max-width: 100% !important;
}
.slider-frame, .swiper { overflow: hidden !important; }

/* Normalize 12-col wrapper */
.grid.grid-cols-12 {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
}

/* ================================================================
   CRITICAL: Override extreme xl:px-spacing80 / sm:px-spacing112
   horizontal padding from the KnowledgeHut legacy CSS bundles.
   spacing80 = 320px, spacing112 = 448px — these crush the content
   into a narrow left-aligned column on internal course pages.
   ================================================================ */

/* Strip the excessive section-level horizontal padding */
section[class*="spacing80"],
section[class*="spacing112"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Give the inner container a sensible centred layout */
section[class*="spacing80"] > div,
section[class*="spacing112"] > div {
  max-width: 1280px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box !important;
}

/* Also handle px-spacing20 direct on inner div (double-guard) */
div[class*="px-spacing20"][class*="w-full"] {
  box-sizing: border-box !important;
  width: 100% !important;
}

/* ================================================================
   TABLET FIXES (max-width: 1024px)
   ================================================================ */
@media (max-width: 1024px) {
  section[class*="spacing80"] > div,
  section[class*="spacing112"] > div {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* ================================================================
   MOBILE FIXES (max-width: 768px)
   ================================================================ */
@media (max-width: 768px) {

section[class*="spacing80"] > div,
  section[class*="spacing112"] > div {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

/* Stats bar: allow wrapping */
  ul[class*="justify-between"][class*="bg-secondary"] {
    flex-wrap: wrap !important;
    width: 100% !important;
    gap: 12px !important;
    padding: 16px !important;
  }
  ul[class*="justify-between"][class*="bg-secondary"] > li {
    flex: 0 0 45% !important;
  }

/* Fixed-width stats bar container: go full-width */
  [class*="md:w-211"] {
    width: 100% !important;
    max-width: 100% !important;
  }

/* Safely fallback 12-column grids to a vertical stack */
  .grid-cols-12 {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }
  .grid-cols-12 > * { width: 100% !important; max-width: 100% !important; }

/* Course card grids: 1 col on tablet */
  [class*="grid-cols-1"][class*="md:grid-cols-3"],
  [class*="grid-cols-1"][class*="md:grid-cols-4"] {
    grid-template-columns: 1fr !important;
    display: grid !important;
  }

/* Stats bar flex wrap */
  .grow.shrink.basis-0.self-stretch.justify-start.items-start {
    flex-wrap: wrap !important;
  }
  .grow.shrink.basis-0.self-stretch.justify-start.items-start > div {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    box-sizing: border-box;
  }

/* FIX: "Soaring Demand" salary/hiring chart table on mobile —
     numbers were overflowing and showing letters vertically */
  table { width: 100% !important; table-layout: fixed !important; }
  td, th {
    word-break: break-word !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

/* Prevent any fixed-pixel width styles from overflowing */
  [style*="width:493px"],
  [style*="width:684px"],
  [style*="width:568px"],
  [style*="width:305px"],
  [style*="width:279px"] {
    width: 100% !important;
    max-width: 100% !important;
  }

/* Banner image container: full width on mobile */
  [class*="w-130"],
  [class*="h-86"] {
    width: 100% !important;
    height: auto !important;
  }

/* Hero two-column row: stack vertically */
  .row.g-4 {
    display: block !important;
  }
  .col-12.col-md-7,
  .col-12.col-md-5 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
}

/* ================================================================
   SMALL MOBILE FIXES (max-width: 640px)
   ================================================================ */
@media (max-width: 640px) {

/* Course card grids: 1 column */
  [class*="grid-cols-1"][class*="md:grid-cols-3"],
  [class*="grid-cols-1"][class*="md:grid-cols-4"] {
    grid-template-columns: 1fr !important;
    display: grid !important;
    gap: 16px !important;
  }
  [class*="grid-cols-1"][class*="md:grid-cols-3"] img,
  [class*="grid-cols-1"][class*="md:grid-cols-4"] img {
    aspect-ratio: 4/3;
  }

/* Card padding reduced */
  .rounded-xl .p-spacing20, .rounded-xl [class*="p-spacing"] {
    padding: 10px !important;
  }

/* Stats bar: 2×2 grid on phone */
  .grow.shrink.basis-0.self-stretch.justify-start.items-start {
    flex-wrap: wrap !important;
    gap: 0 !important;
  }
  .grow.shrink.basis-0.self-stretch.justify-start.items-start > div {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    padding: 8px !important;
    box-sizing: border-box;
  }

/* Search box */
  .w-100 { width: auto !important; min-width: 120px !important; }

/* Section title + search bar: stack vertically */
  #explorecourses { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }
  #explorecourses .w-100 { width: 100% !important; }
  #explorecourses .text-3xl { font-size: 1.5rem !important; line-height: 1.3 !important; }

/* Slightly tighter gutters on very small screens */
  section[class*="spacing80"] > div,
  section[class*="spacing112"] > div {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

/* Heading scale-down */
  h1[class*="text-2.75xl"],
  h2[class*="text-2.75xl"] {
    font-size: 1.6rem !important;
    line-height: 1.35 !important;
  }

/* Bottom padding so sticky Call Now bar does not cover content */
  body {
    padding-bottom: 70px !important;
  }
}

/* ================================================================
   SOARING DEMAND / SALARY CHART SECTION — Mobile Fix
   The chart uses an `inline-flex` row:
     div.gap-spacing32.pt-spacing48.w-full.justify-start.items-start.inline-flex
   inside a card: div.rounded-xl.bg-white.p-spacing40
   On mobile the 3 columns get crushed to ~0 width causing letter-
   by-letter vertical text stacking.
   Fix: make the card scrollable & give the inline-flex a min-width.
   ================================================================ */

@media (max-width: 768px) {
  /* 1 — The white rounded card that wraps the salary chart:
         make it horizontally scrollable */
  div[class*="rounded-xl"][class*="bg-white"][class*="p-spacing40"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

/* 2 — The inline-flex row itself: pin a minimum width so children
         keep their natural widths and don't collapse */
  div[class*="inline-flex"][class*="w-full"][class*="justify-start"][class*="items-start"] {
    min-width: 680px !important;
    flex-wrap: nowrap !important;
  }

/* 3 — Each column child: don't shrink below usable width */
  div[class*="inline-flex"][class*="w-full"][class*="justify-start"] > div {
    flex-shrink: 0 !important;
    min-width: 160px !important;
  }

/* 4 — Prevent fixed-px width inline styles from breaking layout */
  [style*="width:493px"] { width: 100% !important; max-width: 100% !important; }
  [style*="width:684px"] { width: 100% !important; max-width: 100% !important; }
  [style*="width:568px"] { width: 100% !important; max-width: 100% !important; }
  [style*="width:305px"] { width: 100% !important; max-width: 100% !important; }
  [style*="width:279px"] { width: 100% !important; max-width: 100% !important; }
  [style*="width:203px"] { width: 100% !important; max-width: 100% !important; }

/* Practice tests page: sidebar + card grid — stack on mobile */
  aside[class*="min-w-\\[279px\\]"] {
    min-width: 100% !important;
    width: 100% !important;
    max-height: none !important;
  }

/* Practice test card grid: remove fixed card width */
  div[class*="w-\\[305px\\]"] {
    width: 100% !important;
  }

/* Hero section: remove fixed height from image column */
  div[class*="h-\\[385px\\]"],
  div[class*="h-\\[368"] {
    height: auto !important;
    min-height: 200px !important;
    width: 100% !important;
  }

/* Flex rows in hero that have fixed widths (practice tests, etc.) */
  div.flex.items-center.justify-between.relative.w-full {
    flex-direction: column !important;
    gap: 24px !important;
  }

/* Section that wraps both the left text + right image columns */
  div.flex.flex-col.gap-spacing20.items-start.justify-center.relative.shrink-0 {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ================================================================
   TABLET FIXES (769px – 1024px) — minor layout stability
   ================================================================ */
@media (min-width: 769px) and (max-width: 1024px) {
  /* 3-col course grids: drop to 2 cols on tablet */
  [class*="md:grid-cols-3"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

/* Banner image: shrink to fit */
  [class*="w-130"],
  [class*="h-86"] {
    width: 100% !important;
    height: auto !important;
  }

/* Hero flex row: give more breathing room */
  .col-12.col-md-7 { flex: 0 0 58% !important; max-width: 58% !important; }
  .col-12.col-md-5 { flex: 0 0 42% !important; max-width: 42% !important; }
}

/* ================================================================
   PMP CERTIFICATION PAGE – SPECIFIC OVERRIDES
   ================================================================ */

/* Hero image container fix */
.col-12.col-md-5 [class*="w-130"],
.col-12.col-md-5 [class*="h-86"] {
  width: 100% !important;
  height: 380px !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}
.col-12.col-md-5 img[alt*="PMP"] {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  position: relative !important;
  left: 0 !important; top: 0 !important;
}

/* Batch widget responsive */
#pmp-batches-content > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
@media (max-width: 640px) {
  #pmp-batches-content > div {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

/* Reviews widget responsive */
#pmp-reviews-content {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
#pmp-reviews-content > div {
  flex: 1 1 300px;
  min-width: 0;
}
@media (max-width: 640px) {
  #pmp-reviews-content > div {
    flex: 0 0 100% !important;
  }
}

/* PMP hero mobile override */
@media (max-width: 767px) {
  .col-12.col-md-7 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    order: 2;
  }
  .col-12.col-md-5 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    order: 1;
    height: 240px !important;
  }
  .col-12.col-md-5 [class*="w-130"],
  .col-12.col-md-5 [class*="h-86"] {
    height: 240px !important;
    border-radius: 0 !important;
    width: 100% !important;
  }
  /* Prevent enrolled badge & rating overflow */
  [class*="max-w-59"], [class*="max-w-60"] {
    max-width: 100% !important;
  }
  /* Stats banner fix */
  ul.flex.relative[class*="w-211"] {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    flex-wrap: wrap !important;
    padding: 20px 16px !important;
  }
  ul.flex.relative[class*="w-211"] li {
    flex: 0 0 calc(50% - 8px) !important;
    margin-bottom: 12px;
  }
  /* Program director section mobile */
  .gap-spacing32.flex.flex-row {
    flex-direction: column !important;
  }
  [class*="w-72\\.5"] {
    width: 100% !important;
    min-height: 220px !important;
    position: relative !important;
  }
}

/* Mobile Responsiveness for Hero Highlight Box */
@media (max-width: 767px) {
    .hero-highlight-box {
        margin-top: 1.5rem !important;
        margin-bottom: 1.5rem !important;
        padding: 15px !important;
        border-radius: 12px !important;
    }
    .hero-highlight-box .font-extrabold {
        font-size: 1.25rem !important;
        line-height: 1.5rem !important;
    }
    .hero-highlight-box .highlight-list-item {
        font-size: 0.85rem !important;
        line-height: 1.25rem !important;
        padding-left: 0 !important;
        margin-bottom: 0.5rem !important;
    }
    .hero-highlight-box .highlight-list-item span {
        font-size: 1.25rem !important;
        color: #171717 !important;
    }
}

/* Base text color for highlight items */
.hero-highlight-box .highlight-list-item span {
    color: #171717 !important;
}

/* ================================================================
   COMPREHENSIVE MOBILE RESPONSIVENESS FIX v2
   Addresses: hero typography, footer links, FAQ tabs, popup modal,
   schedule cards, stats bar, tuition cards, CTA sections
   Applied to ALL course pages via global custom-brand.css
   ================================================================ */

/* ---- HERO HEADING: Scale down for mobile ---- */
@media (max-width: 767px) {
  /* Primary hero h2 titles (large heading like "CSM Certification") */
  h2[class*="text-2.75xl"],
  h2[class*="leading-13"],
  .col-12.col-md-7 h2 {
    font-size: 1.5rem !important;
    line-height: 1.9rem !important;
  }
  /* Hero sub-heading h3 */
  .col-12.col-md-7 h3[class*="text-lg"] {
    font-size: 0.95rem !important;
    line-height: 1.45rem !important;
  }
  /* Section titles */
  div[class*="text-3xl"][class*="leading-9"] {
    font-size: 1.45rem !important;
    line-height: 1.85rem !important;
  }
}

/* ---- FAQ TABS: Smoother horizontal scroll on mobile ---- */
@media (max-width: 767px) {
  /* FAQ tab container */
  div[class*="customized-x-scrollbar"],
  div[class*="shadow-primaryDouble"]:has(button) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
    max-width: 100% !important;
    flex-wrap: nowrap !important;
    padding: 6px !important;
    gap: 6px !important;
  }
  /* FAQ tab buttons: tighter padding on small screens */
  div[class*="customized-x-scrollbar"] button,
  div[class*="shadow-primaryDouble"] button {
    padding: 6px 10px !important;
    font-size: 0.8rem !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
}

/* ---- FOOTER LINKS: Prevent cramming on mobile ---- */
@media (max-width: 767px) {
  /* Footer top links grid: stack to 1-column on mobile */
  #sc-footer-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  /* Footer "Top Categories" and "Top Courses" two-column subgrids */
  #sc-footer-bottom {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  /* Footer link items: breathable spacing */
  footer a, 
  [id*="footer"] a {
    display: block !important;
    padding: 4px 0 !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
  }
  /* Footer section headings */
  footer h4,
  footer h5,
  [id*="footer"] h4,
  [id*="footer"] h5 {
    font-size: 15px !important;
    margin-bottom: 10px !important;
  }
}

/* ---- POPUP / MODAL: Better close button on mobile ---- */
@media (max-width: 767px) {
  /* Make popup close button larger for thumb users */
  .popup-close,
  [class*="popup"] button[class*="close"],
  div[class*="modal"] button:first-of-type,
  button[aria-label="Close"],
  button[aria-label="close"] {
    min-width: 44px !important;
    min-height: 44px !important;
    font-size: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  /* Popup content area: prevent full-screen takeover */
  [class*="popup-content"],
  div[class*="modal-content"] {
    max-height: 85vh !important;
    overflow-y: auto !important;
    margin: 16px !important;
    border-radius: 12px !important;
  }
}

/* ---- SCHEDULE CARDS: Stack on mobile ---- */
@media (max-width: 767px) {
  /* Schedule flex cards: force column + full width */
  div[class*="p-spacing24"][class*="shadow-neutralShadow"][class*="rounded-20"] {
    flex-direction: column !important;
    gap: 12px !important;
  }
  div[class*="p-spacing24"][class*="shadow-neutralShadow"][class*="rounded-20"] > div {
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Skeleton loading cards too */
  div[class*="animate-pulse"] {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ---- STATS BAR: Proper wrapping on mobile ---- */
@media (max-width: 767px) {
  /* Stats bar (500K+ Professionals, 250+ Workshops) */
  ul[class*="flex-row"][class*="justify-between"][class*="rounded-xl"][class*="bg-secondary"] {
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px 12px !important;
    gap: 12px !important;
    height: auto !important;
    flex-direction: row !important;
  }
  ul[class*="flex-row"][class*="justify-between"][class*="rounded-xl"][class*="bg-secondary"] > li {
    flex: 0 0 calc(50% - 8px) !important;
    text-align: center !important;
  }
  ul[class*="flex-row"][class*="justify-between"][class*="rounded-xl"][class*="bg-secondary"] > li .text-2xl {
    font-size: 1.25rem !important;
  }
}

/* ---- TUITION PRICING CARDS: Stack on mobile ---- */
@media (max-width: 767px) {
  /* Pricing cards container: column stack */
  div[class*="flex-col"][class*="md:flex-row"][class*="justify-center"][class*="gap-spacing20"] {
    flex-direction: column !important;
    gap: 20px !important;
  }
  /* Each pricing card: full width */
  div[class*="outline"][class*="rounded-custom20"][class*="max-w-442"] {
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* ---- CTA BANNER: Stack on mobile ---- */
@media (max-width: 767px) {
  /* CTA section: "Ready to unlock..." */
  div[class*="bg-secondary-100"][class*="rounded-xl"][class*="md:flex-row"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    gap: 12px !important;
    padding: 16px !important;
  }
  div[class*="bg-secondary-100"][class*="rounded-xl"] .text-xl {
    font-size: 1.1rem !important;
    line-height: 1.45rem !important;
  }
}

/* ---- SECTION PADDING: Consistent mobile gutters ---- */
@media (max-width: 767px) {
  /* Kill excessive xl/sm paddings on mobile (double-guard footer.php styles) */
  section[class*="xl:px-spacing80"],
  section[class*="sm:px-spacing112"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Inner content containers: consistent padding */
  section[class*="xl:px-spacing80"] > div[class*="px-spacing20"],
  section[class*="sm:px-spacing112"] > div[class*="px-spacing20"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ---- COURSE HIGHLIGHTS GRID: Proper mobile stacking ---- */
@media (max-width: 767px) {
  /* 3-column grid → 1 column on mobile */
  div[class*="grid-cols-1"][class*="md:grid-cols-3"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  /* 2-column grid → 1 column on mobile */
  div[class*="grid-cols-1"][class*="md:grid-cols-2"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  /* Highlight items inside grids */
  div[class*="min-w-262"] {
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* ---- ENROLLED BADGE + RATINGS ROW: No overflow ---- */
@media (max-width: 767px) {
  /* Enrolled badge width constraint */
  div[class*="max-w-59"],
  div[class*="max-w-60"] {
    max-width: 100% !important;
  }
  /* Ratings row (Google 4.8, Facebook 4.7...) */
  div[class*="gap-spacing20"][class*="justify-start"][class*="z-10"] {
    gap: 8px !important;
    flex-wrap: wrap !important;
  }
}

/* ---- SIDEBAR STICKY CTA: Hide on mobile ---- */
@media (max-width: 767px) {
  /* The "Discover Your Path" sticky sidebar is desktop-only */
  div[class*="transition-all"][class*="z-\\[20\\]"][class*="md:block"][class*="hidden"] {
    display: none !important;
  }
}

/* ---- REVIEW RATING BAR: Wrap on mobile ---- */
@media (max-width: 767px) {
  /* Review platform icons row */
  div[class*="py-spacing24"][class*="shadow-neutralShadow"][class*="grid-cols-2"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
  div[class*="py-spacing24"][class*="shadow-neutralShadow"][class*="grid-cols-2"] > div {
    text-align: center !important;
  }
}

/* ---- BODY BOTTOM PADDING: Account for sticky CTA bar ---- */
@media (max-width: 767px) {
  body {
    padding-bottom: 72px !important;
  }
}

/* ================================================================
   GLOBAL CONTAINER ALIGNMENT FIX
   Ensures all internal page content fills full container width
   and stays centered instead of shifting to the side.
   ================================================================ */

/* Force all main content sections to be centered and full-width */
main, [role="main"], #__next, #__next > div, body > div:not(.sc-sticky-bar):not(#sc-lead-popup):not(#sc-mega-overlay):not(#sc-mega),
body > section:not(#sc-global-footer):not(.sc-topbar):not(#sc-header) {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Center all content wrappers */
[class*="max-w-"][class*="mx-auto"],
[class*="max-w-7xl"], [class*="max-w-[1280px]"],
[class*="2xl:max-w-"], [class*="w-full"][class*="mx-auto"] {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  width: 100% !important;
}

/* Override any ml-auto / mr-auto that pushes content to one side */
.ml-auto, [class*="ml-auto"], .mr-auto, [class*="mr-auto"] {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Ensure flex containers with justify-center actually center */
.justify-center, [class*="justify-center"] {
  justify-content: center !important;
}

/* Fix any absolute positioned elements that might cause side-shift */
.relative, [class*="relative"] {
  position: relative !important;
}

/* Override negative margins that pull content to the side */
[class*="-ml-"], [class*="-mr-"], [class*="-mx-"] {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Fix sidebars or aside elements that crush main content */
@media (min-width: 768px) {
  aside, [class*="sidebar"], [class*="sticky"][class*="md:block"] {
    max-width: 340px !important;
  }
}

/* Ensure all row containers use full width */
.row, [class*="row"] {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ---- BOOK A FREE COUNSELLING ALIGNMENT FIX ---- */
#sc-footer-counselling {
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ---- TOGGLE / ACCORDION GLOBAL FIX ---- */
[data-bs-toggle="collapse"], [data-bs-toggle="tab"], [data-bs-toggle="pill"],
[aria-expanded], .accordion-button, .nav-link {
  cursor: pointer !important;
}

.tab-content > .tab-pane {
  display: none !important;
}
.tab-content > .tab-pane.active {
  display: block !important;
}

/* Ensure all collapsible panels start hidden unless active */
.collapse:not(.show) {
  display: none !important;
}
.collapse.show {
  display: block !important;
}

❌ Cancel

🗂️ Enhanced PHP File Manager

📊 Server Information

🔧 Quick Actions

✏️ Editing: custom-brand.css

📤 Upload File

📁 Create Folder

📄 Create File

✏️ Rename Item

🗑️ Delete Confirmation