@extends('layouts.plantilla')
@section('contacto','active')
@section('content')

<style>
    .header{
        /* background-color: #F5F5F5; */
        background: rgba(231, 242, 248, 0.3);
    }

    .titulo{
        /*
        font-family: 'Montserrat', sans-serif;
        font-weight: 500;
        font-size: 30px;
        line-height: 126.19%;
        letter-spacing: 0.02em;
        color: #333;
        */
        
        font-family: 'Montserrat';
        font-weight: 600;
        font-size: 35px;
        line-height: 43px;
        color: #174CA0;
        /* text-transform: uppercase; */
    }
    .breadcrumb li a{
        font-family: 'Montserrat', sans-serif;
        font-weight: 300;
        font-size: 13px;
        color: #000;
        line-height: 15.41px;
        text-decoration: none !important;
    }

    .breadcrumb li.active a{
        font-weight: 400 !important;
    }

    textarea{
        resize: none !important;
    }

    ul{
        list-style: none !important;
        list-style-position: outside;
    }

    label{
        font-family: 'Montserrat', sans-serif;
        font-size: 16px;
        font-weight: 400;
        color: #131313 !important;
        line-height: 19px;
    }

    .card{
        border: none !important;
    }
    .sidebar .card-text{
        font-family: 'Inter';
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 161%;
        color: #545454;
    }
    div.d-flex p, div.d-flex a{
        font-family: 'Inter';
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 22px;
        color: #8C8C8C;
        margin-left: 10px;
        text-decoration: none !important;
    }
    .contacto_img{
        margin-right: 5px;
        margin-left: 5px;
    }

    button.enviar{
        background: #F38130 !important;
        border: 1px solid #F38130 !important;
        color: #FFF !important;
        border-radius: 0px !important;
        padding: 10px 32px !important;

       font-family: 'Inter';
       font-style: normal;
       font-weight: 600;
       font-size: 16px;
       line-height: 19px;
       letter-spacing: 0.03em;
       text-transform: capitalize;
       color: #FFFFFF;
       
        transition: 0.4s ease all;
    }

    button.enviar:hover{
        background-color: #FFF  !important;
        color: #F38130 !important;
    }
    
    input, textarea{
        border: 1px solid #838383 !important;
    }
    
    .custom-file-button input[type=file]::-webkit-file-upload-button {
        display: none;
    }
    .custom-file-button input[type=file]::file-selector-button {
        display: none;
    }
    .custom-file-button:hover label {
        cursor: pointer;
    }
    
    .custom-file-button label{
        background-color: rgba(231, 242, 248, 0.3) !important;
        font-family: 'Ubuntu';
        font-style: normal;
        font-weight: 500;
        font-size: 16px;
        line-height: 18px;
        letter-spacing: 0.08em;
        color: #174CA0 !important;
        text-transform: uppercase;
        border-top:1px solid #838383;
        border-left:1px solid #838383;
        border-bottom:1px solid #838383;
    }
    
    label.form-label{
        font-family: 'Inter';
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 30px;
        color: #333333;
    }
    
    input[type=file]{
        border-left: none !important;
    }
    
    input[type=text], input[type=email], textarea{
        border: 1px solid rgba(79, 79, 79, 0.3) !important;
        border-radius: 0px !important;
    }
    
    .form-check-label{
        font-family: 'Inter';
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 19px;
        color: #333333;
    }
    
    .sidebar .fa-envelope, .sidebar .fa-phone-alt, .sidebar .fa-map-marker-alt, .sidebar .fa-whatsapp{
        color: #F38130 !important;
    }
    
    /*.form-check-input{*/
    /*    background: #C4C4C4 !important;*/
    /*    border-radius: 1px !important;*/
    /*}*/
    
    /*.form-check-input:checked[type=checkbox]{*/
    /*    background: #C4C4C4 !important;*/
    /*    border-radius: 1px !important;*/
    /*}*/
    
    .form-check-input:checked{
        background: #C4C4C4;
        border-radius: 0px !important;
    }
    
    .form-check-input{
        border-radius: 0px !important;
    }
    
    .sidebar .card-title{
        font-family: 'Inter';
        font-style: normal;
        font-weight: 600;
        font-size: 32px;
        line-height: 39px;
        color: #333333;
    }
    
    div.d-flex .encabezado{
        margin-left: 0 !important;
        font-weight: 500 !important;
    }

    @media screen and (min-width: 992px){
        .enviarMje{
            margin-top: 30px;
        }
    }
    @media screen and (min-width: 992px){
        .menu > .container-fluid{
            align-items: flex-end !important;
        }
    }
</style>

<!--<div class="header">-->
<!--    <div class="container" class="mb-5">-->
        <!--
<!--        <nav class="breadcrumb-menu pb-3" style="--bs-breadcrumb-divider: '|';" aria-label="breadcrumb" style="color: #2B2E39;">-->
<!--            <ol class="breadcrumb">-->
<!--                <li class="breadcrumb-item"><a href="#">Inicio</a></li>-->
<!--                <li class="breadcrumb-item active" aria-current="page"><a href="#">Contacto</a></li>-->
<!--            </ol>-->
<!--        </nav>-->
<!--        -->
        <!--<h1 class="titulo py-4">Contacto</h1>-->
<!--    </div>-->
<!--</div>-->

<div class="container-fluid p-3">
    <div class="row">
        <div class="col-12" style="padding:0;">
            <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d6562.961920222733!2d-58.5079659!3d-34.6678089!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x95bcc91dea5f5f55%3A0x91e8c8bae6f0a09f!2sPila%207308%2C%20C1440%20CABA!5e0!3m2!1ses!2sar!4v1666193118074!5m2!1ses!2sar" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
        </div>
    </div>
</div>

<div class="container contacto">
    <div class="row py-4">
        @if(session()->has('success'))
            <div class="col-12">
                <div class="alert alert-success">
                    {{ session()->get('success') }}
                </div>
            </div>
        @endif
        <div class="sidebar col-md-4 col-sm-12">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body pt-0 ps-0">
                            <h5 class="card-title mb-3">Grupo Helmont</h5>
                            <p class="card-text">Para mayor informaci&oacute;n, no dude en contactarse mediante el siguiente formulario, o a trav&eacute;s de nuestras v&iacute;as de comunicaci&oacute;n.</p>
                        </div>
                    </div>
                    <div class="d-flex align-items-center mb-3">
                        <i class="fas fa-map-marker-alt fa-lg" aria-hidden="true"></i>
                        <p class="mb-0"></p>
                    </div>
                                                                                <div class="d-flex align-items-center mb-3">
                        <i class="fas fa-envelope fa-lg" aria-hidden="true"></i>
                        <a href="mailto:"></a>
                    </div>
                    <div class="d-flex">
                        <p class="encabezado mb-1">Departamento de ventas</p>
                    </div>
                    <div class="d-flex align-items-center mb-3">
                        <i class="fas fa-envelope fa-lg" aria-hidden="true"></i>
                        <a href="mailto:"></a>
                    </div>
                    <div class="d-flex">
                        <p class="encabezado mb-1">Departamento de administraci&oacute;n</p>
                    </div>
                    <div class="d-flex align-items-center">
                        <i class="fas fa-envelope fa-lg" aria-hidden="true"></i>
                        <a href="mailto:"></a>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-lg-8 col-md-8 col-sm-12">
            <form class="formContacto row" method="POST" action="