/**----------------------------------------
  ReaddlyTech brand overrides
  Main color: #8B81A6, always with white text
  when used as a background.
----------------------------------------*/
:root,
.tj-light-mode {
  --tj-color-theme-primary: #8B81A6;
  --tj-color-border-2: rgba(139, 129, 166, 0.5);
  --rt-primary: #8b81a6;
  --rt-primary-dark: #6c6191;
}

/* Home page: founder card without the signature image -> drop the
   divider bar that used to separate it on the right. */
.author-info--no-sep {
  -webkit-border-end: 0 !important;
          border-inline-end: 0 !important;
}

/* Home about section title: smaller (32px) and forced on two lines. */
.about-title-2l {
  font-size: 32px;
  line-height: 1.35;
}

/* Home about card: the rotating award circle is removed so the card
   stays whole; the decorative mask covers the full card again and no
   extra bottom clearance is needed. */
.about-content-area--home .award-circle {
  display: none;
}
/* About card (home + about page): paint the decorative panel as a full
   rectangle, removing the corner notch left by the shape mask. */
.about-content-area::before {
  -webkit-mask-image: none;
  mask-image: none;
}

/* About page: remove divider on author area */
.about-left-bottom .author-area .author-info {
  -webkit-border-end: 0;
  border-inline-end: 0;
  border-bottom: 0;
}

/* About page: WEPs signatory section */
.weps-section .sec-heading {
  margin-bottom: 30px;
}
.weps-card {
  width: 100%;
  padding: 48px 56px;
  border-radius: 16px;
  background-color: #ffffff;
  border: 1px solid var(--tj-color-border-1);
}
.weps-row {
  display: -webkit-box;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  align-items: center;
  gap: 48px;
}
.weps-content {
  -webkit-box-flex: 1;
  flex: 1 1 420px;
  min-width: 0;
}
.weps-media {
  -webkit-box-flex: 1;
  flex: 1 1 380px;
  min-width: 0;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
}
.weps-media-inner {
  width: 100%;
}
.weps-media-inner img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}
.weps-badge {
  display: -webkit-inline-box;
  display: inline-flex;
  -webkit-box-align: center;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  margin-bottom: 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--tj-color-theme-primary);
  background-color: rgba(24, 119, 242, 0.1);
}
.weps-badge i {
  font-size: 16px;
  line-height: 1;
}
.weps-principle-title {
  font-size: 28px;
  line-height: 1.3;
  margin-bottom: 16px;
}
.weps-desc {
  margin-bottom: 26px;
}
.weps-partner {
  display: -webkit-inline-box;
  display: inline-flex;
  -webkit-box-align: center;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--tj-color-theme-primary);
}
.weps-partner i {
  font-size: 18px;
  line-height: 1;
}
@media (max-width: 991px) {
  .weps-card {
    padding: 32px 24px;
  }
  .weps-row {
    gap: 30px;
  }
  .weps-principle-title {
    font-size: 24px;
  }
}

/* About page testimonials: client icons as rounded squares instead of circles. */
.tj-testimonial-section-4 .client-thumb .thumb-img {
  border-radius: 16px;
  background-color: #fff;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
}

/* Mobile: team cards 2-per-row, smaller paddings/gaps/text. */
@media only screen and (max-width: 575px) {
  .tj-team-section .row.rg-30 {
    --bs-gutter-x: 8px;
    --bs-gutter-y: 8px;
  }
  .tj-team-section .team-item {
    padding: 6px;
    border-radius: 8px;
  }
  .tj-team-section .team-item .team-img {
    border-radius: 6px;
  }
  .tj-team-section .team-item .team-content {
    padding: 10px 8px 8px;
  }
  .tj-team-section .team-item .title {
    font-size: 13px;
    margin-bottom: 3px;
  }
  .tj-team-section .team-item .designation {
    font-size: 10px;
    line-height: 1.2;
  }
  .tj-team-section {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }
  /* Make team cards 2 per row on mobile by enforcing col-6 */
  .tj-team-section .row.rg-30 > [class*="col-"] {
    flex: 0 0 50%;
    max-width: 50%;
  }
}
.tj-testimonial-section-4 .client-thumb .thumb-img img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  mix-blend-mode: normal;
}
.tj-testimonial-section-4 .client-thumb .thumb-img img[src*="lcaverne"] {
  border-radius: 16px;
}
.tj-testimonial-section-4 .client-thumb .swiper-slide-active img {
  mix-blend-mode: normal;
}

