/* =====================================================
   SEATNGA Contact Page (Pure full-width, no containers)
===================================================== */

/* Root spacing helper */
:root{
  --edge: clamp(10px, 3.5vw, 48px);
}

/* ====== CONTACT SECTION (true full width) ====== */
.contact{
  width:100%;
  padding:80px var(--edge);
  background:linear-gradient(135deg,#f8fafc 0%,#e2e8f0 30%,#f1f5f9 70%,#ffffff 100%);
  margin:0; box-sizing:border-box; position:relative; overflow:hidden;
}
.contact::before{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(circle at 18% 22%, rgba(190,38,51,.05) 0%, transparent 46%),
    radial-gradient(circle at 82% 78%, rgba(36,54,88,.05) 0%, transparent 46%);
  pointer-events:none;
}
.contact-container{ width:100% } /* no max-width */

/* ====== HEADER ====== */
.contact-header{
  text-align:center;
  margin:0 0 48px;
  padding:0 var(--edge);
}
.contact h2,.contact-header h2{
  font-size:clamp(1.8rem,4.2vw,2.6rem);
  color:#243658; margin:0 0 16px; font-weight:800; text-transform:uppercase; letter-spacing:2px;
  position:relative; display:inline-block;
  background:linear-gradient(135deg,#243658 0%,#BE2633 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.contact h2::after,.contact-header h2::after{
  content:''; position:absolute; bottom:-10px; left:50%; transform:translateX(-50%);
  width:100px; height:4px; background:linear-gradient(135deg,#BE2633,#243658);
  border-radius:2px; box-shadow:0 4px 15px rgba(190,38,51,.3);
}
.contact-subtitle{
  font-size:1.05rem; color:#4a5568; line-height:1.8; margin:0 auto; font-weight:500;
  /* no width cap, but keep side padding implicit via parent */
}

/* ====== GRID (info only) ====== */
.contact-grid{
  display:grid; grid-template-columns:1fr; gap:40px; margin:0 0 56px;
  padding:0 var(--edge);
}

/* ====== SECTION HEADERS ====== */
.section-header{ margin-bottom:22px }
.section-header h3{
  font-size:clamp(1.25rem,2.6vw,1.6rem); color:#243658; margin:0 0 8px; font-weight:800;
  display:flex; align-items:center; gap:10px;
}
.section-header h3 i{ color:#BE2633; font-size:1.1em }
.section-header p{ font-size:1rem; color:#6b7280; line-height:1.65; margin:0 }

/* ====== CONTACT INFO BLOCK (full width) ====== */
.contact-info-section{
  background:linear-gradient(135deg, rgba(255,255,255,.95) 0%, rgba(248,250,252,.9) 100%);
  padding:clamp(22px,3.2vw,32px);
  border-radius:18px;
  box-shadow:0 12px 28px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.6);
  backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.35);
}

.contact-methods{ margin-bottom:24px }

.contact-method{
  display:flex; align-items:flex-start; gap:16px;
  padding:16px 16px; margin-bottom:14px;
  background:rgba(255,255,255,.88); border-radius:14px; border-left:5px solid #BE2633;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.contact-method:hover{ background:#fff; transform:translateX(3px); box-shadow:0 8px 18px rgba(0,0,0,.08) }

.method-icon{
  width:44px; height:44px; background:linear-gradient(135deg,#BE2633,#243658);
  border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.method-icon i{ color:#fff; font-size:1.2rem }

.method-content h4{ font-size:1.08rem; color:#243658; margin:0 0 6px; font-weight:800 }
.method-content p{ font-size:1rem; color:#4a5568; line-height:1.7; margin:0 0 5px }
.method-content a{ color:#BE2633; font-weight:700; text-decoration:none; transition:color .2s ease }
.method-content a:hover{ color:#243658; text-decoration:underline }

/* ====== QUICK ACTIONS ====== */
.quick-actions{ margin-top:6px }
.quick-actions h4{
  font-size:1.05rem; color:#243658; margin:0 0 12px; font-weight:800; display:flex; align-items:center; gap:10px;
}
.quick-actions h4 i{ color:#BE2633 }
.action-buttons{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px;
}
.action-btn{
  background:linear-gradient(135deg, rgba(190,38,51,.1), rgba(36,54,88,.1));
  color:#243658; padding:14px 16px; border-radius:12px; font-weight:800; text-align:center;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
  display:flex; flex-direction:column; align-items:center; gap:8px; font-size:.95rem; text-decoration:none;
}
.action-btn i{ font-size:1.35rem; color:#BE2633 }
.action-btn:hover{ background:linear-gradient(135deg, rgba(190,38,51,.18), rgba(36,54,88,.18)); transform:translateY(-2px); box-shadow:0 8px 18px rgba(0,0,0,.08) }

/* ====== MAP SECTION (full width) ====== */
.map-section{ padding:0 var(--edge) }
.map-container{
  background:rgba(255,255,255,.95);
  padding:clamp(14px,2vw,18px);
  border-radius:18px;
  box-shadow:0 12px 28px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.6);
  margin:0 0 20px;
}
.map-container iframe{ display:block; width:100%; height:420px; border:0; border-radius:14px }

/* ====== Responsive ====== */
@media (max-width:1024px){
  .contact{ padding:70px var(--edge) }
}
@media (max-width:768px){
  .contact{ padding:56px var(--edge) }
  .contact-info-section{ padding:clamp(18px,3vw,24px) }
  .action-buttons{ grid-template-columns:1fr }
  .map-container iframe{ height:360px }
}
@media (max-width:480px){
  .contact{ padding:40px var(--edge) }
  .contact-info-section{ border-radius:14px }
  .section-header h3{ font-size:1.2rem }
  .contact-method{ padding:14px; gap:12px }
  .method-icon{ width:38px; height:38px }
  .method-icon i{ font-size:1.05rem }
}

/* ====== Animation ====== */
@keyframes fadeInUp{ from{opacity:0; transform:translateY(20px)} to{opacity:1; transform:translateY(0)} }
.contact-header,.contact-info-section,.map-section{ animation:fadeInUp .5s ease forwards }
.contact-header{ animation-delay:.06s }
.contact-info-section{ animation-delay:.12s }
.map-section{ animation-delay:.18s }