.elementor-315 .elementor-element.elementor-element-e1fce8b:not(.elementor-motion-effects-element-type-background), .elementor-315 .elementor-element.elementor-element-e1fce8b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;}.elementor-315 .elementor-element.elementor-element-e1fce8b{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin-top:-24px;margin-bottom:0px;padding:0px 0px 0px 0px;}.elementor-315 .elementor-element.elementor-element-e1fce8b > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-c3975f1 *//* =====================================================================
   NUCA SCIENTIFIC — CONTACT PAGE CSS
   Paste into: Elementor > Page Settings (gear icon, bottom-left)
   > Advanced tab > Custom CSS. Scoped to THIS PAGE ONLY.
===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --teal-900:#063C47;
  --teal-700:#00879E;
  --teal-500:#00D9F0;
  --teal-100:#E3FBFF;
  --black:#000000;
  --ink:#00D9F0;
  --line:rgba(0,217,240,0.15);
  --serif:'Fraunces', serif;
  --sans:'Inter', sans-serif;
  --mono:'JetBrains Mono', monospace;
}

*{ box-sizing:border-box; }
body{ margin:0; background:var(--black); font-family:var(--sans); color:var(--ink); line-height:1.5; }
.wrap{ max-width:1180px; margin:0 auto; padding:0 32px; }
img{ max-width:100%; display:block; }
a{ color:inherit; }

/* ---------- Header (match Home page) ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(0,0,0,0.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{ display:flex; align-items:center; justify-content:space-between; padding:20px 32px; }
.brand{ font-family:var(--serif); font-weight:600; font-size:20px; color:var(--ink); }
.nav-links{ display:flex; gap:30px; font-size:14px; }
.nav-links a{ text-decoration:none; opacity:0.75; transition:opacity 0.2s; color:var(--ink); }
.nav-links a:hover{ opacity:1; }
.nav-cta{
  font-family:var(--mono); font-size:12px; letter-spacing:0.04em;
  padding:10px 20px; border:1px solid var(--teal-700); border-radius:100px;
  text-decoration:none; white-space:nowrap; color:var(--teal-700);
  transition:background 0.2s ease, color 0.2s ease;
}
.nav-cta:hover{ background:var(--teal-700); color:var(--ink); }

/* ---------- Shared text patterns ---------- */
.eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--teal-700); margin-bottom:18px; display:flex; align-items:center; gap:10px;
}
.eyebrow::before{ content:''; width:22px; height:2px; background:var(--teal-500); display:inline-block; border-radius:1px; }
.section-title{ font-family:var(--serif); font-weight:500; font-size:clamp(24px, 3vw, 32px); line-height:1.15; margin:0 0 14px; color:var(--ink); position:relative; }
.section-title::after{ content:''; display:block; width:44px; height:3px; background:var(--teal-500); border-radius:2px; margin-top:12px; }

/* ---------- Contact Hero + animated ambient glow ---------- */
.contact-hero{
  position:relative; overflow:hidden; padding:96px 0 72px;
  border-bottom:1px solid var(--line); background:var(--black);
}
.contact-hero-inner{ position:relative; z-index:2; text-align:center; max-width:720px; margin:0 auto; }
.contact-headline{ font-family:var(--serif); font-weight:500; font-size:clamp(30px, 4.4vw, 46px); line-height:1.15; color:var(--ink); margin:0 0 18px; }
.contact-subhead{ font-size:16px; line-height:1.7; color:var(--ink); opacity:0.85; max-width:56ch; margin:0 auto; }

/* ---------- Contact section layout ---------- */
.contact-section{ padding:84px 0; }
.contact-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:start; }

