*{
box-sizing:border-box;
}

html,body{
margin:0;
font-family:Arial;
background:#0f0f0f;
color:white;
overflow-x:hidden;
}

/* ===== CONTAINER ===== */

.container{
max-width:1550px;
margin:0 auto;
padding:0 20px;
}

/* ===== NAVBAR ===== */

.navbar{
position:fixed;
top:0;
left:0;
width:100%;
padding:20px;
background:#0f0f0f;
z-index:9999;
}

body{
padding-top:120px;
}

.nav-flex{
display:flex;
justify-content:space-between;
align-items:center;
}

/* LOGO */

.logo img{
height:90px;
}

/* COMPANY NAME */

.company-name{
font-size:20px;
font-weight:600;
margin-left:15px;
white-space:nowrap;
}

/* ===== DESKTOP NAV ===== */

nav{
display:flex;
align-items:center;
gap:20px;
}

nav a{
color:white;
text-decoration:none;
}

/* CALL BUTTON */

.call-btn{
background:#d4af37;
padding:10px 20px;
margin-right:30px;
}

/* ===== DROPDOWN ===== */

.dropdown{
position:relative;
}

.dropdown-menu{
position:absolute;
top:100%;
left:0;
background:#111;
min-width:220px;
display:none;
flex-direction:column;
border-radius:8px;
padding:10px 0;
}

.dropdown-menu a{
padding:10px 20px;
display:block;
}

.dropdown-menu a:hover{
background:#d4af37;
color:#000;
}

/* Desktop hover dropdown */

@media(min-width:769px){
.dropdown:hover .dropdown-menu{
display:flex;
}
}

/* Arrow icon */

.dropdown-toggle{
display:flex;
align-items:center;
gap:6px;
}

.dropdown-icon{
font-size:12px;
transition:0.3s;
}

.dropdown:hover .dropdown-icon{
transform:rotate(180deg);
}

/* ===== BURGER ===== */

.burger{
display:none;
font-size:30px;
cursor:pointer;
color:white;
}

/* ===== MOBILE ===== */

@media(max-width:768px){

.company-name{
font-size:16px;
}

.burger{
display:block;
}

/* Hide desktop call button */

.call-btn{
display:none;
}

/* Mobile nav */

nav{
position:fixed;
top:0;
right:0;
width:280px;
height:100vh;
background:#0f0f0f;
flex-direction:column;
padding-top:100px;
transform:translateX(100%);
transition:0.4s;
gap:0 !important;
}

nav.active{
transform:translateX(0);
}

nav a{
display:block;
margin:0 !important;
padding:12px 20px;
line-height:1.3;
border-bottom:1px solid #222;
}

/* Mobile dropdown */

.dropdown-menu{
position:static;
display:none;
background:none;
padding:0;
}

.dropdown.active .dropdown-menu{
display:flex;
}

.dropdown-menu a{
padding:10px 30px;
}

}

.footer{
background:linear-gradient(90deg,#0c1b1d,#0f2527);
padding:80px 0;
color:white;
}

.footer-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:60px;
align-items:start;
}

.footer-logo{
height:90px;
margin-bottom:20px;
}

.footer h3{
margin-bottom:20px;
font-size:22px;
}

.footer p{
line-height:1.8;
color:#ccc;
}

.map iframe{
border-radius:8px;
}

.footer-contact{
display:flex;
flex-direction:column;
gap:18px;
}

.contact-item{
display:flex;
align-items:flex-start;
gap:12px;
}

.contact-item .icon{
width:40px;
height:40px;
background:#1b2c2f;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
}

.footer hr{
border:0;
border-top:1px solid #2a3a3d;
margin:60px 0 30px;
}

.footer-bottom{
text-align:center;
color:#aaa;
}

/* MOBILE */

@media(max-width:768px){

.footer-grid{
grid-template-columns:1fr;
gap:40px;
}

}
.footer a{
color:white;
text-decoration:none;
}

.footer a:visited{
color:white;
}

.footer a:hover{
color:#d4af37;   /* optional gold hover */
}
