@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap');
* {
	font-family: 'Montserrat', sans-serif;
}

/* Estilos para las opciones del menú */
.navbar-nav .nav-item {
    margin-right: 3px; /* Ajusta el espacio entre las opciones del menú */
}

.navbar-nav .nav-link {
    font-family: 'Open Sans', sans-serif; /* Tipo de fuente */
    font-weight: bold; /* Negrita */
    font-size: 16px; /* Tamaño de fuente */
    color: #333; /* Color del texto */
    transition: border-bottom 0.3s; /* Efecto de transición para la línea inferior */
}

.navbar-nav .nav-link:hover {
    border-bottom: 2px solid #ffffff; /* Línea inferior al pasar el ratón */
    color: #ffffff; /* Cambia el color del texto al pasar el ratón */
}


.navbar-light .navbar-nav .nav-link::after {
    content: '';
    display: block;
    height: 3px;
    width: 0;
    background-color: #106eea;
    transition: width 0.3s;
}

    .navbar-nav .nav-item:hover {
        border-bottom: 2px solid #ffffff; /* Cambia el color de la línea a tu preferencia */
		
    }

    .navbar-nav .nav-item.active {
        border-bottom: 2px solid #ffffff; /* Cambia el color de la línea a tu preferencia */
    }
	
	
  .map-container {
	margin-top: 0%;
    border-radius: 15px; /* Puedes ajustar este valor según tu preferencia */
    overflow: hidden;
  }


	footer.bg-dark {
		background-color: #062D6E !important;
	}

	.mt-3 {
		position: relative;
		display: inline-block;
	}
	
	.mt-3:after {
		content: '';
		position: absolute;
		left: 0;
		bottom: -5px; /* Puedes ajustar este valor para controlar la distancia de la línea */
		width: 100%;
		height: 2px; /* Puedes ajustar este valor para controlar la altura de la línea */
		background-color: #2279BE;
	}
	
	/* Add your custom styles here */
	.software-carousel {
		margin-top: 50px;
	}

	.software-category {
		margin-bottom: 20px;
	}

	.software-icon {
		font-size: 48px;
		color: #062D6E; /* Cambia el color según tus preferencias */
	}

	.whatsapp-button {
		display: inline-block;
		background-color: #2279BE; /* Color de fondo de WhatsApp */
		color: #ffffff; /* Color del texto por defecto */
		padding: 10px 15px;
		border-radius: 5px;
		text-decoration: none;
		font-weight: bold;
		transition: background-color 0.3s, color 0.3s; /* Transición suave */
	}

	.whatsapp-button:hover {
		background-color: #0D4067; /* Color de fondo al pasar el mouse */
		color: #ffffff; /* Nuevo color de texto al pasar el mouse */
	}

	.whatsapp-button img {
		width: 20px; /* Ajusta el tamaño del icono según sea necesario */
		margin-right: 10px; /* Espaciado entre el icono y el texto */
		transition: transform 0.3s; /* Transición suave para el cambio de icono */
	}

	.custom-carousel-inner {
		display: flex;
		overflow: hidden; /* Aunque prefieres no usar overflow, esto puede ayudar a ocultar contenido que se extiende más allá del contenedor si es necesario */
		width: 100%;
		height: 200px; /* Ajusta la altura según tus necesidades */
		
		transition: transform 0.5s ease-in-out;
	}
	.custom-carousel-inner2 {
		display: flex;
		overflow: hidden; /* Aunque prefieres no usar overflow, esto puede ayudar a ocultar contenido que se extiende más allá del contenedor si es necesario */
		width: 100%;
		height: 200px; /* Ajusta la altura según tus necesidades */
		
		transition: transform 0.5s ease-in-out;
	}
		
	.custom-carousel-item {
		box-sizing: border-box;
		min-width: 100%;
		height:500px;
		
	}
	
	.animate {
		animation: carouselAnimation 3s infinite; /* Puedes ajustar la duración según tus preferencias */
	}
	
	@keyframes carouselAnimation {
		0%, 20%, 40%, 60%, 80%, 100% {
			transform: translateX(0);
		}
		25% {
			transform: translateX(-100%);
		}
		50% {
			transform: translateX(-200%);
		}
		75% {
			transform: translateX(-300%);
		}
	}
	

	.card {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: auto; /* Ajusta la altura según tus necesidades */
	}
	
	.card-body {
		/* Puedes ajustar el relleno según sea necesario */
		padding: 15px;
		text-align: center; /* Esto centrará el texto horizontalmente */
		
	}
    
    .icon-img {
		height: 1em;
		margin-bottom: 7px;
		margin-right: 12px;
	}
	

	#infinite-scroll {
		position: absolute;
		animation: infiniteScroll 50s linear infinite;
	}

	@keyframes infiniteScroll {
		0% {
			transform: translateX(0);
		}
		100% {
			transform: translateX(-100%);
		}
	}

	.image-container {
		margin-top: 5px;
		display:flexbox;
		width:auto;
		height:auto;
		margin-right: 3px; /* Espacio entre imágenes */
		margin-bottom: 10px;
	}

	.image {
		margin-top: 25px;
		width: 260px;
		height: 65px;
		object-fit: cover;
		margin-right: 15px;

	}

  .social-buttons {
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 1000;
}

