.elementor-5551 .elementor-element.elementor-element-125e07f3{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}/* Start custom CSS for container, class: .elementor-element-125e07f3 */.sidebar-nav { width: 60px; height: 70vh; background: #318731; position: fixed; top: 100px; right: 0; z-index: 999; display: flex; flex-direction: column; align-items: center; gap: 25px; border-radius: 25px 0 0 14px; box-shadow: 0 4px 20px rgba(0,0,0,0.2); padding: 0px 0;

} /* Logo (desktop) */ .sidebar-logo img { width: 90px; height: auto; border-radius: 50%; background: #fff; padding: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.2); margin-top: 0rem; } /* Items */ .sidebar-item { position: relative; display: flex; justify-content: center; align-items: center; } /* Icons */ .sidebar-icon { width: 26px; height: 26px; filter: brightness(0) invert(1); transition: transform 0.3s ease, filter 0.3s ease; cursor: pointer; } /* Hover effect */ .sidebar-item:hover .sidebar-icon { transform: scale(1.2) rotate(5deg); filter: brightness(0) saturate(100%) invert(81%) sepia(56%) saturate(749%) hue-rotate(330deg) brightness(103%) contrast(101%); } /* Tooltip styles */ .sidebar-tooltip { position: absolute; right: 70px; background: #ffcd57; color: #fff; padding: 6px 12px; font-size: 14px; border-radius: 6px; opacity: 0; pointer-events: none; white-space: nowrap; transform: translateY(-50%) translateX(10px); top: 50%; transition: opacity 0.3s ease, transform 0.3s ease; box-shadow: 0 2px 6px rgba(0,0,0,0.2); } /* Tooltip arrow */ .sidebar-tooltip::after { content: ""; position: absolute; top: 50%; left: 100%; transform: translateY(-50%); border-width: 6px; border-style: solid; border-color: transparent transparent transparent #ffcd57; } /* Show tooltip on hover */ .sidebar-item:hover .sidebar-tooltip { opacity: 1; transform: translateY(-50%) translateX(0); } /* === MOBILE VIEW === */ @media (max-width: 768px) { .sidebar-nav { width: 100%; height: 60px; top: 0; /* move to top */ bottom: auto; right: 0; flex-direction: row; justify-content: space-between; /* logo left, icons right */ align-items: center; border-radius: 0 0 14px 14px; /* rounded bottom */ padding: 0 15px; } .sidebar-logo img { width: 70px; height: auto; margin-top: 0rem; } .sidebar-menu { display: flex; flex-direction: row; gap: 20px; align-items: center; } .sidebar-item { flex: none; justify-content: center; align-items: center; } .sidebar-tooltip { bottom: 70px; top: auto; right: auto; left: 50%; transform: translateX(-50%) translateY(10px); } .sidebar-tooltip::after { top: 100%; left: 50%; transform: translateX(-50%); border-color: #ffcd57 transparent transparent transparent; } .sidebar-icon { width: 28px; height: 28px; } } .site-topbar { display: none; }/* End custom CSS */