/*
  ============================================================
  IT Services Website - Main Stylesheet (style.css)
  Web Engineering 1 - Final Project
  Ilma University, Karachi
  
  TABLE OF CONTENTS:
    1. CSS Variables (color palette & fonts)
    2. Reset & Base Styles
    3. Navigation Bar
    4. Hero Section
    5. Stats Strip
    6. Cards Grid (Services Preview)
    7. Why Choose Us
    8. CTA Banner
    9. Footer
    10. Page Banner (inner pages)
    11. Services Page (Full Grid + Pricing)
    12. About Page
    13. Contact Page (Form + FAQ)
    14. Utility Classes
    15. Responsive (Mobile) Styles
  ============================================================
*/


/* ==============================================================
   1. CSS VARIABLES
   We define our color palette and font here so it's easy to
   change the look of the whole site in one place.
   ============================================================== */
:root {
  --primary:   #0A74DA;   /* Main blue — buttons, accents */
  --primary-dark: #085bb0;/* Darker blue for hover states  */
  --accent:    #F4A300;   /* Orange accent for highlights  */
  --dark:      #1A1A2E;   /* Dark navy for text & bg       */
  --mid:       #2D3250;   /* Mid navy for sections         */
  --light:     #F0F4FF;   /* Light blue-ish for alt-bg     */
  --white:     #FFFFFF;
  --text:      #333344;   /* Main body text color          */
  --text-muted:#666680;   /* Muted/secondary text          */
  --border:    #D8E0F0;   /* Light border color            */
  --success:   #27AE60;   /* Green for success messages    */

  --font-head: 'Georgia', serif;          /* Headings      */
  --font-body: 'Trebuchet MS', sans-serif;/* Body text     */

  --radius:    10px;      /* Border radius for cards/boxes */
  --shadow:    0 4px 20px rgba(10,116,218,0.10); /* Card shadow */
  --transition: 0.25s ease; /* Standard hover transition  */
}


/* ==============================================================
   2. RESET & BASE STYLES
   Remove default browser styles and set base defaults.
   ============================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth; /* Smooth scrolling when using anchor links */
}

body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--white);
  line-height: 1.7;
  font-size: 16px;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--dark);
  line-height: 1.3;
}

a {
  text-decoration: none;
  color: var(--primary);
}

ul { list-style: none; }

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


/* ==============================================================
   3. NAVIGATION BAR
   Sticky bar at the top. Contains logo, links, and a hamburger
   button for mobile screens.
   ============================================================== */
.navbar {
  position: sticky;        /* Stays at top when scrolling   */
  top: 0;
  z-index: 1000;
  background: var(--dark);
  box-shadow: 0 2px 15px rgba(0,0,0,0.3);
}

.nav-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 65px;
}

/* Logo/brand text in navbar */
.nav-brand {
  font-family: var(--font-head);
  font-size: 1.4rem;
  color: var(--white);
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.brand-icon { color: var(--accent); }

/* Navigation links list */
.nav-links {
  display: flex;
  gap: 2rem;
}

.nav-links a {
  color: #ccd6f6;
  font-size: 0.95rem;
  padding: 0.3rem 0;
  border-bottom: 2px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}

/* Hover + active state for nav links */
.nav-links a:hover,
.nav-links a.active {
  color: var(--white);
  border-bottom-color: var(--accent);
}

/* Hamburger button (hidden on desktop, shown on mobile) */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
}

.hamburger span {
  display: block;
  width: 25px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: var(--transition);
}


/* ==============================================================
   4. HERO SECTION
   The big banner on the homepage. Uses flexbox to place text
   on the left and a graphic on the right.
   ============================================================== */
.hero {
  background: linear-gradient(135deg, var(--dark) 0%, var(--mid) 100%);
  color: var(--white);
  min-height: 88vh;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 4rem max(1.5rem, calc((100% - 1100px) / 2));
  gap: 3rem;
}

.hero-content { flex: 1; }

