@extends('layouts.dashly')
@section('title', $title)
@push('styles')
    <style>
        /* .select-menu {
                                              max-width: 330px;
                                              margin: 50px auto;
                                            } */
        .select-menu .select-btn {
            display: flex;
            height: 55px;
            background: #fff;
            padding: 20px;
            font-size: 18px;
            font-weight: 400;
            border-radius: 8px;
            align-items: center;
            cursor: pointer;
            justify-content: space-between;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
        }

        .select-btn i {
            font-size: 25px;
            transition: 0.3s;
        }

        .select-menu.active .select-btn i {
            transform: rotate(-180deg);
        }

        .select-menu .options {
            position: relative;
            padding: 10px;
            margin-top: 10px;
            border-radius: 8px;
            background: #fff;
            display: none;
        }

        .select-menu.active .options {
            display: block;
            opacity: 0;
            animation-name: fadeInUp;
            -webkit-animation-name: fadeInUp;
            animation-duration: 0.4s;
            animation-fill-mode: both;
            -webkit-animation-duration: 0.4s;
            -webkit-animation-fill-mode: both;
        }

        .options .option {
            display: flex;
            height: 55px;
            cursor: pointer;
            padding: 0 16px;
            border-radius: 8px;
            align-items: center;
            background: #fff;
        }

        .options .option:hover {
            background: #f2f2f2;
        }

        .option i {
            font-size: 25px;
            margin-right: 12px;
        }

        .option .option-text {
            font-size: 18px;
            color: #333;
        }

        @keyframes fadeInUp {
            from {
                transform: translate3d(0, 30px, 0);
            }

            to {
                transform: translate3d(0, 0, 0);
                opacity: 1;
            }
        }





        .select-menu2 .select-btn2 {
            display: flex;
            height: 55px;
            background: #fff;
            padding: 20px;
            font-size: 18px;
            font-weight: 400;
            border-radius: 8px;
            align-items: center;
            cursor: pointer;
            justify-content: space-between;
        }

        .select-btn2 i {
            font-size: 25px;
            transition: 0.3s;
        }

        .select-menu.active2 .select-btn2 i {
            transform: rotate(-180deg);
        }

        .select-menu2 .options2 {
            position: relative;
            padding: 10px;
            margin-top: 10px;
            border-radius: 8px;
            background: #fff;
            display: none;
        }

        .select-menu.active2 .options2 {
            display: block;
            opacity: 0;
            animation-name: fadeInUp;
            -webkit-animation-name: fadeInUp;
            animation-duration: 0.4s;
            animation-fill-mode: both;
            -webkit-animation-duration: 0.4s;
            -webkit-animation-fill-mode: both;
        }

        .options2 .option2 {
            height: 55px;
            cursor: pointer;
            padding: 0 16px;
            border-radius: 8px;
            background: #fff;
        }

        .options2 .option2:hover {
            background: #f2f2f2;
        }

        .option-text2 {
            font-size: 18px;
            color: #333;
        }

        @keyframes fadeInUp {
            from {
                transform: translate3d(0, 30px, 0);
            }

            to {
                transform: translate3d(0, 0, 0);
                opacity: 1;
            }
        }
    </style>
@endpush
@section('content')
    <!-- Title -->
    <h1 class="h2">
        Buy an investment plan
    </h1>
    <livewire:user.investment-plan />

@endsection