/* Start custom CSS for transpi-slider, class: .elementor-50 .elementor-element.elementor-element-bec60b7 */
/* End custom CSS */
/* Start custom CSS for column, class: .elementor-50 .elementor-element.elementor-element-d5e4239 */
/* End custom CSS */
/* Start custom CSS for section, class: .elementor-50 .elementor-element.elementor-element-64d9b4d */
/* End custom CSS */
/* Start custom CSS for html, class: .elementor-50 .elementor-element.elementor-element-315689c */
/*==========================================================
  TABANI GROUPE — HERO SECTION
  Brand tokens as CSS custom properties (per BRD §5) so every
  future theme update propagates from one place.
==========================================================*/

:root{
  /* brand */
  --tg-navy:        #1B2E5A;
  --tg-navy-deep:   #12203F;
  --tg-navy-light:  #2C4680;
  --tg-slate:       #7A8394;
  --tg-slate-soft:  #EEF1F6;
  --tg-white:       #FFFFFF;
  --tg-ink:         #3C4451;
  --tg-ink-muted:   #6B7280;
  --tg-accent:      #D98F3B; /* single warm accent — cargo/route marker only */

  /* type */
  --tg-font-head: "Montserrat", "Barlow", sans-serif;
  --tg-font-body: "Inter", "Open Sans", sans-serif;

  /* radius / shadow */
  --tg-radius: 16px;
  --tg-shadow-lg: 0 30px 60px -20px rgba(18,32,63,.28);
  --tg-shadow-card: 0 20px 45px -18px rgba(18,32,63,.35);
}

/*=====================================
SECTION SHELL
======================================*/

.tg-hero{
  position:relative;
  overflow:hidden;
  padding:110px 0 90px;
  background:var(--tg-white);
  isolation:isolate;
}

.tg-container{
  width:92%;
  max-width:1360px;
  margin:0 auto;
  position:relative;
  z-index:3;
}

/* soft engineered backdrop — quiet, not decorative for its own sake */
.tg-hero__bg{
  position:absolute;
  inset:0;
  z-index:0;
  background:
    radial-gradient(1100px 600px at 82% -10%, rgba(27,46,90,.07), transparent 60%),
    linear-gradient(180deg, var(--tg-slate-soft) 0%, var(--tg-white) 38%);
}

/* signature element: the route line — visual proof of "point of
   origin to final destination", the core brand promise */
.tg-hero__route{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
}
.tg-hero__route svg{
  width:100%;
  height:100%;
}
.tg-route-path{
  fill:none;
  stroke:var(--tg-navy);
  stroke-width:2;
  stroke-dasharray:8 10;
  opacity:.16;
}
.tg-route-truck{
  position:absolute;
  top:0; left:0;
  color:var(--tg-accent);
  opacity:.9;
  filter:drop-shadow(0 6px 10px rgba(217,143,59,.35));
  offset-path:path("M -50,430 C 250,430 300,180 560,190 S 900,120 1250,80");
  animation:tg-drive 14s linear infinite;
}
@keyframes tg-drive{
  0%{ offset-distance:0%; opacity:0; }
  6%{ opacity:.9; }
  94%{ opacity:.9; }
  100%{ offset-distance:100%; opacity:0; }
}

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

.tg-hero__grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:64px;
  align-items:center;
}

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

.tg-hero__content{
  animation:tg-fade-up .8s ease both;
}

.tg-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--tg-slate-soft);
  color:var(--tg-navy);
  padding:9px 18px 9px 10px;
  border-radius:50px;
  font-family:var(--tg-font-body);
  font-size:13px;
  font-weight:700;
  letter-spacing:.3px;
  margin:0 0 26px;
}
.tg-eyebrow__mark{
  border-radius:50%;
  display:block;
}