/* ---------- Buttons: white text on the brand color ---------- */
.tj-primary-btn .btn-text,
.tj-light-mode .tj-primary-btn .btn-text {
  color: #fff;
}
.tj-primary-btn .btn-text span,
.tj-light-mode .tj-primary-btn .btn-text span {
  text-shadow: 0 30px 0 var(--rt-primary);
}
.tj-light-mode .tj-primary-btn.style-2 .btn-icon i {
  color: #fff;
}
.tj-light-mode .tj-primary-btn.style-2 .btn-icon::before {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
}
.contact-form .submit-btn .tj-primary-btn .btn-text,
.tj-light-mode .contact-form .submit-btn .tj-primary-btn .btn-text {
  color: #fff;
}

/* ---------- Blocks with the brand color as background ---------- */
.cta-area .cta-content .title,
.tj-light-mode .cta-area .cta-content .title {
  color: #fff;
}
.cta-area .social-links .title,
.cta-area .social-links a,
.tj-light-mode .cta-area .social-links .title,
.tj-light-mode .cta-area .social-links a {
  color: #fff;
}
.experience-area,
.experience-area * {
  color: #fff;
}
.process-step,
.tj-light-mode .process-step {
  color: #fff;
}
.tj-pagination ul li .page-numbers.current,
.tj-light-mode .tj-pagination ul li .page-numbers.current {
  color: #fff;
}
.widget-nav-menu ul li a .badge,
.tj-light-mode .widget-nav-menu ul li a .badge {
  color: #fff;
}
.service_list_item:hover .item_count {
  color: #fff;
}
.project-wrapper-2 .project-item .categories a,
.tj-light-mode .project-wrapper-2 .project-item .categories a {
  color: #fff;
}
.tj-light-mode .project-item:hover .tj-icon-btn i,
.tj-light-mode .project-wrapper-2 .project-item:hover .tj-icon-btn i {
  color: #fff;
}
.tj-light-mode .team-item .social-links ul li a:hover {
  color: #fff;
}
.tj-light-mode .choose-box:hover .choose-icon {
  color: #fff;
}
.tj-light-mode .accordion_title:not(.collapsed)::after {
  color: #fff;
}

/* ---------- Small text: darker brand tint for readability ---------- */
.tj-light-mode .categories a,
.tj-light-mode .blog-item .categories a,
.tj-light-mode .project-item .categories a {
  color: var(--rt-primary-dark);
}
.tj-light-mode .widget-categories ul li a::before {
  background-color: var(--rt-primary);
}
.tj-light-mode .tagcloud a:hover {
  background-color: var(--rt-primary);
  border-color: var(--rt-primary);
  color: #fff;
}

/* ---------- Header language switcher (FR / EN) ---------- */
.header-lang {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 16px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
}
.header-lang .lang-link {
  color: var(--tj-color-heading-primary);
  opacity: 0.5;
  transition: all 0.3s ease;
}
.header-lang .lang-link:hover,
.header-lang .lang-link.is-active {
  opacity: 1;
  color: var(--rt-primary);
}
.header-lang .lang-sep {
  opacity: 0.3;
  color: var(--tj-color-heading-primary);
}
.hamburger_search .header-lang {
  margin-right: 0;
  font-size: 18px;
}

/* ---------- Logos & images ---------- */
.client-logo img {
  max-height: 56px;
  max-width: 170px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.project-img.project-logo {
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 11;
  padding: 30px;
}
.project-img.project-logo img {
  width: auto;
  height: auto;
  max-width: 58%;
  max-height: 58%;
  object-fit: contain;
  transition: transform 0.5s ease;
}
.project-img.project-logo:hover img {
  transform: scale(1.06);
}
.blog-thumb.has-logo {
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.blog-thumb.has-logo img {
  width: auto;
  height: auto;
  max-width: 60%;
  max-height: 55%;
  object-fit: contain;
  transform: none !important;
}
.blog-thumb.has-logo img:hover {
  transform: none !important;
}
.image-box.is-ui img {
  object-fit: contain;
  background: #fff;
  padding: 28px;
  border-radius: 10px;
}
.team-img img {
  object-fit: cover;
  object-position: top center;
}
.about-img img {
  object-fit: cover;
}

/* ---------- Contact map (Google Maps) ---------- */
.map-area {
  position: relative;
  min-height: 460px;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--tj-color-border-1);
}
.map-area iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.map-area #map {
  display: none;
}

/* ---------- Misc polish ---------- */
.sec-heading .desc,
.tj-light-mode .sec-heading .desc {
  max-width: 620px;
}
.cta-area {
  flex-wrap: wrap;
  gap: 10px;
}
.cta-right .social-links {
  display: flex;
  align-items: center;
  gap: 14px;
}
.cta-right .social-links ul {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tj_list li {
  color: var(--tj-color-text-body);
}
.infos-wrapper .project-text .title {
  font-size: 16px;
}
.widget-categories .infos-wrapper .infos-item {
  border-color: var(--tj-color-border-1);
}
@media (max-width: 767px) {
  .header-lang {
    margin-right: 10px;
    font-size: 14px;
  }
  .map-area {
    min-height: 320px;
  }
  .project-img.project-logo {
    padding: 20px;
  }
}

/* ---------- Site logo sizing (height-based; supports wide + square marks) ---------- */
.site_logo .logo {
  max-width: none;
  width: auto;
}
.site_logo .logo img {
  height: 52px;
  width: auto;
}
.hamburger_logo .mobile_logo {
  max-width: none;
  width: auto;
}
.hamburger_logo .mobile_logo img {
  height: 56px;
  width: auto;
}
.footer-logo {
  max-width: 220px;
}
.footer-logo img {
  height: 66px;
  width: auto;
}
#loading-icon img {
  height: 62px;
  width: auto;
  max-width: none;
}