.hero-eyebrow {
  color: var(--accent);
  font-size: 0.9rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.hero-title {
  font-size: clamp(2.2rem, 5vw, 3.8rem); /* Responsive font size */
  color: var(--white);
  margin-bottom: 1.2rem;
}

.highlight { color: var(--accent); }

.hero-sub {
  font-size: 1.1rem;
  color: #aab8d8;
  max-width: 480px;
  margin-bottom: 2rem;
}

/* Hero buttons side by side */
.hero-btns {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Hero graphic: three concentric animated circles */
.hero-graphic {
  flex: 0 0 auto;
  position: relative;
  width: 280px;
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.circle-ring {
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(244,163,0,0.3);
  animation: pulse 3s ease-in-out infinite;
}

.ring-1 { width: 100%; height: 100%; animation-delay: 0s;   }
.ring-2 { width: 75%;  height: 75%;  animation-delay: 0.5s; }
.ring-3 { width: 50%;  height: 50%;  animation-delay: 1s;   border-color: rgba(244,163,0,0.6); }

/* The pulse animation makes the rings grow and fade */
@keyframes pulse {
  0%, 100% { transform: scale(1);    opacity: 0.6; }
  50%       { transform: scale(1.05); opacity: 1;   }
}

.hero-icon {
  font-size: 4rem;
  position: relative;
  z-index: 2;
}


/* ==============================================================
   5. STATS STRIP
   Dark strip with four numbers. Full-width, no max-width.
   ============================================================== */
.stats-strip {
  background: var(--primary);
  padding: 2.5rem 1.5rem;
}

.stats-container {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  text-align: center;
}

.stat-item { color: var(--white); }

.stat-number {
  display: block;
  font-family: var(--font-head);
  font-size: 2.2rem;
  font-weight: bold;
}

.stat-label {
  font-size: 0.9rem;
  opacity: 0.85;
}


/* ==============================================================
   6. SECTION (Generic) + CARDS GRID
   Reusable section padding and 3-column card layout.
   ============================================================== */
.section {
  padding: 5rem 1.5rem;
}

.alt-bg {
  background: var(--light); /* Light blue background for alternating sections */
}

.container {
  max-width: 1100px;
  margin: 0 auto;
}

/* Section headings (centered by default) */
.section-title {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  text-align: center;
}

.section-title.left { text-align: left; }

.section-sub {
  text-align: center;
  color: var(--text-muted);
  margin-bottom: 3rem;
}

/* 3-column grid for homepage service preview cards */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.8rem;
  margin-bottom: 2.5rem;
}

/* Individual card styles */
.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem 1.5rem;
  text-align: center;
  box-shadow: var(--shadow);
  transition: transform var(--transition), box-shadow var(--transition);
}

/* Card lifts up when you hover over it */
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 30px rgba(10,116,218,0.15);
}

.card-icon { font-size: 2.5rem; margin-bottom: 1rem; }

.card h3 {
  margin-bottom: 0.8rem;
  font-size: 1.2rem;
}

.card p { color: var(--text-muted); font-size: 0.95rem; margin-bottom: 1rem; }

.card-link {
  color: var(--primary);
  font-weight: 600;
  font-size: 0.9rem;
}

.center-btn { text-align: center; margin-top: 1rem; }


/* ==============================================================
   7. WHY CHOOSE US SECTION
   Two-column layout with benefit list on the left.
   ============================================================== */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.benefit-list { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }

.benefit-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.benefit-icon {
  color: var(--primary);
  font-size: 1.3rem;
  font-weight: bold;
  flex-shrink: 0;
  margin-top: 2px;
}

.benefit-item strong { display: block; margin-bottom: 0.2rem; }
.benefit-item p { margin: 0; color: var(--text-muted); font-size: 0.92rem; }

/* Decorative box on the right side of Why Us */
.why-graphic { display: flex; justify-content: center; }

.graphic-box {
  background: var(--dark);
  color: var(--white);
  border-radius: var(--radius);
  padding: 3rem 2rem;
  text-align: center;
  width: 100%;
  max-width: 320px;
}

