22

✏️ Editing: ep-sub-menu.css

.ep-sub-menu{--transition:cubic-bezier(.215, .61, .355, 1)}.ep-sub-menu .ep-sub-menu-wrap .ep-heading{font-size:14px;font-weight:600;margin-bottom:30px;color:#4f5a6e;text-transform:uppercase}.ep-sub-menu .ep-sub-menu-wrap .ep-sub-menu-grid{display:grid;grid-template-columns:repeat(2, 1fr);grid-gap:25px}.ep-sub-menu .ep-sub-menu-wrap .ep-item{position:relative;text-decoration:none}.ep-sub-menu .ep-sub-menu-wrap .ep-item:hover .ep-sub-title{color:#2a2d37}.ep-sub-menu .ep-sub-menu-wrap .ep-item:hover .ep-hover-icon{opacity:1;transform:translateX(0)}.ep-sub-menu .ep-sub-menu-wrap .ep-content{display:inline-flex;flex-direction:column}.ep-sub-menu .ep-sub-menu-wrap .ep-icon svg{width:18px;height:18px;line-height:18px;max-width:none}.ep-sub-menu .ep-sub-menu-wrap .ep-sub-title{font-size:12px;margin:5px 0 0;color:#6d7283;transition:color .3s var(--transition)}.ep-sub-menu .ep-sub-menu-wrap .ep-title{display:inline-flex;align-items:center;grid-column-gap:10px;font-size:14px;color:#575a66;font-weight:500;position:relative}.ep-sub-menu .ep-sub-menu-wrap .ep-badge{background:#3f37c9;color:#fff;font-size:7px;line-height:1;padding:3px 5px;border-radius:2px;text-transform:capitalize}.ep-sub-menu .ep-sub-menu-wrap .ep-hover-icon{font-size:22px;color:#777;opacity:0;transform:translateX(-10px);transition:transform .4s var(--transition),opacity .4s var(--transition);align-self:center}.ep-sub-menu .ep-sub-menu-wrap .ep-advance-menu .ep-item{display:inline-flex;grid-gap:12px;line-height:1;align-items:flex-start}.ep-sub-menu .ep-sub-menu-wrap .ep-advance-menu .ep-icon-inner{color:rgba(12,19,255,0.451);background:rgba(12,19,255,0.059);padding:10px;border-radius:3px;transition:background .3s var(--transition);line-height:1;display:inline-block}.ep-sub-menu .ep-sub-menu-wrap .ep-menu-style-1 .ep-item,.ep-sub-menu .ep-sub-menu-wrap .ep-menu-style-4 .ep-item{flex-direction:row}.ep-sub-menu .ep-sub-menu-wrap .ep-menu-style-1 .ep-hover-icon,.ep-sub-menu .ep-sub-menu-wrap .ep-menu-style-4 .ep-hover-icon{right:0}.ep-sub-menu .ep-sub-menu-wrap .ep-menu-style-2 .ep-item{flex-direction:row-reverse;text-align:right}.ep-sub-menu .ep-sub-menu-wrap .ep-menu-style-2 .ep-item:hover .ep-hover-icon{transform:translateX(0) translateY(-50%) rotate(180deg)}.ep-sub-menu .ep-sub-menu-wrap .ep-menu-style-2 .ep-title{flex-direction:row-reverse}.ep-sub-menu .ep-sub-menu-wrap .ep-menu-style-2 .ep-hover-icon{left:0;transform:translateX(10px) translateY(-50%) rotate(180deg)}.ep-sub-menu .ep-sub-menu-wrap .ep-menu-style-3 .ep-item{flex-direction:column;align-items:flex-start}.ep-sub-menu .ep-sub-menu-wrap .ep-menu-style-3 .ep-hover-icon{right:0}.ep-sub-menu .ep-sub-menu-wrap .ep-menu-style-4 .ep-item{align-items:flex-start;padding:20px;border-radius:6px;background-color:#fff;transition:all .2s}.ep-sub-menu .ep-sub-menu-wrap .ep-menu-style-4 .ep-item:hover{transform:scale(1.05);box-shadow:0 5px 30px 0 rgba(123,136,168,0.2)}@media (min-width:768px){.ep-sub-menu-wrap .ep-sub-menu-grid{grid-template-columns:repeat(2, 1fr)}}

MR SKB