/* =========================================================
   SBSL MODERN THEME — full structural redesign stylesheet
   Load this AFTER styles.css and responsive.css in app.blade.php
   Fonts: Sora (headings) + Inter (body)
   ========================================================= */

:root{
  --sbsl-teal:#0E7C7B;
  --sbsl-teal-dark:#0A5E5D;
  --sbsl-teal-light:#39B5B3;
  --sbsl-ink:#12151C;
  --sbsl-ink-soft:#3A3F4B;
  --sbsl-bg:#FFFFFF;
  --sbsl-card:#FFFFFF;
  --sbsl-border:#E4E9E9;
  --sbsl-radius:20px;
  --sbsl-radius-sm:12px;
  --sbsl-shadow:0 10px 30px rgba(18,21,28,0.08);
}

/* overflow-x:hidden was set on BOTH html and body before. That combination
   makes Chrome treat body as its own separate scroll box instead of the
   page itself, which is exactly what breaks "position: sticky" on the
   navbar (.sbsl-navbar below) - the navbar would scroll away instead of
   sticking to the top. Keeping the horizontal-scroll fix on html only
   (max-width:100vw on body still stops sideways overflow) fixes the sticky
   navbar without changing how the page looks. */
html{ overflow-x:hidden; }
body{
  font-family:'Inter',sans-serif;
  color:var(--sbsl-ink) !important;
  background:var(--sbsl-bg) !important;
  max-width:100vw;
}
img{ max-width:100%; height:auto; }
/* Container width: on a large desktop the old flat 1180px cap left huge
   empty margins on both sides of every page. Scale it up gradually with
   screen size instead of capping early, so wide monitors use the space.
   These widths were widened again (v22) to cut the remaining left/right
   gap by roughly another 40% on top of the previous fix. */
.container,.container-fluid{ max-width:100%; padding-left:16px; padding-right:16px; }
@media (min-width:1180px){
  .container{ max-width:1168px; }
}
@media (min-width:1300px){
  .container{ max-width:1304px; }
}
@media (min-width:1500px){
  .container{ max-width:1512px; }
}
@media (min-width:1700px){
  .container{ max-width:1704px; }
}
h1,h2,h3,h4,h5,h6,
.challenge-title,.challenge-subtitle,.content-title,.content-heading,
.platform-info h2,.success-intro-left h2,.competitions-intro h2,.guides-info h2,
.ourcountry h2{
  font-family:'Sora',sans-serif;
  font-weight:700;
  color:var(--sbsl-ink) !important;
}
a{ color:var(--sbsl-teal); }
a:hover{ color:var(--sbsl-teal-dark); }

/* ---------- NAVBAR ---------- */
.skild-navbar-custom{
  background:#ffffff !important;
  box-shadow:0 2px 16px rgba(18,21,28,0.06);
  padding:14px 0;
  position:sticky;
  top:0;
  z-index:999;
}
.skild-navbar-custom .navbar-collapse{
  background:transparent !important;
}
@media (min-width:992px){
  .skild-navbar-custom .navbar-collapse{
    display:flex !important;
    flex-basis:auto !important;
  }
}
.skild-logo-img{
  max-height:48px;
  filter:none !important;
  -webkit-filter:none !important;
  opacity:1 !important;
  mix-blend-mode:normal !important;
  background:transparent !important;
}
.navbar-brand{ display:inline-block !important; }
nav.skild-navbar-custom a.nav-link.skild-nav-link,
.skild-navbar-custom .navbar-nav .nav-link.skild-nav-link{
  color:var(--sbsl-ink) !important;
  font-weight:600;
  font-size:15px;
  margin:0 10px;
  padding:8px 4px !important;
}
nav.skild-navbar-custom a.nav-link.skild-nav-link:hover,
.skild-navbar-custom .navbar-nav .nav-link.skild-nav-link:hover{ color:var(--sbsl-teal) !important; }
.skild-main-dropdown, .skild-lang-dropdown{
  border-radius:var(--sbsl-radius-sm);
  border:1px solid var(--sbsl-border);
  box-shadow:var(--sbsl-shadow);
  padding:8px;
}
.skild-main-dropdown .dropdown-item, .skild-lang-dropdown .dropdown-item{
  border-radius:8px;
  padding:8px 12px;
  font-size:14px;
}
.skild-main-dropdown .dropdown-item:hover, .skild-lang-dropdown .dropdown-item:hover{
  background:rgba(14,124,123,0.08) !important;
  color:var(--sbsl-teal-dark) !important;
}
.skild-lang-switcher{
  background:var(--sbsl-ink) !important;
  border-radius:999px;
  padding:6px 14px !important;
}
.skild-lang-switcher span{ color:#fff !important; }
.skild-request-btn{
  background:var(--sbsl-teal) !important;
  border:none !important;
  border-radius:999px !important;
  padding:10px 22px !important;
  font-weight:600 !important;
  color:#fff !important;
}
.skild-request-btn:hover{ background:var(--sbsl-teal-dark) !important; }

/* ---------- HERO / BANNER ---------- */
/* The original theme fixes #banner to 627px tall (310px on mobile, in
   responsive.css) and .banner_main .items to 720px tall - heights that
   assumed a shorter/wider banner image. The current banner images are a
   taller ~2:1 ratio, so at "height:auto" (below) they render taller than
   those fixed boxes and the extra bottom portion - including the info bar
   with "Wide Range of Skilled Jobs" etc - was overflowing past the fixed
   height and getting covered by the section underneath. Overriding both
   containers to auto height so they grow to fit the actual image. */
#banner{ position:relative; height:auto !important; }
.banner_main .items{ height:auto !important; }
/* The 3 slide photos themselves used to include a dark info bar baked into
   their bottom ~25-28% ("Wide Range of Job Opportunities / Complete
   Support / ...") that duplicated, almost word for word, the separate icon
   row already shown in plain HTML right below the banner on the page.
   Trying to shorten the frame purely in CSS (forcing a wide aspect-ratio +
   object-fit:cover) meant either cutting real content (headline/checklist)
   when cropped aggressively, or - if made safe - forcing a taller fixed
   frame than the photo actually needed, which also shows oversized on
   narrow/mobile screens since a fixed aspect-ratio scales with width.
   Fixed properly instead by cropping the source photos themselves (see the
   updated files uploaded to public/images/slide/, replacing the old ones
   under the same filenames) to remove just that duplicate bottom bar, so
   the photo's own natural size is already the right, shorter height with
   nothing lost - no CSS cropping needed at all, and it scales down
   naturally and proportionately on mobile like any normal image. */
.banner_main .items img{
  width:100% !important;
  height:auto !important;
  display:block !important;
  max-height:none;
}
.hero-video{
  width:100%;
  max-height:640px;
  object-fit:cover;
}
/* NOTE: ".overlay" is used twice in the markup - once as the outer wrapper
   for the whole banner, and once per slide around its image/video. The old
   selector "#banner .overlay::after" matched BOTH, so the active slide was
   darkened by two stacked copies of this gradient at once, which is why the
   hero looked noticeably dark/muddy. Scoped to only the per-slide overlay,
   and lightened, so a slide is darkened once, subtly, for text legibility. */
.banner_main .items .overlay::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(18,21,28,0) 0%, rgba(18,21,28,0.15) 100%) !important;
  pointer-events:none;
}

/* ---------- ABOUT / CHALLENGE (About Us + Global Presence) ---------- */
.home-challenge-section{
  padding:90px 0 70px;
  background:var(--sbsl-card) !important;
}
.challenge-header{ margin-bottom:40px; }
/* Force Global Presence country cards to a single column so an expanded
   accordion card never leaves a tall blank gap beside a short one.
   Scoped to the country-cards row only (.row-countries) so it doesn't
   also collapse the About/illustration row above it into one column. */
