/* ===================================================================
   about.css for Kushtia Heritage
   Version: Final, Polished, and Well-Structured
   Description: A dedicated stylesheet for a beautiful and dynamic
                'About Us' page.
   =================================================================== */

/* --- ১. পেজ ব্যানার স্লাইডশো --- */
.page-banner.slider {
    padding: 80px 0; min-height: 350px;
    position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    text-align: center; color: var(--color-white);
    margin-bottom: 80px;
}
.banner-slide {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover; background-position: center;
    transform: scale(1.15); opacity: 0;
    transition: opacity 2.5s ease-in-out, transform 10s ease-out;
}
.banner-slide.active { opacity: 1; transform: scale(1); }
.page-banner::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(0deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.2) 100%);
    z-index: 1;
}
.page-banner .container { position: relative; z-index: 2; }
.page-banner .page-title { font-size: 2.8rem; color: var(--color-white); font-weight: 700; text-shadow: 2px 2px 8px rgba(0,0,0,0.6); }
.page-banner .page-subtitle { font-size: 1.2rem; font-style: italic; margin-top: 10px; opacity: 0.9; }

/* --- ২. সাধারণ সেকশন স্টাইল --- */
.about-page-content { padding: 0 15px; }
.section-header { margin-bottom: 50px; }
.section-header .section-tagline { font-weight: 500; color: var(--color-secondary); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 10px; display: block; }
.section-header h2 { font-size: 2.8rem; font-weight: 700; }
.story-section, .journey-section, .team-section, .artisan-section, .values-section { padding: 80px 0; border-bottom: 1px solid var(--color-border); }
.journey-section, .team-section { background-color: var(--color-footer-bg); }

/* --- ৩. আমাদের যাত্রার গল্প সেকশন --- */
.journey-card {
    text-align: center; padding: 30px;
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 12px; height: 100%;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.journey-card:hover { transform: translateY(-10px); box-shadow: 0 15px 35px rgba(0,0,0,0.08); }
.journey-card .icon { font-size: 3rem; color: var(--color-primary); margin-bottom: 20px; }
.journey-card h3 { font-size: 1.5rem; margin-bottom: 15px; }
.journey-card p { font-size: 1rem; }

/* --- ৪. প্রোফাইল কার্ড (টিম ও কারিগর) --- */
.profile-card {
    text-align: center; background-color: transparent;
    padding: 20px; border-radius: 12px;
    transition: background-color 0.4s ease; height: 100%;
}
.profile-card:hover { background-color: var(--color-white); }
.profile-image-wrapper { width: 160px; height: 160px; border-radius: 50%; margin: 0 auto 25px; overflow: hidden; border: 4px solid var(--color-secondary); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.profile-image-wrapper img { width: 100%; height: 100%; object-fit: cover; }
.profile-name { font-size: 1.4rem; color: var(--color-primary); margin-bottom: 8px; }
.profile-designation { font-weight: bold; color: var(--color-accent); margin-bottom: 15px; }
.profile-description { font-size: 0.95rem; line-height: 1.6; }
.artisan-card .profile-image-wrapper { border-color: var(--color-accent); }
.artisan-card .profile-name { color: var(--color-accent); }

/* --- ৫. মূল্যবোধ টাইমলাইন --- */
.values-timeline { position: relative; display: flex; justify-content: space-between; max-width: 900px; margin: 60px auto 0; }
.values-timeline::before { content: ''; position: absolute; top: 50%; left: 10%; right: 10%; transform: translateY(-50%); height: 2px; background-color: var(--color-border); z-index: 1; }
.value-item { position: relative; text-align: center; width: 25%; z-index: 2; }
.value-item .icon-wrapper { width: 80px; height: 80px; border-radius: 50%; background-color: var(--color-bg); border: 2px solid var(--color-border); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; transition: all 0.4s ease; position: relative; }
.value-item .icon-wrapper i { font-size: 2.5rem; color: var(--color-primary); transition: all 0.4s ease; }
.value-item h5 { font-size: 1.2rem; font-weight: 500; color: var(--color-text); transition: color 0.4s ease; }
.value-item:hover .icon-wrapper { background-color: var(--color-primary); border-color: var(--color-primary); transform: translateY(-10px) scale(1.1); }
.value-item:hover .icon-wrapper i { color: var(--color-white); transform: scale(0.9); }
.value-item:hover h5 { color: var(--color-primary); }
.value-item:nth-child(even) { padding-top: 100px; }
.value-item:nth-child(odd) { padding-bottom: 100px; }
.value-item::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); width: 2px; height: 50px; background-color: var(--color-border); }
.value-item:nth-child(odd)::after { top: 80px; }
.value-item:nth-child(even)::after { bottom: 80px; }

/* --- ৬. রেসপন্সিভ ডিজাইন --- */
@media (max-width: 768px) {
    .page-banner .page-title { font-size: 2.5rem; }
    .section-header h2 { font-size: 2.2rem; }
    .values-timeline { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 40px; }
    .values-timeline::before, .value-item::after, .value-item:nth-child(even), .value-item:nth-child(odd) { display: block; padding: 0; }
}