/* ==========================================================================
   TECHNO FABRICATORS (INDIA) PVT. LTD. — Site Stylesheet
   Design language: precision engineering / technical-drawing industrial
   ========================================================================== */

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

:root{
  --black:#111111;
  --dark:#1B1B1B;
  --charcoal:#292929;
  --cyan:#8EDCE5;
  --cyan-accent:#6FD5DF;
  --cyan-light:#DDF6F8;
  --white:#FFFFFF;
  --gray-light:#F5F7F8;
  --border:#E2E6E8;
  --text:#252525;
  --text-secondary:#6B7280;

  --font-display:'Barlow Condensed', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;

  --container:1280px;
  --radius:6px;
  --shadow-sm:0 1px 2px rgba(17,17,17,.06), 0 1px 1px rgba(17,17,17,.04);
  --shadow-md:0 10px 30px rgba(17,17,17,.09);
  --shadow-lg:0 24px 60px rgba(17,17,17,.16);
  --ease:cubic-bezier(.2,.7,.3,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
html,body{overflow-x:hidden;max-width:100%;}
body{
  font-family:var(--font-body);
  color:var(--text);
  background:var(--white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
input,textarea,select{font-family:inherit;font-size:1rem;}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.08;letter-spacing:.2px;color:var(--black);}
.container{max-width:var(--container);margin:0 auto;padding:0 24px;}
:focus-visible{outline:2px solid var(--cyan-accent);outline-offset:3px;}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
}


@media (min-width: 1024px) {
  .hero-content {
    width: 50%;
    margin-left: 110px;
    margin-right: auto;
    text-align: left;
    transform: translateX(-120px);
  }
}

/* ---------- Utility ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:12.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--charcoal);
  margin-bottom:14px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--cyan-accent);display:inline-block;}
.eyebrow.on-dark{color:var(--cyan);}
.section-head{max-width:640px;margin-bottom:48px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.section-head h2{font-size:clamp(30px,3.4vw,44px);margin-bottom:14px;}
.section-head p{color:var(--text-secondary);font-size:16.5px;}
.section{padding:96px 0;}
.section.tight{padding:72px 0;}
.section.dark{background:var(--dark);color:#D7DADC;}
.section.dark h2, .section.dark h3{color:var(--white);}
.section.charcoal{background:var(--charcoal);}
.section.light-bg{background:var(--gray-light);}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font-mono);font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  padding:15px 28px;border-radius:2px;transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .25s ease, color .25s ease, border-color .25s ease;
  white-space:nowrap;
}
.btn svg{width:15px;height:15px;transition:transform .3s var(--ease);}
.btn:hover svg{transform:translateX(4px);}
.btn-primary{background:var(--cyan-accent);color:var(--black);}
.btn-primary:hover{background:var(--cyan);box-shadow:var(--shadow-md);transform:translateY(-2px);}
.btn-dark{background:var(--black);color:var(--white);}
.btn-dark:hover{background:var(--charcoal);transform:translateY(-2px);box-shadow:var(--shadow-md);}
.btn-outline{background:transparent;color:var(--white);border:1.5px solid rgba(255,255,255,.4);}
.btn-outline:hover{border-color:var(--cyan-accent);color:var(--cyan-accent);}
.btn-outline-dark{background:transparent;color:var(--black);border:1.5px solid var(--border);}
.btn-outline-dark:hover{border-color:var(--black);}
.btn-block{width:100%;}
.btn-sm{padding:11px 18px;font-size:12px;}

.tag{
  display:inline-block;font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--charcoal);background:var(--cyan-light);border:1px solid var(--cyan);
  padding:4px 10px;border-radius:2px;
}

.corner-frame{position:relative;}
.corner-frame::before,.corner-frame::after{
  content:"";position:absolute;width:22px;height:22px;border:2px solid var(--cyan-accent);opacity:.85;
}
.corner-frame::before{top:-8px;left:-8px;border-right:none;border-bottom:none;}
.corner-frame::after{bottom:-8px;right:-8px;border-left:none;border-top:none;}

.reveal{opacity:1;}
.reveal.pre{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease), transform .7s var(--ease);}
.reveal.pre.in{opacity:1;transform:translateY(0);}

/* Staggered reveal for grid items — cards animate in sequence, not all at once */
.product-grid .reveal:nth-child(1),.cat-grid .reveal:nth-child(1),.region-grid .reveal:nth-child(1),.clients-grid .reveal:nth-child(1),.related-strip .reveal:nth-child(1){transition-delay:.03s;}
.product-grid .reveal:nth-child(2),.cat-grid .reveal:nth-child(2),.region-grid .reveal:nth-child(2),.clients-grid .reveal:nth-child(2),.related-strip .reveal:nth-child(2){transition-delay:.09s;}
.product-grid .reveal:nth-child(3),.cat-grid .reveal:nth-child(3),.region-grid .reveal:nth-child(3),.clients-grid .reveal:nth-child(3),.related-strip .reveal:nth-child(3){transition-delay:.15s;}
.product-grid .reveal:nth-child(4),.cat-grid .reveal:nth-child(4),.region-grid .reveal:nth-child(4),.clients-grid .reveal:nth-child(4),.related-strip .reveal:nth-child(4){transition-delay:.21s;}
.product-grid .reveal:nth-child(5),.cat-grid .reveal:nth-child(5),.region-grid .reveal:nth-child(5),.clients-grid .reveal:nth-child(5){transition-delay:.27s;}
.product-grid .reveal:nth-child(6),.cat-grid .reveal:nth-child(6),.region-grid .reveal:nth-child(6),.clients-grid .reveal:nth-child(6){transition-delay:.33s;}
.product-grid .reveal:nth-child(7),.cat-grid .reveal:nth-child(7),.region-grid .reveal:nth-child(7),.clients-grid .reveal:nth-child(7){transition-delay:.39s;}
.product-grid .reveal:nth-child(8),.cat-grid .reveal:nth-child(8),.region-grid .reveal:nth-child(8),.clients-grid .reveal:nth-child(8){transition-delay:.45s;}
.product-grid .reveal:nth-child(n+9),.cat-grid .reveal:nth-child(n+9),.region-grid .reveal:nth-child(n+9),.clients-grid .reveal:nth-child(n+9){transition-delay:.5s;}

/* ==========================================================================
   TOP BAR
   ========================================================================== */
.topbar{
  background:var(--black);color:#B9BEC1;font-family:var(--font-mono);font-size:12.5px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.topbar .container{display:flex;align-items:center;justify-content:space-between;height:40px;}
.topbar-left{display:flex;align-items:center;gap:26px;}
.topbar a{display:inline-flex;align-items:center;gap:7px;transition:color .2s ease;}
.topbar a:hover{color:var(--cyan);}
.topbar svg{width:13px;height:13px;flex:none;color:var(--cyan-accent);}
.topbar-right{display:flex;align-items:center;gap:16px;}
.topbar-right .social a{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.16);border-radius:50%;}
.topbar-right .social a:hover{border-color:var(--cyan-accent);}
.topbar-right .social svg{width:12px;height:12px;}
.topbar-est{color:var(--cyan);letter-spacing:.08em;}
/* Email in topbar: switch from mono to clean sans */
.topbar-left a[href^="mailto"]{
  font-family:var(--font-body);font-size:13.5px;font-weight:500;letter-spacing:.01em;color:#E7EAEB;
}
@media (max-width:860px){ .topbar-est{display:none;} .topbar-right{display:none;} }
@media (max-width:640px){ .topbar-left .hide-mobile{display:none;} .topbar .container{height:36px;} }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{
  background:var(--white);
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:950;
  transition:box-shadow .3s ease, padding .3s ease;
}
.site-header.scrolled{box-shadow:0 6px 24px rgba(17,17,17,.08);}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;height:96px;transition:height .3s ease;}
.site-header.scrolled .header-inner{height:78px;}
.brand{display:flex;align-items:center;gap:12px;flex:none;}
.brand img{height:102px;width:auto;transition:height .3s ease;}
.site-header.scrolled .brand img{height:60px;}

.main-nav{display:flex;align-items:center;gap:2px;}
.main-nav > ul{display:flex;align-items:stretch;gap:2px;}
.main-nav > ul > li{position:relative;}
.main-nav > ul > li > a{
  display:flex;align-items:center;gap:6px;height:96px;padding:0 16px;
  font-family:var(--font-body);font-weight:600;font-size:15px;color:var(--text);
  border-bottom:2px solid transparent;transition:color .2s ease, border-color .2s ease;
}
.site-header.scrolled .main-nav > ul > li > a{height:78px;}
.main-nav > ul > li > a:hover,
.main-nav > ul > li.active > a{color:var(--black);border-color:var(--cyan-accent);}
.main-nav .chev{width:9px;height:9px;transition:transform .25s ease;color:var(--text-secondary);}
.main-nav li:hover .chev{transform:rotate(180deg);}

.header-cta{display:flex;align-items:center;gap:18px;flex:none;}
.header-phone{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:13px;}
.header-phone .ico{width:36px;height:36px;border-radius:50%;background:var(--cyan-light);display:flex;align-items:center;justify-content:center;color:var(--charcoal);flex:none;}
.header-phone .ico svg{width:16px;height:16px;}
.header-phone .lbl{color:var(--text-secondary);font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;display:block;}
.header-phone .num{color:var(--black);font-weight:600;}
@media(max-width:1180px){ .header-phone{display:none;} }

/* Dropdown mega-menu for Products */
.dropdown{
  position:absolute;top:100%;left:50%;transform:translate(-50%,10px);
  background:var(--white);border:1px solid var(--border);box-shadow:var(--shadow-lg);
  min-width:640px;padding:22px;border-radius:4px;border-top:3px solid var(--cyan-accent);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s ease, transform .25s ease, visibility .25s;
  z-index:400;
}
@media(min-width:1081px){
  .main-nav li:hover .dropdown{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);}
}
.dropdown-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 22px;}
.dropdown-grid a{
  display:flex;align-items:center;gap:12px;padding:10px 10px;border-radius:3px;min-width:0;
  font-size:14.5px;font-weight:500;color:var(--text);transition:background .2s ease,color .2s ease,padding-left .2s ease;
}
.dropdown-grid a span:last-child{overflow-wrap:break-word;}
.dropdown-grid a:hover{background:var(--gray-light);color:var(--black);padding-left:14px;}
.dropdown-grid a .dot{width:6px;height:6px;background:var(--cyan-accent);border-radius:50%;flex:none;}
.dropdown-foot{margin-top:16px;padding-top:16px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:16px;}
.dropdown-foot a{font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--charcoal);display:inline-flex;align-items:center;gap:8px;white-space:nowrap;}
.dropdown-foot a svg{flex:none;}
.dropdown-foot a:hover{color:var(--cyan-accent);}

