/* About page styles - clean, responsive, modern */
:root{
    --primary:#16a34a; /* green */
    --primary-600:#10b981;
    --bg:#f8f9fa;
    --muted:#6c757d;
    --card-bg:#ffffff;
    --radius:12px;
}
*{box-sizing:border-box}
.about-page body{font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; color:#222}

/* Hero */
.about-hero{
    background-image:url('/assets/img/about-hero.svg');
    background-size:cover;
    background-position:center right;
    color:#06331f;
    padding:84px 0;
    text-align:left;
    display:flex; align-items:center;
    position:relative; overflow:hidden;
}

.about-hero .container{display:flex; align-items:center; gap:28px}
.about-hero .display-5{font-weight:800; letter-spacing:0.2px; font-size:48px; color:#ffffff}
.about-hero .lead{opacity:0.95; color:#000000; margin-top:8px}

.about-hero .content{max-width:620px; padding:14px 0; }

.hero-visual{flex:0 0 420px; max-width:420px; display:block; margin-left:auto; position:relative; z-index:2}
.hero-visual img{width:100%; height:auto; display:block; border-radius:14px; box-shadow:0 18px 40px rgba(6,78,59,0.06); object-fit:cover}

/* Prevent overlap and ensure spacing from edges */
.about-hero{padding-left:28px; padding-right:28px}
.about-hero .container{gap:24px}

/* Dark overlay on top for navbar contrast */
.about-hero::before{
    content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(3,37,22,0.72) 0%, rgba(3,37,22,0.35) 18%, rgba(255,255,255,0.02) 60%); pointer-events:none; z-index:1;
}

/* Decorative floating shapes */
.about-hero .shape{
    position:absolute; border-radius:50%; filter:blur(36px); opacity:0.85; transform:translate3d(0,0,0); z-index:0;
}
.about-hero .shape.s1{width:300px; height:300px; left:-60px; top:20%; background:radial-gradient(circle at 30% 30%, rgba(16,185,129,0.95), rgba(16,185,129,0.18)); animation:float1 10s ease-in-out infinite}
.about-hero .shape.s2{width:420px; height:420px; right:-100px; bottom:8%; background:radial-gradient(circle at 70% 60%, rgba(22,163,74,0.9), rgba(22,163,74,0.12)); animation:float2 12s ease-in-out infinite}

@keyframes float1{0%{transform:translateY(0)}50%{transform:translateY(-18px)}100%{transform:translateY(0)}}
@keyframes float2{0%{transform:translateY(0)}50%{transform:translateY(22px)}100%{transform:translateY(0)}}

/* Ensure content sits above overlay shapes */
.about-hero .container{position:relative; z-index:2}

/* Accessibility: visually hidden but available to screen readers */
.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;border:0;padding:0;margin:-1px}

/* Section base */
.section{padding:56px 0}
.section.bg-light{background:var(--bg)}
.about-page .container{max-width:1100px; margin:0 auto; padding:0 20px}

/* Timeline */
.timeline{position:relative; padding-left:36px; margin-top:28px}
.timeline::before{content:''; position:absolute; left:8px; top:0; bottom:0; width:4px; background:linear-gradient(to bottom, var(--primary), rgba(22,163,74,0.6)); border-radius:4px}
.timeline-item{position:relative; margin-bottom:30px; padding:12px 18px; background:transparent}
.timeline-item .dot{position:absolute; left:-2px; top:10px; width:18px; height:18px; border-radius:50%; background:var(--primary); box-shadow:0 4px 12px rgba(22,163,74,0.18)}
.timeline-item h5{margin:0 0 6px; font-size:1.05rem}
.timeline-item p{margin:0; color:var(--muted)}

/* Highlights banner */
.highlight-banner{display:flex; gap:18px; align-items:center; justify-content:space-between; padding:18px; background:linear-gradient(90deg, rgba(22,163,74,0.06), rgba(16,185,129,0.03)); border-radius:10px; margin:18px 0}
.highlight-banner .col{flex:1}


/* Cards / Services */
.about-page .row{display:flex; flex-wrap:wrap; gap:20px}
.col-md-4{flex:1 1 calc(33.333% - 20px); min-width:240px}
.card{background:var(--card-bg); border-radius:var(--radius); overflow:hidden; border-top:4px solid var(--primary)}
.card .card-body{padding:22px}
/* .card .card-body .text-primary {color:#16a34a} */
.card h5{margin-bottom:6px; color:#16a34a}
.card p{color:#333; line-height:1.6}
.hover-card{ transition:transform .28s cubic-bezier(.2,.9,.3,1), box-shadow .28s; border:1px solid rgba(22,163,74,0.1); -webkit-transition:transform .28s cubic-bezier(.2,.9,.3,1), box-shadow .28s; -moz-transition:transform .28s cubic-bezier(.2,.9,.3,1), box-shadow .28s; -ms-transition:transform .28s cubic-bezier(.2,.9,.3,1), box-shadow .28s; -o-transition:transform .28s cubic-bezier(.2,.9,.3,1), box-shadow .28s; }
.hover-card:hover{transform:translateY(-8px); box-shadow:0 18px 40px rgba(22,163,74,0.12)}

/* Ensure elements using Bootstrap's .text-primary use our green in this page */
.card .text-primary,
.section.bg-light .text-primary,
.tech .text-primary,
.highlight-banner .text-primary {
    color:var(--primary) !important;
}

/* Stats */
.stats-grid{display:flex; gap:20px; justify-content:center; flex-wrap:wrap}
.stats-grid .stat{flex:1 1 200px; padding:18px}
.counter{font-size:2.6rem; font-weight:700; color:var(--primary); display:inline}
.counter + span{display:inline; margin-left:-4px}
.stats-grid p{color:var(--muted); margin-top:10px; text-align:center}

/* Services section specific */
.section.bg-light h2{color:#040404}
.section.bg-light > .container > p{color:#555}

/* Content sections - justify text */
.section > .container > div[style*="max-width"], .section > .container > p{text-align:justify}

/* Technology blocks */
.tech-grid{display:flex; gap:20px; flex-wrap:wrap}
.tech-grid .tech{flex:1 1 300px; padding:24px; border-radius:10px; background:var(--card-bg); box-shadow:0 6px 18px rgba(0,0,0,0.03)}

/* CTA */
.cta{ text-align:center}
.cta h2{margin:0 0 12px; font-size:1.5rem}
.cta p{margin:0 0 16px !important; font-size:0.95rem}
.btn-cta{background:#fff; color:var(--primary); border-radius:999px; padding:10px 22px; font-weight:600; text-decoration:none; display:inline-block; font-size:0.9rem; white-space:nowrap}

/* Photo gallery */
.photo-gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.photo-item{overflow:hidden; border-radius:12px; cursor:pointer; box-shadow:0 6px 18px rgba(6,78,59,0.04)}
.photo-item img{width:100%; display:block; height:220px; object-fit:cover; transition:transform .35s ease}
.photo-item:hover img{transform:scale(1.03)}

/* team grid */
.team-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.team-card{background:var(--card-bg); padding:14px; border-radius:12px; text-align:center}
.team-card img{width:100%; height:160px; object-fit:cover; border-radius:8px}

/* team grid - 2 members with bios */
.team-grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:28px; margin-top:18px}
.team-card-full{
    background:var(--card-bg); 
    padding:24px; 
    border-radius:12px; 
    text-align:center; 
    box-shadow:0 6px 18px rgba(22,163,74,0.06); 
    transition:box-shadow .28s;
    display:flex;
    flex-direction:column;
    height:100%;
}
.team-card-full:hover{box-shadow:0 12px 28px rgba(22,163,74,0.12)}
.team-card-full img{
    width:100%; 
    height:280px; 
    object-fit:cover; 
    border-radius:10px;
    margin-bottom:16px;
    flex-shrink:0;
}
.team-card-full h5{
    color:#065f46; 
    margin-top:0px;
    margin-bottom:12px;
    font-size:1.1rem;
    font-weight:700;
}
.team-card-full .text-muted{
    color:#6c757d; 
    font-style:italic;
    font-size:0.9rem;
    margin-bottom:12px;
    line-height:1.5;
    flex:0 0 auto;
}
.team-card-full p{
    color:#333;
    line-height:1.6;
    font-size:0.95rem;
    margin:0 0 12px 0;
    text-align:justify;
    flex:1;
    overflow-y:auto;
    max-height:200px;
    padding-right:8px;
}
.team-card-full p:last-child{
    margin-bottom:0;
}

/* lightbox modal */
.lightbox{position:fixed; inset:0; background:rgba(2,6,23,0.7); display:flex; align-items:center; justify-content:center; padding:20px; z-index:1200; visibility:hidden; opacity:0; transition:opacity .18s, visibility .18s}
.lightbox.open{visibility:visible; opacity:1}
.lightbox img{max-width:96%; max-height:86%; border-radius:10px; box-shadow:0 22px 60px rgba(2,6,23,0.6)}
.lightbox .close{position:absolute; top:28px; right:28px; background:rgba(255,255,255,0.9); border-radius:999px; width:44px; height:44px; display:flex; align-items:center; justify-content:center; cursor:pointer}

/* Responsive */
@media (max-width:900px){.col-md-4{flex:1 1 100%}.timeline{padding-left:26px}.timeline::before{left:2px}.timeline-item .dot{left:-6px}}
@media (max-width:1100px){.team-grid{grid-template-columns:repeat(2,1fr)}.team-grid-2{grid-template-columns:1fr}.photo-gallery{grid-template-columns:repeat(2,1fr)}.about-hero .display-5{font-size:36px}}
@media (max-width:680px){.team-grid{grid-template-columns:1fr}.team-grid-2{grid-template-columns:1fr}.photo-gallery{grid-template-columns:1fr}.about-hero{padding:56px 0;text-align:center}.about-hero .container{flex-direction:column}.hero-visual{display:none}}

/* Small utility */
.text-center{text-align:center}
.h-fs-16{font-size:1rem}