.tg-hero__title{
  font-family:var(--tg-font-head);
  font-weight:800;
  font-size:clamp(34px, 4.2vw, 58px);
  line-height:1.08;
  letter-spacing:-.5px;
  color:var(--tg-navy-deep);
  margin:0 0 24px;
}
.tg-hero__title-accent{
  color:var(--tg-navy);
  background:linear-gradient(90deg, var(--tg-navy) 0%, var(--tg-navy-light) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.tg-hero__lede{
  font-family:var(--tg-font-body);
  color:var(--tg-ink-muted);
  font-size:17px;
  line-height:1.75;
  max-width:52ch;
  margin:0 0 36px;
}

/*=====================================
BUTTONS
======================================*/

.tg-hero__actions{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:48px;
}

.tg-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--tg-font-body);
  font-weight:700;
  font-size:15px;
  padding:16px 28px;
  border-radius:10px;
  text-decoration:none;
  transition:transform .3s ease, box-shadow .3s ease, background .3s ease, color .3s ease;
}
.tg-btn--primary{
  background:var(--tg-navy);
  color:var(--tg-white);
  box-shadow:var(--tg-shadow-lg);
}
.tg-btn--primary:hover{
  transform:translateY(-3px);
  background:var(--tg-navy-light);
}
.tg-btn--outline{
  border:2px solid var(--tg-navy);
  color:var(--tg-navy);
  background:transparent;
}
.tg-btn--outline:hover{
  background:var(--tg-navy);
  color:var(--tg-white);
}

/*=====================================
FEATURE LIST
======================================*/

.tg-hero__features{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px 24px;
}
.tg-feature{
  display:flex;
  align-items:flex-start;
  gap:14px;
}
.tg-feature__icon{
  flex:none;
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--tg-navy);
  color:var(--tg-white);
  border-radius:12px;
}
.tg-feature__icon svg{
  width:19px;
  height:19px;
}
.tg-feature strong{
  display:block;
  font-family:var(--tg-font-head);
  font-size:15px;
  color:var(--tg-navy-deep);
  margin-bottom:2px;
}
.tg-feature span span{
  font-family:var(--tg-font-body);
  font-size:13px;
  color:var(--tg-ink-muted);
}

/*=====================================
RIGHT — VISUAL
======================================*/

.tg-hero__visual{
  position:relative;
  animation:tg-fade-up 1s ease .1s both;
}

.tg-hero__image-frame{
  position:relative;
  border-radius:var(--tg-radius);
  overflow:hidden;
  box-shadow:var(--tg-shadow-lg);
  aspect-ratio:9/10;
}
.tg-hero__image-frame::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(18,32,63,0) 55%, rgba(18,32,63,.55) 100%);
}
.tg-hero__image-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/*=====================================
FLOATING CARD
======================================*/

.tg-hero__card{
  position:absolute;
  left:-40px;
  bottom:-36px;
  width:340px;
  max-width:calc(100% - 20px);
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(10px);
  border-radius:14px;
  padding:28px;
  box-shadow:var(--tg-shadow-card);
  border:1px solid rgba(27,46,90,.06);
}
.tg-hero__card-badge{
  display:inline-block;
  background:var(--tg-slate-soft);
  color:var(--tg-navy);
  font-family:var(--tg-font-body);
  font-weight:700;
  font-size:12px;
  letter-spacing:.3px;
  padding:6px 14px;
  border-radius:30px;
  margin-bottom:16px;
}
.tg-hero__card-title{
  font-family:var(--tg-font-head);
  font-size:19px;
  line-height:1.35;
  color:var(--tg-navy-deep);
  margin:0 0 18px;
}
.tg-hero__card-list{
  list-style:none;
  margin:0 0 20px;
  padding:0;
}
.tg-hero__card-list li{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-family:var(--tg-font-body);
  font-size:13.5px;
  line-height:1.6;
  color:var(--tg-ink);
  margin-bottom:10px;
}
.tg-hero__card-list svg{
  color:var(--tg-accent);
  margin-top:3px;
  width:13px;
  height:13px;
  flex:none;
}
.tg-hero__card-contact{
  padding-top:18px;
  border-top:1px solid #E7E9EE;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.tg-hero__card-contact a{
  display:flex;
  align-items:center;
  gap:12px;
  font-family:var(--tg-font-body);
  font-weight:600;
  font-size:14px;
  color:var(--tg-navy);
  text-decoration:none;
}
.tg-hero__card-icon{
  width:34px;
  height:34px;
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--tg-navy);
  color:var(--tg-white);
  border-radius:50%;
}
.tg-hero__card-icon svg{
  width:15px;
  height:15px;
}

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