/* ---------- Form card ---------- */
.contact-form-card{
  background:var(--black); border:1px solid var(--line); border-radius:10px; padding:40px;
}
.contact-form{ display:flex; flex-direction:column; gap:20px; margin-top:8px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.form-field{ display:flex; flex-direction:column; gap:8px; }
.form-field label{ font-family:var(--mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--teal-700); }
.form-field input, .form-field textarea{
  background:rgba(0,217,240,0.04); border:1px solid var(--line); border-radius:6px;
  padding:13px 14px; font-family:var(--sans); font-size:14px; color:var(--ink);
  transition:border-color 0.2s ease, box-shadow 0.2s ease; resize:vertical;
}
.form-field input::placeholder, .form-field textarea::placeholder{ color:transparent; }
.form-field input:focus, .form-field textarea:focus{
  outline:none; border-color:var(--teal-500); box-shadow:0 0 0 3px rgba(0,217,240,0.15);
}

/* ---------- Floating labels (interactive: animate on focus/typing) ---------- */
.form-field.floating{ position:relative; display:block; }
.form-field.floating input, .form-field.floating textarea{ width:100%; padding-top:20px; padding-bottom:8px; }
.form-field.floating textarea{ padding-top:22px; }
.form-field.floating label{
  position:absolute; left:14px; top:16px; font-family:var(--sans); font-size:14px;
  color:rgba(0,217,240,0.45); pointer-events:none;
  transition:top 0.2s ease, font-size 0.2s ease, color 0.2s ease, letter-spacing 0.2s ease;
}
.form-field.floating input:focus + label,
.form-field.floating input:not(:placeholder-shown) + label,
.form-field.floating textarea:focus + label,
.form-field.floating textarea:not(:placeholder-shown) + label{
  top:6px; font-size:10px; letter-spacing:0.06em; text-transform:uppercase;
  font-family:var(--mono); color:var(--teal-500);
}

/* ---------- Submit button with click-ripple ---------- */
.contact-submit{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:var(--teal-700); color:var(--ink); border:none; border-radius:6px;
  font-family:var(--sans); font-weight:600; font-size:14px; padding:15px 28px;
  cursor:pointer; transition:background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  margin-top:6px; align-self:flex-start;
}
.contact-submit:hover{ background:var(--teal-900); transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,217,240,0.25); }
.contact-submit svg{ transition:transform 0.25s ease; }
.contact-submit:hover svg{ transform:translateX(3px); }
.contact-ripple{
  position:absolute; border-radius:50%; background:rgba(255,255,255,0.45);
  width:12px; height:12px; margin:-6px 0 0 -6px; pointer-events:none;
  animation:contact-ripple-anim 0.6s ease-out forwards;
}
@keyframes contact-ripple-anim{
  from{ transform:scale(0); opacity:0.6; }
  to{ transform:scale(14); opacity:0; }
}

/* ---------- Map + info card ---------- */
.contact-info-card{ display:flex; flex-direction:column; }
.contact-map-frame{
  position:relative; width:100%; aspect-ratio:4/3; border-radius:10px; overflow:hidden;
  border:1px solid var(--line); margin-top:8px; margin-bottom:28px; background:var(--teal-100);
}
.contact-map-frame iframe{ width:100%; height:100%; display:block; filter:grayscale(15%) contrast(1.05); }

.contact-map-marker{
  position:absolute; top:50%; left:50%; transform:translate(-50%, -100%);
  animation:contact-marker-bounce 1.8s ease-in-out infinite;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,0.45));
}
.contact-map-marker-shadow{
  position:absolute; left:50%; bottom:-4px; width:16px; height:5px;
  transform:translateX(-50%); background:rgba(0,0,0,0.4); border-radius:50%;
  animation:contact-marker-shadow 1.8s ease-in-out infinite;
}
@keyframes contact-marker-bounce{
  0%, 100%{ transform:translate(-50%, -100%) translateY(0); }
  50%{ transform:translate(-50%, -100%) translateY(-12px); }
}
@keyframes contact-marker-shadow{
  0%, 100%{ transform:translateX(-50%) scale(1); opacity:0.5; }
  50%{ transform:translateX(-50%) scale(0.6); opacity:0.25; }
}
@media (prefers-reduced-motion: reduce){
  .contact-map-marker, .contact-map-marker-shadow{ animation:none; }
}

