/* ==========================================================================
   DevnexHub — CONTACT page (contact.php). Every class is prefixed `ct-`.
   ========================================================================== */
.page-contact main{overflow:hidden}
section{position:relative}

/* ======================= HERO ======================= */
.ct-hero{padding:70px 0 130px;background:linear-gradient(115deg,#fff 0%,#f4f8ff 38%,#dbe8ff 70%,#a9c5fb 100%);overflow:hidden}
.ct-hero>canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.8}
.ct-orb{position:absolute;border-radius:50%;filter:blur(50px);pointer-events:none}
.ct-orb.o1{width:340px;height:340px;right:-60px;top:-90px;background:rgba(20,101,243,.3)}
.ct-orb.o2{width:260px;height:260px;left:30%;bottom:-120px;background:rgba(124,92,255,.18)}
.ct-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center;position:relative;z-index:1}
.ct-pill{display:inline-block;padding:8px 30px;border:1.5px solid var(--dx-blue);border-radius:999px;font:600 13px 'Inter',sans-serif;color:var(--dx-blue);background:rgba(255,255,255,.6);margin-bottom:30px}
.ct-pop{opacity:0;transform:translateY(24px);animation:ctPop .85s var(--dx-ease) forwards;animation-delay:var(--d,.05s)}
@keyframes ctPop{to{opacity:1;transform:none}}
.ct-h1{font:600 clamp(34px,4.1vw,56px)/1.18 'Poppins',sans-serif;color:#0f1b2d;margin-bottom:26px}
.ct-line{display:block;overflow:hidden;padding-bottom:6px}
.ct-line>span{display:inline-block;transform:translateY(115%);animation:ctLine 1s var(--dx-ease) forwards;animation-delay:calc(.12s + var(--i)*.16s)}
.ct-line em{font-style:normal;color:var(--dx-blue);background:linear-gradient(90deg,#1465F3,#5b9bff,#1465F3);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:ctGrad 5s linear infinite}
@keyframes ctLine{to{transform:none}}
@keyframes ctGrad{to{background-position:-200% 0}}
.ct-lead{font-size:18px;line-height:1.65;color:#1f2937;max-width:560px;margin-bottom:30px}
.ct-hero-media{position:relative;display:grid;place-items:center}
.ct-glow{position:absolute;width:74%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.9),rgba(255,255,255,0) 70%);animation:ctBreath 5s ease-in-out infinite}
@keyframes ctBreath{0%,100%{transform:scale(.95);opacity:.8}50%{transform:scale(1.08);opacity:1}}
.ct-hero-img{position:relative;width:100%;max-width:520px;animation:ctFloat 6s ease-in-out infinite;filter:drop-shadow(0 30px 36px rgba(20,101,243,.28))}
@keyframes ctFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-16px) rotate(.6deg)}}
.ct-spark{position:absolute;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 0 18px 6px rgba(255,255,255,.9);animation:ctTwinkle 3s ease-in-out infinite}
.ct-spark.s1{left:10%;top:22%}.ct-spark.s2{right:6%;top:36%;animation-delay:-1s}.ct-spark.s3{left:22%;bottom:12%;animation-delay:-2s}
@keyframes ctTwinkle{0%,100%{transform:scale(.4);opacity:.4}50%{transform:scale(1.2);opacity:1}}

/* ======================= FEATURE MARQUEE ======================= */
.ct-features{margin-top:-70px;z-index:3;padding-bottom:10px}
.dx-marquee{overflow:hidden;padding:14px 0 26px}
.ct-feature{flex:none;width:318px;margin-right:34px;display:flex;gap:14px;align-items:center;background:#fff;border-radius:10px;padding:18px 18px;
  box-shadow:0 8px 22px -8px rgba(15,27,45,.3);transition:transform .35s var(--dx-ease),box-shadow .35s}
