/* =========================
about/about.css
MikrodTech About Page (Final Clean Version)
Brand Colors: #0072ce / white / black
========================= */

/* =========================
ACTIVE NAV
========================= */
.nav-list a.active{
  color:#0072ce;
  font-weight:700;
}


/* =========================
ROOT
========================= */
:root{
  --primary:#0072ce;
  --black:#000000;
  --white:#ffffff;
  --text:#222222;
  --muted:#555555;
  --light:#f5f7fa;
  --border:#e5e7eb;
}

/* =========================
BASE
========================= */
body{
  background:#ffffff;
  color:#000000;
  font-family:Arial, Helvetica, sans-serif;
}
/* =========================
ABOUT HERO (MATCHED STYLE)
========================= */
.about-hero{
  background: #eef6ff; /* soft blue tint */
  text-align:center;
  padding:100px 20px 80px;
}

/* Small label (same tone as tagline) */
.small-title{
  font-size:.85rem;
  letter-spacing:3px;
  margin-bottom:14px;
  color:#4b5563;
  text-transform:uppercase;
}

/* Main heading */
.about-hero h1{
  font-size: 3rem;
  font-weight:500;
  line-height:1.15;
  margin-bottom:16px;
  color:var(--primary);
}

/* Description text */
.hero-text{
  max-width:760px;
  margin:auto;
  font-size:1.2rem;
  line-height:1.7;
  color:#374151;
}

/* CTA button (unchanged but slightly refined) */
.main-btn{
  display:inline-block;
  margin-top:26px;
  padding:14px 28px;
  background:var(--primary);
  color:#ffffff;
  border-radius:50px;
  font-weight:700;
  transition:.3s ease;
}

.main-btn:hover{
  background:#ffffff;
  color:#000000;
  transform:translateY(-3px);
}
/* =========================
SECTIONS
========================= */
.about-section,
.values-section,
.leader-section,
.cta-section{
  padding:85px 0;
}

.section-tag{
  color:#0072ce;
  font-size:1 rem;
  font-weight:700;
  letter-spacing:2px;
  margin-bottom:14px;
}

.center{
  text-align:center;
}

h2{
  font-size: 2rem;
  margin-bottom:20px;
  color:#000000;
  font-weight: 500;
}

p{
  color:#444444;
  line-height:1.85;
  font-size:1.3rem;
}

/* =========================
LAYOUT GRID
========================= */
.two-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:32px;
  align-items:start;
}

.cards-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-top:42px;
}

/* =========================
CARDS
========================= */
.info-card,
.mini-card{
  background:#ffffff;
  border:1px solid var(--border);
  border-radius:18px;
  padding:30px;
  box-shadow:0 12px 28px rgba(0,0,0,.06);
}

.info-card h3,
.mini-card h3{
  margin-bottom:14px;
  color:#0072ce;
}

/* =========================
VALUES SECTION
========================= */
.values-section{
  background:#f8fafc;
}

/* =========================
LEADERSHIP
========================= */
.narrow{
  max-width:850px;
  margin:auto;
  text-align:center;
}

/* =========================
FOUNDER SECTION
========================= */
.founder-section{
  padding:90px 0;
  background:#ffffff;
}

.founder-grid{
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:40px;
  align-items:center;
}

.founder-image img{
  width:100%;
  max-width:360px;
  border-radius:18px;
  box-shadow:0 15px 35px rgba(0,0,0,.12);
  border:2px solid #0072ce;
}

.signature{
  margin-top:20px;
  font-weight:700;
  color:#0072ce;
}

/* =========================
CTA SECTION
========================= */
.cta-section{
  background:#000000;
  color:#ffffff;
  text-align:center;
}

.cta-section h2{
 color: #0072ce;

}
.cta-section p{
  color:#000000;
}

.cta-section .main-btn{
  background:#0072ce;
  color:#ffffff;
}

/* =========================
RESPONSIVE
========================= */
@media (max-width:980px){

  .about-hero{
    padding:90px 20px 70px;
  }

  .two-grid,
  .cards-grid{
    grid-template-columns:1fr;
  }

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

  .founder-image img{
    margin:auto;
  }

  .about-section,
  .values-section,
  .leader-section,
  .cta-section,
  .founder-section{
    padding:70px 0;
  }
}

@media (max-width:640px){

  .main-btn{
    width:100%;
    max-width:300px;
  }

  .small-title,
  .section-tag{
    letter-spacing:1px;
  }

  .info-card,
  .mini-card{
    padding:24px;
  }
}