/* Mobile toggle */
.menu-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;flex:none;}
.menu-toggle span{width:24px;height:2px;background:var(--black);transition:transform .3s ease, opacity .3s ease;}
.menu-toggle.active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.menu-toggle.active span:nth-child(2){opacity:0;}
.menu-toggle.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

@media(max-width:1080px){
  .main-nav{position:fixed;top:0;right:-100%;width:min(360px,88vw);height:100vh;background:var(--black);
    flex-direction:column;align-items:stretch;padding:100px 0 30px;transition:right .4s var(--ease);overflow-y:auto;z-index:900;}
  .main-nav.open{right:0;}
  .main-nav>ul{flex-direction:column;gap:0;width:100%;}
  .main-nav>ul>li>a{height:auto;padding:17px 30px;color:#E9EBEC;border-bottom:1px solid rgba(255,255,255,.08);justify-content:space-between;}
  .main-nav>ul>li>a:hover, .main-nav>ul>li.active>a{color:var(--cyan);border-color:rgba(255,255,255,.08);}
  .dropdown{position:static;transform:none;min-width:0;box-shadow:none;border:none;border-top:none;background:rgba(255,255,255,.03);
    max-height:0;overflow:hidden;padding:0 30px;opacity:1;visibility:visible;pointer-events:auto;transition:max-height .35s ease, padding .35s ease;}
  .main-nav li.open .dropdown{max-height:900px;padding:10px 30px 18px;}
  .dropdown-grid{grid-template-columns:1fr;}
  .dropdown-grid a{color:#C7CBCD;}
  .dropdown-grid a:hover{background:rgba(255,255,255,.06);color:var(--white);}
  .dropdown-foot a{color:var(--cyan);}
  .menu-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);opacity:0;visibility:hidden;transition:opacity .35s ease;z-index:850;}
  .menu-backdrop.show{opacity:1;visibility:visible;}
  .menu-toggle{display:flex;}
  .mobile-close{display:flex;justify-content:flex-end;padding:0 26px;position:absolute;top:26px;right:6px;}
  .mobile-close button{color:var(--white);width:38px;height:38px;border:1px solid rgba(255,255,255,.2);border-radius:50%;display:flex;align-items:center;justify-content:center;}
}
@media(min-width:1081px){ .mobile-close{display:none;} }
@media(max-width:520px){ .brand img{height:58px;} .header-inner{height:82px;} }

/* ==========================================================================
   BREADCRUMB / PAGE HERO (inner pages)
   ========================================================================== */
