@import url(http://fonts.googleapis.com/css?family=Lato);


@import url('https://fonts.googleapis.com/css?family=Montserrat:500&display=swap');

@import url('https://fonts.googleapis.com/css?family=Holtwood+One+SC&display=swap');

@import url('https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Gurmukhi:wght@100..900&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');

.popopo{}
 
.imput2 {
	font-family: 'Lato';
	font-size: 16px;
	padding: 15px;
	width: 100%; 
	color: #666;
	padding: 15px;
	background-color:#FFF;
	border:#CCC 1px solid;
	border-radius:10px;
	height:150px;
}
.imput3 {
	font-family: 'Lato';
	font-size: 16px;
	color: #666;
	padding: 15px;
	background-color:#FFF;
	width:100%;
	border:#CCC 1px solid;
	border-radius:10px;
}

.imput4 {
	font-family: 'Lato';
	font-size: 17px;
	color: #ffffff;
	padding: 4px;
	background-color: #666666;
	width: 210px;
	height: 83px;
	border: none;
}

.textoazul02 { 
	font-family: MONTSERRAT;
	font-size: 17px;
	color: #ccc; 
font-weight:bold;
}
 
.texto55b { 
	font-family: lato;
	font-size: 17px;
	color: #fff;

}

.textoazul2r {
font-family: Lato;
font-size: 25px;
color: #FC0;
font-weight:bold;
}

.textoazul2r {
font-family: Lato;
font-size: 20px;
color: #FC0;
font-weight:bold;
}


.textoazul2 {
font-family: Lato;
font-size: 25px;
color: #000;
font-weight:bold;
}
.textogrisx { 
	font-family: lato;
	font-size: 20px;
	color: #fff;

}
.textogris { 
	font-family: lato;
	font-size: 19px;
	color: #666;

}
.textoprincipal { 
font-family: Lato;
font-size: 16px;
color: #fff;
font-weight:bold; 
}

.icon1 { 
	font-family: lato;
	font-size: 12px;
	color: # FC0;

}
.txticon { 
	font-family: lato;
	font-size: 12px;
	color: # FC0;

}
.txticon2 { 
	font-family: lato;
	font-size: 10px;
	color: # FC0;

}
.btn2 {
	font-family: lato;
	font-size: 17px;
	color: #000;
	background-color:#FC0;
	border-radius: 8px;
	border:none;
	cursor:pointer;
	padding:10px;
  font-weight:600;	
}


.btn {
	font-family: lato;
	font-size: 17px;
	color: #fff;
	background-color:#05aff2;
	border-radius: 8px;
	border:none;
	cursor:pointer;
	padding:10px;
  font-weight:600;	
}
.whapp{
	position:fixed;
	left:10px;
	bottom:10px;

	z-index:150;	
}

  .contenidox {
            display: none;
 
        }
.subir-btn{
	position:fixed;
	right:10px;
	bottom:10px;

	z-index:150;	
}

    .imagen-container {
      position: relative;
      display: inline-block;
 
    }

    .imagen-container img {
      width: 100%;
      display: block;
    }

    .overlay {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      background-color: rgba(5, 175, 242, 0.5); /* negro semitransparente */
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .imagen-container:hover .overlay {
      opacity: 1;
	  cursor:pointer;
    }


/* CSS */
.video-wrap {
  max-width: 900px;         /* ajustá el ancho máximo */
  margin: 0 auto;           /* centra el bloque */
}

/* Método moderno con aspect-ratio */
.video-wrap .video {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;     /* mantiene 16:9; cambiá si querés otro ratio */
  display: block;
  background: #000;         /* evita parpadeos al cargar */
  border-radius: 12px;      /* opcional */
  overflow: hidden;
}

/* Fallback si algún navegador no soporta aspect-ratio */
@supports not (aspect-ratio: 16 / 9) {
  .video-wrap {
    position: relative;
  }
  .video-wrap::before {
    content: "";
    display: block;
    padding-top: 56.25%;    /* 16:9 */
  }
  .video-wrap .video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
}