.graphic-big  { font-size: 4rem; margin-bottom: 1rem; }
.graphic-text { font-size: 1.1rem; line-height: 1.6; color: #aab8d8; }


/* ==============================================================
   8. CTA BANNER
   Full-width dark banner with centered text and a button.
   ============================================================== */
.cta-banner {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: var(--white);
  text-align: center;
  padding: 4rem 1.5rem;
}

.cta-banner h2 { color: var(--white); font-size: 2rem; margin-bottom: 0.5rem; }
.cta-banner p  { color: rgba(255,255,255,0.85); margin-bottom: 1.5rem; }


/* ==============================================================
   9. FOOTER
   Dark footer with 3-column grid and a bottom copyright strip.
   ============================================================== */
.footer {
  background: var(--dark);
  color: #aab8d8;
  padding: 3rem 1.5rem 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1.5fr;
  gap: 2rem;
  padding-bottom: 2rem;
}

.footer-brand { color: var(--white); font-size: 1.2rem; margin-bottom: 0.5rem; }
.footer h4    { color: var(--white); margin-bottom: 1rem; }

.footer-links li { margin-bottom: 0.5rem; }
.footer-links a  { color: #aab8d8; transition: color var(--transition); }
.footer-links a:hover { color: var(--accent); }

.footer p { font-size: 0.9rem; margin-bottom: 0.4rem; }

/* Copyright strip at the very bottom */
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  text-align: center;
  padding: 1.2rem 0;
  font-size: 0.85rem;
}


/* ==============================================================
   10. PAGE BANNER (inner pages: Services, About, Contact)
   A short banner replacing the hero for non-home pages.
   ============================================================== */
.page-banner {
  background: linear-gradient(135deg, var(--dark), var(--mid));
  color: var(--white);
  text-align: center;
  padding: 4.5rem 1.5rem;
}

.page-banner h1 { color: var(--white); font-size: 2.5rem; margin-bottom: 0.5rem; }
.page-banner p  { color: #aab8d8; font-size: 1.1rem; }


/* ==============================================================
   11. SERVICES PAGE
   ============================================================== */

/* Services grid — same as cards grid but with different card style */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.8rem;
  margin-bottom: 2rem;
}

.service-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem 1.5rem;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  transition: transform var(--transition);
}

.service-card:hover { transform: translateY(-5px); }

.service-icon-wrap {
  width: 60px;
  height: 60px;
  background: var(--light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
}

.service-icon { font-size: 1.8rem; }

.service-card h3 { font-size: 1.15rem; }
.service-card p  { color: var(--text-muted); font-size: 0.92rem; flex: 1; }

/* Feature list inside each service card */
.service-features {
  list-style: none;
  padding: 0;
}

.service-features li {
  font-size: 0.88rem;
  color: var(--text-muted);
  padding: 0.25rem 0;
  border-bottom: 1px solid var(--border);
}

.service-features li::before { content: "✓ "; color: var(--primary); font-weight: bold; }

/* Price display in service card */
.service-price {
  background: var(--light);
  border-radius: 6px;
  padding: 0.7rem 1rem;
  display: flex;
  flex-direction: column;
}

.price-label  { font-size: 0.78rem; color: var(--text-muted); }
.price-amount { font-size: 1.1rem; font-weight: bold; color: var(--primary); }

/* Pricing table (3 plan cards) */
.pricing-section { background: var(--light); }

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.8rem;
  margin-top: 2rem;
}

.pricing-card {
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem 1.5rem;
  text-align: center;
  position: relative;
  transition: transform var(--transition);
}

/* The popular plan gets an accent border */
.pricing-card.popular {
  border-color: var(--primary);
  transform: scale(1.03);
  box-shadow: 0 8px 30px rgba(10,116,218,0.2);
}

.popular-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary);
  color: var(--white);
  font-size: 0.78rem;
  padding: 0.3rem 1rem;
  border-radius: 20px;
  font-weight: bold;
  white-space: nowrap;
}

.pricing-card h3    { font-size: 1.4rem; margin-bottom: 0.3rem; }
.plan-tagline       { color: var(--text-muted); font-size: 0.88rem; margin-bottom: 1rem; }

.plan-price {
  font-size: 1.8rem;
  font-weight: bold;
  color: var(--primary);
  margin-bottom: 1.2rem;
}

.plan-price span { font-size: 1rem; color: var(--text-muted); font-weight: normal; }