.page-hero{
  background:linear-gradient(120deg,var(--black) 0%, var(--dark) 55%, var(--charcoal) 100%);
  position:relative;overflow:hidden;padding:64px 0 52px;color:var(--white);
}
.page-hero::before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(142,220,229,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(142,220,229,.06) 1px,transparent 1px);
  background-size:44px 44px;mask-image:linear-gradient(to bottom, black, transparent 85%);
}
.page-hero .container{position:relative;}
.page-hero h1{color:var(--white);font-size:clamp(32px,4.4vw,54px);}
.breadcrumb{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:12.5px;letter-spacing:.05em;color:var(--cyan);margin-bottom:18px;text-transform:uppercase;}
.breadcrumb svg{width:11px;height:11px;color:#5C6367;}
.breadcrumb span{color:#8B9195;}

/* ==========================================================================
   HERO SLIDER (home)
   ========================================================================== */
.hero-slider{position:relative;height:min(80vh,600px);min-height:420px;overflow:hidden;background:var(--black);}
.hero-swiper{position:absolute;inset:0;}
.hero-swiper .swiper-slide{position:relative;}
.hero-swiper .swiper-slide img{width:100%;height:100%;object-fit:cover;object-position:62% center;}
.hero-swiper .swiper-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(9,9,9,.95) 0%,rgba(10,10,11,.9) 30%,rgba(17,17,17,.55) 52%,rgba(17,17,17,.38) 68%,rgba(17,17,17,.62) 100%);}
@media(max-width:760px){
  .hero-slider{ height:min(72vh,600px); min-height:520px; }
  .hero-swiper .swiper-slide img{ object-position:78% center; }
}
.hero-content{position:absolute;inset:0;display:flex;align-items:center;z-index:5;}
.hero-text{max-width:590px;color:var(--white);}
.hero-text .eyebrow{color:var(--cyan);}
.hero-text .eyebrow::before{background:var(--cyan);}
.hero-text h1{color:var(--white);font-size:clamp(38px,5.6vw,68px);margin-bottom:20px;letter-spacing:.2px;}
.hero-text h1 em{font-style:normal;color:var(--cyan);}
.hero-text p{font-size:17.5px;color:#CBD0D2;max-width:520px;margin-bottom:34px;}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:44px;}
.hero-meta{display:flex;gap:36px;flex-wrap:wrap;}
.hero-meta div{border-left:2px solid var(--cyan-accent);padding-left:14px;}
.hero-meta .num{font-family:var(--font-display);font-weight:700;font-size:30px;color:var(--white);line-height:1;}
.hero-meta .lbl{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#9BA1A4;margin-top:6px;}

.hero-dots{position:absolute;bottom:34px;left:0;right:0;z-index:6;display:flex;justify-content:center;gap:10px;}
.hero-dots .swiper-pagination-bullet{width:34px;height:3px;border-radius:0;background:rgba(255,255,255,.28);opacity:1;transition:background .3s ease;margin:0;}
.hero-dots .swiper-pagination-bullet-active{background:var(--cyan-accent);}
.hero-nav{position:absolute;bottom:30px;right:24px;z-index:6;display:flex;gap:10px;}
@media(max-width:860px){ .hero-nav{display:none;} }
.hero-nav button{width:46px;height:46px;border:1px solid rgba(255,255,255,.28);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--white);transition:border-color .25s ease,background .25s ease;}
.hero-nav button:hover{border-color:var(--cyan-accent);background:rgba(142,220,229,.1);}
.hero-nav svg{width:16px;height:16px;}
.hero-scroll{position:absolute;right:34px;bottom:120px;z-index:6;color:#9BA1A4;writing-mode:vertical-rl;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;display:flex;align-items:center;gap:14px;}
.hero-scroll::after{content:"";width:1px;height:60px;background:linear-gradient(var(--cyan-accent),transparent);}
@media(max-width:760px){ .hero-scroll{display:none;} .hero-meta{gap:22px;} }

/* ==========================================================================
   ABOUT
   ========================================================================== */
/* .about-grid{display:grid;grid-template-columns:.86fr 1fr;gap:70px;align-items:center;}
.about-media{position:relative;}
.about-media .frame{position:relative;border-radius:4px;overflow:hidden;box-shadow:var(--shadow-lg);}
.about-media img{width:100%;height:520px;object-fit:cover;}
.about-badge{
  position:absolute;left:-28px;bottom:-28px;background:var(--black);color:var(--white);
  padding:22px 26px;border-radius:4px;box-shadow:var(--shadow-lg);border-left:3px solid var(--cyan-accent);
  min-width:190px;
}
.about-badge .num{font-family:var(--font-display);font-size:44px;font-weight:800;color:var(--cyan);line-height:1;}
.about-badge .lbl{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#B9BEC1;margin-top:6px;}
.about-copy h2{margin-bottom:20px;}
.about-copy > p{color:var(--text-secondary);font-size:16.5px;margin-bottom:26px;}
.about-points{display:grid;grid-template-columns:1fr 1fr;gap:16px 22px;margin-bottom:32px;}
.about-points li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;font-weight:500;}
.about-points svg{width:18px;height:18px;color:var(--charcoal);background:var(--cyan-light);border-radius:50%;padding:3px;flex:none;margin-top:1px;}
@media(max-width:940px){
  .about-grid{grid-template-columns:1fr;gap:48px;}
  .about-media img{height:380px;}
  .about-badge{left:16px;bottom:-24px;padding:16px 20px;min-width:150px;}
  .about-points{grid-template-columns:1fr;}
} */

/* =========================================================
   ABOUT SECTION
========================================================= */

.about-section {
  width: 100%;
  padding: 90px 0;
  background: #ffffff;
  overflow: hidden;
}

.about-section .container {
  width: min(1200px, calc(100% - 40px));
  margin: 0 auto;
}


/* =========================================================
   MAIN GRID
========================================================= */

.about-grid {
  display: grid;
  grid-template-columns: 1fr 0.95fr;
  align-items: center;
  gap: 75px;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.about-copy {
  width: 100%;
  max-width: 650px;
}

.about-copy .eyebrow {
  display: inline-block;
  margin-bottom: 14px;

  color: #8edce5;

  font-size: 17px;
  line-height: 1.3;

  font-weight: 700;

  letter-spacing: 0.3px;
}


/* =========================================================
   HEADING
========================================================= */

.about-copy h2 {
  margin: 0;

  color: #0d1244;

  font-size: clamp(30px, 3vw, 42px);

  line-height: 1.18;

  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: -0.4px;
}


/* =========================================================
   ACCENT LINE
========================================================= */

.about-line {
  width: 52px;
  height: 3px;

  margin: 22px 0 28px;

  background: #8edce5;
}


/* =========================================================
   PARAGRAPHS
========================================================= */

.about-copy p {
  margin: 0 0 20px;

  color: #333b45;

  font-size: 16px;

  line-height: 1.7;

  font-weight: 400;
}


/* =========================================================
   FEATURE POINTS
========================================================= */

.about-points {
  margin: 26px 0 32px;
  padding: 0;

  list-style: none;
}

.about-points li {
  display: flex;

  align-items: center;

  gap: 12px;

  margin-bottom: 15px;

  color: #222831;

  font-size: 15.5px;

  line-height: 1.5;

  font-weight: 500;
}

.about-points li svg {
  width: 21px;
  height: 21px;

  min-width: 21px;

  color: #8edce5;
}


/* =========================================================
   ACTION AREA
========================================================= */

.about-actions {
  display: flex;

  align-items: center;

  gap: 40px;

  padding-top: 25px;

  border-top: 1px solid #e5e7eb;
}


/* =========================================================
   READ MORE BUTTON
========================================================= */

.about-btn {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 12px;

  min-height: 54px;

  padding: 0 28px;

  background: #111111;

  color: #ffffff;

  text-decoration: none;

  font-size: 14px;

  font-weight: 700;

  letter-spacing: 0.4px;

  transition:
    background 0.3s ease,
    color 0.3s ease,
    transform 0.3s ease;
}

.about-btn:hover {
  background: #8edce5;

  color: #111111;

  transform: translateY(-2px);
}

.about-btn svg {
  width: 18px;
  height: 18px;
}


/* =========================================================
   CONTACT
========================================================= */

.about-contact {
  display: flex;

  align-items: center;

  gap: 14px;
}

.contact-icon {
  width: 54px;
  height: 54px;

  flex: 0 0 54px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  background: #f0f2f3;
}

.contact-icon svg {
  width: 27px;
  height: 27px;

  color: #111111;
}

.contact-text span {
  display: block;

  margin-bottom: 4px;

  color: #65707b;

  font-size: 14px;
}

.contact-text strong {
  display: block;

  color: #111111;

  font-size: 18px;

  line-height: 1.3;

  font-weight: 800;
}


/* =========================================================
   RIGHT IMAGE
========================================================= */

.about-media {
  position: relative;

  width: 100%;
}

.about-image-frame {
  position: relative;

  width: 100%;

  height: 650px;

  overflow: visible;
}


/* =========================================================
   MAIN IMAGE
========================================================= */

.about-main-image {
  display: block;

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center;

  border-radius: 0 20px 20px 20px;
}


/* =========================================================
   ROUND LOGO
   THIS IMAGE WILL ROTATE
========================================================= */

.about-round-logo {
  position: absolute;

  z-index: 10;

  top: -45px;

  left: -55px;

  width: 175px;

  height: 175px;

  padding: 10px;

  display: flex;

  align-items: center;

  justify-content: center;

  background: #ffffff;

  border-radius: 50%;

  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.10);
}


/* =========================================================
   ROTATING IMAGE
========================================================= */

.about-round-logo svg {
  display: block;

  width: 100%;

  height: 100%;

  overflow: visible;
}

.about-round-logo .gear-spin {
  transform-origin: 100px 100px;

  /*
     12 seconds = smooth rotation
  */
  animation: roundLogoRotate 12s linear infinite;

  will-change: transform;
}

.about-round-logo .gear-wheel-center {
  fill: #6FD5DF; /* logo cyan */
}

.about-round-logo .gear-wheel-text {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 15.5px;
  letter-spacing: 2.2px;
  fill: #111111;
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  .about-round-logo .gear-spin { animation: none; }
}


/* =========================================================
   360 DEGREE ROTATION
========================================================= */

@keyframes roundLogoRotate {

  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }

}


/* =========================================================
   STATIC BOTTOM GEAR
========================================================= */

.gear-decoration {
  position: absolute;

  z-index: 8;

  right: -42px;

  bottom: -58px;

  width: 190px;

  height: 190px;

  background: #ffffff;

  pointer-events: none;

  /*
     IMPORTANT:
     No animation here.
     No rotate here.
     This gear stays STATIC.
  */

  clip-path: polygon(
    50% 0%,
    61% 8%,
    72% 4%,
    80% 15%,
    91% 20%,
    88% 33%,
    98% 43%,
    91% 54%,
    96% 67%,
    84% 74%,
    81% 87%,
    68% 84%,
    58% 96%,
    47% 89%,
    35% 98%,
    28% 85%,
    14% 86%,
    16% 72%,
    4% 64%,
    11% 52%,
    2% 41%,
    14% 32%,
    9% 19%,
    22% 15%,
    30% 3%,
    41% 9%
  );
}


/* =========================================================
   STATIC GEAR CENTER
========================================================= */

.gear-center {
  position: absolute;

  top: 50%;
  left: 50%;

  width: 82px;
  height: 82px;

  transform: translate(-50%, -50%);

  border-radius: 50%;

  background: #111111;
}

.gear-center::after {
  content: "";

  position: absolute;

  top: 50%;
  left: 50%;

  width: 38px;
  height: 38px;

  transform: translate(-50%, -50%);

  border-radius: 50%;

  background: #ffffff;
}


/* =========================================================
   FORCE STATIC GEAR
========================================================= */

.gear-decoration,
.gear-decoration *,
.gear-center {
  animation: none !important;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

  .about-section {
    padding: 75px 0;
  }

  .about-grid {
    gap: 55px;
  }

  .about-copy h2 {
    font-size: 34px;
  }

  .about-image-frame {
    height: 560px;
  }

  .about-round-logo {
    left: -30px;

    top: -35px;

    width: 150px;

    height: 150px;
  }

  .gear-decoration {
    right: -30px;

    bottom: -45px;

    width: 165px;

    height: 165px;
  }

  .gear-center {
    width: 72px;

    height: 72px;
  }

  .gear-center::after {
    width: 34px;

    height: 34px;
  }
}


/* =========================================================
   TABLET PORTRAIT
========================================================= */

@media (max-width: 900px) {

  .about-grid {
    grid-template-columns: 1fr;

    gap: 75px;
  }

  .about-copy {
    max-width: 100%;
  }

  .about-media {
    max-width: 650px;

    margin: 0 auto;
  }

  .about-image-frame {
    height: 550px;
  }

  .about-round-logo {
    left: 15px;

    top: -40px;
  }

  .gear-decoration {
    right: -20px;

    bottom: -45px;
  }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

  .about-section {
    padding: 55px 0;
  }

  .about-section .container {
    width: min(100% - 30px, 1200px);
  }

  .about-grid {
    gap: 60px;
  }


  /* HEADING */

  .about-copy h2 {
    font-size: 28px;

    line-height: 1.22;
  }


  /* TEXT */

  .about-copy p {
    font-size: 15px;

    line-height: 1.65;
  }


  /* POINTS */

  .about-points li {
    align-items: flex-start;

    font-size: 14.5px;
  }

  .about-points li svg {
    margin-top: 2px;
  }


  /* ACTIONS */

  .about-actions {
    flex-direction: column;

    align-items: flex-start;

    gap: 25px;
  }


  /* IMAGE */

  .about-image-frame {
    height: 430px;
  }


  /* ROUND LOGO */

  .about-round-logo {
    width: 125px;

    height: 125px;

    top: -32px;

    left: 5px;

    padding: 8px;
  }


  /* GEAR */

  .gear-decoration {
    width: 125px;

    height: 125px;

    right: -8px;

    bottom: -30px;
  }

  .gear-center {
    width: 56px;

    height: 56px;
  }

  .gear-center::after {
    width: 26px;

    height: 26px;
  }


  /* CONTACT */

  .contact-icon {
    width: 50px;

    height: 50px;

    flex-basis: 50px;
  }

  .contact-text strong {
    font-size: 17px;
  }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

  .about-section {
    padding: 45px 0;
  }

  .about-copy h2 {
    font-size: 25px;
  }

  .about-copy .eyebrow {
    font-size: 15px;
  }

  .about-image-frame {
    height: 360px;
  }

  .about-round-logo {
    width: 105px;

    height: 105px;

    top: -25px;
  }

  .gear-decoration {
    width: 105px;

    height: 105px;

    right: -5px;

    bottom: -25px;
  }

  .gear-center {
    width: 48px;

    height: 48px;
  }

  .gear-center::after {
    width: 22px;

    height: 22px;
  }

  .about-btn {
    width: 100%;
  }
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .about-round-logo .gear-spin {
    animation: none;
  }

}





/* ==========================================================================
   WHY US
   ========================================================================== */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--border);border:1px solid var(--border);}
