/* --- ABOUT PAGE SPECIFIC STYLES --- */

/* Navbar se spacing ke liye */
main .section:first-child { padding-top: 180px; }

.tag { display: block; text-align: center; color: var(--primary); font-weight: 800; text-transform: uppercase; letter-spacing: 2px; font-size: 0.8rem; margin-bottom: 15px; }

/* 100% WORKING FIX: Heading aur uske niche ke content ke beech bada gap (Dhakka) */
.section-title { margin-bottom: 80px !important; }

/* --- THE STORY --- */
/* Single column and capped width: long prose across a 1200px box is unreadable. */
.about-container {
    max-width: 900px; margin: 0 auto;
    background: var(--glass-bg); padding: 70px 60px; border-radius: 40px;
    border: 1px solid var(--glass-border);
}

/* --- LEADERSHIP --- */
/* auto-fit means a third leader can be added later with no CSS change. */
.leadership-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; max-width: 860px; margin: 0 auto; }
/* No backdrop-filter on any card below. The page background is a solid #000
   with nothing behind these boxes, so the blur sampled flat black and
   produced flat black — invisible, while still costing its own layer and a
   blur pass on every scrolled frame. */
.leader-card { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 28px; padding: 38px 30px; text-align: center; transition: 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.leader-card:hover { transform: translateY(-10px); border-color: var(--primary); box-shadow: 0 20px 40px rgba(0,0,0,0.3); }
.leader-bio { color: var(--text-muted); line-height: 1.7; font-size: 0.92rem; margin-top: 18px; text-align: left; }

.img-wrapper { width: 190px; height: 190px; margin: 0 auto; border-radius: 50%; overflow: hidden; border: 4px solid var(--primary); box-shadow: none; transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.img-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s ease; }
/* Portrait photos: keep the head inside the circle instead of cropping from the middle */
.img-wrapper img.photo-top { object-position: 50% 10%; }
.img-wrapper:hover { transform: scale(1.05) translateY(-10px); box-shadow: none; border-color: #ffffff; }
.img-wrapper:hover img { transform: scale(1.1); }

/* Shown only while a leader has no photo file yet — never a broken image. */
.leader-initials { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.04); color: var(--primary); font-size: 3.2rem; font-weight: 800; letter-spacing: 2px; }

.founder-name { margin-top: 20px; font-size: 1.55rem; font-weight: 800; color: #fff; }
.designation { color: var(--primary); margin-top: 5px; font-size: 0.78rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }

.about-text { text-align: left; }
.about-text .highlight { font-size: 1.3rem; color: #fff; font-weight: 500; border-left: 3px solid var(--primary); padding-left: 20px; margin-bottom: 25px; line-height: 1.6; }
.about-text p { color: var(--text-muted); line-height: 1.8; margin-bottom: 20px; font-size: 1.05rem; font-weight: 400; }

/* --- VISION & MISSION --- */
.vm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; margin-top: 30px; }
.vm-box { background: var(--glass-bg); padding: 50px 40px; border-radius: 35px; border: 1px solid var(--glass-border); transition: 0.5s cubic-bezier(0.16, 1, 0.3, 1); text-align: left; }
.vm-box:hover { transform: translateY(-10px); border-color: var(--primary); background: rgba(255, 106, 0, 0.05); box-shadow: 0 20px 40px rgba(0,0,0,0.3); }
.vm-icon { width: 60px; height: 60px; background: rgba(255, 106, 0, 0.1); border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; color: var(--primary); margin-bottom: 25px; }
.vm-box h3 { font-size: 1.6rem; margin-bottom: 15px; color: #fff; }
.vm-box p { color: var(--text-muted); font-size: 1rem; line-height: 1.7; }

/* --- TIMELINE --- */
.timeline-container { max-width: 900px; margin: 40px auto 0; }
.timeline { border-left: 2px dashed rgba(255, 106, 0, 0.3); padding-left: 40px; position: relative; }
.timeline-item { background: var(--glass-bg); border: 1px solid var(--glass-border); padding: 40px; border-radius: 25px; margin-bottom: 40px; position: relative; transition: 0.4s; text-align: left; }
.timeline-item:hover { border-color: var(--primary); transform: translateX(10px); background: rgba(255,106,0,0.05); box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
.timeline-item::before { content: ''; position: absolute; left: -49px; top: 50px; width: 16px; height: 16px; border-radius: 50%; background: var(--primary); box-shadow: none; }
.year-badge { background: rgba(255,106,0,0.1); color: var(--primary); padding: 6px 15px; border-radius: 50px; font-size: 0.8rem; font-weight: 800; letter-spacing: 1px; display: inline-block; margin-bottom: 15px; }
.timeline-item h4 { color: #fff; font-size: 1.5rem; margin-bottom: 10px; }
.timeline-item p { color: var(--text-muted); line-height: 1.7; font-size: 1rem; margin: 0; }

/* .reveal is defined once, in style.css. A copy used to live here — and since
   this file loads after style.css, that copy won, so this page alone kept the
   old animation (and its `transition: all`). Removed so the page inherits the
   shared one like every other page does. */

/* --- MOBILE RESPONSIVE --- */
@media (max-width: 768px) {
    main .section:first-child { padding-top: 130px; }
    
    /* Mobile par gap thoda kam kar diya taaki accha lage */
    .section-title { margin-bottom: 40px !important; }
    
    .about-container { padding: 40px 20px; border-radius: 30px; }

    .about-text .highlight { border-left: none; border-top: 3px solid var(--primary); padding-left: 0; padding-top: 15px; text-align: center; }
    .about-text p { text-align: center; }

    .leadership-grid { gap: 24px; }
    .leader-card { padding: 30px 20px; }
    .img-wrapper { width: 165px; height: 165px; }
    .leader-initials { font-size: 2.8rem; }
    .leader-bio { text-align: center; }
    .vm-box { padding: 30px 20px; }
    .timeline-container { padding: 0 10px; }
    .timeline { padding-left: 20px; }
    .timeline-item { padding: 30px 20px; }
    .timeline-item::before { left: -29px; }
}
/* --- Own products: 4 cards in a clean 2x2 grid, with product links --- */
.vm-grid.product-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; }
.vm-box .vm-link {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 18px;
    color: var(--primary); font-weight: 700; font-size: 0.95rem; text-decoration: none;
}
.vm-box .vm-link i { font-size: 0.78rem; }
.vm-box .vm-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.about-text p a { color: var(--primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 768px) {
    .vm-grid.product-grid { grid-template-columns: 1fr; }
}