.home-challenge-section .row-countries > [class*="col-"]{
  flex:0 0 100%;
  max-width:100%;
  width:100%;
}
.challenge-title{
  font-size:38px;
  margin-bottom:14px;
}
.challenge-subtitle{
  font-size:18px;
  font-weight:600;
  color:var(--sbsl-teal) !important;
  margin-bottom:18px;
}
.challenge-description{
  font-size:16px;
  line-height:1.8;
  color:var(--sbsl-ink-soft) !important;
}
.ourcountry h2{
  font-size:26px;
  margin:20px 0 30px;
  position:relative;
  padding-bottom:14px;
}
.ourcountry h2::after{
  content:'';
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:60px;
  height:3px;
  background:var(--sbsl-teal) !important;
  border-radius:3px;
}
.challenge-item{
  background:var(--sbsl-bg) !important;
  border:1px solid var(--sbsl-border);
  border-radius:var(--sbsl-radius);
  padding:22px 26px;
  height:100%;
  transition:box-shadow .25s ease, transform .25s ease;
  cursor:pointer;
}
.challenge-item:hover{
  box-shadow:var(--sbsl-shadow);
  transform:translateY(-3px);
}
/* Country card header: flag + name + expand button in one clean row.
   The old theme's ".challenge-icon" rule (height:100px, flex, centered)
   was built for a tall square icon graphic; a wide flag image inside it
   left a big empty gap above the title. Reset it to a small framed
   thumbnail that sits inline with the title instead.
   NOTE: ".challenge-item" (the old theme's card wrapper) is itself
   "display:flex; flex-direction:column; align-items:center", which
   centers each flex child horizontally. Without an explicit width here,
   ".challenge-row" only grows to fit its own content and ends up
   floating in the middle of the card with big blank margins on both
   sides. "width:100%" below is what actually fixes that. */
.challenge-row{
  display:flex !important;
  align-items:center !important;
  gap:16px;
  height:auto !important;
  width:100% !important;
}
.challenge-icon{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:160px !important;
  height:84px !important;
  min-width:160px;
  flex:0 0 auto;
  border-radius:var(--sbsl-radius-sm);
  border:1px solid var(--sbsl-border);
  background:var(--sbsl-card) !important;
  overflow:hidden;
  padding:6px !important;
  margin:0 !important;
}
.challenge-icon img{
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  object-fit:contain !important;
  margin:0 !important;
}
@media (max-width:575px){
  .challenge-icon{ width:110px !important; min-width:110px; height:64px !important; }
}
.challenge-content{
  display:flex;
  align-items:center;
  flex:1 1 auto;
  min-width:0;
}
.challenge-content h4{
  font-family:'Sora',sans-serif;
  font-size:19px;
  margin:0;
  color:var(--sbsl-ink) !important;
}
.challenge-arrow{
  width:32px; height:32px;
  border-radius:50%;
  background:var(--sbsl-teal) !important;
  color:#fff !important;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  flex:0 0 auto;
  transition:transform .25s ease;
}
.challenge-item.active .challenge-arrow{ transform:rotate(45deg); }
.challenge-body{
  display:none;
  width:100%;
  text-align:left;
  margin-top:14px;
  padding-top:14px;
  border-top:1px dashed var(--sbsl-border);
  font-size:15px;
  color:var(--sbsl-ink-soft) !important;
  line-height:1.7;
}
/* Force every admin-authored element inside the Global Presence country
   description (headings, paragraphs, lists, spans with inline styles from
   the WYSIWYG editor) onto one consistent, professional look instead of
   whatever random colors/sizes/fonts the editor saved. */
.challenge-body,
.challenge-body *{
  font-family:'Inter',sans-serif !important;
  background:transparent !important;
  text-decoration:none !important;
  box-shadow:none !important;
}
.challenge-body h1,
.challenge-body h2,
.challenge-body h3,
.challenge-body h4,
.challenge-body h5,
.challenge-body h6,
.challenge-body strong,
.challenge-body b{
  font-family:'Sora',sans-serif !important;
  font-weight:700 !important;
  color:var(--sbsl-ink) !important;
  font-size:16px !important;
  line-height:1.4 !important;
  margin:20px 0 8px !important;
}
.challenge-body > *:first-child,
.challenge-body h1:first-child,
.challenge-body h2:first-child,
.challenge-body h3:first-child{
  margin-top:0 !important;
}
.challenge-body p{
  color:var(--sbsl-ink-soft) !important;
  font-size:14.5px !important;
  font-weight:400 !important;
  line-height:1.75 !important;
  margin:0 0 10px !important;
}
.challenge-body ul,
.challenge-body ol{
  list-style:none !important;
  margin:0 0 14px !important;
  padding:0 !important;
}
.challenge-body li{
  position:relative;
  color:var(--sbsl-ink-soft) !important;
  font-size:14.5px !important;
  font-weight:400 !important;
  line-height:1.6 !important;
  padding:5px 0 5px 24px !important;
  border-bottom:1px solid var(--sbsl-border);
}
.challenge-body li:last-child{ border-bottom:none; }
.challenge-body li::before{
  content:'\2713';
  position:absolute;
  left:0;
  top:5px;
  color:var(--sbsl-teal) !important;
  font-weight:700 !important;
  font-size:13px !important;
}
.challenge-body img{
  max-width:100%;
  height:auto;
  border-radius:var(--sbsl-radius-sm);
  margin:10px 0;
}

/* ---------- HOW IT WORKS / MEMBERSHIPS & AFFILIATIONS (homeWork) ---------- */
.how-works-section{
  background:var(--sbsl-bg) !important;
  padding:90px 0;
  position:relative;
  overflow:visible;
  clip-path:none !important;
  transform:none !important;
}
.how-works-section::before,
.how-works-section::after,
.how-works-overlay::before,
.how-works-overlay::after{
  display:none !important;
  content:none !important;
}
.how-works-overlay{
  clip-path:none !important;
  transform:none !important;
  background:transparent !important;
  box-shadow:none !important;
}
.how-works-section .content-title{
  color:var(--sbsl-ink) !important;
  font-family:'Sora',sans-serif;
  font-weight:800;
  font-size:30px;
  margin-bottom:40px;
}
.how-works-section .content-body,
.how-works-section .content-body *{
  font-family:'Inter',sans-serif !important;
  background:transparent !important;
  text-decoration:none !important;
}
.how-works-section .content-body p{
  color:var(--sbsl-ink-soft) !important;
  font-size:15px !important;
  line-height:1.8;
  margin:0 0 8px !important;
}
.how-works-section .content-body ul,
.how-works-section .content-body ol{
  list-style:none !important;
  margin:14px 0 0 !important;
  padding:0 !important;
}
.how-works-section .content-body li{
  position:relative;
  color:var(--sbsl-ink-soft) !important;
  font-size:15px !important;
  font-weight:500 !important;
  line-height:1.6;
  padding:10px 0 10px 30px !important;
  border-bottom:1px solid var(--sbsl-border);
}
.how-works-section .content-body li:last-child{ border-bottom:none; }
.how-works-section .content-body li::before{
  content:'\2713';
  position:absolute;
  left:0;
  top:10px;
  width:20px;
  height:20px;
  border-radius:50%;
  background:var(--sbsl-teal) !important;
  color:#fff !important;
  font-weight:700 !important;
  font-size:11px !important;
  display:flex;
  align-items:center;
  justify-content:center;
}
.steps-container{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
}
@media (max-width:767px){
  .steps-container{ grid-template-columns:1fr; }
}
.steps-container .step-item{
  background:var(--sbsl-card) !important;
  border:1px solid var(--sbsl-border);
  border-radius:var(--sbsl-radius-sm);
  box-shadow:var(--sbsl-shadow);
  padding:24px 22px;
  margin-bottom:0;
  transition:transform .2s ease;
}
.steps-container .step-item:hover{
  transform:translateY(-3px);
}
.steps-container .step-item h3{
  color:var(--sbsl-ink) !important;
  font-family:'Sora',sans-serif;
  font-weight:700;
  font-size:17px;
  margin-bottom:10px;
}
.steps-container .step-item p{
  color:var(--sbsl-ink-soft) !important;
  margin:0;
  font-size:13.5px;
  line-height:1.75;
}
.steps-container .step-item p *{
  color:inherit !important;
}
.steps-container .step-item ol,
.steps-container .step-item ul{
  padding-left:18px;
  margin:8px 0 0;
}
/* The original theme's own list styling colors "li"/"b" text white, meant
   for a dark background elsewhere on the site. On this light card it was
   rendering as invisible white-on-white text (e.g. the "EXPLORE OUR
   SERVICES" card's bullet, "Manpower and Recruiting Agency", looked blank
   even though the text was really there). Force it to the same ink color
   as the rest of the card. */
