/**
 * About Page Styles
 * Custom styles for About page template
 *
 * @package WEB99
 * @version 1.0.0
 */

   /* ─── HERO / PAGE HEADER ─── */
   .page-template-about .page-hero {
     position: relative;
     padding: 7rem 0 5rem;
     text-align: center;
     overflow: hidden;
     background: linear-gradient(170deg, var(--light-blue) 0%, #ffffff 55%);
   }
   .page-template-about .page-hero .glow-orb {
     position: absolute;
     border-radius: 50%;
     filter: blur(100px);
     pointer-events: none;
   }
   .page-template-about .page-hero .orb-1 {
     width: 500px; height: 500px;
     background: rgba(20,152,214,0.18);
     top: -200px; left: 50%; translate: -50% 0;
   }
   .page-template-about .page-hero .orb-2 {
     width: 320px; height: 320px;
     background: rgba(241,129,28,0.12);
     bottom: -100px; right: 8%;
   }
   .page-template-about .page-hero .badge-label {
     display: inline-block;
     font-size: .78rem;
     font-weight: 700;
     letter-spacing: 2.5px;
     text-transform: uppercase;
     color: var(--clr-accent);
     background: var(--clr-accent-dim);
     border: 1px solid rgba(20,152,214,0.22);
     padding: .35rem 1.1rem;
     border-radius: 50px;
     margin-bottom: 1.4rem;
     animation: fadeDown .7s .1s both;
   }
   .page-template-about .page-hero h1 {
     font-weight: 800;
     font-size: clamp(2.6rem, 6vw, 4.2rem);
     color: var(--clr-heading);
     letter-spacing: -2px;
     line-height: 1.5;
     animation: fadeDown .7s .25s both;
   }
   .page-template-about .page-hero h1 .accent { color: var(--clr-accent); }
   .page-template-about .page-hero p {
     max-width: 560px; margin: 1.6rem auto 0;
     color: var(--clr-text-dim);
     font-size: 1.05rem;
     font-weight: 400;
     animation: fadeDown .7s .4s both;
   }

   @keyframes fadeDown {
     from { opacity: 0; transform: translateY(28px); }
     to   { opacity: 1; transform: translateY(0); }
   }

   /* ─── SECTION COMMONS ─── */
   .page-template-about .section {
     padding: 6rem 0;
     position: relative;
   }
   .page-template-about .section + .section {
     margin-top: 2rem;
   }
   .page-template-about .section-label {
     font-size: .75rem;
     font-weight: 700;
     letter-spacing: 3px;
     text-transform: uppercase;
     color: var(--clr-accent);
     margin-bottom: .6rem;
   }
   .page-template-about .section-title {
     font-weight: 700;
     font-size: clamp(1.8rem, 3.5vw, 2.6rem);
     color: var(--clr-heading);
     letter-spacing: -1px;
     line-height: 1.2;
   }
   .page-template-about .section-sub {
     color: var(--clr-text-dim);
     font-weight: 400;
     font-size: .97rem;
     max-width: 540px;
     margin-top: .8rem;
   }

   /* ─── VISION & MISSION ─── */
   .page-template-about .vm-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 1.5rem;
     margin-top: 2.8rem;
   }
   @media (max-width: 767px) { .page-template-about .vm-grid { grid-template-columns: 1fr; } }

   .page-template-about .vm-card {
     background: #ffffff;
     border: 1px solid var(--clr-border);
     border-radius: 20px;
     padding: 2.4rem 2rem;
     position: relative;
     overflow: hidden;
     transition: border-color .4s, transform .4s, box-shadow .4s;
     box-shadow: 0 2px 12px rgba(21,101,192,0.05);
   }
   .page-template-about .vm-card:hover {
     border-color: var(--clr-accent);
     transform: translateY(-4px);
     box-shadow: 0 8px 28px rgba(20,152,214,0.12);
   }
   .page-template-about .vm-card .card-glow {
     position: absolute;
     width: 200px; height: 200px;
     border-radius: 50%;
     filter: blur(60px);
     opacity: .15;
     pointer-events: none;
     top: -60px; right: -60px;
   }
   .page-template-about .vm-card.vision .card-glow  { background: var(--clr-accent); }
   .page-template-about .vm-card.mission .card-glow { background: var(--clr-accent2); }

   .page-template-about .vm-card .icon-wrap {
     width: 52px; height: 52px;
     border-radius: 14px;
     display: flex; align-items: center; justify-content: center;
     font-size: 1.3rem;
     margin-bottom: 1.4rem;
   }
   .page-template-about .vm-card.vision .icon-wrap  { background: rgba(20,152,214,0.1);  color: var(--clr-accent); }
   .page-template-about .vm-card.mission .icon-wrap { background: rgba(241,129,28,0.1);  color: var(--clr-accent2); }

   .page-template-about .vm-card h3 {
     font-weight: 700;
     font-size: 1.25rem;
     color: var(--clr-heading);
     margin-bottom: .7rem;
   }
   .page-template-about .vm-card p { color: var(--clr-text-dim); font-size: .93rem; }

   /* ─── CORE VALUES ─── */
   .page-template-about .values-bg {
     background: var(--clr-surface);
     padding: 6rem 0;
     margin-top: 4rem;
     border-top: 1px solid rgba(0,0,0,0.05);
   }
   .page-template-about .values-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 1.5rem;
     margin-top: 3rem;
   }
   @media (max-width: 991px) { .page-template-about .values-grid { grid-template-columns: repeat(2, 1fr); } }
   @media (max-width: 575px) { .page-template-about .values-grid { grid-template-columns: 1fr; } }

   .page-template-about .value-card {
     background: #ffffff;
     border: 1px solid var(--clr-border);
     border-radius: 18px;
     padding: 2.5rem 1.8rem;
     text-align: center;
     transition: border-color .4s, transform .35s, box-shadow .4s;
     box-shadow: 0 2px 10px rgba(21,101,192,0.04);
   }
   .page-template-about .value-card:hover {
     border-color: var(--clr-accent);
     transform: translateY(-5px);
     box-shadow: 0 8px 24px rgba(20,152,214,0.1);
   }
   .page-template-about .value-card .v-num {
     font-weight: 800;
     font-size: 2.8rem;
     background: linear-gradient(135deg, var(--clr-accent), var(--clr-accent2));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     line-height: 1;
     margin-bottom: 1rem;
     display: block;
   }
   .page-template-about .value-card h4 {
     font-weight: 700;
     font-size: 1.05rem;
     color: var(--clr-heading);
     margin-bottom: .7rem;
   }
   .page-template-about .value-card p { color: var(--clr-text-dim); font-size: .85rem; line-height: 1.6; }

   /* ─── STATS STRIP ─── */
   .page-template-about .stats-strip {
     background: linear-gradient(135deg, var(--dark-blue), #1a7abf);
     padding: 3.5rem 0;
   }
   .page-template-about .stat-item { text-align: center; }
   .page-template-about .stat-item .stat-number {
     font-weight: 800;
     font-size: clamp(2rem, 4vw, 3rem);
     color: #ffffff;
     letter-spacing: -1.5px;
   }
   .page-template-about .stat-item .stat-number span { color: var(--primary-orange); }
   .page-template-about .stat-item .stat-label {
     color: rgba(255,255,255,0.72);
     font-size: .82rem;
     font-weight: 600;
     letter-spacing: 1px;
     text-transform: uppercase;
     margin-top: .3rem;
   }

   /* ─── TEAM ─── */
   .page-template-about .team-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 1.4rem;
     margin-top: 3rem;
   }
   @media (max-width: 991px) { .page-template-about .team-grid { grid-template-columns: repeat(2, 1fr); } }
   @media (max-width: 575px) { .page-template-about .team-grid { grid-template-columns: 1fr; } }

   .page-template-about .team-card {
     background: #ffffff;
     border: 1px solid var(--clr-border);
     border-radius: 20px;
     overflow: hidden;
     transition: border-color .4s, transform .35s, box-shadow .4s;
     box-shadow: 0 2px 10px rgba(21,101,192,0.05);
   }
   .page-template-about .team-card:hover {
     border-color: var(--clr-accent);
     transform: translateY(-5px);
     box-shadow: 0 8px 24px rgba(20,152,214,0.12);
   }
   .page-template-about .team-card .avatar-area {
     height: 200px;
     position: relative;
     display: flex; align-items: center; justify-content: center;
     background: linear-gradient(145deg, var(--light-blue), #d4eef7);
     overflow: hidden;
   }
   .page-template-about .team-card .avatar-area::before {
     content: '';
     position: absolute; inset: 0;
     background: radial-gradient(circle at 50% 80%, rgba(20,152,214,0.1), transparent 70%);
   }
   .page-template-about .team-card .avatar-circle {
     width: 130px; height: 130px;
     border-radius: 50%;
     border: 3px solid rgba(20,152,214,0.3);
     background: #ffffff;
     display: flex; align-items: center; justify-content: center;
     font-size: 2.4rem;
     color: var(--clr-accent);
     position: relative; z-index: 1;
     box-shadow: 0 4px 14px rgba(20,152,214,0.15);
     overflow: hidden;
   }
   .page-template-about .team-card .avatar-circle img {
     width: 100%; height: 100%;
     object-fit: cover;
     display: block;
   }
   .page-template-about .team-card .info { padding: 1.4rem 1.5rem 1.6rem; }
   .page-template-about .team-card h5 {
     font-weight: 700;
     font-size: 1.05rem;
     color: var(--clr-heading);
     margin-bottom: .2rem;
   }
   .page-template-about .team-card .role {
     font-size: .78rem;
     color: var(--clr-accent);
     font-weight: 600;
     letter-spacing: .5px;
     margin-bottom: .6rem;
   }
   .page-template-about .team-card p { color: var(--clr-text-dim); font-size: .8rem; line-height: 1.6; }

   /* ─── TIMELINE / OUR STORY ─── */
   .page-template-about .timeline { position: relative; margin-top: 3rem; padding-left: 2.5rem; }
   .page-template-about .timeline::before {
     content: '';
     position: absolute; left: 5px; top: 0; bottom: 0;
     width: 3px;
     background: linear-gradient(to bottom, var(--clr-accent), var(--clr-accent2));
     border-radius: 2px;
   }
   .page-template-about .timeline-item {
     position: relative;
     margin-bottom: 2.2rem;
   }
   .page-template-about .timeline-item::before {
     content: '';
     position: absolute; left: -2.5rem; top: 6px;
     width: 14px; height: 14px;
     border-radius: 50%;
     background: var(--clr-accent);
     border: 3px solid #ffffff;
     box-shadow: 0 0 0 3px rgba(20,152,214,0.25);
   }
   .page-template-about .timeline-item .tl-year {
     font-weight: 700;
     font-size: .78rem;
     color: var(--clr-accent);
     letter-spacing: 1.5px;
     text-transform: uppercase;
     margin-bottom: .25rem;
   }
   .page-template-about .timeline-item h4 {
     font-weight: 600;
     font-size: 1.05rem;
     color: var(--clr-heading);
     margin-bottom: .3rem;
   }
   .page-template-about .timeline-item p { color: var(--clr-text-dim); font-size: .85rem; }

   /* ─── TECH STACK ─── */
   .page-template-about .tech-bg {
     background: var(--clr-surface);
     padding: 6rem 0;
     margin-top: 4rem;
     border-top: 1px solid rgba(0,0,0,0.05);
   }
   .page-template-about .tech-grid {
     display: flex; flex-wrap: wrap; gap: 1rem;
     margin-top: 2.4rem; justify-content: center;
   }
   .page-template-about .tech-pill {
     background: #ffffff;
     border: 1px solid var(--clr-border);
     border-radius: 50px;
     padding: .55rem 1.3rem;
     font-size: .82rem;
     color: var(--clr-text-dim);
     font-weight: 600;
     transition: border-color .3s, color .3s, transform .3s, box-shadow .3s;
     display: flex; align-items: center; gap: .5rem;
     box-shadow: 0 2px 8px rgba(21,101,192,0.04);
   }
   .page-template-about .tech-pill i { color: var(--clr-accent); font-size: .85rem; }
   .page-template-about .tech-pill:hover {
     border-color: var(--clr-accent);
     color: var(--clr-accent);
     transform: translateY(-2px);
     box-shadow: 0 4px 14px rgba(20,152,214,0.12);
   }

   /* ─── CTA ─── */
   .page-template-about .cta-section {
     position: relative; overflow: hidden;
     background: linear-gradient(135deg, var(--dark-blue) 0%, #1a7abf 60%, #1498d6 100%);
   }
   .page-template-about .cta-section .cta-glow {
     position: absolute;
     width: 500px; height: 500px;
     border-radius: 50%;
     filter: blur(120px);
     opacity: .15;
     background: var(--primary-orange);
     top: 50%; right: -100px; translate: 0 -50%;
     pointer-events: none;
   }
   .page-template-about .cta-section .inner {
     position: relative; z-index: 1;
     text-align: center;
     padding: 5.5rem 1rem;
   }
   .page-template-about .cta-section .section-label { color: rgba(255,255,255,0.7); }
   .page-template-about .cta-section h2 {
     font-weight: 800;
     font-size: clamp(1.9rem, 4vw, 2.8rem);
     color: #ffffff;
     letter-spacing: -1.2px;
     margin-bottom: .8rem;
   }
   .page-template-about .cta-section p {
     color: rgba(255,255,255,0.72);
     font-weight: 400;
     max-width: 480px;
     margin: 0 auto 2rem;
     font-size: .96rem;
   }
   .page-template-about .btn-cta {
     display: inline-block;
     background: var(--primary-orange);
     color: #ffffff;
     font-weight: 700;
     font-size: .88rem;
     letter-spacing: .5px;
     padding: .85rem 2.2rem;
     border-radius: 50px;
     text-decoration: none;
     border: none;
     transition: transform .3s, box-shadow .3s, background .3s;
     box-shadow: 0 4px 20px rgba(241,129,28,0.35);
   }
   .page-template-about .btn-cta:hover {
     background: #e06f10;
     transform: translateY(-2px);
     box-shadow: 0 8px 30px rgba(241,129,28,0.45);
     color: #ffffff;
   }