/* =========================
MOBILE TIGHTENING (OPTIMIZED)
========================= */
@media (max-width:640px){

  /* Reduce overall section spacing */
  .about-section,
  .values-section,
  .leader-section,
  .cta-section,
  .founder-section{
    padding:55px 16px;
  }

  /* HERO compact */
  .about-hero{
    padding:75px 16px 60px;
  }

  .about-hero h1{
    font-size:1.5rem;
  }

  .hero-text{
    font-size:1rem;
    line-height:1.6;
  }

  /* Paragraphs smaller (very important) */
  p{
    font-size:1rem;
    line-height:1.7;
  }

  /* Section headings smaller */
  h2{
    font-size:1.3rem;
    margin-bottom:14px;
  }

  /* Cards tighter */
  .info-card,
  .mini-card{
    padding:18px;
    border-radius:14px;
  }

  .info-card h3,
  .mini-card h3{
    font-size:1rem;
  }

  /* Grid spacing tighter */
  .cards-grid{
    gap:14px;
    margin-top:28px;
  }

  .two-grid{
    gap:18px;
  }

  /* Founder image smaller feel */
  .founder-image img{
    max-width:240px;
    border-radius:14px;
  }

  /* Buttons smaller but still clickable */
  .main-btn{
    padding:11px 20px;
    font-size:.95rem;
    max-width:260px;
  }

  /* Letter spacing fix */
  .small-title,
  .section-tag{
    font-size:.75rem;
    letter-spacing:1.5px;
  }
}

/* ==========================================
   FINAL ABOUT PAGE MOBILE OPTIMIZATION
   (Extra compact + refined mobile feel)
========================================== */

@media (max-width:480px){

  /* GLOBAL SCALE */
  body{
    font-size:14px;
  }

  /* HERO */
  .about-hero{
    padding:65px 14px 50px;
  }

  .about-hero h1{
    font-size:1.2rem;
    line-height:1.2;
  }

  .hero-text{
    font-size:0.8rem;
    line-height:1.5;
  }

  .small-title{
    font-size:0.9rem;
    letter-spacing:1px;
  }

  /* SECTIONS */
  .about-section,
  .values-section,
  .leader-section,
  .cta-section,
  .founder-section{
    padding:45px 14px;
  }

  /* HEADINGS */
  h2{
    font-size:1rem;
    margin-bottom:12px;
  }

  /* PARAGRAPHS */
  p{
    font-size:0.8rem;
    line-height:1.6;
  }

  /* CARDS */
  .info-card,
  .mini-card{
    padding:16px;
    border-radius:12px;
  }

  .info-card h3,
  .mini-card h3{
    font-size:1.05rem;
  }

  /* GRID SPACING */
  .cards-grid{
    gap:12px;
    margin-top:24px;
  }

  .two-grid{
    gap:14px;
  }

  /* FOUNDER IMAGE */
  .founder-image img{
    max-width:200px;
    border-radius:12px;
  }

  /* BUTTON */
  .main-btn{
    padding:10px 18px;
    font-size:0.65rem;
    max-width:240px;
  }

  /* TAGS */
  .section-tag{
    font-size:0.9rem;
    letter-spacing:1px;
  }
}

/* ==========================================
   CTA SECTION MOBILE PROPORTIONAL FIX
========================================== */

@media (max-width:768px){

  .cta-section{
    padding:55px 16px !important; /* reduce vertical space */
  }

  .cta-section h2{
    font-size:1rem !important;
    line-height:1.3;
    margin-bottom:12px;
  }

  .cta-section p{
    font-size:1rem !important;
    line-height:1.1;
    max-width:95%;
    margin:0 auto 18px auto;
  }

  .cta-section .main-btn{
    padding:10px 18px;
    font-size:0.65rem;
    max-width:240px;
    border-radius:40px;
    margin-top:14px;
  }
}

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

  .cta-section{
    padding:45px 14px !important;
  }

  .cta-section h2{
    font-size:1rem !important;
  }

  .cta-section p{
    font-size: 0.8rem !important;
    color: #000;
  }

  .cta-section .main-btn{
    width:100%;
    max-width:220px;
    padding:9px 16px;
  }
}

/* ==========================================
   CTA SECTION STYLING
========================================== */

.cta-section{
  background:#fff;
  color: #000000;
}

.cta-section .main-btn{
  padding:10px 22px;
  font-size:0.65rem;
}

/* ==========================================
   MOBILE HEADER SPACING FIX
========================================== */
@media (max-width:768px){

  .services-hero,
  .service-page-hero{
    padding-top:100px !important;
  }

}

@media (max-width: 420px){


 .nav-list a{
    font-size: 0.9rem;
    font-weight: 350;
  }

}