.steps-container .step-item li,
.steps-container .step-item li *{
  color:var(--sbsl-ink-soft) !important;
  font-size:13.5px;
  line-height:1.75;
}

/* ---------- NETWORK (homeNetwork) ---------- */
/* The original theme's #mysoftit_visitor rule (from styles.css) sets a huge
   187px top/bottom padding plus position:relative; top:-176px; z-index:-1 —
   a leftover diagonal-overlap trick that shifts this whole section up and
   out of its own document-flow slot, leaving a large blank gap where it used
   to sit. All of that is forced back to normal here. */
#mysoftit_visitor.network-section,
.network-section{
  padding:90px 0 !important;
  position:relative !important;
  top:0 !important;
  z-index:1 !important;
  background:var(--sbsl-card) !important;
  clip-path:none !important;
  transform:none !important;
}
.network-section::before,
.network-section::after{
  display:none !important;
  content:none !important;
}
.network-illustration{ display:none; }
.network-section .content-title{ font-size:32px; margin-bottom:8px; }
.network-section .content-heading{
  color:var(--sbsl-teal) !important;
  font-size:18px;
  font-weight:600;
  margin-bottom:16px;
}
.network-content{
  /* This used to be a single narrow column of plain text, hence the
     1000px cap. The JS auto-boxer now splits it into a proper multi-box
     grid (.sbsl-box-grid), so capping its width left it centered with a
     big unused gap on both sides instead of using the full container
     width like every other section on the page. */
  width:100%;
  margin:10px auto 0;
}
.network-content .content-body,
.network-content .content-body *{
  font-family:'Inter',sans-serif !important;
  background:transparent !important;
  text-decoration:none !important;
}
.network-content .content-body h1,
.network-content .content-body h2,
.network-content .content-body h3,
.network-content .content-body h4,
.network-content .content-body strong,
.network-content .content-body b{
  font-family:'Sora',sans-serif !important;
  font-weight:700 !important;
  color:var(--sbsl-ink) !important;
  font-size:19px !important;
  margin:22px 0 8px !important;
  display:block;
}
.network-content .content-body > *:first-child{ margin-top:0 !important; }
.network-content .content-body p{
  color:var(--sbsl-ink-soft) !important;
  font-size:15px !important;
  line-height:1.8;
  margin:0 0 10px !important;
}
.network-content .content-body ul,
.network-content .content-body ol{
  list-style:none !important;
  margin:0 0 14px !important;
  padding:0 !important;
}
.network-content .content-body li{
  position:relative;
  color:var(--sbsl-ink-soft) !important;
  font-size:15px !important;
  line-height:1.6;
  padding:6px 0 6px 26px !important;
  border-bottom:1px solid var(--sbsl-border);
}
.network-content .content-body li:last-child{ border-bottom:none; }
.network-content .content-body li::before{
  content:'\2713';
  position:absolute;
  left:0;
  top:6px;
  color:var(--sbsl-teal) !important;
  font-weight:700 !important;
  font-size:13px !important;
}
.btn-network{
  background:var(--sbsl-teal) !important;
  color:#fff !important;
  border-radius:999px;
  padding:12px 30px;
  font-weight:600;
  display:inline-block;
  text-decoration:none;
}
.btn-network:hover{ background:var(--sbsl-teal-dark); color:#fff; }

/* ---------- TRADES (platform-section) ---------- */
.platform-section{ padding:90px 0; background:var(--sbsl-bg) !important; }
.platform-info .content-title{ font-size:32px; margin-bottom:14px; }
.platform-description{ color:var(--sbsl-ink-soft) !important; line-height:1.8; }
.feature-list{ margin-bottom:16px; }
.feature-item{
  background:var(--sbsl-card) !important;
  border:1px solid var(--sbsl-border);
  border-radius:var(--sbsl-radius-sm);
  padding:16px 18px;
  margin-bottom:12px;
  cursor:pointer;
  transition:box-shadow .2s ease;
}
.feature-item:hover{ box-shadow:var(--sbsl-shadow); }
.feature-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-family:'Sora',sans-serif;
  font-weight:600;
  font-size:15px;
}
.feature-plus{
  width:26px; height:26px;
  border-radius:50%;
  background:rgba(14,124,123,0.1) !important;
  color:var(--sbsl-teal) !important;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  flex:0 0 auto;
}
.feature-item.active .feature-plus{ transform:rotate(45deg); }
.feature-body{
  display:none;
  margin-top:12px;
  font-size:14px;
  color:var(--sbsl-ink-soft) !important;
  line-height:1.7;
}
.feature-body .btn-warning{
  background:var(--sbsl-teal) !important;
  border:none;
  border-radius:999px;
  color:#fff !important;
  font-weight:600;
  padding:6px 18px;
  margin-top:10px;
}
.feature-body .btn-warning:hover{ background:var(--sbsl-teal-dark); color:#fff; }

/* ---------- SUCCESS / CUSTOMER (homeCustomer) ---------- */
.success-section{
  padding:90px 0;
  background:var(--sbsl-bg) !important;
  clip-path:none !important;
  transform:none !important;
}
.success-section::before,
.success-section::after{
  display:none !important;
  content:none !important;
}
.success-section .content-title{
  font-size:30px;
  margin-bottom:26px;
}
.success-intro-right .main-text{
  color:var(--sbsl-ink-soft) !important;
  line-height:1.8;
  font-size:15px;
  margin-bottom:30px;
  text-align:left;
}
.success-intro-right .main-text,
.success-intro-right .main-text *{
  color:var(--sbsl-ink-soft) !important;
  font-family:'Inter',sans-serif !important;
  background:transparent !important;
  font-size:15px !important;
  text-decoration:none !important;
}
.success-intro-right .main-text h1,
.success-intro-right .main-text h2,
.success-intro-right .main-text h3,
.success-intro-right .main-text h4,
.success-intro-right .main-text h5,
.success-intro-right .main-text u,
.success-intro-right .main-text b,
.success-intro-right .main-text strong{
  color:var(--sbsl-ink) !important;
  font-family:'Sora',sans-serif !important;
  font-weight:700 !important;
  font-size:17px !important;
  text-decoration:none !important;
  display:block;
  margin:20px 0 10px;
}
.success-intro-right .main-text ul,
.success-intro-right .main-text ol{
  list-style:none;
  padding:0;
  margin:6px 0 0;
}
.success-intro-right .main-text li{
  position:relative;
  padding-left:20px;
  margin-bottom:8px;
}
.success-intro-right .main-text li::before{
  content:'\2713';
  position:absolute;
  left:0;
  top:0;
  color:var(--sbsl-teal) !important;
  font-weight:700;
  font-size:12px;
}
.service-item{
  background:var(--sbsl-card) !important;
  border:1px solid var(--sbsl-border);
  border-radius:var(--sbsl-radius-sm);
  box-shadow:var(--sbsl-shadow);
  padding:22px 22px;
  height:100%;
}
.service-item h4{
  font-family:'Sora',sans-serif;
  font-weight:700;
  font-size:16px;
  color:var(--sbsl-ink) !important;
  margin-bottom:8px;
}
.service-item,
.service-item *{
  color:var(--sbsl-ink-soft) !important;
  font-size:14px !important;
  line-height:1.7;
}
.service-item h4{ color:var(--sbsl-ink) !important; }

/* ---------- FEATURES / PARTICIPANT (homeFeature) ---------- */
.competitions-section{
  background:var(--sbsl-ink) !important;
  padding:90px 0;
}
.competitions-intro .content-title{ color:#fff !important; font-size:28px; }
.competitions-intro .intro-body p{ color:rgba(255,255,255,0.7) !important; line-height:1.8; }
.comp-card{
  background:rgba(255,255,255,0.05) !important;
  border:1px solid rgba(255,255,255,0.1);
  border-radius:var(--sbsl-radius-sm);
  overflow:hidden;
  height:100%;
}
.comp-img img{ width:100%; height:150px; object-fit:cover; }
.comp-content{ padding:18px 20px; }
.comp-content h4{ color:#fff !important; font-family:'Sora',sans-serif; font-size:16px; margin-bottom:8px; }
.comp-desc{
  color:rgba(255,255,255,0.65) !important;
  font-size:13px;
  line-height:1.6;
  max-height:130px;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:6;
  -webkit-box-orient:vertical;
}
.comp-desc *{ color:inherit !important; font-size:inherit !important; }
.comp-desc h1,.comp-desc h2,.comp-desc h3,.comp-desc h4,.comp-desc h5,.comp-desc h6{
  font-size:13px !important;
  font-weight:700;
  margin:0 0 4px;
}
.comp-desc ul,.comp-desc ol{ padding-left:16px; margin:4px 0; }
.comp-desc p{ margin:0 0 6px; }

/* ---------- GUIDES / RESOURCES (homeGuide) ---------- */
.guides-section{ padding:90px 0; background:var(--sbsl-bg) !important; }
.guides-info h2{
  font-size:30px;
  margin-bottom:40px;
  text-align:center;
}
.guides-body{
  background:var(--sbsl-card) !important;
  border:1px solid var(--sbsl-border);
  border-radius:var(--sbsl-radius);
  box-shadow:var(--sbsl-shadow);
  padding:30px 28px;
  height:100%;
  line-height:1.8;
}
.guides-body,
.guides-body *{
  color:var(--sbsl-ink-soft) !important;
  font-family:'Inter',sans-serif !important;
  background:transparent !important;
  text-decoration:none !important;
  font-size:14px !important;
}
.guides-body h5,
.guides-body u,
.guides-body b,
.guides-body strong{
  color:var(--sbsl-ink) !important;
  font-family:'Sora',sans-serif !important;
  font-weight:700 !important;
  font-size:16px !important;
  text-decoration:none !important;
  display:block;
  margin:0 0 14px;
  padding-bottom:10px;
  border-bottom:2px solid var(--sbsl-teal);
}
.guides-body h5:not(:first-child){
  margin-top:26px;
}
.guides-body ul{
  list-style:none;
  padding:0;
  margin:0 0 6px;
}
.guides-body li{
  position:relative;
  padding-left:20px;
  margin-bottom:10px;
}
.guides-body li::before{
  content:'\2713';
  position:absolute;
  left:0;
  top:0;
  color:var(--sbsl-teal) !important;
  font-weight:700;
  font-size:12px;
}
.guides-illustration img{
  border-radius:var(--sbsl-radius);
  box-shadow:var(--sbsl-shadow);
}

/* Replacement for the old generic stock-photo card: an icon panel matching
   the .sbsl-about-illustration / .sbsl-testing-illustration treatment. */
.sbsl-guides-illustration-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
}
.sbsl-guides-illustration{
  width:100%;
  aspect-ratio:1/1;
  max-width:170px;
  margin:0 auto;
  border-radius:var(--sbsl-radius);
  background:linear-gradient(135deg, var(--sbsl-teal) 0%, var(--sbsl-teal-dark) 100%) !important;
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.sbsl-guides-illustration::before,
.sbsl-guides-illustration::after{
  content:'';
  position:absolute;
  border-radius:50%;
  background:rgba(255,255,255,0.10);
}
.sbsl-guides-illustration::before{ width:110px; height:110px; top:-35px; right:-35px; }
.sbsl-guides-illustration::after{ width:85px; height:85px; bottom:-30px; left:-25px; }
.sbsl-guides-illustration-badge{
  position:relative; z-index:1;
  width:70px; height:70px;
  border-radius:50%;
  background:#fff !important;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 17px rgba(18,21,28,0.20);
}
.sbsl-guides-illustration-badge i{
  font-size:30px !important;
  width:30px !important;
  height:30px !important;
  color:var(--sbsl-teal) !important;
}
.sbsl-guides-illustration-tag{
  position:relative; z-index:1;
  background:rgba(255,255,255,0.16) !important;
  color:#fff !important;
  font-family:'Sora',sans-serif;
  font-weight:600;
  font-size:11px;
  letter-spacing:0.4px;
  padding:5px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.3);
  white-space:nowrap;
}
.sbsl-guides-illustration-caption{
  color:var(--sbsl-ink-soft) !important;
  font-size:13.5px !important;
  line-height:1.7;
  margin:0 !important;
  background:transparent !important;
}

/* ---------- NEW: GALLERY TEASER SECTION ---------- */
.sbsl-gallery-teaser{
  padding:90px 0;
  background:var(--sbsl-card) !important;
}
.sbsl-gallery-teaser .content-title{ font-size:32px; margin-bottom:10px; }
.sbsl-gallery-teaser .sbsl-gallery-sub{
  color:var(--sbsl-ink-soft) !important;
  margin-bottom:36px;
  font-size:16px;
}
.sbsl-gallery-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
.sbsl-gallery-tile{
  position:relative;
  border-radius:var(--sbsl-radius-sm);
  overflow:hidden;
  aspect-ratio:1/1;
  display:block;
  box-shadow:var(--sbsl-shadow);
}
.sbsl-gallery-tile img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .35s ease;
}
.sbsl-gallery-tile:hover img{ transform:scale(1.06); }
.sbsl-gallery-tile.sbsl-more{
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--sbsl-ink) !important;
  color:#fff !important;
  font-family:'Sora',sans-serif;
  font-weight:700;
  font-size:17px;
  text-decoration:none;
  text-align:center;
  padding:10px;
}
.sbsl-more:hover{ color:#fff; background:var(--sbsl-teal-dark); }
@media (max-width:991px){
  .sbsl-gallery-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:575px){
  .sbsl-gallery-grid{ grid-template-columns:repeat(2,1fr); gap:10px; }
}

/* ---------- FOOTER ---------- */
footer,
.custom-footer-section{
  background:var(--sbsl-ink) !important;
  padding:70px 0 0;
  position:relative;
  color:rgba(255,255,255,0.75) !important;
}
.custom-footer-section *{ color:inherit; }
.footer-slant{ display:none !important; }
.footer-logo img{
  max-height:56px;
  background:#fff !important;
  border-radius:10px;
  padding:8px 12px;
  display:inline-block;
}
.footer-links ul li{ margin-bottom:10px; }
.footer-links ul li a{
  color:rgba(255,255,255,0.75) !important;
  font-size:15px;
  text-decoration:none;
}
.footer-links ul li a:hover{ color:var(--sbsl-teal-light); }
.footer-social{ display:flex; gap:10px; justify-content:flex-start; }
.social-circle{
  width:38px; height:38px;
  border-radius:50%;
  background:rgba(255,255,255,0.08) !important;
  color:#fff !important;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}
.social-circle:hover{ background:var(--sbsl-teal); color:#fff; }
.footer-phone p{
  font-size:14px;
  margin-bottom:8px;
  color:rgba(255,255,255,0.75) !important;
}
.footer-phone p b{ color:#fff; }
.footer-copyright{
  border-top:1px solid rgba(255,255,255,0.1);
  margin-top:30px;
  padding:22px 0;
  text-align:center;
}
.footer-copyright p{
  margin:0;
  font-size:13px;
  color:rgba(255,255,255,0.55) !important;
}
@media (min-width:992px){
  .text-lg-right{ text-align:left !important; }
}

/* =========================================================
   NEW SECTIONS — Modern Concept parity
   (Hero badges, Recruitment Process, What We Do, About stats,
   Gallery tabs)
   ========================================================= */

/* Hero floating stat badges */
.sbsl-hero-badges{
  position:relative;
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  max-width:1140px;
  margin:-40px auto 30px;
  padding:0 20px;
  z-index:5;
}
.sbsl-hero-badge{
  display:flex;
  align-items:center;
  gap:12px;
  background:var(--sbsl-card) !important;
  border-radius:var(--sbsl-radius-sm);
  box-shadow:var(--sbsl-shadow);
  padding:14px 20px;
}
.sbsl-hero-badge strong{
  display:block;
  font-family:'Sora',sans-serif;
  font-size:15px;
  color:var(--sbsl-ink) !important;
}
.sbsl-hero-badge small{
  display:block;
  font-size:12.5px;
  color:var(--sbsl-ink-soft) !important;
}
.sbsl-badge-icon{
  width:38px; height:38px;
  border-radius:50%;
  background:rgba(14,124,123,0.1) !important;
  color:var(--sbsl-teal) !important;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  flex-shrink:0;
}
.sbsl-hero-badge-alt .sbsl-badge-icon{
  background:var(--sbsl-teal) !important;
  color:#fff !important;
}
@media (max-width:767px){
  .sbsl-hero-badges{ margin-top:-24px; }
  .sbsl-hero-badge{ padding:10px 14px; }
}

/* Section sub-headings shared by new sections */
.sbsl-process-sub,.sbsl-gallery-sub{
  color:var(--sbsl-ink-soft) !important;
  font-size:15.5px;
  margin-top:10px;
}

/* Recruitment Process */
.sbsl-process-section{
  background:var(--sbsl-bg) !important;
  padding:80px 0;
}
.sbsl-process-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:20px;
  margin-top:40px;
}
.sbsl-process-step{
  background:var(--sbsl-card) !important;
  border:1px solid var(--sbsl-border);
  border-radius:var(--sbsl-radius);
  padding:26px 20px;
  text-align:center;
  box-shadow:var(--sbsl-shadow);
}
.sbsl-process-num{
  width:42px; height:42px;
  margin:0 auto 14px;
  border-radius:50%;
  background:var(--sbsl-teal) !important;
  color:#fff !important;
  font-family:'Sora',sans-serif;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
}
.sbsl-process-step h4{
  font-family:'Sora',sans-serif;
  font-size:16px;
  margin-bottom:8px;
}
.sbsl-process-step p{
  font-size:14px;
  color:var(--sbsl-ink-soft) !important;
  margin:0;
}
@media (max-width:991px){
  .sbsl-process-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:575px){
  .sbsl-process-grid{ grid-template-columns:1fr; }
}

/* What We Do services grid */
.sbsl-services-section{
  background:var(--sbsl-card) !important;
  padding:80px 0;
}
.sbsl-services-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-top:40px;
}
.sbsl-service-card{
  background:var(--sbsl-bg) !important;
  border:1px solid var(--sbsl-border);
  border-radius:var(--sbsl-radius);
  padding:30px 24px;
}
.sbsl-service-icon{
  width:50px; height:50px;
  border-radius:14px;
  background:rgba(14,124,123,0.1) !important;
  color:var(--sbsl-teal) !important;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  margin-bottom:16px;
}
.sbsl-service-card h4{
  font-family:'Sora',sans-serif;
  font-size:17px;
  margin-bottom:8px;
}
.sbsl-service-card p{
  font-size:14.5px;
  color:var(--sbsl-ink-soft) !important;
  margin:0;
}
@media (max-width:991px){
  .sbsl-services-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:575px){
  .sbsl-services-grid{ grid-template-columns:1fr; }
}

/* About SBSL stat tiles */
.sbsl-stats-section{
  background:var(--sbsl-bg) !important;
  color:var(--sbsl-ink) !important;
  padding:80px 0;
}
.sbsl-stats-section .content-title{ color:var(--sbsl-ink) !important; }
.sbsl-stats-section .sbsl-process-sub{ color:var(--sbsl-ink-soft) !important; }
.sbsl-stats-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  margin-top:24px;
}
.sbsl-stat-tile{
  background:var(--sbsl-card) !important;
  border:1px solid var(--sbsl-border);
  border-radius:var(--sbsl-radius-sm);
  padding:24px 16px;
  text-align:center;
}
.sbsl-stat-tile strong{
  display:block;
  font-family:'Sora',sans-serif;
  font-size:26px;
  color:var(--sbsl-teal) !important;
  margin-bottom:6px;
}
.sbsl-stat-tile span{
  font-size:12.5px;
  color:var(--sbsl-ink-soft) !important;
}
@media (max-width:767px){
  .sbsl-stats-grid{ grid-template-columns:repeat(2,1fr); }
}

/* Gallery teaser tabs */
.sbsl-gallery-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:24px 0 28px;
}
.sbsl-tab-btn{
  border:1px solid var(--sbsl-border);
  background:var(--sbsl-card) !important;
  color:var(--sbsl-ink-soft) !important;
  border-radius:999px;
  padding:8px 20px;
  font-size:13.5px;
  cursor:pointer;
  transition:all .2s ease;
}
.sbsl-tab-btn.active,
.sbsl-tab-btn:hover{
  background:var(--sbsl-teal) !important;
  border-color:var(--sbsl-teal);
  color:#fff !important;
}

