@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap');

*{
	font-family: 'Poppins', sans-serif;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	scroll-behavior: smooth;
}
body{
	background: #12222d;
	height: 1000px;
	overflow-x: hidden;
}
.wrapper{
	position: relative;
	transition: 0.5s;
	left: 0;
}
.floating-wpp2{
  position:fixed;
  width:60px;
  height:60px;
  bottom:90px;
  right:18px;
  background-color:#03C;
  color:#FFF;
  border-radius:50px;
  text-align:center;
  font-size:32px;
  z-index:100;
}

.my-float2{
  margin-top:11px;
  color: #fff;
}
.wrapper.active{
	left: -400px;
}
header{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	padding: 40px 100px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	z-index: 10000;
	transition: 0.5s;
}
header.sticky{
	padding: 20px 100px;
	background: #162c3b;
}
header .logo{
	color: #fff;
	text-decoration: none;
	font-size: 24px;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 1px;
}
header .toggle{
	position: relative;
	width: 36px;
	height: 28px;
	background: url("../img/toggle.png");
	background-size: cover;
	cursor: pointer;
}
header .toggle.active{
	background: url("../img/close.png");
	background-size: cover;
}
.banner{
	position: relative;
	width: 100%;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #3475ca;
}
.banner img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.45;
}
.banner .content{
	position: relative;
	max-width: 750px;
	text-align: center;
}
.banner .content h2{
	font-size: 60px;
	color: #fff;
}
.banner .content p{
	font-size: 18px;
	color: #fff;
}
.banner .telefono{
	margin-top: 150px;
	font-size: 40px;
}
.banner .telefono i{
	color: #ece5dd;
}
.banner .telefono a{
	list-style: none;
	text-decoration: none;
	color: #ece5dd;
}
.banner .whts{
	margin-top: 30px;
	font-size: 40px;
}
.banner .whts i{
	color: #25d366;
}
.banner .whts a{
	list-style: none;
	text-decoration: none;
	color: #25d366;
}
.banner .media a:hover, .banner .media i:hover{
	color: #ffd966;
}
.sidebar{
	position: fixed;
	right: -400px;
	top: 0;
	width: 400px;
	height: 100%;
	background: #12222d;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 100;
	overflow-x: hidden;
	transition: 0.5s;
}
.sidebar.active{
	right: 0;
}
.sidebar ul{
	position: relative;
	display: flex;
	flex-direction: column;
}
.sidebar ul li{
	list-style: none;
	margin: 5px 0;
}
.sidebar ul li a{
	color: #fff;
	font-size: 30px;
	font-weight: 400;
	text-decoration: none;
}
.sidebar ul li a:hover{
	color: #3f8ffc;
}
.about{
	position: relative;
	width: 100%;
	background: #162c3b;
	display: flex;
}
.about .contentBx{
	background: #162c3b;
	padding: 100px;
	width: 50%;
}

