<?php $pageTitle = "About Us - Sigma Healthcare"; ?>
<?php include 'includes/header.php'; ?>

<style>
/* About Page Specific Styles */
body {
    padding-top: 0;
}

/* About Hero Section */
.about-hero-section {
    background: url('images/about/about-hero.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding-top: 120px;
}

.about-hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
   /* background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%);*/
    z-index: 1;
}

.about-hero-content {
    position: relative;
    z-index: 2;
    text-align: left;
    max-width: 600px;
}

.about-hero-title {
    color: #07427D;
    font-size: 4rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.about-hero-subtitle {
    color: #1B4763;
    font-size: 1.2rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.about-hero-description {
    color: #1B4763;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 0;
    opacity: 0.9;
}

/* About Content Section */
.about-content-section {
    padding: 100px 0;
    background: #ffffff;
    margin-top: -100px;
    position: relative;
    z-index: 3;
}

.about-content-container {
    display: flex;
    align-items: center;
    gap: 60px;
    max-width: 1200px;
    margin: 0 auto;
}

.about-images-section {
    flex: 1;
    position: relative;
}

.about-image-main {
    width: 100%;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    margin-bottom: 20px;
    max-height: 400px;
    object-fit: cover;
}

.about-image-secondary {
    width: 85%;
    max-width: 300px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    margin: 0 auto;
    display: block;
}

.about-text-section {
    flex: 1;
    padding-left: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.about-logo {
    margin-bottom: 30px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.about-logo .sigma-text {
    color: #FE4600;
    font-size: 3rem;
    font-weight: 700;
    letter-spacing: 2px;
    display: block;
    line-height: 1;
}

.about-logo .healthcare-text {
    color: #333;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-top: 5px;
    display: block;
}

.about-description {
    color: #666;
    font-size: 1rem;
    line-height: 1.7;
    text-align: justify;
}

/* Vision Section */
.vision-section {
    background: #FFF9D9;
    padding: 80px 0;
}

.vision-container {
    display: flex;
    align-items: center;
    gap: 60px;
    max-width: 1200px;
    margin: 0 auto;
    min-height: 400px;
}

.vision-text {
    flex: 1;
}

.vision-title {
    color: #333;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 30px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.vision-description {
    color: #666;
    font-size: 1rem;
    line-height: 1.7;
    text-align: justify;
}

.vision-image {
    flex: 1;
}

.vision-image img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* Mission Section */
.mission-section {
    background: #FD8B07;
    padding: 80px 0;
    color: white;
}

.mission-container {
    display: flex;
    align-items: center;
    gap: 60px;
    max-width: 1200px;
    margin: 0 auto;
    min-height: 400px;
}

.mission-image {
    flex: 1;
}

.mission-image img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.mission-text {
    flex: 1;
}

.mission-title {
    color: white;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 30px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.mission-description {
    color: rgba(255, 255, 255, 0.95);
    font-size: 1rem;
    line-height: 1.7;
    text-align: justify;
}

/* Team Section */
.team-section {
    padding: 100px 0;
    background: #ffffff;
    text-align: center;
}

.team-header {
    margin-bottom: 80px;
}

.team-title {
    color: #333;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.team-subtitle {
    color: #666;
    font-size: 1rem;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto;
}

/* Leadership Section */
.leadership-section {
    margin-bottom: 60px;
}

.section-title {
    color: #07427D;
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 40px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.leadership-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.team-card {
    background: white;
    border-radius: 15px;
    padding: 30px 25px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    text-align: center;
}

.team-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

.team-image {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin: 0 auto 20px;
    background-size: cover;
    background-position: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.team-name {
    color: #333;
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.team-position {
    color: #FE4600;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 15px;
    letter-spacing: 0.5px;
}

.team-bio {
    color: #666;
    font-size: 0.85rem;
    line-height: 1.5;
}

.team-credentials {
    color: #07427D;
    font-size: 0.8rem;
    font-weight: 500;
    margin-top: 10px;
    font-style: italic;
}

/* Additional Members Section */
.additional-members {
    margin-top: 60px;
}

.additional-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
    max-width: 1000px;
    margin: 0 auto;
}

.additional-card {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 25px 20px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    text-align: center;
}

.additional-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.12);
    background: white;
}

.additional-image {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: 0 auto 15px;
    background-size: cover;
    background-position: center;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

.additional-name {
    color: #333;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 5px;
}

.additional-position {
    color: #FE4600;
    font-size: 0.85rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Animation Classes */
.slide-in-up {
    animation: slideInUp 0.8s ease-out;
}

@keyframes slideInUp {
    from { 
        opacity: 0; 
        transform: translateY(50px);
    }
    to { 
        opacity: 1; 
        transform: translateY(0);
    }
}

.fade-in-delayed {
    animation: fadeInDelayed 1s ease-out 0.3s both;
}

@keyframes fadeInDelayed {
    from { 
        opacity: 0; 
        transform: translateY(30px);
    }
    to { 
        opacity: 1; 
        transform: translateY(0);
    }
}

/* Responsive Design */
@media (max-width: 1200px) {
    .about-hero-title {
        font-size: 3.5rem;
    }
    
    .about-content-container,
    .vision-container,
    .mission-container {
        max-width: 1000px;
        gap: 40px;
    }
    
    .about-text-section {
        padding-left: 20px;
    }
}

@media (max-width: 992px) {
    .about-hero-title {
        font-size: 3rem;
    }
    
    .about-hero-section {
        min-height: 80vh;
        padding-top: 100px;
    }
    
    .about-content-container,
    .vision-container,
    .mission-container {
        flex-direction: column;
        gap: 40px;
    }
    
    .about-text-section {
        padding-left: 0;
        text-align: center;
    }
    
    .about-logo {
        text-align: center;
        justify-content: center;
    }
    
    .about-image-secondary {
        width: 80%;
        max-width: 280px;
    }
    
    .leadership-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
    
    .additional-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .vision-container,
    .mission-container {
        min-height: 350px;
    }
    
    .vision-image img,
    .mission-image img {
        height: 300px;
    }
    
    .vision-title,
    .mission-title {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .about-hero-title {
        font-size: 2.5rem;
        text-align: center;
    }
    
    .about-hero-subtitle {
        font-size: 1rem;
        text-align: center;
    }
    
    .about-hero-description {
        text-align: center;
    }
    
    .about-hero-content {
        text-align: center;
    }
    
    .about-hero-section {
        min-height: 70vh;
        padding: 100px 0 60px;
        margin-top: 15px;
    }
    
    .about-content-section {
        padding: 80px 0;
        margin-top: -80px;
    }
    
    .about-content-container {
        text-align: center;
    }
    
    .about-images-section {
        margin-bottom: 40px;
    }
    
    .about-image-main {
        max-height: 300px;
    }
    
    .about-image-secondary {
        width: 75%;
        max-width: 250px;
        margin: 20px auto 0;
    }
    
    .about-text-section {
        text-align: center;
    }
    
    .about-logo {
        text-align: center;
    }
    
    .about-description {
        text-align: center;
        margin: 0 auto;
        max-width: 90%;
    }
    
    .vision-container,
    .mission-container {
        text-align: center;
    }
    
    .vision-text,
    .mission-text {
        margin-bottom: 30px;
    }
    
    .vision-description,
    .mission-description {
        text-align: center;
        margin: 0 auto;
        max-width: 90%;
    }
    
    .vision-image img,
    .mission-image img {
        max-width: 80%;
        margin: 0 auto;
        display: block;
    }
    
    .vision-section,
    .mission-section {
        padding: 60px 0;
    }
    
    .team-section {
        padding: 80px 0;
    }
    
    .leadership-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .additional-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .team-title,
    .vision-title,
    .mission-title {
        font-size: 1.8rem;
        text-align: center;
    }
    
    .about-logo .sigma-text {
        font-size: 2.5rem;
    }
}

@media (max-width: 576px) {
    .about-hero-title {
        font-size: 2rem;
        text-align: center;
    }
    
    .about-hero-description {
        font-size: 0.9rem;
        text-align: center;
    }
    
    .about-hero-section {
        padding: 90px 0 50px;
        margin-top: 15px;
    }
    
    .about-content-container {
        padding: 0 15px;
        text-align: center;
    }
    
    .about-images-section {
        margin-bottom: 30px;
        text-align: center;
    }
    
    .about-image-main {
        width: 100%;
        max-width: 350px;
        max-height: 280px;
        margin: 0 auto;
    }
    
    .about-logo {
        text-align: center;
        margin-bottom: 25px;
        width: 100%;
        justify-content: center;
    }
    
    .about-image-secondary {
        width: 80%;
        max-width: 280px;
        margin: 15px auto 0 auto !important;
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    .about-description {
        text-align: center;
        margin: 0 auto;
        max-width: 90%;
    }
}

@media (max-width: 375px) {
    .about-hero-section {
        min-height: 60vh;
        padding: 100px 0 40px;
        margin-top: 15px;
    }
    
    .about-hero-title {
        font-size: 1.8rem;
        line-height: 1.2;
        margin-bottom: 15px;
        text-align: center;
    }
    
    .about-hero-subtitle {
        font-size: 0.9rem;
        margin-bottom: 15px;
        text-align: center;
    }
    
    .about-hero-description {
        font-size: 0.85rem;
        line-height: 1.5;
        text-align: center;
        br {
            display: none;
        }
    }
    
    .about-content-container {
        padding: 0 10px;
    }
    
    .about-images-section {
        text-align: center;
    }
    
    .about-text-section {
        text-align: center;
    }
    
    .about-logo {
        text-align: center;
        margin-bottom: 20px;
        width: 100%;
        display: flex;
        justify-content: center;
    }
    
    .about-image-secondary {
        width: 75%;
        max-width: 250px;
        margin: 15px auto 0 auto !important;
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    .about-description {
        font-size: 0.9rem;
        line-height: 1.5;
        padding: 0 5px;
    }
}

@media (max-width: 320px) {
    .about-hero-title {
        font-size: 1.6rem;
    }
    
    .about-hero-description {
        font-size: 0.8rem;
        padding: 0;
    }
    
    .about-content-container {
        padding: 0 5px;
    }
    
    .about-logo {
        text-align: center;
        margin-bottom: 15px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .about-image-secondary {
        max-width: 220px;
        margin: 10px auto 0 auto !important;
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}
</style>

<!-- About Hero Section -->
<section class="about-hero-section">
    <div class="container">
        <div class="row">
            <div class="col-lg-6">
                <div class="about-hero-content slide-in-left">
                    <h1 class="about-hero-title">ABOUT US</h1>
                    <p class="about-hero-subtitle">PRECISION SUPPLIES FOR RELIABLE SCIENCE</p>
                    <p class="about-hero-description">
                        Learn About Sigma Healthcare's Commitment To Excellence<br>
                        In Laboratory Equipment And Diagnostic Solutions
                    </p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- About Content Section -->
<section class="about-content-section">
    <div class="container">
        <div class="about-content-container slide-in-up">
            <div class="about-images-section">
                <img src="images/about/lab.png" alt="Laboratory Main" class="about-image-main">
            </div>
            
            <div class="about-text-section">
                <div class="about-logo">
                    <img src="images/about/logo1.jpg" alt="Laboratory Secondary" class="about-image-secondary">
                </div>
                
                <p class="about-description">
                    Sigma Healthcare is committed to advancing science and healthcare by providing dependable laboratory and diagnostic solutions. We partner with research, medical, and industrial professionals to deliver precise, safe, and efficient products backed by strong technical support. Through innovation and customer-focused service, we help our clients achieve excellence in their scientific and diagnostic work, contributing to a healthier, more sustainable future.
                </p>
            </div>
        </div>
    </div>
</section>

<!-- Vision Section -->
<section class="vision-section">
    <div class="container">
        <div class="vision-container fade-in-delayed">
            <div class="vision-text">
                <h2 class="vision-title">Our Vision</h2>
                <p class="vision-description">
                    To provide trusted, high-quality diagnostic and laboratory products that enhance lives and promote a healthier society. We aim to be a reliable partner in advancing healthcare standards by delivering innovative, accurate, and sustainable solutions that support laboratories, medical professionals, and research institutions in improving patient outcomes and building a healthier future.
                </p>
            </div>
            <div class="vision-image">
                <img src="images/about/vision.png" alt="Our Vision" class="img-fluid">
            </div>
        </div>
    </div>
</section>

<!-- Mission Section -->
<section class="mission-section">
    <div class="container">
        <div class="mission-container fade-in-delayed">
            <div class="mission-image">
                <img src="images/about/mission.png" alt="Our Mission" class="img-fluid">
            </div>
            <div class="mission-text">
                <h2 class="mission-title">Our Mission</h2>
                <p class="mission-description">
                    Our mission is to provide high-quality laboratory and diagnostic supplies that meet international standards while supporting scientific discovery and medical advancement through reliable and innovative solutions. We strive to build lasting relationships with our clients based on trust, integrity, and service excellence. Through continuous improvement and a commitment to innovation, Sigma Healthcare aims to meet the evolving needs of the healthcare and research communities and contribute to the advancement of reliable science.
                </p>
            </div>
        </div>
    </div>
</section>

<!-- Team Section -->
<section class="team-section">
    <div class="container">
        <div class="team-header slide-in-up">
            <h2 class="team-title">Our Team</h2>
            <p class="team-subtitle">
                Meet our dedicated team of healthcare professionals, technical advisors, and specialists committed to delivering excellence in laboratory and diagnostic solutions.
            </p>
        </div>
        
        <!-- Leadership Team -->
        <div class="leadership-section">
            <h3 class="section-title">Leadership Team</h3>
            <div class="leadership-grid fade-in-delayed">
                <div class="team-card">
                    <div class="team-image" style="background-image: url('images/about/p1.png');"></div>
                    <h5 class="team-name">Mahesh Kamburugamuwa</h5>
                    <p class="team-position">Managing Director</p>
                    <p class="team-bio">Leading Sigma Healthcare with strategic vision and extensive experience in healthcare management</p>
                </div>
                
                <div class="team-card">
                    <div class="team-image" style="background-image: url('images/about/p2.png');"></div>
                    <h5 class="team-name">Rashmi Premarathne</h5>
                    <p class="team-position">Technical Advisor</p>
                    <p class="team-bio">Expert in Non-Destructive Testing with advanced technical knowledge</p>
                    <p class="team-credentials">(NDT) University of Moratuwa</p>
                </div>

                <div class="team-card">
                    <div class="team-image" style="background-image: url('images/about/p3.png');"></div>
                    <h5 class="team-name">D.M.S.M Kumara</h5>
                    <p class="team-position">Technical Advisor</p>
                    <p class="team-bio">Providing technical expertise and guidance for laboratory solutions</p>
                </div>

                <div class="team-card">
                    <div class="team-image" style="background-image: url('images/about/p4.png');"></div>
                    <h5 class="team-name">K.W.K. Kariyawasam</h5>
                    <p class="team-position">Technical Advisor</p>
                    <p class="team-bio">Specialist in technical consulting and product development</p>
                </div>

                <div class="team-card">
                    <div class="team-image" style="background-image: url('images/about/p1.png');"></div>
                    <h5 class="team-name">G.P.N.P. Punchihewa</h5>
                    <p class="team-position">Pharmacist</p>
                    <p class="team-bio">Licensed pharmacist ensuring pharmaceutical compliance and quality</p>
                    <p class="team-credentials">SLMC Reg. No: 8651</p>
                </div>

                <div class="team-card">
                    <div class="team-image" style="background-image: url('images/about/p2.png');"></div>
                    <h5 class="team-name">D.P. Selvan</h5>
                    <p class="team-position">Product Specialist</p>
                    <p class="team-bio">Expert in product knowledge and customer technical support</p>
                </div>
            </div>
        </div>

        <!-- Additional Team Members -->
        <div class="additional-members">
            <h3 class="section-title">Additional Team Members</h3>
            <div class="additional-grid fade-in-delayed">
                <div class="additional-card">
                    <div class="additional-image" style="background-image: url('images/about/p3.png');"></div>
                    <h5 class="additional-name">Dinali Dewasurendra</h5>
                    <p class="additional-position">Business Coordinator</p>
                </div>

                <div class="additional-card">
                    <div class="additional-image" style="background-image: url('images/about/p4.png');"></div>
                    <h5 class="additional-name">L.G.A.N. Galappatthi</h5>
                    <p class="additional-position">Legal Advisor <br> L.L.M (London)-International Bussiness and Commercial Law</p>
                    
                </div>

                <div class="additional-card">
                    <div class="additional-image" style="background-image: url('images/about/p1.png');"></div>
                    <h5 class="additional-name">Dulanjali Perera</h5>
                    <p class="additional-position">Regulatory Affairs</p>
                </div>

                <div class="additional-card">
                    <div class="additional-image" style="background-image: url('images/about/p2.png');"></div>
                    <h5 class="additional-name">Nayana Herath</h5>
                    <p class="additional-position">Marketing</p>
                </div>
            </div>
        </div>
    </div>
</section>

<script>
// Add intersection observer for animations
document.addEventListener('DOMContentLoaded', function() {
    const observerOptions = {
        threshold: 0.1,
        rootMargin: '0px 0px -50px 0px'
    };
    
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('animate');
            }
        });
    }, observerOptions);
    
    // Observe all animated elements
    document.querySelectorAll('.slide-in-up, .fade-in-delayed, .team-card, .additional-card').forEach(element => {
        observer.observe(element);
    });
});
</script>

<?php include 'includes/footer.php'; ?>