/* ============================================
   NEW MAIN NAVBAR (header.blade.php rebuild)
   ============================================ */
.sbsl-navbar{
  background:#ffffff !important;
  box-shadow:0 2px 16px rgba(18,21,28,0.06);
  padding:14px 0;
  position:sticky;
  top:0;
  z-index:999;
}
.sbsl-navbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}
.sbsl-brand{
  display:flex !important;
  align-items:center;
  gap:10px;
  text-decoration:none !important;
}
.sbsl-brand-mark{
  max-height:44px;
  width:auto;
  filter:none !important;
  -webkit-filter:none !important;
  opacity:1 !important;
  mix-blend-mode:normal !important;
  background:transparent !important;
}
.sbsl-brand-word{
  font-family:'Sora',sans-serif;
  font-weight:800;
  font-size:22px;
  letter-spacing:0.5px;
  color:var(--sbsl-ink) !important;
}
.sbsl-navbar-toggler{
  border:1px solid var(--sbsl-border) !important;
  border-radius:8px;
  padding:6px 10px;
}
.sbsl-navbar-collapse{
  background:transparent !important;
}
@media (min-width:992px){
  .sbsl-navbar-collapse{
    display:flex !important;
    flex-basis:auto !important;
    align-items:center;
    justify-content:flex-end;
    gap:6px;
  }
}
.sbsl-nav{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:2px;
  margin:0;
}
nav.sbsl-navbar a.nav-link.sbsl-nav-link,
.sbsl-navbar .navbar-nav .nav-link.sbsl-nav-link{
  color:var(--sbsl-ink) !important;
  font-weight:600;
  font-size:14.5px;
  margin:0 6px;
  padding:8px 6px !important;
  transition:color .2s ease;
}
nav.sbsl-navbar a.nav-link.sbsl-nav-link:hover,
.sbsl-navbar .navbar-nav .nav-link.sbsl-nav-link:hover,
nav.sbsl-navbar a.nav-link.sbsl-nav-link:focus{
  color:var(--sbsl-teal) !important;
}
.sbsl-dropdown{
  border:1px solid var(--sbsl-border);
  border-radius:var(--sbsl-radius-sm);
  box-shadow:var(--sbsl-shadow);
  background:var(--sbsl-card) !important;
  padding:8px;
}
.sbsl-dropdown-item{
  color:var(--sbsl-ink) !important;
  border-radius:8px;
  padding:8px 12px !important;
  font-size:14px;
}
.sbsl-dropdown-item:hover{
  background:var(--sbsl-bg) !important;
  color:var(--sbsl-teal-dark) !important;
}
.sbsl-nav-right{
  gap:14px;
  margin-top:14px;
}
@media (min-width:992px){
  .sbsl-nav-right{ margin-top:0; }
}
.sbsl-lang-switcher{
  display:flex;
  align-items:center;
  gap:6px;
  color:var(--sbsl-ink) !important;
  font-weight:600;
  font-size:13px;
  padding:6px 10px;
  border:1px solid var(--sbsl-border);
  border-radius:999px;
}
.sbsl-lang-switcher img{
  width:20px;
  border-radius:3px;
}
.sbsl-hire-btn{
  background:var(--sbsl-teal) !important;
  color:#fff !important;
  font-weight:700;
  font-size:14px;
  padding:10px 22px;
  border-radius:999px;
  text-decoration:none !important;
  white-space:nowrap;
  transition:background .2s ease;
}
.sbsl-hire-btn:hover{
  background:var(--sbsl-teal-dark) !important;
  color:#fff !important;
}

