<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>GRUPO AGROMX</title>
	<link rel="shortcut icon" href="assets/icon/icono.png" type="image/x-icon">
	<link rel="stylesheet" href="css/generales.css">
	<link rel="stylesheet" href="css/styles-header.css">
	<link rel="stylesheet" href="css/styles.css">
	<link rel="stylesheet" href="css/styles-footer.css">
  <link rel="stylesheet" href="css/style-contact.css">
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400&display=swap" rel="stylesheet">
	<link rel="stylesheet" href="css/addstyle.css">	
	<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/locale/es.min.js"></script>
 
</head>
<body>
  <header>
    <?php
    require_once('secciones/header.php');
    ?>
  </header>
 <!-- VIDEO -->
<div>
	<video autoplay muted loop>
			<source src="assets/media/video.mp4" type="video/mp4">
			Tu navegador no soporta video en html5
	</video>
</div>

<div class="bg-video"></div>
<!-- FIN DEL VIDEO -->

<!-- SLOGAN -->
<div class="banner-secciones"></div>
<!-- FIN -->

<!-- pleca -->
<div class="pleca-1" >
<img src="assets/img/pleca-1.svg" >
</div>

<!-- titulo -->

<section  class="position-cont" >
  <div class="titulos">
    <div class="sub-tit"><h3>CONTACTO</h3></div>
  </div>
</section>


<div class="titulos">
	<div class="sub-tit"><h3>Grupo AGROMX</h3></div>
	<div><h2> agradece tu interés.</h2></div>
</div>  
	<div class="pleca-cont"><img src="assets/img/pleca-contacto.jpg"></div>	
<section class="spacer100"></section>

		<!-- FORMULARIO DE CONTACTO -->
		<div class="contact-container">
			<div class="contact-image">
				
			<div><h2> AGROMX presente en 22 Estados de la república:</h2></div>
				<img src="assets/img/mapa.png" alt="Imagen de Contacto">
			</div>
			
			<div class="contact-form">
				<form>
					<h2>Contacto</h2>
					<label for="nombre">Nombre:</label>
					<input type="text" id="nombre" name="nombre" required>
					<label for="estado">Estado:</label>
					<input type="text" id="estado" name="estado" required>
					<label for="municipio">Municipio:</label>
					<input type="text" id="municipio" name="municipio" required>
					<label for="telefono">Teléfono:</label>
					<input type="tel" id="telefono" name="telefono" required>
					<label for="correo">Correo electrónico:</label>
					<input type="email" id="correo" name="correo" required>
					<label for="producto">Producto de interés:</label>
					<select id="producto" name="producto" required>
						<option value="">Selecciona una opción</option>
						<option value="LOVOL">LOVOL</option>
						<option value="MAQMUT">MAQMUT</option>
						<option value="AOSHENG">AOSHENG</option>
						<option value="AS POWER GARDEN TOOLS">AS POWER GARDEN TOOLS</option>
						
						<option value="BEE MACH">BEE MACH</option>
						<option value="GREEN DROP">GREEN DROP</option>
						<option value="BIOAMIN">BIOAMIN</option>
						<option value="ARTAL">ARTAL</option>
					</select>
					<label for="mensaje">Mensaje:</label>
					<textarea id="mensaje" name="mensaje" required></textarea>
					<input type="submit" value="Enviar">
				</form>
			</div>
		</div>
		
<div class="spacer100"></div>


<!-- footer -->

<div>
<?php
    require_once('secciones/footer.php');
    ?>
</div>
<script src="info_financiera.js"></script>
<script src="main.js"></script>
<script type="text/javascript">
	window.addEventListener("scroll", function(){
		var header = document.querySelector("header"); header.classList.toggle("abajo", window.scrollY>0);
	})
</script>
</body>