/* Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: serif;
background-color: #f9f9f9;
color: #222;
overflow-x: hidden;
}

::-webkit-scrollbar {
  display: none;
}

header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 5px 50px;
background-color: white;
position: relative;
}

/* Logo */
.logo img {
width: 100px;
height: auto;
}

/* Menu */
.menu {
list-style: none;
display: flex;
align-items: center;
gap: 20px;
}

.menu li {
position: relative;
}

.menu a {
text-decoration: none;
color: black;
font-size: 20px;
padding: 8px 12px;
display: block;
}

/* Dropdown Arrow */
.dropdown > .dropbtn::after {
content: "\25BC";  
/* Replace with chevron */
content: "\276F";   
font-size: 14px;
margin-left: 6px;
display: inline-block;
transform: rotate(90deg); /* rotate to point down */
transition: transform 0.3s ease;
}

/* Rotate arrow when active on mobile */
.dropdown.active > .dropbtn::after {
    transform: rotate(-90deg); /* flip up */
}


/* Dropdown */
.dropdown-content {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #fff;
min-width: 200px;
box-shadow: 0 4px 10px rgba(0,0,0,0.15);
z-index: 1;
list-style: none;
padding: 0; 
margin: 0;
}

.dropdown-content li {
    padding: 0;          /* remove li padding */
    margin: 0;           /* remove li margin */
}

.dropdown-content li a {
padding: 10px 15px;
font-size: 15px;
}

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

/* Get a Quote button */
.quote-btn {
background-color: #29465B;
border: 2px solid #29465B;
color: white;
padding: 10px 18px;
border-radius: 5px;
cursor: pointer;
font-size: 15px;
transition: 0.3s;
}

.quote-btn:hover {
    background-color: #1f3444;
}

/* ---------- MODAL ---------- */
.modal {
display: none; /* Hidden by default */
position: fixed;
z-index: 1000;
left: 0; top: 0;
width: 100%; height: 100%;
background: rgba(0,0,0,0.5);
display: flex; justify-content: center; align-items: center;
}

.modal-content {
background: #fff;
padding: 25px;
border-radius: 8px;
width: 90%;
max-width: 500px;
position: relative;
animation: fadeIn 0.3s ease-in-out;
}

.modal-content h2 {
    margin-bottom: 10px; 
    font-size: 18px;
}

.modal-content p { 
    margin-bottom: 15px; 
    color: #555; 
    font-size: 14px; 
}

.close {
    position: absolute; 
    top: 10px; 
    right: 15px;
    font-size: 22px; 
    cursor: pointer; 
    color: #555;
}

.close:hover { 
    color: red; 
}

form label {
    display: block; 
    margin: 10px 0 5px; 
    font-weight: bold;
    font-size: 15px;
}

form input, form textarea {
    width: 100%; 
    padding: 10px;
    border: 1px solid #ccc; 
    border-radius: 5px;
    margin-bottom: 15px;
}

form textarea { 
    resize: none; 
    height: 100px; 
}

form button {
    background: #29465B;
    color: #fff; 
    border: none;
    padding: 10px 18px; 
    border-radius: 5px;
    cursor: pointer; 
    font-size: 15px;
}

form button:hover { 
    background: #1f3444;
}

@keyframes fadeIn {
    from { 
        opacity: 0; 
        transform: scale(0.9); 
    }
    to { 
        opacity: 1; 
        transform: scale(1);
    }
}

/* Toggle button for mobile */
.menu-toggle {
    display: none;
    font-size: 28px;
    background: none;
    border: none;
    cursor: pointer;
    margin-left: 200px;
}



/* ---------------- Navbar Dropdown Adjustments for Mobile (max-width: 480px) ---------------- */
@media (max-width: 480px) {

    header {
        padding: 10px;
    }

    .logo img {
        width: 60px;
        height: auto;
    }

    .menu {
        display: none;
        flex-direction: column;
        width: 100%;
        background: white;
        padding: 15px;
        position: absolute;
        top: 60px;          
        right: 0;
        z-index: 9999;    
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .menu li {
        width: 100%;
    }

    .menu li a {
        padding: 12px;
        border-bottom: 1px solid #ddd;
    }

    .menu.show {
        display: flex;
    }

    .menu-toggle {
        display: block;
    }

    /* Dropdown positioning when active */
    .dropdown.active .dropdown-content {
        display: block;
    }

    .dropdown-content {
        position: static;
        box-shadow: none;
    }

    .dropdown-content li a {
        border: none;
        line-height: 1.5px;
    }
    
    /* Ensure the hamburger icon is visible */
    .menu-toggle {
        display: block;
    }

   
    .modal {
        padding: 10px;
    }

}