/* Start custom CSS *//* ==============================================
   About Us Page Premium Design - Refined (Teal & Gold Theme)
   ============================================== */

/* সার্বিক স্টাইলিং */
.custom-about-wrapper {
    max-width: 1000px !important;
    margin: 40px auto !important;
    font-family: inherit !important;
    color: #333 !important;
}

/* ১. হিরো সেকশন */
.about-hero-section {
    text-align: center !important;
    background: linear-gradient(135deg, #004d40, #00332c) !important; /* মর্যাদাপূর্ণ গাঢ় নীল/টিয়াল গ্রিন */
    color: #fff !important;
    padding: 70px 20px !important;
    border-radius: 16px !important;
    margin-bottom: 50px !important;
    box-shadow: 0 10px 40px rgba(0, 77, 64, 0.2) !important; /* সফট গ্লো */
}
.about-hero-section h1 {
    color: #fff !important;
    font-size: 36px !important;
    margin-bottom: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
}
.about-hero-section p {
    font-size: 19px !important;
    opacity: 0.9 !important;
    line-height: 1.6 !important;
}

/* ২. গল্পের সেকশন - রিডিজাইনড ইন্টিগ্রেটেড লেআউট */
.about-story-integrated-section {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 40px !important;
    align-items: flex-start !important;
    margin-bottom: 60px !important;
    background: #fff !important;
    padding: 40px !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.06) !important;
    border-left: 5px solid #004d40 !important; /* সাইড বর্ডার */
}
.story-integrated-text {
    flex: 1 1 550px !important;
}
.story-integrated-text h2 {
    font-size: 28px !important;
    color: #004d40 !important; /* টিয়াল গ্রিন */
    margin-bottom: 25px !important;
    border-bottom: 3px solid #eee !important;
    padding-bottom: 15px !important;
    font-weight: 700 !important;
}
.story-integrated-text p {
    font-size: 17px !important;
    line-height: 1.9 !important;
    margin-bottom: 18px !important;
    color: #555 !important;
}
.story-integrated-image-frame {
    flex: 1 1 300px !important;
    position: relative !important;
}
/* Placeholder ফ্রেম */
.content-frame-placeholder {
    background: #fdfdfd !important;
    border: 3px solid #e1b43d !important; /* মর্যাদাপূর্ণ সোনালী বর্ডার */
    border-radius: 12px !important;
    padding: 70px 30px !important;
    text-align: center !important;
    color: #888 !important;
    position: relative !important;
    box-shadow: 0 5px 20px rgba(225, 180, 61, 0.15) !important;
    transition: all 0.3s ease !important;
}
.content-frame-placeholder:hover {
    box-shadow: 0 8px 30px rgba(225, 180, 61, 0.25) !important;
    transform: translateY(-5px) !important;
}
.content-frame-placeholder h3 {
    font-size: 18px !important;
    color: #c5a01d !important; /* সোনালী টেক্সট */
    margin-bottom: 10px !important;
    font-weight: 600 !important;
}
.content-frame-placeholder p {
    font-size: 15px !important;
    color: #777 !important;
}

/* ৩. লক্ষ্য ও উদ্দেশ্য (Floating Cards) */
.about-mission-section {
    margin-bottom: 60px !important;
}
.about-mission-section h2 {
    text-align: center !important;
    font-size: 30px !important;
    margin-bottom: 40px !important;
    color: #222 !important;
    font-weight: 700 !important;
}
.mission-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 30px !important;
}
.mission-card {
    background: #fff !important;
    padding: 40px 30px !important;
    border-radius: 16px !important;
    text-align: center !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.07) !important;
    border-top: 5px solid #004d40 !important; /* টিয়াল গ্রিন বর্ডার */
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    overflow: hidden !important;
}
.mission-card:hover {
    transform: translateY(-10px) !important;
    box-shadow: 0 15px 50px rgba(0,0,0,0.1) !important;
}
.mission-icon {
    font-size: 55px !important;
    margin-bottom: 25px !important;
    display: block !important;
    color: #c5a01d !important; /* সোনালী আইকন */
}
.mission-card h3 {
    font-size: 22px !important;
    margin-bottom: 18px !important;
    color: #333 !important;
    font-weight: 700 !important;
}
.mission-card p {
    font-size: 16px !important;
    line-height: 1.8 !important;
    color: #666 !important;
}

