/*
Theme Name: Zidex Child
Theme URI: https://hitechpack.ae
Description: Child theme of Zidex (by ModelTheme) for Hi Tech Pack & Trans L.L.C. — carries the Logistics & Supply Chain Solutions service-page styling.
Author: Hi Tech Pack & Trans
Template: zidex
Version: 1.0.0
Text Domain: zidex-child
*/

/* ============================================================
   HI TECH PACK & TRANS — Service Page Custom CSS
   These classes are meant to be typed into WPBakery's
   "Extra class name" field on the matching row/element.
   ============================================================ */

:root{
  --navy:#16233F;
  --navy-soft:#5A6478;
  --maroon:#7E1D34;
  --red:#C81E32;
  --gray:#3C3C3C;
  --line:#E6E3DD;
  --paper:#FAF9F6;
}

body{ font-family:'Inter', sans-serif; color:var(--gray); }
h1,h2,h3,h4{ font-family:'Barlow Condensed', sans-serif; }

/* ---------- 1. Hero / overview row -> Extra class: row-overview ---------- */
.row-overview{
  background:var(--navy) !important;
  color:#fff;
  padding:90px 0;
}
.row-overview h1, .row-overview h2{
  color:#fff;
  text-transform:uppercase;
  font-weight:800;
  line-height:1.02;
}
.row-overview .wpb_text_column p{ color:#B9BFCC; }
.eyebrow{
  color:#E9B9C4;
  font-size:12px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  margin-bottom:10px;
}

/* ---------- 2. Repeating service flyer row -> Extra class: flyer-row / flyer-row alt ---------- */
.flyer-row{ padding:70px 0; border-bottom:1px solid var(--line); }
.flyer-row.alt{ background:var(--paper) !important; }
.flyer-row .eyebrow{ color:var(--red); }
.flyer-row h2{
  font-size:48px; font-weight:800; color:var(--navy);
  text-transform:uppercase; line-height:1;
}
.flyer-row .sub-title{ font-size:18px; font-weight:500; color:var(--gray); margin-top:10px; }
.flyer-row .feature-line{
  font-size:13.5px; font-weight:700; color:var(--navy);
  text-transform:uppercase; letter-spacing:.02em; line-height:2;
  margin-top:18px;
}
.flyer-row .feature-line .dot{ color:var(--red); margin:0 8px; }

.red-rule{ width:70px; height:3px; background:var(--red) !important; margin:16px 0 !important; }

/* ---------- 3. Circular photo with red arc -> Single Image Extra class: photo-frame ---------- */
.photo-frame{ position:relative; width:100%; max-width:400px; margin:0 auto; }
.photo-frame img{
  border-radius:50%;
  aspect-ratio:1/1;
  object-fit:cover;
  box-shadow:0 20px 40px -18px rgba(22,35,63,.35);
}
.photo-frame::before{
  content:"";
  position:absolute;
  inset:-14px;
  border:3px solid var(--red);
  border-radius:50%;
  clip-path:polygon(0 0,100% 0,100% 45%,60% 45%,60% 100%,0 100%);
  pointer-events:none;
}

/* ---------- 4. "Our X Services" icon strip -> nested Row Extra class: icon-strip ---------- */
.icon-strip-heading{
  text-align:center; font-size:14px; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:var(--maroon);
  margin-bottom:30px;
}
.icon-strip .wpb_column{ border-left:1px solid var(--line); }
.icon-strip .wpb_column:first-child{ border-left:none; }
.icon-strip .vc_icon_element-icon,
.icon-strip .wpb_icon_element .fa{ color:var(--navy) !important; }
.icon-strip h4,
.icon-strip .wpb_wrapper h4{
  font-size:14px; font-weight:800; color:var(--navy);
  text-transform:uppercase; letter-spacing:.02em;
}
.icon-strip p{ font-size:12.5px; color:var(--navy-soft); }

/* ---------- 5. Why Choose Us checklist -> Extra class: check-grid ---------- */
.check-grid .wpb_wrapper li{
  font-size:14px; font-weight:700; color:var(--navy);
  padding:10px 0; border-bottom:1px dashed var(--line);
}

/* ---------- 6. Industries grid -> Extra class: ind-grid ---------- */
.ind-grid .wpb_column{
  background:#fff; text-align:center; padding:24px 12px;
  font-size:13.5px; font-weight:700; color:var(--navy);
  text-transform:uppercase; border:1px solid var(--line);
  transition:.2s;
}
.ind-grid .wpb_column:hover{ background:var(--maroon); color:#fff; }

/* ---------- 7. Contact bar -> Extra class: contact-bar ---------- */
.contact-bar{ background:var(--navy) !important; padding:22px 0; color:#fff; }
.contact-bar .wpb_column{
  border-left:1px solid rgba(255,255,255,.18);
  display:flex; align-items:center; gap:10px;
}
.contact-bar .wpb_column:first-child{ border-left:none; }
.contact-bar p{ font-size:13.5px; font-weight:600; margin:0; color:#fff; }

/* ---------- 8. Buttons -> Button element Extra class: btn-solid-red / btn-ghost-white ---------- */
.btn-solid-red{ background:var(--red) !important; border-color:var(--red) !important; color:#fff !important; }
.btn-ghost-white{ background:transparent !important; border:1.5px solid rgba(255,255,255,.4) !important; color:#fff !important; }

/* ---------- mobile ---------- */
@media(max-width:768px){
  .flyer-row h2{ font-size:34px; }
  .row-overview h1{ font-size:34px; }
  .photo-frame{ max-width:280px; }
}