@media (min-width: 2000px) {
	body {
	font-size: 1.5em; /* larger size for wide screens */
	}
}


html, body {
  height: 100%;
  width: 100%;
}

body {
  font-family: 'Roboto', sans-serif;
}

.hero-section {
  background: linear-gradient(to right, rgba(0, 0, 100, 0.85), rgba(0, 0, 100, 0.2)), 
              url('../img/bg_personas_trabajando3.jpg') center center / cover no-repeat;
  height: 100vh;
  color: white;
  position: relative;
}

.hero-content {
	position: absolute;
	top: 50%;
	left: 40%;
	width: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
}
.hero-content p{
	color: white
}


.navbar-nav .nav-link {
  font-weight: 500;
  margin-left: 1.2rem;
}

.btn-primary {
  background-color: #141a5d;
  border: none;
  padding: 0.6rem 1.2rem;
  font-weight: bold;
}

h2{
  color: #141a5d;
}

h4{
  color: #141a5d;
}

p{
  color: #141a5d;
}

.card-title {
  font-weight: bold;
}

.card {
  overflow: hidden;
  border-radius: 0.75rem;
}

.card h5 {
  padding-top: 80px;
  padding-bottom: 80px;
}

.bg-dark.bg-opacity-50 {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}


.bg-primary{
	background-color: #141a5d !important
}

.bg-primary h4 {
	font-size: 2em;
	color: white
}

.bg-primary p{
	color: white
}
.flota-section {
	background: linear-gradient(to bottom, #dbe3f4, #141a5d);
	margin-top: -4em; /* Moves the section up */
	color: white;
}
.flota-section p{
	color: white;
}

.flota-perfo{
	max-width: 80%;
	margin: auto
}
.flota-img {
	background: url("../img/bg_8-1.jpg") no-repeat center center;
	background-size: cover;
	height: 100%;
	min-height: 40em;
	position: relative;
}

.overlay {
  background: linear-gradient(to bottom, rgba(20, 26, 93, 0.3), rgba(20, 26, 93, 0.85));
  z-index: 1;
}

.clientes {
	padding-top: 6em;
	padding-bottom: 8em
}

.valores{
	background-color: #141a5d;
	padding-top: 5em;
	padding-bottom: 5em
}


.carousel{
	max-width: 60%;
	margin: auto
}

.footer-contact{
	background-color: #141a5d;
	padding-top: 4em;
	padding-bottom: 4em
}
.footer-contact .btn-light{
	color: #141a5d;
}
.footer-contact .btn-light:hover{
    background-color: #51A9EA !important;
}
.footer-address p{
  color: white;
}
.footer-iconos{
	display: flex;
	flex-direction: column;
	align-items: center; /* Alinea todo a la derecha */
}
.footer-logo{
	display: flex;
	justify-content: center;
	align-items: center;

}
.footer-logo-img{
	width: 120px; /* or any size that fits your layout */
	height: 120px;
	background-image: url('../img/Logo_Hidroper_circulo_blanco_1.png'); /* Optional SVG or remove */
	background-size: contain; /* ensures the whole image fits */
	background-repeat: no-repeat;
	background-position: center;
}
.lista-icon{
    display: inline-block;
    padding-left: 0.5em;
	padding-right: 0.5em;
}
.lista-icon a{
    color:white;
}
.lista-icon a:hover{
    color: #51A9EA;
	transition-duration: 0.1s;
}




/*Bloque secciones para todas las sub-paginas*/
.bloque-secciones{
	text-align: left;
	max-width: 45%;
	margin: auto
}
.bloque-secciones img{
		width: 100%;
	}
.bloque-secciones h2{
  color: #141a5d;
}
.bloque-secciones p{
	color: #141a5d;
}
.bloque-secciones li{
	color: #141a5d;
}
.bloque-secciones{
	padding-top: 4em;
	padding-bottom: 4em
}
.hero-content-subpages{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
}
.logo_subpages{
	padding-top: 2em;
	max-width: 50%;
	margin: auto
}





/*Servicios*/
.hero-section-servicios {
  background: linear-gradient(to right, rgba(0, 0, 100, 0.85), rgba(0, 0, 100, 0.2)), 
              url('../img/servicios-hero.png') center center / cover no-repeat;
  height: 50vh;
  color: white;
  position: relative;
}
.servicios{
	margin: auto;
	padding-top: 3em
}

.servicios p{
	font-size: 1em
}
.services-block {
	padding-top: 2em;
	padding-bottom: 2em;
	display: flex;
  	justify-content: center;
  	flex-wrap: wrap;
  	gap: 20px; /* space between buttons */
}
.servicios .btn-dark{
	background-color: #141a5d !important
}

.servicios .btn-dark:hover{
    background-color: #51A9EA !important;
}

.services-block p {
  margin: 0;
}




/*Productos*/
.hero-section-prodcutos{
  background: linear-gradient(to right, rgba(0, 0, 100, 0.85), rgba(0, 0, 100, 0.2)), url('../img/productos-hero.jpg') center center / cover no-repeat;
  height: 50vh;
  color: white;
  position: relative;
}
.productos{
	background-color: white;
	max-width: 60%;
	margin: auto;
}
.productos-detalle{
  background-color: #141a5d;
}

.productos h4{
  color: white;
}
.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: white;
  border-radius: 50%;
  margin-right: 10px;
}