@keyframes tg-fade-up{
  from{ opacity:0; transform:translateY(24px); }
  to{ opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .tg-hero__content,
  .tg-hero__visual,
  .tg-route-truck{
    animation:none !important;
  }
}

/*=====================================
RESPONSIVE
======================================*/

@media (max-width:1100px){
  .tg-hero__grid{
    grid-template-columns:1fr;
    gap:56px;
  }
  .tg-hero__visual{ order:1; }
  .tg-hero__content{ order:2; }
  .tg-hero__image-frame{ aspect-ratio:16/10; }
  .tg-hero__card{
    position:relative;
    left:auto; bottom:auto;
    width:100%;
    margin-top:24px;
  }
}

@media (max-width:640px){
  .tg-hero{ padding:70px 0 60px; }
  .tg-hero__features{ grid-template-columns:1fr; }
  .tg-hero__actions{ flex-direction:column; }
  .tg-btn{ width:100%; justify-content:center; }
  .tg-hero__lede{ font-size:16px; }
}
/* End custom CSS */
/* Start custom CSS for e-flexbox, class: .elementor-50 .elementor-element.elementor-element-7b6dc3b */
/* End custom CSS */
/* Start custom CSS for html, class: .elementor-50 .elementor-element.elementor-element-6b2bfd0 */
/*==========================================================
  TABANI GROUPE — LOGISTICS HIGHLIGHTS BAR
  Depends on the brand tokens defined in tabani-hero-section.css
  (--tg-navy, --tg-slate, --tg-slate-soft, --tg-accent, fonts...).
  If this bar is used on a page without that file loaded, copy
  the :root block from tabani-hero-section.css first.
==========================================================*/

.tg-bar{
  position:relative;
  background:var(--tg-navy-deep);
  padding:86px 0 96px;
  overflow:hidden;
}

/* quiet depth so the section doesn't sit flat against navy */
.tg-bar::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(700px 380px at 12% 0%, rgba(255,255,255,.05), transparent 60%),
    radial-gradient(700px 380px at 90% 100%, rgba(217,143,59,.06), transparent 60%);
  pointer-events:none;
}

.tg-bar__heading{
  position:relative;
  z-index:2;
  font-family:var(--tg-font-head);
  font-weight:700;
  font-size:clamp(22px, 2.4vw, 30px);
  color:var(--tg-white);
  text-align:center;
  margin:0 0 56px;
  letter-spacing:-.2px;
}

/* Each row of 3 owns its own rail, positioned relative to that
   row only — so it stays correctly aligned to its own icons no
   matter how tall the row above happens to render. Six items
   also gives an even 3x2 grid instead of an odd leftover card. */
.tg-bar__row{
  position:relative;
}
.tg-bar__row + .tg-bar__row{
  margin-top:14px;
}

/* signature: a connecting rail behind each row's icons — the
   supply chain literally strung together, echoing the hero's
   route line but restrained: a static line, not a repeat effect */
.tg-bar__rail{
  position:absolute;
  left:12%;
  right:12%;
  top:58px; /* icon vertical center: item padding-top(30) + icon radius(28) */
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.18) 12%, rgba(255,255,255,.18) 88%, transparent);
  z-index:1;
}
@media (max-width:900px){
  .tg-bar__rail{ display:none; }
}

.tg-bar__grid{
  position:relative;
  z-index:2;
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
}

