:root { --CONTACT-BG: var(--BG-COLOR); --FORM-CARD-BG: var(--CARD-BG); --FORM-BORDER-COLOR: var(--BORDER-COLOR); --FORM-FOCUS-SHADOW: rgba(255, 193, 7, 0.4); --WHATSAPP-HOVER: #128C7E; --EMAIL-HOVER: var(--HOVER-COLOR); }
.contactContainer { max-width: 900px; margin: 40px auto; padding: 0 20px; text-align: center; }
.contactHeading { font-size: 2.8em; margin-bottom: 10px; color: var(--TEXT-COLOR); font-family: var(--HEADER-FONT); }
.contactIntro { margin-bottom: 40px; color: #6c757d; font-size: 1.1em; max-width: 600px; margin-left: auto; margin-right: auto; }
.contactMethodsWrapper { display: flex; justify-content: center; gap: 25px; margin-bottom: 50px; flex-wrap: wrap; }
.contactMethod { display: flex; align-items: center; justify-content: center; padding: 15px 30px; border-radius: 10px; text-decoration: none; font-weight: 700; font-size: 1.05em; transition: transform 0.3s, box-shadow 0.3s, background-color 0.3s; min-width: 220px; }
.contactMethod i { margin-right: 12px; font-size: 1.3em; }
.whatsappBtn { background-color: #25D366; color: #FFFFFF; box-shadow: 0 6px 15px rgba(37, 211, 102, 0.3); }
.whatsappBtn:hover { background-color: var(--WHATSAPP-HOVER); transform: translateY(-3px); box-shadow: 0 10px 20px rgba(37, 211, 102, 0.4); }
.emailBtn { background-color: var(--BUTTON-BG); color: var(--BUTTON-TEXT); box-shadow: 0 6px 15px rgba(255, 193, 7, 0.3); }
.emailBtn:hover { background-color: var(--EMAIL-HOVER); transform: translateY(-3px); box-shadow: 0 10px 20px rgba(255, 193, 7, 0.4); }
.contactFormCard { background-color: var(--FORM-CARD-BG); padding: 40px; border-radius: 15px; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1); text-align: left; border: 1px solid var(--FORM-BORDER-COLOR); }
.formHeading { font-size: 2em; margin-bottom: 5px; color: var(--TEXT-COLOR); text-align: center; font-family: var(--HEADER-FONT); }
.formIntro { color: #6c757d; margin-bottom: 30px; text-align: center; font-size: 0.95em; }
.contactForm .formGroup { margin-bottom: 20px; }
.contactForm input[type="text"], .contactForm input[type="email"], .contactForm input[type="text"], .contactForm textarea { width: 100%; padding: 14px; border: 1px solid var(--FORM-BORDER-COLOR); border-radius: 8px; box-sizing: border-box; font-size: 1em; background-color: var(--BG-COLOR); color: var(--TEXT-COLOR); }
.contactForm textarea { resize: vertical; min-height: 150px; }
.contactForm input:focus, .contactForm textarea:focus { border-color: var(--ACCENT-COLOR); outline: none; box-shadow: 0 0 0 4px var(--FORM-FOCUS-SHADOW); }
.submitBtn { width: 100%; background-color: var(--MAIN-BTN-BG); color: var(--MAIN-BTN-TEXT); border: none; padding: 16px; border-radius: 8px; font-size: 1.15em; font-weight: 700; cursor: pointer; transition: background-color 0.3s, transform 0.2s; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); }
.submitBtn:hover { background-color: var(--MAIN-BTN-HOVER); transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); }
.formError { color: #dc3545; font-weight: 500; margin-top: 15px; padding: 12px; border: 1px solid #f5c6cb; background-color: #f8d7da; border-radius: 8px; text-align: center; }
.formSuccess { color: #155724; font-weight: 500; margin-top: 15px; padding: 12px; border: 1px solid #c3e6cb; background-color: #d4edda; border-radius: 8px; text-align: center; }
@media (max-width: 600px) { .contactMethodsWrapper { flex-direction: column; gap: 15px; } .contactMethod { width: 100%; } .contactFormCard { padding: 25px; } .contactHeading { font-size: 2.2em; } }