.plan-features {
  text-align: left;
  margin-bottom: 1.5rem;
}

.plan-features li {
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
}

.plan-features li.disabled { color: var(--text-muted); text-decoration: line-through; }


/* ==============================================================
   12. ABOUT PAGE
   ============================================================== */

/* Stats box on the right side of "Our Story" */
.about-stat-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.about-stat {
  background: var(--dark);
  color: var(--white);
  border-radius: var(--radius);
  padding: 1.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.big-num { font-size: 2rem; font-weight: bold; color: var(--accent); }

/* Mission & Vision cards */
.mv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 2rem;
}

.mv-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem;
  text-align: center;
  box-shadow: var(--shadow);
}

.mv-icon  { font-size: 2.5rem; margin-bottom: 1rem; }
.mv-card h3 { margin-bottom: 0.8rem; }
.mv-card p  { color: var(--text-muted); }

/* Values grid — 4 items in one row */
.values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}

.value-item {
  text-align: center;
  padding: 1.5rem 1rem;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.value-icon { font-size: 2rem; display: block; margin-bottom: 0.8rem; }
.value-item h4 { margin-bottom: 0.4rem; }
.value-item p  { color: var(--text-muted); font-size: 0.9rem; }

/* ---- Team section ---- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 2rem;
}

.team-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem 1.5rem;
  text-align: center;
  box-shadow: var(--shadow);
  transition: transform var(--transition);
}

.team-card:hover { transform: translateY(-5px); }

/* Circular avatar with initials */
.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--white);
  font-size: 1.6rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.2rem;
}

.team-card h3     { font-size: 1.2rem; margin-bottom: 0.4rem; }
.student-id       { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 0.4rem; }
.member-role      { color: var(--primary); font-size: 0.88rem; font-weight: 600; margin-bottom: 0.6rem; }
.member-desc      { color: var(--text-muted); font-size: 0.88rem; }

/* University info box */
.university-box {
  text-align: center;
  background: var(--dark);
  color: var(--white);
  border-radius: var(--radius);
  padding: 1.2rem 2rem;
  margin-top: 2rem;
  font-size: 0.95rem;
}


/* ==============================================================
   13. CONTACT PAGE
   ============================================================== */

/* Three info cards (Address, Phone, Email) */
.contact-info-section { padding-bottom: 2rem; }

.contact-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.contact-info-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem;
  text-align: center;
  box-shadow: var(--shadow);
}

.ci-icon  { font-size: 2rem; margin-bottom: 0.8rem; }
.ci-icon  { display: block; }
.contact-info-card h4 { margin-bottom: 0.5rem; }
.contact-info-card p  { color: var(--text-muted); font-size: 0.9rem; }

/* Contact form + map layout */
.contact-layout { align-items: flex-start; }

/* Form styling */
.contact-form { display: flex; flex-direction: column; gap: 1.2rem; margin-top: 1.5rem; }

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.form-group label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--dark);
}

.required { color: #e74c3c; }
.optional  { color: var(--text-muted); font-size: 0.8rem; font-weight: normal; }

/* Input, select, textarea shared styles */
.form-group input,
.form-group select,
.form-group textarea {
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--text);
  background: var(--white);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}

/* Blue highlight border when user clicks on a field */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(10,116,218,0.12);
}