.ct-feature:hover{transform:translateY(-8px);box-shadow:0 22px 34px -12px rgba(20,101,243,.45)}
.ct-feature-ic{flex:none;width:50px;height:50px;border-radius:50%;background:#f1f6ff;display:grid;place-items:center;transition:transform .5s var(--dx-ease)}
.ct-feature:hover .ct-feature-ic{transform:rotate(-12deg) scale(1.15)}
.ct-feature-ic img{width:28px;height:28px;object-fit:contain}
.ct-feature h3{font:600 15px/1.2 'Inter',sans-serif;color:#0f1b2d;margin-bottom:5px}
.ct-feature p{font-size:12.5px;line-height:1.45;color:#1f2937;text-align:justify}

/* ======================= PROCESS ======================= */
.ct-process{padding:40px 0 50px;background:#fff}
.ct-steps-band{background:#efefef;padding:44px 22px 36px;border-radius:6px}
.ct-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.ct-step{position:relative}
.ct-step-top{display:flex;justify-content:space-between;align-items:flex-end;position:relative;z-index:2;margin:0 18px -26px}
.ct-step-no{position:relative;background:#0b4d73;color:#fff;border-radius:12px;padding:9px 22px 8px;font:700 19px/1.1 'Inter',sans-serif;text-align:center;
  box-shadow:0 8px 16px -6px rgba(11,77,115,.6);transform:translateY(-30px) scale(.4);opacity:0;transition:transform .7s cubic-bezier(.34,1.7,.5,1),opacity .4s;transition-delay:calc(.2s*var(--i) + .1s)}
.ct-step-no::after{content:"";position:absolute;left:50%;bottom:-6px;width:12px;height:12px;background:#0b4d73;transform:translateX(-50%) rotate(45deg)}
.ct-step-no small{display:block;font:500 10px 'Inter',sans-serif;opacity:.9}
.ct-step-ic{width:68px;height:68px;background:#fff;border-radius:6px;display:grid;place-items:center;box-shadow:0 8px 16px -8px rgba(15,27,45,.35);
  transform:translateY(-30px) rotate(-20deg) scale(.4);opacity:0;transition:transform .8s cubic-bezier(.34,1.5,.5,1),opacity .4s;transition-delay:calc(.2s*var(--i) + .25s)}
.ct-step-ic svg{width:34px;height:34px}
.ct-step-card{background:#fff;border-radius:6px;padding:40px 18px 20px;min-height:200px;box-shadow:0 10px 20px -10px rgba(15,27,45,.35);
  transform:translateY(46px);opacity:0;transition:transform .8s var(--dx-ease),opacity .7s,box-shadow .3s;transition-delay:calc(.2s*var(--i) + .2s);position:relative;overflow:hidden}
.ct-step-card::after{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:linear-gradient(90deg,#0b4d73,#1465F3);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--dx-ease)}
.ct-step:hover .ct-step-card::after{transform:scaleX(1)}
.ct-steps-band.is-in .ct-step-no,.ct-steps-band.is-in .ct-step-ic{transform:none;opacity:1}
.ct-steps-band.is-in .ct-step-card{transform:none;opacity:1}
.ct-step-card h3{display:flex;align-items:center;gap:8px;font:700 13.5px/1.25 'Inter',sans-serif;color:#0b4d73;margin-bottom:10px}
.ct-step-card h3 i{flex:none;width:14px;height:14px;border-radius:50%;background:#0b4d73;position:relative}
.ct-step-card h3 i::after{content:"";position:absolute;left:4px;top:3.5px;border:3px solid transparent;border-left:4.5px solid #fff}
.ct-step-card p{font-size:10.5px;line-height:1.55;color:#555;text-align:justify}

/* ======================= FORM + INFO ======================= */
.ct-form-sec{padding:30px 0 50px;background:#fff}
.ct-form-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:46px;align-items:start}
.ct-form-sec .dx-form{padding:24px 24px 26px;border-radius:14px}
.ct-form-sec .dx-input select{background-image:url("../images/icons/icon_down.png")}
.ct-form-sec .dx-input select:required:invalid{color:#7b8696}
.ct-side{display:flex;flex-direction:column;gap:6px}
.ct-meeting{position:relative;display:grid;place-items:center}
.ct-meeting-glow{position:absolute;width:70%;height:30%;bottom:6%;border-radius:50%;background:radial-gradient(ellipse,rgba(20,101,243,.28),transparent 70%);filter:blur(14px);animation:ctBreath 5s ease-in-out infinite}
.ct-meeting img{position:relative;width:100%;max-width:470px;animation:ctFloat 7s ease-in-out infinite}
.ct-touch{padding:22px 22px 24px;border-radius:14px;background:#fff}
.ct-touch h3{font:600 19px 'Poppins',sans-serif;color:#000}
.ct-touch>p{font-size:12.5px;color:#111;margin:2px 0 14px}
.ct-touch ul{display:flex;flex-direction:column;gap:14px;margin-bottom:20px}
.ct-touch li{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:7px;background:#fff;box-shadow:0 5px 14px -4px rgba(15,27,45,.3);transition:box-shadow .3s}
.ct-touch li:hover{box-shadow:0 16px 26px -10px rgba(20,101,243,.45)}
.ct-ic{flex:none;width:42px;height:42px;border-radius:10px;background:#eaf1ff;display:grid;place-items:center}
.ct-ic img{width:22px;height:22px;object-fit:contain}
.ct-touch b{display:block;font:600 16px 'Poppins',sans-serif;color:#000;line-height:1.2}
.ct-touch li a,.ct-touch li span:not(.ct-ic){font-size:11px;color:#111}
.ct-touch li a:hover{color:var(--dx-blue)}
.ct-touch h4{font:600 19px 'Poppins',sans-serif;color:var(--dx-blue);margin-bottom:12px}
.ct-social{gap:12px;margin-top:0}
.ct-social a{width:30px;height:30px;padding:7px;background:var(--dx-blue)}

/* ======================= TESTIMONIALS ======================= */
.ct-testi{padding:20px 0 36px;background:#fff}
.ct-testi-grid{display:grid;grid-template-columns:.42fr 1.58fr;gap:30px;align-items:center}
.ct-testi-visual{position:relative;height:250px;border:1px solid #b9c1cd;border-radius:10px;overflow:hidden;background:linear-gradient(135deg,#f4f8ff,#e4eeff)}
.ct-testi-visual>canvas{position:absolute;inset:0;width:100%;height:100%}
.ct-ring{position:absolute;left:50%;top:50%;width:150px;height:150px;border-radius:50%;border:2px dashed rgba(20,101,243,.4);transform:translate(-50%,-50%);animation:ctSpin 20s linear infinite}
@keyframes ctSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.ct-avatar{position:absolute;left:50%;top:50%;width:96px;height:96px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);display:grid;place-items:center;
  box-shadow:0 14px 28px -8px rgba(20,101,243,.5);animation:ctFloat 5s ease-in-out infinite}
.ct-avatar img{width:84px;height:84px;border-radius:50%;object-fit:cover}
.ct-quote{position:absolute;left:18px;top:6px;font:700 72px/1 'Poppins',serif;color:rgba(20,101,243,.25);animation:ctFloat 6s ease-in-out infinite}
.ct-star{position:absolute;animation:ctFloat 4s ease-in-out infinite}
.ct-star img{width:20px;height:20px}
.ct-star.s1{right:18%;top:14%}.ct-star.s2{right:10%;bottom:26%;animation-delay:-1s}.ct-star.s3{left:16%;bottom:14%;animation-delay:-2s}.ct-star.s4{left:30%;top:12%;animation-delay:-3s}
.ct-testi-main .dx-testi-stage{height:222px}

/* ======================= FAQ ======================= */
.ct-faq{padding:30px 0 70px;background:#fff}
.ct-faq-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:40px;align-items:stretch}
.ct-faq-card{padding:28px 28px 16px;border-radius:18px}
.ct-faq-card .dx-faq-q{font-size:13px;padding:13px 14px}
.ct-map{position:relative;border-radius:12px;overflow:hidden;box-shadow:0 14px 34px -14px rgba(60,50,150,.4)}
.ct-map>img{width:100%;height:100%;object-fit:cover;display:block}
.ct-pulse,.ct-hub{position:absolute;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none}
.ct-pulse{width:10px;height:10px;background:#7c5cff}
.ct-pulse::before,.ct-pulse::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(124,92,255,.7);animation:ctPulse 2.4s ease-out infinite}
.ct-pulse::after{animation-delay:1.2s}
.ct-hub{width:62px;height:62px}
.ct-hub::before,.ct-hub::after{content:"";position:absolute;inset:0;border-radius:50%;background:rgba(20,101,243,.22);animation:ctHub 3s ease-out infinite}
.ct-hub::after{animation-delay:1.5s}
@keyframes ctPulse{0%{transform:scale(1);opacity:1}100%{transform:scale(4.4);opacity:0}}
@keyframes ctHub{0%{transform:scale(.8);opacity:.9}100%{transform:scale(2.3);opacity:0}}

/* ======================= RESPONSIVE ======================= */
@media (max-width:1199px){.ct-steps{grid-template-columns:repeat(2,1fr);row-gap:50px}}
@media (max-width:991px){
  .ct-hero{padding:46px 0 110px}
  .ct-hero-grid,.ct-form-grid,.ct-testi-grid,.ct-faq-grid{grid-template-columns:1fr}
  .ct-hero-media{max-width:420px;margin:0 auto}
  .ct-lead{font-size:16px}
  .ct-testi-visual{height:200px}
  .ct-map{min-height:240px}
  .ct-meeting{max-width:420px;margin:0 auto}
}
@media (max-width:640px){
  .ct-steps{grid-template-columns:1fr}
  .ct-feature{width:270px;margin-right:18px}
  .ct-form-sec .dx-form{padding:20px 16px}
  .ct-steps-band{padding:34px 12px 28px}
}
@media (prefers-reduced-motion:reduce){
  .ct-pop,.ct-line>span{animation:none!important;opacity:1!important;transform:none!important}
  .ct-line em{-webkit-text-fill-color:currentColor;background:none}
  .ct-step-no,.ct-step-ic,.ct-step-card{opacity:1;transform:none}
}

/* ---- polish pass ---- */
.ct-hero-grid{grid-template-columns:1.2fr .8fr}
.ct-h1{font-size:clamp(30px,3.6vw,52px)}
.ct-line{white-space:nowrap}
.ct-form-sec .dx-row{row-gap:0}
.ct-faq-grid{align-items:start}
.ct-map>img{height:auto}
@media (max-width:991px){.ct-line{white-space:normal}}
@media (max-width:991px){.ct-hero-grid{grid-template-columns:1fr}}