html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/* Asegúrate de que todas las imágenes sean responsivas */
img {
    max-width: 100%;
    height: auto;
}

/* Asegúrate de que no haya padding o márgenes que causen desbordamiento */
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

/* Utiliza las clases de Bootstrap para el margen y el padding de manera responsiva */
.container, .container-fluid, .row, .no-gutters {
    padding-left: 0;
    padding-right: 0;
}

[class*="col-"] {
    padding-left: 15px; /* o el valor predeterminado de Bootstrap */
    padding-right: 15px; /* o el valor predeterminado de Bootstrap */
}
 @import url('https://fonts.googleapis.com/css2?family=Anton&family=Roboto:ital,wght@1,900&display=swap');
.banner{
    background-color: black;
}
.texto-justificado {
    text-align: justify;
}
.navbar-custom {
background-color: rgb(246, 249, 245) !important; /* Color de fondo de la navbar */
box-shadow: 0px -5px 5px -5px rgba(0, 0, 0, 0.4), 0px 4px 2px -2px rgba(0, 0, 0, 0.3);

}
@media (max-width: 768px) {
    .navbar-custom {
        padding-left: 15px;
    }
}

/* Estilos para los items de la navbar */
.navbar-custom .navbar-nav .nav-link {
color: black; /* Color de texto de los items */
transition: background-color 0.2s; /* Efecto suave para el hover */
}

/* Estilo para el hover de los items */
.navbar-custom .navbar-nav .nav-link:hover {
/* Color de fondo para el hover */
color: rgb(218,202,23); /* Color de texto para el hover */
}

/* Estilos para el nav-item activo (puedes agregar la clase .active a tu item activo) */
.navbar-custom .navbar-nav .nav-link.active {

color: rgb(32,206,136); /* Color de texto para el item activo */
}
.nav-item {
    
    font-size: 20px; /* Aumenta el tamaño de la fuente row-background 18 píxeles */
    font-family: 'Anton', sans-serif;
   
}
.nav-item .nav-link {
    margin-right: 15px; /* Agrega 15px de espacio a la derecha de cada enlace de navegación */
    margin-left: 15px;  /* Agrega 15px de espacio a la izquierda de cada enlace de navegación */
}
.card-personalizada {
    width: 238px; /* Ancho fijo de 238px */
    height: 271px; /* Alto fijo de 271px */
    margin: auto; /* Centra la tarjeta en la columna */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: none;
    /* overflow: hidden; */ 
}

.card-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Esto ayudará a empujar el botón hacia abajo */
    background-color: rgb(232, 237, 234);
}

/* Puede que necesites ajustar el padding y margin de los elementos dentro de la tarjeta para que coincidan con tu diseño */
.card-title {
    margin-bottom: .75rem; /* Ajuste según sea necesario */
}

.card-text {
    flex-grow: 1; /* Esto permite que el texto ocupe el espacio disponible */
    margin-bottom: .75rem; /* Ajuste según sea necesario */
}

.btn {
    margin-bottom: .75rem; /* Asegura que el botón no se adhiera al texto */
}

/* Si necesitas que las tarjetas sean responsivas y solo tengan el tamaño fijo en ciertas resoluciones, utiliza media queries */
@media (max-width: 768px) {
    .card-personalizada {
        width: 100%; /* Tamaño completo en dispositivos móviles */
        height: auto; /* Altura automática en dispositivos móviles */
    }
}
@media (max-width: 768px) {
    .movile-margin {
        padding: 30px; /* Tamaño completo en dispositivos móviles */
         /* Altura automática en dispositivos móviles */
    }
}
.btn-custom {
    color: rgb(149, 169, 29); /* Color de texto verde; ajusta al tono específico que necesites */
    background-color: #ffffff; /* Fondo blanco */
    border: 2px solid rgb(149, 169, 29); /* Borde sólido verde, ajusta la anchura y el color según sea necesario */
    border-radius: 0; /* Bordes rectangulares */
    padding: 10px 20px; /* Ajusta el relleno para que coincida con el diseño */
    font-weight: bold; /* Texto en negrita */
    transition: all 0.3s ease; /* Efecto suave al cambiar de estado, como al pasar el mouse */
    text-transform: uppercase; /* Opcional: si quieres que el texto esté en mayúsculas */
}

