body, html {
  height: 100%;
  margin: 0;
  font-family: 'Montserrat', sans-serif !important;
  color: white;
  overflow-x: hidden;

}
*,
*::before,
*::after {
  box-sizing: inherit;
}
.back_oscuro {
  background-color: #00040F;
  color: white; 
}
.text_blanco{
  color: white; 
}
.izquierda{
  text-align: left;
}
/*Botón Whatsapp*/
.btn-wsp{
    position: fixed;
    width: 55px;
    height: 55px;
    line-height: 55px;
    bottom: 30px;
    right: 30px;
    background: #0df053;
    color: white !important;
    z-index: 9999;
    border-radius: 50px;
    text-align: center;
    font-size: 50px;
    box-shadow: 0 1px 10px rgba(0,0,0,0.3);
    
}
.btn-wsp:hover{
    text-decoration: none;
    color: #0df053 !important;
    background: white;
    
}
img {
  width: 100%;
  height: auto;
  max-height: 100vh;
}

img:hover {
  overflow-x: hidden;
}

.card-container {
  overflow: visible; /* Permite el desbordamiento visible */
  padding: 20px; /* Ajusta según sea necesario */
}

.card {
  background-color: rgba(245, 245, 245, 0.0) !important;
  border: none !important;
  transition: transform 0.3s ease; 
}

.card:hover {
  transform: scale(1.05); 
  transition: transform 0.3s ease; 
}
.card.no-hover:hover {
  transform: none; /* Evita la transformación */
  transition: none; /* Evita la transición */
}


.main {
  padding-left: 15px;
  padding-right: 15px;
}

.dropdown-item:hover{
  background-color:#0C5C73 !important;
			}

.colorsito{
    color:#009CB6;
    text-align: justify;
}
/* Navbar */
.navbar-light {
  background-color: #00040F;
  /*opacity: 0.8;*/
  margin-left: 0; /* Elimina cualquier margen izquierdo */
  margin-right: 0;
}

/* Cambiar fondo con degradado al pasar el cursor sobre las opciones del menú */
.navbar-light .navbar-nav .nav-link {
  border-radius: 10px; /* Redondear los bordes de las opciones del menú */
}

/* Cambiar fondo con degradado del menú desplegable */
.navbar-light .dropdown-menu .dropdown-item {
  border-radius: 10px; /* Redondear los bordes del menú desplegable */
}

/* Estilo del icono del botón de alternancia */
.navbar-light .navbar-toggler .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='rgba(255, 255, 255, 0.85)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
  background-color: #00040F;
  opacity: 0.8;
}

/* Cambiar fondo con degradado al pasar el cursor sobre las opciones del menú */
.navbar-light .navbar-nav .nav-link:hover {
  background: linear-gradient(to bottom, #000000, #00040F, #009CB6);
  color: white; /* Cambiar el color del texto a blanco */
  font-size: 20px; /* Cambiar el tamaño del texto */
}

/* Cambiar color de fondo del menú desplegable */
.navbar-light .dropdown-menu .dropdown-item:hover {
  background: linear-gradient(to bottom, #000000, #00040F, #009CB6);
  color: white; /* Cambiar el color del texto a blanco */
  font-size: 20px; /* Cambiar el tamaño del texto */
}

.bgimg-1, .bgimg-2, .bgimg-3 {
  position: relative;
  opacity: 0.65;
  background-attachment: scroll;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

}
.bgimg-1 {
  background-image: url("../img/inicio.png");
  min-height: 100%;
    
}

.bgimg-2 {
  background-image: url("../img/inicio_carteleria.png");
  min-height: 100%;
    
}

.bgimg-3 {
  background-image: url("../img/inicio_ventajas.png");
  min-height: 100%;
}



/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1024px) {
  .bgimg-1, .bgimg-2, .bgimg-3 {
    background-attachment: scroll;
      
  }
}
@media only screen and (min-device-width: 900px) {
  .bgimg-1, .bgimg-2, .bgimg-3 {
     /*min-height: 10%;*/
      
  }
}
.container-fluid {
  max-width: 100%;
  overflow-x: hidden; /* Asegúrate de que no haya desbordamiento horizontal */
  padding-left: 0;
  padding-right: 0;
}
section.contenedor {
  width: 100%;
  padding-bottom: 56.25%; /* Mantiene la relación de aspecto 16:9 */
  position: relative; /* Para que el contenido absoluto se posicione correctamente */
  overflow: hidden;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-size: cover; /* Asegura que la imagen cubra todo el contenedor */
  background-position: center center; /* Centra la imagen */
}

/* Usa la misma imagen para todas las secciones */
section#cont1 {
  background-image: url(../img/quienes_somos.png);
}