.tg-bar__item{
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.09);
  border-radius:14px;
  padding:30px 22px 26px;
  text-align:center;
  transition:transform .35s ease, background .35s ease, border-color .35s ease;
}
.tg-bar__item:hover{
  transform:translateY(-6px);
  background:rgba(255,255,255,.06);
  border-color:rgba(217,143,59,.4);
}

.tg-bar__icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  margin:0 auto 20px;
  border-radius:50%;
  background:var(--tg-white);
  color:var(--tg-navy);
  box-shadow:0 10px 24px rgba(0,0,0,.25);
  transition:background .35s ease, color .35s ease;
}
.tg-bar__icon svg{
  width:23px;
  height:23px;
}
.tg-bar__item:hover .tg-bar__icon{
  background:var(--tg-accent);
  color:var(--tg-navy-deep);
}

.tg-bar__item h3{
  font-family:var(--tg-font-head);
  font-weight:700;
  font-size:15.5px;
  color:var(--tg-white);
  margin:0 0 8px;
  line-height:1.3;
}

.tg-bar__item p{
  font-family:var(--tg-font-body);
  font-size:13px;
  line-height:1.6;
  color:rgba(255,255,255,.62);
  margin:0;
}

/*=====================================
RESPONSIVE
======================================*/

@media (max-width:900px){
  .tg-bar__grid{
    grid-template-columns:repeat(2, 1fr);
  }
  .tg-bar__row + .tg-bar__row{
    margin-top:0; /* the two rows of 3 become four visual rows of 2, gap handles spacing */
  }
}

@media (max-width:640px){
  .tg-bar{ padding:64px 0 70px; }
  .tg-bar__grid{ grid-template-columns:1fr; gap:12px; }
  .tg-bar__row + .tg-bar__row{ margin-top:12px; }
  .tg-bar__heading{ margin-bottom:36px; }
  .tg-bar__item{ display:flex; align-items:center; gap:18px; text-align:left; padding:20px; }
  .tg-bar__icon{ margin:0; flex:none; }
}
/* End custom CSS */
/* Start custom CSS for e-flexbox, class: .elementor-50 .elementor-element.elementor-element-b7cb245 */
/* End custom CSS */
/* Start custom CSS for html, class: .elementor-50 .elementor-element.elementor-element-8262b5a */
/*==========================================================
  TABANI GROUPE — ABOUT SECTION
  Depends on the brand tokens in tabani-hero-section.css
  (--tg-navy, --tg-slate, --tg-accent, fonts, .tg-eyebrow,
  .tg-btn, .tg-container etc). Load that file first.
==========================================================*/

.tg-about{
  position:relative;
  padding:100px 0;
  background:var(--tg-white);
}

.tg-about__grid{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:72px;
  align-items:start;
}

/*=====================================
LEFT — VISUAL
======================================*/

.tg-about__visual{
  position:relative;
  position:sticky;
  top:32px;
}

.tg-about__image-frame{
  border-radius:var(--tg-radius);
  overflow:hidden;
  box-shadow:var(--tg-shadow-lg);
  aspect-ratio:4/5;
}
.tg-about__image-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.tg-about__card{
  position:relative;
  margin:-56px 24px 0 auto;
  width:calc(100% - 24px);
  max-width:400px;
  display:flex;
  gap:18px;
  align-items:flex-start;
  background:var(--tg-navy);
  color:var(--tg-white);
  border-radius:14px;
  padding:26px 26px 28px;
  box-shadow:var(--tg-shadow-card);
}
.tg-about__card-icon{
  flex:none;
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--tg-accent);
  color:var(--tg-navy-deep);
  border-radius:50%;
}
.tg-about__card-icon svg{
  width:20px;
  height:20px;
}
.tg-about__card h3{
  font-family:var(--tg-font-head);
  font-size:16px;
  margin:0 0 8px;
}
.tg-about__card p{
  font-family:var(--tg-font-body);
  font-size:13px;
  line-height:1.65;
  color:rgba(255,255,255,.78);
  margin:0;
}

