.with-sidebar-wrapper{min-height:100vh}.sidebar{z-index:100;background-color:#efeae2;border-right:1px solid #8b7e661a;flex-direction:column;width:280px;height:100vh;padding:4rem 2rem;display:flex;position:fixed;top:0;left:0}.sidebar-logo{letter-spacing:2px;text-transform:uppercase;margin-bottom:5rem;font-size:1.5rem;font-weight:700}.nav-links{flex-direction:column;gap:2rem;list-style:none;display:flex}.nav-links a{color:#4a453e;letter-spacing:2px;padding-left:0;font-size:.9rem;font-weight:500;text-decoration:none;transition:all .3s;display:inline-block;position:relative}.nav-links a:hover{color:#8b7e66;padding-left:15px}.nav-links a:before{content:"";background-color:#8b7e66;width:0;height:1px;transition:all .3s;position:absolute;top:50%;left:0}.nav-links a:hover:before{width:10px}.nav-links .active{padding-left:15px;font-weight:700}.nav-links .active:before{width:10px}.content-area{z-index:10;width:calc(100% - 280px);min-height:100vh;margin-left:280px;padding:0;position:relative;overflow-y:auto}@media (max-width:900px){.sidebar{flex-direction:row;justify-content:space-between;width:100%;height:auto;padding:1.5rem;position:relative}.sidebar-logo{margin-bottom:0}.nav-links{flex-direction:row;gap:1.5rem}.nav-links .active,.nav-links a:hover{padding-left:0}.nav-links a:before{display:none}.content-area{width:100%;margin-left:0}}