section#cont2 {
  background-image: url(../img/carteleria_index.png);
}

section#cont3 {
  background-image: url(../img/ventajas_index.png);
}
section#bgimg-serv {
  background-image: url(../img/serv1.png);
}

/* Media queries para ajustar el tamaño en diferentes dispositivos */
@media (min-width: 300px) and (max-width: 700px) {
  section.contenedor {
    padding-bottom: 56.25%; /* Mantén la relación de aspecto 16:9 */
    background-size: contain; /* Ajusta la imagen dentro del contenedor sin recortarla */
  }
}

@media (min-width: 700px) and (max-width: 1500px) {
  section.contenedor {
    padding-bottom: 56.25%; /* Mantén la relación de aspecto 16:9 */
    background-size: contain; /* Ajusta la imagen dentro del contenedor sin recortarla */
  }
}

/*Productos*/
.bgimg-prod {
  background-image: url("../img/prod1.png");
  background-position: center;
  background-size: 100% auto; /* O `contain` si prefieres */
  background-repeat: no-repeat;
  min-height: 100vh;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

@media screen and (max-width:1124px){
    .bgimg-prod{
       background-image: url(../img/prod1_small.png);
       background-size: cover
    }
}
@media screen and (max-width:900px){
    .smalltext, .spacetitle p{
     font-size: 15px;
        letter-spacing: 0px;
    }
}


.spacetitle.smalltext::after {
  content: '';
  display: inline-block;
  width: calc(100% - 20px); /* Calcula el ancho menos el espacio entre letras */
  height: 1px;
  background-color: #009CB6;
  margin-left: 20px; /* Igual al espacio entre letras */
  margin-top: 5px; /* Ajusta el espacio entre el texto y la línea */
}
.bgimg-prod, .bgimg-prod2, .bgimg-videow1, .bgimg-proyec1, .bgimg-led1, .bgimg-solpan1 {
  position: relative;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

}
.bgimg-prod2 {
  background-image: url("../img/prod2.png");
  min-height: 700px;
    color: white;    
}
.bgimg-videow1 {
  background-image: url("../img/videow1.png");
  min-height: 700px;
    color: white;   
}
.bgimg-proyec1 {
  background-image: url("../img/proyec1.png");
  min-height: 700px;
    color: white;
}
.bgimg-led1{
    background-image: url("../img/led1.png");
  min-height: 700px;
    color: white;
}
.bgimg-solpan1{
    background-image: url("../img/solpan1.png");
  min-height: 700px;
    color: white;
}

@media only screen and (max-device-width: 1024px) {
  .bgimg-prod2, .bgimg-videow1, .bgimg-proyec1, .bgimg-led1, .bgimg-solpan1 {
    background-attachment: scroll;
       min-height: 15%;
  }
}
@media only screen and (min-device-width: 900px) {
  .bgimg-prod2, .bgimg-videow1, .bgimg-proyec1, .bgimg-led1, .bgimg-solpan1 {
     min-height: 15%;
      
  }
}
.fondoprod{
    background-color: white;
}

.spacetitle{
    letter-spacing: 30px;
    font-size: 40px;
}
.title{
    color: #016680;
}
.prodparrafo{
    color: #016680;
    font-size: 20px;
    padding-right: 5px;
}


/*Servicios*/
.bgimg-serv {
  background-image: url("../img/serv1.png");
  min-height: 100%;
  height: 100vh; /* Asegura que el contenedor tenga una altura igual a la altura de la ventana gráfica */
  color: white;
  position: relative;
  background-attachment: fixed;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}
@media screen and (max-width:1124px){
    .bgimg-serv{
      background-attachment: scroll; 
      height: auto; 
      min-height: 100vh; /* Mantiene la altura mínima igual a la altura de la ventana gráfica */
      padding-bottom: 56.25%;
    }
}
.bgimg-serv, .bgimg-app1, .bgimg-arq1, .bgimg-multi1 {
  position: relative;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

}
.bgimg-app1 {
  background-image: url("../img/app1.png");
  min-height: 700px;
    color: white;    
}
.bgimg-arq1 {
  background-image: url("../img/arq1.png");
  min-height: 700px;
    color: white;    
}
.bgimg-multi1 {
  background-image: url("../img/multi1.png");
  min-height: 700px;
    color: white;    
}
@media only screen and (max-device-width: 1024px) {
  .bgimg-app1, .bgimg-arq1, .bgimg-multi1  {
    background-attachment: scroll;
       min-height: 15%;
  }
}
@media only screen and (min-device-width: 900px) {
  .bgimg-app1, .bgimg-arq1, .bgimg-multi1  {
     min-height: 25%;
      
  }
}



/*Destacados*/
.bgimg-destacados {
  background-image: url("../img/fondo_destacados.png");
  min-height: 100%;
}
.bgimg-destacados {
  position: relative;
  opacity: 0.65;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

}
@media only screen and (max-device-width: 1024px) {
  .bgimg-destacados  {
    background-attachment: scroll;
       min-height: 15%;
  }
}
@media only screen and (min-device-width: 900px) {
  .bgimg-destacados  {
     min-height: 25%;
      
  }
}
section.contenedordes {
  width: 100%;
  min-height: 1300px;
  overflow: hidden;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center center; /* Centra la imagen */
  background-size: cover; /* Ajusta la imagen para cubrir el contenedor */
  margin: 0; /* Elimina márgenes adicionales */
  padding: 0;
}

section#cont4 {
  background-image: url(../img/casoexito_pantallas.png);
  width: 100%;
  height: 100vh;
}

