:root {
	--azul-main: #01A7B6;
	--verde-main: #19b400;
	--white-backgound: srgb(250, 252, 251);
	/* --whiter: rgb(236, 243, 235); */
	--letra: #38b6ff(61, 61, 61);
	--letra2:#38b6ff ;
	font-family: Raleway;
}


body, html{ margin:0; padding:0;}	
.navbarStyleCostum{
 
  top: 0;
  width: 100%;
  background-color: white;
  font-family: Raleway;
  
}


.animate__animated.animate__zoomIn {
  --animate-duration: 3s;
}

a {
    font-family: Raleway;
	color: #38b6ff;
	font-weight: bold;
	font-size: 20px;
}

ol{
	font-family: Raleway;
	font-size: 25px;

}





.nav-linkCostum{
	color: #38b6ff !important;
	font-weight:bold;
	font-family: Raleway;
	font-size: 30px;
}

/*

@media screen and (max-width:400px)
{
	.mainconent{
		padding-top: 10%;
		
	}
}

*/
.navbar-app {
	
	/* height: 5rem; */
	margin-bottom: 2rem;
	align-items: right;
}

.navbar-img{
	height: 8rem;
}

.letraN{
  color: var(--letra2) !important;
}



.main{
	margin-top: 1rem;
}

.servicios-section{
	background-color: var(--white-backgound);
	border: 2px var(--azul-main) solid;
	border-top: none;
	border-bottom: none;
	/* border-radius: 10px; */
	margin-top: 3rem;
	padding: 1rem;
}

.servicios-hr{
	width: 50%;
	margin: auto;
}

.servicios-contenido{
	font-weight: bold;
	margin-top: 3rem;
	margin-bottom: 3rem;
}

.cards-section{
	margin-top: 2rem;
}

.clientes{
	margin-top: 5rem;
	display: flex;
	justify-content: center;
}

.clientes-img {
	width: 95%;
}


footer{
	background-color: var(--azul-main);
	color: var(--white-backgound);
}

.footer{
	background-color: var(--azul-main);
	height: 100px;
	margin-top: 5rem;
	display: flex;
	align-items: center;
	font-family: Raleway
}

.copyright{
	background-color: var(--azul-main);
	padding: 2rem 0 2rem 0;
	text-align: center;
}

h1{
	color:#38b6ff;
	font-family: Raleway;
	font-weight: bold;
	text-align: center;
	
}

h3,h3,h4,h5,span{
	font-family: Raleway;
	font-weight: bold;
	text-align: center;
}

ul, li, p{
	font-family: Raleway;
	font-size: 20px;
}

.btn-mail {
	display:block;
	width:65px;
	height:65px;
	color:#fff;
	position: fixed;
	right:35px;
	bottom:110px;
	border-radius:50%;
	line-height:80px;
	text-align:center;
	z-index: 999;
	background-color: #38b6ff;
	box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.35);
}




.btn-mail:hover,.mail-icono:hover{
	background-color: white;
	color:#38b6ff;
}

.mail-icono {
	font-size: 35px;
}


.card {
	height: 330px;
}

.imagencarruse {
	width: 50%;
}

@media screen and (max-width:400px)
{
	.imagencarruse{
		width: 90%;
		
	}
}

.btn btn-outline-dark {

	margin-top: -1000px;
}

.card-title {

	text-align:center;
}

.card-body {

	text-align: justify;
}

.letter-title {
	font-family: Raleway;
	font: 150%;
	font-size: 30px;
	font-weight: 200;
}

.letter-carousel {
	font: 500;
	text-align: center;
}

.carousel-inner > .item > img, .carousel-inner > .item > a > img {
    width: 100%;
}

/* cards */
.card {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.card-body {
	flex-grow: 1;
}


.wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
  }
   
.img1 {
	height: 300%;
	width: 100%;
}

.boton-cards {
	font-family: Raleway;
	background-color: #38b6ff;
	color: #fff;
	border: #38b6ff;
	font-size: 20px;

}
.texto-inicio{
	font-weight:bold;
	font: 250%;
	font-size: large;
	
}

.texto-2{
	font-weight:bold;
	font: 150%;
	font-size: large;
	
}

.espacio{
margin: 3rem;
}

.espacio1{
	padding-top: 1px;
}

@media screen and (max-width:500px)
{
	.espacio1{
		padding-top: 20px;
	}
}


@media screen and (max-width:700px)
{
	.card {

		height: 230px;
	}
}

.space{
	height: 100%;
	width: 100%;
}

