.menu-toggle{
display:flex;
align-items:center;
gap:10px;
cursor:pointer;
width:177px;
background:transparent;
}
.menu-toggle:hover{
background:transparent;
}
.menu-text{
font-size:21px;
letter-spacing:2px;
font-weight:500;
color:white;
font-family:"Helvetica Neue", sans-serif;
}
/* FULLSCREEN MENU */
.fullscreen-menu{
position:fixed;
top:-100%;
left:0;
width:100%;
height:100vh;
background:#000;
transition:0.5s ease;
z-index:99999;
display:none; /* FIX: hide completely by default */
}
.fullscreen-menu.active{
top:0;
display:block; /* FIX: show only when active */
}
/* CLOSE BUTTON */
.close-btn{
position:absolute;
top:25px;
right:30px;
font-size:32px;
color:#fff;
cursor:pointer;
}
/* CONTAINER FOR LEFT & RIGHT LAYOUT */
.menu-container{
width:100%;
height:100%;
display:flex;
justify-content:space-around;
align-items:center;
padding:0 8%;
}
/* RIGHT SIDE MENU LINKS */
.menu-links{
display:flex;
flex-direction:column;
gap:10px;
text-align:left;
}
.menu-links a{
color:#fff;
font-size:26px;
text-decoration:none;
letter-spacing:1px;
font-weight:500;
transition:0.3s;
font-family:"Helvetica Neue", sans-serif;
}
.menu-links a:hover{
opacity:0.6;
}
/* LEFT SIDE SOCIAL ICONS */
.menu-social{
display:flex;
gap:10px;
}
.menu-social a{
color: black;
font-size: 18px;
background: white;
width: 30px;
text-align: center;
border-radius: 3px;
}
/* ===== SERVICES SUBMENU ===== */
.menu-item-has-children{
position:relative;
}
.services-toggle{
display:flex;
align-items:center;
gap:8px;
}
.submenu-arrow{
font-size:20px;
display:inline-block;
transition:transform 0.3s ease;
}
.menu-item-has-children.open .submenu-arrow{
transform:rotate(90deg);
}
.fullscreen-menu .sub-menu{
list-style:none;
margin:0;
padding:0;
max-height:0;
overflow:hidden;
transition:max-height 0.4s ease;
}
.sub-menu.open{
max-height:400px; /* enough room for 4 items */
margin-top:10px;
}
.sub-menu li{
margin:0;
padding:0;
}
.fullscreen-menu .hfe-sub-menu-item{
font-size:18px !important;
font-weight:400 !important;
opacity:0.75;
padding:6px 0;
display:inline-block;
}
.hfe-sub-menu-item:hover{
opacity:1 !important;
}
/* ===== RESPONSIVE STYLES ===== */
/* Tablets */
@media (max-width: 1024px){
.menu-container{
padding:0 5%;
}
.menu-links a{
font-size:22px;
}
}
/* Mobile */
@media (max-width: 768px){
.menu-container{
flex-direction:column;
justify-content:center;
align-items:center;
gap:40px;
text-align:center;
}
.menu-links{
align-items:center;
text-align:center;
}
.menu-links a{
font-size:22px;
}
.menu-item-has-children{
text-align:center;
}
.services-toggle{
justify-content:center;
}
.sub-menu{
text-align:center;
}
.menu-social{
position:absolute;
bottom:40px;
left:50%;
transform:translateX(-50%);
justify-content:center;
}
.menu-toggle{
width: 148px;
}
.menu-text{
font-size: 18px;
}
}
/* Small Mobile */
@media (max-width: 480px){
.menu-links a{
font-size:20px;
}
.menu-social a{
font-size:18px;
}
}
function openMenu(){
document.getElementById("fullscreenMenu").classList.add("active");
}
function closeMenu(){
document.getElementById("fullscreenMenu").classList.remove("active");
}
function toggleSubmenu(event){
event.preventDefault(); // stop navigating to Services page; remove this line if you want it to also link out
var parent = event.currentTarget.closest(".menu-item-has-children");
var submenu = document.getElementById("servicesSubmenu");
parent.classList.toggle("open");
submenu.classList.toggle("open");
}
