/* 
----------
GLOBAL
----------
*/

.container {
  max-width: 1200px;
}

/* 
----------
WELCOME
----------
*/

.welcome-container {
  height: 100vh;
  max-width: 100vw;
  width: 100vw;
  background-image: linear-gradient(to bottom, #ffffff48, #0000005d),
    url("../imagenes/apliIOT.webp");
  background-size: cover;
}

.welcome-section {
  color: white;
  padding-top: 250px;
  text-align: center;
}

#explore-button {
  color: white;
}

#explore-button:hover {
  background-color: #22222275;
}

/* 
----------
EXPLORE
----------
*/

.explore-section {
  text-align: center;
}

/* 
----------
SERVICES
----------
*/

.services-section {
  text-align: center;
}

/* 
----------
ADDRESS
----------
*/

.address-section {
  text-align: center;
}

/* 
----------
CONTACT
----------
*/

.contact-section {
  text-align: center;
}

.contact-form {
  text-align: left;
}

/* 
----------
FOOTER
----------
*/

.footer-container {
  width: 100%;
  background-color: #222222;
}

.footer-section {
  color: white;
  padding: 30px 0px;
}

/* 
----------
LOGIN
----------
*/

.login-section {
  padding-top: 150px;
  text-align: center;
}

.login-error-container {
  padding-top: 150px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

.login-error-container a {
  text-decoration: none;
}

/* 
----------
ADMIN
----------
*/

.admin-container {
  margin: 0;
  width: 100vw;
}

.admin-panel {
  height: 100vh;
  padding-top: 150px;
  color: #ffffff;
  background: #222222;
  text-align: center;
}

.admin-panel ul {
  list-style-type: none;
  padding-left: 25%;
  text-align: left;
}

.admin-requests {
  padding-top: 50px;
}

/* 
----------
Select
----------
*/

.pricing-section {
  text-align: center;
  padding-top: 30px;
}

.select-section {
  padding-top: 30px;
}
body {
  background-image: url('../imagenes/fondo.jpg'); /* Ajusta la ruta si es necesario */
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
/* Cambia el color del título "Inicio de Sesión" */
.title {
  color: #27f22e; /* Cambia el color según tu preferencia */
}

/* Cambia el color de los labels "Usuario" y "Contraseña" */
label {
  color: #91f895; /* Color azul, puedes modificarlo */
  font-weight: bold;
}

/* Cambia el color del botón "Crear Nuevo Administrador" */
.button {
  background-color: #27ae60; /* Verde */
  color: rgb(255, 255, 255); /* Texto en blanco */
  border: none;
}

.button:hover {
  background-color: #219150; /* Un verde más oscuro al pasar el mouse */
}

/* Cambia el color del botón "Iniciar Sesión" */
.button-primary {
  background-color: #e74c3c; /* Rojo */
  color: white;
  border: none;
}

.button-primary:hover {
  background-color: #c0392b; /* Un rojo más oscuro al pasar el mouse */
}
.author-container {
  text-align: center;
  padding: 40px 0;
}

.author-img {
  border-radius: 10px;
  max-width: 50%;
  height: auto;
}
.services-container {
  background-color: #9df893; 
  padding: 40px 0;
}
#footer {
	background: #262626;
	padding: 50px 0 0 0;
}
#footer h3 {
	color: #8eb640;
	font-weight: 400;
	font-size: 18px;
	text-transform: uppercase;
	margin-bottom: 20px;
}
#footer .copyrights {
	padding: 20px 0;
	margin-top: 50px;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#779936+0,8eb640+50 */
	background: rgb(119,153,54); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(119,153,54,1) 0%, rgba(142,182,64,1) 50%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(119,153,54,1) 0%, rgba(142,182,64,1) 50%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(119,153,54,1) 0%, rgba(142,182,64,1) 50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#779936', endColorstr='#8eb640', GradientType=0 ); /* IE6-9 */
}
#footer .social {
	margin: 20px 0 30px 0;
}
#footer .social ul li {
	display: inline-block;
	margin: 0 20px;
}
#footer .social i.fa {
	font-size: 26px;
	padding: 4px;
	color: #fff;
	transition: all 0.3s;
}
#footer .social i.fa:hover {
	color: #eee;
}
#footer p {
	font-size: 15px;
	color: rgba(255,255,255,0.8)
}
#footer a {
	color: #f6f6f6;
}
#footer a:hover {
	color: #333;
}
#footer .row {
  display: flex;
  justify-content: space-between;
}

#footer .col-md-4 {
  flex: 1;
  padding: 15px;
  text-align: left;
}

#footer .social {
  margin-top: 20px;
}

#footer .social-links {
  list-style-type: none;
  padding: 0;
}

#footer .social-links li {
  display: inline-block;
  margin: 0 10px;
}

#footer .social-links li a {
  text-decoration: none;
  font-size: 24px;
  color: #333; /* Cambia el color de los íconos si lo deseas */
}

#footer .social-links li a:hover {
  color: #007bff; /* Cambia el color al pasar el ratón sobre los íconos */
}