/* ****box 1 ***
****box 1 *** */





.container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 50px;

}
.sectionT {
	text-align: center;
	margin-top: 5%;
	color: #fff;
}

.sectionT p {
	margin: 5%;
	font: 18px;
    line-height: 22px;
    margin-bottom: 20px;
}
.boxB {
	position: relative;
	height: 400px;
	max-width: 300PX;
	/* background: linear-gradient(45deg, #24222791, #1f1616); */
	background: linear-gradient(45deg, #100e1360, #091627b4);
	box-sizing: border-box;
	padding: 30px;
	transition: .5s;
	padding: center;
	overflow: hidden;
	margin: auto;
	text-align: center;
	border-radius: 18px;
	transition: all 0.6s ease;
}
.boxB p {
	color: #fff;
	font-size: 16px;
	margin-top: 7%;
	text-align: left;
	text-align: center;
}
.boxB h3 {
	font-size: 25px;
	text-transform: uppercase;
	color: #fff;
	margin-top: 1rem;


/* 
ICONOS */



}
.iconsA {
	width: 65px;
	height: 65px;
	background: #34f1a2c2;
	margin: auto;
	border-radius: 50px;
	
}

.iconsB {
	width: 65px;
	height: 65px;
	background: #34f1a2c2;
	margin: auto;
	border-radius: 50px;
	
}

.iconsC {
	width: 65px;
	height: 65px;
	background: #34f1a2c2;
	margin: auto;
	border-radius: 50px;
	
}

.iconsD {
	width: 65px;
	height: 65px;
	background: #34f1a2c2;
	margin: auto;
	border-radius: 50px;
	
}
.iconsA i {
	
	margin: auto;
	font-size: 35px;
	line-height: 68px;
	margin-left: auto;
	
	
	
	
	
}

.iconsB i {
	margin: auto;
	font-size: 35px;
	line-height: 68px;
	margin-left: auto;

	
	
}

.iconsC i {
	margin: auto;
	font-size: 35px;
	line-height: 68px;
	margin-left: auto;
	
	
}

.iconsD i {
	margin: auto;
	font-size: 35px;
	line-height: 67px;
	margin-left: auto;
	align-items: center;

	
	
}


.sectionT p{

color: rgba(255, 255, 255, 0.89);

}


.mt-3,.my-3{

color: rgba(255, 255, 255, 0.637);

}

/* FIN */

.container .boxB i{
    /* margin-bottom: 100px; */
    align-items: center;
    justify-content: center;
	margin-top: -5%
	
}



.boxB:before, .box:after {
	content: '';
	position: absolute;
	width: 0%;
	height: 0%;
	border: 2px solid #fff;
	opacity: 0;
	transition: .5s;
	box-sizing: border-box;
}
.boxB:before {
	top: 0;
	left: 0;
	border-top-left-radius: 10px;
}
.boxB:after {
	bottom: 0;
	right: 0;
	border-bottom-right-radius: 10px;
}
.boxB:hover:before, .box:hover:after {
	width: 100%;
	height: 100%;
	opacity: 1;
	transition-delay: .3s;
}
.boxB:hover {
	box-shadow: 0 10px 20px rgba(255, 255, 255, 0.2);
}
.boxB span {
	position: absolute;
	top: 0;
	left: -110%;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.3);
	transition: .5s;
	transform: skewX(10deg);
}
.boxB:hover span {
	left: 110%;
}
.boxB:hover {
	background-image: linear-gradient(45deg, #3a333b, #292929);
	box-shadow: 0 2px 15px 5px rgba(34, 25, 25, 0.5);

}


@media (max-width: 1000px) {
	.boxB {
		padding: 25px;

	}

	.boxB {
		position: relative;
		height: 40px;
		max-width: 400PX;

	}
		
	
}

@media (max-width: 600px) {
	.box {
		height: 400px;
		margin: 0;

	}
	.boxB {
		position: relative;
		height: 300px;
		max-width: 400PX;
	
	}
	.boxB h3 {
		font-size: 20px;
	}
	.boxB {
		
		margin: 10px;
		text-align: center;
		border-radius: 15px;
		transition: all 0.6s ease;
}

.boxB i{
	/* color: #4b17c5de; */
	background: linear-gradient(145deg,#68d36dea, #68d36d8e,#69792b8e);
	border-radius: 50%;
	/* max-width: 100%; */
	height: 66.5px;
	width: 66.5px;
	
	display: block;

	box-shadow: 1px 0px 8px #fafafa1a;

	


}


}


/* FIN */




/* BOX 02 */


.container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 20px;

}
.section-header {
	text-align: center;
	margin-top: 5%;
	color: #fff;
}

.section-header p {
	margin: 5%;
	font: 18px;
    line-height: 22px;
    margin-bottom: 20px;
}

.boxC {
	position: relative;
	height: 480px;
	background: linear-gradient(45deg, #242227, #272727);
	box-sizing: border-box;
	padding: 50px;
	transition: .5s;
	overflow: hidden;
	margin: 15px;
	text-align: center;
	border-radius: 10px;
	transition: all 0.6s ease;
}
.boxC p {
	color: #fff;
	font-size: 16px;
	margin-top: 7%;
	text-align: left;
}
.boxC h3 {
	font-size: 25px;
	text-transform: uppercase;
	color: #fff;
	margin-top: 1rem;
}
.icons {
	width: 80px;
	height: 80px;
	background: #fff;
	margin: auto;
	border-radius: 50px;
}
.icons i {
	font-size: 35px;
	line-height: 80px;
}
.box:before, .box:after {
	content: '';
	position: absolute;
	width: 0%;
	height: 0%;
	border: 5px solid #fff;
	opacity: 0;
	transition: .5s;
	box-sizing: border-box;
}
.box:before {
	top: 0;
	left: 0;
	border-top-left-radius: 10px;
}
.boxC:after {
	bottom: 0;
	right: 0;
	border-bottom-right-radius: 10px;
}
.boxC:hover:before, .box:hover:after {
	width: 100%;
	height: 100%;
	opacity: 1;
	transition-delay: .3s;
}
.box:hover {
	box-shadow: 0 10px 20px rgba(255, 255, 255, 0.2);
}
.boxC span {
	position: absolute;
	top: 0;
	left: -110%;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.3);
	transition: .5s;
	transform: skewX(10deg);
}
.boxC:hover span {
	left: 110%;
}
.boxC:hover {
	background-image: linear-gradient(45deg, #b343cb, #180293);
	box-shadow: 0 2px 15px 5px rgba(0, 0, 0, 0.5);
}
@media (max-width: 1000px) {
	.box {
		padding: 25px;
	}
}
@media (max-width: 600px) {
	.box {
		height: 380px;
		margin: 0;
	}
	.box h3 {
		font-size: 20px;
	}
}

.lineas-animadas {
	position: relative;
	width: 60%;
	height: 2px;
	background-color: transparent;
	overflow: hidden;
	margin-left: 61px;
	margin-top: 2px;
	box-shadow: 0 1px 1px hsla(214, 94%, 41%, 0.87);
	
	
  }
  
  .lineas-animadas::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: linear-gradient(to right, #FF69B4, #33cc33a2, #a5cc66);
	background-size: 400px 100%;
	animation: animar-lineas 8s infinite;
  }
  
  .lineas-animadas::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: linear-gradient(to right, transparent 50%,  50%);
	background-size: 10px 100%;
	animation: animar-trazos 3s infinite;
  }
  
  @keyframes animar-lineas {
	0% {
	  background-position: 0 0;
	}
	100% {
	  background-position: 400px 0;
	}
  }
  
  @keyframes animar-trazos {
	0% {
	  background-position: 0 0;
	}
	100% {
	  background-position: 20px 0;
	}
  }






  /* *********************2*********************** */

  .lineas-animadas-2 {
	position: relative;
	width: 85%;
	height: 2px;
	background-color: transparent;
	overflow: hidden;
	margin-left: 25px;
	margin-top: 2px;
	box-shadow: 0 1px 1px hsla(214, 94%, 41%, 0.87);
	
	
  }
  
  .lineas-animadas-2::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: linear-gradient(to right, #FF69B4, #33cc33a2, #a5cc66);
	background-size: 400px 100%;
	animation: animar-lineas 8s infinite;
  }
  
  .lineas-animadas-2::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: linear-gradient(to right, transparent 50%,  50%);
	background-size: 10px 100%;
	animation: animar-trazos 3s infinite;
  }
  
  @keyframes animar-lineas {
	0% {
	  background-position: 0 0;
	}
	100% {
	  background-position: 400px 0;
	}
  }
  
  @keyframes animar-trazos {
	0% {
	  background-position: 0 0;
	}
	100% {
	  background-position: 20px 0;
	}
  }

  
  /* *********************3*********************** */

  .lineas-animadas-3 {
	position: relative;
	width: 77%;
	height: 2px;
	background-color: transparent;
	overflow: hidden;
	margin-left: 35px;
	margin-top: 2px;
	box-shadow: 0 1px 1px hsla(214, 94%, 41%, 0.87);
	
	
  }
  
  .lineas-animadas-3::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: linear-gradient(to right, #FF69B4, #33cc33a2, #a5cc66);
	background-size: 400px 100%;
	animation: animar-lineas 8s infinite;
  }
  
  .lineas-animadas-3::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: linear-gradient(to right, transparent 50%,  50%);
	background-size: 10px 100%;
	animation: animar-trazos 3s infinite;
  }
  
  @keyframes animar-lineas {
	0% {
	  background-position: 0 0;
	}
	100% {
	  background-position: 400px 0;
	}
  }
  
  @keyframes animar-trazos {
	0% {
	  background-position: 0 0;
	}
	100% {
	  background-position: 20px 0;
	}
  }


    /* *********************4*********************** */

	.lineas-animadas-4 {
		position: relative;
		width: 50%;
		height: 2px;
		background-color: transparent;
		overflow: hidden;
		margin-left: 77px;
		margin-top: 5px;
		box-shadow: 0 1px 1px hsla(214, 94%, 41%, 0.87);
		
		
	  }
	  
	  .lineas-animadas-4::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-image: linear-gradient(to right, #FF69B4, #33cc33a2, #a5cc66);
		background-size: 400px 100%;
		animation: animar-lineas 8s infinite;
	  }
	  
	  .lineas-animadas-4::after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-image: linear-gradient(to right, transparent 50%,  50%);
		background-size: 10px 100%;
		animation: animar-trazos 3s infinite;
	  }
	  
	  @keyframes animar-lineas {
		0% {
		  background-position: 0 0;
		}
		100% {
		  background-position: 400px 0;
		}
	  }
	  
	  @keyframes animar-trazos {
		0% {
		  background-position: 0 0;
		}
		100% {
		  background-position: 20px 0;
		}
	  }


	  
    /* *********************5*********************** */

	.lineas-animadas-5 {
		position: relative;
		width: 50%;
		height: 2px;
		background-color: transparent;
		overflow: hidden;
		margin-left: 77px;
		margin-top: 5px;
		box-shadow: 0 1px 1px hsla(214, 94%, 41%, 0.87);
		
		
	  }
	  
	  .lineas-animadas-5::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-image: linear-gradient(to right, #FF69B4, #33cc33a2, #a5cc66);
		background-size: 400px 100%;
		animation: animar-lineas 8s infinite;
	  }
	  
	  .lineas-animadas-5::after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-image: linear-gradient(to right, transparent 50%,  50%);
		background-size: 10px 100%;
		animation: animar-trazos 3s infinite;
	  }
	  
	  @keyframes animar-lineas {
		0% {
		  background-position: 0 0;
		}
		100% {
		  background-position: 400px 0;
		}
	  }
	  
	  @keyframes animar-trazos {
		0% {
		  background-position: 0 0;
		}
		100% {
		  background-position: 20px 0;
		}
	  }


	  
    /* *********************6*********************** */

	.lineas-animadas-6 {
		position: relative;
		width: 25%;
		height: 2px;
		background-color: transparent;
		overflow: hidden;
		margin-left: 118px;
		margin-top: 5px;
		box-shadow: 0 1px 1px hsla(214, 94%, 41%, 0.87);
		
		
	  }
	  
	  .lineas-animadas-6::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-image: linear-gradient(to right, #FF69B4, #33cc33a2, #a5cc66);
		background-size: 400px 100%;
		animation: animar-lineas 8s infinite;
	  }
	  
	  .lineas-animadas-6::after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-image: linear-gradient(to right, transparent 50%,  50%);
		background-size: 10px 100%;
		animation: animar-trazos 3s infinite;
	  }
	  
	  @keyframes animar-lineas {
		0% {
		  background-position: 0 0;
		}
		100% {
		  background-position: 400px 0;
		}
	  }
	  
	  @keyframes animar-trazos {
		0% {
		  background-position: 0 0;
		}
		100% {
		  background-position: 20px 0;
		}
	  }