.nav-item{position:relative}.nav-item>.nav-link{color:var(--primary);padding:.9em;font-weight:500;display:block}.nav-item:hover>.nav-link{color:var(--secondary)}.nav-item>.nav-dropdown-menu{display:none;position:absolute;bottom:-5px;right:-10px;padding:1em 0;width:15rem;box-shadow:1px 1px 2px 0 rgba(0,0,0,.2)}.traingle{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:8px solid green}.bar{height:2px;border-radius:5px}.bar,.mobile-menu{width:100%;background-color:var(--primary)}.mobile-menu{position:absolute;top:0;transform:translateY(-100%);left:0;height:100vh;transition:.5s linear;z-index:100}.mobile-menu .menu-close{opacity:0;transition:2.2s ease-in-out}.mobile-menu.open{transform:translateY(0)}.mobile-menu.open .menu-close{opacity:1}.mobile-menu .nav-item>.nav-link{color:#d2d3d5;font-weight:500;font-size:22px;padding:0}.mobile-menu .mobile-links{position:relative}.mobile-menu .mobile-links:after{content:"";width:0;height:1px;background-color:#d2d3d5;transition:1s linear;transition-delay:.1s;position:absolute;bottom:0;right:0}.mobile-menu .social-links{opacity:0;transform:translateY(40%);transition:.5s linear;transition-delay:.8s}.mobile-menu:not(.open) .mobile-links li{opacity:0;margin-right:-300px}.mobile-menu.open .mobile-links:after{width:100%}.mobile-menu.open .social-links{opacity:1;transform:translateY(0)}.mobile-menu.open .mobile-links li{opacity:0;animation:fadeInSlide .5s forwards;margin-right:0}@keyframes fadeInSlide{0%{opacity:0;margin-right:-300px}to{opacity:1;margin-right:0}}.mobile-menu.open .mobile-links li:first-child{animation-delay:.3s}.mobile-menu.open .mobile-links li:nth-child(2){animation-delay:.4s}.mobile-menu.open .mobile-links li:nth-child(3){animation-delay:.5s}.mobile-menu.open .mobile-links li:nth-child(4){animation-delay:.6s}.x-icon{position:relative;width:18px;height:18px}.mobile-menu.open .x-icon{transform:scale(0) rotate(0deg);animation:growRotate .5s forwards;animation-delay:.6s}.x-icon:after,.x-icon:before{content:"";position:absolute;top:50%;left:50%;width:100%;height:2px;background-color:#fff;transform-origin:center;transition:transform .5s ease}.x-icon:before{transform:translate(-50%,-50%) rotate(45deg)}.x-icon:after{transform:translate(-50%,-50%) rotate(-45deg)}@keyframes growRotate{0%{transform:scale(0) rotate(0deg)}to{transform:scale(1) rotate(180deg)}}