@charset "utf-8";
/* CSS Document */ 
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');  
@import url('https://fonts.googleapis.com/css2?family=BBH+Bogle&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Geom:ital,wght@0,300..900;1,300..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

		:root {
			--BLACK: #231F20;
			--GRAY: #6D6E71;
			--DARKBLUE: #1F3864;
			--BLUE: #2F5697;
			--DODGERBLUE: rgba(0,114,188,1.00);
			--LIGHTBLUE: #9EC3E6;
			
			--azul-claro: #9EC3E6;
			--azul-oscuro: #0d1b2a;
			--blanco: #ffffff;
			--gris: #f5f5f5;
			 --bg:#0f1724;
			--big-circle:#0b2540;
			--accent1:#2dd4bf;
			--accent2:#60a5fa;
			--accent3:#f472b6;
			--accent4:#ddd;
			--glass: rgba(255,255,255,0.06);
		}
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box; 
			 font-family: "Source Sans 3", sans-serif;
		}
		html{
			overflow-x: hidden;
		}
		body {
			background: var(--blanco);
			color: var(--azul-oscuro);
			font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;			
		 
			overflow-x: hidden;
		}
		#console{
			width: 144px;
			height: auto;
			background-color: #002;
			color: lime;
			border-radius: 5px;
			border: solid 1px limegreen;
			position: fixed;
			left: 0;
			bottom: 20vh;
			z-index: 9999999;   
			display:none;
		}
.aos-wrapper{
	overflow-x: hidden;
}
 

