@extends('layouts.app')

@section('title', __('general.about') . ' - ' . __('general.company_name'))

@section('content')
    <!-- Hero Section -->
    <section class="page-header"
        style="padding: 4rem 1rem; background: linear-gradient(135deg, rgba(255, 215, 0, 0.08), rgba(255, 215, 0, 0.03)); position: relative; overflow: hidden;">
        <div class="hero-bg"
            style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 50% 50%, rgba(255, 215, 0, 0.1) 0%, transparent 70%); opacity: 0.3; pointer-events: none;">
        </div>
        <div class="container text-center" style="position: relative; z-index: 1; max-width: 1200px; margin: 0 auto;">
            <div class="page-header-content" style="max-width: 800px; margin: 0 auto;">
                <h1 class="page-title"
                    style="font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Playfair Display', serif @endif; font-size: 2.8rem; color: var(--primary-gold); margin-bottom: 1.5rem; font-weight: 700; text-shadow: 0 2px 10px rgba(255, 215, 0, 0.3); line-height: 1.2;">
                    {{ __('general.about') }} {{ __('general.company_name') }}
                </h1>
                <p class="page-subtitle"
                    style="font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif; font-size: 1.3rem; color: rgba(255, 255, 255, 0.9); max-width: 700px; margin: 0 auto; line-height: 1.6; font-weight: 400;">
                    @if(current_locale() === 'ar')
                        اكتشف القصة وراء خدمة تأجير السيارات الفاخرة الرائدة في عُمان
                    @else
                        Discover the story behind Oman's premier luxury car rental service
                    @endif
                </p>
            </div>
        </div>
    </section>

    <!-- Company Story -->
    <section style="padding: 5rem 0;">
        <div class="container">
            <div class="glass-morphism" style="padding: 4rem;">
                <div class="our-story-grid"
                    style="display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center;">
                    <div>
                        <h2
                            style="font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Playfair Display', serif @endif; font-size: 2.5rem; color: var(--primary-gold); margin-bottom: 2rem; font-weight: 600;">
                            @if(current_locale() === 'ar')
                                قصتنا
                            @else
                                {{ __('Our Story') }}
                            @endif
                        </h2>
                        <p style="font-size: 1.1rem; line-height: 1.8; margin-bottom: 2rem; opacity: 0.9;">
                            @if(current_locale() === 'ar')
                                تأسست في قلب عُمان، وُلدت Q ROVER من شغف بالفخامة والتزام بالتميز. لقد أدركنا الحاجة إلى خدمة
                                تأجير سيارات مميزة يمكنها أن تضاهي الرقي والأناقة لبلدنا الجميل.
                            @else
                                {{ __('Founded in the heart of Oman, Q ROVER was born from a passion for luxury and a commitment to excellence. We recognized the need for a premium car rental service that could match the sophistication and elegance of our beautiful country.') }}
                            @endif
                        </p>
                        <p style="font-size: 1.1rem; line-height: 1.8; margin-bottom: 2rem; opacity: 0.9;">
                            @if(current_locale() === 'ar')
                                منذ تأسيسنا، كرسنا جهودنا لتقديم تجربة لا مثيل لها لعملائنا، من خلال الجمع بين أفضل المركبات
                                ومعايير الخدمة الاستثنائية التي تعكس الضيافة التي تشتهر بها عُمان.
                            @else
                                {{ __('Since our inception, we have been dedicated to providing our clients with an unparalleled experience, combining the finest vehicles with exceptional service standards that reflect the hospitality Oman is known for.') }}
                            @endif
                        </p>
                        <div style="display: flex; gap: 2rem; margin-top: 2rem;">
                            <div style="text-align: center;">
                                <div
                                    style="font-size: 2.5rem; font-weight: 700; color: var(--primary-gold); margin-bottom: 0.5rem;">
                                    500+</div>
                                <div style="opacity: 0.8;">
                                    @if(current_locale() === 'ar')
                                        عميل سعيد
                                    @else
                                        {{ __('Happy Customers') }}
                                    @endif
                                </div>
                            </div>
                            <div style="text-align: center;">
                                <div
                                    style="font-size: 2.5rem; font-weight: 700; color: var(--primary-gold); margin-bottom: 0.5rem;">
                                    50+</div>
                                <div style="opacity: 0.8;">
                                    @if(current_locale() === 'ar')
                                        مركبة فاخرة
                                    @else
                                        {{ __('Luxury Vehicles') }}
                                    @endif
                                </div>
                            </div>
                            <div style="text-align: center;">
                                <div
                                    style="font-size: 2.5rem; font-weight: 700; color: var(--primary-gold); margin-bottom: 0.5rem;">
                                    5</div>
                                <div style="opacity: 0.8;">
                                    @if(current_locale() === 'ar')
                                        مدن مغطاة
                                    @else
                                        {{ __('Cities Covered') }}
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>

                    <div
                        style="height: 400px; background: linear-gradient(45deg, #333, #555); border-radius: 20px; display: flex; align-items: center; justify-content: center;">
                        <i class="fas fa-building" style="font-size: 4rem; color: var(--primary-gold);"></i>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Mission & Vision -->
    <section style="padding: 5rem 0; background: rgba(255, 255, 255, 0.02);">
        <div class="container">
            <div class="mission-vision-grid" style="display: grid; grid-template-columns: 1fr 1fr; gap: 3rem;">
                <!-- Mission -->
                <div class="glass-card text-center">
                    <i class="fas fa-bullseye"
                        style="font-size: 3rem; color: var(--primary-gold); margin-bottom: 2rem;"></i>
                    <h3
                        style="font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Playfair Display', serif @endif; font-size: 2rem; color: var(--primary-gold); margin-bottom: 1.5rem; font-weight: 600;">
                        @if(current_locale() === 'ar')
                            مهمتنا
                        @else
                            {{ __('Our Mission') }}
                        @endif
                    </h3>
                    <p style="font-size: 1.1rem; line-height: 1.7; opacity: 0.9;">
                        @if(current_locale() === 'ar')
                            تقديم تجارب تأجير سيارات فاخرة استثنائية تفوق التوقعات، من خلال الجمع بين المركبات المميزة والخدمة
                            الشخصية لخلق رحلات لا تُنسى عبر المناظر الطبيعية الخلابة في عُمان.
                        @else
                            {{ __('To provide exceptional luxury car rental experiences that exceed expectations, combining premium vehicles with personalized service to create unforgettable journeys across the beautiful landscapes of Oman.') }}
                        @endif
                    </p>
                </div>

                <!-- Vision -->
                <div class="glass-card text-center">
                    <i class="fas fa-eye" style="font-size: 3rem; color: var(--primary-gold); margin-bottom: 2rem;"></i>
                    <h3
                        style="font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Playfair Display', serif @endif; font-size: 2rem; color: var(--primary-gold); margin-bottom: 1.5rem; font-weight: 600;">
                        @if(current_locale() === 'ar')
                            رؤيتنا
                        @else
                            {{ __('Our Vision') }}
                        @endif
                    </h3>
                    <p style="font-size: 1.1rem; line-height: 1.7; opacity: 0.9;">
                        @if(current_locale() === 'ar')
                            أن نكون شركة تأجير السيارات الفاخرة الرائدة في منطقة الخليج، معترف بها لالتزامنا بالتميز والابتكار
                            وأعلى معايير رضا العملاء وجودة الخدمة.
                        @else
                            {{ __('To be the leading luxury car rental company in the Gulf region, recognized for our commitment to excellence, innovation, and the highest standards of customer satisfaction and service quality.') }}
                        @endif
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- Values -->
    <section style="padding: 5rem 0;">
        <div class="container">
            <h2
                style="font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Playfair Display', serif @endif; font-size: 2.5rem; color: var(--primary-gold); margin-bottom: 3rem; text-align: center; font-weight: 600;">
                @if(current_locale() === 'ar')
                    قيمنا
                @else
                    {{ __('Our Values') }}
                @endif
            </h2>

            <div class="values-grid" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem;">
                <div class="glass-card text-center animate-on-scroll">
                    <i class="fas fa-crown"
                        style="font-size: 2.5rem; color: var(--primary-gold); margin-bottom: 1.5rem;"></i>
                    <h4 style="color: var(--primary-gold); margin-bottom: 1rem; font-size: 1.3rem;">
                        @if(current_locale() === 'ar')
                            التميز
                        @else
                            {{ __('Excellence') }}
                        @endif
                    </h4>
                    <p style="opacity: 0.9; line-height: 1.6;">
                        @if(current_locale() === 'ar')
                            نسعى للكمال في كل جانب من جوانب خدمتنا، من صيانة المركبات إلى التفاعل مع العملاء.
                        @else
                            {{ __('We strive for perfection in every aspect of our service, from vehicle maintenance to customer interactions.') }}
                        @endif
                    </p>
                </div>

                <div class="glass-card text-center animate-on-scroll">
                    <i class="fas fa-handshake"
                        style="font-size: 2.5rem; color: var(--primary-gold); margin-bottom: 1.5rem;"></i>
                    <h4 style="color: var(--primary-gold); margin-bottom: 1rem; font-size: 1.3rem;">
                        @if(current_locale() === 'ar')
                            الثقة
                        @else
                            {{ __('Trust') }}
                        @endif
                    </h4>
                    <p style="opacity: 0.9; line-height: 1.6;">
                        @if(current_locale() === 'ar')
                            بناء علاقات دائمة من خلال الشفافية والموثوقية والوفاء المستمر بوعودنا.
                        @else
                            {{ __('Building lasting relationships through transparency, reliability, and consistent delivery of our promises.') }}
                        @endif
                    </p>
                </div>

                <div class="glass-card text-center animate-on-scroll">
                    <i class="fas fa-heart"
                        style="font-size: 2.5rem; color: var(--primary-gold); margin-bottom: 1.5rem;"></i>
                    <h4 style="color: var(--primary-gold); margin-bottom: 1rem; font-size: 1.3rem;">
                        @if(current_locale() === 'ar')
                            الضيافة
                        @else
                            {{ __('Hospitality') }}
                        @endif
                    </h4>
                    <p style="opacity: 0.9; line-height: 1.6;">
                        @if(current_locale() === 'ar')
                            احتضان التقليد العُماني الدافئ للضيافة في كل تفاعل مع العملاء وتجربة خدمة.
                        @else
                            {{ __('Embracing the warm Omani tradition of hospitality in every customer interaction and service experience.') }}
                        @endif
                    </p>
                </div>

                <div class="glass-card text-center animate-on-scroll">
                    <i class="fas fa-leaf"
                        style="font-size: 2.5rem; color: var(--primary-gold); margin-bottom: 1.5rem;"></i>
                    <h4 style="color: var(--primary-gold); margin-bottom: 1rem; font-size: 1.3rem;">
                        @if(current_locale() === 'ar')
                            الاستدامة
                        @else
                            {{ __('Sustainability') }}
                        @endif
                    </h4>
                    <p style="opacity: 0.9; line-height: 1.6;">
                        @if(current_locale() === 'ar')
                            ملتزمون بالمسؤولية البيئية من خلال الممارسات الصديقة للبيئة والعمليات التجارية المستدامة.
                        @else
                            {{ __('Committed to environmental responsibility through eco-friendly practices and sustainable business operations.') }}
                        @endif
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- Team Section -->
    <section style="padding: 5rem 0; background: rgba(255, 255, 255, 0.02);">
        <div class="container">
            <h2
                style="font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Playfair Display', serif @endif; font-size: 2.5rem; color: var(--primary-gold); margin-bottom: 3rem; text-align: center; font-weight: 600;">
                @if(current_locale() === 'ar')
                    فريق القيادة
                @else
                    {{ __('Our Leadership Team') }}
                @endif
            </h2>

            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 3rem;">
                <div class="glass-card text-center animate-on-scroll">
                    <div
                        style="width: 120px; height: 120px; background: linear-gradient(45deg, var(--primary-gold), var(--accent-gold)); border-radius: 50%; margin: 0 auto 1.5rem; display: flex; align-items: center; justify-content: center;">
                        <i class="fas fa-user" style="font-size: 3rem; color: var(--primary-dark);"></i>
                    </div>
                    <h4 style="color: var(--primary-gold); margin-bottom: 0.5rem; font-size: 1.3rem;">
                        @if(current_locale() === 'ar')
                            أحمد الراشد
                        @else
                            {{ __('Ahmed Al-Rashid') }}
                        @endif
                    </h4>
                    <p style="opacity: 0.7; margin-bottom: 1rem; font-size: 0.9rem;">
                        @if(current_locale() === 'ar')
                            الرئيس التنفيذي
                        @else
                            {{ __('Chief Executive Officer') }}
                        @endif
                    </p>
                    <p style="opacity: 0.9; line-height: 1.6; font-size: 0.95rem;">
                        @if(current_locale() === 'ar')
                            يقود Q ROVER بخبرة تزيد عن 15 عاماً في الضيافة الفاخرة والتميز في صناعة السيارات.
                        @else
                            {{ __('Leading Q ROVER with over 15 years of experience in luxury hospitality and automotive excellence.') }}
                        @endif
                    </p>
                </div>

                <div class="glass-card text-center animate-on-scroll">
                    <div
                        style="width: 120px; height: 120px; background: linear-gradient(45deg, var(--primary-gold), var(--accent-gold)); border-radius: 50%; margin: 0 auto 1.5rem; display: flex; align-items: center; justify-content: center;">
                        <i class="fas fa-user" style="font-size: 3rem; color: var(--primary-dark);"></i>
                    </div>
                    <h4 style="color: var(--primary-gold); margin-bottom: 0.5rem; font-size: 1.3rem;">
                        @if(current_locale() === 'ar')
                            سارة الزهراء
                        @else
                            {{ __('Sarah Al-Zahra') }}
                        @endif
                    </h4>
                    <p style="opacity: 0.7; margin-bottom: 1rem; font-size: 0.9rem;">
                        @if(current_locale() === 'ar')
                            مديرة العمليات
                        @else
                            {{ __('Operations Director') }}
                        @endif
                    </p>
                    <p style="opacity: 0.9; line-height: 1.6; font-size: 0.95rem;">
                        @if(current_locale() === 'ar')
                            تضمن العمليات السلسة والتجارب الاستثنائية للعملاء في جميع مواقع Q ROVER.
                        @else
                            {{ __('Ensuring seamless operations and exceptional customer experiences across all Q ROVER locations.') }}
                        @endif
                    </p>
                </div>

                <div class="glass-card text-center animate-on-scroll">
                    <div
                        style="width: 120px; height: 120px; background: linear-gradient(45deg, var(--primary-gold), var(--accent-gold)); border-radius: 50%; margin: 0 auto 1.5rem; display: flex; align-items: center; justify-content: center;">
                        <i class="fas fa-user" style="font-size: 3rem; color: var(--primary-dark);"></i>
                    </div>
                    <h4 style="color: var(--primary-gold); margin-bottom: 0.5rem; font-size: 1.3rem;">
                        @if(current_locale() === 'ar')
                            عمر البلوشي
                        @else
                            {{ __('Omar Al-Balushi') }}
                        @endif
                    </h4>
                    <p style="opacity: 0.7; margin-bottom: 1rem; font-size: 0.9rem;">
                        @if(current_locale() === 'ar')
                            مدير الأسطول
                        @else
                            {{ __('Fleet Manager') }}
                        @endif
                    </p>
                    <p style="opacity: 0.9; line-height: 1.6; font-size: 0.95rem;">
                        @if(current_locale() === 'ar')
                            يحافظ على أسطولنا الفاخر بأعلى المعايير ويوفر أفضل المركبات لمجموعتنا.
                        @else
                            {{ __('Maintaining our luxury fleet to the highest standards and sourcing the finest vehicles for our collection.') }}
                        @endif
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- Why Choose Us -->
    <section style="padding: 5rem 0;">
        <div class="container">
            <h2
                style="font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Playfair Display', serif @endif; font-size: 2.5rem; color: var(--primary-gold); margin-bottom: 3rem; text-align: center; font-weight: 600;">
                @if(current_locale() === 'ar')
                    لماذا تختار Q ROVER؟
                @else
                    {{ __('Why Choose Q ROVER?') }}
                @endif
            </h2>

            <div class="glass-morphism" style="padding: 3rem;">
                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 3rem;">
                    <div style="display: flex; align-items: flex-start; gap: 1.5rem;">
                        <div
                            style="background: var(--primary-gold); color: var(--primary-dark); width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
                            <i class="fas fa-star" style="font-size: 1.5rem;"></i>
                        </div>
                        <div>
                            <h4 style="color: var(--primary-gold); margin-bottom: 1rem;">
                                @if(current_locale() === 'ar')
                                    أسطول مميز
                                @else
                                    {{ __('Premium Fleet') }}
                                @endif
                            </h4>
                            <p style="opacity: 0.9; line-height: 1.6;">
                                @if(current_locale() === 'ar')
                                    مجموعة مختارة بعناية من المركبات الفاخرة من الشركات المصنعة المشهورة عالمياً، محافظ عليها
                                    بالكمال.
                                @else
                                    {{ __('Carefully curated collection of luxury vehicles from world-renowned manufacturers, maintained to perfection.') }}
                                @endif
                            </p>
                        </div>
                    </div>

                    <div style="display: flex; align-items: flex-start; gap: 1.5rem;">
                        <div
                            style="background: var(--primary-gold); color: var(--primary-dark); width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
                            <i class="fas fa-clock" style="font-size: 1.5rem;"></i>
                        </div>
                        <div>
                            <h4 style="color: var(--primary-gold); margin-bottom: 1rem;">
                                @if(current_locale() === 'ar')
                                    دعم 24/7
                                @else
                                    {{ __('24/7 Support') }}
                                @endif
                            </h4>
                            <p style="opacity: 0.9; line-height: 1.6;">
                                @if(current_locale() === 'ar')
                                    دعم العملاء على مدار الساعة والمساعدة على الطريق لضمان راحة بالك طوال رحلتك.
                                @else
                                    {{ __('Round-the-clock customer support and roadside assistance to ensure your peace of mind throughout your journey.') }}
                                @endif
                            </p>
                        </div>
                    </div>

                    <div style="display: flex; align-items: flex-start; gap: 1.5rem;">
                        <div
                            style="background: var(--primary-gold); color: var(--primary-dark); width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
                            <i class="fas fa-map-marked-alt" style="font-size: 1.5rem;"></i>
                        </div>
                        <div>
                            <h4 style="color: var(--primary-gold); margin-bottom: 1rem;">
                                @if(current_locale() === 'ar')
                                    مواقع مريحة
                                @else
                                    {{ __('Convenient Locations') }}
                                @endif
                            </h4>
                            <p style="opacity: 0.9; line-height: 1.6;">
                                @if(current_locale() === 'ar')
                                    مواقع استراتيجية في جميع أنحاء عُمان بما في ذلك المطارات والفنادق ومراكز المدن لأقصى راحة.
                                @else
                                    {{ __('Strategic locations across Oman including airports, hotels, and city centers for maximum convenience.') }}
                                @endif
                            </p>
                        </div>
                    </div>

                    <div style="display: flex; align-items: flex-start; gap: 1.5rem;">
                        <div
                            style="background: var(--primary-gold); color: var(--primary-dark); width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
                            <i class="fas fa-shield-alt" style="font-size: 1.5rem;"></i>
                        </div>
                        <div>
                            <h4 style="color: var(--primary-gold); margin-bottom: 1rem;">
                                @if(current_locale() === 'ar')
                                    تأمين شامل
                                @else
                                    {{ __('Comprehensive Insurance') }}
                                @endif
                            </h4>
                            <p style="opacity: 0.9; line-height: 1.6;">
                                @if(current_locale() === 'ar')
                                    تغطية تأمينية كاملة وأسعار شفافة بدون رسوم مخفية أو تكاليف غير متوقعة.
                                @else
                                    {{ __('Full insurance coverage and transparent pricing with no hidden fees or unexpected charges.') }}
                                @endif
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section style="padding: 5rem 0; background: rgba(255, 215, 0, 0.1);">
        <div class="container text-center">
            <div class="glass-morphism" style="padding: 3rem; max-width: 600px; margin: 0 auto;">
                <h2
                    style="font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Playfair Display', serif @endif; font-size: 2.5rem; color: var(--primary-gold); margin-bottom: 1rem; font-weight: 600;">
                    @if(current_locale() === 'ar')
                        مستعد لتجربة الفخامة؟
                    @else
                        {{ __('Ready to Experience Luxury?') }}
                    @endif
                </h2>
                <p style="font-size: 1.1rem; margin-bottom: 2rem; opacity: 0.9;">
                    @if(current_locale() === 'ar')
                        انضم إلى مئات العملاء الراضين الذين اختاروا Q ROVER لاحتياجات النقل الفاخر.
                    @else
                        {{ __('Join hundreds of satisfied customers who have chosen Q ROVER for their luxury transportation needs.') }}
                    @endif
                </p>
                <div style="display: flex; justify-content: center; gap: 1rem;">
                    <a href="{{ route('vehicles.index') }}" class="btn-primary" style="padding: 15px 30px;">
                        @if(current_locale() === 'ar')
                            تصفح المركبات
                        @else
                            {{ __('Browse Vehicles') }}
                        @endif
                    </a>
                    <a href="{{ route('contact') }}" class="btn-secondary" style="padding: 15px 30px;">
                        @if(current_locale() === 'ar')
                            {{ __('general.contact') }}
                        @else
                            {{ __('general.contact') }} {{ __('Us') }}
                        @endif
                    </a>
                </div>
            </div>
        </div>
    </section>

    @push('styles')
        <style>
            @media (max-width: 768px) {
                .about-grid {
                    grid-template-columns: 1fr !important;
                }

                /* Fix Mission & Vision Cards Mobile Layout */
                .mission-vision-grid {
                    grid-template-columns: 1fr !important;
                    gap: 2rem !important;
                }

                /* Fix Our Story Section Mobile Layout */
                .our-story-grid {
                    grid-template-columns: 1fr !important;
                    gap: 2.5rem !important;
                    text-align: center !important;
                }

                /* Improve Mission & Vision Card Spacing */
                .glass-card {
                    padding: 2rem 1.5rem !important;
                    margin-bottom: 1.5rem;
                }

                /* Fix Our Story Statistics Layout */
                div[style*="display: flex; gap: 2rem"] {
                    flex-direction: column !important;
                    gap: 1.5rem !important;
                    align-items: center !important;
                }

                /* Improve Our Story Section Padding */
                .glass-morphism {
                    padding: 2.5rem 1.5rem !important;
                }

                .stats-flex {
                    flex-direction: column !important;
                    gap: 1rem !important;
                }

                .values-grid {
                    grid-template-columns: 1fr !important;
                    gap: 1.5rem !important;
                }

                .values-grid .glass-card {
                    padding: 2rem 1.5rem !important;
                }

                .team-grid {
                    grid-template-columns: 1fr !important;
                }

                .features-grid {
                    grid-template-columns: 1fr !important;
                }

                .cta-flex {
                    flex-direction: column !important;
                }
            }

            @media (max-width: 992px) {
                .values-grid {
                    grid-template-columns: repeat(2, 1fr) !important;
                    gap: 1.8rem !important;
                }
            }

            @media (max-width: 576px) {
                .values-grid {
                    grid-template-columns: 1fr !important;
                    gap: 1.5rem !important;
                }

                .values-grid .glass-card {
                    padding: 2rem 1.5rem !important;
                    max-width: 100% !important;
                    margin: 0 auto !important;
                }

                .team-grid {
                    grid-template-columns: 1fr !important;
                    gap: 2rem !important;
                }

                .why-choose-grid {
                    grid-template-columns: 1fr !important;
                    gap: 2rem !important;
                }

                .glass-morphism {
                    padding: 2rem 1.5rem !important;
                }
            }

            @media (max-width: 480px) {
                .values-grid {
                    grid-template-columns: 1fr !important;
                    gap: 1rem !important;
                }

                .values-grid .glass-card {
                    padding: 1.5rem 1rem !important;
                }

                .values-grid h4 {
                    font-size: 1.1rem !important;
                }

                .values-grid i {
                    font-size: 2rem !important;
                    margin-bottom: 1rem !important;
                }
            }
        </style>
    @endpush
@endsection