/*=====================================
RIGHT — CONTENT
======================================*/

.tg-about__title{
  font-family:var(--tg-font-head);
  font-weight:800;
  font-size:clamp(28px, 3vw, 40px);
  line-height:1.18;
  letter-spacing:-.4px;
  color:var(--tg-navy-deep);
  margin:0 0 22px;
}

.tg-about__text{
  font-family:var(--tg-font-body);
  color:var(--tg-ink-muted);
  font-size:16px;
  line-height:1.8;
  margin:0 0 18px;
  max-width:62ch;
}

/*=====================================
FEATURE LIST
======================================*/

.tg-about__list{
  list-style:none;
  margin:28px 0 40px;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:12px 14px;
}
.tg-about__list li{
  display:flex;
  align-items:center;
  gap:12px;
  font-family:var(--tg-font-body);
  font-weight:600;
  font-size:14.5px;
  color:var(--tg-ink);
  background:var(--tg-slate-soft);
  border:1px solid transparent;
  border-radius:10px;
  padding:13px 16px;
  transition:background .3s ease, border-color .3s ease, transform .3s ease;
}
.tg-about__list li:hover{
  background:var(--tg-white);
  border-color:rgba(27,46,90,.14);
  transform:translateX(4px);
}
.tg-check{
  flex:none;
  width:24px;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--tg-navy);
  color:var(--tg-white);
  border-radius:50%;
}
.tg-check svg{
  width:11px;
  height:11px;
}

/*=====================================
MINI SERVICE CARDS
======================================*/

.tg-about__cards{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
  margin-bottom:44px;
}
.tg-about__mini-card{
  border:1px solid #E7E9EE;
  border-top:3px solid var(--tg-navy);
  border-radius:12px;
  padding:24px 20px;
  transition:transform .3s ease, box-shadow .3s ease;
}
.tg-about__mini-card:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 40px -20px rgba(18,32,63,.28);
}
.tg-about__mini-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  margin-bottom:16px;
  border-radius:10px;
  background:var(--tg-slate-soft);
  color:var(--tg-navy);
}
.tg-about__mini-icon svg{
  width:18px;
  height:18px;
}
.tg-about__mini-card h3{
  font-family:var(--tg-font-head);
  font-size:15px;
  color:var(--tg-navy-deep);
  margin:0 0 8px;
  line-height:1.3;
}
.tg-about__mini-card p{
  font-family:var(--tg-font-body);
  font-size:13px;
  line-height:1.6;
  color:var(--tg-ink-muted);
  margin:0;
}

/*=====================================
RESPONSIVE
======================================*/

@media (max-width:1100px){
  .tg-about__grid{
    grid-template-columns:1fr;
    gap:48px;
  }
  .tg-about__visual{
    position:static;
  }
  .tg-about__cards{
    grid-template-columns:1fr;
  }
}

@media (max-width:640px){
  .tg-about{ padding:70px 0; }
  .tg-about__list{ grid-template-columns:1fr; }
  .tg-about__card{
    margin:-40px 16px 0 16px;
    max-width:none;
  }
  .tg-about .tg-btn{ width:100%; justify-content:center; }
}
/* End custom CSS */
/* Start custom CSS for e-flexbox, class: .elementor-50 .elementor-element.elementor-element-2eea853 */
/* End custom CSS */
/* Start custom CSS for html, class: .elementor-50 .elementor-element.elementor-element-bc8e909 */
/*==========================================================
  TABANI GROUPE — CORE SERVICES SECTION
  Depends on the brand tokens in tabani-hero-section.css
  (--tg-navy, --tg-slate, --tg-accent, fonts, .tg-eyebrow,
  .tg-btn, .tg-check, .tg-container). Load that file first.
==========================================================*/

.tg-services{
  padding:100px 0;
  background:var(--tg-white);
}