.why-card{background:var(--white);padding:40px 34px;transition:background .3s ease;}
.why-card:hover{background:var(--gray-light);}
.why-card .ico{width:54px;height:54px;border-radius:50%;background:var(--black);display:flex;align-items:center;justify-content:center;margin-bottom:22px;transition:background .3s ease;}
.why-card:hover .ico{background:var(--cyan-accent);}
.why-card .ico svg{width:24px;height:24px;color:var(--cyan);transition:color .3s ease;}
.why-card:hover .ico svg{color:var(--black);}
.why-card h3{font-size:21px;margin-bottom:10px;}
.why-card p{color:var(--text-secondary);font-size:14.5px;}
.why-card .idx{font-family:var(--font-mono);font-size:12px;color:var(--text-secondary);letter-spacing:.06em;margin-bottom:16px;display:block;}
@media(max-width:900px){ .why-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:600px){ .why-grid{grid-template-columns:1fr;} }

/* ==========================================================================
   CATEGORY / PRODUCT GRID
   ========================================================================== */
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.cat-card{position:relative;height:250px;border-radius:4px;overflow:hidden;box-shadow:var(--shadow-sm);}
.cat-card img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease);}
.cat-card:hover img{transform:scale(1.08);}
.cat-card::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(17,17,17,.92) 0%, rgba(17,17,17,.25) 55%, rgba(17,17,17,.05) 100%);}
.cat-card .cc-body{position:absolute;left:0;right:0;bottom:0;padding:20px 22px;z-index:2;}
.cat-card .cc-count{font-family:var(--font-mono);font-size:11px;color:var(--cyan);letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px;display:block;}
.cat-card h3{color:var(--white);font-size:21px;margin-bottom:2px;}
.cat-card .cc-arrow{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.14);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(-8px);transition:opacity .3s ease,transform .3s ease;z-index:2;}
.cat-card:hover .cc-arrow{opacity:1;transform:translateY(0);}
.cat-card .cc-arrow svg{width:15px;height:15px;color:var(--white);}
@media(max-width:1080px){ .cat-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:560px){ .cat-grid{grid-template-columns:1fr;} }