@media (min-width: 768px) and (max-width: 991.98px)
{
	.space{
		height: 70%;
		width: 70%;
	}
}

@media (max-width: 500px)
{
	.space{
		height: 150%;
		width: 100%;
	}
}

.pace{
	padding-top: 1px;
}

@media (max-width: 500px)
{
	.pace{
		padding-top: 40px;
	}
}

.pace1{
	padding-top: 0px;
}

@media (min-width: 768px) and (max-width: 991.98px)
{
	.pace1{
		padding-top: 20px;
	}
}

@media (max-width: 500px)
{
	.card {

		height: 335px;
	}
}
.linea{
	background-color: #38b6ff;
	border-radius: 5%;
	height: 10px !important;
	
	
}

@media (min-width: 768px) and (max-width: 991.98px)
{
	/* .mainconent{
		padding-top:7%;
		
	}
		*/
}

@media screen and (max-width:500px)
{
	/*
	.mainconent{
		padding-top: 10%;
		
	}
		*/
}
/*------------------------------------------------------------------------------------------------------------------------*/
  /* iphone XR, 11 */
  @media only screen and (min-device-width : 414px) and (max-device-height : 896px) and (-webkit-device-pixel-ratio : 2) {
	.space{
		height: 80%;
		width: 80%;
	}
 }

 /* iphone XR, 11 */
 @media only screen and (min-device-width : 414px) and (max-device-height : 896px) and (-webkit-device-pixel-ratio : 2) {
	.card {

		height: 320px;
	}
 }

  /* iphone 12, 12 Pro */
  @media only screen and (min-device-width: 390px) and (max-device-height: 844px) and (-webkit-device-pixel-ratio: 3) { 
    .space{
		height: 100%;
		width: 100%;
	}
 }
   /* iphone 12, 12 Pro */
   @media only screen and (min-device-width: 390px) and (max-device-height: 844px) and (-webkit-device-pixel-ratio: 3) { 
    .card {

		height: 380px;
	}
 }
/*Samsung s20 ultra*/
 @media only screen and (-webkit-min-device-pixel-ratio: 3.5) {
    .card {

		height: 350px;
	}
}

/*Samsung s20 ultra*/
@media only screen and (-webkit-min-device-pixel-ratio: 3.5) {
    .space{
		height: 90%;
		width: 90%;
	}
}

/* Galaxy A51 */
@media only screen and (-webkit-min-device-pixel-ratio: 2.625) {
    .space{
		height: 80%;
		width: 80%;
	}
}
 /* Galaxy A51 */
 @media only screen and (min-width: 412px) and (max-width: 767px) { .space{
	height: 80%;
	width: 80%;
} }

 /* Galaxy A51 */
 @media only screen and (-webkit-min-device-pixel-ratio: 2.625) {
	.card {

		height: 350px;
	}
}

/*A70*/
@media only screen and (-webkit-min-device-pixel-ratio: 2.625) {
	.card {

		height: 350px;
	}
}




/* ----------- iPhone 6, 6S, 7 and 8 ----------- */


/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 

  	.numero{
    	height: 150%;
        width: 100%;
        font-family: Raleway !important;
        background-color: #38b6ff;
        color: #FFFFFF;
        font-size: 30px;
}

}


/* ----------- iPhone 6+, 7+ and 8+ ----------- */


/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
   { 
  	.numero{
    		height: 100%;
        width: 100%;
        font-family: Raleway !important;
        background-color: #38b6ff;
        color: #FFFFFF;
        font-size: 30px;
}



}



/* ----------- iPhone x----------- */

@media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3) {

.numero{
    		height: 100%;
        width: 100%;
        font-family: Raleway;
        background-color: #38b6ff;
        color: #FFFFFF;
        font-size: 25px;
}



     }



/* ----------- Samsung s8, s9 ------- */ 


@media only screen 
    and (device-width : 360px) 
    and (device-height : 740px) 
    and (-webkit-device-pixel-ratio : 4) {

.numero{
    		height: 100%;
        width: 100%;
        font-family: Raleway;
        background-color: #38b6ff;
        color: #FFFFFF;
        font-size: 25px;
}



     }



     


     /* ----------- Samsung s6, s7, s7 edge ------- */ 


@media only screen 
    and (device-width : 360px) 
    and (device-height : 640px) 
    and (-webkit-device-pixel-ratio : 4) {

.numero{
    		height: 100%;
        width: 100%;
       
         font-family: Raleway;
        background-color: #38b6ff;
        color: #FFFFFF;
        font-size: 25px;
}



     }


     /* ----------- a51 ----------- */