.social-buttons a {
	display: block;
	background-color: white;
	color: #062D6E; /* Color azul */
	text-align: center;
	padding: 15px;
	width: 60px;
	font-size: 20px;
	margin-top: 0px;
	margin-bottom: 0px;
	border-radius: 50%;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
	transition: background-color 0.3s;
}

.social-buttons a:hover {
	background-color: #062D6E; /* Color azul al pasar el ratón */
	color: #fff; /* Texto blanco al pasar el ratón */
}


	
	  
/* Estilo para el texto "Centro" */
.navbar-brand .text-primario {
	margin-top: 10px;
	margin-bottom: 0pX;
	letter-spacing: 4px;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
	color: #fff;
	width: 320px;
    font-size: 1.7em; /* Puedes ajustar el tamaño según tus preferencias */
}

/* Estilo para el texto "CAD" */
.navbar-brand .text-secondario {
	margin-top: 10px;
	margin-bottom: 0px;
	letter-spacing: 4px;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
	color: #fff;
	width: 320px;
    font-size: 1.7em; /* Puedes ajustar el tamaño según tus preferencias */
}

.carousel-item {
    
    height: auto; /* La altura se ajustará automáticamente para mantener la proporción */
}


.navbar-light .navbar-nav .nav-link:hover::after {
    width: 100%;
}
body {
	background: #f1fbff;
}
.section-padding {
	padding: 100px 0;
}
.carousel-item {
	height: 95dvh;
	min-height: 300px;
}
.carousel-caption {
	bottom: 220px;
	z-index: 2;
}
.carousel-caption h5 {
	font-size: 50px;
	font-weight: bold;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin-top:30% ;
	
}
.carousel-caption p {
	width: 90%;
	text-align: center;
	margin: auto;
	font-size: 18px;
	line-height: 1.8;
}
.carousel-inner:before {
	content: '';
	position: absolute;
	width: 100%;
	height: 47%;
	top:145px;
	left: 0px;
	background: rgba(1, 29, 114, 0.74);
	z-index: 1;
}

.navbar .getstarted {
	background: #106eea;
	margin-left: 30px;
	border-radius: 4px;
	font-weight: 400;
	color: #fff;
	text-decoration: none;
	padding: .5rem 1rem;
	line-height: 2.3;
}
.navbar-nav a {
	font-size: 15px;
	text-transform: uppercase;
	font-weight: 500;
}
.navbar-light .navbar-brand {
	color: #000;
	font-size: 25px;
	text-transform: uppercase;
	font-weight: bold;
	letter-spacing: 2px;
}
.navbar-light .navbar-brand:focus, .navbar-light .navbar-brand:hover {
	color: #000;
}
.navbar-light .navbar-nav .nav-link {
	color: #000;
}
.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
	color: #000;
}
.w-100 {
	height: auto;
}
.navbar-toggler {
	padding: 1px 5px;
	font-size: 18px;
	line-height: 0.3;
	background: #ffffff18;
}
.portfolio .card {
	box-shadow: 15px 15px 40px rgba(0, 0, 0, 0.15);
}
.team .card {
	box-shadow: 15px 15px 40px rgba(0, 0, 0, 0.15);
}
.services .card-body i {
	font-size: 50px;
}
.services .card-body {
	background: #0B3A6C;
}
.team .card-body i {
	font-size: 20px;
}


@media only screen and (min-width: 768px) and (max-width: 991px) {
	
	.carousel-item img {
        height: auto; /* Permite que la altura se ajuste automáticamente en dispositivos más pequeños */
    }
	.carousel-caption {
		bottom: 370px;
	}
	.carousel-caption p {
		width: 100%;
	}
	.card {
		margin-bottom: 30px;
	}
	.img-area img {
		width: auto;
		height: auto; 
	}
	

}

