/* --- 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; }

/* --- FOUNDER SECTION --- */
.about-container { 
    display: flex; gap: 60px; align-items: center; flex-wrap: wrap; 
    background: var(--glass-bg); padding: 70px 60px; border-radius: 40px; 
    border: 1px solid var(--glass-border); backdrop-filter: blur(20px); 
}

.founder-img { flex: 1; text-align: center; min-width: 300px; position: relative; }
.founder-img::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 280px; height: 280px; background: rgba(255, 106, 0, 0.15); border-radius: 50%; filter: blur(40px); z-index: -1; pointer-events: none; }

.img-wrapper { width: 280px; height: 280px; margin: 0 auto; border-radius: 50%; overflow: hidden; border: 4px solid var(--primary); box-shadow: 0 0 30px var(--primary-glow); 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; }
.img-wrapper:hover { transform: scale(1.05) translateY(-10px); box-shadow: 0 0 50px var(--primary); border-color: #ffffff; }
.img-wrapper:hover img { transform: scale(1.1); }

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

.about-text { flex: 1.5; min-width: 300px; 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); backdrop-filter: blur(15px); 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; backdrop-filter: blur(10px); 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: 0 0 15px var(--primary-glow); }
.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 Animation Classes */
.reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s ease-out; }
.reveal.active { opacity: 1; transform: translateY(0); }

/* --- 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 { 
        flex-direction: column; text-align: center; gap: 40px; 
        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; }
    .vm-box { padding: 30px 20px; }
    .timeline-container { padding: 0 10px; }
    .timeline { padding-left: 20px; }
    .timeline-item { padding: 30px 20px; }
    .timeline-item::before { left: -29px; }
}