/* ==========================================
   GERALFIN ACADEMY
   RESPONSIVE DESIGN
========================================== */

/* ==============================
   Large Laptop
============================== */
@media (max-width: 992px) {
  .navbar {
    display: none;
  }
}

.hero-left h1 {
  font-size: 54px;
}

.hero-right img {
  height: 600px;
}

.footer-grid {
  grid-template-columns: repeat(2, 1fr);
}

/* ==============================
   Tablet
============================== */
@media (max-width: 992px) {
  .toggle-container {
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
  }

  .desktop-logo {
    display: none;
  }

  .mobile-logo {
    display: block;
  }

  .header-auth {
    display: none;
  }

  .menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border: none;
    background: none;
    color: #fff;
    font-size: 26px;
    cursor: pointer;
  }

  .navbar ul {
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
  }

  .hero {
    padding: 120px 0 80px;
    height: auto;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero-left {
    order: 2;
  }

  .hero-right {
    order: 1;
  }

  .hero-right img {
    height: 450px;
  }

  .hero-left h1 {
    font-size: 46px;
  }

  .hero-buttons {
    justify-content: center;
    flex-wrap: wrap;
  }

  .market-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .course-grid {
    grid-template-columns: 1fr;
  }

  .tools-grid {
    grid-template-columns: 1fr;
  }

  .news-grid {
    grid-template-columns: 1fr;
  }

  .testimonial-grid {
    grid-template-columns: 1fr;
  }

  .roadmap-container {
    flex-direction: column;
  }

  .roadmap-arrow {
    transform: rotate(90deg);
    font-size: 30px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .social-icons {
    justify-content: center;
  }
}

/* ==============================
   Mobile
============================== */
@media (max-width: 768px) {
  .container {
    width: 95%;
    max-width: 100%;
    margin: auto;
    padding-left: 15px;
    padding-right: 15px;
  }

  .register-modal-content {
    width: 92%;
    max-width: 380px;
    padding: 25px 20px;
  }

  .register-options {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .register-card {
    width: 100%;
    padding: 25px 18px;
  }

  .register-icon {
    width: 60px;
    height: 60px;
    font-size: 24px;
  }

  .menu-toggle {
    display: block;
  }

  .logo img {
    height: 55px;
  }

  .hero {
    padding-top: 120px;
  }

  .hero-container {
    display: flex;
    flex-direction: column;
  }

  .hero-content {
    width: 100%;
    text-align: center;
  }

  .hero-left h1 {
    font-size: 38px;
  }

  .hero-left p {
    font-size: 17px;
  }

  .hero-image {
    width: 100%;
    margin-top: 30px;
  }

  .hero-image img {
    width: 100%;
    max-width: 350px;
    margin: auto;
  }

  .hero-buttons {
    flex-direction: column;
    align-items: center;
  }

  .primary-btn,
  .secondary-btn {
    width: 250px;
    text-align: center;
  }

  .market-grid {
    grid-template-columns: 1fr;
  }

  .section-title h2 {
    font-size: 34px;
  }

  .section-title p {
    font-size: 16px;
  }

  .course-content h3 {
    font-size: 22px;
  }

  .roadmap-item {
    width: 100%;
  }

  .cta-section h2 {
    font-size: 34px;
  }

  .cta-section p {
    font-size: 18px;
  }

  .logo img {
    height: 50px;
  }

  .logo-title {
    font-size: 18px;
  }

  .logo-subtitle {
    font-size: 12px;
  }
}

body {
  overflow-x: hidden;
}

section {
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 768px) {
  * {
    max-width: 100%;
  }
}

/* ==============================
   Small Mobile
============================== */
@media (max-width: 480px) {
  .hero-left h1 {
    font-size: 30px;
  }

  .hero-left p {
    font-size: 16px;
  }

  .hero-tag {
    font-size: 12px;
    padding: 8px 14px;
  }

  .market-card {
    padding: 25px;
  }

  .course-card {
    margin: 0;
  }

  .tool-card {
    padding: 25px;
  }

  .news-card {
    padding: 25px;
  }

  .testimonial-card {
    padding: 25px;
  }

  .footer {
    padding: 60px 20px;
  }

  .footer-logo {
    height: 60px;
  }

  .footer-column h3 {
    font-size: 20px;
  }
}

@media (max-width: 991px) {
  .hero-container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero-content h1 {
    font-size: 42px;
  }

  .hero-image {
    margin-top: 40px;
  }

  .hero-stats {
    justify-content: center;
    flex-wrap: wrap;
  }
}

@media (max-width: 576px) {
  .hero-content h1 {
    font-size: 34px;
    line-height: 1.2;
  }

  .hero-content p {
    font-size: 16px;
  }

  .hero-buttons {
    flex-direction: column;
  }

  .hero-stats {
    gap: 25px;
  }
}

@media (max-width: 420px) {
  .hero-content h1 {
    font-size: 28px;
  }

  .hero-content p {
    font-size: 15px;
  }
}

/*==================================
QUIZ RESPONSIVE
==================================*/
@media (max-width: 768px) {
  .quiz-card {
    padding: 20px;
  }

  .quiz-card h3 {
    font-size: 20px;
  }

  .quiz-options label {
    padding: 15px;
    font-size: 15px;
  }

  .quiz-submit .primary-btn {
    width: 100%;
  }
}

/*=========================================
QUIZ HEADER / TIMER — MOBILE
(append to responsive.css, under the
existing "QUIZ RESPONSIVE" block)
=========================================*/
 
@media (max-width: 768px) {
 
    .quiz-header {
        flex-wrap: wrap;
        gap: 15px;
    }
 
    .quiz-timer {
        padding: 8px 14px;
        font-size: 15px;
        gap: 6px;
    }
 
    .quiz-timer i {
        font-size: 13px;
    }
}
 
@media (max-width: 480px) {
 
    .quiz-header {
        flex-direction: column;
        align-items: flex-start;
    }
 
    .quiz-timer {
        align-self: flex-start;
        padding: 7px 12px;
        font-size: 14px;
        border-radius: 8px;
    }
}

/*=========================================
FACULTY RESPONSIVE
=========================================*/
/* Large Tablets */
@media (max-width: 1200px) {
  .faculty-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
  }
}

/* Tablets */
@media (max-width: 992px) {
  .faculty-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
  }

  .faculty-card {
    max-width: 340px;
    margin: auto;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .faculty-section {
    padding: 70px 20px;
  }

  .faculty-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .faculty-card {
    width: 100%;
    max-width: 380px;
    margin: auto;
  }

  .faculty-section h2 {
    font-size: 32px;
  }

  .faculty-section .section-title p {
    width: 100%;
    font-size: 16px;
  }
}

/* Small Phones */
@media (max-width: 480px) {
  .faculty-card {
    max-width: 100%;
  }

  .faculty-image {
    height: 120px;
  }

  .faculty-image img {
    width: 100px;
    height: 100px;
    bottom: -50px;
  }

  .faculty-content {
    padding: 70px 20px 25px;
  }

  .faculty-content h3 {
    font-size: 20px;
  }
}

/*=========================================
HOW TO INVEST RESPONSIVE
=========================================*/

/* Tablet and below */
@media (max-width: 768px) {

  .investment-guide {
    padding: 70px 0;
  }

  .guide-grid {
    grid-template-columns: 1fr;
    gap: 25px;
    margin-bottom: 45px;
  }

  .guide-card {
    padding: 28px;
  }

  .guide-card h2 {
    font-size: 22px;
  }

  .guide-card ol {
    padding-left: 18px;
    line-height: 1.8;
  }

  .investment-checklist {
    padding: 28px;
  }

  .checklist p {
    font-size: 16px;
  }
}

/* Small phones */
@media (max-width: 480px) {

  .guide-card {
    padding: 20px;
  }

  .guide-card i {
    font-size: 38px;
  }

  .guide-card h2 {
    font-size: 20px;
    margin-bottom: 15px;
  }

  .investment-checklist {
    padding: 20px;
  }

  .checklist p {
    font-size: 15px;
    margin-bottom: 14px;
  }
}

/*=========================================
CALCULATOR PAGE — SMALL PHONE FIX
(append to responsive.css, or replace the
existing "@media (max-width: 480px)" block
under CALCULATOR PAGE RESPONSIVE)
=========================================*/

@media (max-width: 480px) {

  /* ---- Hero ---- */
  .calculator-hero {
    padding: 70px 0 35px;
  }

  .calculator-hero h1 {
    font-size: 24px;
    line-height: 1.3;
    padding: 0 10px;
  }

  .calculator-hero p {
    font-size: 14px;
    padding: 0 15px;
  }

  /* ---- Dashboard intro ---- */
  .calculator-dashboard {
    padding: 40px 0;
  }

  .calculator-dashboard h1 {
    font-size: 22px;
    padding: 0 10px;
  }

  .calculator-dashboard p {
    font-size: 14px;
    padding: 0 15px;
  }

  .dashboard-stats {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 30px;
  }

  .stat-box {
    padding: 16px 10px;
  }

  .stat-box h2 {
    font-size: 22px;
    margin-bottom: 4px;
  }

  .stat-box p {
    font-size: 13px;
  }

  /* ---- Calculator grid & cards ---- */
  .calculator-grid {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 25px;
  }

  .calculator-card {
    padding: 16px;
    border-radius: 12px;
  }

  .calculator-card h2 {
    font-size: 16px;
    line-height: 1.4;
    margin-bottom: 15px;
  }

  .calculator-card label {
    font-size: 13px;
    margin-top: 12px;
    margin-bottom: 5px;
  }

  .calculator-card input,
  .calculator-card select {
    padding: 11px;
    font-size: 14px;
    border-radius: 6px;
  }

  .calculator-card button {
    padding: 12px;
    font-size: 14px;
    margin-top: 18px;
  }

  .calculator-card h3 {
    font-size: 19px;
    margin-top: 18px;
  }

  .calculator-note {
    font-size: 12px;
    line-height: 1.5;
  }

  /* ---- Results box ---- */
  .calculator-results {
    padding: 14px;
    margin-top: 18px;
  }

  .calculator-results p {
    font-size: 13px;
    margin-top: 10px;
  }

  .calculator-results h3 {
    font-size: 18px;
    margin-bottom: 10px;
  }

  /* ---- Growth chart ---- */
  .growth-chart {
    padding: 40px 0;
  }

  .growth-chart h2 {
    font-size: 20px;
    padding: 0 10px;
  }

  .growth-chart canvas {
    max-height: 260px;
    width: 100% !important;
  }
}

/*=========================================
EXTRA-SMALL PHONES (≤380px, e.g. small
Android / older iPhones)
=========================================*/
@media (max-width: 380px) {

  .calculator-hero h1 {
    font-size: 15px;
  }

  .calculator-dashboard h1 {
    font-size: 19px;
  }

  .dashboard-stats {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .stat-box h2 {
    font-size: 19px;
  }

  .calculator-card {
    padding: 14px;
  }

  .calculator-card h2 {
    font-size: 15px;
  }

  .calculator-card h3 {
    font-size: 17px;
  }

  .growth-chart canvas {
    max-height: 220px;
  }
}

/*=========================================
CONTACT PAGE — RESPONSIVE FIX
(append to responsive.css — there was no
existing breakpoint for .contact-grid, so
it was staying 2-column on every screen)
=========================================*/

/* ---- Tablet & below: stack the grid ---- */
@media (max-width: 768px) {

  .contact-page {
    padding: 70px 0;
  }

  .contact-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .contact-info,
  .contact-form {
    padding: 30px;
  }

  .page-hero h1 {
    font-size: 40px;
  }

  .page-hero p {
    font-size: 17px;
  }

  .map-placeholder {
    height: 320px;
  }
}

/* ---- Small phones ---- */
@media (max-width: 480px) {

  .contact-page {
    padding: 50px 0;
  }

  .contact-grid {
    gap: 20px;
  }

  .contact-info,
  .contact-form {
    padding: 20px;
    border-radius: 14px;
  }

  .contact-info h2,
  .contact-form h2 {
    font-size: 20px;
    margin-bottom: 20px;
  }

  .info-box {
    gap: 14px;
    margin-bottom: 22px;
  }

  .info-box i {
    font-size: 22px;
    width: 35px;
  }

  .info-box h4 {
    font-size: 15px;
    margin-bottom: 4px;
  }

  .info-box p {
    font-size: 14px;
  }

  .contact-form input,
  .contact-form textarea {
    padding: 12px;
    margin-bottom: 14px;
    font-size: 14px;
  }

  .contact-form button {
    padding: 13px;
    font-size: 15px;
  }

  .page-hero {
    padding: 130px 0 60px;
  }

  .page-hero h1 {
    font-size: 30px;
  }

  .page-hero p {
    font-size: 15px;
    padding: 0 10px;
  }

  .map-section {
    padding: 60px 0;
  }

  .map-placeholder {
    height: 240px;
    border-radius: 14px;
  }

  .map-placeholder i {
    font-size: 50px;
    margin-bottom: 15px;
  }

  .map-placeholder h3 {
    font-size: 18px;
  }

  .map-placeholder p {
    font-size: 13px;
    padding: 0 20px;
  }

  .section-title h2 {
    font-size: 22px;
  }
}

/* ---- Extra-small phones ---- */
@media (max-width: 380px) {

  .page-hero h1 {
    font-size: 26px;
  }

  .contact-info h2,
  .contact-form h2 {
    font-size: 18px;
  }

  .info-box i {
    font-size: 20px;
    width: 30px;
  }

  .map-placeholder {
    height: 200px;
  }
}

/*=========================================
LOGIN OPTIONS MODAL — "WELCOME BACK"
SMALL PHONE FIX
(append to responsive.css — the register
modal already had a mobile breakpoint,
but the login modal/login-options grid
had none, so its two cards were still
squeezed side-by-side on small phones)
=========================================*/

/* ---- Tablet & below: stack the cards ---- */
@media (max-width: 768px) {

  .login-modal-content {
    width: 92%;
    max-width: 380px;
    padding: 25px 20px;
  }

  .login-modal-content h2 {
    font-size: 24px;
  }

  .login-modal-content p {
    font-size: 14px;
    margin-bottom: 20px;
  }

  .login-options {
    flex-direction: column;
    gap: 20px;
  }

  .login-card {
    width: 100%;
    padding: 25px 18px;
  }

  .login-icon,
  .login-card .register-icon {
    width: 60px;
    height: 60px;
    font-size: 24px;
    margin-bottom: 15px;
  }

  .login-card h3 {
    font-size: 18px;
    margin-bottom: 10px;
  }

  .login-card p {
    font-size: 14px;
    line-height: 1.5;
  }

  .close-login-modal {
    right: 18px;
    top: 14px;
    font-size: 26px;
  }
}

/* ---- Small phones ---- */
@media (max-width: 480px) {

  .login-modal {
    padding: 15px;
  }

  .login-modal-content {
    width: 100%;
    max-width: 340px;
    padding: 22px 16px;
    border-radius: 14px;
  }

  .login-modal-content h2 {
    font-size: 20px;
    margin-bottom: 6px;
  }

  .login-modal-content p {
    font-size: 13px;
    margin-bottom: 18px;
  }

  .login-options {
    gap: 15px;
    margin-top: 18px;
  }

  .login-card {
    padding: 20px 14px;
    border-radius: 12px;
  }

  .login-icon,
  .login-card .register-icon {
    width: 52px;
    height: 52px;
    font-size: 20px;
    margin-bottom: 12px;
  }

  .login-card h3 {
    font-size: 16px;
  }

  .login-card p {
    font-size: 13px;
    line-height: 1.5;
  }

  .close-login-modal {
    right: 14px;
    top: 10px;
    font-size: 24px;
  }
}

/* ---- Extra-small phones ---- */
@media (max-width: 380px) {

  .login-modal-content {
    padding: 18px 14px;
  }

  .login-modal-content h2 {
    font-size: 18px;
  }

  .login-card {
    padding: 18px 12px;
  }

  .login-icon,
  .login-card .register-icon {
    width: 46px;
    height: 46px;
    font-size: 18px;
  }

  .login-card h3 {
    font-size: 15px;
  }

  .login-card p {
    font-size: 12px;
  }
}

/*=========================================
COURSES PAGE (courses.php) — SMALL PHONE FIX
(append to responsive.css)

Notes on what was broken:
- .catalog-grid uses minmax(120px,1fr) which
  is far too narrow — on small phones it can
  let 2+ tiny, squashed cards sit side by side
  instead of stacking cleanly to one column.
- .courses-hero / .course-filter had only a
  768px pass; nothing tuned for 480px/380px.
- .course-buttons (View Details + Enroll) had
  no small-phone sizing, so two side-by-side
  buttons got cramped.
=========================================*/

/* ---- Tablet & below ---- */
@media (max-width: 768px) {

  .courses-hero {
    padding: 90px 0 50px;
  }

  .courses-hero h1 {
    font-size: 32px;
    line-height: 1.3;
  }

  .courses-hero p {
    font-size: 15px;
    padding: 0 10px;
  }

  .course-filter {
    padding: 25px 0;
  }

  .course-catalog {
    padding: 50px 0;
  }

  .catalog-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .catalog-card img {
    height: 190px;
  }

  .catalog-content {
    padding: 20px;
  }
}

/* ---- Small phones ---- */
@media (max-width: 480px) {

  .courses-hero {
    padding: 75px 0 40px;
  }

  .courses-hero h1 {
    font-size: 26px;
  }

  .courses-hero p {
    font-size: 14px;
  }

  /* success / warning banners above the hero title */
  .success-message,
  .warning-message {
    padding: 12px 14px;
    font-size: 13px;
    margin-bottom: 15px;
  }

  .course-filter input,
  .course-filter select {
    padding: 13px;
    font-size: 14px;
  }

  .course-catalog {
    padding: 40px 0;
  }

  .catalog-grid {
    gap: 20px;
  }

  .catalog-card {
    border-radius: 14px;
  }

  .catalog-card img {
    height: 170px;
  }

  .catalog-content {
    padding: 16px;
  }

  .badge {
    padding: 6px 14px;
    font-size: 12px;
    margin-bottom: 10px;
  }

  .catalog-content h3 {
    font-size: 18px;
    margin-bottom: 8px;
    line-height: 1.4;
  }

  .catalog-content p {
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 12px;
  }

  .course-info {
    font-size: 13px;
    margin: 14px 0;
    flex-wrap: wrap;
    gap: 8px;
  }

  .course-buttons {
    flex-direction: column;
    gap: 10px;
  }

  .course-buttons a,
  .course-buttons form {
    width: 100%;
  }

  .view-btn,
  .enroll-btn {
    padding: 11px;
    font-size: 14px;
  }
}

/* ---- Extra-small phones ---- */
@media (max-width: 380px) {

  .courses-hero h1 {
    font-size: 22px;
  }

  .catalog-card img {
    height: 150px;
  }

  .catalog-content h3 {
    font-size: 16px;
  }

  .catalog-content p {
    font-size: 12px;
  }

  .badge {
    font-size: 11px;
    padding: 5px 12px;
  }
}

/*=========================================
ABOUT PAGE (about.php) — SMALL PHONE FIX
(append to responsive.css)

Notes on what was broken:
- .page-hero had NO mobile override anywhere —
  it was still running desktop sizing
  (padding:180px 0 100px, h1:60px, p:22px)
  on every phone.
- .about-grid is a hard `1fr 1fr` with no
  mobile override either, so the founder
  photo and the story text were squeezed
  into two narrow columns instead of
  stacking.
- .mission-card padding (40px) and
  .cta-section were only lightly tuned.
=========================================*/

/* ---- Tablet & below ---- */
@media (max-width: 768px) {

  .page-hero {
    padding: 130px 0 60px;
    text-align: center;
  }

  .page-hero h1 {
    font-size: 40px;
  }

  .page-hero p {
    font-size: 17px;
    padding: 0 10px;
  }

  .about-section {
    padding: 70px 0;
  }

  .about-grid {
    grid-template-columns: 1fr;
    gap: 35px;
    text-align: center;
  }

  .about-grid img {
    max-width: 400px;
    margin: 0 auto;
  }

  .about-grid h2 {
    font-size: 30px;
  }

  .about-grid p {
    font-size: 16px;
    line-height: 1.8;
  }

  .mission {
    padding: 70px 0;
  }

  .mission-card {
    padding: 30px;
  }
}

/* ---- Small phones ---- */
@media (max-width: 480px) {

  .page-hero {
    padding: 110px 0 45px;
  }

  .page-hero h1 {
    font-size: 28px;
    line-height: 1.3;
  }

  .page-hero p {
    font-size: 15px;
  }

  .about-section {
    padding: 50px 0;
  }

  .about-grid {
    gap: 25px;
  }

  .about-grid h2 {
    font-size: 24px;
    margin-bottom: 15px;
  }

  .about-grid p {
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 14px;
  }

  .mission {
    padding: 50px 0;
  }

  .mission-grid {
    gap: 20px;
  }

  .mission-card {
    padding: 25px;
    border-radius: 14px;
  }

  .mission-card i {
    font-size: 36px;
    margin-bottom: 15px;
  }

  .mission-card h3 {
    font-size: 19px;
    margin-bottom: 12px;
  }

  .mission-card p {
    font-size: 14px;
    line-height: 1.6;
  }

  .cta-section {
    padding: 60px 20px;
  }

  .cta-section h2 {
    font-size: 26px;
  }

  .cta-section p {
    font-size: 15px;
  }

  .cta-buttons {
    flex-direction: column;
    align-items: center;
    gap: 15px;
  }

  .cta-buttons a {
    width: 220px;
    text-align: center;
  }
}

/* ---- Extra-small phones ---- */
@media (max-width: 380px) {

  .page-hero h1 {
    font-size: 24px;
  }

  .about-grid h2 {
    font-size: 21px;
  }

  .mission-card {
    padding: 20px;
  }

  .mission-card h3 {
    font-size: 17px;
  }

  .cta-section h2 {
    font-size: 22px;
  }
}

/*=========================================
MARKET BASICS PAGE (market-basics.php)
SMALL PHONE FIX
(append to responsive.css)

Notes on what was broken:
- .page-hero (shared across pages) had no
  mobile override — same issue as about.php.
  If you've already added the about-page
  fix that touches .page-hero, you can skip
  that part here to avoid duplicating rules.
- .capital-grid is a hard `1fr 1fr` with no
  mobile override, so the "What You'll Learn"
  checklist and the market image were forced
  into two squeezed columns on phones.
- .basics-grid uses minmax(320px,1fr) which
  is reasonable and stacks fine on its own,
  but card padding/icon sizes were untouched
  for small screens.
=========================================*/

/* ---- Tablet & below ---- */
@media (max-width: 768px) {

  .page-hero {
    padding: 130px 0 60px;
    text-align: center;
  }


  .market-basics {
    padding: 70px 0;
  }

  .basics-grid {
    gap: 25px;
    margin-top: 40px;
  }

  .basic-card {
    padding: 30px;
  }

  .capital-market {
    padding: 70px 0;
  }

  .capital-grid {
    grid-template-columns: 1fr;
    gap: 35px;
    margin-top: 40px;
  }

  .capital-grid img {
    order: -1;
    max-width: 450px;
    margin: 0 auto;
  }

  .capital-grid ul {
    font-size: 16px;
    line-height: 2;
  }
}

/* ---- Small phones ---- */
@media (max-width: 480px) {

  
  .market-basics {
    padding: 50px 0;
  }

  .section-title h2 {
    font-size: 24px;
  }

  .section-title p {
    font-size: 14px;
  }

  .basics-grid {
    gap: 20px;
    margin-top: 30px;
  }

  .basic-card {
    padding: 25px 20px;
    border-radius: 14px;
  }

  .basic-card i {
    font-size: 38px;
    margin-bottom: 18px;
  }

  .basic-card h3 {
    font-size: 19px;
    margin-bottom: 12px;
  }

  .basic-card p {
    font-size: 14px;
    line-height: 1.6;
  }

  .capital-market {
    padding: 50px 0;
  }

  .capital-grid {
    gap: 25px;
  }

  .capital-grid h3 {
    font-size: 20px;
    margin-bottom: 15px;
  }

  .capital-grid ul {
    font-size: 14px;
    line-height: 1.9;
  }
}

/* ---- Extra-small phones ---- */
@media (max-width: 380px) {


  .basic-card {
    padding: 20px 16px;
  }

  .basic-card i {
    font-size: 32px;
  }

  .basic-card h3 {
    font-size: 17px;
  }

  .capital-grid h3 {
    font-size: 18px;
  }

  .capital-grid ul {
    font-size: 13px;
  }
}


/*=========================================
LOGIN / REGISTER PAGES — SMALL PHONE FIX
(append to responsive.css — only a 992px
breakpoint exists today; nothing tuned
further down for real small phones)
=========================================*/

@media (max-width: 480px) {

    .login-left {
        padding: 30px 20px;
    }

    .login-logo {
        width: 90px;
    }

    .login-left h1 {
        font-size: 26px;
    }

    .login-description {
        font-size: 14px;
        line-height: 1.7;
    }

    .register-benefits {
        margin-top: 22px;
        text-align: left;
    }

    .register-benefits p {
        font-size: 13px;
        margin-bottom: 10px;
    }

    .login-right {
        padding: 20px;
    }

    .login-card,
    .register-card {
        padding: 22px 16px;
        border-radius: 14px;
    }

    .login-card h2,
    .register-card h2 {
        font-size: 22px;
    }

    .login-card p,
    .register-card p {
        font-size: 13px;
        margin-bottom: 18px;
    }

    .form-group label {
        font-size: 13px;
        margin-bottom: 6px;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 12px 14px;
        font-size: 14px;
        border-radius: 10px;
    }

    .profile-preview {
        width: 100px;
        height: 100px;
    }

    .password-box button {
        right: 10px;
        font-size: 15px;
    }

    .strength-bar {
        height: 6px;
    }

    #strengthText,
    #passwordMatch {
        font-size: 12px;
    }

    .terms-box {
        margin: 20px 0;
    }

    .terms-box label {
        font-size: 13px;
        gap: 10px;
    }

    .register-card .primary-btn,
    .login-right button {
        padding: 14px;
        font-size: 15px;
    }

    .login-footer {
        font-size: 13px;
    }

    .success-message,
    .error-message {
        padding: 11px;
        font-size: 13px;
    }
}

@media (max-width: 380px) {

    .login-left h1 {
        font-size: 22px;
    }

    .login-card h2,
    .register-card h2 {
        font-size: 19px;
    }

    .login-card,
    .register-card {
        padding: 18px 14px;
    }

    .profile-preview {
        width: 85px;
        height: 85px;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 11px 12px;
        font-size: 13px;
    }
}

/*=========================================
STUDENT DASHBOARD STATS — MOBILE SCROLL
Mirrors the horizontal scroll-strip pattern
already used for .instructor-cards on the
instructor dashboard, so the student
dashboard's stat cards behave the same way
on phones instead of stacking into a column.

Scoped to .dashboard-content .dashboard-stats
so it does NOT affect the other .dashboard-stats
block in style.css (used on the calculator
page), which should keep its own layout.
=========================================*/

@media (max-width: 768px) {

  .dashboard-content .dashboard-stats{

    display:flex !important;

    flex-wrap:nowrap !important;

    overflow-x:auto;

    overflow-y:hidden;

    gap:16px;

    padding-bottom:12px;

    scroll-behavior:smooth;

    -webkit-overflow-scrolling:touch;

    scrollbar-width:none;      /* Firefox */

    -ms-overflow-style:none;   /* IE/Edge */

  }

  .dashboard-content .dashboard-stats::-webkit-scrollbar{

    display:none;              /* Chrome, Safari, Opera */

  }

  .dashboard-content .dashboard-stats .stat-card{

    flex:0 0 170px !important;

    min-width:170px !important;

  }

}

/*=========================================
ADMIN TABLES — SMALL PHONE SAFETY NET
Ensures course-table and student-table stay
horizontally scrollable (not squeezed) on
narrow phones, matching .table-responsive
behavior already defined in style.css.
=========================================*/

@media (max-width: 480px) {

  .table-responsive{
    -webkit-overflow-scrolling: touch;
  }

  .table-responsive .course-table,
  .table-responsive .student-table{
    min-width: 700px;
  }

}

.recent-registrations .admin-table{
    min-width:500px;
}

/*=========================================
ADMIN ANALYTICS STATS — MOBILE SCROLL
Makes the stat-card rows (header stats +
Student Management stats) scroll
horizontally on phones instead of wrapping
into a stacked column. Scrollbar hidden
across browsers, same pattern used for
.instructor-cards on the instructor
dashboard.
=========================================*/

@media (max-width: 768px) {

  .admin-analytics{

    display:flex !important;

    flex-wrap:nowrap !important;

    overflow-x:auto;

    overflow-y:hidden;

    gap:16px;

    padding-bottom:12px;

    scroll-behavior:smooth;

    -webkit-overflow-scrolling:touch;

    scrollbar-width:none;      /* Firefox */

    -ms-overflow-style:none;   /* IE/Edge */

  }

  .admin-analytics::-webkit-scrollbar{

    display:none;              /* Chrome, Safari, Opera */

  }

  .admin-analytics .analytics-card{

    flex:0 0 170px !important;

    min-width:170px !important;

  }

}

/*=========================================
ADMIN PANEL RESPONSIVE
(merged from admin-responsiveness.css)
=========================================*/

/* ---- Admin content padding ---- */
@media (max-width:991px){
  .admin-content{
    width:100%;
    padding:25px;
  }
}

@media (max-width:767px){
  .admin-content{
    padding:18px;
  }
}

@media (max-width:480px){
  .admin-content{
    padding:15px;
  }
}

/* ---- Admin tables / certificates / exports ----
   Single source of truth for .admin-table min-width
   on tablet — replaces the two conflicting values
   (1100px / 900px) that existed across the old
   992px and 991px breakpoints. */
@media (max-width: 991px) {

  .table-container,
  .table-wrapper{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .admin-table {
    min-width: 1000px;
  }

  .certificate-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .certificate-toolbar input,
  .certificate-toolbar select {
    width: 100%;
  }

  .export-buttons {
    justify-content: center;
  }
}

/* ---- Admin login ---- */
@media (max-width: 900px) {
  .login-container {
    grid-template-columns: 1fr;
  }

  .login-left {
    display: none;
  }

  .login-card {
    width: 90%;
  }
}

/* ---- Admin profile / dashboard layout ---- */
@media (max-width: 992px) {
  .profile-card {
    flex-direction: column;
    text-align: center;
  }

  .profile-left {
    width: 100%;
  }

  .profile-right {
    width: 100%;
  }

  .profile-grid {
    grid-template-columns: 1fr;
  }

  .full-width {
    grid-column: auto;
  }

  .page-header {
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
  }

  .action-buttons {
    justify-content: center;
  }
}

/* ---- Admin headers ---- */
@media (max-width:767px){
  .dashboard-header{
    margin-bottom:25px;
  }

  .dashboard-header h1{
    font-size:28px;
    line-height:1.3;
  }

  .dashboard-header p{
    font-size:15px;
  }
}

@media (max-width:480px){
  .dashboard-header h1{
    font-size:24px;
  }
}

/* ---- Admin statistics (non-analytics dashboards) ---- */
@media (max-width:991px){
  .dashboard-stats{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
  }
}

@media (max-width:767px){
  .dashboard-stats{
    grid-template-columns:1fr;
  }

  .stat-card{
    width:100%;
  }
}

/*=========================================
INSTRUCTOR STATS — MOBILE SCROLL
Same horizontal-scroll pattern used for
.admin-analytics / .dashboard-content
.dashboard-stats, scoped so it doesn't
affect the generic .dashboard-stats grid
used on other admin pages (e.g. calculator).
=========================================*/

@media (max-width: 991px) {

  .instructor-stats {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 16px;
    padding-bottom: 12px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;      /* Firefox */
    -ms-overflow-style: none;   /* IE/Edge */
  }

  .instructor-stats::-webkit-scrollbar {
    display: none;              /* Chrome, Safari, Opera */
  }

  .instructor-stats .stat-card {
    flex: 0 0 170px !important;
    min-width: 170px !important;
    width: auto !important;
  }
}

/* ---- Admin table tools ---- */
@media (max-width:767px){
  .table-tools{
    display:flex;
    flex-direction:column;
    gap:15px;
  }

  .table-tools input,
  .table-tools select{
    width:100%;
  }
}

/* ---- Admin buttons ---- */
@media (max-width:767px){
  .table-btn{
    padding:8px 14px;
    font-size:13px;
  }

  .primary-btn,
  .secondary-btn{
    width:100%;
    justify-content:center;
  }
}

/* ---- Admin forms ---- */
@media (max-width:767px){
  .form-row{
    display:block;
  }

  .form-group{
    width:100%;
    margin-bottom:15px;
  }

  input,
  select,
  textarea{
    width:100%;
  }
}

/* ---- Admin cards ---- */
@media (max-width:767px){
  .card{
    padding:20px;
  }
}

/* ---- Admin profile images ---- */
@media (max-width:767px){
  .instructor-photo,
  .student-photo,
  .course-image{
    width:45px;
    height:45px;
  }
}

/* ---- Admin modals ---- */
@media (max-width:767px){
  .modal-content{
    width:95%;
    max-height:90vh;
    overflow-y:auto;
  }
}

/* ---- Admin extra-small phones ---- */
@media (max-width:360px){
  .dashboard-header h1{
    font-size:20px;
  }

  .stat-card h2{
    font-size:24px;
  }

  .table-btn{
    font-size:12px;
  }
}


/* Toolbar stays a normal responsive stack */
@media (max-width: 600px) {
  .certificate-toolbar {
    flex-direction: column;
    gap: 10px;
    padding: 12px;
  }

  .certificate-toolbar .primary-btn,
  .certificate-toolbar .secondary-btn {
    width: 100%;
    justify-content: center;
  }
}

/*=========================================
MARKET DASHBOARD STATS — MOBILE SCROLL
Scoped to .admin-header .stats-grid so it
only affects the market-dashboard stat cards
(Total Updates / Published / Drafts / Featured)
and not the public-facing .stats-section
.stats-grid used elsewhere on the site.
=========================================*/

@media (max-width: 768px) {

  .admin-header .stats-grid{

    display:flex !important;

    flex-wrap:nowrap !important;

    overflow-x:auto;

    overflow-y:hidden;

    gap:16px;

    padding-bottom:12px;

    scroll-behavior:smooth;

    -webkit-overflow-scrolling:touch;

    scrollbar-width:none;      /* Firefox */

    -ms-overflow-style:none;   /* IE/Edge */

  }

  .admin-header .stats-grid::-webkit-scrollbar{

    display:none;              /* Chrome, Safari, Opera */

  }

  .admin-header .stats-grid .stat-card{

    flex:0 0 170px !important;

    min-width:170px !important;

    width:auto !important;

  }

}

/*=========================================
MARKET LIST — ICON SIZE REDUCTION (SMALL PHONES)
=========================================*/

@media (max-width: 480px) {

  /* Search button magnifying glass */
  .search-form button {
    padding: 10px 14px;
  }

  .search-form button i {
    font-size: 14px;
  }

  .search-form input {
    padding: 10px 14px;
    font-size: 13px;
  }

  /* Add Update button "+" icon */
  .page-header .btn-primary i {
    font-size: 13px;
  }

  /* Table action icons (view/edit/delete) */
  .action-btn {
    padding: 6px 10px;
    font-size: 13px;
  }

  .action-btn i {
    font-size: 13px;
  }

  /* Placeholder image icon */
  .thumb-placeholder i {
    font-size: 18px;
  }

  /* Sidebar hamburger toggle */
  .mobile-topbar #sidebarToggle i {
    font-size: 18px;
  }

  .mobile-topbar h2 {
    font-size: 16px;
  }
}

@media (max-width: 380px) {

  .search-form button i,
  .action-btn i {
    font-size: 12px;
  }

  .thumb-placeholder i {
    font-size: 16px;
  }
}

/*=========================================
MARKET PREVIEW PAGE — RESPONSIVE
=========================================*/

@media (max-width: 992px) {

  .market-layout {
    grid-template-columns: 1fr;
  }

  .market-sidebar {
    position: relative;
    top: 0;
  }
}

@media (max-width: 768px) {

  .market-preview-page {
    padding: 30px 0;
  }

  .market-article {
    padding: 25px;
    border-radius: 14px;
  }

  .market-category {
    font-size: 12px;
    padding: 6px 14px;
    margin-bottom: 15px;
  }

  .market-title {
    font-size: 1.6rem;
    margin-bottom: 15px;
  }

  .market-meta {
    flex-direction: column;
    gap: 10px;
    margin-bottom: 25px;
  }

  .market-no-image {
    height: 220px;
    font-size: 50px;
    margin-bottom: 25px;
  }

  .market-summary,
  .market-content {
    font-size: .95rem;
  }

  .market-share {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .share-icons {
    width: 100%;
  }

  .author-card {
    flex-direction: column;
    text-align: center;
  }

  .article-navigation {
    flex-direction: column;
  }

  .previous,
  .next {
    text-align: left;
  }
}

@media (max-width: 480px) {

  .back-link {
    font-size: 14px;
    margin-bottom: 18px;
  }

  .market-article {
    padding: 18px;
  }

  .market-title {
    font-size: 1.3rem;
    line-height: 1.35;
  }

  .market-meta {
    font-size: 13px;
    gap: 8px;
  }

  .market-no-image {
    height: 160px;
    font-size: 34px;
    border-radius: 14px;
  }

  .market-no-image p {
    font-size: 13px;
  }

  .market-summary {
    padding: 18px;
  }

  .market-summary h2 {
    font-size: 1.05rem;
  }

  .download-btn {
    width: 100%;
    justify-content: center;
    padding: 13px 20px;
    font-size: 14px;
  }

  .market-share h3 {
    font-size: 15px;
  }

  .share-icons a,
  .copy-link-btn {
    width: 36px;
    height: 36px;
    font-size: 13px;
  }

  .author-card {
    padding: 20px;
  }

  .author-avatar {
    width: 60px;
    height: 60px;
    font-size: 24px;
  }

  .nav-card {
    padding: 18px;
  }

  .sidebar-widget {
    padding: 20px;
  }

  .related-article img {
    width: 75px;
    height: 58px;
  }
}

@media (max-width: 380px) {

  .market-title {
    font-size: 1.15rem;
  }

  .market-no-image {
    height: 130px;
    font-size: 28px;
  }

  .share-icons a,
  .copy-link-btn {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }
}

/*=========================================
ADMIN GRID STATS (e.g. Downloads page) —
MOBILE SCROLL
Same horizontal-scroll pattern used for
.admin-analytics / .dashboard-content
.dashboard-stats / .instructor-stats.
Scoped to .admin-content .admin-grid so it
only affects the stat-card rows rendered
inside the main admin content area (e.g.
Total Resources / Published / Draft / Total
Downloads on admin-downloads.php), not any
unrelated .admin-grid usage elsewhere.
=========================================*/

@media (max-width: 768px) {

  .admin-content .admin-grid {

    display:flex !important;

    flex-wrap:nowrap !important;

    overflow-x:auto;

    overflow-y:hidden;

    gap:16px;

    padding-bottom:12px;

    scroll-behavior:smooth;

    -webkit-overflow-scrolling:touch;

    scrollbar-width:none;      /* Firefox */
    -ms-overflow-style:none;   /* IE/Edge */

  }

  .admin-content .admin-grid::-webkit-scrollbar {
    display:none;              /* Chrome, Safari, Opera */
  }

  .admin-content .admin-grid .admin-card {

    flex:0 0 170px !important;

    min-width:170px !important;

    width:auto !important;

  }

}

/*=========================================
ADMIN GRID STATS — CARD SIZE REDUCTION
(pairs with the .admin-content .admin-grid
scroll-strip rule above; shrinks the card's
own padding/icon/number so it actually fits
the 170px flex width instead of overflowing
it with desktop-sized content)
=========================================*/

@media (max-width: 768px) {

  .admin-content .admin-grid .admin-card {

    flex:0 0 140px !important;

    min-width:140px !important;

    padding:20px 14px;

  }

  .admin-content .admin-grid .admin-card i {

    font-size:26px;

    margin-bottom:10px;

  }

  .admin-content .admin-grid .admin-card h2 {

    font-size:24px;

    margin:8px 0;

  }

  .admin-content .admin-grid .admin-card p {

    font-size:13px;

  }

}

@media (max-width: 380px) {

  .admin-content .admin-grid .admin-card {

    flex:0 0 125px !important;

    min-width:125px !important;

    padding:16px 12px;

  }

  .admin-content .admin-grid .admin-card i {

    font-size:22px;

  }

  .admin-content .admin-grid .admin-card h2 {

    font-size:20px;

  }

  .admin-content .admin-grid .admin-card p {

    font-size:12px;

  }

}

/*=========================================
QUIZ RESULT PAGE (quiz_result.php)
MOBILE FIX
(append to responsive.css — .result-card,
.score-circle, .result-grid, .result-buttons
had no breakpoints at all, so the card was
still rendering at desktop width/padding on
phones and overflowing the viewport)
=========================================*/

@media (max-width: 768px) {

  .result-card {
    padding: 30px 20px;
    text-align: center;
  }

  .result-icon {
    font-size: 50px;
    margin-bottom: 15px;
  }

  .result-card h1 {
    font-size: 26px;
  }

  .result-card p {
    font-size: 15px;
  }

  .score-circle {
    width: 140px;
    height: 140px;
    font-size: 28px;
    margin: 25px auto;
  }

  .result-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 25px 0;
  }

  .result-grid h2 {
    font-size: 20px;
  }

  .result-grid p {
    font-size: 12px;
  }

  .result-buttons {
    flex-direction: column;
    gap: 12px;
  }

  .result-buttons a {
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 480px) {

  .result-card {
    padding: 25px 16px;
    border-radius: 14px;
  }

  .result-icon {
    font-size: 42px;
  }

  .result-card h1 {
    font-size: 22px;
  }

  .result-card p {
    font-size: 14px;
  }

  .score-circle {
    width: 110px;
    height: 110px;
    font-size: 22px;
    margin: 20px auto;
  }

  .result-grid {
    gap: 8px;
  }

  .result-grid h2 {
    font-size: 17px;
  }

  .result-grid p {
    font-size: 11px;
  }

  .result-buttons a {
    padding: 12px;
    font-size: 14px;
  }
}

@media (max-width: 380px) {

  .score-circle {
    width: 95px;
    height: 95px;
    font-size: 19px;
  }

  .result-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .result-grid h2 {
    font-size: 15px;
  }
}