/* ---- Contact Hero (matches About style) ---- */
.contact-hero-section{
  position: relative;
  display: grid;
  place-items: center;
  min-height: 40vh;
  padding: 40px 16px;
  color: #fff;
  text-align: center;
  background:
    
    url('image3/ct.jpg')
    center/cover no-repeat;             /* apni image laga do */
}

.contact-hero-section__content{
  max-width: 820px;
}

.contact-hero-section h1{
  margin: 0 0 8px;
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: clamp(34px, 5vw, 64px);
}

.contact-hero-section p{
  margin: 0;
  font-size: clamp(16px, 1.1vw, 18px);
  line-height: 1.65;
  opacity: .95;
  max-width: 58ch;
  margin-inline: auto;
}

/* optional CTA (kept commented in HTML) */
.contact-hero-section__cta{
  display:inline-block; margin-top:14px;
  padding:12px 18px; border-radius:12px; font-weight:800;
  background:#3d7afe; color:#fff; text-decoration:none;
  box-shadow:0 12px 28px rgba(61,122,254,.35);
}
.contact-hero-section__cta:hover{ transform: translateY(-2px); }

/* responsive tweak */
@media (max-width:640px){
  .contact-hero-section{ min-height: 80vh; padding: 56px 14px; }
}



/* section 1 */

