About Us - MeggiTools

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About Us</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
            margin: 0;
            padding: 0;
            overflow-x: hidden;
        }
        .about-section {
            text-align: center;
            padding: 100px 20px;
            background: #fff;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
            position: relative;
            overflow: hidden;
        }
        .about-section h1 {
            font-size: 2.5em;
            color: #333;
            margin-bottom: 20px;
            position: relative;
            animation: fadeInDown 1s ease-out;
        }
        .about-section p {
            font-size: 1.1em;
            color: #555;
            line-height: 1.6;
            max-width: 800px;
            margin: 0 auto;
            animation: fadeInUp 1s ease-out;
        }
        .about-section .icons {
            margin-top: 30px;
            animation: fadeInUp 1s ease-out;
        }
        .about-section .icons i {
            font-size: 2em;
            color: #007bff;
            margin: 0 10px;
            transition: transform 0.3s;
        }
        .about-section .icons i:hover {
            transform: scale(1.2);
        }
        @keyframes fadeInDown {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        .emoji {
            font-size: 3em;
            margin: 20px 0;
            animation: bounce 2s infinite;
        }
        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% {
                transform: translateY(0);
            }
            40% {
                transform: translateY(-30px);
            }
            60% {
                transform: translateY(-15px);
            }
        }
        .animated-background {
            content: '';
            background: linear-gradient(135deg, #ff9a9e 10%, #fad0c4 100%);
            height: 100%;
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
            animation: gradientBG 5s ease infinite;
            background-size: 400% 400%;
        }
        @keyframes gradientBG {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
        }
    </style>
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
    <section class="about-section">
        <div class="animated-background"></div>
        <h1>About Us</h1>
        <p>Welcome to our company! We are passionate about delivering the best services to our customers. Our team is dedicated, skilled, and ready to take on new challenges to meet your needs. 🌟</p>
        <div class="emoji">🚀</div>
        <div class="icons">
            <i class="fas fa-rocket"></i>
            <i class="fas fa-users"></i>
            <i class="fas fa-heart"></i>
            <i class="fas fa-lightbulb"></i>
        </div>
    </section>
</body>
</html>