.error-msg { color: #e74c3c; font-size: 0.82rem; min-height: 1rem; }

.full-width { width: 100%; }

/* Success message box */
.success-msg {
  background: #eafaf1;
  border: 1.5px solid var(--success);
  color: #1a7340;
  border-radius: var(--radius);
  padding: 1.2rem 1.5rem;
  margin-top: 1.5rem;
  font-size: 0.95rem;
  text-align: center;
}

/* Map placeholder box */
.map-side { display: flex; flex-direction: column; gap: 1.5rem; }

.map-placeholder {
  background: var(--dark);
  color: var(--white);
  border-radius: var(--radius);
  padding: 2rem;
  text-align: center;
}

.map-icon  { font-size: 3rem; display: block; margin-bottom: 0.8rem; }
.map-placeholder h4 { color: var(--accent); margin-bottom: 0.5rem; font-size: 1.2rem; }
.map-placeholder p  { font-size: 0.9rem; color: #aab8d8; margin-bottom: 0.3rem; }
.map-note  { margin-top: 1rem !important; line-height: 1.8; }

/* FAQ accordion */
.quick-faq h4 { margin-bottom: 1rem; }

.faq-item { border-bottom: 1px solid var(--border); }

.faq-q {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 0.9rem 0;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--dark);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.faq-q:hover { color: var(--primary); }

.faq-q span {
  font-size: 1.2rem;
  transition: transform var(--transition);
}

.faq-a {
  display: none; /* Hidden by default; JS toggles to block */
  padding: 0 0 1rem;
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.6;
}


/* ==============================================================
   14. UTILITY CLASSES (Buttons, etc.)
   ============================================================== */

/* Primary button: solid blue */
.btn {
  display: inline-block;
  padding: 0.75rem 1.8rem;
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition);
  border: 2px solid transparent;
  text-align: center;
}

.btn:hover { transform: translateY(-2px); }

.btn-primary {
  background: var(--primary);
  color: var(--white);
  border-color: var(--primary);
}

.btn-primary:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
}

.btn-outline {
  background: transparent;
  color: var(--primary);
  border-color: var(--primary);
}

.btn-outline:hover {
  background: var(--primary);
  color: var(--white);
}

/* White button (used inside dark/colored banners) */
.btn-white {
  background: var(--white);
  color: var(--primary);
  border-color: var(--white);
}

.btn-white:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--white);
}


/* ==============================================================
   15. RESPONSIVE STYLES (Mobile & Tablet)
   'max-width: 768px' = tablet and below
   'max-width: 480px' = phone only
   ============================================================== */
@media (max-width: 768px) {

  /* Navbar: show hamburger, hide links by default */
  .hamburger { display: flex; }

  .nav-links {
    display: none;             /* Hidden until JS adds 'open' class */
    flex-direction: column;
    position: absolute;
    top: 65px;
    left: 0;
    right: 0;
    background: var(--dark);
    padding: 1.5rem;
    gap: 1.2rem;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  }

  .nav-links a {
    display: inline-block;
    padding: 0.55rem 0;
  }

  /* When JS adds .open to #navLinks, the menu slides down */
  .nav-links.open { display: flex; }

  /* Stack hero vertically on mobile */
  .hero {
    flex-direction: column;
    text-align: center;
    min-height: auto;
    padding: 3rem 1.5rem;
  }

  .hero-sub { margin: 0 auto 2rem; }
  .hero-btns { justify-content: center; }
  .hero-graphic { width: 180px; height: 180px; }

  .hero-btns .btn {
    width: 100%;
    max-width: 280px;
  }

  /* Stats: 2 columns on mobile */
  .stats-container { grid-template-columns: repeat(2, 1fr); }

  /* Single column for card grids */
  .cards-grid,
  .services-grid,
  .pricing-grid,
  .team-grid,
  .contact-info-grid,
  .footer-grid { grid-template-columns: 1fr; }

  /* Stack two-column layouts */
  .two-col { grid-template-columns: 1fr; }

  /* Values: 2 columns on mobile */
  .values-grid { grid-template-columns: repeat(2, 1fr); }

  /* Mission/Vision: stack */
  .mv-grid { grid-template-columns: 1fr; }

  /* Stats box: 2 columns */
  .about-stat-box { grid-template-columns: 1fr 1fr; }

  /* Pricing: no scale on popular card (it's already 1-col) */
  .pricing-card.popular { transform: scale(1); }

  .section-title { font-size: 1.6rem; }

  .page-banner h1 { font-size: 1.8rem; }
}

@media (max-width: 480px) {
  .stats-container { grid-template-columns: repeat(2, 1fr); }
  .values-grid     { grid-template-columns: 1fr; }
  .about-stat-box  { grid-template-columns: 1fr; }
  .hero-title      { font-size: 2rem; }
  .section         { padding: 4rem 1.2rem; }
  .cta-banner,
  .page-banner     { padding-left: 1.2rem; padding-right: 1.2rem; }
}