.logo-img {
    width: 75px; /* Ajusta el tamaño según sea necesario */
    height: auto; /* Mantiene la proporción de la imagen */
    margin-left: 0px; /* Ajusta el margen según sea necesario */
	margin-right: 8px;
	margin-bottom: 0px;
	margin-top: 0px;
}

 .bg-color {
    background-image: -webkit-linear-gradient(270deg,rgba(1,35,125,1.00) 0%,rgb(22, 84, 120) 100%);
    background-image: -moz-linear-gradient(270deg,rgba(1,35,125,1.00) 0%,rgb(20, 77, 110) 100%);
    background-image: -o-linear-gradient(270deg,rgba(1,35,125,1.00) 0%,rgb(27, 87, 122) 100%);
    background-image: linear-gradient(180deg,rgba(1,35,125,1.00) 0%,rgb(15, 69, 100) 100%);

} 

/* Puedes ajustar otros estilos según sea necesario */

@media only screen and (max-width: 767px) {

	#infinite-scroll {
        position: absolute;
        overflow: hidden;
        white-space: nowrap;
       
    }
	

	

	.image-container {
		margin-top: 0px;
		display: flex;
		flex-wrap: wrap;
		margin-right: 20px; /* Espacio entre imágenes */

	}
	
	.image {
		margin-top: 0px;
		height: calc((100% / 4) - 10px); /* Divide en 3 filas, ajusta según sea necesario */
		max-height: calc((100% / 2) - 10px); /* Mantiene el tamaño máximo según el cálculo */
		width: 20%; /* Permite que la altura se ajuste proporcionalmente al ancho */
		object-fit: cover;
		margin-right: 19px;
	}
	
	
	
	.navbar-nav {
		text-align: center;
	}

	.carousel-item {
        height: auto; /* Permitir que la altura se ajuste automáticamente en dispositivos móviles */
		margin-top: 50px; /* Ajustar el margen superior según sea necesario */
	
    }

    .carousel-caption {
        bottom: 100px;
	
    }

    .carousel-caption h5 {
        font-size: 17px;
    }

    .carousel-caption p {
        width: 100%;
        line-height: 1.6;
        font-size: 9px;
    }
    
    .about-text {
        padding-top: 50px;
    }

	.navbar-brand .text-primario {
		margin-top: 10px;
		margin-bottom: 0pX;
		letter-spacing: 2px;
		font-family: 'Montserrat', sans-serif;
		font-weight: bold;
		color: #fff;
		width: 320px;
		font-size: 1.1em; /* Puedes ajustar el tamaño según tus preferencias */
	}
	
	/* Estilo para el texto "CAD" */
	.navbar-brand .text-secondario {
		margin-top: 10px;
		margin-bottom: 0px;
		letter-spacing: 2px;
		font-family: 'Montserrat', sans-serif;
		font-weight: bold;
		color: #fff;
		width: 320px;
		font-size: 1.1em; /* Puedes ajustar el tamaño según tus preferencias */
	}

	.carousel-inner:before {
		margin-top: 50px; /* Ajustar el margen superior según sea necesario */
		content: '';
		width: 100%;
		height: 60%;
		top: 15px;
		left: 0;
		background: rgba(1, 29, 114, 0.74);
		z-index: 1;
		position: absolute;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
	.carousel-caption h5{
	    font-size: 20px;
	    font-weight: bold;
    	text-align: center;
    	text-transform: uppercase;
	    
	}
	.carousel-caption p {
		color: white; /* Agrega color al texto para que sea legible en el fondo */
		margin: 0; /* Elimina el margen predeterminado para el título y el párrafo */
	    font-size: 10px;
	}
	

	.carousel-indicators {
	
		margin-bottom: 100px;
	}

	#about {
        padding-top: 0; /* Puedes ajustar esto según sea necesario */
    }


	.custom-carousel-inner {
		display: flex;
		overflow: hidden; /* Aunque prefieres no usar overflow, esto puede ayudar a ocultar contenido que se extiende más allá del contenedor si es necesario */
		width: 100%;
		height: 250px; /* Ajusta la altura según tus necesidades */
		
		transition: transform 0.5s ease-in-out;
	}
	.custom-carousel-inner2 {
		display: flex;
		overflow: hidden; /* Aunque prefieres no usar overflow, esto puede ayudar a ocultar contenido que se extiende más allá del contenedor si es necesario */
		width: 100%;
		height: 310px; /* Ajusta la altura según tus necesidades */
		
		transition: transform 0.5s ease-in-out;
	}

}