@import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&subset=devanagari,latin-ext');

/* #Navigation
================================================== */

.start-header {
	opacity: 1;
	transform: translateY(0);
	padding: 10px 0;
	box-shadow: 0 10px 30px 0 rgba(138, 155, 165, 0.15);
	-webkit-transition : all 0.3s ease-out;
	transition : all 0.3s ease-out;
}

.start-header.scroll-on {
	box-shadow: 0 5px 10px 0 rgba(138, 155, 165, 0.15);
	padding: 10px 0;
	-webkit-transition : all 0.3s ease-out;
	transition : all 0.3s ease-out;
}

.start-header.scroll-on .navbar-brand img{
	height: 42px;
	-webkit-transition : all 0.3s ease-out;
	transition : all 0.3s ease-out;
}

.navigation-wrap{
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 1000;
	-webkit-transition : all 0.3s ease-out;
	transition : all 0.3s ease-out;
}

.navbar {
    padding: 0;
}

.navbar-nav li a {
	font-family: 'Poppins', sans-serif;

	line-height: 24px;
	font-weight: 400;
	color: #212112;
	font-size: 18px;
}

.vertical-separator {
    height: 24px;
    width: 1px;
    background-color: #ccc;
    display: inline-block;
    margin-top: 8px;
}

.navbar-brand {
	margin-right: 10em;
}

.navbar-brand img {
    height: 50px;
    /* filter: brightness(10%); */ /* Pone negro el logo */
    transition: all 200ms linear;
}


/* Updates for dropdown */
.dropdown-menu {
    transition: all 200ms linear;
}

.dropdown-item {
    transition: all 200ms linear;
}


/* Animación del toggler */

.navbar-toggler {
	float: right;
	border: none;
	padding-right: 0;
}
.navbar-toggler:active,
.navbar-toggler:focus {
	outline: none;
}


.navbar-toggler:focus {  /* Quita borde gris molesto en el toggler */
  box-shadow: none !important;
}

.navbar-light .navbar-toggler-icon {
	width: 24px;
	height: 17px;
	background-image: none;
	position: relative;
	border-bottom: 1px solid #000;
    transition: all 300ms linear;
}
.navbar-light .navbar-toggler-icon:after,
.navbar-light .navbar-toggler-icon:before{
	width: 24px;
	position: absolute;
	height: 1px;
	background-color: #000;
	top: 0;
	left: 0;
	content: '';
	z-index: 2;
    transition: all 300ms linear;
}
.navbar-light .navbar-toggler-icon:after{
	top: 8px;
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:after {
	transform: rotate(45deg);
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:before {
	transform: translateY(8px) rotate(-45deg);
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
	border-color: transparent;
}

/* Elementos del navbar */

.nav-link{
	color: #212121 !important;
	font-weight: 500;
    transition: all 200ms linear;
}

.nav-item:hover .nav-link{
	color: var(--color-primario) !important;
}
.nav-item.active .nav-link{
	color: #777 !important;
}

.nav-item:after{
	position: absolute;
	bottom: -5px;
	left: 0;
	width: 100%;
	height: 2px;
	content: '';
	background-color: var(--color-primario);
	opacity: 0;
    transition: all 200ms linear;
}
.nav-item:hover:after{
	bottom: 0;
	opacity: 1;
}
.nav-item.active:hover:after{
	opacity: 0;
}
.nav-item{
	position: relative;
    transition: all 200ms linear;
}

/* #Primary style
================================================== */

/* Pone más blanco el navbar */
.bg-light {
    background-color: #fff !important;
    transition: all 200ms linear;
}

/* CSS para ocultar inicialmente el dropdown-menu */
.nav-item .dropdown-menu {
    display: none;  /* Inicialmente oculto */
    position: absolute;  /* Posicionamiento */
    z-index: 1000;  /* z-index para asegurarte de que aparece por encima de otros elementos */
    /* ...otros estilos que desees aplicar */
}

/* CSS para mostrar el dropdown-menu cuando el usuario coloca el ratón sobre .nav-item */
.nav-item:hover .dropdown-menu {
    display: block;  /* Se muestra al hacer hover */
    /* ...otros estilos que desees aplicar */
}

.nav-item.show .dropdown-menu {
    opacity: 1;
    visibility: visible;
	max-height: 999px;
    transform: translate3d(0, 0px, 0);
}

.dropdown-menu {
	padding: 10px!important;
	margin: 0;
	font-size: 13px;
	letter-spacing: 1px;
	color: #212121;
	background-color: #fcfaff;
	border: none;
	border-radius: 3px;
	box-shadow: 0 5px 10px 0 rgba(138, 155, 165, 0.15);
    transition: all 200ms linear;
}

.dropdown-item {
	padding: 3px 15px;
	color: #212121;
	border-radius: 2px;
    transition: all 200ms linear;
}

.dropdown-item:hover,
.dropdown-item:focus {
	color: #fff;
	background-color: var(--color-primario);
}

/* Quita las flechas cuando hay dropdown */
.dropdown-toggle::after {
	display: none;
}



/* #Media
================================================== */

@media (max-width: 767px) {
    h1 {
        font-size: 38px;
    }
    .nav-item:after{
		display: none;
	}

}