.contact-details{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; }
.contact-details li{ font-size:14px; line-height:1.6; color:var(--ink); border-top:1px solid var(--line); padding-top:14px; }
.contact-details li:first-child{ border-top:none; padding-top:0; }
.contact-detail-label{
  display:block; font-family:var(--mono); font-size:10px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--teal-700); margin-bottom:6px;
}
.contact-details a{ text-decoration:none; transition:color 0.2s ease; }
.contact-details a:hover{ color:var(--teal-500); }

/* ---------- Quick Connect (interactive on hover) ---------- */
.quick-connect{ padding:64px 0 84px; border-top:1px solid var(--line); }
.quick-connect-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; margin-top:36px;
}
.qc-card{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px;
  background:rgba(0,217,240,0.03); border:1px solid var(--line); border-radius:10px;
  padding:32px 20px; text-decoration:none; color:var(--ink);
  transition:transform 0.3s ease, border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.qc-card:hover{
  transform:translateY(-6px);
  border-color:var(--teal-500);
  background:rgba(0,217,240,0.06);
  box-shadow:0 14px 28px rgba(0,217,240,0.15);
}
.qc-icon{
  width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--teal-700); color:var(--ink);
  transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1), background 0.3s ease, box-shadow 0.3s ease;
}
.qc-card:hover .qc-icon{
  transform:scale(1.15) rotate(-8deg);
  background:var(--teal-500); color:var(--black);
  box-shadow:0 0 18px rgba(0,217,240,0.55);
}
.qc-label{
  font-family:var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--teal-700); transition:color 0.3s ease;
}
.qc-card:hover .qc-label{ color:var(--teal-500); }
.qc-value{ font-size:14px; color:var(--ink); opacity:0.85; }

/* ---------- Scroll-progress Back-to-Top button (engagement) ---------- */
.scroll-top-btn{
  position:fixed; right:24px; bottom:24px; z-index:200;
  width:52px; height:52px; border-radius:50%; border:none; cursor:pointer;
  background:var(--black); display:flex; align-items:center; justify-content:center;
  color:var(--ink);
  opacity:0; transform:translateY(12px) scale(0.9); pointer-events:none;
  transition:opacity 0.3s ease, transform 0.3s ease, box-shadow 0.25s ease;
  box-shadow:0 6px 18px rgba(0,0,0,0.35);
}
.scroll-top-btn.is-visible{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.scroll-top-btn:hover{ box-shadow:0 10px 24px rgba(0,217,240,0.3); }
.scroll-top-btn:hover .scroll-arrow{ transform:translateY(-2px); }
.scroll-arrow{ position:relative; z-index:2; transition:transform 0.25s ease; }
.scroll-ring{
  position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg);
}
.scroll-ring-bg{ fill:none; stroke:var(--line); stroke-width:2.5; }
.scroll-ring-fg{
  fill:none; stroke:var(--teal-500); stroke-width:2.5; stroke-linecap:round;
  transition:stroke-dashoffset 0.1s linear;
}
@media (max-width:560px){
  .scroll-top-btn{ right:16px; bottom:16px; width:48px; height:48px; }
}

/* ---------- Footer (match Home page) ---------- */
footer{ padding:40px 0; background:var(--teal-900); color:rgba(0,217,240,0.7); }
footer .brand{ color:var(--ink); }
.footer-logo{ height:32px; width:auto; display:block; }
.footer-contact{ font-size:13px; line-height:1.7; text-align:right; }
.footer-contact a{ color:rgba(0,217,240,0.7); text-decoration:none; }
.footer-contact a:hover{ color:var(--ink); }
.footer-row{ display:flex; justify-content:space-between; align-items:center; font-size:13px; flex-wrap:wrap; gap:12px; }
@media (max-width:720px){
  .footer-row{ flex-direction:column; align-items:flex-start; text-align:left; }
  .footer-contact{ text-align:left; }
}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .contact-grid{ grid-template-columns:1fr; gap:40px; }
  .nav-links{ display:none; }
  .quick-connect-grid{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .wrap{ padding:0 20px; }
  .form-row{ grid-template-columns:1fr; }
  .contact-hero{ padding:56px 0 48px; }
  .contact-section{ padding:56px 0; }
  .contact-form-card{ padding:28px; }
}/* End custom CSS */