@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@700&display=swap');

:root {
	--azul-principal: #222338;
	--azul-secundario: #363859;
	--azul-terciario: #0F101A;
	--verde-electrico: #5FAAA7;
	--verde-secundario: #24665D;
	--blanco: #FFFFFF;
	--nav-color: #1A1736;
}

html {
	margin: 0;
	padding: 0;
}

body {
	font-family: 'Cairo',
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		"Roboto",
		"Helvetica Neue",
		Arial,
		sans-serif,
		"Apple Color Emoji",
		"Segoe UI Emoji",
		"Segoe UI Symbol";
	overflow-x: hidden;
}

/* Base */
.navbar-custom {
	background-color: var(--nav-color);
}


.main-custom {
	background: var(--nav-color);
	background: linear-gradient(180deg, var(--nav-color) 31%, var(--azul-principal) 66%, var(--verde-electrico) 97%);
}


.footer-info-custom {
	background-color: var(--verde-electrico);
}

.copyright-custom {
	background-color: var(--azul-principal);
}

.container-azul-principal {
	background-color: var(--azul-principal);
}

.container-azul-terciario {
	background-color: var(--azul-terciario);
}

.title-azul-principal {
	color: var(--azul-principal);
}

.title-azul-secundario {
	color: var(--azul-secundario);
}

.title-azul-terciario {
	color: var(--azul-terciario);
}

.title-verde-electrico {
	color: var(--verde-electrico);
}

.title-verde-secundario {
	color: var(--verde-secundario);
}


.container-verde-electrico {
	background-color: var(--verde-electrico);
}

a.social-icon {
	color: rgba(255, 255, 255, .55);
}

a.social-icon:hover {
	color: white;
}

.navbar-toggler {
	float: right;
}

/* Home */
.text-justify {
	text-align: justify;
}

.main-image {
	width: 100%;
	position: left;
}

.contact-widget {
	position: fixed;
	top: 20%;
	-webkit-transform: translateY(-80%);
	-ms-transform: translateY(-80%);
	transform: translateY(-80%);
	background-color: var(--verde-electrico);
	clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
	width: 68px;
	margin-left: -8px;
	cursor: pointer;
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: transform;
	transition-property: transform;

}

.contact-widget .fab {
	font-size: 2.5rem;
	margin-left: 5px;
	color: var(--azul-principal);
}

.contact-widget .fab:hover {
	color: white;
}

.contact-widget:hover,
.contact-widget:focus {
	-webkit-transform: translateX(8px);
	transform: translateX(8px);
}

/* Proyectos */
.project-container {
	display: flex;
	padding: 0;
	margin-bottom: 50px;
	-webkit-box-shadow: 13px 15px 17px -13px rgba(79, 79, 79, 1);
	-moz-box-shadow: 13px 15px 17px -13px rgba(79, 79, 79, 1);
	box-shadow: 13px 15px 17px -13px rgba(79, 79, 79, 1);
}

.project-container .project-img {
	width: 120px;
	height: 120px;
	margin-top: auto;
}

.project-container .project-img img {
	width: 100%;
}

.project-container .project-text {
	margin-left: 2.5rem;
}

.carousel-control-prev-icon-client,
.carousel-control-next-icon-client {
	height: 100px;
	width: 100px;
}

.carousel-controls {
	position: relative;
	bottom: 0;
	left: 0;
	top: 10px;
	display: block;
	width: 177px;
	margin: 0 auto;
	z-index: 1;
	height: 24px;
	text-align: center;
	margin-bottom: 50px;
	margin-top: 30px;
}

.carousel-control-next-icon-client:after {
	content: '>';
	font-size: 55px;
	color: var(--azul-principal);
}

.carousel-control-prev-icon-client:after {
	content: '<';
	font-size: 55px;
	color: var(--azul-principal);
}

/*
.carousel-control-prev-icon,
.carousel-control-next-icon {
    height: 100px;
    width: 100px;

}

.carousel-control-next-icon:after {
    content: '>';
    font-size: 55px;
    color: var(--azul-principal);
}

.carousel-control-prev-icon:after {
    content: '<';
    font-size: 55px;
    color: var(--azul-principal);
}
*/

.btn-projects {
	background-color: #ffffff00;
	color: var(--verde-electrico);
	border: none;
	outline: none;
	padding: 0;
	font-size: 1.3rem;
}

.btn-projects:hover {
	color: #4e8d8b;
}

.btn-projects:focus {
	outline: none;
}

/* Marcas */
.brand-container img {
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
}

.brand-container:hover img {
	-webkit-filter: grayscale(0%);
	filter: none;
}

/* Productos */
.title-container {
	background-image: url('../media/vertical-fondo1.jpeg');
	padding: 30px;
	width: 500px;
	height: 500px;
	border-radius: 50%;
	/*background-color: var(--azul-principal);*/
	margin: 0 auto;
	text-align: center;
	position: relative;
	top: 15%;
	border: 40px solid var(--verde-electrico);
	display: flex;
	justify-content: center;
	align-items: center;
}

.title-container h1 {
	font-size: 5rem;
}

.title-container .fas {
	font-size: 3.5rem;
}

