/* CSS Document */
@charset "utf-8";

:root {
  --red: #81000b;
  --red-medium: #c2131b;
  --orange: #f7941e;

  --grey: #3a3a3c;
  --grey-light: #b3b3b3;
  --grey-hard: #333333;

  --blue: #1c7ed6;

  --green: #25d366;
  --green-h: #128c7e;

  --black: #000000;
  --white: #ffffff;

  --font-gral: "Roboto", sans-serif;
  --fonttitle: "Roboto Flex", sans-serif;
  --font-bold: "Oswald", sans-serif;
}

*,
*:before,
*:after {
  margin: 0px;
  padding: 0px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html,
body {
  font-size: 62.5%;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

/* CONTENEDOR GENERAL */
.contenedor {
  width: 90%;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .contenedor {
    max-width: 120rem;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-gral);
}

p,
a,
span {
  font-family: var(--font-gral);
}

	.main{
		width: 100%;
		height: 100vh;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		align-content: center;
		align-items: center;

		background-image: url(images/bg-instantcar.jpg);
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
	}

	header{
		position: fixed;
		width: 100vw;
		z-index: 999;
		height: 80px;
		top: 0px;
		/* background-color: rgba(255, 255, 255, 0.8); */
		display: flex;
	}

	.navLinks{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.logotipo img{
		width: 160px;
		height: auto;
	}

	.header__links {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		gap: 20px;
	}

	.header__links a{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		text-decoration: none;
		gap: 8px;
	}

	.header__links a img{
		width: 20px;
		height: auto;
	}

	.header__links a span{
		font-size: 1.5rem;
		color: var(--black);
	}

	.block__Info{
		position: absolute;
		width: 100%;
		height: 50%;
		top: 35%;
		left: 25%;
		transform: translate(-25%, -10%);

		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.title{
		display: flex;
		flex-direction: column;
		z-index: 4;
	}

	@media(max-width: 768px){ 
		.block__Info h1{
			font-size: 8rem !important;
		}
	}

	.block__Info h1{
		font-size: 12rem;
		color: var(--black);
		font-weight: 800;
		font-style: italic;
		text-transform: uppercase;
		text-align: center;
		margin: 0px;
		font-family: var(--font-bold);
	}
	
	@media(max-width: 768px){ 
		.block__Info h2{
			font-size: 3rem !important;
		}
	}

	.block__Info h2{
		font-size: 4rem;
		color: var(--black);
		text-align: center;
		margin: 0px;
		font-style: italic;
		font-family: var(--font-bold);
	}

	.autoFront{
		width: 40%;
		height: auto;
		margin:0 auto;
		margin-top: -30px;
		z-index: 6;
	}

	@media(min-width: 768px) and (max-width:1004px){ 
		.autoFront{
			width: 50%;
		}
	}

	@media(max-width: 768px){ 
		.autoFront{
			width: 90%;
		}
	}

	.info__Text{
		margin: 0 auto;
	}

	.info__Text p{
		font-size: 22px;
		font-weight: 400;
		text-align: center;
		color: var(--color-blanco);
	}

	.info__data{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 30px;
	}

	@media(max-width: 768px){ 
	.info__data{
		flex-direction: column;
		gap: 10px;
		}
	}

	.info__data a{
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 10px;

		font-size: 20px;
		text-decoration: none;

		color: var(--color-blanco);
	}

	@media(min-width: 768px) and (max-width:1004px){ 
		.info__data a{
			font-size: 16px;
		}
	}

	@media(max-width:1200px){ 
		.block__Contact{
			width: 90% !important;
		}
	}

	.block__Contact{
		position: relative;
		width: 100%;
		height: auto;
		top: 30px;
		left: 0;

		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;


		background-color: var(--black);
		padding:20px;
		border-radius: 12px;
	}

	@media(max-width: 768px){ 
		.contacts{
			flex-direction: column !important;
			align-items: center !important;
			justify-content: center !important;
		}

		.contacts a:nth-of-type(1){
			width: 80% !important;
			text-align: center;
			align-items: flex-start !important;
		}
	}

	.contacts{
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
		gap: 15px;
	}

	.contacts a{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		text-decoration: none;
		gap: 5px;
	}

	.contacts a img{
		width: 20px;
		height: auto;
	}

	.contacts a span{
		font-size: 15px;
		color: var(--white);
		font-weight: 500;
	}