/* ৪. উপসংহার ও ঠিকানা */
.about-footer-section {
    text-align: center !important;
}
.conclusion-text {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #004d40 !important; /* টিয়াল গ্রিন উপসংহার টেক্সট */
    margin-bottom: 50px !important;
    line-height: 1.7 !important;
}
.address-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 30px !important;
    justify-content: center !important;
}
.address-box {
    background: #fff !important;
    padding: 35px !important;
    border-radius: 16px !important;
    flex: 1 1 350px !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.05) !important;
    text-align: left !important;
    border-left: 5px solid #004d40 !important; /* টিয়াল গ্রিন বর্ডার */
    transition: all 0.3s ease !important;
}
.address-box:hover {
    box-shadow: 0 12px 40px rgba(0,0,0,0.1) !important;
    transform: translateX(3px) !important;
}
.address-box.reg-office {
    border-left-color: #c5a01d !important; /* গ্রামের বাড়ির সোনালী বর্ডার */
}
.address-box h4 {
    margin-bottom: 18px !important;
    font-size: 20px !important;
    color: #222 !important;
    font-weight: 600 !important;
}
.address-box p {
    font-size: 16px !important;
    line-height: 1.8 !important;
    color: #666 !important;
}
.address-box strong {
    color: #222 !important;
}

/* ==============================================
   মোবাইল রেসপন্সিভ এবং টেক্সট জাস্টিফাই
   ============================================== */
@media (max-width: 768px) {
    /* সার্বিক মোবাইল প্যাডিং */
    .custom-about-wrapper {
        margin: 20px auto !important;
        padding: 0 10px !important;
    }
    
    /* টেক্সট জাস্টিফাই - বিশেষভাবে ১ নম্বর ছবির জন্য */
    .justify-text-mobile,
    .custom-about-wrapper p,
    .story-integrated-text p,
    .mission-card p {
        text-align: justify !important;
        text-justify: inter-word !important; /* সুনির্দিষ্ট শব্দ প্যাডিং */
    }

    /* হিরো সেকশন মোবাইল */
    .about-hero-section {
        padding: 50px 15px !important;
        margin-bottom: 30px !important;
    }
    .about-hero-section h1 {
        font-size: 28px !important;
    }
    .about-hero-section p {
        font-size: 16px !important;
    }

    /* গল্পের সেকশন মোবাইল */
    .about-story-integrated-section {
        padding: 25px !important;
        margin-bottom: 40px !important;
        gap: 25px !important;
    }
    .story-integrated-text h2 {
        font-size: 24px !important;
    }
    .content-frame-placeholder {
        padding: 50px 20px !important;
    }

    /* মিশন কার্ড মোবাইল */
    .about-mission-section h2 {
        font-size: 26px !important;
    }
    .mission-grid {
        gap: 20px !important;
    }
    .mission-card {
        padding: 30px 20px !important;
    }
    .mission-icon {
        font-size: 45px !important;
    }
    .mission-card h3 {
        font-size: 20px !important;
    }

    /* উপসংহার ও ঠিকানা মোবাইল */
    .conclusion-text {
        font-size: 17px !important;
        margin-bottom: 35px !important;
    }
    .address-grid {
        gap: 20px !important;
    }
    .address-box {
        padding: 25px !important;
        flex: 1 1 100% !important;
    }
    .address-box h4 {
        font-size: 18px !important;
    }
}/* End custom CSS */