/* ============================================
   MEMBERSHIPS & AFFILIATIONS (professional table)
   ============================================ */
.sbsl-memberships-section{
  padding:90px 0;
  background:var(--sbsl-bg) !important;
}
.sbsl-memberships-intro{
  margin-bottom:10px;
  text-align:left;
  max-width:720px;
  margin-left:auto;
  margin-right:auto;
}
.sbsl-memberships-intro,
.sbsl-memberships-intro *{
  color:var(--sbsl-ink-soft) !important;
  font-family:'Inter',sans-serif !important;
  background:transparent !important;
  font-size:14.5px !important;
  text-decoration:none !important;
}
.sbsl-memberships-intro h1,
.sbsl-memberships-intro h2,
.sbsl-memberships-intro h3,
.sbsl-memberships-intro h4,
.sbsl-memberships-intro h5,
.sbsl-memberships-intro u,
.sbsl-memberships-intro b,
.sbsl-memberships-intro strong{
  color:var(--sbsl-ink) !important;
  font-family:'Sora',sans-serif !important;
  font-weight:700 !important;
  font-size:17px !important;
  text-decoration:none !important;
  display:block;
  margin:22px 0 10px;
}
.sbsl-memberships-intro ul,
.sbsl-memberships-intro ol{
  list-style:none;
  padding:0;
  margin:6px 0 0;
}
.sbsl-memberships-intro li{
  position:relative;
  padding-left:20px;
  margin-bottom:8px;
}
.sbsl-memberships-intro li::before{
  content:'\2713';
  position:absolute;
  left:0;
  top:0;
  color:var(--sbsl-teal) !important;
  font-weight:700;
  font-size:12px;
}
/* auto-fit instead of a fixed repeat(4,1fr): with only 3 membership cards
   in the data, a fixed 4-column track left an empty 4th column and the
   row never reached the right edge of the container. auto-fit sizes the
   columns to however many cards actually exist, so the row always fills
   the full width, however many cards the admin panel has. */
