about us

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Luxury Kurta · Avant-garde</title>
    <!-- Poppins & Font Awesome -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700;800&display=swap"
        rel="stylesheet" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
    <style>
        .ak-section {
            padding: 30px 20px;
            background: #f5f0ea;
            font-family: 'Poppins', sans-serif;
            overflow: hidden;
            position: relative;
        }

        /* background ornament — minimal & elegant */
        .ak-section::before {
            content: '◆';
            position: absolute;
            top: 5%;
            right: 3%;
            font-size: 200px;
            color: #d4af3708;
            transform: rotate(12deg);
            pointer-events: none;
        }

        .ak-section::after {
            content: '✦';
            position: absolute;
            bottom: 5%;
            left: 2%;
            font-size: 140px;
            color: #d4af3706;
            transform: rotate(-6deg);
            pointer-events: none;
        }

        .ak-container {
            max-width: 1724px;
            margin: 0 auto;
            position: relative;
            z-index: 2;
        }

        /* ---------- heading: soft, airy, bold ---------- */
        .ak-heading {
            text-align: center;
            margin-bottom: 20px;
            position: relative;
        }

        .ak-heading .ak-badge {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            padding: 8px 32px;
            background: transparent;
            border: 2px solid #C99C51;
            border-radius: 40px;
            color: #C99C51;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 2px;
            /* text-transform: uppercase; */
            margin-bottom: 28px;
            transition: all 0.3s ease;
            position: relative;
        }

        .ak-heading .ak-badge i {
            font-size: 14px;
            color: #C99C51;
        }

        .ak-heading .ak-badge:hover {
            background: #C99C51;
            color: #fff;
            border-color: #C99C51;
            box-shadow: 0 8px 28px #d4af3740;
        }

        .ak-heading .ak-badge:hover i {
            color: #fff;
        }

        .ak-heading h2 {
            font-size: 46px;
            font-weight: 600;
            color: #1a1a1a;
            letter-spacing: 0px;
            line-height: 1.08;
            margin-bottom: 18px;
        }

        .ak-heading h2 .highlight {
            background: linear-gradient(135deg, #d4af37bb, #C99C51);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            position: relative;
            display: inline-block;
        }

        .ak-heading h2 .highlight::before {
            content: '';
            position: absolute;
            bottom: 4px;
            left: 0;
            width: 100%;
            height: 8px;
            background: #d4af3726;
            border-radius: 10px;
            -webkit-text-fill-color: transparent;
        }

        .ak-heading p {
            max-width: 580px;
            margin: 0 auto;
            font-size: 17px;
            line-height: 1.9;
            color: #5a5a5a;
            font-weight: 300;
            letter-spacing: 0.5px;
        }

        /* ---------- horizontal scroll / row design ---------- */
        .ak-scroll-wrapper {
            overflow-x: auto;
            padding: 12px 4px 20px 4px;
            scrollbar-width: thin;
            scrollbar-color: #d4af37 #f0ebe4;
            -webkit-overflow-scrolling: touch;
        }

        .ak-scroll-wrapper::-webkit-scrollbar {
            height: 6px;
        }

        .ak-scroll-wrapper::-webkit-scrollbar-track {
            background: #f0ebe4;
            border-radius: 10px;
        }

        .ak-scroll-wrapper::-webkit-scrollbar-thumb {
            background: #d4af37;
            border-radius: 10px;
        }

        .ak-row {
            display: flex;
            gap: 28px;
            width: max-content;
            padding: 4px 2px;
        }

        .ak-item {
            flex: 0 0 320px;
            background: #ffffff;
            border-radius: 40px 40px 40px 40px;
            padding: 32px 28px 30px;
            border: 1px solid #d4af3714;
            /* box-shadow: 0 20px 50px #00000008; */
            transition: all 0.45s cubic-bezier(0.15, 0.75, 0.4, 1);
            position: relative;
            display: flex;
            flex-direction: column;
            gap: 14px;
        }

        .ak-item:hover {
            transform: translateY(-10px) scale(1.01);
            box-shadow: 0 40px 80px #0000000f, 0 16px 40px #d4af3714;
            border-color: #C99C51;
        }

        /* card top: icon + number */
        .ak-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 4px;
        }

        .ak-icon-box {
            width: 64px;
            height: 64px;
            border-radius: 24px;
            background: linear-gradient(145deg, #fbf7ed, #f3ede2);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 30px;
            color: #C99C51;
            border: 1px solid #C99C51;
            transition: all 0.4s ease;
        }

        .ak-item:hover .ak-icon-box {
            background: linear-gradient(145deg, #C99C51, #C99C51);
            color: #fff;
            border-color: #C99C51;
            box-shadow: 0 12px 28px #d4af3740;
            transform: scale(1.04) rotate(-3deg);
        }

        .ak-number {
            font-size: 52px;
            font-weight: 800;
            color: #d4af3714;
            letter-spacing: -3px;
            line-height: 1;
            transition: all 0.4s ease;
            font-family: 'Poppins', sans-serif;
        }

        .ak-item:hover .ak-number {
            color: #d4af372e;
            transform: scale(1.06);
        }

        .ak-content {
            flex: 1;
        }

        .ak-content h3 {
            font-size: 22px;
            font-weight: 700;
            color: #1a1a1a;
            margin-bottom: 10px;
            letter-spacing: 0px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .ak-content h3 i {
            color: #d4af37;
            font-size: 17px;
            opacity: 0.7;
        }

        .ak-content p {
            font-size: 15px;
            line-height: 1.8;
            color: #555;
            font-weight: 400;
            margin-bottom: 0px;
        }

        .ak-content .ak-underline {
            width: 36px;
            height: 3px;
            background: linear-gradient(90deg, #d4af37, #f4e3b0);
            border-radius: 10px;
            margin-top: 6px;
            margin-bottom: 10px;
            transition: width 0.4s ease;
        }

        .ak-item:hover .ak-underline {
            width: 64px;
        }

        /* gold accent stripe on card edge */
        /* .ak-item::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, #d4af37, #f4e3b0, #d4af37);
            border-radius: 40px 40px 0 0;
            opacity: 0;
            transition: opacity 0.4s ease;
        }

        .ak-item:hover::after {
            opacity: 1;
        } */

        /* ---------- responsive ---------- */
        @media (max-width: 1024px) {
            .ak-heading h2 {
                font-size: 44px;
            }

            .ak-item {
                flex: 0 0 290px;
                padding: 28px 24px;
            }

            .ak-number {
                font-size: 44px;
            }

            .ak-icon-box {
                width: 56px;
                height: 56px;
                font-size: 26px;
            }
        }

        @media (max-width: 768px) {
            .ak-section {
                padding: 30px 16px;
            }

            .ak-heading {
                margin-bottom: 20px;
            }

            .ak-heading h2 {
                font-size: 36px;
                letter-spacing: -1px;
            }

            .ak-heading p {
                font-size: 15px;
                line-height: 1.7;
            }

            .ak-item {
                flex: 0 0 270px;
                padding: 24px 20px;
                border-radius: 32px;
                gap: 12px;
            }

            .ak-icon-box {
                width: 50px;
                height: 50px;
                font-size: 22px;
                border-radius: 18px;
            }

            .ak-number {
                font-size: 38px;
            }

            .ak-content h3 {
                font-size: 19px;
                gap: 8px;
            }

            .ak-content h3 i {
                font-size: 15px;
            }

            .ak-content p {
                font-size: 14px;
                line-height: 1.7;
            }

            .ak-row {
                gap: 20px;
            }

            .ak-heading .ak-badge {
                font-size: 11px;
                padding: 6px 24px;
                letter-spacing: 3px;
            }
        }

        @media (max-width: 480px) {
            .ak-heading h2 {
                font-size: 28px;
            }

            .ak-heading h2 .highlight::before {
                height: 5px;
                bottom: 1px;
            }

            .ak-item {
                flex: 0 0 240px;
                padding: 20px 16px;
                border-radius: 28px;
                gap: 10px;
            }

            .ak-icon-box {
                width: 44px;
                height: 44px;
                font-size: 18px;
                border-radius: 14px;
            }

            .ak-number {
                font-size: 30px;
            }

            .ak-content h3 {
                font-size: 17px;
                gap: 6px;
            }

            .ak-content h3 i {
                font-size: 13px;
            }

            .ak-content p {
                font-size: 13px;
                line-height: 1.6;
            }

            .ak-content .ak-underline {
                width: 28px;
                height: 2.5px;
                margin-top: 4px;
                margin-bottom: 8px;
            }

            .ak-item:hover .ak-underline {
                width: 46px;
            }

            .ak-row {
                gap: 16px;
            }

            .ak-heading .ak-badge {
                font-size: 10px;
                padding: 5px 18px;
                letter-spacing: 2px;
            }
        }

        @media (max-width: 380px) {
            .ak-heading h2 {
                font-size: 24px;
            }

            .ak-item {
                flex: 0 0 200px;
                padding: 16px 14px;
                border-radius: 22px;
            }

            .ak-icon-box {
                width: 38px;
                height: 38px;
                font-size: 16px;
                border-radius: 12px;
            }

            .ak-number {
                font-size: 24px;
            }

            .ak-content h3 {
                font-size: 15px;
            }

            .ak-content p {
                font-size: 12px;
                line-height: 1.5;
            }
        }

        /* scroll hint (desktop only) */
        @media (min-width: 769px) {
            .ak-scroll-wrapper {
                cursor: grab;
            }

            .ak-scroll-wrapper:active {
                cursor: grabbing;
            }
        }
    </style>
</head>

<body>
    <section class="ak-section">
        <div class="ak-container">

            <div class="ak-heading">
                <div class="ak-badge">
                    <i class="fas fa-crown"></i> Advance Kurta
                </div>
                <h2>Luxury <span class="highlight">Crafted</span> With Purpose</h2>
                <p>Every detail reflects timeless craftsmanship, premium fabrics, and modern sophistication.</p>
            </div>

            <!-- horizontal scrollable row -->
            <div class="ak-scroll-wrapper">
                <div class="ak-row">

                    <!-- 1 -->
                    <div class="ak-item">
                        <div class="ak-top">
                            <div class="ak-icon-box">
                                <i class="fas fa-feather-alt"></i>
                            </div>
                            <div class="ak-number">01</div>
                        </div>
                        <div class="ak-content">
                            <h3><i class="fas fa-circle-check"></i> Premium Fabrics</h3>
                            <div class="ak-underline"></div>
                            <p>Breathable premium fabrics offering unmatched comfort, luxurious texture, and
                                long-lasting durability.</p>
                        </div>
                    </div>

                    <!-- 2 -->
                    <div class="ak-item">
                        <div class="ak-top">
                            <div class="ak-icon-box">
                                <i class="fas fa-paint-brush"></i>
                            </div>
                            <div class="ak-number">02</div>
                        </div>
                        <div class="ak-content">
                            <h3><i class="fas fa-hand-sparkles"></i> Expert Craftsmanship</h3>
                            <div class="ak-underline"></div>
                            <p>Elegant embroidery and precise stitching finished by skilled artisans for a flawless
                                appearance.</p>
                        </div>
                    </div>

                    <!-- 3 -->
                    <div class="ak-item">
                        <div class="ak-top">
                            <div class="ak-icon-box">
                                <i class="fas fa-landmark"></i>
                            </div>
                            <div class="ak-number">03</div>
                        </div>
                        <div class="ak-content">
                            <h3><i class="fas fa-timeline"></i> Modern Heritage</h3>
                            <div class="ak-underline"></div>
                            <p>Traditional Indian artistry seamlessly blended with contemporary tailoring.</p>
                        </div>
                    </div>

                    <!-- 4 -->
                    <div class="ak-item">
                        <div class="ak-top">
                            <div class="ak-icon-box">
                                <i class="fas fa-calendar-check"></i>
                            </div>
                            <div class="ak-number">04</div>
                        </div>
                        <div class="ak-content">
                            <h3><i class="fas fa-star"></i> Perfect Celebrations</h3>
                            <div class="ak-underline"></div>
                            <p>Ideal for weddings, festivals, receptions, and memorable family occasions.</p>
                        </div>
                    </div>

                    <!-- 5 -->
                    <div class="ak-item">
                        <div class="ak-top">
                            <div class="ak-icon-box">
                                <i class="fas fa-heart"></i>
                            </div>
                            <div class="ak-number">05</div>
                        </div>
                        <div class="ak-content">
                            <h3><i class="fas fa-shield-alt"></i> Customer Satisfaction</h3>
                            <div class="ak-underline"></div>
                            <p>Secure shopping, premium quality, fast delivery, and dedicated customer support.</p>
                        </div>
                    </div>

                </div>
            </div>

        </div>
    </section>

    <!-- optional smooth scroll behavior -->
    <script>
        (function () {
            const wrapper = document.querySelector('.ak-scroll-wrapper');
            if (wrapper) {
                let isDown = false;
                let startX;
                let scrollLeft;

                wrapper.addEventListener('mousedown', (e) => {
                    isDown = true;
                    startX = e.pageX - wrapper.offsetLeft;
                    scrollLeft = wrapper.scrollLeft;
                    wrapper.style.cursor = 'grabbing';
                });

                wrapper.addEventListener('mouseleave', () => {
                    isDown = false;
                    wrapper.style.cursor = 'grab';
                });

                wrapper.addEventListener('mouseup', () => {
                    isDown = false;
                    wrapper.style.cursor = 'grab';
                });

                wrapper.addEventListener('mousemove', (e) => {
                    if (!isDown) return;
                    e.preventDefault();
                    const x = e.pageX - wrapper.offsetLeft;
                    const walk = (x - startX) * 1.2;
                    wrapper.scrollLeft = scrollLeft - walk;
                });
            }
        })();
    </script>
</body>

</html>