/*HOJA DE ESTILOS FINZA*/

/*GENERALES*/
* {
    margin: 0;
}

body {
    overflow-x: hidden;
}

h1 {
    font-family: 'Merriweather Sans';
    text-transform: uppercase;
    font-weight: bold;
    color: white;
    font-size: 30px;
}

h2 {
    font-family: 'Bree Serif';
    color: #D00000;
    text-transform: uppercase;
}

h3 {
    font-family: 'Bree Serif';
    color: white;
    font-size: large;
}

h4 {
    font-family: 'Merriweather Sans';
    text-transform: uppercase;
    font-weight: bold;
    color: white;
    font-size: 13px;
}

P {
    font-family: 'Merriweather Sans';
    font-weight: normal;
    color: #293950;
}

ul {
    font-family: 'Merriweather Sans';
    font-weight: normal;
    color: #293950;
}

li {
    padding-bottom: 10px;
}

/*NAV BAR*/

.logo-nav {
    height: 90px;
    padding-left: 30px;
}

.navbar {
    background-color: #D00000;

}

.nav-item {
    padding-left: 30px;
    padding-right: 30px;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='white' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.navbar-nav {
    width: 100%;
    display: flex;
    justify-content: center;
}


.nav-link {
    font-family: 'Bree Serif';
    color: white;
    font-size: large;
    text-transform: uppercase;
}

.nav-link:hover {
    color: black;
    transition: all ease;
}

.dropdown-menu {
    background-color: #D00000;
    border: none;
    font-family: 'Merriweather Sans';
    font-size: medium;
    font-weight: lighter;
}

.dropdown-item {
    background-color: #D00000;
    color: white;
}

.dropdown-item:hover {
    color: black;
    background-color: white;
}

/*__________________________________________________HEADER________________________________*/
header {
    max-width: 100%;
    overflow-x: hidden;
    background-image: url(../imagenes/bg-header.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom center;
    padding-top: 80px;
    padding-bottom: 170px;
}

.logo {
    width: 550px;
}

.slogan {
    padding-bottom: 100px;
}

/*__________________________________________________QUIENES, MISION Y VISION________________________________*/
.quienes img {
    width: 500px;
}

.quienes p {
    padding-left: 15px;
    padding-right: 15px;
}

.mision-vision {
    padding-top: 180px;
    padding-bottom: 120px;
}

.mision {
    position: relative;
    width: 100%;
    /* Ajusta según necesidad */
    padding: 100px 50px;
    background-image: url(../imagenes/fondo-mision.png);
    background-size: cover;
    /* Para que la imagen se ajuste */
    background-position: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    /* Ajusta según el fondo */
    overflow: hidden;
    /* Asegura que el contenido no sobresalga */
    max-width: 500px;
    /* Ajusta el tamaño del círculo */
    height: 500px;
    /* Mantiene la forma circular */


}

.mision h2 {
    color: white;
}

.mision p {
    color: white;
}

.vision {
    padding-top: 70px;
}

.vision p {
    padding-left: 15px;
    padding-right: 15px;
}

/*____________________________________________SERVICIOS______________________________________*/
.servicios {
    background-image: url(../imagenes/Fondo-servicios.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    padding-top: 150px;
    padding-bottom: 150px;
}

.servicios img {
    width: 180px;
}

.servicios a {
    transition: all ease;
}

.servicios a :hover {
    transform: scale(130%);
}

.servicios h3 {
    padding-bottom: 50px;
    padding-top: 30px;
}

.servicios h2 {
    color: white;
    padding-top: 100px;
    padding-bottom: 150px;
}

.filaservicios {
    padding-bottom: 150px;
}

/*_________________________________________PLANEACION Y MANEJO DE PROYECTOS______________________________________*/
.contenido-servicio {
    padding: 40px;
    margin-bottom: 70px;
}

.planeacion {
    padding-top: 100px;
}

/*_________________________________ CONSTRUCCIÓN E INFRAESTRUCTURA________________________________*/
.construccion h2 {
    padding-top: 80px;
    margin-top: 50px;
}


/*___________________ INFRAESTRUCTURA DE TELECOMUNICACIONES______________*/
.telecomunicaciones h2 {
    padding-top: 80px;
    margin-top: 50px;
}

/*___________________GALERIA______________*/
.columna-owl {
    margin-top: 10px;
}

.trabajos {

    padding-top: 80px;
}

/*_____________________________________________________FOOTER__________________________________________--*/
footer {
    background-color: #293950;

}

footer img {
    width: 180px;
    padding: 20px;
}



footer p {
    color: white;
    font-style: italic;
    font-weight: lighter;
    font-size: small;
}

/*__________________________________________PRUEBA GALERY_________________________________________________*/

.page-galery {
    background-image: url(../gallery/bg-galeria2.jpg)!important;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.h3-gallery {
    color: #293950!important;
    text-transform: uppercase;
}

/* Altura fija y responsive del carrusel (no cambia con la proporción)
#gallery .item {
  /* ajusta la altura a tu diseño; usa clamp para responsividad 
  height: clamp(240px, 60vh, 640px);
  display: flex;
  align-items: center;
  justify-content: center;
 
  border-radius: 8px;
  overflow: hidden; /* evita desbordes 
}*/

/* La imagen se centra y se ajusta sin recortarse */
#galleryMant .galleryMant-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    /* muestra completa la imagen */
    display: block;
}

#gallery2 .gallery2-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    /* muestra completa la imagen */
    display: block;
}