section#cont5 {
  background-image: url(../img/casoexito_desarrolloapp.png);
  width: 100%;
  height: 100vh;
}

section#cont6 {
  background-image: url(../img/casoexito_led.png);
  width: 100%;
  height: 100vh;
}

section#cont7 {
  background-image: url(../img/casoexito_multimedia.png);
  width: 100%;
  height: 100vh;
}

section#cont8 {
  background-image: url(../img/casoexito_solpantalla.png);
  width: 100%;
  height: 100vh;
}

section#cont9 {
  background-image: url(../img/casoexito_videowall.png);
  width: 100%;
  height: 100vh;
}

/* Media queries for smaller devices */
@media (max-width: 700px) {
  section.contenedordes {
    background-size: contain; /* Asegura que la imagen se vea completamente */
    background-attachment: scroll; /* Asegura que la imagen se mueva con el contenido */
    min-height: auto; /* Permite que la altura se ajuste automáticamente */
    height: auto;
  }

  section#cont4,
  section#cont5,
  section#cont6,
  section#cont7,
  section#cont8,
  section#cont9 {
    height: 600px; /* Permite que la altura se ajuste automáticamente */
    min-height: auto; /* Ajusta la altura mínima para garantizar que se vea la imagen */
  }
}
.bgimg-destacados2 {
  background-image: url("../img/fondo_destacados.png");
  min-height: 100%;
}
.bgimg-destacados2 {
  position: relative;
  opacity: 0.65;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

}
.mapita{
    height: 350px !important;
}
.titulodestacado{
    position: absolute;
    top:100px;
    left: 700px;
}

footer {
	 background-color:#00040F;
	 background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
    min-height: 10%;

  color: white;

}
/* Estilo por defecto para modo PC */
.footer-img {
  max-width: 150px; /* Ajusta este valor según el tamaño deseado para escritorio */
  height: auto; /* Mantener la proporción de la imagen */
}

/* Media query para pantallas medianas */
@media (max-width: 1200px) {
  .footer-img {
      max-width: 120px; /* Reduce el tamaño de la imagen en pantallas medianas */
  }
}

/* Media query para pantallas pequeñas */
@media (max-width: 768px) {
  .footer-img {
      max-width: 100px; /* Ajusta el tamaño para tabletas */
  }
}

/* Media query para pantallas muy pequeñas */
@media (max-width: 480px) {
  .footer-img {
      max-width: 80px; /* Ajusta el tamaño para teléfonos móviles */
  }
}