/* Portrait */
@media only screen 
  and (min-device-width: 412px) 
  and (max-device-width: 914px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2.625) {

  		.numero{
    		height: 100%;
        width: 100%;
        font-family: Verdana;
        background-color: #38b6ff;
        color: #FFFFFF;
        font-size:25px;
}


}

/* Landscape */
@media only screen 
 and (min-device-width: 412px) 
  and (max-device-width: 914px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2.625) {
	.numero{
    		height: 100%;
        width: 100%;
        font-family: Verdana;
        background-color: #38b6ff;
        color: #FFFFFF;
        font-size:25px;
}

}




     /* ----------- iPhone 12  ------- */ 


@media only screen 
    and (device-width : 390px) 
    and (device-height : 844px) 
    and (-webkit-device-pixel-ratio : 3) {

.numero{
    		height: 100%;
        width: 100%;
        font-family: Verdana;
        background-color: #38b6ff;
        color: #FFFFFF;
        font-size: 30px;
}



     }


@media only screen 
    and (device-width : 393px) 
    and (device-height : 851px) 
    and (-webkit-device-pixel-ratio : 3) {

.numero{
    		height: 90%;
        width: 100%;
        font-family: Verdana;
        background-color: #38b6ff;
        color: #FFFFFF;
        font-size: 25px;
}



     }



/* ------------------- galaxy s20 ultra <----------*/ 

@media only screen 
    and (device-width : 412px) 
    and (device-height : 915px) 
    and (-webkit-device-pixel-ratio : 3.5) {

.numero{
    		height: 100%;
        width: 100%;
        font-family: Verdana;
        background-color: #38b6ff;
        color: #FFFFFF;
        font-size: 35px;
}



     }




     



/* ------------------- surface dou <----------*/ 

@media only screen 
    and (device-width : 720px) 
    and (device-height : 1114px) 
    and (-webkit-device-pixel-ratio : 2.5) {

.numero{
    		height: 100%;
        width: 120%;
        font-family: Verdana;
        background-color: #38b6ff;
        color: #FFFFFF;
        font-size: 25px;
}



     }

/* ------------------- Samsung Galaxy Fold <----------*/ 

@media only screen 
    and (device-width : 280px) 
    and (device-height : 653px) 
  {

.numero{
    		height: 100%;
        width: 120%;
        font-family: Verdana;
        background-color: #38b6ff;
        color: #FFFFFF;
        font-size: 25px;
}

  }


  
/* ------------------- Mac Book air <----------*/ 
@media only screen 
and (device-width : 1280px) 
and (device-height : 800px) 
{

.numero{
	height: 100%;
	width: 120%;
	font-family: Raleway;
	background-color: #38b6ff;
	color: #FFFFFF;
	font-size: 25px;
}
}


	.iframe-container {
		overflow: hidden;
		padding-top: 40%; /* 16:9*/
		position: relative;
	  }
	  
	  .iframe-container iframe {
		 border: 0;
		 height: 85%;
		 left: 2%;
		 position: absolute;
		 top: 5%;
		 bottom: 5%;
		 width: 100%;
	  }

	  @media only screen and (max-width: 768px) {
	
		.iframe-container {
			overflow: hidden;
			padding-top: 100%; /* 16:9*/
			position: relative;

		}
	}




/* Aqui comienza los de logo del footer*/



/* ----------- iPhone 6, 6S, 7 and 8 ----------- */


/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 

  	.repse{
        width: 50%;
		display: block;
		margin: auto;
}
}


/* ----------- iPhone 6+, 7+ and 8+ ----------- */


/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
   { 
	.repse{
        width: 50%;
		display: block;
		margin: auto;
}



}



/* ----------- iPhone x----------- */

@media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3) {

	.repse{
			width: 50%;
			display: block;
			margin: auto;
	}



     }



/* ----------- Samsung s8, s9 ------- */ 


@media only screen 
    and (device-width : 360px) 
    and (device-height : 740px) 
    and (-webkit-device-pixel-ratio : 4) {

	.repse{
			width: 50%;
			display: block;
			margin: auto;
	}



     }



     


     /* ----------- Samsung s6, s7, s7 edge ------- */ 


@media only screen 
    and (device-width : 360px) 
    and (device-height : 640px) 
    and (-webkit-device-pixel-ratio : 4) {


		.repse{
			width: 50%;
			display: block;
			margin: auto;
	}


     }


     /* ----------- a51 ----------- */





