.dea-mobile-menu-toggle {
position: fixed;
top: 20px;
right: 20px;
width: 30px;
height: 25px;
cursor: pointer;
z-index: 9995;
display: none;
}
@media (max-width: 991px) {
.dea-mobile-menu-toggle {
display: block;
}
}
.dea-mobile-menu-toggle span {
display: block;
position: absolute;
height: 3px;
width: 100%;
background: #000000;
border-radius: 3px;
opacity: 1;
left: 0;
transform: rotate(0deg);
transition: .25s ease-in-out;
}
.dea-mobile-menu-toggle span:nth-child(1) {
top: 0px;
}
.dea-mobile-menu-toggle span:nth-child(2) {
top: 10px;
}
.dea-mobile-menu-toggle span:nth-child(3) {
top: 20px;
}
.dea-mobile-menu-active .dea-mobile-menu-toggle span:nth-child(1) {
top: 10px;
transform: rotate(135deg);
}
.dea-mobile-menu-active .dea-mobile-menu-toggle span:nth-child(2) {
opacity: 0;
left: -60px;
}
.dea-mobile-menu-active .dea-mobile-menu-toggle span:nth-child(3) {
top: 10px;
transform: rotate(-135deg);
} .dea-mobile-menu-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
z-index: 9996;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease-in-out;
}
.dea-mobile-menu-active .dea-mobile-menu-overlay {
opacity: 1;
visibility: visible;
} .dea-mobile-menu {
position: fixed;
top: 0;
height: 100%;
width: 300px;
background-color: #ffffff;
z-index: 9997;
overflow-y: auto;
transition: all 0.3s ease-in-out;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
padding: 0;
text-transform: uppercase;
}
.dea-mobile-menu.right {
right: -300px;
}
.dea-mobile-menu.left {
left: -300px;
}
.dea-mobile-menu-active .dea-mobile-menu.right {
right: 0;
}
.dea-mobile-menu-active .dea-mobile-menu.left {
left: 0;
} .dea-mobile-menu-header {
padding: 20px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
position: relative;
}
.dea-mobile-menu-close {
position: absolute;
top: 20px;
right: 20px;
width: 25px;
height: 25px;
cursor: pointer;
}
.dea-mobile-menu-close span {
display: block;
position: absolute;
height: 3px;
width: 100%;
background: #ff4500;
border-radius: 3px;
opacity: 1;
left: 0;
}
.dea-mobile-menu-close span:nth-child(1) {
transform: rotate(45deg);
}
.dea-mobile-menu-close span:nth-child(2) {
transform: rotate(-45deg);
} .dea-mobile-menu-content {
padding: 20px;
} .dea-mobile-menu-items {
list-style: none;
margin: 0;
padding: 0;
}
.dea-mobile-menu-items li {
position: relative;
margin-bottom: 10px;
}
.dea-mobile-menu-items li a {
display: block;
padding: 10px 0;
color: #333333;
font-size: 16px;
font-weight: 500;
text-decoration: none;
transition: all 0.3s ease;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.dea-mobile-menu-items li a:hover,
.dea-mobile-menu-items li.current-menu-item > a {
color: #ff4500;
} .dea-mobile-menu-items .sub-menu {
list-style: none;
margin: 0;
padding: 0 0 0 15px;
display: none;
}
.dea-mobile-menu-items .menu-item-has-children > a::after {
content: '+';
position: absolute;
right: 0;
top: 0px;
font-size: 25px;
transition: transform 0.3s ease;
}
.dea-mobile-menu-items .menu-item-has-children.active > a::after {
transform: rotate(45deg);
} .dea-mobile-menu-active .mobile-nav,
.dea-mobile-menu-active .mobile-nav-toggle {
display: none !important;
} body.dea-mobile-menu-active {
overflow: hidden;
} .dea-mobile-menu-items li {
opacity: 0;
transform: translateX(20px);
transition: all 0.3s ease;
transition-delay: calc(0.1s * var(--item-index, 0));
}
.dea-mobile-menu-active .dea-mobile-menu-items li {
opacity: 1;
transform: translateX(0);
} .dea-mobile-menu-logo {
text-align: center;
padding: 20px 0;
}
.dea-mobile-menu-logo img {
max-width: 150px;
height: auto;
} .dea-mobile-menu-social {
margin-top: 30px;
text-align: center;
}
.dea-mobile-menu-social a {
display: inline-block;
margin: 0 5px;
width: 36px;
height: 36px;
line-height: 36px;
text-align: center;
border-radius: 50%;
background-color: #f5f5f5;
color: #333;
transition: all 0.3s ease;
}
.dea-mobile-menu-social a:hover {
background-color: #ff4500;
color: #fff;
} .dea-mobile-menu-info {
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.dea-mobile-menu-info p {
margin-bottom: 10px;
font-size: 14px;
color: #666;
}
.dea-mobile-menu-info p i {
margin-right: 10px;
color: #ff4500;
}