/*Perforadora*/
.hero-section-perforadoras{
	background: linear-gradient(to right, rgba(0, 0, 100, 0.85), rgba(0, 0, 100, 0.2)), url('../img/perforadoras_paisaje.png') center center / cover no-repeat;
	height: 50vh;
	color: white;
	position: relative;
}
.perforadoras h5{
	padding-top: 1em;
	color: #141a5d;
}

.perforadoras p{
	font-size: 1.1em
}

.btn-dark{
    background-color: #141a5d !important;
}
.btn-dark:hover{
    background-color: #51A9EA !important;
}


/*RSE*/
.hero-section-rse {
  background: linear-gradient(to right, rgba(0, 0, 100, 0.85), rgba(0, 0, 100, 0.2)), 
              url('../img/rse3.png') center center / cover no-repeat;
  height: 50vh;
  color: white;
  position: relative;
}
.rse{
	padding-bottom: 5em
}

.rse_logo{
	padding-top: 4em;
	max-width: 50%
}




/*Partners*/
.hero-section-partners {
  background: linear-gradient(to right, rgba(0, 0, 100, 0.85), rgba(0, 0, 100, 0.2)), url('../img/partners-hero.png') center center / cover no-repeat;
  height: 50vh;
  color: white;
  position: relative;
}
.partners{
	padding-bottom: 5em
}



/*Nosottros Historia*/
.hero-section-nosotros {
  background: linear-gradient(to right, rgba(0, 0, 100, 0.85), rgba(0, 0, 100, 0.2)), 
              url('../img/hero-section-nosotros.png') center center / cover no-repeat;
  height: 50vh;
  color: white;
  position: relative;
}
.capital-humano-titulo{
	padding-top: 1.5em
}


/*Contacto*/
.hero-section-contacto {
  background: linear-gradient(to right, rgba(0, 0, 100, 0.85), rgba(0, 0, 100, 0.2)), url('../img/Contacto_hero.png') center center / cover no-repeat;
  height: 50vh;
  color: white;
  position: relative;
}

.container-contacto img{
	padding-bottom: 4em
}

/*MiningiDEAS ribbon*/
.miningideas{
	background-color: #51A9EA	
}
.miningideas p{
	color: white;
	font-size: 0.7em 
}
.miningideas a{
	color: white
}



@media all and (max-width: 450px){
	
	.hero-section {
		  background: linear-gradient(to right, rgba(0, 0, 100, 0.85), rgba(0, 0, 100, 0.2)), 
					  url('../img/bg_personas_trabajando3_mobile.png') center center / cover no-repeat;
		}
	
	.navbar {
		background-color: #141a5d !important; /* or any solid color */
		position: relative;
  		z-index: 9999;
	  }
	.navbar-collapse {
		background-color: #141a5d !important; /* match or adjust */
		position: relative;
		z-index: 9999;
	 }
	
	.clientes img{
		width: 70%
	}
	
	.carousel{
		max-width: 100%;
		margin: auto
	}
	
	.footer-iconos{
		display: flex;
		flex-direction: column;
		align-items: center; /* Alinea todo al centro */
	}
	.lista-icon{
		display: inline-block;
		padding-left: 0.5em;
		padding-right: 0.5em;
		padding-top: 1em;
	}
	.footer-address{
		display: block;
		text-align: center
	}
	
	
	
	
	/*Productos*/
	.productos{
		background-color: white;
		max-width: 95%;
		margin: auto
	}
	
	
	
	/*Nosottros Historia*/
	.bloque-secciones{
		max-width: 95%;
		margin: auto
	}
	.bloque-secciones img{
		width: 95%;
	}
	
	
	
	/*RSE*/
	.rse_logo{
		padding-top: 4em;
		max-width: 80%
	}
	
	.logo_subpages{
		padding-top: 2em;
		max-width: 80%;
		margin: auto
	}
}