Sindbad~EG File Manager

<style>
	body {
		background-image: url('/frontend/equipo.jpg');
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}
	.form-group select {
		background-color: #c29e52; /* Oro */
		color: white;
		font-weight: bold;
		border: none;
		border-radius: 5px;
		font-size: 16px;
		width: 100%;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
		cursor: pointer;
	}

  .form-group select:hover {
    background-color:rgb(204, 161, 67);
  }

  .misiones {
    padding: 10px 20px;
  }

  .misiones .row {
    background-color: #c29e52; /* Oro oscuro */
    padding: 5px;
    cursor: pointer;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, background-color 0.2s;
    margin-left: 0;
  }

  .misiones .row:hover {
    background-color: #b48b30; /* Más oscuro al hover */
    transform: scale(1.05);
  }

  .misiones .row .col-9 p {
    color: white;
    font-size: 16px;
    font-weight: bold;
    margin: 0;
  }

  .misiones .row .col-3 {
    color: white;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
  }
</style>

<div class="col-md-8">
	<br><br>
	<div class="col-md-12" align="center"><br>
		<h1 style="font-size: 4vw; font-weight: bold;">MISIONES DISPONIBLES</h1>
	</div>
	<div class="form-group"> 
		<select class="form-control" wire:model="anho">
		@php
			use Carbon\Carbon;
			$currentYear = Carbon::now()->year;
			$startYear = 2025;
			$endYear = $startYear + 5;
		@endphp
		@for ($year = $startYear; $year < $endYear; $year++)
			<option value="{{ $year }}">{{ $year }}</option>
		@endfor
		</select>
	</div>

	@php
		$meses = array("Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Setiembre", "Octubre", "Noviembre", "Diciembre");
		$contador = 1;
	@endphp

	<div class="row ">
	@foreach ($meses as $element)
		<div class="col-md-3 misiones" wire:click="selectmes({{ $contador }})">
		<div class="row">
			<div class="col-9">
			<p>{{ $element }}</p>
			</div>
			<div class="col-3">
			<b>+</b>
			</div>
		</div>
		</div>
		@php
		$contador++;
		@endphp
	@endforeach
	</div>
</div>
<div class="col-md-4">
	<div style="display: flex; justify-content: center; align-items: center; height: 100%;">
		<img src="/frontend/actualizado.png" style="max-width: 100%; height: auto;" alt="Dynamic Image">
	</div>
</div>