.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.product-card{
  background:var(--white);border:1px solid var(--border);border-radius:5px;overflow:hidden;
  display:flex;flex-direction:column;transition:border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.product-card:hover{border-color:var(--cyan-accent);box-shadow:var(--shadow-md);transform:translateY(-5px);}
.product-card .pc-media{position:relative;height:238px;background:var(--gray-light);display:flex;align-items:center;justify-content:center;overflow:hidden;padding:18px;}
.product-card .pc-media img{width:100%;height:100%;object-fit:contain;transition:transform .5s var(--ease);}
.product-card:hover .pc-media img{transform:scale(1.06);}
.product-card .pc-cat{position:absolute;top:14px;left:14px;}
.product-card .pc-body{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1;}
.product-card h3{font-size:21px;margin-bottom:9px;}
.product-card p{color:var(--text-secondary);font-size:14px;flex:1;margin-bottom:18px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.pc-actions{display:flex;gap:10px;padding-top:16px;border-top:1px solid var(--border);}
.pc-actions a{flex:1;text-align:center;font-family:var(--font-mono);font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:11px 8px;border-radius:2px;transition:all .25s ease;}
.pc-actions .view{background:var(--black);color:var(--white);}
.pc-actions .view:hover{background:var(--charcoal);}
.pc-actions .enquire{border:1px solid var(--border);color:var(--text);}
.pc-actions .enquire:hover{border-color:var(--cyan-accent);color:var(--charcoal);background:var(--cyan-light);}
@media(max-width:1080px){ .product-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:620px){ .product-grid{grid-template-columns:1fr;} }

.showcase-foot{display:flex;justify-content:center;margin-top:48px;}

/* ==========================================================================
   CAPABILITIES / MANUFACTURING
   ========================================================================== */
.cap-wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:0;border:1px solid rgba(255,255,255,.1);border-radius:6px;overflow:hidden;}
.cap-media{position:relative;min-height:460px;}
.cap-media img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;}
.cap-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(17,17,17,0) 60%, rgba(17,17,17,.55) 100%);}
.cap-list{background:var(--charcoal);padding:56px 52px;}
.cap-list h2{color:var(--white);}
.cap-list > p{color:#A8ADB0;margin:16px 0 30px;font-size:15.5px;}
.cap-item{display:flex;gap:18px;padding:20px 0;border-top:1px solid rgba(255,255,255,.09);}
.cap-item:first-of-type{border-top:1px solid rgba(255,255,255,.09);}
.cap-item .n{font-family:var(--font-mono);font-size:13px;color:var(--cyan);padding-top:2px;flex:none;width:28px;}
.cap-item h4{color:var(--white);font-family:var(--font-body);font-size:16.5px;font-weight:700;margin-bottom:5px;}
.cap-item p{color:#9BA1A4;font-size:14px;}
@media(max-width:940px){ .cap-wrap{grid-template-columns:1fr;} .cap-media{min-height:280px;} .cap-list{padding:40px 26px;} }

/* ==========================================================================
   TESTIMONIALS / STRENGTHS STRIP
   ========================================================================== */
.stat-strip{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--border);border-radius:6px;overflow:hidden;}
.stat-cell{padding:34px 26px;border-left:1px solid var(--border);text-align:center;}
.stat-cell:first-child{border-left:none;}
.stat-cell .num{font-family:var(--font-display);font-weight:800;font-size:44px;color:var(--black);line-height:1;}
.stat-cell .num span{color:var(--cyan-accent);}
.stat-cell .lbl{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-secondary);margin-top:10px;}
@media(max-width:820px){ .stat-strip{grid-template-columns:repeat(2,1fr);} .stat-cell{border-left:none;border-top:1px solid var(--border);} .stat-cell:nth-child(1),.stat-cell:nth-child(2){border-top:none;} }

.strength-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.strength-card{border:1px solid var(--border);border-radius:5px;padding:32px 28px;transition:box-shadow .3s ease,border-color .3s ease;}
.strength-card:hover{box-shadow:var(--shadow-md);border-color:var(--cyan-accent);}
.strength-card h3{font-size:20px;margin-bottom:10px;}
.strength-card p{color:var(--text-secondary);font-size:14.5px;}
@media(max-width:900px){ .strength-grid{grid-template-columns:1fr;} }

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.tst-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.tst-card{
  position:relative;background:var(--white);border:1px solid var(--border);border-radius:4px;
  padding:34px 28px 26px;display:flex;flex-direction:column;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s ease;
}
.tst-card::before{
  content:"";position:absolute;left:0;top:0;height:3px;width:100%;
  background:linear-gradient(90deg,var(--cyan-accent),transparent);
}
.tst-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--cyan-accent);}
.tst-card .qm{
  font-family:var(--font-display);font-size:64px;line-height:.6;color:var(--cyan);
  margin-bottom:14px;display:block;
}
.tst-card blockquote{font-size:15.5px;line-height:1.75;color:var(--text);flex:1;}
.tst-meta{display:flex;align-items:center;gap:13px;margin-top:24px;padding-top:20px;border-top:1px solid var(--border);}
.tst-meta .av{
  width:44px;height:44px;flex:none;border-radius:50%;background:var(--cyan-light);color:var(--charcoal);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;font-size:16px;
}
.tst-meta .who{font-family:var(--font-display);font-size:17px;font-weight:700;color:var(--black);line-height:1.2;}
.tst-meta .role{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-secondary);margin-top:3px;}
.tst-card .stars{display:flex;gap:3px;margin-top:16px;}
.tst-card .stars svg{width:14px;height:14px;color:var(--cyan-accent);fill:currentColor;}
@media(max-width:960px){ .tst-grid{grid-template-columns:1fr 1fr;} }
@media(max-width:660px){ .tst-grid{grid-template-columns:1fr;} }

/* ==========================================================================
   CLIENTS
   ========================================================================== */
.client-marquee{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.client-track{display:flex;gap:16px;width:max-content;animation:marquee 34s linear infinite;}
.client-marquee:hover .client-track{animation-play-state:paused;}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.client-chip{
  flex:none;min-width:230px;background:var(--white);border:1px solid var(--border);border-radius:5px;
  padding:20px 22px;display:flex;align-items:center;gap:12px;
}
.client-chip .ci{width:38px;height:38px;border-radius:50%;background:var(--cyan-light);display:flex;align-items:center;justify-content:center;flex:none;color:var(--charcoal);font-family:var(--font-display);font-weight:700;}
.client-chip .cn{font-size:13.5px;font-weight:600;line-height:1.3;}
.client-chip .cr{display:block;font-family:var(--font-mono);font-size:10.5px;color:var(--text-secondary);text-transform:uppercase;margin-top:2px;}

.region-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);margin-top:20px;}
.region-card{background:var(--white);padding:28px 26px;}
.region-card h3{font-size:16.5px;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.04em;color:var(--charcoal);margin-bottom:14px;padding-bottom:12px;border-bottom:2px solid var(--cyan-light);}
.region-card ul li{font-size:14px;color:var(--text-secondary);padding:6px 0;position:relative;padding-left:16px;}
.region-card ul li::before{content:"";position:absolute;left:0;top:14px;width:6px;height:6px;background:var(--cyan-accent);border-radius:50%;}
@media(max-width:900px){ .region-grid{grid-template-columns:1fr 1fr;} }
@media(max-width:600px){ .region-grid{grid-template-columns:1fr;} }

