/* contact.css - Sirf Contact page (header.css ke :root variables aur .btn use karta hai) */

/* ---------- Page banner (~230px, ek hi image) ---------- */
.pbanner{position:relative;height:230px;overflow:hidden;color:#fff;display:flex;align-items:center;background:var(--m2);border-bottom:4px solid var(--g)}
.pb-bg{position:absolute;inset:0;background-image:url('../images/slide2.jpg'),linear-gradient(115deg,#1a0a10,#5e0d26 70%);background-size:cover;background-position:center;transform:scale(1.15);animation:zoomOut 8s ease-out forwards}
@keyframes zoomOut{to{transform:scale(1)}}
.pbanner:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(95deg,rgba(40,6,18,.94) 0%,rgba(94,13,38,.78) 50%,rgba(94,13,38,.35) 100%)}
.pb-ring{position:absolute;z-index:1;right:-110px;top:-150px;width:380px;height:380px;border-radius:50%;border:56px solid rgba(201,162,75,.16);animation:spin 30s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.pb-in{position:relative;z-index:2;width:100%}
.pb-in>*{opacity:0;transform:translateY(24px);animation:up .7s cubic-bezier(.2,.7,.2,1) forwards}
.pb-in>:nth-child(2){animation-delay:.15s}.pb-in>:nth-child(3){animation-delay:.3s}
@keyframes up{to{opacity:1;transform:none}}
.crumbs{display:inline-flex;align-items:center;gap:10px;font-size:13px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);padding:5px 16px;border-radius:30px;backdrop-filter:blur(4px)}
.crumbs a:hover{color:var(--g)}
.crumbs .sep{font-size:9px;opacity:.7}
.crumbs span{color:var(--g);font-weight:600}
.pb-in h1{font-size:clamp(32px,5vw,46px);line-height:1.15;margin:12px 0 4px;font-weight:700}
.pb-in h1 em{color:var(--g);font-style:normal}
.pb-in p{font-size:15px;opacity:.9;max-width:560px}

/* ---------- Common ---------- */
.sec{padding:70px 0 80px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.eyebrow{display:block;color:var(--g);font-weight:700;letter-spacing:2px;font-size:13px}
h2{font-size:clamp(24px,3.4vw,32px);line-height:1.25;margin:8px 0 10px}
.btn i{transition:transform .25s}
.btn.gold{background:var(--g);border-color:var(--g);color:#2a1d00}
.btn.gold:hover{background:#fff;border-color:#fff;color:var(--m)}

/* ---------- Info cards (overlap banner) ---------- */
.info-wrap{position:relative;z-index:5;margin-top:-52px}
.icard{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px 20px;text-align:center;box-shadow:0 14px 40px rgba(0,0,0,.1);transition:.3s;display:block}
.icard i{width:58px;height:58px;border-radius:50%;background:linear-gradient(135deg,var(--m),var(--m2));color:var(--g);display:grid;place-items:center;margin:0 auto 14px;font-size:22px;transition:transform .5s}
.icard b{display:block;font-size:16px;margin-bottom:4px}
.icard span{font-size:14px;color:var(--mut);line-height:1.5;word-break:break-word}
.icard:hover{transform:translateY(-8px);border-color:var(--g)}
.icard:hover i{transform:rotateY(360deg)}

/* ---------- Form + side ---------- */
.cgrid{display:grid;grid-template-columns:1.6fr 1fr;gap:34px;align-items:start}
.fcard{background:#fff;border:1px solid var(--line);border-radius:22px;padding:38px 36px;box-shadow:0 14px 44px rgba(0,0,0,.07)}
.lead{color:var(--mut);margin-bottom:22px;font-size:14.5px}
#cform{display:grid;grid-template-columns:1fr 1fr;gap:18px 18px}
.full{grid-column:1/-1}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}
.field label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.in{position:relative}
.in>i{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--g);font-size:14px;pointer-events:none;transition:.3s}
.in.ta>i{top:18px;transform:none}
.in input,.in select,.in textarea{width:100%;padding:13px 14px 13px 42px;border:1.5px solid var(--line);border-radius:12px;font:14px Poppins,sans-serif;color:var(--ink);background:#fff;transition:.3s;appearance:none}
.in select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238a1538' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:38px;cursor:pointer}
.in textarea{min-height:130px;resize:vertical}
.in input::placeholder,.in textarea::placeholder{color:#a3a8b3}
.in input:focus,.in select:focus,.in textarea:focus{outline:0;border-color:var(--m);box-shadow:0 0 0 4px rgba(138,21,56,.12)}
.in:focus-within>i{color:var(--m)}
.row{display:flex;justify-content:space-between;gap:10px}
.msg{display:block;min-height:18px;font-size:12.5px;color:#c0392b;margin-top:4px}
.counter{font-size:12px;color:var(--mut);margin-top:4px;white-space:nowrap}
.field.err input,.field.err select,.field.err textarea{border-color:#c0392b;background:#fff8f7}
.field.err .chk span{color:#c0392b}
.chk{display:flex;gap:10px;align-items:flex-start;cursor:pointer;font-size:13.5px;color:var(--mut);font-weight:400!important;margin:0!important}
.chk input{width:18px;height:18px;margin-top:2px;accent-color:var(--m);flex-shrink:0;cursor:pointer}
.consent .msg{min-height:0}
.send{width:max-content;padding:14px 34px;grid-column:1/-1;display:inline-flex;align-items:center;gap:10px}
.send:hover i{transform:translateX(4px) rotate(-8deg)}
.send.loading{pointer-events:none;opacity:.85}
.send.loading i{animation:fly .8s ease-in-out infinite}
@keyframes fly{50%{transform:translate(6px,-6px)}}

/* alerts */
.alert{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:14px;margin-bottom:22px;font-size:14px;animation:up .5s forwards}
.alert i{font-size:22px;margin-top:2px}
.alert.ok{background:#eafaf1;border:1px solid #b7e4c9;color:#1e6b43}
.alert.bad{background:#fdf0ee;border:1px solid #f2c3bc;color:#a02f22}
.alert a{text-decoration:underline;font-weight:600}

/* side panel */
.side{position:sticky;top:96px}
.panel{background:linear-gradient(150deg,var(--m),var(--m2));color:#fff;border-radius:22px;padding:34px 30px;position:relative;overflow:hidden}
.panel:before{content:"";position:absolute;right:-70px;top:-70px;width:200px;height:200px;border-radius:50%;border:34px solid rgba(201,162,75,.18)}
.panel h3{font-size:21px;margin-bottom:16px;position:relative}
.perks{margin-bottom:24px;position:relative}
.perks li{display:flex;gap:12px;align-items:center;margin-bottom:12px;font-size:14.5px}
.perks i{width:24px;height:24px;border-radius:50%;background:rgba(201,162,75,.25);color:var(--g);display:grid;place-items:center;font-size:11px;flex-shrink:0}
.wa{display:flex;justify-content:center;align-items:center;gap:10px;font-size:15px;position:relative}
.wa i{font-size:20px}
.p-mail{margin:24px 0 18px;padding-top:20px;border-top:1px solid rgba(255,255,255,.2);position:relative}
.p-mail small{display:block;color:var(--g);letter-spacing:1.5px;font-weight:600;font-size:12px;margin-bottom:4px}
.p-mail a{display:block;font-size:14.5px;opacity:.95;word-break:break-all}
.p-mail a:hover{color:var(--g)}
.social{display:flex;gap:10px;position:relative}
.social a{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.35);display:grid;place-items:center;transition:.3s}
.social a:hover{background:var(--g);border-color:var(--g);color:#2a1d00;transform:translateY(-4px)}

/* map */
.mapsec{padding:0 0 80px}
.mapbox{border-radius:22px;overflow:hidden;border:1px solid var(--line);box-shadow:0 14px 44px rgba(0,0,0,.08);height:380px;position:relative}
.mapbox:before{content:"";position:absolute;inset:0;border-radius:22px;box-shadow:inset 0 0 0 4px rgba(201,162,75,.35);pointer-events:none;z-index:1}
.mapbox iframe{width:100%;height:100%;border:0;display:block}

/* scroll reveal */
.js .reveal{opacity:0;transform:translateY(40px);transition:opacity .8s,transform .8s}
.js .reveal.left{transform:translateX(-50px)}
.js .reveal.right{transform:translateX(50px)}
.js .reveal.in{opacity:1;transform:none}
.js .icard.reveal.in{transition:transform .3s,border-color .3s,opacity .8s}

/* responsive */
@media(max-width:960px){
.grid4{grid-template-columns:1fr 1fr}
.cgrid{grid-template-columns:1fr}
.side{position:static}
}
@media(max-width:560px){
.pbanner{height:210px}
.sec{padding:56px 0 60px}
.grid4{grid-template-columns:1fr}
.info-wrap{margin-top:-40px}
.fcard{padding:28px 20px}
#cform{grid-template-columns:1fr}
.send{width:100%;justify-content:center}
.mapbox{height:300px}
.mapsec{padding-bottom:60px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.pb-in>*,.js .reveal,.alert{opacity:1;transform:none}}