.video-container {
      position: relative;
      width: 100%;
      padding-bottom: 56.25%; /* 16:9 ratio */
    }
    .video-container iframe {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
    }
    .main-text {
      text-align: center;      
    }
        .main-text-img {
            width: 100%;  
        }

 

.input-group-text {
  border-radius: 20px 0 0 20px;
  border-right: none;
}

.form-control:focus {
  box-shadow: none;
  border-color: #0d6efd;
}




.input-group .form-control {
  border-radius: 20px;
  padding-left: 0.5rem;
  min-width: 130px;
}

.input-group-text {
  border-radius: 20px 0 0 20px;
  border-right: none;
}

.form-control:focus {
  box-shadow: none;
  border-color: #0d6efd;
}
.hero {
  background: url('../img/FONDO PAGINA.jpg') center/cover no-repeat;
  height: 100vh;
  color: white;
  position: relative;
}

/* Móvil y tablet */
@media (max-width: 768px) {
  .hero {
    background: url('../img/FONDO PAGINA.jpg') center/contain no-repeat;
    background-color: #000;  /* relleno en los bordes si no ocupa todo */
    height: auto;             /* ajusta altura según la imagen */
    min-height: 40vh;         /* opcional para que ocupe buena parte de la pantalla */
  }
}
/* Estilo general del botón */
.hero .btn {
  background-color: transparent;
  border: 2px solid #fff;
  color: #fff;
  border-radius: 2rem;
  padding: 0.6rem 1.5rem;
  font-weight: 600;
  font-size: 1.6rem;
  position: absolute;
  bottom: 140px;
  left: 140px;
}

/* Mantener estilos en hover/focus/active/visited */
.hero .btn:hover,
.hero .btn:focus,
.hero .btn:active,
.hero .btn:visited {
  background: transparent;
  border-color: #fff;
  color: #fff;
  text-decoration: none;
}

/* Ajuste en tablet/móvil */
@media (max-width: 768px) {
  .hero .btn {
    padding: 0.4rem 1rem;   /* más pequeño */
    font-size: 1rem;        /* fuente más chica */
    bottom: 30px;           /* más cerca del borde inferior */
    left: 20px;             /* más cerca del borde izquierdo */
  }
}

/* Ajuste en móviles muy pequeños */
@media (max-width: 480px) {
  .hero .btn {
    padding: 0.3rem 0.8rem;
    font-size: 0.9rem;
    bottom: 20px;
    left: 15px;
  }
}

        .servicio {
            display: flex;
            flex-wrap: wrap;
            align-items: stretch;
            min-height: 400px;
        }

        .servicio-img {
            background-size: cover;
            background-position: center;
            min-height: 300px;
        }

        .servicio-text {
            padding: 2.5rem;
            background-color: #eaf4fa;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

            .servicio-text h3 {
                color: #1e73be;
                font-weight: bold;
            }

            .servicio-text ul {
                padding-left: 1.2rem;
            }

            .servicio-text .btn-vermas {
                color: #1e73be;
                font-weight: 500;
                text-decoration: none;
                margin-top: auto;
            }

        .servicio-icon {
            font-size: 2rem;
            margin-bottom: 1rem;
            color: #1e73be;
        }
 
 
 
 
 
 
 
 
 
    .custom-section {
      background-color: #2196c8;
      color: white;
      padding: 3rem 1.5rem;
    }

    .custom-section-white {
      background-color: #fff;
      color: #000000;
      padding: 3rem 1.5rem;
    }
    .custom-section h2 {
      font-size: 2.5rem;
      font-weight: bold;
    }

    .custom-section p strong {
      font-weight: bold;
    }

    .custom-section ul {
      padding-left: 1.2rem;
    }

    .custom-section ul li {
      margin-bottom: 0.4rem;
    }

    .btn-link-custom {
      color: white;
      text-decoration: none;
      font-weight: bold;
    }

    .btn-link-custom:hover {
      text-decoration: underline;
    }

    .image-side {
      background-image: url('../img/Software a medida.jpg');
      background-size: cover;
      background-position: center;
      height: 100%;
      min-height: 610px;
      position: relative;
    }

    .image-side-consultoria {
      background-image: url('../img/Consultorias especializadas.jpg');
      background-size: cover;
      background-position: center;
      height: 100%;
      min-height: 610px;
      position: relative;
    }
  
    .image-side-soluciones {
      background-image: url('../img/Soluciones Geoespaciales.jpg');
      background-size: cover;
      background-position: center;
      height: 100%;
      min-height: 610px;
      position: relative;
    }
    @media (max-width: 768px) {
      .image-side {
        min-height: 300px;
      }
    }

    #software.container-fluid {
      padding-left: 0;
      padding-right: 0;
    }
    #consultorias.container-fluid {
      padding-left: 0;
      padding-right: 0;
    }

    #geoespacial.container-fluid {
      padding-left: 0;
      padding-right: 0;
    }


    .side-title {
      font-size: 3.3rem;
      color: #2d8bba;
    }
    .side-title-white {
      color: #fff;
      font-size: 3.3rem;
    }
    .side-content {
      font-size: 1.0rem;
    }
  
    .ver-mas {
      text-align: right;
      color: #0368aa;
    }
    .ver-mas a {
      text-align: right;
      color: #0368aa;
    }


    .ver-mas-white {
      text-align: right;
      color: #fff;
    }