/* ---------- Logo project cards: keep the logo clear of the overlay card ---------- */
.project-img.project-logo {
  aspect-ratio: 16 / 12;
  align-items: flex-start;
  padding: 34px 34px 104px;
}

/* ---------- Language switcher inside the mobile hamburger menu ---------- */
.hamburger-lang {
  width: 100%;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--tj-color-border-1);
}
.hamburger-lang .header-lang {
  margin-right: 0;
  font-size: 17px;
  justify-content: center;
  width: 100%;
}

/* ---------- Footer extras ---------- */
.footer-widget .footer-socs {
  margin-top: 24px;
}
.footer-widget .footer-socs ul {
  display: flex;
  gap: 10px;
}
.footer-widget .footer-socs ul li a {
  width: 42px;
  height: 42px;
  line-height: 42px;
  text-align: center;
  border-radius: 50%;
}
.footer-widget.widget-contact .footer-contact-info .contact-item a {
  display: block;
}
.footer-widget.widget-contact .footer-contact-info .contact-item a + a {
  margin-top: 4px;
}

@media (max-width: 767px) {
  .site_logo .logo img {
    height: 44px;
  }
  .project-img.project-logo {
    padding: 24px 24px 96px;
  }
}

/* ---------- Detail galleries: portrait app screenshots must not blow up ---------- */
.image-box img {
  max-height: 620px;
  object-fit: contain;
  background: #fff;
}
.thumb-item .thumb-img img {
  object-fit: cover;
}
@media (max-width: 767px) {
  .image-box img {
    max-height: 420px;
  }
}

/* ---------- Brand background: text must stay white (contrast rule) ---------- */
.tj-light-mode .client-content span,
.client-content span {
  color: #fff;
}
.tj-light-mode .experience-area .count-text,
.tj-light-mode .experience-area .inline-content,
.tj-light-mode .experience-area .exp-badge,
.experience-area .count-text {
  color: #fff;
}
.tj-light-mode .experience-area .exp-badge {
  background-color: rgba(255, 255, 255, 0.18);
}

/* Startup Act badge: icon sits on brand background -> white */
.tj-light-mode .banner-img-area .trusted .icon,
.tj-light-mode .banner-img-area .trusted .icon i,
.banner-img-area .trusted .icon,
.banner-img-area .trusted .icon i {
  color: #fff;
}

/* Home hero headline only: fixed 60px */
@media (min-width: 1200px) {
  .tj-banner-section .banner-content .banner-title {
    font-size: 60px;
  }
}

/* ---------- Icons sitting on brand background -> white ---------- */
.back_to_top_icon,
.back_to_top_icon i,
.share-icon,
.share-icon i,
.project-icons,
.project-icons i,
.list-area .list-style-1 li > span,
.list-area .list-style-1 li > span i,
.faq-contact-list li,
.faq-contact-list li i,
.tj-light-mode .circle-icon i,
.circle-icon > span,
.circle-icon > span i {
  color: #fff;
}

/* Space freed by removing the top strip: desktop header padding (half of the old 56px strip) */
@media (min-width: 992px) {
  .header-area.header-1.header-absolute {
    padding-top: 28px;
  }
}


/* ---------- Loading overlay: background, spinner, logo ---------- */
.preloader {
  background-color: #f1f3fc;
}
.loading-container,
.loading {
  height: 160px;
  width: 160px;
}
.loading {
  border: 3px solid rgba(139, 129, 166, 0.16);
  border-top-color: #8b81a6;
  border-right-color: #8b81a6;
  border-radius: 50%;
  animation: rotate-loading 0.85s linear infinite;
}
#loading-icon {
  max-width: 124px;
}
#loading-icon img {
  height: 112px;
  width: auto;
  max-width: none;
}

