{% extends 'base.html.twig' %}

{% block body %}
<style>
		.form-control {
			background: rgba(0, 0, 0, 0);
			border: 1px solid #8596a3;
			color: #ffffff;
			font-size: 14px;
			font-weight: 400;
			margin-bottom: 22px;
			width: 100%;
			height: 40px;
			padding-left: 20px;
			text-transform: capitalize;
		}

		.button {
			background: #ffb606;
			border: none;
			color: #ffffff;
			font-size: 16px;
			font-weight: 700;
			line-height: 1;
			margin-top: 18px;
			padding: 12px 25px;
			position: relative;
			text-transform: capitalize;
			transform: perspective(1px) translateZ(0px);
			transition-property: color;
			vertical-align: middle;
			border-radius: 5px;
		}
		[type=button]:not(:disabled),
		[type=reset]:not(:disabled),
		[type=submit]:not(:disabled),
		button:not(:disabled) {
			cursor: pointer;
		}
		[type=button],
		[type=reset],
		[type=submit],
		button {
			-webkit-appearance: button;
		}
		button,
		input {
			outline: medium none;
			color: #686868;
		}
		button,
		select {
			text-transform: none;
		}
		button,
		input,
		optgroup,
		select,
		textarea {
			margin: 0;
			font-family: inherit;
			font-size: inherit;
			line-height: inherit;
		}
		button {
			border-radius: 0;
		}
		feuille de style user-agent button {
			appearance: auto;
			writing-mode: horizontal-tb !important;
			font-style: ;
			font-variant-ligatures: ;
			font-variant-caps: ;
			font-variant-numeric: ;
			font-variant-east-asian: ;
			font-weight: ;
			font-stretch: ;
			font-size: ;
			font-family: ;
			text-rendering: auto;
			color: buttontext;
			letter-spacing: normal;
			word-spacing: normal;
			line-height: normal;
			text-transform: none;
			text-indent: 0;
			text-shadow: none;
			display: inline-block;
			text-align: center;
			align-items: flex-start;
			cursor: default;
			box-sizing: border-box;
			background-color: buttonface;
			margin: 0;
			padding: 1px 6px;
			border-width: 2px;
			border-style: outset;
			border-color: buttonborder;
			border-image: initial;
		}
		.button > button::before {
			background: #000;
			bottom: 0;
			content: "";
			left: 0;
			position: absolute;
			right: 0;
			top: 0;
			transform: scaleY(0);
			transform-origin: 50% 0 0;
			transition-duration: 0.3s;
			transition-property: transform;
			transition-timing-function: ease-out;
			z-index: -1;
			border-radius: 5px;
		}
	</style>
	<div class="page-title-area ptb-170 bg-opacity-6" style="background-image:url({{asset('assets/img/bg/17.jpg')}})">
		<div class="container">
			<div class="row">
				<div class="col-md-12">
					<div class="page-title-text">
						<h2 align="center">contact</h2>
						{# <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p> #}
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="map-2-area ptb-130">
		<div class="container">
			<div class="map-wrapper pos-relative">
				<div id="map">
					<iframe class="map-2" src="https://maps.google.com/maps?q=121%20King%20St%2C%20Melbourne%20VIC%203000%2C%20Australia&amp;t=&amp;z=13&amp;ie=UTF8&amp;iwloc=&amp;output=embed"></iframe>
				</div>
				<div class="map-content">
					<ul>
						<li>
							<i class="ti-location-pin"></i>California Street san Francisco, CA</li>
						<li>
							<i class="ti-timer"></i>9.00 am - 5.00 pm</li>
						<li>
							<i class="ti-mobile"></i>Phone : +660 256 24857
						</li>
						<li>
							<i class="ti-email"></i>Email : username@email.com,</li>
						<li>
							<i class="ti-world"></i>http:// tutoring education theme.com</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<div class="contact-area pb-130">
		<div class="container">
			<div class="row">
				<div class="col-12">
					<div class="contact-wrapper">
						<h4>Feel free to write us</h4>
						{{form_start(form)}}
						<div class="row">
							<div class="col-12" style="border: 1px solid #eeeeee; color: #959595; font-size: 12px; font-weight: 400; height: 45px; margin-bottom: 30px; padding-left: 20px; text-transform: capitalize; width: 100%;">
								{{form_widget(form.nom,{'attr':{'class': 'form-control'}})}}
							</div>
							<div class="col-12" style="border: 1px solid #eeeeee; color: #959595; font-size: 12px; font-weight: 400; height: 45px; margin-bottom: 30px; padding-left: 20px; text-transform: capitalize; width: 100%;">
								{{form_widget(form.email,{'attr':{'class': 'form-control'}})}}
							</div>
							<div class="col-12" style="border: 1px solid #eeeeee; color: #959595; font-size: 12px; font-weight: 400; height: 45px; margin-bottom: 30px; padding-left: 20px; text-transform: capitalize; width: 100%;">
								{{form_widget(form.tel,{'attr':{'class': 'form-control'}})}}
							</div>
							<div class="col-12" style="border: 1px solid #eeeeee; color: #959595; font-size: 12px; font-weight: 400; height: 45px; margin-bottom: 30px; padding-left: 20px; text-transform: capitalize; width: 100%;">
								{{form_widget(form.sujet,{'attr':{'class': 'form-control'}})}}
							</div>
							<div class="col-12" style="">
								{{form_widget(form.msg,{'attr':{'class': 'form-control'}})}}
							</div>
							<div class="col-12">
								<button type="submit" class="button">submit</button>
							</div>
						</div>
						{{form_rest(form)}}
						{% for message in app.Flashes('success') %}
							<div class="alert alert-success" role="alert">
								{{message}}
							</div>
						{%endfor %}
						{{form_end(form)}}
						<p class="form-message"></p>
					</div>
				</div>
			</div>
		</div>
	</div>
{% endblock %}