@media (min-width: 768px) { /* Show only on desktop */
    .h1-main {
        display: none;
    }
}
@font-face { font-family: Clashdisplay; src: url('Clashdisplay.OTF'); } 
@font-face { font-family: ClashdisplayL; src: url('Clashdisplay.OTF'); }
@font-face { font-family: ClashdisplayR; src: url('ClashdisplayR.OTF'); } 

html, body {
    width: 100%;
    background: #181414;
    margin: 0;  /* Remove default margin */
    padding: 0;  /* Remove default padding */
    overflow-x: hidden;  /* Prevent horizontal scrolling */
}
* {
    box-sizing: border-box; /* Prevent elements from overflowing their container */
    margin: 0;
    padding: 0;
}



::selection {
color: white; /* Contrasting color for selected text */
background: #FFBF00; /* Background color */
}
body {
font-family: "Clashdisplay", sans-serif;
font-weight: bold;
overflow-x: hidden; /* Prevents horizontal scrolling but allows vertical */
overflow: hidden; /* Prevent scrollbars */
color: white;
text-transform: uppercase;
}
header {
background-color: #181414;
position: fixed;
top: 0;
left: 0;
width: 100%;
}
/* Navigation Bar */
.navbar {
position: fixed; /* Keeps navbar at the top */
top: 0;
left: 0;
width: 100%;
z-index: 1000; /* Ensures it's above other elements */
background: #181414;
padding: 5px 20px;
font-family: 'Clashdisplay', sans-serif; /* Apply Nexa-Heavy font to navbar */
display: flex;
align-items: center;
justify-content: space-between; /* Ensures proper spacing */
color: white;
}

.h1-main{
font-size: 2vw;
}

/* Sidebar button */
.menu-btn {
background: none;
border: none;
font-size: 24px;
cursor: pointer;
color: white;
}
/* Logo + Text Container */
.logo-container {
display: flex;
align-items: center;
position: absolute;
left: 50%;
transform: translateX(-56%); /* Keeps it centered */
}

/* Logo */
.logo {
width: 30px; /* Adjust logo size */
height: auto;
margin-right: 8px; /* Small gap between logo and text */
}

/* Text */
.h1-main {
font-size: 20px;
font-weight: bold;
white-space: nowrap; /* Prevents wrapping */
}
/* Contact Button */
.contact-btn {
background: none;
color: white;
padding: 8px 15px;
text-decoration: none;
transition: transform 0.3s ease, background-color 0.3s ease; /* Smooth transition for rising effect */
}

.contact-btn:hover {
color: #FFBF00; 
transform: translateY(-2px); /* Move link up by 5px */
}

/* Sidebar */
.sidebar {
position: fixed;
z-index: 1100;
top: 0;
left: -230px; /* Initially hidden */
width: 230px;
height: 100%;
background: #FFBF00;
color: white;
padding-top: 50px;
transition: 0.3s;
}

.sidebar nav a {
display: block;
padding: 15px;
text-decoration: none;
color: white;
transition: 0.3s;
font-size: 18px;
font-family: "Clashdisplay";
}

.sidebar nav a:hover {
transform: translateX(3px);
}

/* Close button */
.close-btn {
position: absolute;
top: 10px;
right: 15px;
font-size: 30px;
background: none;
border: none;
color: white;
cursor: pointer;
}

/* Overlay */
.overlay {
display: none;
position: fixed;
top: 0; /* Covers from the very top */
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 1050; /* Ensure it's above the navbar */
}
/* Dropdown container */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Services button */
.dropdown > a {
    text-decoration: none;
    color: black;
    display: flex;
    align-items: center;
    gap: 1px;
    cursor: pointer;
    
}

/* Dropdown menu */
.dropdown-content {
    display: block;  /* Keep it visible for transition to work */
    position: absolute;
    left: 12px;
    top: 100%; /* Positions it directly below */
    background: #FFBF00;
    min-width: 200px;
    z-index: 1000;
    opacity: 0; /* Initially hidden */
    transform: translateY(-10px); /* Start slightly above */
    pointer-events: none; /* Prevent interactions while hidden */
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Show the dropdown content on hover */
.dropdown:hover .dropdown-content {
    opacity: 1; /* Make it visible */
    transform: translateY(0); /* Bring it down to its final position */
    pointer-events: auto; /* Enable interactions when visible */
}

/* Dropdown items */
.dropdown-content a {
    display: block;
    padding: 5px 10px; /* Reduced padding for a more compact look */
    text-decoration: none;
    color: white;
    white-space: nowrap;
    line-height: 1.2; /* Adjust line height for more compact text */
    transition: background-color 0.3s ease;
}



/* Show dropdown on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* width */
::-webkit-scrollbar {
width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
background: #181414;

}

/* Handle */
::-webkit-scrollbar-thumb {
background: #FFBF00;
padding: 2px;
border-radius: 10px;

}


/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #b88a02;
}
.mobile-hide {
    display: none; /* Hide by default */
}

@media (min-width: 768px) { /* Show only on desktop */
    .mobile-hide {
        display: block;
    }
}