@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* ===== GLOBAL ===== */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }
body { background: #faf7f2; color: #3a2f25; }
a { text-decoration: none; color: inherit; }

/* ===== HEADER ===== */
header {
    width: 100%;
    padding: 18px 50px;
    background: linear-gradient(135deg, #8b5e34, #a47148, #d9b381);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
    flex-wrap: wrap;
    box-shadow: 0 3px 10px rgba(0,0,0,0.25);
}
.logo { 
    font-size: 26px; 
    font-weight: 700; 
    color: #fffbea; 
}
.nav-links { 
    list-style: none;
     display: flex;
      gap: 35px; 
     flex-wrap: wrap;
 }
.nav-links li a {
     font-size: 17px; 
     font-weight: 500;
      color: #fffdf7; 
     padding: 8px 12px;
      border-radius: 6px; 
     transition: 0.3s ease; 
    }
.nav-links li a:hover, .nav-links li a.active {
     background: rgba(255,255,255,0.25);
      backdrop-filter: blur(8px);
       transform: translateY(-2px); 
    }
.search-container {
     display: flex;
      align-items: center; 
      gap: 10px; 
    }
.search-container input {
     padding: 10px 15px;
      width: 250px; 
      border-radius: 6px; 
      border: 1px solid #ccc; 
      font-size: 16px; 
    }
.search-container button { 
    padding: 10px 15px;
     background: #a47449; 
     color: #fff;
     border: none; 
     border-radius: 6px;
      cursor: pointer; 
}
.header-icons a i { font-size: 22px; color: #fff; padding: 10px; border-radius: 50%; transition: transform 0.3s ease, color 0.3s ease; }
.header-icons a:hover i { transform: scale(1.2); color: #f2b950; background-color: rgba(255,255,255,0.15); }

/* HAMBURGER */
.hamburger { display: none; flex-direction: column; cursor: pointer; gap: 5px; z-index: 101; }
.hamburger span { height: 3px; width: 25px; background: #fff; border-radius: 2px; }

/* ===== CONTACT ===== */
.contact-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px; padding: 50px 60px; background: #fff6e6; border-top: 3px solid #f2b950; }
.contact-info, .contact-form { flex: 1; min-width: 300px; }
.contact-info h2, .contact-form h2 { font-size: 28px; margin-bottom: 20px; color: #3a4a66; text-align: center; }
.info-items { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; }
.info-item { flex: 1 1 150px; text-align: center; }
.info-item i { font-size: 28px; color: #f2b950; margin-bottom: 10px; }
.info-item h3 { font-size: 18px; margin-bottom: 5px; color: #3a4a66; }
.info-item p { font-size: 14px; color: #555; }

/* MAP */
.map-responsive { position: relative; width: 100%; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 12px; box-shadow: 0 8px 20px rgba(0,0,0,0.1); }
.map-responsive iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

/* FORM (GLASSMORPHISM) */
.contact-form { background: rgba(255,255,255,0.15); backdrop-filter: blur(12px); padding: 30px; border-radius: 15px; box-shadow: 0 8px 25px rgba(0,0,0,0.15); border: 1px solid rgba(255,255,255,0.3); }
.contact-form form input, .contact-form form textarea { width: 100%; padding: 12px; margin-bottom: 15px; font-size: 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.5); background: rgba(255,255,255,0.3); }
.contact-form form button { width: 100%; padding: 14px; background: linear-gradient(135deg,#f2b950,#a47449); color: #fff; font-size: 16px; font-weight: 600; border-radius: 12px; border: none; cursor: pointer; box-shadow: 0 6px 18px rgba(164,116,73,0.4); }
.contact-form form button:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 10px 22px rgba(164,116,73,0.5); }

/* WHATSAPP BUTTON */
.whatsapp-btn { position: fixed; bottom: 25px; right: 25px; background: #25D366; color: #fff; padding: 12px 18px; border-radius: 50px; font-size: 18px; display: flex; align-items: center; gap: 10px; text-decoration: none; box-shadow: 0 8px 20px rgba(0,0,0,0.2); z-index: 999; }
.whatsapp-btn:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 12px 25px rgba(0,0,0,0.3); }

/* FOOTER */
footer { background-color: #1a1a1a; color: #ccc; padding: 20px; text-align: center; font-size: 14px; }

/* RESPONSIVE */
@media(max-width:992px) {
    header { flex-direction: column; align-items: center; }
    nav { position: absolute; top: 70px; left: 0; width: 100%; display: none; flex-direction: column; padding: 15px 0; background: linear-gradient(135deg, #8b5e34,#a47148,#d9b381); text-align:center; }
    nav.active { display: flex; }
    nav .nav-links { flex-direction: column; gap: 15px; }
    .search-container { display: none; }
    .header-icons { justify-content: center; width: 100%; margin-top: 10px; }
    .hamburger { display: flex; }
}

@media(max-width:768px) {
    .contact-info h2,.contact-form h2{font-size:24px;} 
    .info-item i{font-size:24px;} 
}

@media(max-width:480px) {
    .logo{font-size:22px;} 
    .header-icons a i{font-size:20px;padding:8px;} 
    .contact-info h2,.contact-form h2{font-size:20px;} 
}