.contact-section-1-wrap{ 
  max-width:1100px; margin:60px auto; padding:24px; 
}
.contact-section-1-card{
  display:grid; grid-template-columns: 1.1fr 1fr;
  background: linear-gradient(180deg, #0b1222, #0b1222) padding-box,
             linear-gradient(135deg, #22c55e, #06b6d4) border-box;
  border: 1px solid transparent; border-radius: var(--radius); overflow:hidden;
  box-shadow: 0 20px 60px #0007;
}
.contact-section-1-media{
  background:url('https://images.unsplash.com/photo-1501183638710-841dd1904471?q=80&w=1600&auto=format&fit=crop') center/cover no-repeat;
  min-height:400px; position:relative;
}
.contact-section-1-media::after{
  content:"Find your perfect space"; position:absolute; left:20px; bottom:20px;
  background:#ffffff; padding:10px 14px; border-radius:12px; font-weight:600; letter-spacing:.2px
}

/* --- HIGH-CONTRAST FORM CARD --- */
.contact-section-1-form{
  padding:28px; display:grid; gap:18px;
  background:#ffffff;                 /* light card for readability */
  color:#0f172a;                      /* dark text */
  backdrop-filter:none;               /* remove blur that dims text */
}
.contact-section-1-title{ 
  font-size:clamp(22px,2.2vw,28px); font-weight:700;align-items:center; gap:10px; 
  color:#0b1222;
}
.contact-section-1-title i{ color:var(--accent) }
.contact-section-1-subtitle{ color:#334155; font-size:14px; margin-top:-6px }

.contact-section-1-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.contact-section-1-field{ display:grid; gap:8px }
.contact-section-1-field label{ font-size:13px; color:#0f172a; }

.contact-section-1-input, 
.contact-section-1-select, 
.contact-section-1-textarea{
  width:100%; padding:12px 14px; border-radius:12px; 
  border:1px solid #cbd5e1;          /* lighter border */
  background:#ffffff;                 /* light input bg */
  color:#0f172a; 
  outline:none; transition:.2s ease;
}
.contact-section-1-input::placeholder,
.contact-section-1-textarea::placeholder{
  color:#64748b;                      /* legible placeholders */
}

.contact-section-1-input:focus,
.contact-section-1-select:focus,
.contact-section-1-textarea:focus{
  border-color:var(--accent); box-shadow:0 0 0 6px var(--ring);
}
.contact-section-1-textarea{ min-height:110px; resize:vertical }

/* --- Budget range panel (lighter) --- */
.contact-section-1-range-wrap{ 
  padding:14px; border:1px solid #e2e8f0; border-radius:14px; background:#f8fafc; 
}
.contact-section-1-range-top{ 
  display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px 
}
.contact-section-1-pill{ 
  font-size:12px; color:#0f766e; background:#d1fae5; padding:6px 10px; border-radius:999px; 
  border:1px solid #99f6e4 
}
.contact-section-1-budget-display{ font-weight:700 }
.contact-section-1-ranges{ position:relative; height:6px; margin:24px 6px 6px; }
.contact-section-1-ranges input[type="range"]{
  position:absolute; left:0; right:0; width:100%; pointer-events:none; appearance:none; background:transparent; height:0;
}
.contact-section-1-ranges input[type="range"]::-webkit-slider-thumb{
  appearance:none; pointer-events:auto; width:18px; height:18px; border-radius:50%;
  background:linear-gradient(135deg, var(--accent), var(--accent-2)); border:2px solid #ffffff; box-shadow:0 0 0 4px #0006;
}
.contact-section-1-ranges input[type="range"]::-moz-range-thumb{
  pointer-events:auto; width:18px; height:18px; border-radius:50%;
  background:linear-gradient(135deg, var(--accent), var(--accent-2)); border:2px solid #ffffff;
}
.contact-section-1-track{
  position:absolute; left:0; right:0; top:50%; transform:translateY(-50%);
  height:6px; border-radius:999px; background:#e2e8f0;   /* lighter track */
}
.contact-section-1-range-progress{
  position:absolute; height:6px; border-radius:999px;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  top:50%; transform:translateY(-50%);
}

/* Actions / Note / Button */
.contact-section-1-actions{ display:flex; gap:12px; align-items:center; justify-content:flex-end; margin-top:6px }
.contact-section-1-btn{
  border:none; cursor:pointer; padding:12px 18px; border-radius:14px; font-weight:700; color:#052e1b; /* readable on gradient */
  background:linear-gradient(135deg,#22c55e,#14b8a6); box-shadow:0 10px 30px #14b8a655;
  transition:transform .15s ease, box-shadow .2s ease;
}
.contact-section-1-btn:hover{ transform:translateY(-2px); box-shadow:0 16px 38px #14b8a666 }
.contact-section-1-note{ font-size:9px; color:#475569 }

/* Responsive */
@media (max-width:900px){
  .contact-section-1-card{ grid-template-columns:1fr }
  .contact-section-1-media{ min-height:240px }
}
@media (max-width:640px){
  .contact-section-1-grid{ grid-template-columns:1fr }
  .contact-section-1-actions{ justify-content:stretch }
  .contact-section-1-btn{ width:100% }
}




/* scetion 2 css */
.contact-section-2-wrap{
  max-width:1100px;
  margin:40px auto 56px;   /* was: 40px auto 0;  -> added bottom gap */

  position:relative;       /* for spacer pseudo */
}
.contact-section-2-wrap::after{
  content:"";
  /* display:block; */
  height:40px;             /* extra spacer to avoid margin-collapsing */
}

/* Card */
.contact-section-2-card{
  background:linear-gradient(180deg,#fff,#fff) padding-box,
             linear-gradient(135deg,var(--cs2-accent),var(--cs2-accent-2)) border-box;
  border:1px solid transparent;
  border-radius:var(--cs2-radius);
  box-shadow:0 20px 60px rgba(0,0,0,.18);
  overflow:hidden;
}

/* Header */
.contact-section-2-head{ padding:26px 26px 10px; }
.contact-section-2-title{
  margin:0; font-size:clamp(22px,2.2vw,28px); font-weight:800; color:var(--cs2-text);
  display:flex; align-items:center; gap:10px;
}
.contact-section-2-title i{ color:var(--cs2-accent) }
.contact-section-2-subtitle{ margin:6px 0 12px; color:var(--cs2-muted); }

.contact-section-2-meta{ display:flex; gap:10px; flex-wrap:wrap; }
.contact-section-2-pill{
  display:inline-flex; align-items:center; gap:8px;
  background:#f0fdfa; color:#065f46; border:1px solid #99f6e4;
  padding:8px 12px; border-radius:999px; font-size:13px;
}

/* Accordion */
.contact-section-2-accordion{ padding:0 10px; }
.contact-section-2-item{ border-top:1px solid var(--cs2-border); }
.contact-section-2-item:last-child{ border-bottom:1px solid var(--cs2-border); }

.contact-section-2-trigger{
  width:100%; text-align:left; padding:18px 16px; background:#fff; color:var(--cs2-text);
  border:none; outline:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  font-weight:700; font-size:16px;
}
.contact-section-2-trigger i{ transition:transform .2s ease; }
.contact-section-2-trigger[aria-expanded="true"] i{ transform:rotate(-180deg); }

.contact-section-2-content{
  padding:0 16px 18px; color:#0f172a; font-size:15px; line-height:1.6;
  background:#fff;
}
.contact-section-2-list{ margin:8px 0 0 18px; }
.contact-section-2-list li{ margin:6px 0; }

/* CTA footer */
.contact-section-2-cta{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:16px; background:#f8fafc; border-top:1px solid var(--cs2-border);
}
.contact-section-2-note{ color:#334155; display:flex; align-items:center; gap:8px; }
.contact-section-2-btn{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  padding:12px 16px; border-radius:14px; font-weight:800; color:#052e1b;
  background:linear-gradient(135deg,var(--cs2-accent),var(--cs2-accent-2));
  box-shadow:0 10px 30px rgba(20,184,166,.35);
}
.contact-section-2-btn:hover{ filter:brightness(1.05); }

/* Ensure next section also has breathing room */
.contact-section-2-wrap + section{ margin-top:24px; }

/* Responsive */
@media (max-width:640px){
  .contact-section-2-wrap{
    padding:0 16px 8px;
    margin:40px auto 72px;  /* more bottom gap on small screens */
  }
  .contact-section-2-wrap::after{
    height:48px;            /* bigger spacer on mobile */
  }
  .contact-section-2-cta{ flex-direction:column; align-items:stretch }
  .contact-section-2-btn{ justify-content:center; width:100% }
  .contact-section-2-wrap + section{ margin-top:32px; }
}



/* section 3 css */
 .contact-section-3-wrap{
    max-width:1200px;
    margin:60px auto;
    padding:0 24px 60px;
  }

  .contact-section-3-card{
    display:grid;
    grid-template-columns:0.8fr 1.2fr;
    background:var(--cs3-bg);
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 20px 60px rgba(0,0,0,.12);
    border:1px solid var(--cs3-border);
  }

  /* Left content */
  .contact-section-3-info{
    padding:36px 28px;
    background:#fff;
  }

  .contact-section-3-title{
    font-size:24px; font-weight:800; color:var(--cs3-text);
    display:flex; align-items:center; gap:10px;
  }
  .contact-section-3-title i{ color:var(--cs3-accent); }

  .contact-section-3-details{
    list-style:none; padding:0; margin:18px 0 28px;
  }
  .contact-section-3-details li{
    margin:10px 0; font-size:15px; color:var(--cs3-muted);
    display:flex; align-items:center; gap:10px;
  }
  .contact-section-3-details a{
    color:var(--cs3-text); text-decoration:none;
  }
  .contact-section-3-details a:hover{ text-decoration:underline; }

  .contact-section-3-subhead{
    margin-top:24px; font-size:18px; font-weight:700; color:var(--cs3-text);
  }

  .contact-section-3-hours{
    width:100%; border-collapse:collapse; margin-top:10px;
  }
  .contact-section-3-hours td{
    padding:6px 4px; font-size:15px; color:var(--cs3-muted);
  }
  .contact-section-3-hours td:last-child{ text-align:right; color:var(--cs3-text); font-weight:600; }

  /* Map */
  .contact-section-3-map{
    min-height:400px;
  }
  .contact-section-3-map iframe{
    width:100%; height:100%;
  }

  /* Responsive */
  @media(max-width:900px){
    .contact-section-3-card{
      grid-template-columns:1fr;
    }
    .contact-section-3-map{
      order:-1;
      height:350px;
    }
  }
  @media(max-width:640px){
    .contact-section-3-wrap{ padding:0 16px 72px; }
    .contact-section-3-info{ padding:24px 20px; }
    .contact-section-3-title{ font-size:22px; }
  }