@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Inter:wght@400;500;600;700;800&display=swap');

:root{--red:#d71920;--red2:#b70f15;--black:#111316;--ink:#202328;--muted:#646a73;--line:#e7e8eb;--soft:#f6f7f8;--white:#fff;--max:1180px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,Arial,sans-serif;color:var(--ink);background:#fff;line-height:1.6}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}.container{width:min(var(--max),calc(100% - 40px));margin:auto}
.topbar{height:34px;background:#101114;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 max(20px,calc((100vw - var(--max))/2));font-size:12px}.top-contact{display:flex;gap:28px}.top-contact a{color:#fff}.navbar{height:76px;display:flex;align-items:center;justify-content:space-between;background:#fff}.site-header{position:sticky;top:0;z-index:100;background:#fff;box-shadow:0 1px 14px rgba(0,0,0,.06)}.brand{display:flex;align-items:center;gap:10px}.brand-mark{width:75px;display:block}.brand-text strong{font-family:"Barlow Condensed",sans-serif;font-size:29px;line-height:1;letter-spacing:.3px}.brand-text strong span{color:var(--red)}.brand-text small{display:block;font-size:9px;letter-spacing:1.4px;font-weight:700;margin-top:4px}.nav-links{display:flex;align-items:center;gap:27px;font-size:12px;font-weight:700;text-transform:uppercase}.nav-links a{padding:29px 0;position:relative}.nav-links a.active:after,.nav-links a:hover:after{content:"";position:absolute;left:0;right:0;bottom:18px;height:2px;background:var(--red)}.nav-links .nav-cta{background:var(--red);color:#fff;padding:12px 18px;border-radius:3px}.nav-links .nav-cta:after{display:none}.menu-toggle{display:none;border:0;background:none;font-size:26px}

.hero{position:relative;overflow:hidden;background:linear-gradient(105deg,#fff 0%,#fff 47%,#f0f4f7 100%);min-height:560px}.hero-grid{min-height:560px;display:grid;grid-template-columns:47% 53%;align-items:center;position:relative;z-index:2}.hero-copy{padding:70px 0}.eyebrow{color:var(--red);font-size:12px;font-weight:800;letter-spacing:1.7px;margin:0 0 12px}.hero h1{font-family:"Barlow Condensed",sans-serif;font-size:76px;line-height:.9;text-transform:uppercase;margin:0 0 24px;letter-spacing:.2px}.hero h1 span{display:block;color:var(--red)}.hero-lead{max-width:550px;color:#4f545b;font-size:16px}.hero-actions{display:flex;gap:12px;margin:28px 0}.btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;border:0;border-radius:3px;padding:13px 22px;font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;cursor:pointer}.btn-primary{background:var(--red);color:#fff}.btn-primary:hover{background:var(--red2)}.btn-outline{border:1px solid #17191d;color:#17191d;background:#fff}.btn-white{background:#fff;color:#111}.hero-points{display:flex;gap:20px;flex-wrap:wrap;font-size:11px;font-weight:700}.hero-visual{height:100%;position:relative}.globe-ring{position:absolute;width:520px;height:520px;border-radius:50%;right:-30px;top:25px;background:radial-gradient(circle at 42% 37%,rgba(215,25,32,.12),transparent 52%),linear-gradient(145deg,#e8eef2,#dbe4e9);box-shadow:inset 0 0 80px rgba(255,255,255,.8)}.globe-ring:before{content:"";position:absolute;inset:70px;border:1px dashed rgba(215,25,32,.5);border-radius:50%}.visual-card{position:absolute;background:#111;color:#fff;border-radius:8px;padding:14px 17px;display:flex;flex-direction:column;align-items:center;gap:4px;box-shadow:0 12px 30px rgba(0,0,0,.2);font-size:34px}.visual-card small{font-size:9px;letter-spacing:1.2px;font-weight:800}.air{right:90px;top:105px;background:var(--red)}.sea{right:290px;top:300px}.land{right:45px;bottom:105px}.visual-label{position:absolute;right:100px;bottom:45px;font-size:15px;font-weight:800;letter-spacing:2px}.visual-label b{color:var(--red);padding:0 8px}.map-dots{position:absolute;right:0;top:0;width:55%;height:100%;opacity:.22;background-image:radial-gradient(#6e7881 1px,transparent 1px);background-size:8px 8px;clip-path:polygon(15% 10%,100% 0,100% 100%,0 88%)}.route{position:absolute;border-top:2px dashed rgba(215,25,32,.35);height:120px;width:430px;right:3%;top:24%}.route-1{transform:rotate(10deg)}.route-2{transform:rotate(-14deg);top:47%}.route-3{transform:rotate(25deg);top:63%}.plane{position:absolute;right:27%;top:23%;font-size:70px;transform:rotate(-8deg);color:#30353a}.ship{position:absolute;right:8%;bottom:15%;font-size:130px;color:#252a2e;opacity:.9}

.trust-strip{background:#111316;color:#fff}.trust-grid{display:grid;grid-template-columns:repeat(4,1fr)}.trust-grid div{padding:20px 25px;border-right:1px solid #3c3e42}.trust-grid div:last-child{border:0}.trust-grid b,.trust-grid span{display:block}.trust-grid b{font-size:13px}.trust-grid span{font-size:11px;color:#aeb3b9;margin-top:3px}

.section{padding:90px 0}.about-grid{display:grid;grid-template-columns:42% 58%;gap:70px}.section h2{font-family:"Barlow Condensed",sans-serif;font-size:52px;line-height:1.02;text-transform:uppercase;margin:0}.section h2 span,.about-grid h2 span{color:var(--red)}.about-copy{color:#555b63;font-size:15px}.mini-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:30px}.mini-stats div{border-left:3px solid var(--red);padding-left:13px}.mini-stats strong{display:block;color:var(--red);font-size:20px}.mini-stats span{font-size:11px;font-weight:700}.services-section{background:var(--soft)}.section-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:35px}.section-head>p{max-width:390px;color:#6b7178;font-size:13px}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.service-card{background:#fff;border:1px solid var(--line);padding:27px;min-height:210px;transition:.2s}.service-card:hover{transform:translateY(-4px);box-shadow:0 14px 35px rgba(0,0,0,.08);border-color:#ddd}.icon{width:45px;height:45px;border:2px solid var(--red);color:var(--red);border-radius:50%;display:grid;place-items:center;font-size:22px;font-weight:800;margin-bottom:20px}.service-card h3{margin:0 0 8px;font-size:17px}.service-card p{margin:0;color:#666d75;font-size:12px;line-height:1.55}

.dark-section{padding:90px 0;background:#101216;color:#fff}.section-head.light>p{color:#adb3ba}.industry-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.industry-grid div{border:1px solid #34373c;background:#17191d;padding:19px 15px;font-size:12px;font-weight:700}.industry-grid div:before{content:"";display:block;width:25px;height:3px;background:var(--red);margin-bottom:12px}.industry-note{margin-top:22px;color:#9ea5ad;font-size:11px}.center-head{text-align:center;margin-bottom:40px}.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.process-card{border:1px solid var(--line);padding:28px;position:relative}.process-card b{color:var(--red);font-family:"Barlow Condensed";font-size:30px}.process-card h3{font-size:16px}.process-card p{font-size:12px;color:#6a7077}.cta-section{background:var(--red);color:#fff;padding:50px 0}.cta-inner{display:flex;justify-content:space-between;align-items:center;gap:30px}.cta-section .eyebrow{color:#fff}.cta-section h2{font-family:"Barlow Condensed";font-size:46px;line-height:1;margin:0;text-transform:uppercase}.cta-section h2 span{color:#111}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px}.contact-copy h2{margin-bottom:20px}.contact-copy>p:not(.eyebrow){color:#646a72;max-width:520px}.contact-details{margin-top:30px;display:grid;gap:14px}.contact-details a,.contact-details div{display:flex;flex-direction:column;border-bottom:1px solid var(--line);padding-bottom:13px}.contact-details b{font-size:10px;text-transform:uppercase;color:var(--red);letter-spacing:1px}.contact-details span{font-size:13px}.inquiry-form{background:#f6f7f8;border:1px solid #e2e4e7;padding:30px}.inquiry-form h3{font-size:24px;margin:0}.inquiry-form>p{font-size:12px;color:#6b7178}.inquiry-form label{display:block;font-size:11px;font-weight:700;margin-top:15px}.inquiry-form input,.inquiry-form textarea{display:block;width:100%;margin-top:6px;border:1px solid #d8dbe0;background:#fff;padding:11px 12px;outline:none;border-radius:2px}.inquiry-form input:focus,.inquiry-form textarea:focus{border-color:var(--red)}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.full{width:100%;margin-top:18px}.inquiry-form small{display:block;text-align:center;color:#777;font-size:10px;margin-top:9px}

footer{background:#0d0f12;color:#fff;padding-top:60px}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1.3fr 1.3fr;gap:45px;padding-bottom:45px}.footer-brand p{color:#969ca4;font-size:12px;max-width:360px}.footer-grid h4{font-size:12px;text-transform:uppercase;color:#fff;letter-spacing:1px}.footer-grid>div>a,.footer-grid>div>span{display:block;color:#9da3aa;font-size:11px;margin:8px 0}.footer-logo .brand-text strong{font-size:24px}.footer-logo .brand-mark{width:62px}.wa-footer{color:#fff!important;border:1px solid #333;padding:9px 12px;width:max-content;margin-top:15px!important}.footer-bottom{border-top:1px solid #292c31;padding:18px 0;display:flex;justify-content:space-between;color:#727980;font-size:10px}.floating-wa{position:fixed;right:22px;bottom:22px;width:54px;height:54px;background:#16a34a;color:#fff;border-radius:50%;display:grid;place-items:center;font-size:27px;box-shadow:0 10px 30px rgba(0,0,0,.2);z-index:90}

@media(max-width:900px){
  .topbar{display:none}.navbar{height:68px}.menu-toggle{display:block}.nav-links{display:none;position:absolute;top:68px;left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;padding:15px 20px;gap:0;box-shadow:0 15px 30px rgba(0,0,0,.1)}.nav-links.open{display:flex}.nav-links a{padding:13px 0}.nav-links a.active:after,.nav-links a:hover:after{bottom:5px}.nav-links .nav-cta{text-align:center;margin-top:8px}.hero-grid{grid-template-columns:1fr}.hero{min-height:auto}.hero-copy{padding:65px 0 35px}.hero h1{font-size:62px}.hero-visual{height:330px}.globe-ring{width:400px;height:400px;right:-40px;top:-30px}.map-dots{width:100%;height:45%}.service-grid{grid-template-columns:repeat(2,1fr)}.industry-grid{grid-template-columns:repeat(2,1fr)}.process-grid{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:1fr 1fr}.contact-grid{grid-template-columns:1fr}.about-grid{grid-template-columns:1fr;gap:25px}.cta-inner{align-items:flex-start;flex-direction:column}.trust-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .container{width:min(var(--max),calc(100% - 28px))}.brand-text small{font-size:7px}.brand-text strong{font-size:24px}.brand-mark{width:60px}.hero h1{font-size:50px}.hero-lead{font-size:14px}.hero-actions{flex-direction:column;align-items:stretch}.hero-points{display:grid;gap:7px}.hero-visual{height:260px}.globe-ring{width:310px;height:310px}.air{right:25px;top:45px}.sea{right:150px;top:150px}.land{right:10px;bottom:30px}.visual-label{right:30px;bottom:5px}.section{padding:65px 0}.section h2{font-size:42px}.section-head{display:block}.service-grid,.process-grid,.industry-grid,.footer-grid{grid-template-columns:1fr}.mini-stats{grid-template-columns:1fr}.trust-grid{grid-template-columns:1fr}.trust-grid div{border-right:0;border-bottom:1px solid #3c3e42}.form-row{grid-template-columns:1fr}.footer-bottom{display:block}.footer-bottom span{display:block;margin:5px 0}
}


/* PRAYAN IMPEX V3 — requested visual refinements */
.brand-logo-image{display:block;width:290px;height:76px;object-fit:contain;object-position:left center}
.navbar{height:76px}
.site-header{border-top:2px solid #111}
.contact-section .contact-copy{align-self:center}
.contact-section .contact-copy>p:not(.eyebrow){font-size:15px;color:#646a72;max-width:520px}
.contact-section .contact-details{display:none}

.footer-logo{display:block;width:max-content}
.footer-logo .brand-logo-image{width:300px;height:72px;object-fit:contain;object-position:left center}
.footer-brand p{margin-top:14px}
.footer-contact .contact-line{display:flex!important;flex-direction:row!important;align-items:flex-start;gap:10px;margin:0 0 12px!important;color:#9da3aa}
.footer-contact .contact-line span:last-child{line-height:1.45}
.footer-icon{width:20px;height:20px;flex:0 0 20px;color:#fff;display:grid;place-items:center}
.footer-icon svg{width:18px;height:18px}
.footer-icon.call{color:#fff}
.social-row{display:flex;gap:14px;margin-top:15px}
.social-icon{width:31px!important;height:31px!important;border-radius:50%;display:grid!important;place-items:center!important;color:#fff!important;margin:0!important}
.social-icon svg{width:19px;height:19px}
.social-icon.fb{background:#1877f2}.social-icon.ig{background:linear-gradient(135deg,#f9ce34,#ee2a7b 50%,#6228d7)}
.floating-wa{display:grid;place-items:center}
.floating-wa svg{width:28px;height:28px}
.hero{min-height:620px}
.hero-grid{min-height:620px}
.hero-copy{padding-top:75px}
.hero h1{font-size:76px}
.hero-visual{height:620px}
.globe-ring{width:610px;height:610px;right:-50px;top:5px}
.visual-card{z-index:4}
.air{right:95px;top:110px}.sea{right:315px;top:300px}.land{right:55px;bottom:105px}
.visual-label{right:115px;bottom:45px}
.map-dots{width:58%;height:100%}
.route{width:500px;right:0}
@media(max-width:900px){
 .brand-logo-image{width:245px;height:62px}
 .navbar{height:68px}
 .hero{min-height:auto}.hero-grid{min-height:auto}.hero-copy{padding-top:60px}.hero-visual{height:330px}
 .globe-ring{width:400px;height:400px;right:-40px;top:-30px}
 .footer-logo .brand-logo-image{width:250px;height:65px}
}
@media(max-width:560px){
 .brand-logo-image{width:220px;height:58px}.footer-logo .brand-logo-image{width:220px;height:58px}
 .hero h1{font-size:50px}.hero-visual{height:260px}
}


/* ===== PRAYAN IMPEX V5 — HEADER / FOOTER LOCKUP ===== */
:root{--max:1610px}

/* Header exactly follows the supplied reference: white 98px bar, logo lockup left, navigation right. */
.site-header{height:98px;border-top:1px solid #16181b;box-shadow:0 1px 12px rgba(0,0,0,.045)}
.navbar{height:98px;max-width:1610px;width:calc(100% - 40px);padding:0;display:flex;align-items:center;justify-content:space-between}
.brand{display:block;flex:0 0 auto}
.brand-logo-lockup{display:flex;align-items:center;height:76px}
.brand-truck{display:block;width:154px;height:66px;object-fit:contain;object-position:center}
.brand-wordmark{display:block;margin-left:12px;white-space:nowrap}
.brand-wordmark strong{display:block;font-family:"Barlow Condensed",sans-serif;font-size:34px;line-height:.94;letter-spacing:.1px;color:#17191d;font-weight:800}
.brand-wordmark strong span{color:#d71920}
.brand-wordmark small{display:block;margin-top:8px;font-family:Inter,Arial,sans-serif;font-size:11px;line-height:1;letter-spacing:1.65px;font-weight:800;color:#111316}

/* Reference navigation sizing and spacing */
.nav-links{gap:36px;font-size:15px;font-weight:700}
.nav-links a{padding:37px 0 34px}
.nav-links a.active:after,.nav-links a:hover:after{bottom:15px;height:3px}
.nav-links .nav-cta{padding:16px 26px;border-radius:4px;margin-left:0}

/* Footer uses the same lockup treatment as the reference image. */
footer{background:#0d0f12;color:#fff;padding-top:96px}
.footer-grid{max-width:1625px;width:calc(100% - 40px);grid-template-columns:2.15fr 1fr 1.25fr 1.45fr;gap:56px;padding-bottom:72px}
.footer-logo{display:block;width:max-content}
.footer-logo .brand-logo-lockup{height:58px}
.footer-logo .brand-truck{width:143px;height:52px}
.footer-logo .brand-wordmark{margin-left:9px}
.footer-logo .brand-wordmark strong{font-size:27px}
.footer-logo .brand-wordmark small{font-size:9px;letter-spacing:1.35px;margin-top:7px}
.footer-brand p{margin-top:17px;max-width:390px;line-height:1.55}
.footer-grid h4{font-size:14px;letter-spacing:.7px;margin:0 0 18px}
.footer-grid>div>a,.footer-grid>div>span{font-size:12px;margin:9px 0}
.footer-contact .contact-line{gap:12px;margin-bottom:14px!important}
.footer-contact .footer-icon{width:22px;height:22px;flex:0 0 22px}
.footer-contact .footer-icon svg{width:21px;height:21px}
.social-row{display:flex;gap:14px;margin-top:18px!important}
.social-icon{width:40px!important;height:40px!important;border-radius:50%;display:grid!important;place-items:center;padding:0!important;margin:0!important}
.social-icon svg{width:22px;height:22px}
.footer-bottom{max-width:1625px;width:calc(100% - 40px);padding:26px 0 24px;font-size:11px}

/* Preserve the existing floating WhatsApp action. */
.floating-wa{width:54px;height:54px;right:22px;bottom:22px}

/* Responsive */
@media(max-width:1200px){
  .navbar{width:calc(100% - 36px)}
  .nav-links{gap:22px;font-size:13px}
  .brand-truck{width:138px}
  .brand-wordmark strong{font-size:30px}
  .brand-wordmark small{font-size:9px}
}
@media(max-width:900px){
  .site-header,.navbar{height:76px}
  .navbar{width:calc(100% - 28px)}
  .brand-logo-lockup{height:64px}
  .brand-truck{width:110px;height:55px}
  .brand-wordmark{margin-left:7px}
  .brand-wordmark strong{font-size:25px}
  .brand-wordmark small{font-size:7px;letter-spacing:1.1px;margin-top:6px}
  .menu-toggle{display:block}
  .nav-links{top:76px}
  footer{padding-top:65px}
  .footer-grid{width:calc(100% - 28px);padding-bottom:45px}
}
@media(max-width:560px){
  .navbar{width:calc(100% - 20px)}
  .brand-truck{width:90px;height:48px}
  .brand-wordmark strong{font-size:21px}
  .brand-wordmark small{font-size:6px;letter-spacing:.8px}
  .footer-grid{width:calc(100% - 24px)}
  .footer-logo .brand-truck{width:105px;height:45px}
  .footer-logo .brand-wordmark strong{font-size:22px}
  .footer-logo .brand-wordmark small{font-size:7px}
}


/* ===== PRAYAN IMPEX V6 — DIMENSIONS & FOOTER CLEANUP ===== */

/* Restore the previous site width so the website is not horizontally stretched. */
:root{--max:1180px}

/* Keep the header visually clean on the original site scale. */
.navbar{
  max-width:1180px;
  width:calc(100% - 40px);
}

/* Restore the previous hero scale rather than the enlarged V5 canvas. */
.hero{min-height:560px}
.hero-grid{min-height:560px}
.hero-copy{padding-top:70px}
.hero-visual{height:560px}
.globe-ring{width:520px;height:520px;right:-30px;top:25px}
.air{right:90px;top:105px}
.sea{right:290px;top:300px}
.land{right:45px;bottom:105px}
.visual-label{right:100px;bottom:45px}
.map-dots{width:55%;height:100%}
.route{width:430px;right:3%}

/* Footer remains on the same compact site width. */
.footer-grid{
  max-width:1180px;
  width:calc(100% - 40px);
}
.footer-bottom{
  max-width:1180px;
  width:calc(100% - 40px);
}

/* Footer logo: retain PRAYAN red, make the dark IMPEX text and subtitle white
   so the complete lockup is clearly visible on the dark footer. */
footer .brand-wordmark strong{color:#fff}
footer .brand-wordmark strong span{color:#d71920}
footer .brand-wordmark small{color:#fff}

/* No website row in the footer. */
.footer-contact .contact-line.website{display:none}

/* Keep responsive behavior consistent with the restored dimensions. */
@media(max-width:900px){
  .navbar{width:calc(100% - 28px)}
  .hero{min-height:auto}
  .hero-grid{min-height:auto}
  .hero-visual{height:330px}
  .globe-ring{width:400px;height:400px;right:-40px;top:-30px}
  .footer-grid,.footer-bottom{width:calc(100% - 28px)}
}
@media(max-width:560px){
  .navbar{width:calc(100% - 20px)}
  .footer-grid,.footer-bottom{width:calc(100% - 24px)}
}


/* ===== PRAYAN IMPEX V7 — HEADER NAVIGATION ALIGNMENT =====
   Only the desktop header navigation typography/alignment is adjusted.
   All other V6 styling remains unchanged. */
@media(min-width:901px){
  .navbar{
    align-items:center;
  }

  .nav-links{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:27px;
    font-family:Inter,Arial,sans-serif;
    font-size:12px;
    line-height:1;
    font-weight:700;
    letter-spacing:0;
    white-space:nowrap;
    text-transform:uppercase;
  }

  .nav-links a{
    display:flex;
    align-items:center;
    height:52px;
    padding:0;
    white-space:nowrap;
    line-height:1;
  }

  .nav-links a.active:after,
  .nav-links a:hover:after{
    bottom:5px;
  }

  .nav-links .nav-cta{
    height:52px;
    padding:0 18px;
    display:flex;
    align-items:center;
    justify-content:center;
    white-space:nowrap;
  }
}


/* ===== PRAYAN IMPEX V8 — HEADER & FAQ ===== */
.faq-section{background:#fff}
.faq-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  max-width:980px;
  margin:0 auto;
}
.faq-item{
  border:1px solid var(--line);
  background:#fff;
  padding:0 20px;
}
.faq-item summary{
  list-style:none;
  cursor:pointer;
  padding:18px 28px 18px 0;
  font-size:13px;
  font-weight:800;
  position:relative;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:after{
  content:"+";
  position:absolute;
  right:0;
  top:14px;
  color:var(--red);
  font-size:20px;
  font-weight:700;
}
.faq-item[open] summary:after{content:"−"}
.faq-item p{
  margin:0 0 18px;
  color:#646a72;
  font-size:12px;
  line-height:1.6;
}

@media(max-width:900px){
  .faq-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  .faq-grid{gap:10px}
  .faq-item{padding:0 16px}
}

.form-notice{
  padding:11px 13px;
  margin-bottom:14px;
  border-left:3px solid var(--red);
  background:#fff;
  color:#333;
  font-size:12px;
  font-weight:700;
}
.form-notice.success{border-left-color:#16a34a}
.form-notice.error{border-left-color:var(--red)}


/* ============================================================
   PRAYAN IMPEX — RESPONSIVE DEVICE OPTIMIZATION
   Desktop / Laptop / Tablet / Mobile
   Keeps the existing visual design while adapting dimensions,
   spacing, typography and navigation to the available viewport.
   ============================================================ */

html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

img, svg, video, iframe {
  max-width: 100%;
}

button, a, input, textarea {
  -webkit-tap-highlight-color: transparent;
}

.navbar,
.footer-grid,
.footer-bottom {

}

/* Large desktop */
@media (min-width: 1441px) {
  /* Exact live-page match to the supplied View Page at wide desktop.
     The View Page content begins ~14px farther inward on each side. */
  .container {
    width: min(1465px, calc(100% - 64px));
  }

  .navbar {
    width: min(1465px, calc(100% - 64px));
  }

  .hero h1 {
    font-size: 76px;
  }

  .hero-grid {
    grid-template-columns: 47% 53%;
  }
}

/* Laptop / smaller desktop */
@media (min-width: 1101px) and (max-width: 1440px) {
  .container {
    width: min(1180px, calc(100% - 48px));
  }

  .navbar {
    width: min(1180px, calc(100% - 48px));
  }

  .nav-links {
    gap: 23px;
    font-size: 12px;
  }

  .nav-links a {
    white-space: nowrap;
  }

  .hero h1 {
    font-size: clamp(60px, 5.2vw, 72px);
  }

  .globe-ring {
    width: min(500px, 45vw);
    height: min(500px, 45vw);
    right: -20px;
  }

  .air { right: 8%; }
  .sea { right: 29%; }
  .land { right: 2%; }
}

/* Tablet landscape / small laptop */
@media (min-width: 901px) and (max-width: 1100px) {
  .container {
    width: calc(100% - 40px);
  }

  .navbar {
    width: calc(100% - 40px);
  }

  .brand-truck {
    width: 125px;
    height: 56px;
  }

  .brand-wordmark strong {
    font-size: 27px;
  }

  .brand-wordmark small {
    font-size: 8px;
    letter-spacing: 1.1px;
  }

  .nav-links {
    gap: 16px;
    font-size: 11px;
  }

  .nav-links .nav-cta {
    padding: 12px 14px;
  }

  .hero-grid {
    grid-template-columns: 48% 52%;
  }

  .hero h1 {
    font-size: 58px;
  }

  .hero-lead {
    font-size: 14px;
  }

  .hero-visual {
    height: 500px;
  }

  .globe-ring {
    width: 430px;
    height: 430px;
    right: -55px;
    top: 30px;
  }

  .visual-card {
    transform: scale(.88);
  }

  .air { right: 7%; top: 95px; }
  .sea { right: 30%; top: 270px; }
  .land { right: 0; bottom: 90px; }

  .visual-label {
    right: 55px;
    bottom: 30px;
  }

  .about-grid,
  .contact-grid {
    gap: 40px;
  }

  .service-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .process-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-grid {
    grid-template-columns: 1.6fr 1fr 1.25fr 1.45fr;
    gap: 28px;
  }
}

/* Tablet portrait */
@media (min-width: 601px) and (max-width: 900px) {
  .container {
    width: calc(100% - 36px);
  }

  .site-header,
  .navbar {
    height: 76px;
  }

  .navbar {
    width: calc(100% - 36px);
    position: relative;
  }

  .brand-logo-lockup {
    height: 62px;
    max-width: calc(100vw - 90px);
  }

  .brand-truck {
    width: 105px;
    height: 52px;
    flex: 0 0 auto;
  }

  .brand-wordmark {
    margin-left: 7px;

  }

  .brand-wordmark strong {
    font-size: 25px;
  }

  .brand-wordmark small {
    font-size: 7px;
    letter-spacing: 1px;
  }

  .menu-toggle {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    color: var(--black);
    font-size: 26px;
    cursor: pointer;
    flex: 0 0 44px;
  }

  .nav-links {
    display: none;
    position: absolute;
    z-index: 200;
    top: 76px;
    left: 0;
    right: 0;
    width: 100%;
    background: #fff;
    border-top: 1px solid var(--line);
    box-shadow: 0 15px 30px rgba(0,0,0,.10);
    padding: 10px 18px 18px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    font-size: 13px;
  }

  .nav-links.open {
    display: flex;
  }

  .nav-links a {
    padding: 14px 4px;
    white-space: normal;
  }

  .nav-links a.active:after,
  .nav-links a:hover:after {
    bottom: 6px;
  }

  .nav-links .nav-cta {
    margin-top: 8px;
    text-align: center;
    padding: 13px 18px;
  }

  .hero {
    min-height: auto;
  }

  .hero-grid {
    min-height: auto;
    grid-template-columns: 1fr;
  }

  .hero-copy {
    padding: 58px 0 30px;
    max-width: 720px;
  }

  .hero h1 {
    font-size: clamp(54px, 9vw, 68px);
  }

  .hero-lead {
    max-width: 650px;
  }

  .hero-visual {
    height: 390px;
    margin-top: 0;
  }

  .globe-ring {
    width: 390px;
    height: 390px;
    right: 4%;
    top: 0;
  }

  .map-dots {
    width: 80%;
    height: 100%;
  }

  .route {
    width: 340px;
    right: 5%;
  }

  .air { right: 12%; top: 55px; }
  .sea { right: 38%; top: 190px; }
  .land { right: 5%; bottom: 55px; }

  .visual-label {
    right: 13%;
    bottom: 10px;
  }

  .trust-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .trust-grid div:nth-child(2) {
    border-right: 0;
  }

  .trust-grid div:nth-child(-n+2) {
    border-bottom: 1px solid #3c3e42;
  }

  .section {
    padding: 72px 0;
  }

  .about-grid,
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .section-head {
    align-items: flex-start;
  }

  .service-grid,
  .process-grid,
  .faq-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cta-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 35px 30px;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

/* Mobile */
@media (max-width: 600px) {
  .container {
    width: calc(100% - 28px);
  }

  .site-header,
  .navbar {
    height: 68px;
  }

  .navbar {
    width: calc(100% - 28px);
    position: relative;
  }

  .brand-logo-lockup {
    height: 56px;
    max-width: calc(100vw - 78px);
  }

  .brand-truck {
    width: 82px;
    height: 44px;
    flex: 0 0 auto;
  }

  .brand-wordmark {
    margin-left: 5px;

  }

  .brand-wordmark strong {
    font-size: clamp(18px, 5.7vw, 23px);
    line-height: .95;
  }

  .brand-wordmark small {
    font-size: clamp(5px, 1.65vw, 7px);
    letter-spacing: .75px;
    margin-top: 5px;
    white-space: nowrap;
  }

  .menu-toggle {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    color: var(--black);
    font-size: 25px;
    cursor: pointer;
    flex: 0 0 42px;
  }

  .nav-links {
    display: none;
    position: absolute;
    z-index: 200;
    top: 68px;
    left: 0;
    right: 0;
    width: 100%;
    background: #fff;
    border-top: 1px solid var(--line);
    box-shadow: 0 14px 28px rgba(0,0,0,.10);
    padding: 8px 15px 16px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    font-size: 13px;
  }

  .nav-links.open {
    display: flex;
  }

  .nav-links a {
    padding: 12px 4px;
    white-space: normal;
  }

  .nav-links a.active:after,
  .nav-links a:hover:after {
    bottom: 4px;
  }

  .nav-links .nav-cta {
    margin-top: 7px;
    padding: 12px 16px;
    text-align: center;
  }

  .hero {
    min-height: auto;
  }

  .hero-grid {
    min-height: auto;
    grid-template-columns: 1fr;
  }

  .hero-copy {
    padding: 46px 0 24px;
  }

  .eyebrow {
    font-size: 10px;
    letter-spacing: 1.25px;
    line-height: 1.4;
  }

  .hero h1 {
    font-size: clamp(43px, 13vw, 56px);
    line-height: .91;
    margin-bottom: 19px;
  }

  .hero-lead {
    font-size: 13px;
    line-height: 1.6;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 9px;
    margin: 22px 0;
  }

  .btn {
    width: 100%;
    min-height: 46px;
    padding: 12px 17px;
  }

  .hero-points {
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
    font-size: 10px;
  }

  .hero-visual {
    height: 285px;
    margin-top: 0;
  }

  .globe-ring {
    width: min(310px, 78vw);
    height: min(310px, 78vw);
    right: -4%;
    top: 0;
  }

  .globe-ring:before {
    inset: 42px;
  }

  .map-dots {
    width: 100%;
    height: 90%;
  }

  .route {
    width: 250px;
    height: 90px;
    right: -2%;
  }

  .visual-card {
    padding: 9px 11px;
    border-radius: 7px;
    font-size: 24px;
  }

  .visual-card small {
    font-size: 7px;
  }

  .air {
    right: 6%;
    top: 28px;
  }

  .sea {
    right: 40%;
    top: 128px;
  }

  .land {
    right: 0;
    bottom: 38px;
  }

  .visual-label {
    right: 7%;
    bottom: 3px;
    font-size: 11px;
    letter-spacing: 1.3px;
  }

  .visual-label b {
    padding: 0 5px;
  }

  .trust-grid {
    grid-template-columns: 1fr;
  }

  .trust-grid div {
    padding: 15px 18px;
    border-right: 0;
    border-bottom: 1px solid #3c3e42;
  }

  .trust-grid div:last-child {
    border-bottom: 0;
  }

  .section {
    padding: 58px 0;
  }

  .section h2 {
    font-size: clamp(36px, 11vw, 45px);
  }

  .about-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .about-copy {
    font-size: 13px;
  }

  .mini-stats {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .section-head {
    display: block;
    margin-bottom: 25px;
  }

  .section-head > p {
    max-width: none;
    margin-top: 15px;
    font-size: 12px;
  }

  .service-grid,
  .process-grid,
  .faq-grid {
    grid-template-columns: 1fr;
    gap: 11px;
  }

  .service-card {
    min-height: 0;
    padding: 22px;
  }

  .service-card h3 {
    font-size: 16px;
  }

  .service-card p {
    font-size: 11px;
  }

  .process-card {
    padding: 22px;
  }

  .process-card p {
    font-size: 11px;
  }

  .center-head {
    margin-bottom: 28px;
  }

  .faq-item summary {
    font-size: 12px;
    padding: 16px 25px 16px 0;
  }

  .faq-item p {
    font-size: 11px;
  }

  .cta-section {
    padding: 40px 0;
  }

  .cta-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }

  .cta-section h2 {
    font-size: clamp(34px, 10vw, 43px);
  }

  .contact-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .contact-section .contact-copy > p:not(.eyebrow) {
    font-size: 13px;
  }

  .inquiry-form {
    padding: 20px;
  }

  .inquiry-form h3 {
    font-size: 21px;
  }

  .inquiry-form label {
    font-size: 10px;
  }

  .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .inquiry-form input,
  .inquiry-form textarea {
    font-size: 13px;
    padding: 10px;
  }

  footer {
    padding-top: 48px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 30px;
    width: calc(100% - 28px);
    padding-bottom: 38px;
  }

  .footer-brand {
    grid-column: auto;
  }

  .footer-logo .brand-logo-lockup {
    height: 50px;
  }

  .footer-logo .brand-truck {
    width: 88px;
    height: 42px;
  }

  .footer-logo .brand-wordmark strong {
    font-size: 21px;
  }

  .footer-logo .brand-wordmark small {
    font-size: 6px;
    letter-spacing: .8px;
  }

  .footer-brand p {
    font-size: 11px;
    max-width: 100%;
  }

  .footer-grid h4 {
    font-size: 12px;
    margin-bottom: 14px;
  }

  .footer-grid > div > a,
  .footer-grid > div > span {
    font-size: 11px;
  }

  .footer-contact .contact-line {
    align-items: flex-start;
    gap: 10px;
  }

  .footer-contact .contact-line > span:last-child {
    overflow-wrap: anywhere;
  }

  .social-row {
    margin-top: 15px !important;
  }

  .footer-bottom {
    width: calc(100% - 28px);
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 0 20px;
    font-size: 9px;
  }

  .floating-wa {
    width: 50px;
    height: 50px;
    right: 15px;
    bottom: 15px;
    font-size: 24px;
  }
}

/* Very small phones */
@media (max-width: 380px) {
  .container,
  .navbar,
  .footer-grid,
  .footer-bottom {
    width: calc(100% - 22px);
  }

  .brand-truck {
    width: 72px;
  }

  .brand-wordmark strong {
    font-size: 18px;
  }

  .brand-wordmark small {
    font-size: 5px;
    letter-spacing: .55px;
  }

  .hero-copy {
    padding-top: 38px;
  }

  .hero h1 {
    font-size: 41px;
  }

  .hero-visual {
    height: 250px;
  }

  .visual-card {
    font-size: 21px;
    padding: 8px 9px;
  }

  .globe-ring {
    width: 275px;
    height: 275px;
  }

  .sea {
    right: 35%;
  }

  .inquiry-form {
    padding: 16px;
  }
}

/* Landscape phones */
@media (max-width: 900px) and (orientation: landscape) {
  .hero-grid {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }

  .hero-copy {
    padding: 35px 0;
  }

  .hero h1 {
    font-size: 46px;
  }

  .hero-visual {
    height: 300px;
  }
}

/* Touch devices: eliminate hover lift that can feel jumpy on mobile/tablet. */
@media (hover: none) {
  .service-card:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--line);
  }
}


/* ============================================================
   FINAL MOBILE FIX — PRAYAN IMPEX
   Designed for real Android/iPhone widths: 320–600px.
   ============================================================ */

@media (max-width: 900px) {
  *, *::before, *::after {
    box-sizing: border-box;
  }

  html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    width: 100%;
    max-width: 100%;
    min-width: 0 !important;
    overflow-x: hidden !important;
    margin: 0;
  }

  .site-header,
  header,
  main,
  section,
  footer {
    width: 100%;
    max-width: 100%;
    min-width: 0 !important;
  }

  .container,
  .navbar,
  .footer-grid,
  .footer-bottom {
    width: calc(100% - 28px) !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: auto;
    margin-right: auto;
  }

  /* Header */
  .site-header {
    position: relative;
    z-index: 500;
  }

  .navbar {
    height: 68px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }

  .brand-logo-lockup {
    display: flex !important;
    align-items: center !important;
    width: auto !important;
    max-width: calc(100% - 52px) !important;
    min-width: 0 !important;
    height: 56px !important;
  }

  .brand-truck {
    width: 82px !important;
    max-width: 30vw !important;
    height: auto !important;
    flex: 0 1 auto !important;
    object-fit: contain;
  }

  .brand-wordmark {
    min-width: 0 !important;
    margin-left: 5px !important;
  }

  .brand-wordmark strong {
    font-size: clamp(18px, 5.8vw, 24px) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .brand-wordmark small {
    display: block !important;
    font-size: clamp(5px, 1.7vw, 7px) !important;
    line-height: 1.2 !important;
    letter-spacing: .7px !important;
    white-space: nowrap !important;
  }

  .menu-toggle {
    display: grid !important;
    place-items: center !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    padding: 0 !important;
    flex: 0 0 42px !important;
    font-size: 25px !important;
  }

  .nav-links {
    display: none !important;
    position: absolute !important;
    top: 68px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 7px 18px 16px !important;
    margin: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    background: #fff !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.12) !important;
  }

  .nav-links.open {
    display: flex !important;
  }

  .nav-links a {
    display: block !important;
    width: 100% !important;
    white-space: normal !important;
    padding: 13px 4px !important;
    font-size: 13px !important;
  }

  .nav-links .nav-cta {
    width: 100% !important;
    text-align: center !important;
    margin-top: 7px !important;
  }

  /* Hero */
  .hero-grid,
  .about-grid,
  .contact-grid,
  .service-grid,
  .process-grid,
  .faq-grid,
  .footer-grid {
    min-width: 0 !important;
    width: 100% !important;
  }

  .hero-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .hero-copy {
    min-width: 0 !important;
    width: 100% !important;
    padding: 42px 0 20px !important;
  }

  .hero h1 {
    max-width: 100% !important;
    font-size: clamp(40px, 12.5vw, 56px) !important;
    line-height: .92 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .hero-lead {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
  }

  .hero-actions {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .hero-actions .btn {
    width: 100% !important;
    max-width: 100% !important;
  }

  .hero-points {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
  }

  .hero-visual {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 285px !important;
    overflow: hidden !important;
    position: relative !important;
  }

  .globe-ring {
    width: min(310px, 78vw) !important;
    height: min(310px, 78vw) !important;
    max-width: 78vw !important;
    max-height: 78vw !important;
    right: -3% !important;
    left: auto !important;
  }

  .map-dots {
    max-width: 100% !important;
  }

  .route {
    max-width: 70vw !important;
  }

  .visual-card {
    max-width: 86px !important;
    transform: none !important;
  }

  .visual-label {
    max-width: 90% !important;
    white-space: nowrap !important;
  }

  /* Content grids */
  .about-grid,
  .contact-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .service-grid,
  .process-grid,
  .faq-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .service-card,
  .process-card,
  .faq-item,
  .inquiry-form {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .inquiry-form {
    width: 100% !important;
    padding: 18px !important;
  }

  .form-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
  }

  .inquiry-form input,
  .inquiry-form textarea,
  .inquiry-form select,
  .inquiry-form button {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Footer */
  .footer-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 28px !important;
  }

  .footer-brand {
    grid-column: auto !important;
    min-width: 0 !important;
  }

  .footer-contact {
    min-width: 0 !important;
  }

  .footer-contact * {
    max-width: 100%;
  }

  .footer-contact .contact-line {
    min-width: 0 !important;
    align-items: flex-start !important;
  }

  .footer-contact .contact-line > span:last-child,
  .footer-brand p {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  .footer-bottom {
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
  }

  /* Prevent any accidental fixed-width decorative elements from creating
     a wider layout than the phone viewport. */
  .section,
  .cta-section,
  .trust-bar,
  .hero,
  .contact-section,
  footer {
    overflow-x: hidden !important;
  }

  .floating-wa {
    position: fixed !important;
    z-index: 1000 !important;
    right: 14px !important;
    bottom: calc(14px + env(safe-area-inset-bottom)) !important;
  }
}

@media (max-width: 420px) {
  .container,
  .navbar,
  .footer-grid,
  .footer-bottom {
    width: calc(100% - 22px) !important;
  }

  .brand-truck {
    width: 74px !important;
  }

  .brand-wordmark strong {
    font-size: 18px !important;
  }

  .brand-wordmark small {
    font-size: 5px !important;
    letter-spacing: .55px !important;
  }

  .hero-copy {
    padding-top: 34px !important;
  }

  .hero h1 {
    font-size: clamp(38px, 12vw, 47px) !important;
  }

  .hero-visual {
    height: 255px !important;
  }

  .globe-ring {
    width: min(275px, 78vw) !important;
    height: min(275px, 78vw) !important;
  }

  .inquiry-form {
    padding: 15px !important;
  }
}


/* ============================================================
   PRAYAN IMPEX — FINAL MOBILE LAYOUT
   Genuine mobile composition for 320–600px.
   Desktop/tablet styles remain unchanged above this breakpoint.
   ============================================================ */

@media (max-width: 600px) {

  /* ---------- Global mobile containment ---------- */
  html,
  body {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box !important;
    max-width: 100% !important;
  }

  img,
  svg,
  video,
  canvas {
    max-width: 100% !important;
    height: auto;
  }

  .container,
  .navbar,
  .footer-grid,
  .footer-bottom {
    width: calc(100% - 28px) !important;
    max-width: calc(100% - 28px) !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* ---------- Header ---------- */
  .site-header,
  header {
    width: 100% !important;
    max-width: 100vw !important;
    height: 68px !important;
    overflow: visible !important;
  }

  .navbar {
    height: 68px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
  }

  .brand-logo-lockup {
    display: flex !important;
    align-items: center !important;
    width: auto !important;
    max-width: calc(100% - 50px) !important;
    min-width: 0 !important;
    height: 55px !important;
    overflow: visible !important;
  }

  .brand-truck {
    display: block !important;
    width: 78px !important;
    height: auto !important;
    max-width: 28vw !important;
    flex: 0 0 auto !important;
    object-fit: contain !important;
  }

  .brand-wordmark {
    min-width: 0 !important;
    width: auto !important;
    margin-left: 5px !important;
  }

  .brand-wordmark strong {
    display: block !important;
    font-size: clamp(18px, 5.5vw, 23px) !important;
    line-height: .95 !important;
    white-space: nowrap !important;
  }

  .brand-wordmark small {
    display: block !important;
    font-size: clamp(5px, 1.55vw, 7px) !important;
    letter-spacing: .65px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    margin-top: 5px !important;
  }

  .menu-toggle {
    display: grid !important;
    place-items: center !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    flex: 0 0 42px !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 25px !important;
  }

  .nav-links {
    position: absolute !important;
    z-index: 1000 !important;
    top: 68px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 8px 20px 18px !important;
    display: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    background: #fff !important;
    border-top: 1px solid #e5e5e5 !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.13) !important;
  }

  .nav-links.open {
    display: flex !important;
  }

  .nav-links a {
    display: block !important;
    width: 100% !important;
    padding: 13px 3px !important;
    font-size: 13px !important;
    white-space: normal !important;
  }

  .nav-links .nav-cta {
    width: 100% !important;
    margin: 8px 0 0 !important;
    padding: 13px 15px !important;
    text-align: center !important;
  }

  /* ---------- Hero: text first, compact visual second ---------- */
  .hero,
  .hero-grid {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .hero-grid {
    display: flex !important;
    flex-direction: column !important;
  }

  .hero-copy {
    width: 100% !important;
    max-width: 100% !important;
    padding: 42px 0 18px !important;
    margin: 0 !important;
  }

  .eyebrow {
    font-size: 10px !important;
    line-height: 1.4 !important;
    letter-spacing: 1.2px !important;
    margin-bottom: 16px !important;
  }

  .hero h1 {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 19px !important;
    font-size: clamp(40px, 12.2vw, 53px) !important;
    line-height: .92 !important;
    letter-spacing: -.8px !important;
  }

  .hero-lead {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
  }

  .hero-actions {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 9px !important;
    margin: 22px 0 20px !important;
  }

  .hero-actions .btn,
  .btn {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 48px !important;
    padding: 13px 15px !important;
  }

  .hero-points {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
    font-size: 10px !important;
  }

  /* The original desktop orbit is decorative and cannot be squeezed into
     a phone. Give it its own compact mobile canvas. */
  .hero-visual {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 270px !important;
    min-height: 270px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .globe-ring {
    position: absolute !important;
    width: 285px !important;
    height: 285px !important;
    max-width: none !important;
    max-height: none !important;
    left: 50% !important;
    right: auto !important;
    top: -8px !important;
    transform: translateX(-50%) !important;
  }

  .globe-ring::before {
    inset: 38px !important;
  }

  .map-dots {
    position: absolute !important;
    width: 300px !important;
    max-width: none !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  .route {
    display: none !important;
  }

  .visual-card {
    position: absolute !important;
    z-index: 5 !important;
    transform: none !important;
    width: 78px !important;
    max-width: 78px !important;
    min-width: 0 !important;
    padding: 9px 7px !important;
    border-radius: 8px !important;
    font-size: 22px !important;
    line-height: 1 !important;
  }

  .visual-card small {
    display: block !important;
    font-size: 7px !important;
    margin-top: 6px !important;
  }

  /* Three cards are deliberately separated on mobile. */
  .air {
    top: 42px !important;
    left: calc(50% + 48px) !important;
    right: auto !important;
  }

  .sea {
    top: 128px !important;
    left: calc(50% - 39px) !important;
    right: auto !important;
  }

  .land {
    top: 185px !important;
    left: calc(50% + 48px) !important;
    right: auto !important;
    bottom: auto !important;
  }

  .visual-label {
    position: absolute !important;
    z-index: 10 !important;
    left: 50% !important;
    right: auto !important;
    bottom: 8px !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    max-width: 90% !important;
    white-space: nowrap !important;
    font-size: 11px !important;
    letter-spacing: 1.1px !important;
  }

  /* ---------- Dark trust section ---------- */
  .trust-bar,
  .trust-grid {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .trust-grid {
    display: flex !important;
    flex-direction: column !important;
  }

  .trust-grid > div {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 20px 28px !important;
    border-right: 0 !important;
    border-bottom: 1px solid #3c3e42 !important;
  }

  .trust-grid > div:last-child {
    border-bottom: 0 !important;
  }

  /* ---------- All normal content ---------- */
  .section {
    width: 100% !important;
    max-width: 100vw !important;
    overflow: hidden !important;
    padding: 56px 0 !important;
  }

  .about-grid,
  .contact-grid,
  .service-grid,
  .process-grid,
  .faq-grid {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 22px !important;
  }

  .section-head {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .section h2 {
    max-width: 100% !important;
    font-size: clamp(34px, 10.5vw, 45px) !important;
  }

  .service-card,
  .process-card,
  .faq-item {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* ---------- Contact form ---------- */
  .contact-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .inquiry-form {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 18px !important;
    overflow: hidden !important;
  }

  .form-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 0 !important;
  }

  .inquiry-form input,
  .inquiry-form textarea,
  .inquiry-form select,
  .inquiry-form button {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* ---------- Footer: completely recompose for mobile ---------- */
  footer {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .footer-grid {
    display: flex !important;
    flex-direction: column !important;
    width: calc(100% - 28px) !important;
    max-width: calc(100% - 28px) !important;
    gap: 30px !important;
    padding-top: 48px !important;
    padding-bottom: 35px !important;
  }

  .footer-brand,
  .footer-grid > div {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    grid-column: auto !important;
  }

  .footer-logo .brand-logo-lockup {
    max-width: 100% !important;
    height: 50px !important;
  }

  .footer-logo .brand-truck {
    width: 82px !important;
    max-width: 30vw !important;
  }

  .footer-logo .brand-wordmark strong {
    font-size: 21px !important;
  }

  .footer-logo .brand-wordmark small {
    font-size: 6px !important;
  }

  .footer-brand p {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 12px !important;
    line-height: 1.55 !important;
    overflow-wrap: break-word !important;
  }

  .footer-grid h4 {
    font-size: 12px !important;
    margin-bottom: 13px !important;
  }

  .footer-grid > div > a,
  .footer-grid > div > span {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    overflow-wrap: anywhere !important;
  }

  .footer-contact .contact-line {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  .footer-contact .contact-line > span:last-child {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  .footer-bottom {
    width: calc(100% - 28px) !important;
    max-width: calc(100% - 28px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 7px !important;
    padding: 18px 0 22px !important;
    font-size: 9px !important;
  }

  .footer-bottom > * {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  .floating-wa {
    position: fixed !important;
    z-index: 2000 !important;
    right: 14px !important;
    bottom: calc(14px + env(safe-area-inset-bottom)) !important;
    width: 50px !important;
    height: 50px !important;
  }
}

/* Extra-small phones */
@media (max-width: 380px) {
  .container,
  .navbar,
  .footer-grid,
  .footer-bottom {
    width: calc(100% - 22px) !important;
    max-width: calc(100% - 22px) !important;
  }

  .brand-truck {
    width: 70px !important;
  }

  .brand-wordmark strong {
    font-size: 18px !important;
  }

  .brand-wordmark small {
    font-size: 5px !important;
  }

  .hero-copy {
    padding-top: 34px !important;
  }

  .hero h1 {
    font-size: 39px !important;
  }

  .hero-visual {
    height: 250px !important;
    min-height: 250px !important;
  }

  .globe-ring {
    width: 265px !important;
    height: 265px !important;
  }

  .air {
    left: calc(50% + 38px) !important;
  }

  .sea {
    left: calc(50% - 38px) !important;
  }

  .land {
    left: calc(50% + 38px) !important;
  }

  .visual-label {
    font-size: 10px !important;
  }
}

/* Landscape phones: preserve the compact mobile composition. */
@media (max-width: 900px) and (orientation: landscape) {
  .hero-grid {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
  }

  .hero-copy {
    width: 55% !important;
    padding: 32px 0 !important;
  }

  .hero-visual {
    width: 45% !important;
    height: 300px !important;
  }

  .hero h1 {
    font-size: 42px !important;
  }

  .hero-actions {
    flex-direction: row !important;
  }

  .hero-actions .btn {
    width: auto !important;
    flex: 1 1 0 !important;
  }
}

/* ============================================================
   PRAYAN IMPEX — WHAT WE DO / SERVICES
   Scoped strictly to #services. WHO WE ARE and HOW IT WORKS
   are not touched by these rules.
   ============================================================ */
#services.reference-services {
  background: #fff;
  padding: 90px 0;
  overflow: visible;
}

#services.reference-services > .container {
  width: min(var(--max), calc(100% - 40px));
  max-width: var(--max);
  margin-inline: auto;
}

#services .reference-services-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 390px);
  align-items: start;
  gap: 70px;
  margin-bottom: 46px;
}

#services .reference-services-head > div,
#services .reference-services-head > p {
  min-width: 0;
}

#services .reference-services-head .eyebrow { margin-bottom: 14px; }

#services .reference-services-head h2 {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 64px;
  line-height: .98;
  text-transform: uppercase;
  margin: 0;
  letter-spacing: -.5px;
}

#services .reference-services-head h2 span { color: var(--red); }

#services .reference-heading-line {
  width: 108px;
  height: 4px;
  margin-top: 20px;
  background: var(--red);
}

#services .reference-services-head > p {
  max-width: 390px;
  margin: 48px 0 0;
  color: #5f6770;
  font-size: 14px;
  line-height: 1.65;
}

/* Three equal columns + two equal rows. */
#services .reference-service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, 230px);
  gap: 28px 22px;
  width: 100%;
}

#services .reference-service-card {
  position: relative;
  min-width: 0;
  min-height: 230px;
  height: 230px;
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  column-gap: 22px;
  align-items: center;
  padding: 20px 18px 20px 18px;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #e1e4e8;
  border-radius: 22px;
  box-shadow: 0 10px 26px rgba(17, 20, 24, .055);
  overflow: hidden;
}

#services .reference-service-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 12px;
  height: 96px;
  background: var(--service-color);
  border-radius: 0 21px 0 21px;
  z-index: 3;
}

/* Decorative dots have their own bottom-right zone and never cover text. */
#services .reference-service-card::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: 14px;
  width: 56px;
  height: 48px;
  opacity: .95;
  background-image: radial-gradient(circle, var(--service-color) 1.25px, transparent 1.4px);
  background-size: 8px 8px;
  pointer-events: none;
  z-index: 0;
}

/* Source PNG already contains the complete rounded dotted border.
   Render it at a fixed width while preserving its native 157:162 ratio. */
#services .reference-service-icon {
  width: 132px;
  height: auto;
  aspect-ratio: 157 / 162;
  position: relative;
  z-index: 2;
  align-self: center;
  justify-self: start;
  flex: 0 0 132px;
  overflow: visible;
}

#services .reference-service-icon img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 157 / 162;
  object-fit: contain;
  object-position: center;
}

#services .reference-service-copy {
  position: relative;
  z-index: 2;
  min-width: 0;
  max-width: 100%;
  padding: 0 52px 0 0;
  overflow: visible;
}

#services .reference-service-copy h3 {
  margin: 0;
  color: #1d232a;
  font-size: 19px;
  line-height: 1.18;
  font-weight: 800;
  overflow-wrap: normal;
  word-break: normal;
}

#services .reference-service-copy .service-rule {
  width: 42px;
  height: 3px;
  margin: 11px 0 13px;
  background: var(--service-color);
}

#services .reference-service-copy p {
  margin: 0;
  color: #5f6770;
  font-size: 12.5px;
  line-height: 1.58;
  overflow-wrap: normal;
  word-break: normal;
}

#services .service-red    { --service-color: #df1e23; }
#services .service-teal   { --service-color: #089aa2; }
#services .service-blue   { --service-color: #0564c8; }
#services .service-orange { --service-color: #d08b15; }
#services .service-purple { --service-color: #743faa; }
#services .service-green  { --service-color: #3f8730; }

@media (max-width: 1200px) and (min-width: 901px) {
  #services.reference-services { padding: 78px 0; }
  #services .reference-services-head {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: 42px;
    margin-bottom: 36px;
  }
  #services .reference-services-head h2 { font-size: 58px; }
  #services .reference-services-head > p { margin-top: 40px; font-size: 13px; }
  #services .reference-service-grid {
    grid-template-rows: repeat(2, 220px);
    gap: 22px 18px;
  }
  #services .reference-service-card {
    height: 220px;
    min-height: 220px;
    grid-template-columns: 116px minmax(0, 1fr);
    column-gap: 18px;
    padding: 18px 16px;
    border-radius: 18px;
  }
  #services .reference-service-icon { width: 116px; flex-basis: 116px; }
  #services .reference-service-copy { padding-right: 44px; }
  #services .reference-service-copy h3 { font-size: 17px; }
  #services .reference-service-copy p { font-size: 12px; }
  #services .reference-service-card::after {
    right: 12px; bottom: 12px; width: 46px; height: 40px; background-size: 7px 7px;
  }
}

@media (max-width: 900px) {
  #services.reference-services { padding: 65px 0; }
  #services.reference-services > .container { width: calc(100% - 28px); }
  #services .reference-services-head { display: block; margin-bottom: 30px; }
  #services .reference-services-head h2 { font-size: 48px; }
  #services .reference-services-head > p {
    max-width: 620px;
    margin: 20px 0 0;
    font-size: 13px;
  }
  #services .reference-service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, 205px);
    gap: 16px;
  }
  #services .reference-service-card {
    height: 205px;
    min-height: 205px;
    grid-template-columns: 96px minmax(0, 1fr);
    column-gap: 14px;
    padding: 16px 14px;
    border-radius: 16px;
  }
  #services .reference-service-card::before { width: 9px; height: 70px; border-radius: 0 16px 0 16px; }
  #services .reference-service-icon { width: 96px; flex-basis: 96px; }
  #services .reference-service-copy { padding-right: 40px; }
  #services .reference-service-copy h3 { font-size: 15px; }
  #services .reference-service-copy .service-rule { width: 34px; height: 2px; margin: 8px 0 10px; }
  #services .reference-service-copy p { font-size: 11px; line-height: 1.48; }
  #services .reference-service-card::after { right: 10px; bottom: 10px; width: 40px; height: 36px; background-size: 7px 7px; }
}

@media (max-width: 560px) {
  #services .reference-services-head h2 { font-size: 43px; }
  #services .reference-heading-line { width: 90px; height: 3px; margin-top: 15px; }
  #services .reference-service-grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(6, 175px);
    gap: 14px;
  }
  #services .reference-service-card {
    height: 175px;
    min-height: 175px;
    grid-template-columns: 82px minmax(0,1fr);
    column-gap: 12px;
    padding: 14px 12px;
  }
  #services .reference-service-icon { width: 82px; flex-basis: 82px; }
  #services .reference-service-copy { padding-right: 36px; }
  #services .reference-service-copy h3 { font-size: 14px; }
  #services .reference-service-copy p { font-size: 10.5px; line-height: 1.42; }
  #services .reference-service-card::after { right: 8px; bottom: 8px; width: 34px; height: 30px; background-size: 6px 6px; }
}

/* Footer wording requested by the user; layout remains unchanged. */
.footer-bottom .copyright-line,
.footer-bottom .tagline-line { display: block; }

/* Final fix: render the icon frames as CSS so every dotted border is complete,
   continuous and independent of raster-image edge clipping. */
#services .reference-service-icon {
  width: 132px;
  height: 136px;
  aspect-ratio: auto;
  box-sizing: border-box;
  padding: 8px;
  border: 2px dotted var(--service-color);
  border-radius: 21px;
  background: transparent;
  overflow: hidden;
  display: grid;
  place-items: center;
}

#services .reference-service-icon img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center;
  border-radius: 13px;
}

@media (max-width: 1200px) and (min-width: 901px) {
  #services .reference-service-icon {
    width: 116px;
    height: 120px;
    padding: 7px;
    border-radius: 19px;
  }
  #services .reference-service-icon img { border-radius: 12px; }
}

@media (max-width: 900px) {
  #services .reference-service-icon {
    width: 96px;
    height: 100px;
    padding: 6px;
    border-radius: 16px;
  }
  #services .reference-service-icon img { border-radius: 10px; }
}

@media (max-width: 560px) {
  #services .reference-service-icon {
    width: 82px;
    height: 86px;
    padding: 5px;
    border-radius: 14px;
  }
  #services .reference-service-icon img { border-radius: 9px; }
}

/* Final icon-centering correction: artwork is optically centered inside each
   independently coloured dotted frame. Raster assets were recentered without
   altering the frame geometry, card dimensions, or text layout. */
#services .reference-service-icon img {
  transform: none;
}

/* ============================================================
   FINAL WHAT WE DO POLISH
   - Remove the bottom-right decorative dot clusters completely.
   - Give every card's text column the full usable width.
   - Optically re-centre the International Shipping artwork inside
     its dotted frame without moving the frame itself.
   ============================================================ */
#services .reference-service-card::after {
  display: none !important;
  content: none !important;
}

#services .reference-service-copy {
  padding-right: 0;
  width: 100%;
  max-width: none;
}

#services .reference-service-copy h3,
#services .reference-service-copy p {
  max-width: none;
}

#services .reference-service-icon img {
  object-fit: contain;
  object-position: center center;
}

/* International Shipping: the source artwork has a slight visual bias
   toward the right. Move only the artwork, never the dotted frame. */
#services .service-blue .reference-service-icon img {
  transform: none;
}

@media (max-width: 1200px) and (min-width: 901px) {
  #services .reference-service-copy { padding-right: 0; }
  #services .service-blue .reference-service-icon img { transform: none; }
}

@media (max-width: 900px) {
  #services .reference-service-copy { padding-right: 0; }
  #services .service-blue .reference-service-icon img { transform: none; }
}

@media (max-width: 560px) {
  #services .reference-service-copy { padding-right: 0; }
  #services .service-blue .reference-service-icon img { transform: none; }
}

/* FINAL ICON CONTAINMENT FIX
   The artwork is normalized onto transparent square canvases so the visible
   icon is centered by its actual alpha bounds, not by the source PNG canvas. */
#services .reference-service-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  object-position: 50% 50% !important;
  transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

/* FINAL ICON FIX: never crop the transparent icon artwork. The dotted frame is
   independent CSS; the image itself is contain-centered on a transparent canvas. */
#services .reference-service-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
  background: transparent;
}
#services .reference-service-icon img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain !important;
  object-position: 50% 50% !important;
  border-radius: 0 !important;
  background: transparent !important;
}


/* FINAL ICON ARTWORK CONTAINMENT — uniform transparent canvases */
#services .reference-service-icon {
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  background: transparent !important;
}
#services .reference-service-icon img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: 50% 50% !important;
  transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

/* FINAL SAFE ICON ARTWORK FIX
   The service artwork files use identical 2048x2048 transparent canvases with
   generous, mathematically equal transparent clearance around the visible
   artwork. Keep the entire canvas visible; never crop or stretch it. */
#services .reference-service-icon {
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  background: transparent !important;
}
#services .reference-service-icon img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
  object-position: 50% 50% !important;
  transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}


/* FINAL BUSINESS CONSULTATION ICON CONTAINMENT
   Keep the artwork safely inside the dotted frame with a generous transparent
   margin. The frame itself remains unchanged. */
#services .service-green .reference-service-icon {
  overflow: visible !important;
}
#services .service-green .reference-service-icon img {
  width: 78% !important;
  height: 78% !important;
  max-width: 78% !important;
  max-height: 78% !important;
  object-fit: contain !important;
  object-position: 50% 50% !important;
  transform: none !important;
}

/* Apply the same safe containment to the remaining service artwork so all
   six icons have identical visual breathing room inside their frames. */
#services .service-red .reference-service-icon img,
#services .service-teal .reference-service-icon img,
#services .service-blue .reference-service-icon img,
#services .service-orange .reference-service-icon img,
#services .service-purple .reference-service-icon img {
  width: 78% !important;
  height: 78% !important;
  max-width: 78% !important;
  max-height: 78% !important;
  object-fit: contain !important;
  object-position: 50% 50% !important;
  transform: none !important;
}

/* FINAL ICON SIZE + BUSINESS CONSULTATION REPAIR
   Normalized icon canvases are intentionally larger than the prior 78% version,
   while retaining a controlled transparent margin inside each dotted frame. */
#services .reference-service-icon {
  overflow: hidden !important;
}
#services .reference-service-icon img {
  width: 90% !important;
  height: 90% !important;
  max-width: 90% !important;
  max-height: 90% !important;
  object-fit: contain !important;
  object-position: 50% 50% !important;
  transform: none !important;
}

/* FINAL ICON SIZE BALANCE — slightly larger while remaining centred and fully contained. */
#services .reference-service-icon img {
  width: 96% !important;
  height: 96% !important;
  max-width: 96% !important;
  max-height: 96% !important;
  object-fit: contain !important;
  object-position: 50% 50% !important;
}


/* PRAYAN IMPEX — HOMEPAGE HERO IMAGE MATCH
   The supplied reference artwork is used as the desktop hero artwork.
   Existing hero markup is replaced by a single responsive image and
   transparent click targets over the two visible CTA buttons. */
.hero-image-match{
  position:relative;
  width:100%;
  min-height:0;
  height:auto;
  overflow:hidden;
  background:#fff;
  line-height:0;
}
.hero-image-match .hero-target-image{
  display:block;
  width:100%;
  height:auto;
  max-width:none;
  margin:0;
  object-fit:contain;
  object-position:center top;
}
.hero-hotspots{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
}
.hero-hotspot{
  position:absolute;
  display:block;
  pointer-events:auto;
  border-radius:12px;
  background:transparent;
  cursor:pointer;
}
.hero-hotspot-services{
  left:3.7%;
  top:62.7%;
  width:17.1%;
  height:7.2%;
}
.hero-hotspot-quote{
  left:22.5%;
  top:62.7%;
  width:17.0%;
  height:7.2%;
}

/* On narrow screens the reference artwork remains the visual source,
   but the viewport is allowed to scroll rather than distorting/cropping it. */
@media (max-width:900px){
  .hero-image-match{
    overflow:hidden;
  }
  .hero-image-match .hero-target-image{
    width:100%;
    height:auto;
  }
  .hero-hotspot-services{
    left:3.7%;
    top:62.7%;
    width:17.1%;
    height:7.2%;
  }
  .hero-hotspot-quote{
    left:22.5%;
    top:62.7%;
    width:17%;
    height:7.2%;
  }
}

@media (max-width:560px){
  .hero-image-match{
    min-height:0;
  }
  .hero-image-match .hero-target-image{
    width:100%;
  }
  .hero-hotspot{
    border-radius:7px;
  }
}

/* =========================================================
   FINAL HOMEPAGE HERO ALIGNMENT + SELECTABLE TEXT
   The reference artwork supplies the visual background only.
   All copy, CTAs and trust points are real HTML so they are
   selectable, accessible and aligned to the site's .container.
   ========================================================= */
.hero-image-match{
  position:relative;
  width:100%;
  min-height:clamp(620px,56.28vw,945px);
  height:auto;
  overflow:hidden;
  background:#fff;
  line-height:1.5;
}
.hero-image-match .hero-target-image{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:center center;
  z-index:0;
}
/* Hides the baked-in copy/buttons in the supplied artwork while
   retaining the sky/gradient and the transportation imagery below. */
.hero-background-cleaner{
  position:absolute;
  z-index:1;
  left:0;
  top:0;
  width:58%;
  height:82%;
  pointer-events:none;
  background:linear-gradient(90deg,
    rgba(255,255,255,.995) 0%,
    rgba(255,255,255,.99) 48%,
    rgba(255,255,255,.92) 67%,
    rgba(255,255,255,.50) 82%,
    rgba(255,255,255,0) 100%);
}
.hero-content{
  position:relative;
  z-index:2;
  min-height:clamp(620px,56.28vw,945px);
  display:flex;
  align-items:flex-start;
}
.hero-content-inner{
  width:min(650px,62%);
  padding-top:clamp(72px,5.2vw,92px);
}
.hero-eyebrow{
  margin:0 0 17px;
  color:var(--red);
  font-size:15px;
  line-height:1.2;
  font-weight:800;
  letter-spacing:1.55px;
  text-transform:uppercase;
}
.hero-eyebrow span{color:#7a178c}
.hero-heading-rule{
  width:min(555px,100%);
  height:4px;
  margin:0 0 28px;
  position:relative;
  background:linear-gradient(90deg,#d71920 0%,#a11b88 38%,#2738d8 100%);
  border-radius:99px;
}
.hero-heading-rule i{
  position:absolute;
  left:0;
  top:0;
  width:118px;
  height:4px;
  background:#d71920;
}
.hero-heading-rule b{
  position:absolute;
  right:-5px;
  top:-3px;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#2738d8;
}
.hero-content h1{
  margin:0 0 20px;
  font-family:"Barlow Condensed",sans-serif;
  font-size:clamp(58px,4.75vw,80px);
  line-height:.88;
  letter-spacing:.15px;
  text-transform:uppercase;
  color:#15181d;
}
.hero-content h1 span{display:block;color:var(--red)}
.hero-content .hero-lead{
  max-width:575px;
  margin:0;
  color:#1f252b;
  font-size:clamp(14px,1.02vw,17px);
  line-height:1.55;
}
.hero-content .hero-actions{
  display:flex;
  gap:31px;
  margin:29px 0 25px;
}
.hero-content .btn{
  min-height:63px;
  min-width:283px;
  padding:14px 22px;
  border-radius:8px;
  font-size:16px;
  font-weight:800;
  letter-spacing:.25px;
  justify-content:space-between;
}
.hero-content .btn span{font-size:24px;line-height:1}
.hero-content .btn-primary{box-shadow:0 5px 14px rgba(0,0,0,.08)}
.hero-content .btn-outline{
  color:#1d356f;
  border:2px solid #284275;
  background:rgba(255,255,255,.92);
}
.hero-content .hero-points{
  display:flex;
  align-items:center;
  gap:0;
  font-size:13px;
  line-height:1.2;
  font-weight:700;
  color:#15191e;
}
.hero-content .hero-points span{
  display:flex;
  align-items:center;
  min-height:42px;
  padding:0 31px;
  border-right:1px solid rgba(32,80,135,.42);
  white-space:nowrap;
}
.hero-content .hero-points span:first-child{padding-left:4px}
.hero-content .hero-points span:last-child{border-right:0}
.hero-point-icon{
  display:inline-grid;
  place-items:center;
  width:42px;
  height:42px;
  margin-right:10px;
  font-size:22px;
  color:#fff;
  background:#b82783;
  clip-path:polygon(50% 0,92% 17%,92% 55%,76% 82%,50% 100%,24% 82%,8% 55%,8% 17%);
}
.hero-content .hero-actions a{cursor:pointer}

@media (max-width:1200px){
  .hero-content-inner{width:min(610px,66%)}
  .hero-content h1{font-size:clamp(54px,5.2vw,74px)}
  .hero-content .hero-actions{gap:15px}
  .hero-content .btn{min-width:245px;font-size:14px}
  .hero-content .hero-points span{padding:0 15px;font-size:11px}
}
@media (max-width:900px){
  .hero-image-match{min-height:760px}
  .hero-content{min-height:760px}
  .hero-content-inner{width:100%;max-width:620px;padding-top:55px}
  .hero-background-cleaner{width:100%;height:73%;background:linear-gradient(180deg,rgba(255,255,255,.99) 0%,rgba(255,255,255,.97) 70%,rgba(255,255,255,.35) 100%)}
  .hero-content h1{font-size:64px}
  .hero-content .hero-lead{font-size:15px;max-width:560px}
  .hero-content .hero-actions{gap:12px}
  .hero-content .btn{min-width:0;flex:1}
}
@media (max-width:560px){
  .hero-image-match{min-height:760px}
  .hero-content{min-height:760px}
  .hero-content-inner{padding-top:40px}
  .hero-eyebrow{font-size:11px;letter-spacing:1px}
  .hero-heading-rule{margin-bottom:22px}
  .hero-content h1{font-size:51px;line-height:.9}
  .hero-content .hero-lead{font-size:13px;line-height:1.5}
  .hero-content .hero-actions{flex-direction:column;margin-top:22px}
  .hero-content .btn{width:100%;min-height:54px;font-size:13px}
  .hero-content .hero-points{display:grid;grid-template-columns:1fr;gap:8px}
  .hero-content .hero-points span,
  .hero-content .hero-points span:first-child{
    padding:0;
    border-right:0;
  }
  .hero-point-icon{width:34px;height:34px;font-size:17px}
}

/* ==========================================================
   FINAL HERO CORRECTION — IMAGE 2 VISUAL, REAL HTML COPY
   ========================================================== */
.hero-image-match .hero-target-image{
  content:url("assets/prayan-home-hero-clean.png");
  object-fit:cover;
  object-position:center top;
}
.hero-image-match .hero-background-cleaner{display:none!important}
.hero-content-inner{position:relative;z-index:3}
.hero-content h1{position:relative;z-index:4}
.hero-content .hero-lead{position:relative;z-index:4;max-width:545px}

/* Exact Image-2-style strength indicators: icon above label, vertical dividers. */
.hero-content .hero-points{
  display:grid!important;
  grid-template-columns:repeat(3, 180px);
  align-items:start;
  gap:0;
  margin-top:4px;
  color:#111316;
  font-size:13px;
  font-weight:700;
}
.hero-content .hero-points > span{
  min-height:78px!important;
  padding:0 18px!important;
  border-right:1px solid rgba(43,104,154,.42)!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:6px!important;
  white-space:nowrap;
}
.hero-content .hero-points > span:first-child{padding-left:0!important}
.hero-content .hero-points > span:last-child{border-right:0!important}
.hero-content .hero-points em{font-style:normal;font-weight:700;line-height:1.2}
.hero-point-icon{
  display:grid!important;
  place-items:center!important;
  width:54px!important;
  height:54px!important;
  margin:0!important;
  background:transparent!important;
  clip-path:none!important;
  color:#fff;
}
.hero-point-icon svg{display:block;width:54px;height:54px}
.hero-point-shield{color:#c52a83}
.hero-point-handshake{color:#1974d2}
.hero-point-globe{color:#18a86c}

@media (max-width:1200px){
  .hero-content .hero-points{grid-template-columns:repeat(3,minmax(145px,1fr));max-width:570px}
}
@media (max-width:900px){
  .hero-content .hero-points{grid-template-columns:repeat(3,1fr);width:100%;max-width:620px}
  .hero-content .hero-points > span{padding:0 8px!important;font-size:11px}
  .hero-point-icon,.hero-point-icon svg{width:44px!important;height:44px!important}
}
@media (max-width:560px){
  .hero-content .hero-points{grid-template-columns:1fr;gap:9px;max-width:100%}
  .hero-content .hero-points > span{min-height:44px!important;border-right:0!important;flex-direction:row!important;justify-content:flex-start!important;padding:0!important}
  .hero-point-icon,.hero-point-icon svg{width:38px!important;height:38px!important}
}

/* FINAL USER-REQUESTED HERO MICRO-FIXES
   Keep all existing layout/alignment/background exactly as-is.
   Only correct CTA arrow badges and exact reference icons.
*/
.hero-content .hero-actions .btn{
  align-items:center !important;
  justify-content:space-between !important;
  gap:18px !important;
}
.hero-content .hero-actions .btn .hero-arrow{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:32px !important;
  height:32px !important;
  flex:0 0 32px !important;
  margin:0 !important;
  padding:0 !important;
  line-height:0 !important;
}
.hero-content .hero-actions .btn .hero-arrow img{
  display:block !important;
  width:32px !important;
  height:32px !important;
  max-width:none !important;
  object-fit:contain !important;
  margin:0 !important;
}
.hero-content .hero-points > span{
  overflow:visible !important;
}
.hero-content .hero-point-icon{
  width:64px !important;
  height:58px !important;
  flex:0 0 64px !important;
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:transparent !important;
  clip-path:none !important;
  overflow:visible !important;
}
.hero-content .hero-point-icon img{
  display:block !important;
  width:auto !important;
  height:58px !important;
  max-width:85px !important;
  object-fit:contain !important;
  object-position:center !important;
  margin:0 !important;
}
.hero-content .hero-point-handshake img{
  width:82px !important;
  height:58px !important;
}
.hero-content .hero-point-globe img{
  width:58px !important;
  height:58px !important;
}
@media (max-width:900px){
  .hero-content .hero-actions .btn .hero-arrow{width:30px !important;height:30px !important;flex-basis:30px !important}
  .hero-content .hero-actions .btn .hero-arrow img{width:30px !important;height:30px !important}
  .hero-content .hero-point-icon{width:54px !important;height:50px !important;flex-basis:54px !important}
  .hero-content .hero-point-icon img{height:50px !important}
  .hero-content .hero-point-handshake img{width:70px !important;height:50px !important}
  .hero-content .hero-point-globe img{width:50px !important;height:50px !important}
}

/* ===== FINAL MICRO-FIX: CTA BADGES + SHIELD/GLOBE ONLY ===== */
.hero-content .hero-actions .btn{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  padding:14px 60px 14px 26px !important;
  gap:0 !important;
}
.hero-content .hero-actions .btn .hero-arrow{
  position:absolute !important;
  right:22px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:32px !important;
  height:32px !important;
  flex:0 0 32px !important;
  margin:0 !important;
  padding:0 !important;
  display:block !important;
}
.hero-content .hero-actions .btn .hero-arrow img{
  display:block !important;
  width:32px !important;
  height:32px !important;
  max-width:32px !important;
  max-height:32px !important;
  object-fit:contain !important;
  margin:0 !important;
}
.hero-content .hero-points .hero-point-icon{
  width:58px !important;
  height:54px !important;
  flex:0 0 58px !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  clip-path:none !important;
  overflow:visible !important;
}
.hero-content .hero-points .hero-point-icon img{
  display:block !important;
  object-fit:contain !important;
  object-position:center !important;
  margin:0 !important;
  max-width:none !important;
}
.hero-content .hero-points > span:first-child .hero-point-icon img{
  width:85px !important;
  height:60px !important;
}
.hero-content .hero-points > span:nth-child(2) .hero-point-icon img{
  width:85px !important;
  height:60px !important;
}
.hero-content .hero-points > span:nth-child(3) .hero-point-icon img{
  width:57px !important;
  height:54px !important;
}

/* FINAL CTA ARROW CORRECTION ONLY
   Keep all existing hero layout, alignment, typography, icons and artwork unchanged.
   Rebuild only the two CTA arrow badges so the circular frames and arrows are
   independently aligned and rendered cleanly like the supplied reference. */
.hero-content .hero-actions .btn .hero-arrow{
  position:absolute !important;
  right:20px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:32px !important;
  height:32px !important;
  flex:0 0 32px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin:0 !important;
  padding:0 !important;
  border-radius:50% !important;
  box-sizing:border-box !important;
  line-height:1 !important;
  overflow:visible !important;
}
.hero-content .hero-actions .btn .hero-arrow img{
  display:none !important;
}
.hero-content .hero-actions .btn .hero-arrow::before{
  content:"→" !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  height:100% !important;
  border-radius:50% !important;
  box-sizing:border-box !important;
  font-family:Arial,Helvetica,sans-serif !important;
  font-size:24px !important;
  font-weight:700 !important;
  line-height:1 !important;
  padding:0 0 2px 1px !important;
}
.hero-content .hero-actions .btn-primary .hero-arrow{
  background:#fff !important;
  box-shadow:none !important;
}
.hero-content .hero-actions .btn-primary .hero-arrow::before{
  color:#e21a22 !important;
}
.hero-content .hero-actions .btn-outline .hero-arrow{
  background:#193b7a !important;
  box-shadow:none !important;
}
.hero-content .hero-actions .btn-outline .hero-arrow::before{
  color:#fff !important;
}
@media (max-width:900px){
  .hero-content .hero-actions .btn .hero-arrow{
    right:18px !important;
    width:30px !important;
    height:30px !important;
    flex-basis:30px !important;
  }
  .hero-content .hero-actions .btn .hero-arrow::before{
    font-size:22px !important;
  }
}

/* FINAL CTA ARROW PRESENTATION — ARROWS ONLY
   Everything else in the hero remains unchanged. */
.hero-content .hero-actions .btn .hero-arrow{
  right:22px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:36px !important;
  height:36px !important;
  flex:0 0 36px !important;
  border-radius:50% !important;
  display:block !important;
  position:absolute !important;
  box-sizing:border-box !important;
  overflow:visible !important;
  line-height:0 !important;
  font-size:0 !important;
}
.hero-content .hero-actions .btn .hero-arrow img{display:none !important;}

/* clean horizontal arrow shaft */
.hero-content .hero-actions .btn .hero-arrow::before{
  content:"" !important;
  position:absolute !important;
  left:8px !important;
  top:50% !important;
  width:17px !important;
  height:2.5px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:3px !important;
  transform:translateY(-50%) !important;
  box-sizing:border-box !important;
  background:currentColor !important;
}

/* clean arrow head */
.hero-content .hero-actions .btn .hero-arrow::after{
  content:"" !important;
  position:absolute !important;
  right:7px !important;
  top:50% !important;
  width:8px !important;
  height:8px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-top:2.5px solid currentColor !important;
  border-right:2.5px solid currentColor !important;
  border-radius:1px !important;
  transform:translateY(-50%) rotate(45deg) !important;
  transform-origin:center !important;
  box-sizing:border-box !important;
}

.hero-content .hero-actions .btn-primary .hero-arrow{
  background:#fff !important;
  color:#e21a22 !important;
  box-shadow:0 1px 3px rgba(0,0,0,.10) !important;
}
.hero-content .hero-actions .btn-outline .hero-arrow{
  background:#193b7a !important;
  color:#fff !important;
  box-shadow:0 1px 3px rgba(0,0,0,.12) !important;
}

@media (max-width:900px){
  .hero-content .hero-actions .btn .hero-arrow{
    right:18px !important;
    width:32px !important;
    height:32px !important;
    flex-basis:32px !important;
  }
  .hero-content .hero-actions .btn .hero-arrow::before{
    left:7px !important;
    width:15px !important;
    height:2px !important;
  }
  .hero-content .hero-actions .btn .hero-arrow::after{
    right:6px !important;
    width:7px !important;
    height:7px !important;
    border-width:2px !important;
  }
}

/* FINAL CTA ARROW BEAUTIFICATION — ARROWS ONLY
   No other hero/page element is changed. */
.hero-content .hero-actions .btn .hero-arrow{
  width:38px !important;
  height:38px !important;
  flex:0 0 38px !important;
  right:20px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  position:absolute !important;
  display:block !important;
  border-radius:50% !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
  line-height:0 !important;
  font-size:0 !important;
  z-index:2 !important;
}
.hero-content .hero-actions .btn .hero-arrow img{display:none !important;}

/* precision arrow shaft */
.hero-content .hero-actions .btn .hero-arrow::before{
  content:"" !important;
  position:absolute !important;
  left:10px !important;
  top:50% !important;
  width:17px !important;
  height:3px !important;
  transform:translateY(-50%) !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:3px !important;
  background:currentColor !important;
  box-sizing:border-box !important;
}

/* precision arrow head */
.hero-content .hero-actions .btn .hero-arrow::after{
  content:"" !important;
  position:absolute !important;
  right:9px !important;
  top:50% !important;
  width:9px !important;
  height:9px !important;
  transform:translateY(-50%) rotate(45deg) !important;
  transform-origin:center !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-top:3px solid currentColor !important;
  border-right:3px solid currentColor !important;
  border-radius:1px !important;
  box-sizing:border-box !important;
}

/* polished circular presentation */
.hero-content .hero-actions .btn-primary .hero-arrow{
  background:#fff !important;
  color:#e21a22 !important;
  box-shadow:0 2px 5px rgba(0,0,0,.12), inset 0 0 0 1px rgba(226,26,34,.08) !important;
}
.hero-content .hero-actions .btn-outline .hero-arrow{
  background:#193b7a !important;
  color:#fff !important;
  box-shadow:0 2px 5px rgba(25,59,122,.20), inset 0 0 0 1px rgba(255,255,255,.16) !important;
}

@media (max-width:900px){
  .hero-content .hero-actions .btn .hero-arrow{
    width:34px !important;
    height:34px !important;
    flex-basis:34px !important;
    right:18px !important;
  }
  .hero-content .hero-actions .btn .hero-arrow::before{
    left:9px !important;
    width:15px !important;
    height:2.5px !important;
  }
  .hero-content .hero-actions .btn .hero-arrow::after{
    right:8px !important;
    width:8px !important;
    height:8px !important;
    border-width:2.5px !important;
  }
}

/* FINAL HEADER-TO-HERO GAP FIX — ONLY THE EXCESS WHITE BAND IS REMOVED.
   All existing header contents, CTA styling and homepage content remain unchanged. */
@media (min-width:901px){
  .site-header{height:76px !important;}
  .site-header .navbar{height:76px !important;}
}

/* FINAL MICRO-FIX: align the mobile/tablet header bottom exactly with the
   visible bottom edge of the header CTA; no other header/hero styling changes. */
@media (max-width:900px){
  .site-header,
  .site-header .navbar{
    height:60px !important;
  }
  .site-header .nav-links{
    top:60px !important;
  }
}
/* FINAL HEADER BOUNDARY CORRECTION — TABLET ONLY.
   The CTA ends at 60px in the supplied reference; remove the 14px
   white remainder before the hero begins. Nothing else is changed. */
@media (min-width:601px) and (max-width:900px){
  .site-header{height:60px !important;}
  .site-header .navbar{height:60px !important;}
  .nav-links{top:60px !important;}
}

/* FINAL MICRO-FIX — header/hero boundary only.
   Prevent the floating action from entering the cropped header/hero boundary
   in very short viewports. Normal viewport presentation is unchanged. */
@media (max-height: 300px){
  .floating-wa{display:none !important;}
}

/* FINAL ISOLATED HEADER/ HERO BOUNDARY MICRO-FIX.
   Clip only the header's own contents at its true bottom edge so no child
   or pseudo-element can protrude into the hero. All header contents remain
   otherwise unchanged. */
@media (min-width:901px){
  .site-header{
    overflow:hidden !important;
  }
}


/* FINAL HIGH-QUALITY SERVICE ARTWORK: use the exact source PNGs from /assets.
   No alternate icon, crop, filter, mask, transform, or replacement artwork. */
#services.reference-services .reference-service-icon img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}
#services.reference-services .reference-service-icon {
  overflow: hidden !important;
}


/* FINAL HERO ICON ASSET FIX: use the exact high-resolution PNG assets from /assets.
   Preserve each source image's full transparent canvas; do not substitute/recreate/crop. */
.hero-content .hero-points .hero-point-icon{
  width:64px !important; height:54px !important; flex:0 0 64px !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  background:transparent !important; clip-path:none !important; overflow:visible !important;
}
.hero-content .hero-points .hero-point-icon img{
  display:block !important; width:64px !important; height:auto !important;
  max-width:64px !important; max-height:54px !important;
  object-fit:contain !important; object-position:center !important;
  margin:0 !important; padding:0 !important; border:0 !important;
}
@media (max-width:900px){
 .hero-content .hero-points .hero-point-icon{width:54px !important;height:50px !important;flex-basis:54px !important}
 .hero-content .hero-points .hero-point-icon img{width:54px !important;max-width:54px !important;max-height:50px !important;height:auto !important}
}
@media (max-width:560px){
 .hero-content .hero-points .hero-point-icon{width:44px !important;height:42px !important;flex-basis:44px !important}
 .hero-content .hero-points .hero-point-icon img{width:44px !important;max-width:44px !important;max-height:42px !important;height:auto !important}
}

@media (max-width:900px){
 .hero-content .hero-points > span:first-child .hero-point-icon img{width:70px !important;height:50px !important}
}
@media (max-width:560px){
 .hero-content .hero-points > span:first-child .hero-point-icon img{width:58px !important;height:42px !important}
}

/* ===== FINAL DESKTOP MICRO-SCALE — NO CONTAINER STRETCH =====
   Increase only the visual scale of individual desktop elements.
   The site/container width and hero/background geometry remain unchanged. */
@media (min-width:1441px){
  .brand-truck{width:165px;height:70px}
  .brand-wordmark strong{font-size:36px}
  .brand-wordmark small{font-size:11.5px;letter-spacing:1.7px}
  .nav-links{font-size:13px;gap:31px}
  .nav-links .nav-cta{height:56px;padding:0 20px}
  .hero-copy{padding-top:74px}
  .eyebrow{font-size:13px;letter-spacing:1.8px}
  .hero h1{font-size:82px}
  .hero-lead{font-size:17px;max-width:570px}
  .hero-actions{gap:14px;margin:30px 0}
  .btn{padding:14px 24px;font-size:14px;gap:16px}
  .hero-points{font-size:12px;gap:22px}
}

/* =========================================================
   HOSTINGER / LOCAL PREVIEW VISUAL LOCK
   Desktop hero typography uses fixed reference dimensions instead
   of viewport-relative vw scaling. This keeps the live rendering
   visually consistent with the local preview without widening the
   site container or stretching the background artwork.
   ========================================================= */
@media (min-width:901px){
  .hero-image-match{min-height:760px !important;}
  .hero-content{min-height:760px !important;}
  .hero-content-inner{
    width:650px !important;
    max-width:650px !important;
    padding-top:82px !important;
  }
  .hero-eyebrow{
    font-size:15px !important;
    line-height:1.2 !important;
    letter-spacing:1.55px !important;
  }
  .hero-heading-rule{
    width:555px !important;
  }
  .hero-content h1{
    font-size:80px !important;
    line-height:.88 !important;
  }
  .hero-content .hero-lead{
    max-width:575px !important;
    font-size:17px !important;
    line-height:1.55 !important;
  }
  .hero-content .hero-actions{
    gap:31px !important;
    margin:29px 0 25px !important;
  }
  .hero-content .btn{
    min-height:63px !important;
    min-width:283px !important;
    font-size:16px !important;
  }
  .hero-content .hero-points{
    font-size:13px !important;
  }
}

/* FINAL BACKGROUND POSITION MICRO-FIX — preserve the original artwork's vertical composition so the Taj Mahal, ship, road and skyline remain clear below the selectable HTML content. No text, sizing, container, icon, CTA, or other layout changes. */
.hero-image-match .hero-target-image{
  object-position:center top !important;
}

/* Keep the original compact site container; never enlarge it on desktop. */
@media (min-width:901px){
  .container,
  .navbar,
  .footer-grid,
  .footer-bottom{
    max-width:1180px !important;
  }
  .container{width:min(1180px,calc(100% - 40px)) !important;}
  .navbar{width:min(1180px,calc(100% - 40px)) !important;}
}

/* ==========================================================
   FINAL REFERENCE-1 HERO PLACEMENT ONLY
   Do not alter the header, artwork, CTAs, icons, or other sections.
   Match the supplied Reference 1 by moving/compressing only the hero copy block.
   ========================================================== */
@media (min-width:901px){
  .hero-content-inner{
    padding-top:20px !important;
    transform:translateX(28px) !important;
  }
  .hero-eyebrow{margin-bottom:12px !important;}
  .hero-heading-rule{margin-bottom:23px !important;}
  .hero-content h1{
    font-size:74px !important;
    line-height:.88 !important;
    margin-bottom:16px !important;
  }
  .hero-content .hero-lead{
    font-size:17px !important;
    line-height:1.48 !important;
  }
}

/* ==========================================================
   FINAL HERO COMPOSITION LOCK — MATCH REFERENCE 1 / 2
   Background artwork stays independent from the live HTML copy.
   Header and all non-hero sections are intentionally untouched.
   ========================================================== */
@media (min-width:901px){
  .hero-image-match{
    /* Preserve the full visual composition instead of compressing the hero. */
    min-height:56.28vw !important;
    height:56.28vw !important;
    max-height:none !important;
  }

  .hero-image-match .hero-target-image{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center top !important;
  }

  .hero-content{
    min-height:100% !important;
    height:100% !important;
    align-items:flex-start !important;
  }

  .hero-content-inner{
    width:650px !important;
    max-width:650px !important;
    padding-top:52px !important;
    transform:none !important;
  }

  .hero-eyebrow{
    margin-bottom:12px !important;
    font-size:15px !important;
    line-height:1.2 !important;
  }

  .hero-heading-rule{
    width:555px !important;
    height:4px !important;
    margin-bottom:23px !important;
  }

  .hero-content h1{
    font-size:74px !important;
    line-height:.88 !important;
    margin-bottom:16px !important;
  }

  .hero-content .hero-lead{
    max-width:575px !important;
    font-size:17px !important;
    line-height:1.48 !important;
  }

  .hero-content .hero-actions{
    gap:31px !important;
    margin:29px 0 25px !important;
  }

  .hero-content .btn{
    min-width:283px !important;
    min-height:63px !important;
    font-size:16px !important;
  }

  /* Keep the three indicators entirely in the clear foreground area. */
  .hero-content .hero-points{
    grid-template-columns:repeat(3,180px) !important;
    width:540px !important;
    max-width:540px !important;
    margin-top:4px !important;
  }
}

/* ==========================================================
   FINAL CTA ARROW ASSET RESTORATION
   Use the supplied hero-arrow PNGs exactly as provided.
   The source files are 1536x1024 transparent canvases containing
   square circular badges. Preserve that aspect ratio so the badge
   is not squeezed into an oval and never replace the artwork with
   CSS-generated arrows.
   ========================================================== */
.hero-content .hero-actions .btn .hero-arrow{
  width:61px !important;
  height:40.67px !important;
  flex:0 0 61px !important;
  right:13px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  position:absolute !important;
  display:block !important;
  overflow:visible !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  line-height:0 !important;
  font-size:0 !important;
  padding:0 !important;
  margin:0 !important;
}
.hero-content .hero-actions .btn .hero-arrow img{
  display:block !important;
  width:61px !important;
  height:40.67px !important;
  max-width:none !important;
  max-height:none !important;
  min-width:0 !important;
  min-height:0 !important;
  object-fit:fill !important;
  object-position:center !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  transform:none !important;
}
.hero-content .hero-actions .btn .hero-arrow::before,
.hero-content .hero-actions .btn .hero-arrow::after{
  content:none !important;
  display:none !important;
}
@media (max-width:900px){
  .hero-content .hero-actions .btn .hero-arrow{
    width:53px !important;
    height:35.33px !important;
    flex-basis:53px !important;
    right:9px !important;
  }
  .hero-content .hero-actions .btn .hero-arrow img{
    width:53px !important;
    height:35.33px !important;
  }
}


/* ==========================================================
   FINAL CTA ARROW FIX v2
   Use the exact supplied arrow artwork. Never draw or replace
   the arrows with CSS. The source artwork is shown inside a
   square viewport using object-fit:cover so the circular badge
   remains circular on the live page, matching the reference.
   ========================================================== */
.hero-content .hero-actions .btn .hero-arrow{
  position:absolute !important;
  right:20px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:48px !important;
  height:48px !important;
  flex:0 0 48px !important;
  display:block !important;
  overflow:hidden !important;
  border:0 !important;
  border-radius:50% !important;
  background:transparent !important;
  box-shadow:none !important;
  padding:0 !important;
  margin:0 !important;
  line-height:0 !important;
  font-size:0 !important;
  z-index:5 !important;
}
.hero-content .hero-actions .btn .hero-arrow img{
  display:block !important;
  width:48px !important;
  height:48px !important;
  max-width:none !important;
  max-height:none !important;
  min-width:0 !important;
  min-height:0 !important;
  object-fit:cover !important;
  object-position:center center !important;
  border:0 !important;
  border-radius:50% !important;
  margin:0 !important;
  padding:0 !important;
  transform:none !important;
}
.hero-content .hero-actions .btn .hero-arrow::before,
.hero-content .hero-actions .btn .hero-arrow::after{
  content:none !important;
  display:none !important;
}
@media (max-width:900px){
  .hero-content .hero-actions .btn .hero-arrow{
    width:42px !important;
    height:42px !important;
    flex-basis:42px !important;
    right:16px !important;
  }
  .hero-content .hero-actions .btn .hero-arrow img{
    width:42px !important;
    height:42px !important;
  }
}

/* FINAL CTA ARROW OVERRIDE — DO NOT REPLACE THESE IMAGE ASSETS WITH CSS ARROWS */
.hero-content .hero-actions .btn{
  position:relative !important;
}
.hero-content .hero-actions .btn .hero-arrow{
  position:absolute !important;
  right:13px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:61px !important;
  height:auto !important;
  aspect-ratio:3 / 2 !important;
  flex:0 0 61px !important;
  display:block !important;
  overflow:visible !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  padding:0 !important;
  margin:0 !important;
  line-height:0 !important;
  font-size:0 !important;
  z-index:10 !important;
}
.hero-content .hero-actions .btn .hero-arrow img{
  display:block !important;
  width:61px !important;
  height:auto !important;
  aspect-ratio:3 / 2 !important;
  max-width:none !important;
  max-height:none !important;
  min-width:0 !important;
  min-height:0 !important;
  object-fit:initial !important;
  object-position:initial !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  margin:0 !important;
  padding:0 !important;
  transform:none !important;
  box-shadow:none !important;
}
.hero-content .hero-actions .btn .hero-arrow::before,
.hero-content .hero-actions .btn .hero-arrow::after{
  content:none !important;
  display:none !important;
}
@media (max-width:900px){
  .hero-content .hero-actions .btn .hero-arrow{
    right:10px !important;
    width:53px !important;
    flex-basis:53px !important;
  }
  .hero-content .hero-actions .btn .hero-arrow img{
    width:53px !important;
  }
}


/* ==========================================================
   DEFINITIVE CTA ARROW IMPLEMENTATION V4
   IMPORTANT: Render the supplied PNG artwork itself.
   The source artwork is 1536x1024 and contains a circular badge.
   The CSS viewport is square and object-fit:cover preserves the
   artwork's circular geometry instead of stretching the source.
   No pseudo-element or CSS-drawn arrow is used.
   ========================================================== */
.hero-content .hero-actions .btn{
  position:relative !important;
}
.hero-content .hero-actions .btn .hero-arrow{
  position:absolute !important;
  top:50% !important;
  right:14px !important;
  width:50px !important;
  height:50px !important;
  flex:0 0 50px !important;
  display:block !important;
  overflow:hidden !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:50% !important;
  background:transparent !important;
  box-shadow:none !important;
  line-height:0 !important;
  font-size:0 !important;
  transform:translateY(-50%) !important;
  z-index:20 !important;
}
.hero-content .hero-actions .btn .hero-arrow img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  max-width:none !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:50% !important;
  background:transparent !important;
  object-fit:cover !important;
  object-position:center center !important;
  transform:none !important;
}
.hero-content .hero-actions .btn .hero-arrow::before,
.hero-content .hero-actions .btn .hero-arrow::after{
  content:none !important;
  display:none !important;
}
@media (max-width:900px){
  .hero-content .hero-actions .btn .hero-arrow{
    width:44px !important;
    height:44px !important;
    flex-basis:44px !important;
    right:10px !important;
  }
}

/* ==========================================================
   AUTHORITATIVE CTA ARROW RENDERING
   Render the supplied 1536x1024 PNG at its native aspect ratio.
   The source contains a square circular badge centered inside a
   wider transparent canvas. Do NOT squeeze the whole 3:2 canvas
   into a square and do NOT crop it with object-fit:cover.
   ========================================================== */
.hero-content .hero-actions .btn .hero-arrow{
  position:absolute !important;
  top:50% !important;
  right:14px !important;
  width:50px !important;
  height:50px !important;
  flex:0 0 50px !important;
  overflow:hidden !important;
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  line-height:0 !important;
  font-size:0 !important;
  transform:translateY(-50%) !important;
  z-index:20 !important;
}
.hero-content .hero-actions .btn .hero-arrow img{
  display:block !important;
  width:auto !important;
  height:50px !important;
  max-width:none !important;
  max-height:none !important;
  min-width:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  object-fit:initial !important;
  object-position:initial !important;
  transform:translateX(0) !important;
}
.hero-content .hero-actions .btn .hero-arrow::before,
.hero-content .hero-actions .btn .hero-arrow::after{
  content:none !important;
  display:none !important;
}
@media (max-width:900px){
  .hero-content .hero-actions .btn .hero-arrow{
    width:44px !important;
    height:44px !important;
    flex-basis:44px !important;
    right:10px !important;
  }
  .hero-content .hero-actions .btn .hero-arrow img{
    height:44px !important;
  }
}

/* ==========================================================
   FINAL ARROW FIX — USE ORIGINAL HIGH-RES TRANSPARENT ASSETS
   The supplied PNGs are 1536x1024 transparent canvases. The
   circular artwork is centered inside those canvases. Do NOT
   crop, stretch, object-fit, or replace them with CSS arrows.
   ========================================================== */
.hero-content .hero-actions .btn .hero-arrow{
  position:absolute !important;
  top:50% !important;
  right:12px !important;
  width:52px !important;
  height:52px !important;
  flex:0 0 52px !important;
  overflow:visible !important;
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  line-height:0 !important;
  font-size:0 !important;
  transform:translateY(-50%) !important;
  z-index:20 !important;
}
.hero-content .hero-actions .btn .hero-arrow img{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  display:block !important;
  width:auto !important;
  height:52px !important;
  max-width:none !important;
  max-height:none !important;
  min-width:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  object-fit:initial !important;
  object-position:initial !important;
  transform:translate(-50%,-50%) !important;
  box-shadow:none !important;
}
.hero-content .hero-actions .btn .hero-arrow::before,
.hero-content .hero-actions .btn .hero-arrow::after{
  content:none !important;
  display:none !important;
}
@media (max-width:900px){
  .hero-content .hero-actions .btn .hero-arrow{
    width:46px !important;
    height:46px !important;
    flex-basis:46px !important;
    right:10px !important;
  }
  .hero-content .hero-actions .btn .hero-arrow img{
    height:46px !important;
  }
}


/* FINAL ARROW SIZE MATCH — match reference size without changing the supplied assets */
.hero-content .hero-actions .btn .hero-arrow{
  width:44px !important;
  height:44px !important;
  flex:0 0 44px !important;
  right:12px !important;
  overflow:visible !important;
}
.hero-content .hero-actions .btn .hero-arrow img{
  width:auto !important;
  height:44px !important;
  max-width:none !important;
  max-height:none !important;
}
@media (max-width:900px){
  .hero-content .hero-actions .btn .hero-arrow{
    width:40px !important;
    height:40px !important;
    flex-basis:40px !important;
    right:10px !important;
  }
  .hero-content .hero-actions .btn .hero-arrow img{
    height:40px !important;
  }
}

/* ===== PRAYAN IMPEX V8 — MATCH VIEW PAGE HERO RESOLUTION ===== */
@media(min-width:901px){
  .hero{min-height:620px}
  .hero-grid{min-height:620px}
  .hero-copy{padding-top:75px}
  .hero-visual{height:620px}
}


/* ==========================================================
   FINAL VIEWPORT RESOLUTION LOCK
   Reference desktop canvas: 1672px wide × 941px high (16:9).
   The complete desktop page is proportionally scaled so the
   live page retains the same visual resolution/composition as
   the supplied view page. Tablet/mobile rules are untouched.
   ========================================================== */
@media (min-width:901px){
  html{zoom:1;}
}
@media (min-width:901px) and (max-width:1199px){
  html{zoom:.82;}
}
@media (min-width:1200px) and (max-width:1399px){
  html{zoom:.78;}
}
@media (min-width:1400px) and (max-width:1599px){
  html{zoom:.90;}
}
@media (min-width:1600px) and (max-width:1799px){
  html{zoom:1;}
}
@media (min-width:1800px) and (max-width:1999px){
  html{zoom:1.15;}
}
@media (min-width:2000px){
  html{zoom:1.20;}
}

/* ==========================================================
   V11 — AUTHORITATIVE DESKTOP VIEW/LIVE RESOLUTION MATCH
   Match the supplied wide desktop references exactly:
   - no browser zoom compensation
   - wide 1517px centered content canvas
   - hero artwork keeps its native 1672:941 aspect ratio
   - no object-fit cropping of the hero artwork
   - tablet/mobile rules remain unchanged
   ========================================================== */
@media (min-width:901px){
  html{zoom:1 !important;}

  .container,
  .navbar,
  .footer-grid,
  .footer-bottom{
    max-width:1517px !important;
  }

  .container{
    width:min(1517px, calc(100% - 40px)) !important;
  }

  .navbar{
    width:min(1517px, calc(100% - 40px)) !important;
  }

  .hero-image-match{
    width:100% !important;
    height:calc(100vw * 941 / 1672) !important;
    min-height:0 !important;
    max-height:none !important;
    aspect-ratio:1672 / 941 !important;
    overflow:hidden !important;
  }

  .hero-image-match .hero-target-image{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    object-fit:fill !important;
    object-position:center top !important;
  }

  .hero-content{
    width:min(1517px, calc(100% - 40px)) !important;
    min-height:100% !important;
    height:100% !important;
  }

  .hero-content-inner{
    width:650px !important;
    max-width:650px !important;
    padding-top:58px !important;
    transform:none !important;
  }

  .hero-eyebrow{
    margin-bottom:12px !important;
    font-size:15px !important;
  }

  .hero-heading-rule{
    width:555px !important;
    margin-bottom:23px !important;
  }

  .hero-content h1{
    font-size:74px !important;
    line-height:.88 !important;
    margin-bottom:16px !important;
  }

  .hero-content .hero-lead{
    max-width:575px !important;
    font-size:17px !important;
    line-height:1.48 !important;
  }
}


/* ==========================================================
   V12 — DESKTOP CONTENT CANVAS / LIVE VIEW CORRECTION
   The reference uses a centered 1517px content canvas inside
   the full-width 1905–1907px viewport. The hero artwork itself
   remains full viewport width. Do not stretch page content to
   the viewport edges and do not crop the native 1672×941 hero.
   ========================================================== */
@media (min-width:1441px){
  html,body{zoom:1 !important;}

  /* Full-width sections; their inner content is centered. */
  .container,
  .site-header .navbar.container,
  .hero-content.container,
  .trust-strip .container,
  .section > .container,
  .cta-section > .container,
  footer .container,
  .footer-grid,
  .footer-bottom{
    width:min(1517px, calc(100% - 40px)) !important;
    max-width:1517px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  /* Header content must sit on the same centered canvas as the body. */
  .site-header .navbar.container{
    width:min(1517px, calc(100% - 40px)) !important;
    max-width:1517px !important;
  }

  /* Hero artwork is a full-bleed native-ratio background layer. */
  .hero-image-match{
    width:100% !important;
    height:calc(100vw * 941 / 1672) !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:hidden !important;
  }
  .hero-image-match .hero-target-image{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    object-fit:fill !important;
    object-position:center top !important;
  }

  /* Keep the selectable HTML copy aligned to the centered canvas. */
  .hero-content.container{
    width:min(1517px, calc(100% - 40px)) !important;
    max-width:1517px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
}

@media (min-width:901px) and (max-width:1440px){
  /* Preserve the existing laptop/tablet desktop canvas. */
  .container,
  .site-header .navbar.container,
  .hero-content.container,
  .trust-strip .container,
  .section > .container,
  footer .container,
  .footer-grid,
  .footer-bottom{
    margin-left:auto !important;
    margin-right:auto !important;
  }
}

/* ==========================================================
   V14 — REFERENCE 2 EXACT DESKTOP CONTENT WIDTH
   Keep the hero artwork full-bleed. The site content itself
   must occupy the same 1517px reference canvas, centered in
   the ~1900px wide desktop viewport.
   ========================================================== */
@media (min-width:1441px){
  html, body { zoom: 1 !important; }

  .container,
  .site-header .navbar.container,
  .hero-content.container,
  .trust-strip .container,
  .section > .container,
  .cta-section > .container,
  footer .container,
  .footer-grid,
  .footer-bottom {
    width: min(1517px, calc(100% - 390px)) !important;
    max-width: 1517px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .site-header .navbar.container,
  .hero-content.container {
    width: min(1517px, calc(100% - 390px)) !important;
    max-width: 1517px !important;
  }

  /* Full-bleed hero artwork: never crop or constrain it to the content canvas. */
  .hero-image-match {
    width: 100% !important;
    overflow: hidden !important;
  }
  .hero-image-match .hero-target-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: fill !important;
    object-position: center top !important;
  }
}


/* ==========================================================
   V15 — FINAL MICRO-OUTWARD ALIGNMENT
   Reference 3/4 compared with the previous V14 result:
   widen the centered desktop content canvas slightly so the
   complete composition moves outward by approximately 30–33px
   on each side. The full-bleed hero artwork is unchanged.
   ========================================================== */
@media (min-width:1441px){
  .container,
  .site-header .navbar.container,
  .hero-content.container,
  .trust-strip .container,
  .section > .container,
  .cta-section > .container,
  footer .container,
  .footer-grid,
  .footer-bottom {
    width: min(1556px, calc(100% - 356px)) !important;
    max-width: 1556px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .site-header .navbar.container,
  .hero-content.container {
    width: min(1556px, calc(100% - 356px)) !important;
    max-width: 1556px !important;
  }
}

/* ===== V19 — MATCH VIEW PAGE HORIZONTAL GEOMETRY ===== */
@media (min-width: 1441px) {
  /* The view page is 28px narrower than the live rendering: 14px inward on each side. */
  .container,
  .navbar {
    width: min(1465px, calc(100% - 64px));
  }

  /* Footer has its own wider reference canvas. */
  .footer-grid,
  .footer-bottom {
    max-width: 1595px;
    width: calc(100% - 40px);
  }
}


/* ==========================================================
   V21 — VIEW / LIVE RESOLUTION MATCH
   Only the desktop hero canvas resolution is corrected.
   The supplied 1672×941 artwork is rendered at its native
   16:9 aspect ratio at every desktop viewport width.
   Existing content, typography, colors, spacing, assets,
   navigation and mobile rules remain unchanged.
   ========================================================== */
@media (min-width:901px){
  html,
  body{
    zoom:1 !important;
  }

  .hero-image-match{
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    aspect-ratio:1672 / 941 !important;
    overflow:hidden !important;
  }

  .hero-image-match .hero-target-image{
    position:absolute !important;
    inset:0 !important;
    display:block !important;
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:fill !important;
    object-position:center top !important;
  }

  .hero-content{
    height:100% !important;
    min-height:100% !important;
  }
}

/* ===== PRAYAN IMPEX V23 — VERY SLIGHT DESKTOP INWARD SHIFT =====
   Keeps the existing design unchanged while moving the main desktop
   content only a small amount inward from both sides. */
@media (min-width: 1441px) {
  .container {
    width: min(1445px, calc(100% - 84px));
  }

  .navbar {
    width: min(1445px, calc(100% - 84px));
  }
}

/* ==========================================================
   ABOUT PAGE — REFERENCE 2 VISUAL REDESIGN
   Scoped only to #about. Header, hero, services, process,
   contact, footer and their desktop geometry remain untouched.
   ========================================================== */
.about-section-reference{
  position:relative;
  overflow:hidden;
  min-height:720px;
  padding:82px 0 0;
  background:#fff;
  isolation:isolate;
}
.about-reference-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:47% 53%;
  gap:0;
  min-height:720px;
}
.about-reference-left{
  position:relative;
  min-height:720px;
  padding-top:0;
}
.about-reference-left .eyebrow{
  font-size:13px;
  letter-spacing:2px;
  margin:0 0 0;
}
.about-heading-rule{
  width:215px;
  height:2px;
  background:var(--red);
  position:absolute;
  top:13px;
  left:180px;
}
.about-heading-rule i{
  display:none;
}
.about-heading-rule b{
  position:absolute;
  right:-5px;
  top:-3px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--red);
}
.about-reference-left h2{
  font-family:"Barlow Condensed",sans-serif;
  font-size:66px;
  line-height:.92;
  letter-spacing:.15px;
  text-transform:uppercase;
  margin:30px 0 0;
  color:#17202b;
  position:relative;
  z-index:3;
}
.about-reference-left h2 span{color:var(--red)}
.about-visual{
  position:absolute;
  left:-54px;
  top:315px;
  width:825px;
  height:405px;
  z-index:1;
  pointer-events:none;
}
.about-visual img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:left top;
  mix-blend-mode:multiply;
}
.about-reference-right{
  padding-top:34px;
  position:relative;
}
.about-reference-right .about-copy{
  color:#171d27;
  font-size:16px;
  line-height:1.58;
  max-width:735px;
}
.about-reference-right .about-copy p{
  margin:0 0 30px;
}
.about-reference-rule{
  width:78px;
  height:2px;
  background:var(--red);
  margin:36px 0 42px;
}
.about-reference-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  position:relative;
  z-index:4;
}
.about-reference-card{
  position:relative;
  min-height:315px;
  padding:28px 28px 24px;
  background:rgba(255,255,255,.96);
  border:1px solid rgba(215,25,32,.10);
  border-radius:13px;
  box-shadow:0 5px 24px rgba(215,25,32,.09);
}
.about-reference-card strong{
  display:block;
  color:var(--red);
  font-family:"Barlow Condensed",sans-serif;
  font-size:51px;
  line-height:1;
  margin-bottom:18px;
}
.about-reference-card h3{
  margin:0 0 16px;
  color:#101722;
  font-size:17px;
  line-height:1.25;
  font-weight:800;
}
.about-reference-card p{
  margin:0;
  color:#27303b;
  font-size:12px;
  line-height:1.65;
}
.about-reference-card i{
  display:block;
  width:43px;
  height:3px;
  background:var(--red);
  position:absolute;
  left:28px;
  bottom:24px;
}
.about-reference-curve{
  position:absolute;
  z-index:0;
  width:78vw;
  height:430px;
  right:-12vw;
  bottom:-345px;
  border-radius:50% 50% 0 0;
  background:var(--red);
  box-shadow:0 -10px 0 rgba(255,255,255,.95),0 -20px 0 rgba(215,25,32,.18);
  transform:rotate(-7deg);
}
@media (min-width:1441px){
  .about-section-reference{min-height:720px;padding-top:82px}
  .about-reference-grid{min-height:720px}
  .about-reference-left{min-height:720px}
  .about-reference-left h2{font-size:69px}
  .about-reference-right{padding-top:36px}
}
@media (max-width:900px){
  .about-section-reference{min-height:auto;padding:60px 0 80px}
  .about-reference-grid{grid-template-columns:1fr;min-height:auto;gap:45px}
  .about-reference-left{min-height:520px}
  .about-reference-left h2{font-size:58px;margin-top:27px}
  .about-heading-rule{left:170px;width:180px}
  .about-visual{left:-25px;top:250px;width:min(720px,100vw);height:320px}
  .about-reference-right{padding-top:0}
  .about-reference-right .about-copy{font-size:14px}
  .about-reference-cards{grid-template-columns:repeat(3,1fr)}
  .about-reference-card{padding:22px 20px;min-height:280px}
  .about-reference-card strong{font-size:44px}
  .about-reference-card h3{font-size:15px}
  .about-reference-card p{font-size:11px}
  .about-reference-curve{width:110vw;right:-25vw;bottom:-310px;height:350px}
}
@media (max-width:560px){
  .about-section-reference{padding:50px 0 60px}
  .about-reference-grid{gap:30px}
  .about-reference-left{min-height:390px}
  .about-reference-left h2{font-size:47px;margin-top:25px}
  .about-heading-rule{left:145px;width:145px;top:12px}
  .about-visual{left:-18px;top:210px;width:560px;height:220px}
  .about-reference-right .about-copy{font-size:13px;line-height:1.6}
  .about-reference-right .about-copy p{margin-bottom:22px}
  .about-reference-rule{margin:28px 0 28px}
  .about-reference-cards{grid-template-columns:1fr;gap:14px}
  .about-reference-card{min-height:220px;padding:20px 22px}
  .about-reference-card strong{font-size:42px;margin-bottom:12px}
  .about-reference-card h3{font-size:16px}
  .about-reference-card p{font-size:11px}
  .about-reference-card i{left:22px;bottom:20px}
  .about-reference-curve{width:145vw;right:-65vw;bottom:-330px}
}

/* ==========================================================
   ABOUT — FINAL REFERENCE-2 GEOMETRY CORRECTION
   Match the supplied 1727×911 reference precisely. Scoped to
   #about only; no other section is changed.
   ========================================================== */
@media (min-width:901px){
  #about.about-section-reference{
    min-height:911px;
    height:911px;
    padding:70px 0 0;
  }

  #about .about-reference-grid{
    width:1518px !important;
    max-width:none !important;
    min-height:841px;
    margin-left:87px !important;
    margin-right:0 !important;
    grid-template-columns:751px 767px;
  }

  #about .about-reference-left{
    min-height:841px;
  }

  #about .about-reference-left .eyebrow{
    margin:13px 0 0;
  }

  #about .about-heading-rule{
    top:12px;
    left:182px;
    width:214px;
  }

  #about .about-reference-left h2{
    font-size:69px;
    line-height:.88;
    margin:27px 0 0;
  }

  #about .about-visual{
    left:-87px;
    top:360px;
    width:815px;
    height:481px;
    z-index:1;
  }

  #about .about-visual img{
    width:815px;
    height:481px;
    object-fit:fill;
    object-position:left top;
    mix-blend-mode:normal;
  }

  #about .about-reference-right{
    padding-top:34px;
  }

  #about .about-reference-right .about-copy{
    max-width:735px;
    font-size:16px;
    line-height:1.58;
  }

  #about .about-reference-right .about-copy p{
    margin-bottom:30px;
  }

  #about .about-reference-rule{
    width:78px;
    margin:36px 0 42px;
  }

  #about .about-reference-cards{
    grid-template-columns:repeat(3, 242px);
    gap:18px;
  }

  #about .about-reference-card{
    min-height:316px;
    height:316px;
    padding:28px 28px 24px;
    border-radius:13px;
  }

  #about .about-reference-card strong{
    font-size:51px;
    margin-bottom:18px;
  }

  #about .about-reference-card h3{
    font-size:17px;
    line-height:1.25;
    margin-bottom:16px;
  }

  #about .about-reference-card p{
    font-size:12px;
    line-height:1.65;
  }

  #about .about-reference-card i{
    left:28px;
    bottom:24px;
  }

  #about .about-reference-curve{
    width:78vw;
    height:430px;
    right:-12vw;
    bottom:-345px;
  }
}

@media (min-width:901px) and (max-width:1200px){
  #about.about-section-reference{
    height:auto;
    min-height:720px;
    padding:70px 0 80px;
  }
  #about .about-reference-grid{
    width:calc(100% - 40px) !important;
    max-width:1180px !important;
    margin:0 auto !important;
    grid-template-columns:47% 53%;
  }
  #about .about-visual{
    left:-25px;
    top:300px;
    width:min(720px,100%);
    height:360px;
  }
}

/* ==========================================================
   ABOUT — REFERENCE 3 / FINAL DESKTOP GEOMETRY
   Exact composition based on supplied 1727×911 reference.
   Scoped to #about only.
   ========================================================== */
@media (min-width:901px){
  #about.about-section-reference{
    position:relative;
    width:100%;
    height:911px;
    min-height:911px;
    padding:0;
    overflow:hidden;
    background:#fff;
  }

  #about .about-reference-grid{
    position:static;
    display:block;
    width:100% !important;
    max-width:none !important;
    min-height:0;
    margin:0 !important;
  }

  #about .about-reference-left{
    position:static;
    min-height:0;
    padding:0;
  }

  #about .about-reference-left .eyebrow{
    position:absolute;
    left:5.04%;
    top:86px;
    margin:0;
    font-size:13px;
    line-height:1;
    letter-spacing:2px;
    z-index:5;
  }

  #about .about-heading-rule{
    position:absolute;
    left:15.58%;
    top:94px;
    width:214px;
    height:2px;
    z-index:5;
  }

  #about .about-heading-rule b{
    right:-5px;
    top:-3px;
  }

  #about .about-reference-left h2{
    position:absolute;
    left:5.04%;
    top:136px;
    margin:0;
    font-size:69px;
    line-height:.88;
    letter-spacing:.15px;
    z-index:5;
  }

  #about .about-visual{
    position:absolute;
    left:0;
    top:440px;
    width:815px;
    height:471px;
    z-index:1;
  }

  #about .about-visual img{
    display:block;
    width:815px;
    height:471px;
    object-fit:cover;
    object-position:left top;
    mix-blend-mode:normal;
  }

  #about .about-reference-right{
    position:static;
    padding:0;
  }

  #about .about-reference-right .about-copy{
    position:absolute;
    left:48.58%;
    top:137px;
    width:665px;
    max-width:none;
    margin:0;
    color:#171d27;
    font-size:16px;
    line-height:1.58;
    z-index:5;
  }

  #about .about-reference-right .about-copy p{
    margin:0 0 31px;
  }

  #about .about-reference-rule{
    position:absolute;
    left:48.58%;
    top:395px;
    width:78px;
    height:2px;
    margin:0;
    z-index:5;
  }

  #about .about-reference-cards{
    position:absolute;
    left:48.58%;
    top:440px;
    display:grid;
    grid-template-columns:repeat(3,242px);
    gap:18px;
    width:762px;
    z-index:5;
  }

  #about .about-reference-card{
    width:242px;
    height:316px;
    min-height:316px;
    box-sizing:border-box;
    padding:28px 28px 24px;
    background:rgba(255,255,255,.97);
    border:1px solid rgba(215,25,32,.10);
    border-radius:13px;
    box-shadow:0 5px 24px rgba(215,25,32,.09);
  }

  #about .about-reference-card strong{
    font-size:51px;
    line-height:1;
    margin-bottom:18px;
  }

  #about .about-reference-card h3{
    margin:0 0 16px;
    font-size:17px;
    line-height:1.25;
  }

  #about .about-reference-card p{
    margin:0;
    font-size:12px;
    line-height:1.65;
  }

  #about .about-reference-card i{
    left:28px;
    bottom:24px;
    width:43px;
    height:3px;
  }

  #about .about-reference-curve{
    position:absolute;
    z-index:0;
    width:1200px;
    height:520px;
    right:-80px;
    bottom:-385px;
    border-radius:50% 50% 0 0;
    background:var(--red);
    box-shadow:0 -10px 0 rgba(255,255,255,.95),0 -20px 0 rgba(215,25,32,.18);
    transform:rotate(-8deg);
  }
}