.heading{
	position: relative;
	color: #fff;
	font-size: 30px;
	font-weight: 600;
	letter-spacing: 1px;
	margin-bottom: 10px;
}
.text{
	position: relative;
	color: #fff;
	font-size: 20px;
	font-weight: 300;
	letter-spacing: 1px;
	text-align: justify;
}
.services .text, .contact .text{
text-align: center;
}
.about .imgBx{
	position: relative;
	width: 50%;
	background-image: url("../img/quienes.jpeg");
	background-size: cover;
	background-position: center;
}
.services{
	position: relative;
	background: #12222d;
	text-align: center;
	padding: 100px;
}
.container{
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	margin-top: 80px;
}
.container .serviceBx{
	position: relative;
	background: #fff;
	width: 350px;
	height: 400px;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1000;
}
.container .serviceBx img{
	max-width: 150px;
}
.container .serviceBx h2{
 font-weight: 500px;
 font-size: 19px;
 letter-spacing: 3px;
 margin-top: 10px;
}
.tecnologia{
	position: relative;
	background: #3f8ffc;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 100px;
	padding-top: 300px;
	margin-top: -300px;
}
.tecnologia .contentBx{
	position: relative;
	max-width: 1000px;
}
.tecnologia .imgBx{
	position: relative;
	max-width: 300px;
}
.tecnologia .imgBx img{
	max-width: 100%;
	filter: invert(1);
}
.client{
	position: relative;
    height: auto;
	background: #162c3b;
	text-align: center;
}
.client .imgBx{
  width: 80%; /* Ancho de la galería */
  margin: 0 auto; /* Centrar la galería */
}
.client .imgBx img{
  width: 100%; /* Imágenes al 100% del contenedor */
  height: 300px; /* Altura automática para mantener la proporción */
}
/*.client .imgBx img:hover{
	opacity: 1;
}*/
.contact{
	position: relative;
	padding: 100px;
	text-align: center;
	margin-top: -90px;
	background: #162c3b;
}
.about .imgBx2{
	position: relative;
	width: 100%;
	background-image: url("../img/contact.jpeg");
	background-size: cover;
	background-position: center;
}
.redBg{
	background-image: url("../img/red.jpg") !important;
	background-size: cover;
	background-position: center;
}
.form{
	position: relative;

}
.form .inputBx{
	margin-bottom: 40px;
}
.form .inputBx input{
	width: 100%;
	background: transparent;
	box-shadow: none;
	border: none;
	outline: none;
	padding:  10px 0;
	font-size: 18px;
	font-weight: 300;
	color: #fff;
	border-bottom: 2px solid #fff;
}
.form .inputBx input::placeholder, .form .inputBx textarea::placeholder{
	color: #fff;
}
.form .inputBx textarea{
	width: 100%;
	background: transparent;
	box-shadow: none;
	border: none;
	outline: none;
	padding:  10px 0;
	font-size: 18px;
	font-weight: 300;
	color: #fff;
	min-height: 150px;
	border-bottom: 2px solid #fff;
}
.form .inputBx input[type="submit"]{
	width: 150px;
	background: #fff;
	color: #111;
	cursor: pointer;
	font-weight: 400;
}
.footer{
	position: relative;
	background: #162c3b;
	padding: 20px 100px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.footer ul{
	display: flex;
	justify-content: center;
	align-items: center;
}
.footer ul li{
	list-style:none;
}
.footer ul li a {
	text-decoration: none;
	display: inline-block;
	margin: 0 10px;
}
.footer ul li a img{
	max-width: 20px;
	filter: invert(1);
}
@media (max-width: 1200px){
    .client .imgBx img{
      width: 100%; /* Imágenes al 100% del contenedor */
      height: 250px; /* Altura automática para mantener la proporción */
    }
}

@media (max-width: 991px){
	header, header.sticky{
		max-width: 991px;
    	padding: 20px 50px;
	}
	.sidebar ul li a{
		font-size: 24px;
	}
	.banner{
		padding: 50px;
	}
	.banner .content h2{
		font-size: 36px;
	}
	.banner .content p{
		font-size: 16px;
	}
	.banner .telefono{
		margin-top: 80px;
		font-size: 40px;
	}
	.banner .whts{
		margin-top: 30px;
		font-size: 40px;
	}
	.about{
		flex-direction: column;
	}
	.about .heading{
		text-align: center;
	}
	.about .contentBx{
		padding: 50px;
		width: 100%;
	}
	.about .imgBx{
		min-height: 400px;
		width: 100%;
	}
	.services{
		padding: 50px;
	}
	.text{
		font-size: 15px;
		letter-spacing: 0px;
	}
	.container {
    	justify-content: center;
    	margin-top: 20px;
	}
	.container .serviceBx{
		width: 300px;
		height: 300px;
    	margin: 20px;
	}
	.tecnologia{
		padding: 50px;
		padding-top: 300px;
		margin-top: -300px;
		justify-content: center;
		flex-direction: column;
	}
	.tecnologia .imgBx{
    	margin-top: 40px;
	}
    .client .imgBx img{
      width: 100%; /* Imágenes al 100% del contenedor */
      height: 150px; /* Altura automática para mantener la proporción */
    }

	.contact {
    	padding: 50px;
	}
	.footer{
		padding: 20px 50px;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.footer p{
		text-align: center;
	}
	.footer ul{
		margin-top: 20px;
	}
}

@media (max-width: 900px){
	.services .p{
		text-align: justify;
	}

}
@media (max-width: 820px){

}
@media (max-width: 400px){
	.services .p{
		text-align: justify;
	}

}
@media (max-width: 362px){
	.about .text{
	    letter-spacing: 1px;
    	text-align: center;
	}
	.tecnologia .text{
	    letter-spacing: 1px;
	    text-align: center;
	}
}

/*SWIPER*/