/* ==========================================================================
   CTA
   ========================================================================== */
.cta-band{
  position:relative;background:var(--black);border-radius:8px;overflow:hidden;padding:70px 60px;
  display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;
}
.cta-band::before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(142,220,229,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(142,220,229,.08) 1px,transparent 1px);
  background-size:40px 40px;mask-image:radial-gradient(circle at 80% 30%, black, transparent 70%);
}
.cta-band .cta-copy{position:relative;max-width:600px;}
.cta-band h2{color:var(--white);font-size:clamp(28px,3.4vw,42px);margin-bottom:12px;}
.cta-band p{color:#A8ADB0;font-size:16px;}
.cta-band .cta-actions{position:relative;display:flex;gap:14px;flex-wrap:wrap;}
@media(max-width:700px){ .cta-band{padding:46px 26px;} }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{background:var(--black);color:#9BA1A4;padding-top:80px;}
.footer-top{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.2fr;gap:44px;padding-bottom:56px;border-bottom:1px solid rgba(255,255,255,.1);}
.footer-brand .flogo{background:var(--white);display:inline-flex;padding:10px 16px;border-radius:4px;margin-bottom:20px;}
.footer-brand .flogo img{height:56px;}
.footer-brand p{font-size:14px;line-height:1.75;max-width:320px;margin-bottom:20px;}
.footer-social{display:flex;gap:10px;}
.footer-social a{width:36px;height:36px;border:1px solid rgba(255,255,255,.16);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:border-color .25s ease,color .25s ease;}
.footer-social a:hover{border-color:var(--cyan-accent);color:var(--cyan-accent);}
.footer-social svg{width:15px;height:15px;}
.fcol h4{color:var(--white);font-family:var(--font-mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:22px;}
.fcol ul li{margin-bottom:12px;}
.fcol ul li a{font-size:14.5px;transition:color .2s ease,padding-left .2s ease;display:inline-block;}
.fcol ul li a:hover{color:var(--cyan);padding-left:4px;}
.fcol .fcontact li{display:flex;gap:12px;align-items:flex-start;font-size:14px;margin-bottom:16px;}
.fcol .fcontact svg{width:17px;height:17px;color:var(--cyan-accent);flex:none;margin-top:2px;}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding:24px 0;font-size:13px;flex-wrap:wrap;gap:10px;}
.footer-bottom a{color:var(--cyan);}
@media(max-width:940px){ .footer-top{grid-template-columns:1fr 1fr;} }
@media(max-width:600px){ .footer-top{grid-template-columns:1fr;} .site-footer{padding-top:56px;} }

/* ==========================================================================
   INNER PAGES: About / Contact / Clients / Enquiry / Product detail
   ========================================================================== */
.split-2{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;}
@media(max-width:900px){ .split-2{grid-template-columns:1fr;} }

.info-card{border:1px solid var(--border);border-radius:5px;padding:30px;background:var(--white);}
.info-card h3{font-size:19px;margin-bottom:14px;}
.info-card p{color:var(--text-secondary);font-size:14.5px;}

.value-list{display:flex;flex-direction:column;gap:0;margin-top:8px;}
.value-item{display:flex;gap:20px;padding:26px 0;border-top:1px solid var(--border);}
.value-item:first-child{border-top:none;padding-top:0;}
.value-item .vi-ico{width:50px;height:50px;border-radius:50%;background:var(--cyan-light);display:flex;align-items:center;justify-content:center;flex:none;}
.value-item .vi-ico svg{width:22px;height:22px;color:var(--charcoal);}
.value-item h4{font-size:18px;margin-bottom:6px;}
.value-item p{color:var(--text-secondary);font-size:14.5px;}

/* Contact page */
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:44px;}
@media(max-width:940px){ .contact-grid{grid-template-columns:1fr;} }
.contact-card{border:1px solid var(--border);border-radius:5px;padding:26px 24px;display:flex;gap:16px;margin-bottom:16px;}
.contact-card .cc-ico{width:48px;height:48px;border-radius:50%;background:var(--black);display:flex;align-items:center;justify-content:center;flex:none;}
.contact-card .cc-ico svg{width:20px;height:20px;color:var(--cyan);}
.contact-card h4{font-family:var(--font-mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-secondary);margin-bottom:6px;}
.contact-card p, .contact-card a{font-size:15.5px;font-weight:600;color:var(--black);}
.map-frame{border-radius:5px;overflow:hidden;border:1px solid var(--border);margin-top:8px;}
.map-frame iframe{width:100%;height:280px;border:0;display:block;filter:grayscale(.15);}

.form-card{background:var(--gray-light);border:1px solid var(--border);border-radius:6px;padding:38px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px;}
@media(max-width:560px){ .form-row{grid-template-columns:1fr;} }
.field label{display:block;font-family:var(--font-mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--charcoal);margin-bottom:8px;}
.field input, .field select, .field textarea{
  width:100%;padding:14px 16px;border:1px solid var(--border);border-radius:3px;background:var(--white);
  font-size:14.5px;color:var(--text);transition:border-color .2s ease, box-shadow .2s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--cyan-accent);box-shadow:0 0 0 3px rgba(111,213,223,.18);outline:none;}
.field textarea{resize:vertical;min-height:130px;}
.field.full{grid-column:1/-1;}
.form-note{font-size:12.5px;color:var(--text-secondary);margin-top:14px;}
.form-success{display:none;background:var(--black);color:var(--white);border-radius:4px;padding:20px 22px;align-items:center;gap:14px;margin-top:18px;}
.form-success.show{display:flex;}
.form-success svg{width:22px;height:22px;color:var(--cyan-accent);flex:none;}

/* Clients page */
.client-region-hero{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-bottom:8px;}
@media(max-width:760px){ .client-region-hero{grid-template-columns:1fr;} }