.title-container h1,
.title-container .fas {
	top: 50%;
}

.icon-title-container {
	width: 550px;
}

.icon-title-container img {
	border-radius: 50%;
}

.container-products {
	background-color: var(--verde-electrico);
	color: var(--azul-principal);
	width: 85%;
	display: inline-flex;
	border-radius: 100em 0 0 100em;
	-webkit-clip-path: polygon(100% 0, 86% 100%, 0 100%, 0 0);
	clip-path: polygon(100% 0, 86% 100%, 0 100%, 0 0);
	margin-bottom: 1.5rem;
}

.container-products h2:hover {
	text-decoration: underline;
}

.container-products .icon-container {
	width: 80px;
	background-color: var(--azul-principal);
	padding: 1.5rem;
	border-radius: 50%;
	margin-right: 1rem;
}

.hold-container:nth-child(2) {
	margin-left: 50px;
}

.hold-container:nth-child(3) {
	margin-left: 70px;
}

.hold-container:nth-child(4) {
	margin-left: 70px;
}

.hold-container:nth-child(5) {
	margin-left: 50px;
}


.container-products .icon-container .fas {
	color: var(--verde-electrico);
	font-size: 2rem;
}


.flow-down {
	width: 67.8%;
	margin-left: 2rem;
	/* Posible color: #5faaa89d; */
	background-color: var(--verde-electrico);
	color: white;
	padding-left: 10px;
	padding-bottom: 10px;
	margin-bottom: 20px;
	margin-top: -24px;
	padding-right: 20px;
	padding-left: 20px;
	display: none;
	-webkit-animation: opacity-full .5s ease-out;
	-moz-animation: opacity-full .5s ease-out;

}

.flow-down:hover {
	display: block;
}

.service-img {
	width: 300px;
	margin: 0 auto;
	margin-bottom: 1rem;
}

.service-img img {
	width: 100%;
}


.container-products:hover+.flow-down {
	display: block;
}

/* Success */
.success-container {
	height: 500px;
}

.btn-tic {
	text-decoration: none;
	color: var(--azul-principal);
	background-color: var(--verde-electrico);
}

.btn-tic:hover {
	background-color: #4e8d8b;
}

.video-container {
	margin-top: 50px;
	margin-left: 20px;
}



/* Nosotros */
/*.about-us-container {
    height: 500px;
    max-height: 500px;
}*/

/* Contacto*/
.contact-form {
	padding-left: 5%;
	padding-right: 5%;
}

.contact-link {
	text-decoration: none;
	color: var(--azul-principal);
}

.contact-link:hover {
	color: var(--verde-electrico)
}


.location-container {
	background-color: var(--verde-electrico);
	max-width: 89.4%;
	margin: 0 auto;
	margin-top: auto;
	margin-bottom: auto;
}

.small-container-custom {
	transition: all .1s ease-out;
}

.small-container-custom:hover {
	z-index: 1;
	transform: scale(1.05);
	-webkit-box-shadow: 8px 16px 24px 0 rgba(28, 40, 44, .25);
	-moz-box-shadow: 8px 16px 24px 0 rgba(28, 40, 44, .25);
	box-shadow: 8px 16px 24px 0 rgba(28, 40, 44, .25);
}

.allies-custom {
	background: url('../media/team.jpg');
	height: 500px;
	max-height: 500px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	/*box-shadow: inset 0 0 0 1000px #5faaa89d;*/
	box-shadow: inset 0 0 0 1000px #24665d9f;
}

.projects-custom {
	background: url('../media/pexels-fauxels-3183153.jpg');
	/*background: url('https://i.ibb.co/h7GGpgb/pexels-fauxels-3183153.jpg');*/
	height: 500px;
	max-height: 500px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	/*box-shadow: inset 0 0 0 1000px #5faaa89d;
    box-shadow: inset 0 0 0 1000px #24665d9f;*/
	box-shadow: inset 0 0 0 1000px #1a1736a9;
}

.color-tint {
	width: 100%;
	height: 100%;
	background: var(--verde-electrico);
	opacity: .6;
	position: absolute;
	top: 0;
	left: 0;
}

.allie-main {
	z-index: 1;
}

.enterprise {
	text-decoration: none;
	color: var(--azul-principal);
}

.enterprise:hover {
	color: var(--verde-electrico);
}

@keyframes slideInFromBottom {
	0% {
		transform: translateY(100%);
	}

	100% {
		transform: translateY(0);
	}
}

.image-slide {
	animation: 0.5s ease-out 0s 1 slideInFromBottom;
}

@keyframes appearWord {

	0% {
		content: "Software y Desarrollo";
	}

	16% {
		content: "Sistemas de Gestión";
	}

	32% {
		content: "Comunicaciones";
	}

	48% {
		content: "Hardware e Infraestructura";
	}

	64% {
		content: "Seguridad";
	}

	80% {
		content: "Servicios TI";
	}
}

@-webkit-keyframes opacity-full {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;

	}
}

@-moz-keyframes opacity-full {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@keyframes opacity-full {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@ms-keyframes opacity-full {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

.word::before {
	content: "Software y Desarrollo";
	animation: appearWord infinite 10s;
}