/* About Us — Odoo s_tabs (Bootstrap tab CSS not in frontend bundle) */

.s_tabs {
  --sagco-navy: #1b2958;
  --sagco-tab-bar: #dde4ee;
}

/* Only one pane visible; without Bootstrap .tab-content rules all panes stack */
.s_tabs .tab-content > .tab-pane {
  display: none;
}

.s_tabs .tab-content > .tab-pane.active,
.s_tabs .tab-content > .tab-pane.show {
  display: block;
}

.s_tabs .tab-content > .tab-pane.fade:not(.show) {
  display: none !important;
  opacity: 0;
  transform: none !important;
}

/* Horizontal tab bar (not a vertical bullet list) */
.s_tabs .s_tabs_nav .nav.nav-tabs {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

.s_tabs .s_tabs_nav .nav-tabs .nav-item {
  list-style: none;
  margin: 0;
}

.s_tabs .s_tabs_nav .nav-tabs .nav-link {
  display: block;
  text-align: center;
}

.s_tabs .s_tabs_main.card {
  border: none;
  border-radius: 0;
  box-shadow: none;
  background-color: transparent !important;
}

.s_tabs .s_tabs_main.card.bg-200 {
  background-color: transparent !important;
}

.s_tabs .s_tabs_nav.card-header {
  background: transparent;
  border: none;
  padding: 0;
}

.s_tabs .nav-tabs.card-header-tabs {
  margin: 0 auto;
  border-bottom: none;
  flex-wrap: wrap;
  justify-content: center;
  width: fit-content;
  gap: 0.35rem;
  background: #eef1f6;
  border-radius: 999px;
  padding: 0.35rem;
}

/* Modern pill tabs */
.s_tabs .nav-tabs .nav-link {
  margin-bottom: 0;
  border: none;
  border-radius: 999px !important;
  color: #5b6478;
  background: transparent;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.55rem 1.3rem;
  line-height: 1.3;
  transition: color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.s_tabs .nav-tabs .nav-link:hover,
.s_tabs .nav-tabs .nav-link:focus {
  border: none;
  color: var(--sagco-navy);
  background: rgba(255, 255, 255, 0.6);
}

.s_tabs .nav-tabs .nav-link.active {
  color: #fff;
  background-color: var(--sagco-navy);
  border: none;
  box-shadow: 0 6px 16px -6px rgba(27, 41, 88, 0.55);
}

.s_tabs .s_tabs_content.tab-content.card-body {
  background: #fff;
  border: 1px solid #e8ecf3;
  border-radius: 1.1rem;
  box-shadow: 0 14px 38px -18px rgba(15, 26, 62, 0.22);
  padding: 2.25rem 2.5rem 2.75rem;
  margin-top: 1.25rem;
}

.s_tabs[data-vcss="001"] .s_tabs_content.s_tabs_slide_left > .tab-pane.fade {
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.s_tabs[data-vcss="001"] .s_tabs_content.s_tabs_slide_left > .tab-pane.fade:not(.show) {
  transform: translateX(-1rem);
}

.s_tabs[data-vcss="001"] .s_tabs_content.s_tabs_slide_left > .tab-pane.fade.show {
  transform: translateX(0);
}

.sagco-about-tab-media {
  display: none !important;
}

.sagco-about-mobile-img {
  display: block !important;
}

@media (min-width: 992px) {
  .sagco-about-tab-media {
    display: block !important;
  }

  .sagco-about-mobile-img {
    display: none !important;
  }
}

/* Tab pane two-column grid (Odoo o_grid_mode) — same approach as contact page */
.s_tabs section.service-snippet-16 .container {
  max-width: 1140px;
}

.s_tabs .row.o_grid_mode {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center;
  margin-left: -12px;
  margin-right: -12px;
  grid-template: none !important;
  height: auto !important;
  min-height: 0 !important;
}

.s_tabs .o_grid_item {
  grid-area: unset !important;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: 100%;
  max-width: 100%;
  height: auto !important;
  min-height: 0 !important;
  padding-left: 12px;
  padding-right: 12px;
  z-index: auto !important;
}

.s_tabs .o_grid_item[class*="g-height-"] {
  height: auto !important;
  min-height: 0 !important;
}

@media (min-width: 992px) {
  .s_tabs .o_grid_item.g-col-lg-5,
  .s_tabs .o_grid_item.col-lg-5 {
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }

  .s_tabs .o_grid_item.g-col-lg-6,
  .s_tabs .o_grid_item.col-lg-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .s_tabs .o_grid_item.g-col-lg-7,
  .s_tabs .o_grid_item.col-lg-7 {
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
}

.s_tabs .o_grid_item_image,
.s_tabs .o_grid_item_image.sagco-about-tab-media {
  overflow: hidden;
  max-width: 100%;
}

.s_tabs section.service-snippet-16 .o_grid_item_image img,
.s_tabs .sagco-about-tab-photo {
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: cover;
  display: block;
}

.s_tabs .o_snippet_desktop_invisible.sf-hidden,
.s_tabs .o_snippet_desktop_invisible:empty {
  display: none !important;
}

.s_tabs .as-btn.btn-primary,
.s_tabs a.btn-primary {
  background-color: var(--sagco-navy);
  border-color: var(--sagco-navy);
  border-radius: 0;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.6rem 1.25rem;
}

.s_tabs .as-btn.btn-primary:hover,
.s_tabs a.btn-primary:hover {
  background-color: #152044;
  border-color: #152044;
}

.s_tabs .fs-5.fw-500 strong,
.s_tabs .fs-5.fw-500 span[style*="font-size: 24px"],
.s_tabs .fs-5.fw-500 span[style*="font-size:24px"] {
  color: var(--sagco-navy);
}

/* ======================= About page polish ======================= */

/* Hero lead under the navy gradient header */
.sagco-about-hero .sagco-about-lead {
  max-width: 640px;
  margin: 0.9rem 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.06rem;
  line-height: 1.7;
}

/* Tabs block breathing room + centered */
.s_tabs.o_colored_level {
  padding-top: 3rem !important;
  padding-bottom: 3.5rem !important;
  background: #f6f8fb !important;
}

/* Pane headings — the imported markup wraps plain body copy inside h2/h3
   blocks too. A heading is only a real title when it carries the 24px title
   span, or when a <font> title block is a direct child (AR export variant)
   — body h2/h3s always nest the font inside a span. */
.s_tabs .tab-pane h1,
.s_tabs .tab-pane h2:has(span[style*="font-size: 24px"]),
.s_tabs .tab-pane h2:has(span[style*="font-size:24px"]),
.s_tabs .tab-pane h3:has(span[style*="font-size: 24px"]),
.s_tabs .tab-pane h3:has(span[style*="font-size:24px"]),
.s_tabs .tab-pane h2:has(> font),
.s_tabs .tab-pane h3:has(> font),
.s_tabs .tab-pane .sagco-about-pane-h {
  color: var(--sagco-navy);
  font-weight: 800;
  position: relative;
  padding-bottom: 0.6rem;
  margin-bottom: 1rem;
}

.s_tabs .tab-pane h1::after,
.s_tabs .tab-pane h2:has(span[style*="font-size: 24px"])::after,
.s_tabs .tab-pane h2:has(span[style*="font-size:24px"])::after,
.s_tabs .tab-pane h3:has(span[style*="font-size: 24px"])::after,
.s_tabs .tab-pane h3:has(span[style*="font-size:24px"])::after,
.s_tabs .tab-pane h2:has(> font)::after,
.s_tabs .tab-pane h3:has(> font)::after,
.s_tabs .tab-pane .sagco-about-pane-h::after {
  content: "";
  display: block;
  width: 46px;
  height: 3px;
  border-radius: 2px;
  background: #9d1631;
  margin-top: 0.55rem;
}

/* Body copy accidentally wrapped in h2/h3 → regular paragraph weight */
.s_tabs .tab-pane h2:not(:has(span[style*="font-size: 24px"])):not(:has(span[style*="font-size:24px"])):not(:has(> font)),
.s_tabs .tab-pane h3:not(:has(span[style*="font-size: 24px"])):not(:has(span[style*="font-size:24px"])):not(:has(> font)) {
  color: #4a5470;
  font-size: 1.02rem;
  font-weight: 400;
  line-height: 1.8;
  padding-bottom: 0;
  margin-bottom: 1rem;
}

/* Body spans inside a title h2 stay body-weight (mixed title+paragraph
   blocks like the AR "مبدأنا الأساسي" heading). */
.s_tabs .tab-pane h2 span[style*="font-size: 18px"],
.s_tabs .tab-pane h2 span[style*="font-size:18px"],
.s_tabs .tab-pane h3 span[style*="font-size: 18px"],
.s_tabs .tab-pane h3 span[style*="font-size:18px"],
.s_tabs .tab-pane h2 span[style*="font-size: 18px"] font,
.s_tabs .tab-pane h2 span[style*="font-size:18px"] font,
.s_tabs .tab-pane h3 span[style*="font-size: 18px"] font,
.s_tabs .tab-pane h3 span[style*="font-size:18px"] font {
  font-weight: 400;
  color: #4a5470;
}

/* Imported fw-500/fw-600 utility classes render body copy too heavy */
.s_tabs .tab-pane p.fw-500, .s_tabs .tab-pane ul.fw-500,
.s_tabs .tab-pane div.fw-500, .s_tabs .tab-pane .fs-5.fw-500 {
  font-weight: 400;
  color: #4a5470;
}

/* Emphasis inside body copy keeps its accent color, but not title weight */
.s_tabs .tab-pane .fs-5.fw-500 strong {
  color: var(--sagco-navy);
}

/* Body copy inside panes */
.s_tabs .tab-pane p,
.s_tabs .tab-pane .sagco-about-pane-p {
  color: #4a5470;
  line-height: 1.75;
  font-size: 0.98rem;
  font-weight: 400;
}

.s_tabs .tab-pane li {
  color: #4a5470;
  font-weight: 400;
  line-height: 1.75;
}

/* Documents tab — spacing for the reused doc-card grid */
.s_tabs .sagco-about-docs {
  margin-top: 1.25rem;
}

.s_tabs .sagco-about-docs-more {
  margin: 1.5rem 0 0;
}

/* Images inside panes — rounded card treatment */
.s_tabs section.service-snippet-16 .o_grid_item_image img,
.s_tabs .sagco-about-tab-photo {
  border-radius: 0.9rem;
  box-shadow: 0 16px 34px -16px rgba(15, 26, 62, 0.35);
}

/* Pane buttons → navy pills (site-standard) */
.s_tabs .as-btn.btn-primary,
.s_tabs a.btn-primary {
  border-radius: 999px !important;
  padding: 0.6rem 1.5rem;
  letter-spacing: 0;
}

/* --- Service carousels inside the Services tab → clean cards --- */
.s_tabs .s_carousel_wrapper {
  height: 100%;
}

.s_tabs .s_carousel .carousel-inner,
.s_tabs .s_carousel .carousel-item,
.s_tabs .s_carousel .carousel-content {
  height: 100%;
}

.s_tabs .s_carousel .carousel-content {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e8ecf3;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 10px 28px -16px rgba(15, 26, 62, 0.22);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.s_tabs .s_carousel .carousel-content:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 38px -16px rgba(15, 26, 62, 0.32);
}

.s_tabs .s_carousel .carousel-content .hover-scale {
  overflow: hidden;
}

.s_tabs .s_carousel .carousel-content img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.s_tabs .s_carousel .carousel-content:hover img {
  transform: scale(1.04);
}

/* Single-slide carousels — controls/indicators are pointless */
.s_tabs .carousel-control-prev,
.s_tabs .carousel-control-next,
.s_tabs .carousel-indicators {
  display: none !important;
}

/* Tighten the big imported padding inside panes */
.s_tabs .tab-pane section.py-8 {
  padding-top: 1.25rem !important;
  padding-bottom: 1.25rem !important;
}

@media (max-width: 991.98px) {
  .s_tabs .s_tabs_content.tab-content.card-body {
    padding: 1.5rem 1.1rem 2rem;
    border-radius: 0.9rem;
  }

  .s_tabs .nav-tabs.card-header-tabs {
    width: 100%;
    border-radius: 1rem;
  }

  .s_tabs .nav-tabs .nav-link {
    padding: 0.5rem 0.9rem;
    font-size: 0.84rem;
  }
}