<?php include 'includes/header.php'; ?>
<?php include 'includes/navbar.php'; ?>

<div class="about-hero" style="min-height: 60vh; background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://images.pexels.com/photos/1271619/pexels-photo-1271619.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; padding-top: 100px; padding-bottom: 150px;">
    <div class="container">
        <h6 class="reveal-up about-subtitle" style="letter-spacing: 5px; text-transform: uppercase; color: var(--primary); font-size: 18px;">Our Story</h6>
        <h1 class="fw-bold reveal-up about-title" style="letter-spacing: -2px; font-size: 80px;">ABOUT METHSISILA</h1>
        <p class="lead reveal-up about-text" style="max-width: 600px; margin: 20px auto 0;">Since 2008, crafting unforgettable travel experiences and connecting you to the hidden gems of the globe.</p>
    </div>
</div>

<style>
.about-title { font-size: 60px; }
@media (max-width: 768px) {
    .about-hero {
        margin-top: 180px !important;
        padding-top: 50px !important;
        padding-bottom: 80px !important;
        min-height: auto !important;
    }
    .about-title { 
        font-size: 36px !important; 
        line-height: 1.2;
    }
    .about-subtitle { 
        font-size: 14px !important; 
        letter-spacing: 3px !important;
    }
    .about-text {
        font-size: 16px !important;
    }
}
</style>

<section class="py-5">
    <div class="container">
        <div class="row align-items-center mb-5">
            <div class="col-lg-6 mb-4 mb-lg-0">
                <img src="assets/img/about.jpg" class="img-fluid rounded shadow" alt="About Us" loading="lazy" onerror="this.src='https://via.placeholder.com/600x400?text=About+Methsisila+Tours'">
            </div>
            <div class="col-lg-6">
                <h2 class="fw-bold mb-4">Welcome to Methsisila</h2>
                <p class="lead">“Does it ever happened to you, you visit a new place and wasted much time in finding hotels, food or vehicles and felt like you could have planned it well.” We all know travelling international is much more complex than travelling to next state perhaps. We are here for you to save you from that regret.</p>
                <p>Since 2008, Methsisila creating arrangements to the destinations of the world. We enable you to discover a new destination and offer unique ideas to your travel and arrange it as you prefer. We are a place that not only provides travel but also the freedom and the adventure to our clients.</p>
                <p>Our team is professional, friendly and dedicated. We, Methsisila and the team are ready and willing to do everything possible to make sure you are delight in your travels.</p>
            </div>
        </div>

        <div class="row g-4 mt-4">
            <div class="col-12 text-center mb-4">
                <h2 class="fw-bold">Our Services</h2>
            </div>
            <div class="col-md-4">
                <div class="card h-100 border-0 shadow-sm py-4 text-center">
                    <div class="card-body">
                        <i class="fas fa-passport text-primary fa-3x mb-3"></i>
                        <h4 class="fw-bold">Visa Services</h4>
                        <ul class="list-unstyled text-muted">
                            <li>Indian Visa</li>
                            <li>Malaysian Visa</li>
                            <li>Cambodian Visa</li>
                            <li>Chinese Visa</li>
                            <li>Vietnam Visa</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card h-100 border-0 shadow-sm py-4 text-center">
                    <div class="card-body">
                        <i class="fas fa-plane text-primary fa-3x mb-3"></i>
                        <h4 class="fw-bold">Air Tickets</h4>
                        <p class="text-muted">Worldwide air ticketing services for all major airlines with the best rates.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card h-100 border-0 shadow-sm py-4 text-center">
                    <div class="card-body">
                        <i class="fas fa-users text-primary fa-3x mb-3"></i>
                        <h4 class="fw-bold">Group & Private Tours</h4>
                        <p class="text-muted">Expertly planned group tours and personalized private travel arrangements.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

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