/*=====================================
SECTION TITLE
======================================*/

.tg-services__title{
  max-width:760px;
  margin:0 auto 72px;
  text-align:center;
}
.tg-services__title .tg-eyebrow{
  margin-left:auto;
  margin-right:auto;
}
.tg-services__title h2{
  font-family:var(--tg-font-head);
  font-weight:800;
  font-size:clamp(28px, 3.2vw, 40px);
  line-height:1.2;
  letter-spacing:-.4px;
  color:var(--tg-navy-deep);
  margin:0 0 20px;
}
.tg-services__intro{
  font-family:var(--tg-font-body);
  color:var(--tg-ink-muted);
  font-size:16px;
  line-height:1.8;
  margin:0;
}

/*=====================================
SERVICE ROW (alternating image / content)
======================================*/

.tg-service-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:center;
  padding:52px 0;
  border-bottom:1px solid #ECEEF2;
}
.tg-service-row:first-of-type{
  padding-top:0;
}
.tg-service-row--reverse .tg-service-image{
  order:2;
}
.tg-service-row--reverse .tg-service-content{
  order:1;
}

.tg-service-image{
  position:relative;
  border-radius:var(--tg-radius);
  overflow:hidden;
  box-shadow:var(--tg-shadow-lg);
  aspect-ratio:4/3;
}
.tg-service-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .5s ease;
}
.tg-service-image:hover img{
  transform:scale(1.04);
}

.tg-service-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  border-radius:14px;
  background:var(--tg-navy);
  color:var(--tg-white);
  margin-bottom:22px;
}
.tg-service-icon svg{
  width:26px;
  height:26px;
}

.tg-service-content h3{
  font-family:var(--tg-font-head);
  font-weight:700;
  font-size:clamp(22px, 2.2vw, 27px);
  line-height:1.25;
  color:var(--tg-navy-deep);
  margin:0 0 16px;
}
.tg-service-content > p{
  font-family:var(--tg-font-body);
  color:var(--tg-ink-muted);
  font-size:15.5px;
  line-height:1.75;
  margin:0 0 24px;
  max-width:52ch;
}

/*=====================================
SERVICE FEATURE LIST
(uses .tg-check from tabani-about-section.css —
 redeclared here so this file is self-sufficient)
======================================*/

.tg-service-list{
  list-style:none;
  margin:0 0 28px;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:12px 16px;
}
.tg-service-list li{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--tg-font-body);
  font-weight:600;
  font-size:14px;
  color:var(--tg-ink);
}
.tg-check{
  flex:none;
  width:22px;
  height:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--tg-slate-soft);
  color:var(--tg-navy);
  border-radius:50%;
}
.tg-check svg{
  width:10px;
  height:10px;
}

/*=====================================
LEARN MORE LINK
======================================*/

.tg-service-link{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family:var(--tg-font-body);
  font-weight:700;
  font-size:14.5px;
  color:var(--tg-navy);
  text-decoration:none;
  padding-bottom:2px;
  border-bottom:2px solid transparent;
  transition:border-color .3s ease, gap .3s ease;
}
.tg-service-link svg{
  width:16px;
  height:16px;
  transition:transform .3s ease;
}
.tg-service-link:hover{
  border-color:var(--tg-navy);
}
.tg-service-link:hover svg{
  transform:translateX(4px);
}

/*=====================================
SERVICE 05 — FULL BANNER
======================================*/