/* Product detail */
.pd-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:56px;}
@media(max-width:940px){ .pd-grid{grid-template-columns:1fr;} }
.pd-media{position:sticky;top:120px;}
.pd-media .main-img{border:1px solid var(--border);border-radius:6px;background:var(--gray-light);display:flex;align-items:center;justify-content:center;height:460px;padding:30px;overflow:hidden;}
.pd-media .main-img img{width:100%;height:100%;object-fit:contain;}
.pd-thumbs{display:flex;gap:10px;margin-top:14px;}
.pd-thumbs button{width:76px;height:76px;border:1px solid var(--border);border-radius:4px;background:var(--gray-light);padding:8px;transition:border-color .2s ease;}
.pd-thumbs button.active, .pd-thumbs button:hover{border-color:var(--cyan-accent);}
.pd-thumbs img{width:100%;height:100%;object-fit:contain;}
.pd-cat{margin-bottom:14px;}
.pd-body h1{font-size:clamp(28px,3.4vw,40px);margin-bottom:16px;}
.pd-desc{color:var(--text-secondary);font-size:16px;margin-bottom:28px;}
.pd-actions{display:flex;gap:14px;margin-bottom:36px;flex-wrap:wrap;}
.pd-block{border-top:1px solid var(--border);padding:26px 0;}
.pd-block h3{font-size:18px;margin-bottom:16px;display:flex;align-items:center;gap:10px;}
.pd-block h3::before{content:"";width:20px;height:2px;background:var(--cyan-accent);}
.spec-table{width:100%;border-collapse:collapse;font-size:14.5px;}
.spec-table tr{border-bottom:1px solid var(--border);}
.spec-table tr:last-child{border-bottom:none;}
.spec-table td{padding:12px 4px;}
.spec-table td:first-child{color:var(--text-secondary);font-family:var(--font-mono);font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;width:44%;}
.spec-table td:last-child{font-weight:600;}
.feature-list li{position:relative;padding-left:26px;font-size:14.5px;color:var(--text-secondary);margin-bottom:12px;}
.feature-list li::before{content:"";position:absolute;left:0;top:6px;width:14px;height:14px;border-radius:50%;background:var(--cyan-light);border:1px solid var(--cyan);}
.app-tags{display:flex;flex-wrap:wrap;gap:10px;}
.related-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
@media(max-width:940px){ .related-strip{grid-template-columns:repeat(2,1fr);} }
@media(max-width:560px){ .related-strip{grid-template-columns:1fr;} }
.related-card{border:1px solid var(--border);border-radius:5px;overflow:hidden;transition:border-color .25s ease, transform .25s ease;}
.related-card:hover{border-color:var(--cyan-accent);transform:translateY(-4px);}
.related-card .rc-media{height:150px;background:var(--gray-light);display:flex;align-items:center;justify-content:center;padding:14px;}
.related-card .rc-media img{width:100%;height:100%;object-fit:contain;}
.related-card .rc-body{padding:14px 16px;}
.related-card h4{font-size:15px;}

/* 404-ish empty states etc */
.enq-modal-note{font-size:13px;color:var(--text-secondary);}

/* Print niceties */
::selection{background:var(--cyan);color:var(--black);}


/* section full image */
/* =========================================================
   TECHNO FABRICATORS - INDUSTRIAL HERO
========================================================= */

.tf-hero {
  position: relative;

  width: 100%;
  min-height: 700px;

  overflow: hidden;

  display: flex;
  align-items: center;

  background: #0B1738;

  isolation: isolate;
}


/* =========================================================
   BACKGROUND
========================================================= */

.tf-hero-bg {
  position: absolute;

  inset: 0;

  z-index: -3;
}

.tf-hero-bg img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  object-position: center center;
}


/* =========================================================
   DARK OVERLAY
========================================================= */

.tf-hero-overlay {
  position: absolute;

  inset: 0;

  z-index: -2;

  background:
    linear-gradient(
      90deg,
      rgba(7, 15, 30, 0.72) 0%,
      rgba(7, 15, 30, 0.58) 45%,
      rgba(7, 15, 30, 0.38) 100%
    );
}


/* =========================================================
   HERO CONTAINER
========================================================= */

.tf-hero-container {
  width: min(1200px, calc(100% - 50px));

  margin: 0 auto;

  position: relative;

  z-index: 5;
}


/* =========================================================
   CONTENT
========================================================= */

.tf-hero-content {
  max-width: 820px;

  margin: 0 auto;

  text-align: center;

  color: #ffffff;
}


/* =========================================================
   BRAND
========================================================= */

.tf-hero-brand {
  display: inline-flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 22px;

  color: #ffffff;

  font-size: 14px;

  font-weight: 700;

  letter-spacing: 1.8px;

  text-transform: uppercase;
}


/* Small TF Icon */

.tf-brand-icon {
  width: 32px;
  height: 32px;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  border: 2px solid #F52D3B;

  color: #ffffff;

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 0;

  background: rgba(245, 45, 59, 0.15);
}


/* =========================================================
   HEADING
========================================================= */

.tf-hero h1 {
  margin: 0;

  color: #ffffff;

  font-size: clamp(42px, 5vw, 72px);

  line-height: 1.08;

  font-weight: 800;

  letter-spacing: -1.5px;
}

.tf-hero h1 span {
  display: block;

  color: #ffffff;
}


/* =========================================================
   RED ACCENT UNDER HEADING
========================================================= */

.tf-hero h1::after {
  content: "";

  display: block;

  width: 65px;
  height: 4px;

  margin: 25px auto 22px;

  background: #F52D3B;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.tf-hero-content > p {
  max-width: 680px;

  margin: 0 auto 32px;

  color: rgba(255, 255, 255, 0.88);

  font-size: 17px;

  line-height: 1.7;

  font-weight: 400;
}


/* =========================================================
   BUTTON AREA
========================================================= */

.tf-hero-buttons {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 15px;

  flex-wrap: wrap;
}


/* =========================================================
   BUTTON COMMON
========================================================= */

.tf-btn {
  min-height: 54px;

  padding: 0 28px;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 10px;

  text-decoration: none;

  font-size: 13px;

  font-weight: 800;

  letter-spacing: 0.5px;

  transition:
    transform 0.3s ease,
    background 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease;
}


/* =========================================================
   PRIMARY BUTTON
========================================================= */

.tf-btn-primary {
  background: #F52D3B;

  color: #ffffff;

  border: 1px solid #F52D3B;
}

.tf-btn-primary:hover {
  background: #ffffff;

  color: #F52D3B;

  border-color: #ffffff;

  transform: translateY(-3px);
}

.tf-btn-primary svg {
  width: 18px;
  height: 18px;
}


/* =========================================================
   OUTLINE BUTTON
========================================================= */

.tf-btn-outline {
  color: #ffffff;

  border: 1px solid rgba(255, 255, 255, 0.75);

  background: rgba(255, 255, 255, 0.05);
}

.tf-btn-outline:hover {
  background: #ffffff;

  color: #0B1738;

  border-color: #ffffff;

  transform: translateY(-3px);
}


/* =========================================================
   LEFT DECORATIVE RED SHAPES
========================================================= */

.tf-shape-left {
  position: absolute;

  left: 0;

  top: 50%;

  width: 120px;
  height: 170px;

  transform: translateY(-50%);

  z-index: 2;

  pointer-events: none;
}


/* First shape */

.tf-shape-left span:nth-child(1) {
  position: absolute;

  left: 0;
  top: 35px;

  width: 65px;
  height: 24px;

  background: #F52D3B;

  clip-path: polygon(
    0 0,
    100% 0,
    75% 100%,
    0 100%
  );
}


/* Second shape */

.tf-shape-left span:nth-child(2) {
  position: absolute;

  left: 8px;
  top: 70px;

  width: 80px;
  height: 45px;

  background: #F52D3B;

  clip-path: polygon(
    0 30%,
    100% 0,
    100% 70%,
    0 100%
  );
}


/* Third shape */

.tf-shape-left span:nth-child(3) {
  position: absolute;

  left: 35px;
  top: 125px;

  width: 55px;
  height: 25px;

  background: rgba(245, 45, 59, 0.65);

  transform: skewY(-28deg);
}


/* =========================================================
   RIGHT DECORATIVE SHAPE
========================================================= */

.tf-shape-right {
  position: absolute;

  right: 0;

  top: 0;

  width: 190px;
  height: 190px;

  z-index: 3;

  pointer-events: none;
}


/* Right large red triangle */

.tf-shape-right span:nth-child(1) {
  position: absolute;

  right: 0;
  top: 0;

  width: 185px;
  height: 155px;

  background: #F52D3B;

  clip-path: polygon(
    100% 0,
    100% 100%,
    72% 82%,
    72% 48%,
    0 0
  );
}


