.elementor-35 .elementor-element.elementor-element-0483ca4{--display:flex;}.elementor-35 .elementor-element.elementor-element-cd53841{--display:flex;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-35 .elementor-element.elementor-element-8ece15c.elementor-element{--align-self:center;}.elementor-35 .elementor-element.elementor-element-ac2f7cd > .elementor-container{max-width:1320px;}.elementor-35 .elementor-element.elementor-element-ac2f7cd{padding:0px 0px 120px 0px;}.elementor-35 .elementor-element.elementor-element-e472889{border-radius:20px 20px 20px 20px;}.elementor-35 .elementor-element.elementor-element-e472889 iframe{height:600px;filter:brightness( 100% ) contrast( 100% ) saturate( 0% ) blur( 0px ) hue-rotate( 0deg );}/* Start custom CSS for html, class: .elementor-35 .elementor-element.elementor-element-7e2dc13 */
/*==========================================================
  TABANI GROUPE — SEO OPTIMIZED B2B CONTACT ENGAGEMENT LAYER
  Depends on the brand tokens in tabani-hero-section.css
  (--tg-navy, --tg-navy-deep, --tg-accent, --tg-slate-soft,
  fonts, .tg-eyebrow, .tg-container, --tg-radius,
  --tg-shadow-lg). Load that file first.
==========================================================*/

.tabani-corporate-contact-section{
  padding:100px 0;
  background:var(--tg-white);
}

.seo-contact-wrapper{
  display:grid;
  grid-template-columns:1fr .9fr;
  gap:72px;
  align-items:center;
}

/*=====================================
COLUMN 1 — TEXT
======================================*/

.seo-text-header .tg-eyebrow{
  margin-bottom:0;
  color:var(--tg-navy);
  font-weight:800;
}
.contact-seo-title{
  font-family:var(--tg-font-head);
  font-weight:800;
  font-size:clamp(28px, 3.4vw, 40px);
  line-height:1.15;
  letter-spacing:-.5px;
  color:var(--tg-navy);
  margin:18px 0 0;
}
.brand-line-decorator{
  display:block;
  width:64px;
  height:4px;
  border-radius:2px;
  margin:26px 0 22px;
  background:linear-gradient(90deg, var(--tg-navy) 0%, var(--tg-slate) 100%);
}
.contact-seo-lead{
  font-family:var(--tg-font-body);
  color:#14181f;
  font-weight:600;
  font-size:15.5px;
  line-height:1.85;
  max-width:52ch;
  margin:0 0 40px;
}

/*=====================================
ADDRESS / MICRODATA BLOCK
======================================*/

.corporate-microdata-block{
  font-style:normal;
  display:flex;
  flex-direction:column;
  gap:22px;
  margin:0 0 32px;
  padding:28px;
  background:var(--tg-slate-soft);
  border-radius:var(--tg-radius);
}

.microdata-row{
  display:flex;
  align-items:flex-start;
  gap:16px;
}
.microdata-icon{
  flex:none;
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--tg-navy);
  color:var(--tg-white);
  border-radius:12px;
}
.contact-vector-svg{
  width:18px;
  height:18px;
}
.microdata-label{
  display:block;
  font-family:var(--tg-font-body);
  font-weight:700;
  font-size:12px;
  letter-spacing:.3px;
  text-transform:uppercase;
  color:var(--tg-navy);
  margin-bottom:4px;
}
.microdata-value{
  font-family:var(--tg-font-body);
  font-size:15px;
  color:var(--tg-ink);
  margin:0;
  line-height:1.5;
}
.interactive-link{
  color:var(--tg-navy);
  font-weight:800;
  text-decoration:none;
}
.interactive-link:hover{
  text-decoration:underline;
  color:var(--tg-navy-light, #2C4680);
}

/*=====================================
SLA PANEL
======================================*/

.sla-assurance-panel{
  border-left:3px solid var(--tg-slate);
  padding:16px 20px;
  background:var(--tg-white);
  box-shadow:0 12px 28px -20px rgba(18,32,63,.3);
  border-radius:0 10px 10px 0;
}
.sla-assurance-panel p{
  font-family:var(--tg-font-body);
  font-size:13.5px;
  line-height:1.7;
  color:var(--tg-ink-muted);
  margin:0;
}

/*=====================================
COLUMN 2 — LAYERED PHOTO CLUSTER
Three photos placed in distinct offset "zones" instead of an
even grid — one large anchor photo plus two smaller ones
staggered at opposite corners, layered with a navy frame
accent behind. Captions are solid navy badges (echoing the
logo's solid navy shapes) rather than plain overlay text.
======================================*/

.photo-cluster{
  position:relative;
  aspect-ratio:1/1.05;
}

.photo-cluster__frame-accent{
  position:absolute;
  top:-20px;
  left:14%;
  width:66%;
  height:60%;
  background:var(--tg-navy);
  border-radius:var(--tg-radius);
  z-index:0;
}
.photo-cluster__frame-accent::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size:20px 20px;
  border-radius:var(--tg-radius);
}

