/* ===================================================
   CONTACT US – contact.css
   =================================================== */
.page-hero { position:relative; height:420px; display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden; padding-top:100px; }
.contact-hero { background:linear-gradient(135deg,#1a1a2e,#4284DB); }
.page-hero-overlay { position:absolute; inset:0; background:rgba(0,0,0,0.35); }
.page-hero-content { position:relative; z-index:2; color:#fff; }
.page-hero-content h1 { font-size:52px; font-weight:800; margin:12px 0 10px; font-family:'DM Sans',sans-serif; }
.page-hero-content p { font-size:18px; opacity:0.85; }
.section-label { display:flex; align-items:center; margin-bottom:14px; }
.section-label span { background:linear-gradient(135deg,#4284DB,#29EAC4); color:#fff; padding:6px 16px; border-radius:20px; font-size:13px; font-weight:600; }
.section-title { font-size:36px; font-weight:700; color:#1a1a1a; margin-bottom:30px; font-family:'DM Sans',sans-serif; }

/* CONTACT INFO CARDS */
.contact-info { padding:0 80px; background:#fff; margin-top:-50px; position:relative; z-index:10; }
.contact-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.contact-card {
  background:#fff; border-radius:18px;
  padding:34px 24px; text-align:center;
  box-shadow:0 8px 30px rgba(0,0,0,0.10);
  border-bottom:4px solid transparent;
  transition:0.3s;
  border-image: linear-gradient(135deg,#4284DB,#29EAC4) 1;
}
.contact-card:hover { transform:translateY(-6px); box-shadow:0 16px 40px rgba(0,0,0,0.14); }
.cc-icon { font-size:36px; margin-bottom:14px; }
.contact-card h3 { font-size:18px; font-weight:700; color:#1a1a1a; margin-bottom:12px; }
.contact-card p { font-size:15px; color:#555; line-height:1.7; margin:0; }
.contact-card a { color:#4284DB; text-decoration:none; font-weight:600; }
.contact-card a:hover { color:#29EAC4; }
.cc-note { font-size:13px; color:#aaa; margin-top:6px; }

/* MAIN CONTACT */
.contact-main { padding:90px 80px; background:#fff; }
.contact-main-grid { display:grid; grid-template-columns:1.1fr 0.9fr; gap:70px; align-items:start; }

/* FORM */
.cf-tabs { display:flex; gap:0; margin-bottom:28px; border-radius:12px; overflow:hidden; border:2px solid #e8e8e8; }
.cf-tab {
  flex:1; padding:13px; border:none; background:#f8f8f8;
  font-size:14px; font-weight:600; cursor:pointer;
  font-family:'DM Sans',sans-serif; color:#666; transition:0.3s;
}
.cf-tab.active { background:linear-gradient(135deg,#4284DB,#29EAC4); color:#fff; }
.cf-tab:hover:not(.active) { background:#eee; }

.cf-panel { display:none; }
.cf-panel.active { display:block; }

.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.form-group { display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
.form-group label { font-size:13px; font-weight:600; color:#333; }
.form-group input, .form-group select, .form-group textarea {
  padding:12px 15px; border:2px solid #e8e0e0;
  border-radius:10px; font-size:14px; font-family:'DM Sans',sans-serif;
  background:#fff; outline:none; transition:0.3s; color:#333;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color:#4284DB; box-shadow:0 0 0 3px rgba(66,132,219,0.10); }
.form-group textarea { resize:vertical; }

.cf-submit {
  width:100%; padding:15px; border:none;
  background:linear-gradient(135deg,#4284DB,#29EAC4);
  color:#fff; font-size:15px; font-weight:700;
  border-radius:30px; cursor:pointer; transition:0.4s;
  font-family:'DM Sans',sans-serif;
}
.cf-submit:hover { transform:translateY(-2px); box-shadow:0 8px 25px rgba(66,132,219,0.35); }

/* MAP */
.map-container { margin-bottom:28px; border-radius:14px; overflow:hidden; box-shadow:0 6px 20px rgba(0,0,0,0.10); }

/* SOCIAL */
.contact-social { margin-bottom:28px; }
.contact-social h3 { font-size:18px; font-weight:700; color:#1a1a1a; margin-bottom:14px; }
.social-links { display:flex; gap:12px; flex-wrap:wrap; }
.social-btn {
  display:flex; align-items:center; gap:10px;
  padding:10px 18px; border-radius:25px;
  text-decoration:none; font-size:14px; font-weight:600;
  transition:0.3s;
}
.social-btn:hover { transform:translateY(-3px); box-shadow:0 6px 18px rgba(0,0,0,0.15); }
.social-icon { font-weight:800; font-size:14px; }
.linkedin { background:#0077B5; color:#fff; }
.facebook { background:#1877F2; color:#fff; }
.instagram { background:linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); color:#fff; }
.youtube { background:#FF0000; color:#fff; }

/* QUICK INFO */
.contact-quick-info { background:#FFF6F6; border-radius:14px; padding:22px 24px; }
.qi-item { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.qi-item:last-child { margin-bottom:0; }
.qi-dot { width:10px; height:10px; min-width:10px; background:linear-gradient(135deg,#4284DB,#29EAC4); border-radius:50%; }
.qi-item p { font-size:14px; color:#555; margin:0; line-height:1.5; }

/* FAQ */
.contact-faq { padding:90px 80px; }
.faq-list { max-width:800px; margin:0 auto; }
.faq-item { border:1px solid #e8e0e0; border-radius:14px; margin-bottom:14px; overflow:hidden; }
.faq-q {
  width:100%; text-align:left; background:#fff;
  border:none; padding:22px 28px; font-size:16px;
  font-weight:700; color:#1a1a1a; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center;
  font-family:'DM Sans',sans-serif; transition:0.3s;
}
.faq-q:hover { background:#FFF6F6; }
.faq-item.open .faq-q { background:linear-gradient(135deg,#4284DB,#29EAC4); color:#fff; }
.faq-arrow { font-size:20px; font-weight:400; transition:transform 0.3s; }
.faq-item.open .faq-arrow { transform:rotate(180deg); }
.faq-a { display:none; padding:20px 28px; background:#f9f9f9; border-top:1px solid #eee; }
.faq-item.open .faq-a { display:block; }
.faq-a p { font-size:15px; color:#555; line-height:1.75; margin:0; }

/* RESPONSIVE */
@media (max-width:1024px) {
  .contact-info { padding:0 40px; margin-top:-40px; }
  .contact-cards { grid-template-columns:repeat(2,1fr); }
  .contact-main { padding:70px 40px; }
  .contact-main-grid { grid-template-columns:1fr; gap:50px; }
  .contact-faq { padding:70px 40px; }
}
@media (max-width:768px) {
  .page-hero-content h1 { font-size:32px; }
  .section-title { font-size:26px; }
  .contact-info { padding:0 20px; margin-top:-30px; }
  .contact-cards { grid-template-columns:1fr; }
  .contact-main { padding:50px 20px; }
  .form-row { grid-template-columns:1fr; }
  .cf-tabs { flex-direction:column; }
  .contact-faq { padding:50px 20px; }
  .faq-q { font-size:14px; padding:18px 20px; }
}