@extends('frontend.main_master')

@section('title', "Air Element in Astrology: Traits & Signs (Gemini, Libra, Aquarius) - " . t('site-title'))
@section('meta_description', "Explore the Air Element in astrology: personality traits, symbolism, balance, and characteristics of Gemini, Libra, Aquarius with Astro Wise.")
@section('meta_keywords', "Air Element astrology, air element, Gemini, Libra, Aquarius, astrology elements USA, astro wise")

@push('schema')
<x-seo.schema-article
    title="Air Element in Astrology: Complete Guide"
    description="The Air element rules intellect, social connection, objective perception, and progressive communication."
    image="{{ asset('frontend/images/elements/' . 'air' . '.webp') }}"
/>
<x-seo.schema-breadcrumb :items="[['name' => 'Home', 'url' => route('index')], ['name' => 'Astrological Elements', 'url' => route('elements.index')], ['name' => 'Air Element', 'url' => url()->current()]]" />
@endpush

@section('content')
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-lg-10">
            <div class="text-center mb-5">
                <span class="badge bg-primary px-3 py-2 fs-6 rounded-pill mb-3">Gemini, Libra, Aquarius</span>
                <h1 class="display-4 fw-bold mb-3">Air Element</h1>
                <p class="lead text-muted max-w-700 mx-auto">The Air element rules intellect, social connection, objective perception, and progressive communication.</p>
            </div>

            <div class="card border-0 shadow-sm p-4 p-md-5 rounded-4 mb-5">
                <h2 class="fw-bold mb-3">Elemental Nature & Influence</h2>
                <p class="text-secondary lh-lg mb-4">Air signs navigate the realm of ideas, theories, and social bridges. They synthesize complex knowledge, foster diplomatic collaboration, and envision innovative blueprints for the future.</p>
                <div class="d-flex flex-wrap gap-3">
                    <a href="{{ route('birth-chart.index') }}" class="btn btn-astro-primary px-4 py-2">
                        <i class="bi bi-compass me-2"></i>Calculate Your Elemental Balance
                    </a>
                    <a href="{{ route('elements.index') }}" class="btn btn-outline-secondary px-4 py-2">
                        Explore All 4 Elements
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection