/* ==========================================================================
   AE CONNECT  |  Home page stylesheet
   --------------------------------------------------------------------------
   Paired with template-home.php. Everything is scoped to .aec-home so it
   cannot leak into the Netlink theme or any Elementor page.

   INSTALL
     1. Upload to /wp-content/themes/netlink-child/assets/aec-home.css
     2. It is enqueued by the block in functions-snippet.php

   IMAGE RATIOS, measured from the real files so nothing is cropped:
     slider banners            1920 x 800   ratio 2.40
     product family images     1000 x 1000  ratio 1.00  square
     industry tiles             300 x 300   ratio 1.00  square
     about india map           1000 x 1126  ratio 0.888 portrait
     blog featured images      any shape, object-fit contain
   ========================================================================== */

/* ==========================================================================
   AE CONNECT  |  Home Page  |  v12
   --------------------------------------------------------------------------
   IMAGE RATIOS, measured from the real files so nothing is cropped:
     slider banners            1920 x 800   ratio 2.40
     product family images     1000 x 1000  ratio 1.00  square
     industry tiles             300 x 300   ratio 1.00  square
     blog creatives            2095 x 2560  ratio 0.818 portrait
     about india map           1000 x 1126  ratio 0.888 portrait
   Every container below uses the matching ratio, or object-fit contain where
   the image can be any shape.
   ========================================================================== */

.aec-home{
  --primary:#00B1F0; --blue:#0096D6; --blue-mid:#0090C6; --deep:#036E97;
  --black:#272727; --light:#F2F9FC; --navy:#102A43; --navy-2:#050D18; --white:#FFFFFF;
  --grad:linear-gradient(120deg,#00b1f0,#0090c6 60%,#036e97);
  --grad-rev:linear-gradient(120deg,#036e97,#0090c6 45%,#00b1f0);
  --body-c:#4A4A4A; --muted:#6E7681; --line:#E4EDF2;

  --font:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fs-xs:clamp(.75rem,.72rem + .13vw,.813rem);
  --fs-sm:clamp(.813rem,.79rem + .13vw,.875rem);
  --fs-base:clamp(.875rem,.85rem + .15vw,.938rem);
  --fs-md:clamp(.938rem,.9rem + .2vw,1rem);
  --fs-lg:clamp(1rem,.94rem + .28vw,1.125rem);
  --fs-eb:clamp(.875rem,.84rem + .18vw,1rem);
  --fs-h4:clamp(1.063rem,1.01rem + .26vw,1.188rem);
  --fs-h3:clamp(1.25rem,1.1rem + .74vw,1.625rem);
  --fs-h2:clamp(1.5rem,1.15rem + 1.75vw,2.188rem);
  --fs-h1:clamp(1.75rem,1.35rem + 2vw,2.5rem);

  --sec-y:clamp(3rem,1.9rem + 4.6vw,5.5rem);
  --gutter:clamp(1.125rem,.7rem + 1.8vw,2rem);
  --gap:clamp(1rem,.8rem + .95vw,1.375rem);
  --r:8px; --r-md:10px; --r-lg:20px;
  --ease:.25s ease; --container:1300px;
}

.aec-home *,.aec-home *::before,.aec-home *::after{box-sizing:border-box;margin:0;padding:0}

.aec-home{font-family:var(--font);font-size:var(--fs-md);line-height:1.7;color:var(--body-c);
  background:var(--white);-webkit-font-smoothing:antialiased}
.aec-home img{max-width:100%;height:auto;display:block}
.aec-home ul{list-style:none}
.aec-home a{text-decoration:none;color:var(--deep);transition:color var(--ease)}
.aec-home a:hover{color:var(--primary)}
.aec-home a:focus-visible,.aec-home button:focus-visible,.aec-home input:focus-visible,.aec-home textarea:focus-visible{
  outline:2px solid var(--deep);outline-offset:3px;border-radius:4px}
@media (prefers-reduced-motion:reduce){
  .aec-home *,.aec-home *::before,.aec-home *::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

.wrap{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.sec{padding-block:var(--sec-y)}
.sec-sm{padding-block:clamp(2.25rem,1.5rem + 3vw,3.5rem)}
.bg-white{background:var(--white)}
.bg-light{background:var(--light)}
.min0{min-width:0}

.aec-home h1,.aec-home h2,.aec-home h3,.aec-home h4{color:var(--black);font-weight:700;line-height:1.25}
.aec-home h1{font-size:var(--fs-h1);line-height:1.16}
.aec-home h2{font-size:var(--fs-h2);line-height:1.2}
.aec-home h3{font-size:var(--fs-h3)}
.aec-home h4{font-size:var(--fs-h4)}
.cy{color:var(--primary)}

.eb{display:block;font-size:var(--fs-eb);font-weight:600;
  text-transform:uppercase;color:var(--primary);margin-bottom:.85rem;letter-spacing:.02em}
.head{text-align:center;max-width:52rem;margin:0 auto clamp(2.25rem,1.4rem + 3vw,3.25rem)}
.head p{margin-top:1rem;font-size:var(--fs-md);line-height:1.75}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--font);
  font-size:var(--fs-sm);font-weight:700;line-height:1.2;text-transform:uppercase;
  padding:.75rem 1.35rem;border-radius:var(--r);border:2px solid transparent;cursor:pointer;
  transition:all var(--ease);min-height:44px}
.btn-cy{background:var(--primary);color:#fff;border-color:var(--primary)}
.btn-cy:hover{background:var(--deep);border-color:var(--deep);color:#fff}
.btn-out{background:transparent;color:var(--deep);border-color:var(--primary)}
.btn-out:hover{background:var(--primary);color:#fff}
.btn-w{background:#fff;color:var(--deep);border-color:#fff}
.btn-w:hover{background:var(--light);color:var(--deep)}
.btn-wo{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.btn-wo:hover{background:rgba(255,255,255,.14);border-color:#fff;color:#fff}
.btn-sm{padding:.55rem 1rem;min-height:38px;font-size:var(--fs-xs)}
.btn-full{width:100%}
.btns{display:flex;gap:.75rem;flex-wrap:wrap;align-items:center}

/* ==========================================================================
   1  HERO SLIDER   banners are 1920 x 800, ratio 2.40
   ========================================================================== */
/* --------------------------------------------------------------------------
   Netlink page title banner.

   The theme prints its own title bar with the page name and a breadcrumb
   above the content. On the home page that reads "Home NEW" and sits on top
   of the slider, and it also puts a second H1 on the page.

   This rule is deliberately NOT scoped to .aec-home, because the banner is
   the theme's markup and sits outside our wrapper. It is scoped instead to
   the body class WordPress adds for our template, so no other page is
   affected.
   -------------------------------------------------------------------------- */
.page-template-template-home .main-title-section-wrapper,
.page-template-template-category .main-title-section-wrapper{display:none}

.hero{position:relative;background:var(--navy-2);overflow:hidden}
.hslides{position:relative;aspect-ratio:1920/800}
.hslide{position:absolute;inset:0;opacity:0;transition:opacity .7s ease;pointer-events:none}
.hslide.on{opacity:1;pointer-events:auto}
.hslide img{width:100%;height:100%;object-fit:cover;object-position:center}
.hlink{display:block;width:100%;height:100%}
.hdots{position:absolute;left:0;right:0;bottom:clamp(.75rem,2vw,1.5rem);z-index:3;
  display:flex;gap:.5rem;justify-content:center}
.hdot{width:2.25rem;height:4px;border-radius:2px;border:none;padding:0;cursor:pointer;
  background:rgba(255,255,255,.45);transition:background var(--ease)}
.hdot[aria-current="true"]{background:var(--primary)}
.harrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:2.75rem;aspect-ratio:1;border-radius:50%;border:1px solid rgba(255,255,255,.35);
  background:rgba(5,13,24,.4);color:#fff;display:grid;place-items:center;cursor:pointer;
  transition:all var(--ease);font-size:.9rem}
.harrow:hover{background:var(--primary);border-color:var(--primary)}
.harrow.prev{left:clamp(.5rem,2vw,1.5rem)}
.harrow.next{right:clamp(.5rem,2vw,1.5rem)}

/* ==========================================================================
   2  ABOUT US
   India map graphic on the left with a small years badge below it, left aligned.
   Content sits on the right.
   Source image is 1000 x 1126, so the frame uses that exact ratio and
   object-fit contain. Nothing is cropped and there is no panel behind it.
   ========================================================================== */
.about{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(2rem,1.2rem + 2.8vw,3.75rem);align-items:center}

.about-art{position:relative}

/* No background, no radius, no shadow. The graphic sits on the page itself. */
.art-main{aspect-ratio:1000/1126;background:transparent}
.art-main img{width:100%;height:100%;object-fit:contain}

/* Small badge, left aligned below the map */
.exp-badge{margin:clamp(.85rem,.7rem + .6vw,1.25rem) auto 0 0;width:max-content;max-width:100%;
  background:var(--white);border-radius:var(--r);border-left:3px solid var(--primary);
  padding:.55rem .95rem;box-shadow:0 8px 22px rgba(16,42,67,.12);
  display:flex;align-items:center;gap:.6rem}
.exp-badge i{font-size:1rem;color:var(--primary)}
.exp-badge b{font-size:var(--fs-md);font-weight:800;color:var(--deep);
  line-height:1;font-variant-numeric:tabular-nums}
.exp-badge span{font-size:var(--fs-xs);color:var(--muted);font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}

/* Justified body copy with hyphenation so the right edge stays even */
.about-lead{font-size:var(--fs-md);line-height:1.8;margin-top:.9rem;
  text-align:justify;hyphens:auto}

.vm{margin-top:1.35rem;border-top:1px solid var(--line)}
.vm-row{padding:1rem 0;border-bottom:1px solid var(--line)}
.vm-row h3{font-size:var(--fs-md);font-weight:700;color:var(--black);margin-bottom:.25rem;
  display:flex;align-items:center;gap:.55rem}
.vm-row h3 i{color:var(--primary);font-size:.95rem}
.vm-row p{font-size:var(--fs-base);color:var(--body-c);line-height:1.75;
  text-align:justify;hyphens:auto}

/* ==========================================================================
   3  OUR PRODUCTS   square images, ratio 1 to 1, no badge
   ========================================================================== */
.famgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.fam{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
  overflow:hidden;display:flex;flex-direction:column;height:100%;
  transition:border-color var(--ease),box-shadow var(--ease),transform var(--ease)}
.fam:hover{border-color:var(--primary);box-shadow:0 14px 34px rgba(16,42,67,.11);transform:translateY(-4px)}
/* Square container matches the 1000 x 1000 source, nothing is cropped */
.fam-img{aspect-ratio:1/1;overflow:hidden;background:var(--light)}
.fam-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.fam:hover .fam-img img{transform:scale(1.04)}
.fam-b{padding:1.35rem;display:flex;flex-direction:column;gap:.75rem;flex:1}
.fam-b h3{font-size:var(--fs-h4);line-height:1.35}
.fam-b h3 a{color:var(--black)}
.fam-b h3 .aec-home a:hover{color:var(--primary)}
.fam-b > p{font-size:var(--fs-base);line-height:1.65;color:var(--body-c)}
.fam-links{display:flex;flex-wrap:wrap;gap:.4rem;flex:1;align-content:flex-start}
.fam-links a{font-size:var(--fs-xs);font-weight:600;color:var(--deep);
  background:var(--light);border:1px solid var(--line);border-radius:999px;
  padding:.3rem .75rem;transition:all var(--ease)}
.fam-links a:hover{background:var(--primary);border-color:var(--primary);color:#fff}
.fam-foot{margin-top:auto;padding-top:.5rem}

/* ==========================================================================
   4  TRUST
   ========================================================================== */
.trustrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));
  gap:clamp(1.5rem,1rem + 2vw,3rem);align-items:center}
.tlabel{font-size:var(--fs-xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:1rem}
.tcerts{display:flex;flex-wrap:wrap;gap:1.25rem 1.75rem;align-items:center}
.tcert{display:flex;align-items:center;gap:.6rem}
.tcert img{height:2.75rem;width:2.75rem;object-fit:contain}
.tcert span{font-size:var(--fs-sm);font-weight:600;color:var(--black);white-space:nowrap}
.tnums{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.tnum{padding-left:.9rem;border-left:3px solid var(--primary)}
.tnum b{display:block;font-size:clamp(1.125rem,.95rem + .8vw,1.5rem);font-weight:800;
  color:var(--black);line-height:1.1;font-variant-numeric:tabular-nums}
.tnum span{display:block;font-size:var(--fs-xs);color:var(--muted);font-weight:600;margin-top:.15rem}

/* ==========================================================================
   5  INDUSTRIES   four across, two rows. Sources are 300 x 300 squares.
   ========================================================================== */
.indgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.indtile{position:relative;border-radius:var(--r-md);overflow:hidden;aspect-ratio:1/1}
.indtile img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.indtile:hover img{transform:scale(1.07)}
.indtile::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,13,24,0) 42%,rgba(5,13,24,.86) 100%);
  transition:background var(--ease)}
.indtile:hover::after{background:linear-gradient(180deg,rgba(3,110,151,.2) 0%,rgba(5,13,24,.9) 100%)}
.indtile b{position:absolute;left:1rem;right:1rem;bottom:.9rem;z-index:2;
  color:#fff;font-size:var(--fs-md);font-weight:700;line-height:1.3}

/* ==========================================================================
   6  TRUSTED BY INDUSTRY LEADERS   sliding marquee, larger logos
   ========================================================================== */
.logos{overflow:hidden;position:relative;padding-block:1rem}
.logos::before,.logos::after{content:'';position:absolute;top:0;bottom:0;
  width:clamp(2.5rem,8vw,7rem);z-index:2;pointer-events:none}
.logos::before{left:0;background:linear-gradient(90deg,var(--white),rgba(255,255,255,0))}
.logos::after{right:0;background:linear-gradient(270deg,var(--white),rgba(255,255,255,0))}
.logotrack{display:flex;align-items:center;gap:clamp(1.5rem,1rem + 2vw,2.75rem);
  width:max-content;animation:logoslide 45s linear infinite}
.logos:hover .logotrack{animation-play-state:paused}
/* Logos show in their own colours at full opacity */
.logotrack img{height:clamp(3.25rem,2.4rem + 3.4vw,5.25rem);width:auto;max-width:none;
  object-fit:contain;transition:transform var(--ease)}
.logotrack img:hover{transform:scale(1.06)}
@keyframes logoslide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .logotrack{animation:none;flex-wrap:wrap;width:auto;justify-content:center;gap:1.75rem}
  .logos::before,.logos::after{display:none}
}

/* ==========================================================================
   7  TESTIMONIALS   the live Google Reviews widget renders here
   ========================================================================== */
.reviews-slot{border:1px dashed var(--line);border-radius:var(--r-md);
  background:var(--light);padding:clamp(2rem,1.5rem + 2vw,3rem);text-align:center}
.reviews-slot i{font-size:1.75rem;color:var(--primary);display:block;margin-bottom:.75rem}
.reviews-slot b{display:block;font-size:var(--fs-md);color:var(--black);margin-bottom:.35rem}
.reviews-slot p{font-size:var(--fs-base);color:var(--muted);line-height:1.7}
.reviews-slot code{display:inline-block;margin-top:.75rem;font-size:var(--fs-sm);
  background:var(--white);border:1px solid var(--line);border-radius:6px;
  padding:.4rem .75rem;color:var(--deep)}

/* ==========================================================================
   8  BLOG   three latest posts, pulled live by WordPress
   Featured images can be any shape, so the frame uses object-fit contain.
   Nothing is ever cropped, whatever image a post carries.
   ========================================================================== */
.postgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.post{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
  overflow:hidden;display:flex;flex-direction:column;height:100%;
  transition:border-color var(--ease),box-shadow var(--ease),transform var(--ease)}
.post:hover{border-color:var(--primary);box-shadow:0 14px 34px rgba(16,42,67,.11);transform:translateY(-4px)}
.post-img{aspect-ratio:4/3;background:var(--light);overflow:hidden;position:relative;
  display:grid;place-items:center;padding:.75rem}
.post-img img{width:100%;height:100%;object-fit:contain;transition:transform .5s ease}
.post:hover .post-img img{transform:scale(1.03)}
.post-cat{position:absolute;left:.85rem;top:.85rem;z-index:2;background:var(--primary);color:#fff;
  font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  padding:.3rem .7rem;border-radius:999px}
.post-b{padding:1.35rem;display:flex;flex-direction:column;gap:.65rem;flex:1;
  border-top:1px solid var(--line)}
.post-meta{display:flex;align-items:center;gap:.5rem;font-size:var(--fs-xs);color:var(--muted);font-weight:600}
.post-meta i{color:var(--primary);font-size:.7rem}
.post-b h3{font-size:var(--fs-h4);line-height:1.4}
.post-b h3 a{color:var(--black)}
.post-b h3 .aec-home a:hover{color:var(--primary)}
.post-b > p{font-size:var(--fs-base);line-height:1.7;color:var(--body-c);flex:1}
.post-more{display:inline-flex;align-items:center;gap:.4rem;font-size:var(--fs-sm);
  font-weight:700;color:var(--deep);margin-top:auto}
.post-more i{font-size:.7rem;transition:transform var(--ease)}
.post:hover .post-more i{transform:translateX(.25rem)}

/* ==========================================================================
   9  CTA
   ========================================================================== */
.ctaband{background:var(--grad-rev);position:relative;overflow:hidden;isolation:isolate}
.ctaband::before{content:'';position:absolute;inset:0;z-index:-1;
  background-image:radial-gradient(circle,rgba(255,255,255,.16) 1px,transparent 1px);background-size:30px 30px}
.ctagrid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:clamp(1.5rem,1rem + 2.4vw,2.75rem);align-items:center}
.ctaband h2{color:#fff;margin-bottom:.65rem}
.ctaband p{color:rgba(255,255,255,.88);font-size:var(--fs-md);line-height:1.65}
/* The support sentence stays on one line once there is room for it */
@media (min-width:1180px){.ctaband p{white-space:nowrap}}
.ctaband .btns{justify-content:flex-end}

/* ==========================================================================
   10  CONTACT
   ========================================================================== */
.contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,24rem),1fr));
  gap:clamp(2rem,1.2rem + 3vw,3.75rem);align-items:center}
.cinfo{display:flex;flex-direction:column;gap:1rem;margin-top:1.5rem}
.citem{display:flex;gap:.85rem;align-items:flex-start;font-size:var(--fs-md)}
.citem i{color:var(--primary);font-size:1.05rem;width:1.4rem;text-align:center;margin-top:.2rem;flex-shrink:0}
.citem a,.citem span{color:var(--black);line-height:1.6}
.soc{display:flex;gap:.5rem;margin-top:1.5rem;flex-wrap:wrap}
.soc a{width:2.35rem;aspect-ratio:1;border-radius:var(--r);background:var(--primary);
  color:#fff;display:grid;place-items:center;font-size:.9rem}
.soc a:hover{background:var(--deep);color:#fff}
.form{background:var(--light);border-radius:var(--r-md);padding:clamp(1.5rem,1.1rem + 1.6vw,2.25rem)}
.fg{display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem}
.fd{display:flex;flex-direction:column;gap:.3rem;min-width:0}
.fd.full{grid-column:1/-1}
.fd label{font-size:var(--fs-xs);font-weight:600;color:var(--black)}
.fd input,.fd textarea{font-family:var(--font);font-size:var(--fs-base);color:var(--black);
  padding:.75rem .9rem;border:1px solid var(--line);border-radius:var(--r);background:var(--white);
  min-height:46px;width:100%;transition:border-color var(--ease)}
.fd input:focus,.fd textarea:focus{border-color:var(--primary);outline:none}
.fd textarea{min-height:106px;resize:vertical}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1366px){.aec-home{--container:1140px}}

@media (max-width:1200px){
  .famgrid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:1024px){
  .about{grid-template-columns:1fr}
  /* Text first, map below it, on tablet and phone */
  .about-art{order:2;max-width:24rem;margin-inline:auto;width:100%;
    margin-top:clamp(1.5rem,1.2rem + 1.6vw,2.25rem)}
  .exp-badge{margin-inline:auto}
  .indgrid{grid-template-columns:repeat(2,1fr)}
  .postgrid{grid-template-columns:repeat(2,1fr)}
  .ctagrid{grid-template-columns:1fr}
  .ctaband .btns{justify-content:flex-start}
}

@media (max-width:900px){
  .tnums{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:767px){
  .btns{width:100%}
  .btns .btn{flex:1 1 auto}
  /* Section headings stay centred on phones */
  .head{text-align:center}
  .head .btns{justify-content:center}
  .harrow{display:none}
  .famgrid{grid-template-columns:1fr}
  .postgrid{grid-template-columns:1fr}
  .fg{grid-template-columns:1fr}
  /* Justified text needs room, so narrow columns go back to left aligned */
  .about-lead,.vm-row p{text-align:left;hyphens:manual}
}

@media (max-width:480px){
  .btns{flex-direction:column}
  .btn{width:100%}
  .aec-home br{display:none}
}

@media (max-width:360px){
  .aec-home{--gutter:1rem}
}

@media (max-height:480px) and (orientation:landscape){
  .sec{padding-block:2.5rem}
}

@media print{
  .harrow,.hdots,.btn,.form,.ctaband,.soc,.reviews-slot,.logos{display:none!important}
  .fam,.post,.indtile{break-inside:avoid}
}