/**********************************************************
  Arrox logo banner
/***************************************************************/
.arrow{
		bottom: 0px;
		width: 100%;
		height: 21px; 
		border: 0; 
		display: flex;
		padding: 0;
		margin: 0; 
	}
	.lineC{
		width: 100%;
		height: 2px;  
		background-image: linear-gradient(45rad,rgba(0,0,102,0.00),rgba(0,0,102,0.00),#006,#006,#006);
		display: flex;
		padding: 0;
		margin: 27px 0;
	}
	.lineC2{
		width: 100%;
		height: 2px;  
		background-image: linear-gradient(45rad,#006,#006,#006,rgba(0,0,102,0.00),rgba(0,0,102,0.00));
		display: flex;
		padding: 0;
		margin: 27px 0;
	}
	.line{
		width: 90%;
		height: 55px;
		border: 0; 
		padding: 0;
		margin: 0;
	}
	.arrowLine{
		width: 5%;
		height: 55px;
		border: 0; 
		padding: 0;
		margin: 0;
		position: relative;
		display: flex;
    	flex-direction: column;
    	align-items: center; /* centra horizontal */
    	justify-content: center; /* opcional, centra vertical */
	}
	.arrowLine img{
		width: 55px;
		height: 55px; 
		margin: auto;
	}


	/*##########################################################
		   0.0 SCROLLBAR
	##########################################################*/ 
	::-webkit-scrollbar{
	  width: 5px;  
	} 
	::-webkit-scrollbar-track{  
	  width: 1px; 
		
		background-color: white;

	}
	::-webkit-scrollbar-thumb { 
	  border-radius: 33px;  
		width: 2px; 
		
		background-color:var(--DARKBLUE);
	}
	::-webkit-scrollbar-thumb:hover {
	}

	/*##########################################################
		   0.0 siluette logo
	##########################################################*/ 	 
	 /* HEADER */
		header {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			padding: 0px 5%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: rgba(255,255,255,0); 
			z-index:251; 
			transition: 1s ease all;

		}
		#logo {
			width: 230px;
			height: 100px;
			margin: 25px 0;
		}
		/*  btns lanhuyage */
		nav {
			display: flex; 
			overflow: hidden;
		}
		nav a {
			text-decoration: none;
			color:white; 
			transition: 0.3s;
			margin: auto 1px;
			font-weight: 300;
			font-size: 12px;
		}	
		nav span{
			text-decoration: none;
			color: var(--DODGERBLUE);
			font-weight: 300;
			transition: 0.3s;
			margin: auto 3px;
		}
		nav a:hover {
			color: var(--azul-claro);
		}
		.lan{
			width: 14px;
			height: 14px;
			gap: 25px;
			margin: auto;
		}

		/*  btns menu */
		#line0{
			width: auto; 
			height: auto;
			padding: 0 0;
			display: flex;
			margin: auto 15px auto auto;
		}
		.nav { 
			display: flex; 
			overflow: hidden;
}
		.nav a { 
			text-decoration: none;
			color: white; 
			transition: 0.3s;
			margin: auto 21px;
			font-weight: 300;
}
		.nav a:hover {
			color: var(--azul-claro);
		}
		.nav img{
			width: 33px;
			height: 33px;
			gap: 25px;
			margin: auto;
		} 
		/* HERO */
		.hero {
			width: 100%;
			height:100vh;
			position: relative;
			overflow: hidden; 
			display: block;
			padding: 0 0 10vh; 
		}   
		/* SLIDER */
		.slider-container {
			background-image: url("../mobile.jpg");
			background-size: 200% 100%;
			top: 0; left: 0;
			width: 100%;
			height: 100%;
			overflow: hidden;
		}
		.slide { 
			width: 100%;
			height: 100%;
			background-size: cover;
			background-position: center;
			opacity: 0;
			transform: scale(1);
			border-radius: 0;
			transition: border-radius .8s ease;
		}
		.slide.active {
			opacity: 1;
		}  
 
		.hero-content {
			position: relative;
			top: 0; left: 0;
			width: 100%;
			height: 100%;
			padding: 0px;
			display: grid; 
			z-index: 5;
			border-radius: inherit;
		}
		.slide-video {
		width: 100%;
		height: 100%;
		object-fit: cover;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
	}
		.hero-content > div { 
			padding: 35vh 5% 0 5%;
		    background-image: linear-gradient(rgba(31,56,100,1),rgba(31,56,100,0.9),rgba(31,56,100,0.8),rgba(31,56,100,0.7),rgba(31,56,100,0.6),rgba(255,255,255,0.51),rgba(255,255,255,1));
			width: 100vw;
			height: 100%; 
			display: block;
		} 		
		.hero-content > div h2 { 
			color: white;
			font-size: 65px;
			font-weight: 500; 
		} 
		.text{ 
			color: #bbb;
			font-size: 21px;
			font-weight: 300;   
		} 

 .button-group{
	 margin-top: 55px;
  display:inline-flex;
  border-radius:4px;
  overflow:hidden ;
}
/* BOTONES */
.btn{  
	margin: 0 21px 0 0;
  display:flex;
  align-items:center; height:40px;
  text-decoration:none;
  transition:background 0.3s ease, transform 0.2s ease;
  position:relative;
}
/* BOTON DERECHO (más claro como en la imagen) */
.btn-left p{ 
  width:150px;
  height:40px;
	padding: 9px 0px;
	margin: auto 2px;
  font-size:16px;
  font-weight:600;
  color:#fff;
	text-align: center; 
	align-self: center;
	justify-content: space-around;
  background:linear-gradient(to bottom, #4f8ac9, #3573b5);
}
.btn-right p{ 
  width:150px;
  height:40px;
	padding: 9px 0px;
	margin: auto 2px;
  font-size:16px;
  font-weight:600;
  color:#fff;
	text-align: center; 
	align-self: center;
	justify-content: space-around;
  background:linear-gradient(to bottom, #6aa4de, #417fc4);
}
/* FLECHA */
.arrow0{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  width:40px;
  height:40px;
  border-radius:0%; 
  font-size:14px;
  font-weight:bold;
	margin: auto 0 auto auto;
  background:linear-gradient(to bottom, #4f8ac9, #3573b5);
}
.arrow0 img{ 
  width:32px;
  height:32px; 
	margin: 4px;
}
.arrow1{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  width:40px;
  height:40px;
  border-radius:0%; 
  font-size:14px;
  font-weight:bold;
	margin: auto 0 auto auto;
  background:linear-gradient(to bottom, #6aa4de, #417fc4);
}
.arrow1 img{ 
  width:32px;
  height:32px; 
	margin: 4px;
}
/* HOVER */
.btn:hover{ 
  transform:translateY(-1px);
} 
		 
		 /* HAMBURGER */
		.hamburger {
			display: none;
			flex-direction: column;
			gap: 6px;
			cursor: pointer;
			z-index: 250;
			background-color: #f1f1f1;
			padding: 13px;
			border-radius: 5px; 
			position: absolute;
			right: 2%;
			top: 33px;
		} 
		.hamburger span {
			width: 30px;
			height: 3px;
			background: var(--BLUE);
			transition: 0.3s;
		}
		.hamburger.active span:nth-child(1) {
			transform: rotate(45deg) translateY(8px);
		}
		.hamburger.active span:nth-child(2) {
			opacity: 0;
		}
		.hamburger.active span:nth-child(3) {
			transform: rotate(-45deg) translateY(-8px);
		}
		/* SIDENAV */
		.sidenav {
			position: fixed;
			top: 0;
			right: -100vw;
			width: 100vw;
			height: 100%;
			background: white;
			box-shadow: -2px 0 6px rgba(0,0,0,0.2);
			padding: 121px 0px 0px 0px;
			transition: 0.4s ease;
			display: flex;
			flex-direction: column;
			gap: 20px;
			z-index: 250; 
		}
		.sidenav a{
			text-decoration: none;
			color: #666;
			font-size: 21px;
			padding-top: 13px;
			padding-left: 21px;
		}
		.sidenav.open {

			animation:opensidenav 1s ease forwards;
		}
		.overlay {
			display: none;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,0.5);
			z-index: 240;
		}
		.overlay.show {
			display: block;
		}

		@keyframes opensidenav{
			0% { right: -100vw;} 		
			10% { right: -90vw;} 				
			50% { right: -80vw;} 
			80% { right: 0vw;} 
			100% { right: 0vw;} 
		}
		/* ============================
	   ANIMACIÓN DE LINKS SIDENAV
	   ============================ */
	.sidenav a {
		opacity: 0;
		clip-path: inset(100% 0 0 0); /* Oculto por abajo */
		transform: translateY(20px);
		transition: 
			opacity 2.5s ease,
			clip-path 2.5s ease,
			transform 2.5s ease;
		border-top: 1px solid #ddd;
	}
	/* Cuando el sidenav está abierto, los links serán animados por JS */
	.sidenav a.show-link {
		opacity: 1;
		clip-path: inset(0 0 0 0); /* Revela */
		transform: translateY(0);
	}
.iconLan{
	width: 21px;height: 21px;
	margin: auto 5px auto 0;
}
	.close{
			position: fixed;
			right: 5%;
			top: 2%;
			font-size: 55px;
			border-radius: 3px;
			padding: 8px; 
			padding-top: 8px;
			padding-left: 8px;
			background-color: #eee;
			font-weight: 700; 
				font-stretch: 120%; /* más ancho */
		}
	#sidenavLogo{
			position: fixed;
			left: 5%;
			top: 33px;
		width: 121px;
		height: 55px; 
		opacity: 0;
		transition: all forwards 5s;
		}
		@keyframes fadeLogo {
			0% {  opacity: 0; } 
			80% {  opacity: 0; } 
			100% {  opacity: 1; } 
		}	
		.addFade{
			animation: fadeLogo 1s ease forwards;
		}
		
  
	 	 
/* DIV PADRE */
.contenedor { 
  display: flex; 
  align-items: center;
  margin: 0 15% 5% 15%;
  width: 70%;
  gap:10px;
  justify-content: center;   /* 🔥 ESTA ES LA CLAVE */
}
/* DIV CONTENEDOR DE IMAGEN */
.item {
  display: grid; 
	background-color: var(--DODGERBLUE);
	border-top-left-radius: 21px;
	border-top-right-radius: 21px;
	border-bottom-left-radius: 13px;
	border-bottom-right-radius: 13px;
}
.itemOne {
	background-color: var(--DARKBLUE);
  width: 150px;
  height: 121px; 
  border-radius: 20px; 
	border: 5px solid white;
	display: flex;
			justify-content: space-between;
			align-items: center;
} 	
.itemOne p{
	margin: auto;
	font-size: 33px;
	color: white;
	font-weight: 800;
} 	
.itemTwo{  
	display: flex;
			justify-content: space-between;
			align-items: center; 
} 
.itemTwo p{
	text-align: center;
	margin: auto;
	font-size: 13px;
	color: white;
	font-weight: 300;
	padding-top: 8px;
	padding-bottom: 8px;
} 



/* service *********************/
.crecimiento{
	width: 100%;
	height: auto;
	padding: 2% 15%;
	background-color: #eee;
}
.services{
	height: auto;
	background-color:var(--DARKBLUE);
	overflow-x: hidden;
	display: flex;
	border-radius: 13px;
}	 
.img-frame{
	width: 50%; 
  position: relative;
  display: inline-block; 
  padding: 18px; /* espacio para los adornos */
}
.img-frameImg{
  display: block;
  width: 00%;
	transition: all ease 1s;
	height: 100%;
  border-radius: 6px;
	background-image: url("../slide1.jpg");
	background-size: cover;
}
/* ESQUINA SUPERIOR IZQUIERDA */
.img-frame::before{
  content: "";
  position: absolute;
  top: 8px;
  left: 8px;
  width: 60px;
  height: 60px;

  border-top: 1px solid #2f5fa8;
  border-left: 1px solid #2f5fa8;
}
/* ESQUINA INFERIOR DERECHA */
.img-frame::after{
  content: "";
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 60px;
  height: 60px;

  border-bottom: 1px solid #2f5fa8;
  border-right: 1px solid #2f5fa8;
}

/***************************************/
/* CONTENEDOR DEL SLIDER */
.slider {
    position: relative;
    width: 100%;
    max-width: 900px;   /* puedes quitar esto si quieres full width */
    height: 100%;      /* altura del div */
    overflow: hidden;
}
/* IMÁGENES */
.slider img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* cubre todo el div */
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}
/* IMAGEN ACTIVA */
.slider img.active {
    opacity: 1;
}
.servicesText{
	width: 50%;
	padding: 21px;
}
.servicesText h3{
	color: white;
	font-size: 33px;
	font-weight: 500;
	opacity: 0;
	transition: 1s ease all; 
}
.servicesLine{
	transition: 2s ease all;
	margin-top: 21px;
	width: 0%;
	height: 3px;
	background-image:linear-gradient(45grad,var(--DODGERBLUE),var(--BLUE),var(--DARKBLUE));
}
.servicesText p{
	transition: 3s ease all;
	opacity: 0;
	padding-top: 33px;
	color: white;
	font-size: 13px;
	font-weight: 300;
}
 .button-g{
	 position: absolute;
	 right: 15%;
	 margin-top: 0px;
  display:inline-flex;
  border-radius:4px;
  overflow:hidden ; 
}
/* BOTONES */
.bt{  
	margin: 0 21px 0 0;
  display:flex;
  align-items:center; height:40px;
  text-decoration:none;
  transition:background 0.3s ease, transform 0.2s ease;
  position:relative;
}
/* BOTON DERECHO (más claro como en la imagen) */
.bt-left p{ opacity: 1;
  width:150px;
  height:40px;
	padding: 9px 0px;
	margin: auto 2px;
  font-size:16px;
  font-weight:600;
  color:#fff;
	text-align: center; 
	align-self: center;
	justify-content: space-around;
  background:linear-gradient(to bottom, #4f8ac9, #3573b5);
} 
/* FLECHA */
.arro0{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  width:40px;
  height:40px;
  border-radius:0%; 
  font-size:14px;
  font-weight:bold;
	margin: auto 0 auto auto;
  background:linear-gradient(to bottom, #4f8ac9, #3573b5);
}
.arro0 img{ 
  width:32px;
  height:32px; 
	margin: 4px;
}


/**api + carrousel cards ********************/	
.titleFlex{ 
	background-color: #eee;
	width: 100%;
	padding: 0% 15%; 	
	margin: 0;
}
.titleFlexBox{
	border-top-left-radius: 21px;
	border-top-right-radius: 21px;
	display: flex;
	width: 100%; 
	background-color: white;
	
}
.dir{
	display: flex;
	flex-direction: column; 
	padding:1% 1%;
	width: 50%;
}
.dir h3{
	
    background: linear-gradient(90deg, darkblue, dodgerblue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
	 
	font-size: 33px;
	font-weight: 500;
	width: 50%;
	padding: 13px;
}
.dirLine{ 
	margin-top: 21px;
	width: 100%;
	height: 3px;
	background-image:linear-gradient(45grad,var(--DODGERBLUE),var(--BLUE),var(--DARKBLUE),rgba(0,0,0,0.0));
}
.titleFlex p{
	color: var(--BLACK);
	font-size: 13px;
	font-weight: 300;
	width: 50%;
	padding: 5% 13px 0px 13px;
}

.api{ 
	margin: 0;
	background-color: #eee;
	width: 100%;
	padding: 0% 15%; 
	
}
.apiBox{
	margin: 0;
	background-color: white;
	overflow-x: hidden;
	height: auto; 
	display:flex;
	flex-direction: column;
	
}		 		
.api h3{
        font-size: 39px;
        font-weight: 400; 
        color:#fff;
	margin: 5% 15% 0 15%;
    }
.apiSub {
	color: var(--LIGHTBLUE) ;
	margin: 0px 15% auto 15%;
        font-size: 27px;
        margin-top: 15px;
    } 
 .carousel-container-fdx {
    position: relative;
    width: 100%;
	 margin: 0 0%;
    padding: 0px 0% 0 0%;
    overflow: hidden;
  }
  .carousel-fdx {
    display: flex;
    gap: 24px;
    padding: 40px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
  }
  .carousel-fdx::-webkit-scrollbar {
    display: none;
  }
  .card-fdx {
    width: 30vw;
    height: 420px;
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 8px 25px rgba(0,0,0,1);
    padding: 0px;
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
    transition: transform .2s ease;
  }
  .card-fdx:hover {
    transform: translateY(-6px);
  }
  .glow-bg-fdx {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(255,170,0,0.4), transparent 60%);
    filter: blur(40px);
    z-index: 1;
  }
  .content-fdx {
    position: relative;
    z-index: 2;
	  background-image:linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.6));
	  padding: 33px;
	  height: 100%;
  }
  img.icon{
	  width: 66px;
	  height: 66px;
	  margin: auto auto auto 3px;
		}
  .card1{
			background-image: url("../card1.jpg");
			background-size: cover;
 } 	 
  .card2{
			background-image: url("../card2.jpg");
			background-size: cover;
 } 	 
  .card3{
			background-image: url("../card3.jpg");
			background-size: cover;
 } 	 
  .card4{
			background-image: url("../card4.jpg");
			background-size: cover;
 } 	 
  .card5{
			background-image: url("../card5.jpg");
			background-size: cover;
 } 	 
  .title-fdx {
    font-size: 24px;
    font-weight: 700;
	  color: white;
    margin-bottom: 6px;
  }
  .subtitle-fdx {
    font-size: 15px;
    font-weight: 600;
    background: linear-gradient(90deg, dodgerblue, lightblue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .price-fdx {
    margin-top: 6px;
    font-size: 15px;
    color: #eee;
  }	   
  /* Botones */
  .btn-fdx {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
  }
  .btn-fdx svg {
    width: 22px;
    height: 22px;
  }
  .btn-left-fdx { left: 0%; }
  .btn-right-fdx { right: 0%; }		
/***/
 .buttong{
	 margin: 0 0% 1% auto;
	 position: relative;  
  display:inline-flex;
  border-radius:4px;
  overflow:hidden ;  
}
/* BOTONES */
.btg{  
	margin: 0 0px 0 0;
  display:flex;
  align-items:center; height:40px;
  text-decoration:none;
  transition:background 0.3s ease, transform 0.2s ease;
  position:relative;
}
/* BOTON DERECHO (más claro como en la imagen) */
.bt-leftg p{ opacity: 1;
  width:150px;
  height:40px;
	padding: 9px 0px;
	margin: auto 2px;
  font-size:16px;
  font-weight:600;
  color:#fff;
	text-align: center; 
	align-self: center;
	justify-content: space-around;
  background:linear-gradient(to bottom, #4f8ac9, #3573b5);
} 
/* FLECHA */
.arro0g{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  width:40px;
  height:40px;
  border-radius:0%; 
  font-size:14px;
  font-weight:bold;
	margin: auto 0 auto auto;
  background:linear-gradient(to bottom, #4f8ac9, #3573b5);
}
.arro0g img{ 
  width:32px;
  height:32px; 
	margin: 4px;
}

/* footer design */		
.footerDesing{
	width: 100%;
	margin: 0 0%;
	height: 30px; 
	position: relative;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	border-bottom-left-radius: 21px;
	border-bottom-right-radius: 21px;
}

.footerDesing2{
	width: 100%;
	margin: 0%;
	height: 30px; 
	position: relative;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	border-bottom-left-radius: 21px;
	border-bottom-right-radius: 21px;
}

		.line1{  
		width: 45%;
			margin: 0px 0 0 55%;
			background-color: var(--LIGHTBLUE);
		height: 10px;
		clip-path: polygon( 13px 0%,  100% 0%, 100% 100%, 0% 100%);
		}
		.line2{
			margin: 0px;
			margin: 0px 0 0 25%;
		width: 75%;
		background-color:var(--DODGERBLUE);
		height: 10px;
		clip-path: polygon( 13px 0%,  100% 0%, 100% 100%, 0% 100%);
		}
		.line3{
			margin: 0px;
		width: 100%;
		height: 10px;
		clip-path: polygon( 0 0%,  100% 0%, 100% 100%, 0% 100%);
 
		background-color:var( --DARKBLUE);
	border-bottom-left-radius: 21px;
	border-bottom-right-radius: 21px;
		} 

/* service */
.solutions{
	width: 100%;
	height: auto;
	background-color: #eee;
	 
	padding: 2% 15%;
}
/* CONTENEDOR PADRE */
.servicesNew{
background-color: var(--DARKBLUE);
	border-radius: 13px;
	height: 100vh;
}
/* CONTENEDOR PADRE */
.serviceBox{
	padding: 10% 0;
  display:block;  
  margin: auto;   
}

.Line{ 
	margin-top: 0px;
	width: 70%;
	height: 3px;
	background-image:linear-gradient(45grad,var(--DODGERBLUE),var(--BLUE),var(--DARKBLUE),rgba(0,0,0,0.0));
	margin: 0px 15% 5% 15%;
}
.serviceBox h4{
	color:#FFF;
	font-size: 33px;
	font-weight: 500;
	padding: 13px 13px 0px 10%;
}
.serviceBox h5{ 
	color:#FFF;;
	font-size: 27px;
	font-weight: 300;
	padding: 0px 13px 0% 15%;
}
.servicesNewInside{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0px; 
  margin: auto;   
	padding: 0 10%;

}
/* ITEM */
.service{
  text-align: center;
} 
/* ESFERA */
.circle{
  width: 10vw;
  height: 10vw;
  margin: auto;
  border-radius: 50%;
  background-size: cover;
  background-position: center; 
	box-shadow: 0 3px 21px #111;
	transition: 1s ease all;
}
.circle:hover{
  transform: scale(1.1);
	box-shadow: 0 3px 21px #fff;
}
/* TEXTO */
.service p{
  margin-top: 14px;
  font-size: 14px;
  font-weight: 500;
	color:#FFF;
}
 
/** trazabilidad  ********************/	

.trazabilidad {
	width: 100%;
	height: auto;
	background-color: #eee;
	 
	padding: 2% 15%;
}
.tracking{
	width: 100%;
	height: auto; 
	background-color: white;
	background-size: 100% 100%;
	border-radius: 21px;
}
/* CONTENEDOR */
.dashboard-panel{
  

  background-image:url("../mein.jpg");
  background-size: 100% 250%;
  background-position:center left;
position: absolute;
		width: 35%; 
	right: 15%;
		height: 100px;
	  border-top-right-radius: 21px;
	  border-bottom-right-radius: 21px;
		clip-path: polygon( 0% 0%,  100% 0%, 100% 100%, 25% 100%);
		
} 
.trackingTool{
	border-radius: 21px;
	width: 100%;
	height: 100vh;
	padding: 5% 15%;
	background-image: linear-gradient(rgba(255,255,255,1),rgba(255,255,255,0.60),rgba(255,255,255,1.00));
}
.trackingTool h5{ 
	  background: linear-gradient(90deg, darkblue, dodgerblue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
	 
	font-size: 33px;
	font-weight: 500;
	width: 50%; 
}
.trackingTool h6{ 
	  background: linear-gradient(90deg, darkblue, dodgerblue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; 
	font-size: 33px;
	font-weight: 500;
	width: 75%;
	padding: 0 5%;
}
.dirLine2{ 
	margin-top: 21px;
	width: 75%;
	height: 3px;
	background-image:linear-gradient(45grad,var(--DODGERBLUE),var(--BLUE),var(--DARKBLUE),rgba(0,0,0,0.0));
}
.trackingText{   
	color:var(--DARKBLUE);
	font-size: 14px;
	font-weight: 300; 
	width: 75%;
	margin-top: 13px;
}
.trackingIcons{
	width: 100%;
	height: auto; 
	 
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}
.itemIcons{
	margin-top: 21px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
}
.itemIcons img{
	width: 55px;
	height: 55px;
	padding: 8px;
	background-color: #eee;
	border-radius: 3px;
}
.itemIcons p{
	font-size: 14px;
	width: 70%;
	margin: 3px 15%;
	color: var(--DARKBLUE);
	text-align: center;
}
 

/** seguridad  ********************/	
.seguridad{
	width: 100%;
	height: auto;
	/*background-image: url("../bg3.jpg");*/
	background-color: #eee;
	background-size: 100% 100%;
	padding: 5% 15%;
}
.seguridadBox{
	border-radius: 21px;
	width: 100%;
	height: auto;
	background-color: var(--DARKBLUE);
	display: flex;
}
.seguridadItem{
	width: 50%;
	display: flex;
  flex-direction: column;
	text-align: right; 
	
} 
.seguridadItem h5{ 
	color: white;
	font-size: 33px;
	font-weight: 500; 
	transition: 1s ease all; 
	text-align: right; 
}
.seguridadItem h6{ 
	text-align: right; 
	color:white;
	font-size: 17px;
	font-weight: 300;
	padding: 0px 0px 0px 0px;
}
.seguridadItem p{ 
	text-align: right; 
	color:white;
	font-size: 13px;
	font-weight: 300;
	padding: 0px 0px 0px 0px; 
} 

.img-frameP{
	width: 50%; 
  position: relative;
  display: inline-block;
  padding: 18px; /* espacio para los adornos */
}
.img-frameImgP{
	background-image: url("../slide1.jpg");
	background-size: cover;
  display: block;
  width: 00%;
	transition: all ease 1s;
	height: 100%;
  border-radius: 6px;  
}
/* ESQUINA SUPERIOR IZQUIERDA */
.img-frameP::before{
  content: "";
  position: absolute;
  top: 8px;
  left: 8px;
  width: 60px;
  height: 60px;

  border-top: 1px solid #2f5fa8;
  border-left: 1px solid #2f5fa8;
}
/* ESQUINA INFERIOR DERECHA */
.img-frameP::after{
  content: "";
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 60px;
  height: 60px;

  border-bottom: 1px solid #2f5fa8;
  border-right: 1px solid #2f5fa8;
} 
/***/
 .buttonK{ 
  display:inline-flex;
  border-radius:4px;
  overflow:hidden ;  
	 margin-top: 13px;
} 

/* BOTONES */
.btK{  
	margin: 0 0px 0 0;
  display:flex;
  align-items:center; height:40px;
  text-decoration:none;
  transition:background 0.3s ease, transform 0.2s ease;
  position:relative;
}
/* BOTON DERECHO (más claro como en la imagen) */
.bt-leftK{
opacity: 1;
  width:150px;
  height:40px;
	padding: 9px 0px;
	margin: auto 2px;
  font-size:16px;
  font-weight:600;
  color:#fff;
	text-align: center; 
	align-self: center;
	justify-content: space-around;
	background-color: royalblue;
} 
/* FLECHA */
.arro0K{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  width:40px;
  height:40px;
  border-radius:0%; 
  font-size:14px;
  font-weight:bold;
	margin: auto 0 auto auto;
	background-color: royalblue;
}
.arro0K img{ 
  width:32px;
  height:32px; 
	margin: 4px;
}


/***************************************/
/* CONTENEDOR DEL SLIDER */ 
.servicesTextP{
	width: 50%;
	padding: 21px;
}
.servicesTextP h3{
        background: linear-gradient(to right,  #FFF, var(--LIGHTBLUE) );
        -webkit-background-clip: text;
        color: transparent;
	font-size: 33px;
	font-weight: 500;
	opacity: 0;
	transition: 1s ease all; 
}
.servicesTextP h6{
        background: linear-gradient(to right,  #FFF, var(--LIGHTBLUE) );
        -webkit-background-clip: text;
        color: transparent;
	font-size: 21px;
	font-weight: 300;
	opacity: 0;
	transition: 1s ease all; 
}
.servicesLineP{
	transition: 2s ease all;
	margin-top: 21px;
	width: 0%;
	height: 3px;
	background-image:linear-gradient(45grad,#fff,#fff,var(--DARKBLUE));
}
.servicesTextP p{
	transition: 3s ease all;
	opacity: 0;
	padding-top: 33px;
        background: linear-gradient(to right,  #fff, var(--LIGHTBLUE) );
        -webkit-background-clip: text;
        color: transparent;
	font-size: 13px;
	font-weight: 300;
}   

 
/* performance*********************/	
.dev{
	width: 100%;
	height: auto;
	/*background-image: url("../bg3.jpg");*/
	background-color: #eee;
	background-size: 100% 100%;
	padding: 5% 15%;
}
.performance{
	background-image: linear-gradient(rgba(255,255,255,1),rgba(255,255,255,1));
	height: auto; 
	overflow-x: hidden; 
	display: flex;
	flex-direction: column;
	border-radius: 21px;
}
.performanceTtile{
	overflow: hidden; 
	display: flex; 
}
.p{
	width: 50%;
	display: flex;
	flex-direction: column;
}
.dashboard-panel2{
  background-image:url("../mein.jpg");
  background-size: 100% 250%;
  background-position:center left; 
		width: 35%;  
		height: 100px;
	  border-top-left-radius: 21px;
	  border-bottom-left-radius: 21px;
		clip-path: polygon( 0% 0%,  100% 0%, 100% 0%, 75% 100%,0% 100%);
		
} 
.performanceTool{
	width: 100%;
	height: auto;
	padding: 5% 15%;
	background-image: linear-gradient(rgba(255,255,255,1),rgba(255,255,255,0.60),rgba(255,255,255,1.00));
}
.p h5{ 
	color:var(--DARKBLUE);
	font-size: 33px;
	font-weight: 500; 
	padding: 0px 0px 0px 0px;
}
.p h6{ 
	color:var(--DARKBLUE);
	font-size: 33px;
	font-weight: 500; 
	padding: 0px 0px 0px 21px;
}
.performanceText{   
	color:var(--DARKBLUE);
	font-size: 14px;
	font-weight: 300; 
}
.box{
	border: 1px solid var(--LIGHTBLUE);
	border-radius: 21PX;
	margin: 3px;
}

 	 
/** footer ********************/		
		footer{
			background-color: var(--DARKBLUE);
			height: auto;
			text-align: center;
			align-items: center; 
			display: grid;
		}	
		.topLine{
			width: 100%;
			height: 2px;
			background-image: linear-gradient(33rad,rgba(255,255,255,0),rgba(255,255,255,0.3),rgba(255,255,255,1),rgba(255,255,255,0.3),rgba(255,255,255,0.0));
		}
		.logoFooter{
			margin: 13px auto;
			width: 100px;
			height: 50px;
		
		}
		.links{
			display: flex;
			margin: 0 auto;
		}
		.links a{
			display: flex;
			text-decoration: none;
			transition: ease 1s all;
			font-weight: 100;
		}
		.links a:hover p{
			color: var(--LIGHTBLUE);
		}
		.links img{
			width: 17px;
			height: 17px;
			margin: auto 0px auto 0px;
		}
		.links p{
			transition: ease 1s all;
			color: white;
			font-size: 12px;
			margin:  auto 21px auto 5px;
			font-weight: 100;
		}
		.p{
			transition: ease 1s all;
			color: white;
			font-size: 12px;
			margin:  5px auto ;
			text-decoration: none;
			font-weight: 200;
		}
		.p:hover{
			color: var(--LIGHTBLUE);
		}
		.lk{
			width: 33px;
			height: 33px;
		}
		
	 
 
		
/* for mobile version ##########################################################*/
@media(max-width:1024px) {	
	
	/* line mein ##########################################################*/
.arrow{
		bottom: 0px;
		width: 100%;
		height: 21px;
		position: absolute;
		border: 0; 
		display: flex;
		padding: 0;
		margin: 0; 
	}
	.lineC{
		width: 100%;
		height: 2px;  
		background-color: white;
		display: flex;
		padding: 0;
		margin: 10px 0;
	}	
	.lineC2{
		width: 100%;
		height: 2px;   
		display: flex;
		padding: 0;
		margin: 10px 0;
	}
	.line{
		width: 47%;
		height: 21px;
		border: 0; 
		padding: 0;
		margin: 0;
	}
	.arrowLine{
		width: 6%;
		height: 21px;
		border: 0; 
		padding: 0;
		margin: 0;
		position: relative;
		display: flex;
    	flex-direction: column;
    	align-items: center; /* centra horizontal */
    	justify-content: center; /* opcional, centra vertical */
	}
	.arrowLine img{
		width: 21px;
		height: 21px; 
		margin: auto;
	}
	
/* header nav##########################################################*/
	
/*##########################################################
		   0.0 siluette logo
	##########################################################*/ 	 
	 /* HEADER */ 
		#logo {
			width: 149px;
			height: 60px; 
		} 
nav { display: none; }
.hamburger { display: flex;} 
#line0{display: none;}
.nav {
			display:none;  
		}
	
	/* HERO */
		.hero {
			width: 100%;
			height:auto;
			position: relative;
			overflow: hidden; 
			display: block;
			padding: 0 0 10vh; 
		}    		
		.hero-content > div h2 { 
			color: white;
			font-size: 33px;
			font-weight: 500; 
		} 
		.text{ 
			color: #bbb;
			font-size: 17px;
			font-weight: 300;   
		} 

 .button-group{
	 margin-top: 55px;
  display:inline-grid;
  border-radius:4px;
  overflow:hidden ;
}
/* BOTONES */
.btn{  
	margin:  13px 0  0 0;
  display:flex;
  align-items:center; height:40px;
  text-decoration:none;
  transition:background 0.3s ease, transform 0.2s ease;
  position:relative;
}
/* BOTON DERECHO (más claro como en la imagen) */
.btn-left p{ 
  width:150px;
  height:40px;
	padding: 9px 0px;
	margin: auto 2px;
  font-size:16px;
  font-weight:600;
  color:#fff;
	text-align: center; 
	align-self: center;
	justify-content: space-around;
  background:linear-gradient(to bottom, #4f8ac9, #3573b5);
}
.btn-right p{ 
  width:150px;
  height:40px;
	padding: 9px 0px;
	margin: auto 2px;
  font-size:16px;
  font-weight:600;
  color:#fff;
	text-align: center; 
	align-self: center;
	justify-content: space-around;
  background:linear-gradient(to bottom, #6aa4de, #417fc4);
}
/* FLECHA */
.arrow0{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  width:40px;
  height:40px;
  border-radius:0%; 
  font-size:14px;
  font-weight:bold;
	margin: auto 0 auto auto;
  background:linear-gradient(to bottom, #4f8ac9, #3573b5);
}
.arrow0 img{ 
  width:32px;
  height:32px; 
	margin: 4px;
}
.arrow1{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  width:40px;
  height:40px;
  border-radius:0%; 
  font-size:14px;
  font-weight:bold;
	margin: auto 0 auto auto;
  background:linear-gradient(to bottom, #6aa4de, #417fc4);
}
.arrow1 img{ 
  width:32px;
  height:32px; 
	margin: 4px;
}
/* HOVER */
.btn:hover{ 
  transform:translateY(-1px);
} 

	
/* DIV PADRE */
.contenedor { 
  display: grid; 
  align-items: center;
  margin: 0 1% 5% 1%;
  width: 98%;
  gap:10px;
  justify-content: center;   /* 🔥 ESTA ES LA CLAVE */
} 
	

/* service *********************/	
.services{
	height: auto;
	background-color: var(--DARKBLUE);
	overflow-x: hidden;
	padding: 10% 1% 25% 1%;
	display: grid;
}	 
.img-frame{
	width: 100%; 
  position: relative;
  display: inline-block;
  padding: 18px; /* espacio para los adornos */
}
.img-frameImg{
  display: block;
  width: 100%;
	height: 100%;
  border-radius: 6px;
	background-image: url("../slide1.jpg");
	background-size: cover;
} 
.servicesText{
	width: 100%;
	padding: 21px;
}
.servicesText h3{
	color: white;
	font-size: 21px;
	font-weight: 500;
} 
.servicesText p{
	padding-top: 13px;
	color: white;
	font-size: 13px;
	font-weight: 300;
}	
		
/**api + carrousel cards ********************/	
.dir{
	display: grid;
	padding: 5% 1%;
}
.dir h3{
	color: var(--BLACK);
	font-size: 21px;
	font-weight: 500;
	width: 100%;
	padding: 13px;
}
.dir p{
	color: var(--BLACK);
	font-size: 13px;
	font-weight: 300;
	width: 100%;
	padding: 13px;
}

	
	 
	
		
/**api + carrousel cards ********************/	  
.api h3{
        font-size: 27px;
        font-weight: 700;
        background: linear-gradient(to right, var(--DARKBLUE) ,var(--DODGERBLUE)  );
        -webkit-background-clip: text;
        color: transparent;
	margin: 5% auto 0 2%;
    }
.apiSub {
	color: var(--DODGERBLUE) ;
	margin: 0px auto auto 5%;
        font-size: 21px;
        margin-top: 15px;
    } 
 .carousel-container-fdx {
    position: relative;
    width: 100%;
    padding: 0px 0% 0 0%;
	 margin: 0;
    overflow: hidden;
  }
  .carousel-fdx {
    display: flex;
    gap: 24px;
    padding: 40px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
  }
  .carousel-fdx::-webkit-scrollbar {
    display: none;
  }
  .card-fdx {
    width: 70vw;
    height: 420px;
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 8px 25px rgba(0,0,0,1);
    padding: 0px;
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
    transition: transform .2s ease;
  } 
  .card1{
			background-image: url("../card1.jpg");
			background-size: cover;
 } 	 
  .card2{
			background-image: url("../card2.jpg");
			background-size: cover;
 } 	 
  .card3{
			background-image: url("../card3.jpg");
			background-size: cover;
 } 	 
  .card4{
			background-image: url("../card4.jpg");
			background-size: cover;
 } 	 
  .card5{
			background-image: url("../card5.jpg");
			background-size: cover;
 } 	
  .btn-left-fdx { left: 0%; }
  .btn-right-fdx { right: 0%; }		
				 
	 
/* service */
	/* service *********************/
  .service{ 
	  overflow: hidden;
	  height: auto; 
		}		
	  .big-circle{ width:25vmin; height:25vmin; top:40%; 
	 }
    .f1{ left:6%; top:16%; width:121px;height:121px; background-size: 121px 121px;}
    .f2{ right:8%; top:3%; width:121px;height:121px;background-size: 121px 121px;}
    .f3{ left:12%; bottom:21%; width:112px;height:112px;background-size: 112px 112px;}
    .f4{ right:10%; bottom:0%; width:100px;height:100px;background-size: 100px 100px;}
  .textR{
  font-family: "Geom", sans-serif;
			position: absolute;
			 font-size:21px;
    line-height:1.02;
    font-weight:100;
    letter-spacing:1px;
	  color: #FFF;
			left: 75%;
	  text-shadow: 0 0 21px rgba(0,0,0,0.6); 
		}		
  .textL{
  font-family: "Geom", sans-serif;
			position: absolute;
			 font-size:21px;;
    line-height:1.02;
    font-weight:100;
    letter-spacing:1px;
	  color: #FFF;
			right: 75%;text-shadow: 0 0 21px rgba(0,0,0,0.6);	 
		}	
.service h5{
        font-size: 33px;
        font-weight: 700;
        background: linear-gradient(to right, #FFF , var(--LIGHTBLUE) );
        -webkit-background-clip: text;
        color: transparent;
	margin: 5% auto 0px 10%;
    }
.serviceText {
        font-size: 21px;
        font-weight: 100;
        background: linear-gradient(to right, #FFF , var(--LIGHTBLUE) );
        -webkit-background-clip: text;
        color: transparent;
	margin: 0% auto auto 10%;
    } 
#serviceImg{
	width: 195px;
	height: 195px;
	border-radius: 50%;  
	position: absolute;
	background-size: 200% 200%;
	}	
#serviceDiv{
	padding-top: 89px;
	margin-left: 2%;
		width: 100%;
	position: relative; 
		}	
	
	
/** trazabilidad  ********************/	
.tracking{
	width: 100%;
	height: auto;
	/*background-image: url("../bg2.jpg");*/
	background-color: white;
	background-size: 100% 100%;
}
.trackingTool{
	width: 100%;
	height: auto;
	padding: 5% 1%;
	background-image: linear-gradient(rgba(255,255,255,1),rgba(255,255,255,0.60),rgba(255,255,255,1.00));
}
.trackingTool h5{ 
	color:var(--DARKBLUE);
	font-size: 33px;
	font-weight: 500;
	padding: 0px 0px 0px 0px;
}
.trackingTool h6{ 
	color:var(--DARKBLUE);
	font-size: 17px;
	font-weight: 300;
	padding: 0px 0px 0px 0px;
}
.trackingText{   
	color:var(--DARKBLUE);
	font-size: 14px;
	font-weight: 300; 
}
.trackingIcons{
	width: 100%;
	height: auto; 
	 
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
.itemIcons{
	margin-top: 21px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
}
.itemIcons img{
	width: 55px;
	height: 55px;
	padding: 8px;
	background-color: #eee;
	border-radius: 3px;
}
.itemIcons p{
	font-size: 14px;
	width: 70%;
	margin: 3px 15%;
	color: var(--DARKBLUE);
	text-align: center;
}

/** seguridad  ********************/	
.seguridad{
	width: 100%;
	height: auto;
	/*background-image: url("../bg3.jpg");*/
	background-color: var(--DARKBLUE);
	background-size: 100% 100%;
}
.seguridadBox{
	width: 100%;
	height: auto;
	padding: 5% 1%;
	background-image: linear-gradient(rgba(31,56,100,1.00),rgba(31,56,100,0.90),rgba(31,56,100,0.80),rgba(31,56,100,0.80),rgba(31,56,100,0.80),rgba(31,56,100,0.80));
	display: flex;
	flex-direction: column;
}
.seguridadItem{
	width: 100%;
	display: flex;
  flex-direction: column;
	text-align: right; 
	
} 
.seguridadItem h5{ 
	color: white;
	font-size: 33px;
	font-weight: 500; 
	transition: 1s ease all; 
	text-align: right; 
}
.seguridadItem h6{ 
	text-align: right; 
	color:white;
	font-size: 17px;
	font-weight: 300;
	padding: 0px 0px 0px 0px;
}
.seguridadItem p{ 
	text-align: right; 
	color:white;
	font-size: 13px;
	font-weight: 300;
	padding: 0px 0px 0px 0px; 
} 

.img-frameP{
	width: 100%; 
  position: relative;
  display: inline-block;
  padding: 18px; /* espacio para los adornos */
}
.img-frameImgP{
  display: block;
  width: 00%;
	transition: all ease 1s;
	height: 100%;
  border-radius: 6px;
	background-image: url("../slide1.jpg");
	background-size: cover;
}
/* ESQUINA SUPERIOR IZQUIERDA */
.img-frameP::before{
  content: "";
  position: absolute;
  top: 8px;
  left: 8px;
  width: 60px;
  height: 60px;

  border-top: 1px solid #2f5fa8;
  border-left: 1px solid #2f5fa8;
}
/* ESQUINA INFERIOR DERECHA */
.img-frameP::after{
  content: "";
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 60px;
  height: 60px;

  border-bottom: 1px solid #2f5fa8;
  border-right: 1px solid #2f5fa8;
} 

/***************************************/
/* CONTENEDOR DEL SLIDER */ 
.servicesTextP{
	width: 100%;
	padding: 21px;
}
.servicesTextP h3{
        background: linear-gradient(to right,  #FFF, var(--LIGHTBLUE) );
        -webkit-background-clip: text;
        color: transparent;
	font-size: 33px;
	font-weight: 500;
	opacity: 0;
	transition: 1s ease all; 
}
.servicesTextP h6{
        background: linear-gradient(to right,  #FFF, var(--LIGHTBLUE) );
        -webkit-background-clip: text;
        color: transparent;
	font-size: 21px;
	font-weight: 300;
	opacity: 0;
	transition: 1s ease all; 
}
.servicesLineP{
	transition: 2s ease all;
	margin-top: 21px;
	width: 0%;
	height: 3px;
	background-image:linear-gradient(45grad,#fff,#fff,var(--DARKBLUE));
}
.servicesTextP p{
	transition: 3s ease all;
	opacity: 0;
	padding-top: 33px;
        background: linear-gradient(to right,  #fff, var(--LIGHTBLUE) );
        -webkit-background-clip: text;
        color: transparent;
	font-size: 13px;
	font-weight: 300;
}   

 
/* performance*********************/	
.performance{
	background-image: linear-gradient(rgba(255,255,255,1),rgba(255,255,255,1));
	height: auto; 
	overflow-x: hidden; 
	display: flex;
}	 
.performanceTool{
	width: 100%;
	height: auto;
	padding: 5% 1%;
	background-image: linear-gradient(rgba(255,255,255,1),rgba(255,255,255,0.60),rgba(255,255,255,1.00));
}
.performanceTool h5{ 
	color:var(--DARKBLUE);
	font-size: 33px;
	font-weight: 500;
	padding: 0px 0px 0px 0px;
}
.performanceTool h6{ 
	color:var(--DARKBLUE);
	font-size: 17px;
	font-weight: 300;
	padding: 0px 0px 0px 0px;
}
.performanceText{   
	color:var(--DARKBLUE);
	font-size: 14px;
	font-weight: 300; 
}
	
/** footer ********************/				
		footer{
			background-color: var(--DARKBLUE);
			height: auto;
			text-align: center;
			align-items: center; 
			display: grid;
		}	
		.topLine{
			width: 100%;
			height: 2px;
			background-image: linear-gradient(33rad,rgba(255,255,255,0),rgba(255,255,255,0.3),rgba(255,255,255,1),rgba(255,255,255,0.3),rgba(255,255,255,0.0));
		}
		.logoFooter{
			margin: 13px auto;
				width: 149px;
			height: 60px; 
		
		}
		.links{
			display: block;
			margin: 0 auto;
		}
		.links a{
			margin: 5% auto;
			display: flex;
			text-decoration: none;
			transition: ease 1s all;
			font-weight: 100;
		}
		.links a:hover p{
			color: var(--LIGHTBLUE);
		}
		.links img{
			width: 17px;
			height: 17px;
			margin: auto 0px auto 0px;
		}
		.links p{
			transition: ease 1s all;
			color: white;
			font-size: 12px;
			margin:  auto 21px auto 5px;
			font-weight: 100;
		}
		.p{
			transition: ease 1s all;
			color: white;
			font-size: 17px;
			margin:  5px auto ;
			text-decoration: none;
			font-weight: 200;
		}
		.p:hover{
			color: var(--LIGHTBLUE);
		}
		.lk{
			width: 33px;
			height: 33px;
		}
		
	
}