/* Zone 1 — large anchor photo, bottom-left */
.photo-cluster__main{
  position:absolute;
  left:0;
  bottom:0;
  width:72%;
  height:80%;
  z-index:2;
  border-radius:var(--tg-radius);
  overflow:hidden;
  box-shadow:0 34px 60px -18px rgba(18,32,63,.45);
  border:5px solid var(--tg-white);
}

/* Zone 2 — floats top-right, partially behind the frame accent */
.photo-cluster__float--a{
  position:absolute;
  top:0;
  right:0;
  width:42%;
  height:36%;
  z-index:1;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 24px 44px -16px rgba(18,32,63,.4);
  border:5px solid var(--tg-white);
}

/* Zone 3 — floats bottom-right, overlapping the main photo's corner */
.photo-cluster__float--b{
  position:absolute;
  right:-6%;
  bottom:10%;
  width:38%;
  height:30%;
  z-index:3;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 26px 46px -16px rgba(18,32,63,.5);
  border:5px solid var(--tg-white);
}

.photo-cluster__badge{
  position:absolute;
  left:12px;
  bottom:12px;
  z-index:2;
  background:var(--tg-navy);
  color:var(--tg-white);
  font-family:var(--tg-font-head);
  font-weight:700;
  font-size:12.5px;
  padding:7px 13px;
  border-radius:7px;
}
.photo-cluster__badge--small{
  font-size:10.5px;
  padding:5px 10px;
  left:8px;
  bottom:8px;
  border-radius:6px;
}

.responsive-seo-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .5s ease;
}
.photo-cluster__main:hover .responsive-seo-img,
.photo-cluster__float:hover .responsive-seo-img{
  transform:scale(1.06);
}

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

@media (max-width:1000px){
  .seo-contact-wrapper{
    grid-template-columns:1fr;
    gap:52px;
  }
  .contact-visual-column{
    order:-1;
  }
  .photo-cluster{
    aspect-ratio:1/0.85;
  }
  .photo-cluster__frame-accent{
    top:-14px;
  }
}

@media (max-width:640px){
  .tabani-corporate-contact-section{ padding:70px 0; }
  .corporate-microdata-block{ padding:22px; }

  /* Below 640px, the absolute-positioned collage gets cramped —
     fall back to a simple stacked flow instead of scaling it down. */
  .photo-cluster{
    position:static;
    aspect-ratio:auto;
    display:flex;
    flex-direction:column;
    gap:14px;
  }
  .photo-cluster__frame-accent{
    display:none;
  }
  .photo-cluster__main,
  .photo-cluster__float--a,
  .photo-cluster__float--b{
    position:static;
    width:100%;
    height:auto;
    aspect-ratio:16/11;
  }
  .photo-cluster__float--a{
    order:2;
  }
  .photo-cluster__float--b{
    order:3;
  }
}
/* End custom CSS */
/* Start custom CSS for container, class: .elementor-35 .elementor-element.elementor-element-0483ca4 */
/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-35 .elementor-element.elementor-element-8ece15c */
/* End custom CSS */
/* Start custom CSS for container, class: .elementor-35 .elementor-element.elementor-element-cd53841 */
/* End custom CSS */
/* Start custom CSS for google_maps, class: .elementor-35 .elementor-element.elementor-element-e472889 */
/* End custom CSS */
/* Start custom CSS for column, class: .elementor-35 .elementor-element.elementor-element-0703072 */
/* End custom CSS */
/* Start custom CSS for section, class: .elementor-35 .elementor-element.elementor-element-ac2f7cd */
/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-35 .elementor-element.elementor-element-03bfe53 */
/* End custom CSS */
/* Start custom CSS for e-flexbox, class: .elementor-35 .elementor-element.elementor-element-6215c20 */
/* End custom CSS */
/* Start custom CSS for e-flexbox, class: .elementor-35 .elementor-element.elementor-element-98a909a */
/* End custom CSS */