/* ==========================================================
   ABOUT — REFERENCE 2 EXACT ALIGNMENT / FINAL
   Desktop geometry is proportionally locked to the supplied
   1727×911 reference. Scoped strictly to #about.
   ========================================================== */
@media (min-width:901px){
  #about.about-section-reference{
    position:relative;
    width:100%;
    height:52.75vw;
    min-height:0;
    max-height:none;
    padding:0;
    margin:0;
    overflow:hidden;
    background:#fff;
  }

  #about .about-reference-grid{
    position:relative;
    display:block;
    width:100%;
    max-width:none;
    min-height:0;
    height:100%;
    margin:0;
    padding:0;
  }

  #about .about-reference-left,
  #about .about-reference-right{
    position:static;
    min-height:0;
    padding:0;
    margin:0;
  }

  #about .about-reference-left .eyebrow{
    position:absolute;
    left:4.98vw;
    top:5.10vw;
    margin:0;
    font-size:.75vw;
    line-height:1;
    letter-spacing:.12vw;
    z-index:6;
  }

  #about .about-heading-rule{
    position:absolute;
    left:15.58vw;
    top:5.50vw;
    width:12.39vw;
    height:2px;
    margin:0;
    z-index:6;
  }

  #about .about-heading-rule i{
    width:100%;
    height:2px;
  }

  #about .about-heading-rule b{
    right:-.30vw;
    top:-.17vw;
    width:.52vw;
    height:.52vw;
  }

  #about .about-reference-left h2{
    position:absolute;
    left:4.98vw;
    top:8.10vw;
    margin:0;
    font-size:4.00vw;
    line-height:.88;
    letter-spacing:.01vw;
    z-index:6;
  }

  #about .about-visual{
    position:absolute;
    left:0;
    top:24.90vw;
    width:47.19vw;
    height:27.85vw;
    margin:0;
    z-index:1;
    overflow:hidden;
  }

  #about .about-visual img{
    display:block;
    width:47.19vw;
    height:27.85vw;
    max-width:none;
    object-fit:fill;
    object-position:left top;
    margin:0;
  }

  #about .about-reference-right .about-copy{
    position:absolute;
    left:48.58vw;
    top:8.08vw;
    width:38.50vw;
    max-width:none;
    margin:0;
    padding:0;
    color:#171d27;
    font-size:.93vw;
    line-height:1.58;
    z-index:6;
  }

  #about .about-reference-right .about-copy p{
    margin:0 0 1.72vw;
    padding:0;
  }

  #about .about-reference-rule{
    position:absolute;
    left:48.58vw;
    top:22.99vw;
    width:4.52vw;
    height:2px;
    margin:0;
    z-index:6;
  }

  #about .about-reference-cards{
    position:absolute;
    left:48.58vw;
    top:25.48vw;
    display:grid;
    grid-template-columns:repeat(3,14.01vw);
    gap:1.04vw;
    width:44.16vw;
    height:18.30vw;
    margin:0;
    padding:0;
    z-index:6;
  }

  #about .about-reference-card{
    position:relative;
    width:14.01vw;
    height:18.30vw;
    min-height:0;
    box-sizing:border-box;
    padding:1.62vw 1.62vw 1.39vw;
    margin:0;
    background:rgba(255,255,255,.98);
    border:1px solid rgba(215,25,32,.10);
    border-radius:.75vw;
    box-shadow:0 .29vw 1.39vw rgba(215,25,32,.09);
    overflow:hidden;
  }

  #about .about-reference-card strong{
    display:block;
    font-size:2.95vw;
    line-height:1;
    margin:0 0 1.05vw;
    color:var(--red);
  }

  #about .about-reference-card h3{
    margin:0 0 .93vw;
    font-size:.99vw;
    line-height:1.25;
    color:#111316;
  }

  #about .about-reference-card p{
    margin:0;
    font-size:.70vw;
    line-height:1.65;
    color:#202832;
  }

  #about .about-reference-card i{
    position:absolute;
    left:1.62vw;
    bottom:1.39vw;
    width:2.49vw;
    height:3px;
    margin:0;
    background:var(--red);
  }

  #about .about-reference-curve{
    position:absolute;
    z-index:0;
    width:69.48vw;
    height:30.00vw;
    right:-4.63vw;
    bottom:-22.30vw;
    border-radius:50% 50% 0 0;
    background:var(--red);
    box-shadow:0 -10px 0 rgba(255,255,255,.98),0 -20px 0 rgba(215,25,32,.18);
    transform:rotate(-8deg);
    transform-origin:center center;
  }
}

/* Exact reference curve layer — #about only */
@media (min-width:901px){
  #about .about-reference-curve{display:none !important;}
  #about .about-reference-curve-image{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    max-width:none;
    object-fit:fill;
    object-position:left top;
    z-index:0;
    pointer-events:none;
    display:block;
  }
}