@extends('layouts.app')

@section('title', 'Sistem e-Geospatial Perhutanan')

@section('content')
    <div class="hero-section">
        <h1 class="hero-title text-white" style="font-size: 3rem;">Sistem e-Geospatial Perhutanan</h1>
        {{-- <h1 class="hero-title text-white">Sistem e-Geospatial Perhutanan</h1> --}}
        {{-- <img src="{{ asset('assets/img/geoforestLogo.png') }}" alt="GeFOREST Logo" class="geforest-logo"> --}}
    </div>
@endsection

@push('css')
<style type="text/css">
    .hero-section {
        text-align: center;
        width: 100%;
        max-width: 1200px;
        margin-inline:auto;
        padding: 0 20px;
    }

    .hero-title {
        font-size: 1.8rem;
        font-weight: 700;
        margin-bottom: 20px;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    }

    .geforest-logo {
        max-width: 400px;
        width: 100%;
        margin: 0 auto;
        filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.3));
    }

    @media (max-width: 768px) {
        .hero-title {
            font-size: 1.4rem;
        }

        .geforest-logo {
            max-width: 250px;
        }
    }
</style>
@endpush