/*
 * Socimo overrides.
 *
 * Loaded after main.css. Everything here is a deliberate departure from the
 * purchased template, kept in one file so the 950 KB original stays untouched
 * and every change is easy to find and reverse.
 */

/* --- Our Group -----------------------------------------------------------
 * The template inverts every logo and fades the strip out at both edges.
 * Client logos have their own colours, so both effects are removed.
 */
.brand-logo img,
.brand-slider-2 .brand-logo img {
  filter: none;
  -webkit-filter: none;
}

.brand-slider-2::before,
.brand-slider-2::after {
  content: none;
}

/* One row, evenly spaced, logos aligned on a common baseline. */
.brand-slider-2 .swiper-wrapper {
  align-items: center;
}

.brand-slider-2 .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand-slider-2 .brand-logo img {
  max-height: 56px;
  width: auto;
  object-fit: contain;
}

/* --- About: Mission / Vision / Values ------------------------------------
 * Three square cards in place of the template's four wide ones.
 */
.feature-item.is-square {
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (max-width: 575px) {
  .feature-item.is-square {
    aspect-ratio: auto;
    min-height: 220px;
  }
}

/* --- Language switcher ---------------------------------------------------
 * Sits between the phone number and the Menu button. The panel matches the
 * dark header rather than fighting it, so the links stay legible.
 */
.socimo-lang {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-inline-start: 22px;
}

.socimo-lang__current {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--tj-color-common-white, #f7f7f7);
  font: inherit;
  font-weight: 600;
  letter-spacing: .04em;
  cursor: pointer;
}

.socimo-lang__current i {
  font-size: .7em;
  transform: rotate(90deg);
  transition: transform .2s ease;
}

.socimo-lang.is-open .socimo-lang__current i { transform: rotate(-90deg); }

.socimo-lang__list {
  position: absolute;
  top: calc(100% + 16px);
  inset-inline-start: 50%;
  translate: -50% 0;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  min-width: 86px;
  border-radius: 8px;
  background: var(--tj-color-theme-dark, #051229);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  z-index: 60;
}

.socimo-lang.is-open .socimo-lang__list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.socimo-lang__list li { margin: 0; }

.socimo-lang__list a {
  display: block;
  padding: 8px 18px;
  color: var(--tj-color-common-white, #f7f7f7);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.socimo-lang__list a:hover,
.socimo-lang__list a:focus-visible,
.socimo-lang__list .is-current a {
  color: var(--tj-color-theme-primary, #0075ff);
}

/* Gallery items that exist only so the lightbox has the full set. */
.socimo-gallery-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  pointer-events: none;
}

/* Decorative slashes before a section sub-title, kept out of the text so a
   translation tool sees only the words. */
.socimo-slash {
  opacity: .85;
  margin-inline-end: 2px;
}

/* --- Portfolio cards -----------------------------------------------------
 * The card's gradient is a full-size ::before overlay drawn above the image
 * link, so it intercepted every click and the lightbox never opened. The
 * gradient is decoration; it should not take pointer events.
 */
.project-item::before,
.project-item::after {
  pointer-events: none;
}

.project-item .project-image > a {
  position: relative;
  z-index: 3;
  display: block;
  cursor: pointer;
}

/* Hero slides took their height from their own headline, so a slide with a
   shorter title left a gap beneath it and the section below showed through.
   Stretch every slide to the tallest, and let the section fill it. */
.tj-hero-slider.style-1 .swiper-wrapper {
  align-items: stretch;
}
.tj-hero-slider.style-1 .swiper-slide {
  height: auto;
}
.tj-hero-slider.style-1 .swiper-slide > .tj-slider-section,
.tj-hero-slider.style-1 .swiper-slide > .tj-slider-section > .container,
.tj-hero-slider.style-1 .swiper-slide > .tj-slider-section > .container > .row,
.tj-hero-slider.style-1 .swiper-slide .slider-wrapper {
  height: 100%;
}

/* An uploaded icon, used in place of the built-in icon font. */
.socimo-service-icon-img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  display: block;
}
.mega-menu-service-icon .socimo-service-icon-img {
  width: 26px;
  height: 26px;
  margin: 0 auto;
}

/* Top-level menu links scroll to a band of the homepage, so every target
   needs to clear the sticky header. */
html {
  scroll-behavior: smooth;
}
#about,
#services,
#projects,
#group,
#contact {
  scroll-margin-top: 110px;
}
@media (max-width: 991px) {
  #about,
  #services,
  #projects,
  #group,
  #contact {
    scroll-margin-top: 80px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* The circle behind a menu icon turns solid blue on hover, which would swallow
   a dark uploaded icon. Flip it to white the way the icon font does. */
.mainmenu ul > li > .mega-menu-service-single:hover .mega-menu-service-icon .socimo-service-icon-img,
.mobile_menu ul > li > .mega-menu-service-single:hover .mega-menu-service-icon .socimo-service-icon-img {
  filter: brightness(0) invert(1);
}

/* Subsidiary cards. The client wants the logos shown plainly, so the fade
   over the image goes and the card gets a hairline border instead. The
   caption band carries its own solid background, so the text stays readable
   without the gradient behind it. */
.team-item::before {
  display: none;
}
.team-item {
  background-color: var(--tj-color-common-white, #fff);
  border: 1px solid #dfe3e8;
}