/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
Created on : 30-ago-2022, 11:44:45
Author     : CSnet
*/

.hero{
	position: relative;
	z-index: 10;
	height: 100vh;
	background-image: url('/imagenes/inicio/placas-solares-1.jpg');
	background-size: cover;
	background-position: center center;
	overflow: hidden;
}

.hero-fondo{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

.hero-forma-1{
	z-index: 20;
	opacity: .45;
	transform: scale(150%) translate(-10%, -10%);
}

.hero .caja-texto{
	position: absolute;
	z-index: 30;
	bottom: 30%;
	max-width: 580px;
}

.hero a{
	width: fit-content;
}

.hero .caja-texto a{
	border-radius: 100px;
	transition: all .2s;
	text-decoration: none;
}

.hero .caja-texto a:hover{
	background-color: rgba(255, 255, 255, 0.208);
}

.seccion-1-inicio{
	background-color: var(--principal);
}

.caja-h2{
	background-color: var(--principal2);
}

.seccion-2-inicio{
	background-image: url('/imagenes/inicio/seccion-2-fondo.jpg');
	background-size: cover;
	background-position: center center;
}

.seccion-2-inicio button{
	background-color: var(--principal2);
}

.seccion-3-inicio{
	border-bottom: 3px solid var(--principal2);
}

.seccion-3-inicio h3{
	color: var(--principal2);
}

.seccion-3-inicio .ilustracion{
	max-width: 500px;
}

/* .seccion-3-inicio .icono-check{
	display: inline-block;
    width: 30px !important; 
    text-align: center;
    margin-right: 5px; 
} */

.seccion-clientes-inicio img{
	max-width: 200px;
}

.columna-cliente-prueba img{
	background-color: rgb(196, 196, 196);
}

.seccion-5-inicio{
	background-image: url('/imagenes/inicio/seccion-5-fondo.jpg');
	background-size: cover;
	background-position: center center;
}

.seccion-5-inicio img{
	max-width: 200px;
}

.seccion-5-inicio .tarjeta{
	background-color: white;
	border-radius: 20px;
	box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
	transition: all .3s;
}

.seccion-5-inicio .tarjeta:hover{
	transform: scale(105%);
}

@media only screen and (max-width: 1299px) {
	.hero{
		height: 80vh;
	}

	.hero .caja-texto{
		bottom: 15%;
	}

	
}

@media only screen and (max-width: 1199px) {
	.hero{
		height: 50vh;
	}

	.hero-forma-1{
		display: none;
	}

	.hero .caja-texto{
		bottom: 0;
		padding-bottom: 30px;
	}
}

/* @media only screen and (max-width: 991.5px) {

} */