/* Portrait */
@media only screen 
  and (min-device-width: 412px) 
  and (max-device-width: 914px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2.625) {

	.repse{
        width: 50%;
		display: block;
		margin: auto;
}


}

/* Landscape */
@media only screen 
 and (min-device-width: 412px) 
  and (max-device-width: 914px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2.625) {
	.repse{
        width: 50%;
		display: block;
		margin: auto;
}

}




     /* ----------- iPhone 12  ------- */ 


@media only screen 
    and (device-width : 390px) 
    and (device-height : 844px) 
    and (-webkit-device-pixel-ratio : 3) {

		.repse{
			width: 50%;
			display: block;
			margin: auto;
	}



     }


@media only screen 
    and (device-width : 393px) 
    and (device-height : 851px) 
    and (-webkit-device-pixel-ratio : 3) {

		.repse{
			width: 50%;
			display: block;
			margin: auto;
	}



     }



/* ------------------- galaxy s20 ultra <----------*/ 

@media only screen 
    and (device-width : 412px) 
    and (device-height : 915px) 
    and (-webkit-device-pixel-ratio : 3.5) {

		.repse{
			width: 50%;
			display: block;
			margin: auto;
	}


     }




     



/* ------------------- surface dou <----------*/ 

@media only screen 
    and (device-width : 720px) 
    and (device-height : 1114px) 
    and (-webkit-device-pixel-ratio : 2.5) {

		.repse{
			width: 50%;
			display: block;
			margin: auto;
	}



     }

/* ------------------- Samsung Galaxy Fold <----------*/ 

@media only screen 
    and (device-width : 280px) 
    and (device-height : 653px) 
  {

.repse{
        width: 50%;
		display: block;
		margin: auto;
}

  }


  
/* ------------------- Mac Book air <----------*/ 
@media only screen 
and (device-width : 1280px) 
and (device-height : 800px) 
{

	.repse{
        width: 50%;
		display: block;
		margin: auto;
}
}


 
/* For Mobile Phones Portrait or Landscape View */
/*@media screen
    and (max-device-width: 1500px) 
{ 
    .baner {
        height: 500px;
		width: 100%;
        
    }
}
*/



/* ----------- iPhone x----------- */

@media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3) {

	.baner{
			width: 300px;
			display: block;
			margin: auto;
	}



     }



/* ----------- Samsung s8, s9 ------- */ 


@media only screen 
    and (device-width : 360px) 
    and (device-height : 740px) 
    and (-webkit-device-pixel-ratio : 4) {

	.baner{
			width: 300px;
			display: block;
			margin: auto;
	}



     }



     


     /* ----------- Samsung s6, s7, s7 edge ------- */ 


@media only screen 
    and (device-width : 360px) 
    and (device-height : 640px) 
    and (-webkit-device-pixel-ratio : 4) {


		.baner{
			width: 300px;
			display: block;
			margin: auto;
	}


     }


     /* ----------- a51 ----------- */





/* Portrait */
@media only screen 
  and (min-device-width: 412px) 
  and (max-device-width: 914px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2.625) {

	.baner{
		width: 300px;
		display: block;
		margin: auto;
}


}

/* Landscape */
@media only screen 
 and (min-device-width: 412px) 
  and (max-device-width: 914px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2.625) {
	.baner{
		width: 300px;
		display: block;
		margin: auto;
}

}




     /* ----------- iPhone 12  ------- */ 


@media only screen 
    and (device-width : 390px) 
    and (device-height : 844px) 
    and (-webkit-device-pixel-ratio : 3) {

		.baner{
			width: 300px;
			display: block;
			margin: auto;
	}



     }


@media only screen 
    and (device-width : 393px) 
    and (device-height : 851px) 
    and (-webkit-device-pixel-ratio : 3) {

		.baner{
			width: 300px;
			display: block;
			margin: auto;
	}



     }



/* ------------------- galaxy s20 ultra <----------*/ 

@media only screen 
    and (device-width : 412px) 
    and (device-height : 915px) 
    and (-webkit-device-pixel-ratio : 3.5) {

		.baner{
			width: 300px;
			display: block;
			margin: auto;
	}


     }




     



/* ------------------- surface dou <----------*/ 

@media only screen 
    and (device-width : 720px) 
    and (device-height : 1114px) 
    and (-webkit-device-pixel-ratio : 2.5) {

		.baner{
			width: 300px;
			display: block;
			margin: auto;
	}



     }

/* ------------------- Samsung Galaxy Fold <----------*/ 