.sbsl-membership-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:24px;
  margin-top:40px;
}
@media (max-width:575px){
  .sbsl-membership-grid{ grid-template-columns:1fr; }
}
.sbsl-membership-card{
  background:var(--sbsl-card) !important;
  border:1px solid var(--sbsl-border);
  border-radius:var(--sbsl-radius);
  box-shadow:var(--sbsl-shadow);
  padding:28px 22px;
  text-align:center;
  transition:transform .2s ease;
}
.sbsl-membership-card:hover{
  transform:translateY(-4px);
}
.sbsl-membership-logo{
  width:76px;
  height:76px;
  margin:0 auto 16px;
  border-radius:50%;
  background:var(--sbsl-bg);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border:1px solid var(--sbsl-border);
}
.sbsl-membership-logo img{
  max-width:70%;
  max-height:70%;
  object-fit:contain;
}
.sbsl-membership-card h4{
  font-family:'Sora',sans-serif;
  font-size:16px;
  font-weight:700;
  color:var(--sbsl-ink) !important;
  margin-bottom:10px;
}
.sbsl-membership-desc{
  font-size:13.5px;
  line-height:1.7;
  color:var(--sbsl-ink-soft) !important;
  max-height:150px;
  overflow:hidden;
  text-align:left;
}
.sbsl-membership-desc,
.sbsl-membership-desc *{
  color:var(--sbsl-ink-soft) !important;
  font-size:13.5px !important;
  font-weight:400 !important;
  font-family:'Inter',sans-serif !important;
  background:transparent !important;
  text-decoration:none !important;
}
.sbsl-membership-desc strong,
.sbsl-membership-desc b{
  color:var(--sbsl-ink) !important;
  font-weight:700 !important;
}
.sbsl-membership-desc u{
  text-decoration:none !important;
  font-weight:700 !important;
  color:var(--sbsl-ink) !important;
}
.sbsl-membership-desc p{ margin:0 0 8px; }
.sbsl-membership-desc ul,
.sbsl-membership-desc ol{
  list-style:none;
  padding:0;
  margin:6px 0 0;
}
.sbsl-membership-desc li{
  position:relative;
  padding-left:18px;
  margin-bottom:7px;
}
.sbsl-membership-desc li::before{
  content:'\2713';
  position:absolute;
  left:0;
  top:0;
  color:var(--sbsl-teal) !important;
  font-weight:700;
  font-size:12px;
}

/* ============================================
   DEPLOYMENT COUNTRIES BAR
   ============================================ */
.sbsl-deploy-bar{
  background:var(--sbsl-card) !important;
  border-bottom:1px solid var(--sbsl-border);
  padding:14px 0;
}
.sbsl-deploy-inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:16px;
}
.sbsl-deploy-label{
  font-size:11.5px;
  font-weight:700;
  letter-spacing:0.6px;
  text-transform:uppercase;
  color:var(--sbsl-ink-soft) !important;
  white-space:nowrap;
}
.sbsl-deploy-list{
  display:flex;
  flex-wrap:wrap;
  gap:22px;
}
.sbsl-deploy-item{
  font-weight:700;
  font-size:14px;
  color:var(--sbsl-ink) !important;
}

/* Eyebrow label used across new sections */
.sbsl-eyebrow{
  display:inline-block;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:0.6px;
  text-transform:uppercase;
  color:var(--sbsl-teal) !important;
  margin-bottom:10px;
}

