/* ==========================================================
   Contact forms dev by M.Salman | AS Whatsapp Contact
   Same design as the original HTML/CSS. Scoped to .asw
   ========================================================== */
@keyframes ascf-rise{from{opacity:0;transform:translateY(24px)}}

.asw{
  --blue:#094E91;--yellow:#F4C223;--yellow-dark:#DCAB0E;--on-yellow:#fff;
  --ink:#0C0C0C;--navy:#06305A;--cream:#FFF6D9;--text:#3B4656;
  --head:'Sora',system-ui,sans-serif;--body:'DM Sans',system-ui,sans-serif;
  font-family:var(--body);font-size:17px;line-height:1.65;color:var(--text);overflow-x:clip;-webkit-font-smoothing:antialiased;
}
.asw *,.asw *::before,.asw *::after{box-sizing:border-box}
body .asw a{color:inherit;text-decoration:none}
body .asw :is(h1,h2,h3,h4){font-family:var(--head);color:var(--ink);line-height:1.18;letter-spacing:-.02em;margin:0;font-weight:700}
body .asw p{margin:0}
.asw :focus-visible{outline:3px solid var(--yellow);outline-offset:3px;border-radius:6px}
.asw .i{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.asw .ci{display:inline-flex;align-items:center;justify-content:center;flex:none;font-size:var(--ic,18px);width:1em;height:1em;line-height:1}
.asw .ci svg,.asw .ci i{width:1em;height:1em;font-size:1em;fill:currentColor;stroke:none}
.asw .ib{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:14px;flex:none}
.asw .ib.lg{width:58px;height:58px;border-radius:18px}
.asw .ib.lg .i{width:26px;height:26px}
.asw .ib.lg .ci{--ic:26px}

.asw .wrap{width:min(1200px,92%);margin-inline:auto}
.asw .sec{padding:104px 0}
.asw .actions{display:flex;flex-wrap:wrap;gap:14px}

/* buttons */
.asw .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border-radius:14px;font:600 15px/1.2 var(--head);border:2px solid transparent;cursor:pointer;transition:background .2s,transform .2s,color .2s,box-shadow .2s;text-align:center;text-transform:none;letter-spacing:0}
.asw .btn .i{width:18px;height:18px}
.asw .btn .ci{--ic:18px}
.asw .btn:hover{transform:translateY(-2px)}
/* yellow bg + white text/icon */
.asw .btn-accent{background:var(--yellow);color:var(--on-yellow);box-shadow:0 10px 24px rgba(244,194,35,.35)}
.asw .btn-accent:hover{background:var(--yellow-dark);color:var(--on-yellow)}
.asw .btn-light{background:#fff;color:var(--ink)}
.asw .btn-light:hover{background:var(--cream);color:var(--ink)}

/* ---------- whatsapp bar ---------- */
.asw .wbar{position:relative;display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap;background:linear-gradient(120deg,var(--navy),var(--blue));border-radius:36px;padding:44px 52px;color:#fff;overflow:hidden;box-shadow:0 30px 70px rgba(9,78,145,.28)}
.asw .wbar::before{content:"";position:absolute;right:-70px;top:-90px;width:260px;height:260px;border-radius:60px;border:36px solid rgba(244,194,35,.16);transform:rotate(18deg)}
.asw .wbar>*{position:relative}
.asw .wt{display:flex;align-items:center;gap:20px}
/* yellow icon box + white icon */
.asw .wt .ib{background:var(--yellow);color:var(--on-yellow);flex:none}
body .asw .wbar h2{color:#fff;font-size:clamp(24px,3vw,34px);letter-spacing:-.03em}
body .asw .wbar p{color:rgba(255,255,255,.82);margin-top:6px}

@supports (animation-timeline:view()){
  .asw .wbar{animation:ascf-rise both linear;animation-timeline:view();animation-range:entry 0% entry 35%}
}

@media (max-width:640px){
  .asw .sec{padding:72px 0}
  .asw .actions .btn{flex:1 1 100%}
  .asw .wbar{padding:30px 22px;border-radius:28px}
  .asw .wt{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .asw *,.asw *::before,.asw *::after{animation:none!important;transition:none!important}
}