/* =====================================================
   SUNTINT INTERIORS – CONTACT PAGE
===================================================== */

/* RESET & GLOBAL */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Poppins', sans-serif; line-height:1.6; color:#222; background:#fff; }
img { max-width:100%; display:block; }
.container { width:90%; max-width:1200px; margin-inline:auto; }

/* HEADER / HERO */
.header {
  min-height:50vh;
  background:
    linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.75)),
    url(images/contact.jpeg) center/cover no-repeat;
  position:relative;
}
.textbox { min-height:50vh; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:0 20px; }
.textbox h1 { font-size:clamp(36px,6vw,64px); color:#fff; }
.textbox p { color:#eee; font-size:16px; max-width:650px; margin-top:10px; }

/* CONTACT SECTION */
.contact-section .contact-row {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:50px; margin-top:50px; align-items:start;
}

.contact-info, .contact-form-card {
  background:#fafafa; padding:30px 20px; border-radius:8px; box-shadow:0 10px 25px rgba(0,0,0,0.05);
}

.contact-info h2 { font-size:24px; margin-bottom:20px; color:#f44336; }
.contact-info p { margin-bottom:15px; font-size:16px; color:#333; }
.contact-info i { color:#f44336; margin-right:8px; }

.contact-form input, .contact-form textarea {
  width:100%; padding:12px 15px; margin-bottom:15px; border:1px solid #ccc; border-radius:4px; font-size:14px;
}

.contact-form button.hero-btn {
  width:100%; padding:14px 0; background:#f44336; color:#fff; border:none; font-size:16px; border-radius:4px; cursor:pointer; transition:all 0.3s ease;
}
.contact-form button.hero-btn:hover { background:#d7372b; }

/* THANK YOU MESSAGE */
.thank-you {
  display:none;
  color:#fff;
  background:#4caf50;
  text-align:center;
  padding:12px;
  border-radius:6px;
  margin-top:15px;
  font-weight:500;
}

/* PRIVACY NOTE */
.privacy-note { font-size:13px; color:#666; margin-top:10px; text-align:center; }

/* FOOTER */
.footer { background:#111; color:#aaa; padding:40px 20px; text-align:center; }
.footer h4 { color:#fff; margin-bottom:15px; }
.footer .icons i { margin:0 10px; color:#f44336; cursor:pointer; }

/* NAVIGATION */
nav { position:absolute; top:0; left:0; width:100%; padding:20px 6%; display:flex; align-items:center; justify-content:space-between; z-index:1000; }
.logo { height:100px; }
.nav-links { display:flex; }
.nav-links ul { list-style:none; display:flex; gap:30px; }
.nav-links a { text-decoration:none; color:#fff; font-size:14px; position:relative; }
.nav-links a.active, .nav-links a:hover { color:#f44336; }

/* MOBILE NAV */
#menu-btn, #close-btn { display:none; font-size:26px; color:#fff; cursor:pointer; }
@media (max-width:768px) {
  #menu-btn { display:block; }
  .nav-links { position:fixed; top:0; right:-100%; width:260px; height:100vh; background:#f44336; display:flex; align-items:flex-start; padding-top:80px; transition:right 0.3s ease; }
  .nav-links.active { right:0; }
  .nav-links ul { flex-direction:column; gap:20px; padding-left:30px; }
  #close-btn { display:block; position:absolute; top:20px; right:20px; }
  .contact-section .contact-row { gap:30px; }
}