/* ---------- Home project cards: compact detail panel + glass background ---------- */
.tj-project-section .project-slider .project-content {
  background-color: rgba(246, 247, 247, 0.6);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.55);
  padding: 14px 18px 12px;
  margin: 12px;
  width: calc(100% - 24px);
}
.tj-project-section .project-slider .project-content .content-inner {
  flex: 1 1 auto;
  min-width: 0;
}
.tj-project-section .project-slider .project-item .categories {
  margin-bottom: 6px;
  gap: 6px;
}
.tj-project-section .project-slider .project-item .categories a {
  font-size: 12px;
  padding: 3px 8px;
  background-color: rgba(255, 255, 255, 0.72);
  border-color: rgba(139, 129, 166, 0.35);
}
.tj-project-section .project-slider .project-item .title {
  max-width: 100%;
  width: 100%;
  font-size: 18px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tj-project-section .project-slider .project-item .title a {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tj-project-section .project-slider .project-item .tj-icon-btn {
  width: 44px;
  height: 44px;
  font-size: 16px;
  margin-bottom: 0;
  margin-left: 12px;
  flex: 0 0 auto;
}
.tj-project-section .project-slider .project-item .tj-icon-btn i {
  font-size: 16px;
}

/* ---------- Awards: center partner logos inside the thumb ---------- */
.blog-thumb.has-logo > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* ---------- Home team: equal card + photo heights ---------- */
.tj-team-section .col-lg-3 .team-item {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.tj-team-section .col-lg-3 .team-img {
  aspect-ratio: 1 / 1;
  flex: 0 0 auto;
}

/* ---------- Services: white icon on hover (circle bg turns dark) ---------- */
.tj-light-mode .service-item:hover .service-icon,
.tj-light-mode .service-item:hover .service-icon i {
  color: #fff;
}

/* ---------- Hero trusted badge: text max 2 lines, box widens as needed ---------- */
.banner-img-area .trusted {
  max-width: 245px;
}

/* ---------- Footer social buttons: visible brand circle + white icon ---------- */
.footer-widget .footer-socs ul li a {
  background-color: var(--tj-color-theme-primary);
  color: #fff;
}
.footer-widget .footer-socs ul li a:hover {
  background-color: #6c6191;
  color: #fff;
  -webkit-transform: translateY(-3px);
          transform: translateY(-3px);
}

/* ---------- About "Deux expertises" : equal card heights ---------- */
.tj-choose-section .choose-box {
  height: 100%;
}

/* ---------- Team page: equal card + photo heights (team page now uses col-lg-3) ---------- */

/* ---------- Sedki Tlija: keep face centred in the square crop ---------- */
.tj-team-section .team-img img[src*="team-member5-photo"] {
  object-position: center;
}

/* ---------- Contact "Un projet en tête" : equal card heights ---------- */
.contact-item.style-2 {
  height: 100%;
}

/* ---------- Projects grid cards: image fills the whole card ---------- */
.project-item .project-img.project-logo {
  aspect-ratio: auto;
  padding: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.project-item .project-img.project-logo img {
  position: static;
  width: auto;
  height: auto;
  max-width: 80%;
  max-height: 60%;
  object-fit: contain;
}
/* ---------- Partners: all logos render at the same height ---------- */
.client-logo img {
  width: auto;
  height: 56px;
  max-width: 75%;
  max-height: 56px;
}

#all .project-item {
  background-color: #ffffff;
}
#all .project-item .project-img::before {
  display: none;
}
#all .project-item .project-content {
  background-color: rgba(246, 247, 247, 0.6);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.55);
  padding: 14px 18px 12px;
  margin: 12px;
  width: calc(100% - 24px);
}
#all .project-item .title {
  font-size: 18px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#all .project-item .project-content .content-inner {
  flex: 1 1 auto;
  min-width: 0;
}
#all .project-item .tj-icon-btn {
  width: 44px;
  height: 44px;
  font-size: 16px;
  margin-bottom: 0;
  margin-left: 12px;
  flex: 0 0 auto;
}
#all .project-item .tj-icon-btn i {
  font-size: 16px;
}

/* ---------- Home: vertical space between partners block and "Un projet en tête ?" CTA ---------- */
.tj-blog-section + .tj-cta-section {
  margin-top: 70px;
}

/* ---------- Hide "Un projet similaire ?" sidebar card on all detail pages ---------- */
.widget-feature-item {
  display: none;
}

/* ---------- Detail page sidebar: "Voir le site en ligne" button under the info card ---------- */
.live-site-sidebar {
  margin-top: 24px;
}
.live-site-sidebar .tj-primary-btn {
  width: 100%;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

/* ---------- Projects page: "Voir le site en ligne" button on the right of the card meta ---------- */
.blog-post-wrapper .blog-item .blog-meta {
  width: 100%;
  justify-content: space-between;
}
.blog-post-wrapper .blog-item .blog-meta .live-site a {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 30px;
  color: #8b81a6;
  background-color: rgba(139, 129, 166, 0.1);
  border: 1px solid rgba(139, 129, 166, 0.35);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}
.blog-post-wrapper .blog-item .blog-meta .live-site a:hover {
  background-color: #8b81a6;
  color: #fff;
  border-color: #8b81a6;
}