/* About SBSL illustration: a decorative panel (no real photo is stored for
   this block), so it is built as a filled, layered card - a gradient
   background with soft circles, a raised badge in the middle (the SBSL
   logo, or a fallback icon if no logo is set) and a small tag - instead of
   one tiny icon floating in an empty white box. Sized at 60% of the
   original box (340px -> 204px) per request. */
.sbsl-about-illustration{
  width:100%;
  aspect-ratio:1/1;
  max-width:204px;
  margin:0 auto;
  border-radius:var(--sbsl-radius);
  background:linear-gradient(135deg, var(--sbsl-teal) 0%, var(--sbsl-teal-dark) 100%) !important;
  border:1px solid var(--sbsl-border);
  box-shadow:var(--sbsl-shadow);
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:11px;
}
.sbsl-about-illustration::before,
.sbsl-about-illustration::after{
  content:'';
  position:absolute;
  border-radius:50%;
  background:rgba(255,255,255,0.10);
  pointer-events:none;
}
.sbsl-about-illustration::before{ width:132px; height:132px; top:-42px; right:-42px; }
.sbsl-about-illustration::after{ width:102px; height:102px; bottom:-36px; left:-30px; }
.sbsl-about-illustration-badge{
  position:relative;
  z-index:1;
  width:84px;
  height:84px;
  border-radius:50%;
  background:#fff !important;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 17px rgba(18,21,28,0.20);
  overflow:hidden;
  padding:8px;
}
.sbsl-about-illustration-badge img{
  width:100%;
  height:100%;
  object-fit:contain;
}
.sbsl-about-illustration i,
.sbsl-about-illustration svg{
  font-size:36px;
  width:36px !important;
  height:36px !important;
  color:var(--sbsl-teal) !important;
}
.sbsl-about-illustration-tag{
  position:relative;
  z-index:1;
  background:rgba(255,255,255,0.16) !important;
  color:#fff !important;
  font-family:'Sora',sans-serif;
  font-weight:600;
  font-size:11px;
  letter-spacing:0.4px;
  padding:5px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.3);
}

/* ============================================
   OUR TRADES GRID
   ============================================ */
.sbsl-trades-section{
  padding:90px 0;
  background:var(--sbsl-card) !important;
}
.sbsl-trades-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  margin-top:40px;
}
@media (max-width:991px){
  .sbsl-trades-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:575px){
  .sbsl-trades-grid{ grid-template-columns:1fr; }
}
.sbsl-trade-card{
  display:block;
  background:var(--sbsl-bg) !important;
  border:1px solid var(--sbsl-border);
  border-radius:var(--sbsl-radius-sm);
  padding:22px 20px;
  text-decoration:none !important;
  transition:transform .2s ease, box-shadow .2s ease;
}
.sbsl-trade-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--sbsl-shadow);
}
.sbsl-trade-num{
  display:block;
  font-family:'Sora',sans-serif;
  font-weight:800;
  font-size:14px;
  color:var(--sbsl-teal) !important;
  margin-bottom:10px;
}
.sbsl-trade-card h4{
  font-size:15.5px;
  font-weight:700;
  color:var(--sbsl-ink) !important;
  margin-bottom:6px;
}
.sbsl-trade-card p{
  font-size:12.5px;
  color:var(--sbsl-ink-soft) !important;
  margin:0;
}
.sbsl-trade-view-all{
  background:var(--sbsl-teal) !important;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  gap:6px;
}
.sbsl-trade-view-all span{
  color:#fff !important;
  font-weight:700;
  font-size:16px;
}
.sbsl-trade-view-all small{
  color:rgba(255,255,255,0.85) !important;
  font-size:12.5px;
}

/* ============================================
   TESTING CENTRE SECTION
   ============================================ */
.sbsl-testing-section{
  padding:90px 0;
  background:var(--sbsl-bg) !important;
}
.sbsl-testing-checklist{
  list-style:none;
  padding:0;
  margin:22px 0;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px 20px;
}
@media (max-width:575px){
  .sbsl-testing-checklist{ grid-template-columns:1fr; }
}
.sbsl-testing-checklist li{
  font-size:14px;
  font-weight:600;
  color:var(--sbsl-ink) !important;
}
.sbsl-testing-checklist i{
  color:var(--sbsl-teal) !important;
  margin-right:8px;
}
.sbsl-testing-cta{
  display:inline-block;
  background:var(--sbsl-teal) !important;
  color:#fff !important;
  font-weight:700;
  padding:12px 26px;
  border-radius:999px;
  text-decoration:none !important;
  margin-top:10px;
}
.sbsl-testing-cta:hover{
  background:var(--sbsl-teal-dark) !important;
  color:#fff !important;
}
/* Same treatment as .sbsl-about-illustration: no real photo is stored for
   this block either, so it is a filled layered panel instead of one small
   icon floating in an empty white box. */
.sbsl-testing-illustration{
  width:100%;
  aspect-ratio:1/1;
  max-width:360px;
  margin:0 auto;
  border-radius:var(--sbsl-radius);
  background:linear-gradient(135deg, var(--sbsl-teal) 0%, var(--sbsl-teal-dark) 100%) !important;
  border:1px solid var(--sbsl-border);
  box-shadow:var(--sbsl-shadow);
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
}
.sbsl-testing-illustration::before,
.sbsl-testing-illustration::after{
  content:'';
  position:absolute;
  border-radius:50%;
  background:rgba(255,255,255,0.10);
  pointer-events:none;
}
.sbsl-testing-illustration::before{ width:230px; height:230px; top:-70px; right:-70px; }
.sbsl-testing-illustration::after{ width:180px; height:180px; bottom:-60px; left:-50px; }
.sbsl-testing-illustration-badge{
  position:relative;
  z-index:1;
  width:150px;
  height:150px;
  border-radius:50%;
  background:#fff !important;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 12px 28px rgba(18,21,28,0.20);
}
.sbsl-testing-illustration i,
.sbsl-testing-illustration svg{
  font-size:64px;
  width:64px !important;
  height:64px !important;
  color:var(--sbsl-teal) !important;
}
.sbsl-testing-illustration-tag{
  position:relative;
  z-index:1;
  background:rgba(255,255,255,0.16) !important;
  color:#fff !important;
  font-family:'Sora',sans-serif;
  font-weight:600;
  font-size:14px;
  letter-spacing:0.5px;
  padding:8px 18px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.3);
}

/* ============================================
   BOTTOM CTA BANNER
   ============================================ */
.sbsl-cta-banner{
  background:var(--sbsl-teal) !important;
  padding:60px 0;
  text-align:center;
}
.sbsl-cta-banner h2{
  color:#fff !important;
  font-family:'Sora',sans-serif;
  font-weight:800;
  font-size:30px;
  margin-bottom:12px;
}
.sbsl-cta-banner p{
  color:rgba(255,255,255,0.9) !important;
  font-size:15px;
  margin-bottom:26px;
}
.sbsl-cta-banner-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
}
.sbsl-cta-btn{
  padding:12px 26px;
  border-radius:999px;
  font-weight:700;
  font-size:14.5px;
  text-decoration:none !important;
  transition:all .2s ease;
}
.sbsl-cta-btn-light{
  background:#fff !important;
  color:var(--sbsl-teal-dark) !important;
}
.sbsl-cta-btn-light:hover{
  background:var(--sbsl-bg) !important;
  color:var(--sbsl-teal-dark) !important;
}
.sbsl-cta-btn-outline{
  background:transparent !important;
  color:#fff !important;
  border:1.5px solid rgba(255,255,255,0.7);
}
.sbsl-cta-btn-outline:hover{
  background:rgba(255,255,255,0.12) !important;
  color:#fff !important;
}

/* ============================================
   NEW PROFESSIONAL FOOTER
   ============================================ */
