/* * ---- Desktop Navigation ----- */ .navbar { padding: 0; } .navbar ul { margin: 0; padding: 0; display: flex; list-style: none; align-items: center; } .navbar li { position: relative; } .navbar a, .navbar a:focus { display: flex; align-items: center; justify-content: space-between; padding: 10px 15px 10px 15px; font-size: 12px; font-weight: 500; text-transform: uppercase; color: var(--text-primary); white-space: nowrap; transition: 0.3s; } .navbar a i, .navbar a:focus i { /*font-size: 12px;*/ /*line-height: 0;*/ margin-left: 5px; } .navbar a:hover, .navbar .active, .navbar .active:focus, .navbar li:hover > a { color: var(--link); } .navbar .dropdown ul { display: block; position: absolute; left: 14px; top: calc(100% + 30px); margin: 0; padding: 10px 0; z-index: 99; opacity: 0; visibility: hidden; background: #fff; box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25); transition: 0.3s; } .navbar .dropdown ul li { min-width: 200px; } .navbar .dropdown ul a { padding: 10px 20px; font-size: 14px; text-transform: none; color: var(--text-primary); /*text-transform: uppercase;*/ } .navbar .dropdown ul a i { /*font-size: 12px;*/ } .navbar .dropdown ul a:hover, .navbar .dropdown ul .active:hover, .navbar .dropdown ul li:hover > a { color: var(--link); } .navbar .dropdown:hover > ul { opacity: 1; top: 100%; visibility: visible; } .navbar .dropdown .dropdown ul { top: 0; left: calc(100% - 30px); visibility: hidden; } .navbar .dropdown .dropdown:hover > ul { opacity: 1; top: 0; left: 100%; visibility: visible; } @media (max-width: 1366px) { .navbar .dropdown .dropdown ul { left: -90%; } .navbar .dropdown .dropdown:hover > ul { left: -100%; } } @media (max-width: 991px) { .navbar-collapse > ul { display: block; } } /* ----------------------------- */ /* ----- Mobile Navigation ----- */ /* ----------------------------- */ .mobile-nav-toggle { color: #fff; color: #000; font-size: 18px; cursor: pointer; display: none; line-height: 0; transition: 0.5s; } @media (max-width: 991px) { .mobile-nav-toggle { display: block; } .navbar ul { display: none; } } .navbar-mobile { position: fixed; overflow: hidden; top: 0; right: 0; left: 0; bottom: 0; /*background: rgba(17, 38, 48, 0.9);*/ background: rgba(81, 43, 27, 0.7); transition: 0.3s; z-index:1000; } .navbar-mobile .mobile-nav-toggle { position: absolute; top: 35px; /*68 75*/ right: 35px; color: var(--primary); font-size: 18px; /*24*/ font-weight: 600; } .navbar-mobile ul { display: block; position: absolute; top: 15px; /*55*/ right: 15px; bottom: 15px; left: 15px; padding: 30px 0; background-color: #fff; overflow-y: auto; transition: 0.3s; } .navbar-mobile a, .navbar-mobile a:focus { padding: 10px 20px; font-size: 15px; /*color: #1e4356;*/ color: var(--text-primary); } .navbar-mobile a:hover, .navbar-mobile .active, .navbar-mobile li:hover > a { /*color: #68A4C4;*/ color: var(--link); } .navbar-mobile .getstarted, .navbar-mobile .getstarted:focus { margin: 15px; } .navbar-mobile .dropdown ul { position: static; display: none; margin: 10px 20px; padding: 10px 0; z-index: 99; opacity: 1; visibility: visible; background: #fff; box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25); } .navbar-mobile .dropdown ul li { min-width: 200px; } .navbar-mobile .dropdown ul a { padding: 10px 20px; } .navbar-mobile .dropdown ul a i { /*font-size: 12px;*/ font-size: 18px; } .navbar-mobile .dropdown ul a:hover, .navbar-mobile .dropdown ul .active:hover, .navbar-mobile .dropdown ul li:hover > a { /*color: #68A4C4;*/ color: var(--link); } .navbar-mobile .dropdown > .dropdown-active { display: block; }