@media only screen 
    and (device-width : 280px) 
    and (device-height : 653px) 
  {

	.baner{
		width: 300px;
		display: block;
		margin: auto;
}

  }


  /* ------------------- Samsung Galaxy Fold <----------*/



  .carousel-wrappera {
    width: 100%;
    overflow: auto;
    padding: 20px 0;
}

.carousel-rowa {
    display: flex;
    justify-content: space-around;
    width: 100%;
    margin-bottom: 15px;
}

.carousel-containera {
    overflow: hidden;
    width: 30%;
    max-width: 300px;
    background-color: #fff;
    margin: 0 5px;  /* Espacio entre los carruseles */
}

.carousela {
    display: flex;
    animation: scroll 10s linear infinite;
}

.carousel-itema{
    min-width: 100%;
    transition: transform 0.5s;
}

.carousel-itema img {
    width: 75%;
    display: block;
}

@keyframes scroll {
    0% { transform: translateX(0); }
    33.33% { transform: translateX(-100%); }
    66.66% { transform: translateX(-200%); }
    100% { transform: translateX(0); }
}

/*Por que seccion*/

.containerc {
    display: flex;
    justify-content: center;
    align-items: center;
    justify-content: center;
    text-align: center;
    place-items: center;
    gap: 20px;  /* Espacio entre las secciones */
    width: 100%;
    
}

.section {

    padding: 50px;  /* Aumentar el padding para más espacio interno */
    margin: 0px 0;
    border-radius: 10px;
	text-align: center;
    background-color: #fff;
    transition: background-color 0.3s, transform 0.3s;
    position: relative;
    box-sizing: border-box;
}


.default-text, .hover-text {
    font-size: 30px;
    transition: opacity 0.3s;
    text-align: center;
	font-family: Raleway;
	
}

.hover-text {
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	font-size: 25px;
	font-family: Raleway;
	
 
}

.section:hover {
    background-color: #38b6ff ;
	color:white;
	font-size: 20px;
}

.section:hover .default-text {
    opacity: 0;
}

.section:hover .hover-text {
    opacity: 1;
}

i{
    font-size: 65px
}

.iconoS{
	font-size: 40px
}

.iconoT{
	font-size: 28px
}


span{
	font-size: 25px;
}


/*Pbeneficios*/

.pbef{
	font-size: 40px;
	font-family: Raleway;
}

.accordion-button{
	font-size: 25px;
	font-family: Raleway;
}

.accordion-body, label{
	font-size: 20px;
	font-family: Raleway;
}

.formulariorh {
    background-color: #e6e6e6;
    border-radius: 10px;
   
}

.rh{
	font-family: Raleway;
	color: #38b6ff;
	font-size: 35px;
}


/* Media query para dispositivos móviles */


img.responsive {

	  display: block;
 	  margin-left: auto;
  	  margin-right: auto;
	  width: 100%;
	  height: 300px;
	  aspect-ratio: 9/16;
  }

/*

img.responsive {

	display: block;
	 margin-left: auto;
	  margin-right: auto;
	width: 100%;
	height: 290px;

}

*/

/* Numeros */

  .counters-section {

	padding: 25px;
}
.counters-container {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	justify-content: center;
}
.counter-item {
	background-color: #38b6ff;
	padding: 20px;
	border-radius: 10px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	flex: 1 1 300px;
	text-align: center;
	font-family: Raleway;
}
.counter {
	font-size: 30px;
	font-weight: bold;
	color: white;
	font-family: Raleway;
}
.message {
	font-size: 30px;
	color: white;
}


.carousel-mobile {
	display: none;
}

/* Mostrar carrusel para móviles */
@media only screen and (max-width: 768px) {
	.carousel-desktop {
		display: none;
	}
	.carousel-mobile {
		display: block;
	}
}


.card-imagen-fondo{
	width: 100%;
	height: 90%;

}


@media screen and (max-width: 500px){
	.card-custom{
	 
			height: 250px !important;
			
	}
	}


	    /* Imagen para PC (dispositivos de escritorio) */
        .image-pc {
            display: block;
            width: 100%;
            height: auto;
        }

        /* Ocultar imagen para móviles por defecto */
        .image-mobile {
            display: none;
            width: 100%;
            height: 90%;
        }

        /* Mostrar imagen para móviles */
        @media only screen and (max-width: 768px) {
            .image-pc {
                display: none;
            }
            .image-mobile {
                display: block;
				width: 90%;
            	height: 90%;
				margin: auto;

            }
        }


		/* Para el insta */ 



@media screen and (max-width: 768px) {
    img.mi-imagen2 {
        width: 70%; /* Nuevo tamaño para móviles */
    }
}