footer.sbsl-footer{
  background:var(--sbsl-ink) !important;
  padding:70px 0 0;
}
.sbsl-footer-brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none !important;
  margin-bottom:16px;
}
.sbsl-footer-brand img{
  max-height:40px;
  background:#fff;
  border-radius:6px;
  padding:4px;
}
.sbsl-footer-brand span{
  font-family:'Sora',sans-serif;
  font-weight:800;
  font-size:19px;
  color:#fff !important;
}
.sbsl-footer-about{
  font-size:13.5px;
  line-height:1.6;
  color:rgba(255,255,255,0.65) !important;
  max-width:280px;
}
.sbsl-footer-social{
  display:flex;
  gap:10px;
  margin-top:16px;
}
.sbsl-footer-social a{
  width:34px;
  height:34px;
  border-radius:50%;
  background:rgba(255,255,255,0.08) !important;
  color:#fff !important;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none !important;
}
.sbsl-footer-social a:hover{
  background:var(--sbsl-teal) !important;
}
.sbsl-footer-heading{
  color:#fff !important;
  font-family:'Sora',sans-serif;
  font-weight:700;
  font-size:15px;
  margin-bottom:18px;
}
.sbsl-footer-links,
.sbsl-footer-contact{
  list-style:none;
  padding:0;
  margin:0;
}
.sbsl-footer-links li{
  margin-bottom:12px;
}
.sbsl-footer-links a{
  color:rgba(255,255,255,0.65) !important;
  font-size:13.5px;
  text-decoration:none !important;
}
.sbsl-footer-links a:hover{
  color:#fff !important;
}
.sbsl-footer-contact li{
  color:rgba(255,255,255,0.65) !important;
  font-size:13.5px;
  margin-bottom:14px;
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.sbsl-footer-contact i{
  color:var(--sbsl-teal-light) !important;
  margin-top:2px;
}
.sbsl-footer-contact a{
  color:rgba(255,255,255,0.65) !important;
  text-decoration:none !important;
}
.sbsl-footer-contact a:hover{
  color:#fff !important;
}
.sbsl-footer-bottom{
  border-top:1px solid rgba(255,255,255,0.1);
  padding:22px 0;
  margin-top:30px;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.sbsl-footer-bottom p{
  color:rgba(255,255,255,0.55) !important;
  font-size:12.5px;
  margin:0;
}
.sbsl-footer-bottom-links{
  display:flex;
  gap:20px;
}
.sbsl-footer-bottom-links a{
  color:rgba(255,255,255,0.55) !important;
  font-size:12.5px;
  text-decoration:none !important;
}
.sbsl-footer-bottom-links a:hover{
  color:#fff !important;
}


/* ============================================
AUTO-BOX: splits a long admin rich-text block into
separate professional card boxes, one per heading
(applied by JS to any element carrying .sbsl-auto-box)
============================================ */
.sbsl-box-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
  margin-top:6px;
}
@media (max-width:767px){
  .sbsl-box-grid{ grid-template-columns:1fr; }
}
.sbsl-content-box{
  background:var(--sbsl-card) !important;
  border:1px solid var(--sbsl-border);
  border-radius:var(--sbsl-radius-sm);
  box-shadow:var(--sbsl-shadow);
  padding:22px 22px;
}
.sbsl-content-box > *:first-child{ margin-top:0 !important; }
.sbsl-content-box > *:last-child{ margin-bottom:0 !important; }
/* The no-heading intro box: full width instead of being squeezed into one
   grid cell and stretched to match a much taller sibling. */
.sbsl-content-box-lead{
  grid-column:1 / -1;
}

/* Floating WhatsApp widget turned off per request */
.custom-whatsapp-widget{
  display:none !important;
}

/* ---------- GALLERY PAGE (/gallery) ---------- */
/* The original theme rendered each photo as a plain bordered box with
   object-fit:contain, so portrait/landscape uploads left uneven grey
   letterbox gaps inside the frame and the card itself had square corners,
   a flat grey border and no shadow - it looked like an unstyled list of
   files rather than a gallery. object-fit:cover now lets every photo
   auto-adjust to fill its card edge-to-edge (top/bottom and left/right),
   all cards share one fixed height so the grid lines up row by row, and
   the card styling (radius/shadow/hover) matches the rest of the site. */
.gallery{
  width:100% !important;
  height:auto !important;
  border:1px solid var(--sbsl-border) !important;
  border-radius:var(--sbsl-radius-sm) !important;
  overflow:hidden !important;
  box-shadow:var(--sbsl-shadow) !important;
  background:var(--sbsl-card) !important;
  transition:transform .25s ease, box-shadow .25s ease !important;
}
.gallery:hover{
  transform:translateY(-4px) !important;
  box-shadow:0 16px 32px rgba(18,21,28,0.16) !important;
}
.gallery img{
  width:100% !important;
  height:210px !important;
  object-fit:cover !important;
  display:block !important;
  transition:transform .35s ease !important;
}
.gallery:hover img{
  transform:scale(1.06) !important;
}
.gallery h3{
  background:var(--sbsl-teal) !important;
  color:#fff !important;
  font-family:'Sora',sans-serif !important;
  font-size:14.5px !important;
  font-weight:600 !important;
  line-height:1.4;
  padding:12px 14px !important;
  margin:0 !important;
  text-align:center !important;
}
@media (max-width:575px){
  .gallery img{ height:170px !important; }
}


/* Trades / language dropdown: on smaller screens or a larger browser
   text size, this list could grow taller than the screen with no way
      to scroll to the items at the bottom. Capping the height and letting
         it scroll internally means it always shows a handful of items at a
            time and the rest are one scroll away, however long the list gets. */
            .sbsl-dropdown{
                  max-height:320px;
                    overflow-y:auto;
            }
            
            }

/* Certifications and Approvals section (homepage) */
.sbsl-cert-section {
    padding: 70px 0;
}
.sbsl-cert-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 320px));
    justify-content: center;
    gap: 24px;
    margin-top: 30px;
}
.sbsl-cert-card {
    background: var(--sbsl-card);
    border: 1px solid var(--sbsl-border);
    border-radius: var(--sbsl-radius-sm);
    box-shadow: var(--sbsl-shadow);
    padding: 24px 20px;
    text-align: center;
    transition: transform 0.2s ease;
}
.sbsl-cert-card:hover {
    transform: translateY(-4px);
}
.sbsl-cert-card img {
    display: block;
    max-width: 100%;
    max-height: 380px;
    object-fit: contain;
    margin: 0 auto 14px auto;
    border-radius: 6px;
}
.sbsl-cert-card p {
    font-weight: 600;
    color: var(--sbsl-ink);
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
    text-align: center !important;
}

/* Achievement Highlight Badge - BCA Program No.1 Brand */
.sbsl-achievement-highlight {
    display: flex;
    align-items: center;
    gap: 20px;
    background: linear-gradient(135deg, #0b3d91 0%, #1565c0 100%);
    color: #fff;
    border-radius: 14px;
    padding: 24px 28px;
    margin: 0 0 32px 0;
    box-shadow: 0 8px 24px rgba(11, 61, 145, 0.18);
}
.sbsl-achievement-icon {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffd54f;
}
.sbsl-achievement-icon svg {
    width: 34px;
    height: 34px;
}
.sbsl-achievement-text h3 {
    margin: 0 0 6px 0;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
}
.sbsl-achievement-text p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.92);
}
@media (max-width: 767px) {
    .sbsl-achievement-highlight {
        flex-direction: column;
        text-align: center;
        padding: 20px;
        gap: 12px;
    }
    .sbsl-achievement-icon {
        width: 56px;
        height: 56px;
    }
    .sbsl-achievement-text h3 {
        font-size: 18px;
    }
}