.tg-service-banner{
  position:relative;
  margin-top:52px;
  border-radius:var(--tg-radius);
  overflow:hidden;
  box-shadow:var(--tg-shadow-lg);
  min-height:440px;
  display:flex;
  align-items:center;
}
.tg-service-banner img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
}
.tg-service-banner::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(100deg, rgba(18,32,63,.94) 0%, rgba(18,32,63,.82) 42%, rgba(18,32,63,.35) 78%, rgba(18,32,63,.15) 100%);
  z-index:1;
}
.tg-service-banner__overlay{
  position:relative;
  z-index:2;
  padding:64px 60px;
  max-width:620px;
}
.tg-service-icon--light{
  background:var(--tg-accent);
  color:var(--tg-navy-deep);
}
.tg-service-banner__overlay h2{
  font-family:var(--tg-font-head);
  font-weight:800;
  font-size:clamp(24px, 2.8vw, 34px);
  line-height:1.2;
  color:var(--tg-white);
  margin:0 0 18px;
}
.tg-service-banner__overlay p{
  font-family:var(--tg-font-body);
  color:rgba(255,255,255,.8);
  font-size:15.5px;
  line-height:1.75;
  margin:0 0 32px;
  max-width:50ch;
}

/*=====================================
RESPONSIVE
======================================*/

@media (max-width:900px){
  .tg-service-row{
    grid-template-columns:1fr;
    gap:32px;
    padding:40px 0;
  }
  .tg-service-row--reverse .tg-service-image,
  .tg-service-row--reverse .tg-service-content{
    order:initial;
  }
  .tg-service-banner__overlay{
    padding:48px 32px;
    max-width:none;
  }
}

@media (max-width:640px){
  .tg-services{ padding:70px 0; }
  .tg-services__title{ margin-bottom:48px; }
  .tg-service-list{ grid-template-columns:1fr; }
  .tg-service-banner{ min-height:auto; }
  .tg-service-banner__overlay .tg-btn{ width:100%; justify-content:center; }
}
/* End custom CSS */
/* Start custom CSS for e-flexbox, class: .elementor-50 .elementor-element.elementor-element-7900184 */
/* End custom CSS */
/* Start custom CSS for html, class: .elementor-50 .elementor-element.elementor-element-1c8798e */
/*==========================================================
  TABANI GROUPE — WHY CHOOSE US SECTION
  Depends on the brand tokens in tabani-hero-section.css
  (--tg-navy, --tg-slate-soft, --tg-accent, fonts, .tg-eyebrow,
  .tg-container). Load that file first.
==========================================================*/

.tg-why{
  padding:100px 0;
  background:var(--tg-slate-soft);
}

/*=====================================
SECTION TITLE
======================================*/

.tg-why__title{
  max-width:760px;
  margin:0 auto 64px;
  text-align:center;
}
.tg-why__title .tg-eyebrow{
  margin-left:auto;
  margin-right:auto;
}
.tg-why__title h2{
  font-family:var(--tg-font-head);
  font-weight:800;
  font-size:clamp(28px, 3.2vw, 40px);
  line-height:1.2;
  letter-spacing:-.4px;
  color:var(--tg-navy-deep);
  margin:0 0 20px;
}
.tg-why__intro{
  font-family:var(--tg-font-body);
  color:var(--tg-ink-muted);
  font-size:16px;
  line-height:1.8;
  margin:0;
}

/*=====================================
CARD GRID
======================================*/

.tg-why__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}