/* Right small accent */

.tf-shape-right span:nth-child(2) {
  position: absolute;

  right: 48px;
  top: 0;

  width: 95px;
  height: 3px;

  background: #F52D3B;

  transform: rotate(28deg);

  transform-origin: right center;
}


/* =========================================================
   BOTTOM RED LINE
========================================================= */

.tf-bottom-line {
  position: absolute;

  left: 0;
  bottom: 0;

  width: 100%;
  height: 5px;

  background: #F52D3B;

  z-index: 10;
}


/* =========================================================
   SCROLL INDICATOR
========================================================= */

.tf-scroll-indicator {
  position: absolute;

  left: 50%;

  bottom: 28px;

  transform: translateX(-50%);

  z-index: 8;

  display: flex;

  align-items: center;

  gap: 10px;

  color: rgba(255, 255, 255, 0.75);

  font-size: 9px;

  letter-spacing: 2px;
}

.tf-scroll-indicator span {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #F52D3B;

  animation: tfScrollPulse 1.8s ease-in-out infinite;
}

.tf-scroll-indicator small {
  font-size: 9px;

  font-weight: 700;
}


/* =========================================================
   SCROLL ANIMATION
========================================================= */

@keyframes tfScrollPulse {

  0%,
  100% {
    opacity: 0.4;

    transform: scale(0.8);
  }

  50% {
    opacity: 1;

    transform: scale(1.2);
  }

}


/* =========================================================
   DESKTOP HEIGHT
========================================================= */

@media (min-width: 1400px) {

  .tf-hero {
    min-height: 760px;
  }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

  .tf-hero {
    min-height: 650px;
  }

  .tf-hero-container {
    width: min(900px, calc(100% - 40px));
  }

  .tf-hero h1 {
    font-size: 52px;
  }

  .tf-shape-right {
    transform: scale(0.8);

    transform-origin: top right;
  }

  .tf-shape-left {
    transform: scale(0.8);

    transform-origin: center left;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

  .tf-hero {
    min-height: 650px;

    padding: 80px 0 70px;
  }


  .tf-hero-container {
    width: calc(100% - 30px);
  }


  .tf-hero-content {
    max-width: 100%;
  }


  .tf-hero-brand {
    font-size: 11px;

    letter-spacing: 1.2px;

    margin-bottom: 18px;
  }


  .tf-brand-icon {
    width: 28px;
    height: 28px;

    font-size: 9px;
  }


  .tf-hero h1 {
    font-size: 36px;

    line-height: 1.12;

    letter-spacing: -0.8px;
  }


  .tf-hero h1::after {
    width: 48px;

    height: 3px;

    margin: 20px auto 18px;
  }


  .tf-hero-content > p {
    font-size: 14px;

    line-height: 1.65;

    margin-bottom: 25px;
  }


  .tf-hero-buttons {
    gap: 10px;
  }


  .tf-btn {
    min-height: 50px;

    padding: 0 21px;

    font-size: 11px;
  }


  .tf-shape-left {
    width: 70px;
    height: 120px;

    top: auto;

    bottom: 70px;

    transform: scale(0.65);
  }


  .tf-shape-right {
    width: 120px;
    height: 120px;

    transform: scale(0.6);
  }


  .tf-scroll-indicator {
    bottom: 17px;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

  .tf-hero {
    min-height: 620px;
  }

  .tf-hero h1 {
    font-size: 31px;
  }

  .tf-hero-content > p {
    font-size: 13px;
  }

  .tf-btn {
    width: 100%;
  }

  .tf-hero-buttons {
    width: 100%;
  }

  .tf-shape-left {
    opacity: 0.65;
  }

  .tf-shape-right {
    opacity: 0.75;
  }

}
/* SLIDER */
/* =========================================
   TESTIMONIAL CONTINUOUS AUTO SLIDER
   Desktop + Tablet + Mobile
========================================= */

.testimonial-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* Hide arrows - CSS auto slider ke liye */
.testimonial-btn {
  display: none !important;
}

/* Slider viewport */
.testimonial-viewport {
  width: 100%;
  overflow: hidden;
}

/* Moving track */
.testimonial-viewport .tst-grid {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 24px;
  width: max-content;
  overflow: visible !important;

  animation: testimonialSlide 20s linear infinite;
}

/* Individual cards */
.testimonial-viewport .tst-card {
  flex: 0 0 380px;
  width: 380px;
  min-width: 380px;
  box-sizing: border-box;
}


/* =========================================
 CARD DESIGN
========================================= */

.testimonial-viewport .tst-card {
  background: #ffffff;
  padding: 30px;
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);

  display: flex;
  flex-direction: column;

  min-height: 330px;
}

.testimonial-viewport .qm {
  display: block;
  font-size: 52px;
  line-height: 1;
  margin-bottom: 10px;
}

.testimonial-viewport .tst-card blockquote {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  flex: 1;
}

.testimonial-viewport .stars {
  display: flex;
  gap: 4px;
  margin: 20px 0;
}

.testimonial-viewport .stars svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.testimonial-viewport .tst-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.testimonial-viewport .av {
  width: 45px;
  height: 45px;
  min-width: 45px;
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  font-weight: 700;
}

.testimonial-viewport .tst-meta > span:last-child {
  display: flex;
  flex-direction: column;
}

.testimonial-viewport .who {
  font-weight: 700;
  font-size: 15px;
}

.testimonial-viewport .role {
  font-size: 13px;
  margin-top: 3px;
}


/* =========================================
 CONTINUOUS ANIMATION
========================================= */

@keyframes testimonialSlide {

  0% {
      transform: translateX(0);
  }

  100% {
      transform: translateX(calc(-50% - 12px));
  }

}


/* =========================================
 PAUSE WHEN USER HOVERS
 Remove this if you don't want pause
========================================= */

.testimonial-viewport:hover .tst-grid {
  animation-play-state: paused;
}


/* =========================================
 DOTS HIDE
========================================= */

.testimonial-dots {
  display: none !important;
}


/* =========================================
 TABLET
========================================= */

@media (max-width: 991px) {

  .testimonial-viewport .tst-grid {
      gap: 20px;
      animation-duration: 18s;
  }

  .testimonial-viewport .tst-card {
      flex: 0 0 320px;
      width: 320px;
      min-width: 320px;
  }

}


/* =========================================
 MOBILE
========================================= */

@media (max-width: 600px) {

  .testimonial-slider {
      width: 100%;
  }

  .testimonial-viewport {
      width: 100%;
      overflow: hidden;
  }

  .testimonial-viewport .tst-grid {
      gap: 16px;

      /* Mobile par bhi continuous slider */
      animation-duration: 14s;
  }

  .testimonial-viewport .tst-card {
      flex: 0 0 calc(100vw - 40px);
      width: calc(100vw - 40px);
      min-width: calc(100vw - 40px);

      padding: 24px;
      min-height: 320px;
  }

  .testimonial-viewport .qm {
      font-size: 45px;
  }

  .testimonial-viewport .tst-card blockquote {
      font-size: 15px;
      line-height: 1.6;
  }

  .testimonial-viewport .stars {
      margin: 15px 0;
  }

}


/* =========================================
 VERY SMALL MOBILE
========================================= */

@media (max-width: 380px) {

  .testimonial-viewport .tst-card {
      flex: 0 0 calc(100vw - 30px);
      width: calc(100vw - 30px);
      min-width: calc(100vw - 30px);

      padding: 20px;
  }

}