.btn-custom:hover {
    background-color: rgb(149, 169, 29); /* Cambia el color de fondo al verde al pasar el mouse */
    color: #ffffff; /* Cambia el color del texto a blanco al pasar el mouse */
    border-color: rgb(149, 169, 29); /* Opcional: cambia al color del borde al pasar el mouse si quieres un efecto */
}
.img-reduced {
    max-width: 40%; /* Esto hará que la imagen ocupe como máximo el 70% del ancho de su contenedor */
    height: auto; /* Esto mantendrá la proporción de aspecto de la imagen */
    display: block; /* Esto asegura que la imagen no esté en línea, lo cual puede afectar la centricidad */
    margin: 0 auto; /* Esto centrará la imagen en su contenedor */
}
.full-width-row {
    height: 340px; /* Altura fija de 340px */
    background-color: #000; /* Ajusta el color de fondo según sea necesario */
    display: flex;
    justify-content: space-around; /* Distribuye las columnas equitativamente */
    align-items: center; /* Centra las imágenes verticalmente */
}
.full-width-row .col {
margin: 0 80px; /* Añade un margen horizontal a cada columna */
/* Evita que las columnas crezcan o se encojan */
}

.full-width-row .img-square {
    width: auto; /* Ancho automático para mantener la proporción de aspecto */
    max-height: 100%; /* Asegúrate de que la imagen no exceda la altura del row */
}

/* Para asegurarte de que el contenedor sea de ancho completo */
.no-gutters {
    margin-right: 0;
    margin-left: 0;
    padding-right: 0;
    padding-left: 0;
}
/* Media query para pantallas de dispositivos móviles */
@media (max-width: 767.98px) {
    .full-width-row {
        height: auto; /* Altura automática para dispositivos móviles */
    }
    .img-square {
        max-width: 80%; /* O el porcentaje que desees para reducir el tamaño de la imagen */
        margin: 0 auto; /* Centra la imagen en su columna */
    }
}
.row-background {
    background: url('img/mv2.webp') no-repeat center center;
    background-size: cover;
}

/* Media query para pantallas grandes: altura fija */
@media (min-width: 992px) { /* Esto aplica para pantallas medianas y grandes, ajusta el valor según tus necesidades */
    .row-background {
        height: 1200px;
    }
}
.formulario-contacto {
    background-color: #ffffff; /* Fondo blanco para el formulario */
    padding: 2rem; /* Espaciado interno para el formulario */
    margin-top: 2rem; /* Espacio superior para separar del contenido anterior */
    border: none; /* Eliminar bordes externos del formulario */
}

.formulario-contacto h3 {
    text-align: center; /* Centrar el título */
    margin-bottom: 1.5rem; /* Espacio debajo del título */
}

.formulario-contacto h2 {
    text-align: center; /* Centrar el título */
    margin-bottom: 1.5rem; /* Espacio debajo del título */
}

/* Estilos para los inputs */
.form-control {
    border: none; /* Eliminar bordes */
    border-bottom: 1px solid #000; /* Solo una línea inferior */
    border-radius: 0; /* Bordes estrictamente rectos */
    box-shadow: none; /* Eliminar sombras internas */
}

/* Eliminar el borde del textarea */
.form-control:focus {
    border-color: #000; /* Color de la línea al enfocar */
    box-shadow: none; /* Eliminar sombra al enfocar */
}

/* Estilo para el botón */
.formulario-contacto .btn {
    background-color: #000; /* Fondo negro */
    color: #fff; /* Texto blanco para contraste */
    border: none; /* Eliminar borde */
    border-radius: 0; /* Bordes estrictamente rectos */
    margin-top: 1rem; /* Espacio entre el botón y el último input */
    padding: 0.5rem 1rem; /* Espaciado interno */
    width: 100%; /* Hace que el botón se expanda al ancho completo del contenedor */
    box-shadow: none; /* Eliminar sombras */
    transition: background-color 0.3s; /* Transición suave para el color de fondo */
}
.formulario-contacto .btn:hover,
.formulario-contacto .btn:focus {
    background-color: grey; /* Fondo gris al pasar el ratón por encima */
    color: #fff; /* Se mantiene el texto blanco */
}

.formulario-contacto .btn:active {
    background-color: darkgrey; /* Fondo gris oscuro al hacer clic */
    color: #fff; /* Se mantiene el texto blanco */
}


/* Ajustar el formulario para móviles */
@media (max-width: 576px) {
    .formulario-contacto {
        padding: 1rem; /* Menos espaciado interno para pantallas pequeñas */
    }
}
.footer-padding {
    padding-top: 3rem; /* Aumenta el padding superior */
    padding-bottom: 3rem; /* Aumenta el padding inferior */
    background: rgba(246, 249, 245); /* Fondo del footer */
}
.bi-linkedin {
    font-size: 1.5rem; /* Ajusta el tamaño del icono */
    color: black; /* Establece el color del icono a negro */
}
.no-select {
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
    
}
#oculto1 {
    display: none !important;
}
#oculto2 {
    display: none !important;
}
#oculto3 {
    display: none !important;
}

@media screen and (max-width: 768px) {
    .mostrar {
       
        display: none !important;
    }
    #oculto1 {
        display: flex !important;
    }
    #oculto2 {
        display: flex !important;
    }
    #oculto3 {
        display: flex !important;
    }

}