/************************ mobile menu start ****************/
.mobile-menu {
width: 300px;
height: 100%;
position: fixed;
top: 0;
left: -310px;
background-color: var(--white-color);
z-index: 100;
padding: 60px 24px;
overflow-y: scroll;
-webkit-transition: var(--transition);
-o-transition: var(--transition);
transition: var(--transition); }
.mobile-menu .close {
position: absolute;
right: 20px;
top: 20px;
color: var(--primary-color-900); }
.mobile-menu .close:hover {
color: var(--secondary-color-900); }
.mobile-menu .logo {
width: 100%;
display: block;
background-color: var(--primary-color-900);
text-align: center;
padding: 10px;
border-radius: 5px; }
.mobile-menu .mobile-nav-menu {
margin-top: 32px; }
.mobile-menu .mobile-nav-menu li {
display: block; }
.mobile-menu .mobile-nav-menu li + li {
border-top: 1px solid var(--primary-color-200); }
.mobile-menu .mobile-nav-menu li a {
text-transform: capitalize;
display: block;
color: var(--primary-color);
padding: 10px 0; }
.mobile-menu .mobile-nav-menu li.has-submenu {
position: relative; }
.mobile-menu .mobile-nav-menu li.has-submenu > i {
position: absolute;
right: 0;
top: 3px;
padding: 8px;
-webkit-transition: var(--transition);
-o-transition: var(--transition);
transition: var(--transition); }
.mobile-menu .mobile-nav-menu li.has-submenu > i.icon-rotate {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg); }
.mobile-menu .mobile-nav-menu li.has-submenu > .submenu-wrapper {
padding-left: 15px;
display: none; }
.mobile-menu.active {
left: 0; }