.tg-why-card{
  position:relative;
  overflow:hidden;
  background:var(--tg-white);
  border-radius:16px;
  border:1px solid #E7E9EE;
  border-left:3px solid transparent;
  padding:32px 28px 30px;
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.tg-why-card:hover{
  transform:translateY(-6px);
  box-shadow:0 24px 48px -24px rgba(18,32,63,.28);
  border-left-color:var(--tg-accent);
}

/* large faint numeral watermark — an editorial device that
   ties back to the site's own "Service 01/02..." numbering
   convention, without repeating the icon-forward look used
   in the highlights bar or the about section's mini-cards */
.tg-why-card__num{
  position:absolute;
  top:-6px;
  right:14px;
  font-family:var(--tg-font-head);
  font-weight:800;
  font-size:64px;
  line-height:1;
  color:var(--tg-navy);
  opacity:.05;
  z-index:0;
  pointer-events:none;
}

.tg-why-card__icon{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  width:52px;
  height:52px;
  border-radius:14px;
  background:var(--tg-slate-soft);
  color:var(--tg-navy);
  margin-bottom:22px;
  transition:background .35s ease, color .35s ease;
}
.tg-why-card__icon svg{
  width:22px;
  height:22px;
}
.tg-why-card:hover .tg-why-card__icon{
  background:var(--tg-navy);
  color:var(--tg-white);
}

.tg-why-card h3{
  position:relative;
  z-index:1;
  font-family:var(--tg-font-head);
  font-weight:700;
  font-size:18px;
  line-height:1.3;
  color:var(--tg-navy-deep);
  margin:0 0 12px;
}
.tg-why-card p{
  position:relative;
  z-index:1;
  font-family:var(--tg-font-body);
  font-size:14px;
  line-height:1.7;
  color:var(--tg-ink-muted);
  margin:0;
}

/*=====================================
RESPONSIVE
======================================*/

@media (max-width:1000px){
  .tg-why__grid{
    grid-template-columns:repeat(2, 1fr);
  }
}

@media (max-width:640px){
  .tg-why{ padding:70px 0; }
  .tg-why__title{ margin-bottom:44px; }
  .tg-why__grid{ grid-template-columns:1fr; gap:18px; }
  .tg-why-card{ padding:28px 24px; }
}
/* End custom CSS */
/* Start custom CSS for e-flexbox, class: .elementor-50 .elementor-element.elementor-element-26e9ff8 */
/* End custom CSS */
/* Start custom CSS for html, class: .elementor-50 .elementor-element.elementor-element-c758fb2 */
/* End custom CSS */
/* Start custom CSS for e-flexbox, class: .elementor-50 .elementor-element.elementor-element-2d7ee75 */
/* End custom CSS */
/* Start custom CSS for html, class: .elementor-50 .elementor-element.elementor-element-37626b2 */
/*==================================================
INDUSTRIES SECTION
==================================================*/

.industries-section{

    padding:120px 0;

    background:#ffffff;

}

.industry-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:35px;

}

.industry-card{

    background:#fff;

    border-radius:20px;

    overflow:hidden;

    box-shadow:0 15px 45px rgba(0,0,0,.06);

    transition:.35s;

    display:flex;

    flex-direction:column;

    height:100%;

}

.industry-card:hover{

    transform:translateY(-12px);

    box-shadow:0 30px 70px rgba(13,44,103,.12);

}

.industry-card img{

    width:100%;

    height:240px;

    object-fit:cover;

    transition:.5s;

}

.industry-card:hover img{

    transform:scale(1.08);

}

.industry-content{

    padding:35px;

    text-align:center;

    display:flex;

    flex-direction:column;

    flex-grow:1;

}

.industry-content h3{

    font-size:26px;

    color:#0D2C67;

    margin-bottom:18px;

    font-weight:700;

    min-height:70px;

    display:flex;

    align-items:center;

    justify-content:center;

}

.industry-content p{

    color:#666;

    line-height:1.9;

    font-size:16px;

    margin:0;

    flex-grow:1;

}

/*========================*/

@media(max-width:1100px){

.industry-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.industries-section{

padding:80px 0;

}

.industry-grid{

grid-template-columns:1fr;

}

.industry-content{

padding:30px;

}

}
/* End custom CSS */
/* Start custom CSS for e-flexbox, class: .elementor-50 .elementor-element.elementor-element-ca873b8 */
/* End custom CSS */
/* Start custom CSS for html, class: .elementor-50 .elementor-element.elementor-element-8af3912 */
/* End custom CSS */
/* Start custom CSS for e-flexbox, class: .elementor-50 .elementor-element.elementor-element-b6abb21 */
/* End custom CSS */
/* Start custom CSS for html, class: .elementor-50 .elementor-element.elementor-element-64320c8 */
/* End custom CSS */
/* Start custom CSS for e-flexbox, class: .elementor-50 .elementor-element.elementor-element-3632f59 */
/* End custom CSS */