/*
 * Patimer overrides on top of the Reeni RTL template.
 * Only typography for Hebrew and the few states the template had no styles for;
 * the template's layout and look stay untouched.
 */

:root {
  /* Rajdhani, the template's English face, comes first so every Latin word and digit uses it
     at the surrounding size. It has no Hebrew glyphs, so Hebrew falls through to Heebo (text)
     and Rubik (headings). */
  --font-primary: "Rajdhani", "Heebo", "Rubik", sans-serif;
  --font-secondary: "Rajdhani", "Rubik", "Heebo", sans-serif;
}

/* The black edge fades are 614px images sized for the 1320px container. In the 1140px container
   (1200-1399px screens) the two overlapped and dimmed the whole statement, and its fifth line fell below
   them. Sized as a share of the width and stretched to the text's height, they fade the same way at every
   desktop width. */
@media (min-width: 1200px) {
  .text-para-doc-wrap :is(.left-bg-text-para, .right-bg-text-para) { bottom: 0; width: 46.5%; }
  .text-para-doc-wrap :is(.left-bg-text-para, .right-bg-text-para) img { display: block; width: 100%; height: 100%; }
}

/* "UI Developer" over the hero photo: one line at every width. The template's 110px is sized for the
   660px column of the 1320px container and wrapped onto two lines in narrower columns. */
.banner-two-main-wrapper .banner-right-content .main-img :is(.banner-big-text-1, .banner-big-text-2) { white-space: nowrap; }
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .banner-two-main-wrapper .banner-right-content .main-img :is(.banner-big-text-1, .banner-big-text-2) { font-size: 86px; line-height: 96px; }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .banner-two-main-wrapper .banner-right-content .main-img .banner-big-text-1 { font-size: 78px; line-height: 90px; }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .banner-two-main-wrapper .banner-right-content .main-img :is(.banner-big-text-1, .banner-big-text-2) { font-size: 94px; line-height: 104px; }
}

.text-para-doc-wrap .text-para-documents { color: #89898f; }
.text-para-doc-wrap .text-para-documents span { color: inherit; }
.text-para-doc-wrap .text-para-documents .statement-strong { color: #fff; }
.text-para-doc-wrap .text-para-documents .statement-accent { color: var(--color-primary); }
html:is([data-palette="gold"], [data-palette="silver"]) .text-para-doc-wrap .text-para-documents .statement-accent {
  background-image: var(--metallic-text, linear-gradient(110deg, var(--color-primary), var(--color-primary-3rd)));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Alternative accent families, including softer metallic gold and silver. */
:root[data-palette]:not([data-palette="rose"]) {
  --color-primary-3rd: hsl(calc(var(--palette-hue) + 12), calc(98% * var(--palette-saturation-scale)), 72%);
  --color-primary-4th: hsl(calc(var(--palette-hue) - 12), calc(100% * var(--palette-saturation-scale)), 58%);
  --gradient-box: linear-gradient(to right, hsl(calc(var(--palette-hue) - 14), calc(90% * var(--palette-saturation-scale)), 66%), var(--color-primary));
  --gradient-one: linear-gradient(to right bottom, var(--color-primary), hsl(calc(var(--palette-hue) + 14), calc(85% * var(--palette-saturation-scale)), 58%));
  --gradient-two: linear-gradient(to right, var(--color-primary), hsl(calc(var(--palette-hue) - 14), calc(85% * var(--palette-saturation-scale)), 58%));
  --text-gradient-one: var(--gradient-two);
}
html[data-palette]:not([data-palette="rose"]) :is(.benner-two-bg-red-img, .banner-shape-two, .right-bg-text-para, .left-bg-text-para, .logo-under-img-2) img {
  filter: hue-rotate(var(--palette-image-rotation)) saturate(var(--palette-saturation-scale)) brightness(var(--palette-image-brightness));
}
html:is([data-palette="gold"], [data-palette="silver"]) .tmp-btn:not(.btn-border),
html:is([data-palette="gold"], [data-palette="silver"]) .tmp-btn:not(.btn-border) :is(.btn-text, .btn-icon) {
  color: #151515;
}

/* Soft reflected-light bands give the metallic palettes depth without a shimmer animation. */
:root[data-palette="gold"] {
  --metallic-surface: linear-gradient(115deg, #b08a4b 0%, #d3b579 24%, #efdfb6 46%, #c8a361 70%, #e2c991 100%);
  --metallic-text: linear-gradient(110deg, #c5a364 0%, #eeddb4 32%, #fff0cc 48%, #d2b278 72%, #ecd6a7 100%);
  --metallic-border: linear-gradient(115deg, #947344, #e0c998 42%, #b68e50 76%, #dcc38f);
  --metallic-shadow: rgba(198, 163, 97, .12);
  --gradient-box: var(--metallic-surface);
  --gradient-one: var(--metallic-surface);
  --gradient-two: var(--metallic-surface);
  --text-gradient-one: var(--metallic-text);
}
:root[data-palette="silver"] {
  --metallic-surface: linear-gradient(115deg, #9ca6b3 0%, #c8ced6 100%);
  --metallic-text: linear-gradient(110deg, #a8b2bf 0%, #d6dce3 100%);
  --metallic-border: linear-gradient(115deg, #7f8c9d 0%, #bac4d0 100%);
  --metallic-shadow: rgba(190, 201, 216, .10);
  --gradient-box: var(--metallic-surface);
  --gradient-one: var(--metallic-surface);
  --gradient-two: var(--metallic-surface);
  --text-gradient-one: var(--metallic-text);
}
html:is([data-palette="gold"], [data-palette="silver"]) :is(.tmp-btn:not(.btn-border), .tmp-menu-bars, .progress-bar) {
  background-image: var(--metallic-surface);
  background-size: 140% 100%;
  background-position: 45% 50%;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 4px 20px var(--metallic-shadow);
}
html:is([data-palette="gold"], [data-palette="silver"]) .tmp-btn:not(.btn-border):hover {
  background-position: 70% 50%;
}
html[data-palette="silver"] :is(.tmp-btn:not(.btn-border), .tmp-menu-bars, .progress-bar) {
  background-size: 100% 100%;
  box-shadow: inset 0 1px 0 rgba(230,236,242,.16), 0 4px 20px var(--metallic-shadow);
}
html:is([data-palette="gold"], [data-palette="silver"]) .tmp-btn.btn-border:hover {
  background-image: var(--metallic-surface);
  color: #151515;
}
html:is([data-palette="gold"], [data-palette="silver"]) :is(.theme-gradient, .sub-title, .section-sub-title .subtitle) {
  background-image: var(--metallic-text);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
html:is([data-palette="gold"], [data-palette="silver"]) .palette-option:has(input:checked) {
  border-color: transparent;
  background: linear-gradient(#1c1c1e, #1c1c1e) padding-box, var(--metallic-border) border-box;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.palette-option:has(input[value="gold"]) .palette-swatch {
  background: linear-gradient(115deg, #b08a4b, #efdfb6 46%, #c8a361 70%, #e2c991);
}
.palette-option:has(input[value="silver"]) .palette-swatch {
  background: linear-gradient(115deg, #9ca6b3 0%, #c8ced6 100%);
}
/* The toggle is a round button the size of the template's chat button (55px, 40px on small phones).
   On mobile it moves to the bottom-right corner, opposite the chat button. */
.palette-picker {
  --palette-size: 55px;
  --palette-chat-bottom: 20px;
  position: fixed;
  top: 42%;
  left: 20px;
  z-index: 10000;
  display: flex;
  align-items: flex-start;
  direction: ltr;
}
.palette-toggle {
  display: grid;
  place-items: center;
  flex: 0 0 var(--palette-size);
  width: var(--palette-size);
  height: var(--palette-size);
  padding: 0;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  background: #171719;
  color: #fff;
  box-shadow: 0 8px 28px #0005;
  cursor: pointer;
  transition: border-color .3s, bottom .3s;
}
.palette-toggle:hover, .palette-toggle[aria-expanded="true"] { border-color: var(--color-primary); }
.palette-toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.palette-toggle i { color: var(--color-primary); font-size: 22px; }
.palette-panel {
  width: min(286px, calc(100vw - 58px));
  max-height: calc(58dvh - 16px);
  overflow-y: auto;
  margin-left: 10px;
  padding: 22px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 16px;
  background: rgba(20,20,22,.97);
  box-shadow: 0 18px 60px #0008;
  backdrop-filter: blur(16px);
  direction: rtl;
}
.palette-panel[hidden] { display: none; }
.palette-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.palette-panel-heading h2 { flex: 1; margin: 0; color: #fff; font-size: 17px; line-height: 1.5; }
.palette-close { flex: 0 0 28px; width: 28px; height: 28px; padding: 0; border: 0; background: transparent; color: #aaa; font-size: 28px; line-height: 1; cursor: pointer; }
.palette-panel fieldset { margin: 0; padding: 0; border: 0; }
.palette-panel legend, .palette-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.palette-option { position: relative; display: flex; align-items: center; gap: 12px; margin: 0 0 10px; padding: 12px; border: 1px solid #ffffff18; border-radius: 10px; color: #fff; cursor: pointer; }
.palette-option:has(input:checked) { border-color: var(--color-primary); background: #ffffff08; }
.palette-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.palette-option:has(input:focus-visible), .palette-toggle:focus-visible, .palette-close:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.palette-swatch { width: 30px; height: 30px; border-radius: 50%; background: var(--swatch); flex-shrink: 0; box-shadow: inset 0 0 0 1px #ffffff30; }
.palette-option small { display: block; margin-top: 3px; font-size: 11px; color: #aaa; }
.palette-note { margin: 16px 0 0; font-size: 11px; color: #999; line-height: 1.6; }
@media (max-height: 600px) and (min-width: 768px) { .palette-picker { top: 16px; } .palette-panel { max-height: calc(100dvh - 32px); overflow-y: auto; } }
@media (max-width: 767px) {
  /* In RTL the template puts the chat and back-to-top buttons bottom-left, so the bottom-right corner is
     free: mirror the chat button there (same 20px insets). The panel opens above it. */
  .palette-picker {
    top: auto;
    left: auto;
    right: 20px;
    bottom: var(--palette-chat-bottom);
  }
  .palette-panel {
    position: fixed;
    right: 16px;
    left: 16px;
    bottom: calc(var(--palette-chat-bottom) + var(--palette-size) + 12px);
    width: auto;
    max-height: calc(100dvh - var(--palette-chat-bottom) - var(--palette-size) - 36px);
    margin: 0;
    padding: 18px;
  }
}
@media (max-width: 575px) {
  .palette-picker { --palette-size: 40px; }
}

/* The <PATIMER STUDIO/> logo is a cropped SVG about 7x wider than tall, so a modest
   height already gives it the presence of the template's logo. */
.logo img,
.header-one .header-content .logo img {
  height: 30px;
  width: auto;
  max-width: none;
}

@media only screen and (max-width: 767px) {
  .logo img,
  .header-one .header-content .logo img {
    height: 24px;
  }
}

/* Honeypot field for spam bots; never visible to people. */
.hp-field {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  inset-inline-start: -9999px;
}

#form-messages:not(:empty) {
  margin-bottom: 20px;
}

/* Long Hebrew project titles in the tag pills and menus should wrap instead of overflowing. */
.latest-portfolio-card-style-two .tag-items ul {
  flex-wrap: wrap;
}

/* Article and project titles are long; size the dropdown to its longest title so each
   fits on one line, up to a cap, with room on the left for the hover arrow. */
.tmp-mainmenu-nav .tmp-mainmenu .has-dropdown .submenu {
  width: max-content;
  min-width: 260px;
  max-width: min(480px, 90vw);
  padding: 10px 0 !important;
}

.tmp-mainmenu-nav .tmp-mainmenu .has-dropdown .submenu li a {
  padding: 9px 22px 9px 40px;
  line-height: 1.5;
}

.tmp-mainmenu-nav .tmp-mainmenu .has-dropdown .submenu li a::before {
  height: 100%;
  border-radius: 0;
}

/* Submenus: the template positions and indents them for LTR; mirror them for RTL. */
.tmp-mainmenu-nav .tmp-mainmenu > li > a i {
  margin-left: 0;
  margin-right: 3px;
}

.tmp-mainmenu-nav .tmp-mainmenu > li.has-dropdown .submenu {
  left: auto;
  right: 0;
  text-align: right;
  transform-origin: 100% 0;
  box-shadow: 3px 0 20px 4px rgba(100, 95, 95, 0.08);
}

.tmp-mainmenu-nav .tmp-mainmenu .has-dropdown .submenu li::after {
  content: "\f104";
  right: auto;
  left: 20px;
}

.tmp-mainmenu-nav .tmp-mainmenu .has-dropdown .submenu li:hover::after {
  right: auto;
  left: 15px;
}

.tmp-mainmenu-nav .tmp-mainmenu .has-dropdown .submenu li > a.active,
.tmp-mainmenu-nav .tmp-mainmenu .has-dropdown .submenu li:hover > a {
  padding-left: 40px;
  padding-right: 30px;
}

.tmp-mainmenu-nav .tmp-mainmenu .has-dropdown .submenu li a::before {
  left: auto;
  right: 0;
}

/* Mobile menu: chevron on the left, submenu indented from the right. */
.tmp-popup-mobile-menu .tmp-mainmenu li a i {
  right: auto;
  left: 0;
}

.tmp-popup-mobile-menu .tmp-mainmenu .has-dropdown .submenu {
  padding-left: 0;
  padding-right: 16px;
}

/* Two kinds of rows: a chevron opens a list, an arrow goes somewhere. The overview link ("all projects")
   only makes sense in the mobile list; on desktop the category itself is a link. */
.tmp-mainmenu-nav .submenu-overview { display: none; }
.tmp-popup-mobile-menu .tmp-mainmenu li:not(.has-dropdown) > a { padding-left: 22px; }
.tmp-popup-mobile-menu .tmp-mainmenu li:not(.has-dropdown) > a::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 3px;
  width: 7px;
  height: 7px;
  border-bottom: 1.5px solid currentColor;
  border-left: 1.5px solid currentColor;
  opacity: .45;
  transform: translateY(-50%) rotate(45deg);
}
.tmp-popup-mobile-menu .tmp-mainmenu .has-dropdown > a { cursor: pointer; }
.tmp-popup-mobile-menu .tmp-mainmenu .has-dropdown > a i { transition: transform .3s; }
.tmp-popup-mobile-menu .tmp-mainmenu .has-dropdown > a.open { color: var(--color-primary); }
.tmp-popup-mobile-menu .tmp-mainmenu .submenu .submenu-overview > a { color: var(--color-primary); }
.tmp-popup-mobile-menu .tmp-mainmenu .submenu li { padding: 7px 0; }

/* Form feedback for the chat widget and newsletter, which have no message area in the template. */
.ready-chatting-option .chat-box .form-feedback,
.newslatter .form-feedback {
  display: block;
  margin-top: 10px;
  font-size: 14px;
}

.form-feedback.is-success {
  color: var(--color-success);
}

.form-feedback.is-error {
  color: var(--color-danger);
}

/* Article and case study body copy */
.blog-details-left-area .blog-details-discription .disc strong,
.project-details-content-wrap .docs strong {
  color: var(--color-heading);
  font-weight: 600;
}

/* ---------------------------------------------------------------
   Google reviews: the index-03 testimonial card (style-2) with a
   rating summary, in the same dark surfaces and pink accents.
   --------------------------------------------------------------- */
.google-reviews-area .google-mark {
  display: inline-flex;
  width: 44px;
  height: 44px;
  padding: 10px;
  border-radius: 50%;
  background: #ffffff;
  flex-shrink: 0;
}

.google-reviews-area .google-mark.small {
  width: 18px;
  height: 18px;
  padding: 3px;
  vertical-align: -4px;
  margin-inline-end: 6px;
}

.google-reviews-area .google-mark svg {
  width: 100%;
  height: 100%;
}

.google-reviews-area .google-stars {
  display: inline-flex;
  gap: 4px;
  color: var(--color-primary-3rd);
  font-size: 15px;
}

.google-rating-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  background: var(--color-gray-2);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 26px 34px;
  margin-bottom: 30px;
}

.google-rating-summary .summary-score {
  display: flex;
  align-items: center;
  gap: 18px;
}

.google-rating-summary .score-line {
  display: flex;
  align-items: center;
  gap: 14px;
}

.google-rating-summary .score {
  font-family: var(--font-secondary);
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-heading);
}

.google-rating-summary .google-stars {
  font-size: 18px;
}

.google-rating-summary .score-label {
  margin: 8px 0 0;
  font-size: 15px;
  color: var(--color-gray);
}

.google-rating-summary .summary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
/* Mobile: the two buttons share one row at equal width instead of stacking at their text widths. */
@media (max-width: 767px) {
  .google-rating-summary .summary-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .google-rating-summary .summary-actions:has(> .tmp-btn:only-child) { grid-template-columns: 1fr; }
  .google-rating-summary .summary-actions .tmp-btn {
    display: flex;
    justify-content: center;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding-inline: 10px;
    font-size: 14px;
  }
  .google-rating-summary .summary-actions .icon-reverse-wrapper { justify-content: center; }
  .google-rating-summary .summary-actions .btn-text { white-space: normal; text-align: center; line-height: 1.3; }
}

/* Review cards in the "approach" slider design. Real reviews are longer than the template quotes,
   so the quote is set smaller and clamped, and every card in the row gets the same height. */
.google-reviews-area .testimonial-swiper-v2 .swiper-slide {
  height: auto;
}
.google-reviews-area .client-testimonial-card-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.google-reviews-area .client-testimonial-card-wrap .client-img {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.google-reviews-area .client-testimonial-card-wrap .client-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.google-reviews-area .client-testimonial-card-wrap .author-initial {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 100px;
  background: var(--color-primary);
  color: #fff;
  font-size: 22px;
  font-weight: 700;
}
.google-reviews-area .client-testimonial-card-wrap .client-title a {
  color: inherit;
}
.google-reviews-area .client-testimonial-card-wrap .client-details .client-para {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  line-height: 1.6;
}
.google-reviews-area .client-testimonial-card-wrap .review-quote {
  width: 100%;
  margin-top: 26px;
  font-size: 20px;
  line-height: 1.7;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.google-reviews-area .client-testimonial-card-wrap .review-more {
  display: inline-block;
  margin-top: auto;
  padding-top: 16px;
  font-size: 14px;
  color: var(--color-primary);
}
.google-reviews-area .client-testimonial-card-wrap .review-more:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media only screen and (max-width: 767px) {
  .google-reviews-area .client-testimonial-card-wrap .review-quote { font-size: 17px; }
}

/* Compact reviews on a project page: smaller cards, the whole quote visible. */
.project-reviews {
  margin: 30px 0 10px;
}
.project-reviews .client-testimonial-card-wrap {
  padding: 26px;
  border-radius: 16px;
}
.project-reviews .client-testimonial-card-wrap .client-img {
  width: 48px;
  height: 48px;
  min-width: 48px;
}
.project-reviews .client-testimonial-card-wrap .client-title {
  font-size: 18px;
  margin-bottom: 2px;
}
.project-reviews .client-testimonial-card-wrap .client-details .client-para {
  font-size: 14px;
}
.project-reviews .client-testimonial-card-wrap .tmp-star ul li i {
  font-size: 13px;
}
.project-reviews .client-testimonial-card-wrap .review-quote {
  margin-top: 18px;
  font-size: 16px;
  line-height: 1.75;
  -webkit-line-clamp: unset;
  display: block;
}
@media only screen and (max-width: 767px) {
  .google-rating-summary {
    padding: 22px 20px;
  }

  .google-rating-summary .score {
    font-size: 36px;
  }
}

/* The edited portrait is already cropped; preserve its natural proportions. */
.banner-two-main-wrapper .banner-right-content .main-img > img:first-child {
  width: 490px;
  max-width: 100%;
  height: auto;
}


/* Client marks: two identical groups make a seamless, constant-speed loop. */
.client-logos {
  padding: 36px 0 42px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.client-logos-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
}
.client-logos-heading h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: rgba(255, 255, 255, .65);
}
.client-logos-pause {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font-size: 11px;
  cursor: pointer;
}
.client-logos-pause:hover { border-color: rgba(255, 255, 255, .65); }
.client-logos-pause:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.client-logos-window {
  overflow: hidden;
  direction: ltr;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.client-logos-track {
  display: flex;
  width: max-content;
  animation: client-logos-scroll 42s linear infinite;
  will-change: transform;
}
.client-logos-group {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 64px;
  margin: 0;
  padding: 0 32px;
  list-style: none;
}
/* Every logo is drawn at one height; its width follows its own proportions. */
.client-logos .client-logo {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  height: 64px;
  margin: 0;
}
.client-logo img {
  display: block;
  width: auto;
  height: 32px;
  max-width: none;
  /* The logo files are already white; this keeps any future colour file white too. */
  filter: brightness(0) invert(1);
}
/* Optical balance: Isracard's solid letters fill their whole height, so at the shared height it reads
   much bigger than the others. Drawn smaller, its text matches the visual size of the rest. */
.client-logo img[src*="isracard"] { height: 21px; }
.client-logo-name {
  color: #fff;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}
/* Hover-pause only with a real pointer: on touch screens :hover sticks after a tap or scroll and stalls the strip. */
@media (hover: hover) and (pointer: fine) {
  .client-logos:hover .client-logos-track { animation-play-state: paused; }
}
.client-logos.is-paused .client-logos-track { animation-play-state: paused; }
@keyframes client-logos-scroll {
  to { transform: translateX(-50%); }
}
@media (max-width: 767px) {
  .client-logos { padding: 26px 0 30px; }
  .client-logos-heading { margin-bottom: 20px; }
  .client-logos-heading h2 { font-size: 13px; }
  .client-logos-group { gap: 36px; padding-inline: 18px; }
  .client-logos .client-logo { height: 56px; }
  .client-logo-name { font-size: 21px; }
  .client-logo img { height: 26px; }
  .client-logo img[src*="isracard"] { height: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .client-logos-track { animation: none; width: 100%; }
  .client-logos-window { -webkit-mask-image: none; mask-image: none; }
  .client-logos-group { flex-wrap: wrap; justify-content: center; width: 100%; gap: 24px; padding: 0; }
  .client-logos-group[aria-hidden="true"], .client-logos-pause { display: none; }
}

/* Tools section: the template inverts its skill icons, but these are real brand logos in their own colours. */
#tools .my-skill-card .card-icon img {
  filter: none;
}

/* Hero paragraph: the template already colours spans here in the primary colour; accent phrases are also bold. */
.banner-two-main-wrapper .inner .disc .statement-accent {
  font-weight: 700;
}

/* Hero title (name and rotating lines): 2px smaller than the template at every breakpoint. */
.banner-two-main-wrapper .inner .title {
  font-size: 52px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .banner-two-main-wrapper .inner .title { font-size: 42px; }
}
@media only screen and (max-width: 767px) {
  .banner-two-main-wrapper .inner .title { font-size: 30px; }
}
@media only screen and (max-width: 575px) {
  .banner-two-main-wrapper .inner .title { font-size: 26px; }
}

/* Skills: an intro line, then two columns (core expertise / technical edge) with an eyebrow,
   a short description and full-width accent bars instead of percentages. */
.tmp-skill-area .skills-intro {
  max-width: 820px;
  margin: 0 auto 60px;
  text-align: center;
  font-size: 22px;
  line-height: 1.7;
  color: var(--color-heading);
}
.tmp-skill-area .skills-eyebrow {
  display: block;
  margin-bottom: 10px;
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 3px;
}
.tmp-skill-area .progress-wrapper .custom-title {
  margin-bottom: 14px;
}
.tmp-skill-area .skills-text {
  margin: 0 0 36px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--color-body);
}
@media only screen and (max-width: 767px) {
  .tmp-skill-area .skills-intro { font-size: 18px; margin-bottom: 40px; }
}

/* About: the text is split into short paragraphs; keep them close but distinct. */
.about-us-area .about-paragraph { margin-bottom: 16px; }
.about-us-area .about-paragraph:last-of-type { margin-bottom: 0; }

/* Article body: pull quote, bullet lists and a further-reading block, in the template's dark style. */
.blog-details-discription .article-quote {
  margin: 34px 0;
  padding: 6px 24px 6px 0;
  border-right: 3px solid var(--color-primary);
  color: var(--color-heading);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.6;
}
.blog-details-discription .article-list {
  margin: 0 0 28px;
  padding: 0 22px 0 0;
}
.blog-details-discription .article-list li {
  margin-bottom: 14px;
  color: var(--color-body);
  font-size: 18px;
  line-height: 1.75;
}
.blog-details-discription .article-list li::marker { color: var(--color-primary); }
.blog-details-discription .article-list strong { color: var(--color-heading); }
.blog-details-discription .article-sources {
  margin-top: 46px;
  padding-top: 26px;
  border-top: 1px solid var(--color-border);
}
.blog-details-discription .article-sources h4 {
  margin-bottom: 14px;
  font-size: 18px;
  color: var(--color-heading);
}
.blog-details-discription .article-sources ul { margin: 0; padding: 0 20px 0 0; }
.blog-details-discription .article-sources li { margin-bottom: 8px; font-size: 15px; }
.blog-details-discription .article-sources a { color: var(--color-body); text-decoration: underline; text-underline-offset: 3px; }
.blog-details-discription .article-sources a:hover { color: var(--color-primary); }
/* Links inside the article text read as names, not as calls to action: white and bold, underline on hover. */
.blog-details-discription :is(p, li) a {
  color: var(--color-heading);
  font-weight: 600;
  text-decoration: none;
  text-underline-offset: 4px;
}
.blog-details-discription :is(p, li) a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
/* The people in the cover photo: LinkedIn mark, name and role, set like the article's own text rather than
   as cards. The stored markup also has a label and an initial; this design leaves them out. */
.blog-details-discription .article-people { margin: 24px 0 32px; }
.blog-details-discription .article-people-label,
.blog-details-discription .article-person-initial { display: none; }
.blog-details-discription .article-people-list { display: flex; flex-wrap: wrap; gap: 16px 40px; }
.blog-details-discription a.article-person {
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}
.blog-details-discription a.article-person:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 6px; }
.blog-details-discription .article-person-link {
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  order: -1;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .08);
  color: var(--color-heading);
  font-size: 16px;
  transition: background .25s;
}
.blog-details-discription a.article-person:hover .article-person-link { background: #0a66c2; }
.blog-details-discription .article-person-text { display: flex; flex-direction: column; min-width: 0; }
.blog-details-discription .article-person-text strong { color: var(--color-heading); font-size: 16px; font-weight: 600; line-height: 1.3; text-align: right; }
.blog-details-discription a.article-person:hover .article-person-text strong { text-decoration: underline; text-underline-offset: 4px; }
.blog-details-discription .article-person-text small { margin-top: 2px; color: var(--color-body); font-size: 13px; line-height: 1.4; }
@media only screen and (max-width: 767px) {
  .blog-details-discription .article-quote { font-size: 20px; padding-right: 18px; }
}

/* Privacy page */
.privacy-page .privacy-updated { margin-top: 40px; font-size: 15px; opacity: .7; }

/* Skills tiles: replace the progress bars with bordered tiles on the dark surface. */
.tmp-skill-area .skill-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Same surface as the resume cards (.resume-widget .resume-single): gray-2, 20px corners,
   and the blurred primary glow that rises from the corner on hover. */
.tmp-skill-area .skill-tile {
  position: relative;
  z-index: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 74px;
  margin: 0;
  padding: 18px 20px;
  background: var(--color-gray-2);
  border-radius: 20px;
}
.tmp-skill-area .skill-tile::after {
  content: " ";
  position: absolute;
  bottom: -313px;
  right: -407px;
  z-index: -1;
  width: 474px;
  height: 474px;
  border-radius: 100%;
  filter: blur(227px);
  opacity: 0;
  pointer-events: none;
  transition: all 0.8s ease;
}
.tmp-skill-area .skill-tile:hover::after {
  background: var(--color-primary);
  opacity: 1;
}
.tmp-skill-area .skill-tile-index {
  flex-shrink: 0;
  color: var(--color-primary);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
}
.tmp-skill-area .skill-tile-title {
  color: var(--color-heading);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
}
@media only screen and (max-width: 575px) {
  .tmp-skill-area .skill-tiles { grid-template-columns: 1fr; }
  .tmp-skill-area .skill-tile { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tmp-skill-area .skill-tile::after { transition: none; }
}

/* About card: the Figma logo replaces the template's lock icon, in its own colours. */
.about-us-left-content-wrap .design-card .design-card-img .design-card-logo { display: block; width: auto; height: 42px; }
@media only screen and (max-width: 767px) {
  .about-us-left-content-wrap .design-card .design-card-img .design-card-logo { height: 28px; }
}

/* Expertise: three equal cards. The section sits on the gray box like the tools section, so the
   cards take the tools cards' outline (2px border, 20px corners) and keep the corner glow on hover. */
.expertise-cards-area .section-head { text-align: center; }
.expertise-cards-area .row > [class*="col-"] { display: flex; }
.expertise-card {
  position: relative;
  z-index: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 34px 32px 36px;
  background: transparent;
  border: 2px solid var(--color-border);
  border-radius: 20px;
}
.expertise-card::after {
  content: " ";
  position: absolute;
  bottom: -313px;
  right: -407px;
  z-index: -1;
  width: 474px;
  height: 474px;
  border-radius: 100%;
  filter: blur(227px);
  opacity: 0;
  pointer-events: none;
  transition: all 0.8s ease;
}
.expertise-card:hover::after {
  background: var(--color-primary);
  opacity: 1;
}
.expertise-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 26px;
}
.expertise-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-primary) 14%, transparent);
  color: var(--color-primary);
  font-size: 24px;
}
.expertise-card-index {
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
}
.expertise-card-title {
  margin-bottom: 14px;
  color: var(--color-heading);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
}
.expertise-card-text {
  margin: 0;
  color: var(--color-body);
  font-size: 17px;
  line-height: 1.75;
}
@media only screen and (max-width: 767px) {
  .expertise-card { padding: 28px 24px 30px; }
  .expertise-card-title { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  .expertise-card::after { transition: none; }
}

/* Title and summary span the whole card; the tags and the button share the bottom row. */
.latest-portfolio-card-style-two .portfolio-card-content-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  column-gap: 16px;
  row-gap: 0;
}
.latest-portfolio-card-style-two .portfolio-card-content-wrap .content-left { display: contents; }
.latest-portfolio-card-style-two .portfolio-card-title,
.latest-portfolio-card-style-two .portfolio-card-summary { grid-column: 1 / -1; }
.latest-portfolio-card-style-two .portfolio-card-content-wrap > .tmp-btn { justify-self: end; }
/* Tags and button on one centre line: the template's bottom margins on the tag list lifted the pills
   above the taller button. */
.latest-portfolio-card-style-two .portfolio-card-content-wrap .tag-items,
.latest-portfolio-card-style-two .portfolio-card-content-wrap > .tmp-btn { align-self: center; }
.latest-portfolio-card-style-two .tag-items ul { margin: 0; padding: 0; }
.latest-portfolio-card-style-two .tag-items ul li { margin-bottom: 0; }
@media only screen and (max-width: 575px) {
  .latest-portfolio-card-style-two .portfolio-card-content-wrap { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
  .latest-portfolio-card-style-two .portfolio-card-content-wrap > .tmp-btn { justify-self: start; }
}
.portfolio-card-summary {
  max-width: none;
  margin: 12px 0 16px;
  color: var(--color-body);
  font-size: 16px;
  line-height: 1.7;
}

/* Wide portfolio card: opens a list with an odd count. The screenshot takes the larger side and the
   text sits beside it, vertically centred, so the card reads as a showcase rather than a leftover. */
@media (min-width: 992px) {
  .latest-portfolio-card-style-two.is-wide {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: center;
    gap: 48px;
    padding: 24px 24px 24px 48px;
  }
  .latest-portfolio-card-style-two.is-wide .portfolio-card-content-wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding: 0;
  }
  .latest-portfolio-card-style-two.is-wide .portfolio-card-title {
    font-size: 38px;
    line-height: 1.25;
  }
  .latest-portfolio-card-style-two.is-wide .portfolio-card-summary {
    font-size: 18px;
    margin: 16px 0 20px;
  }
}
@media (min-width: 992px) {
  #portfolio .section-head .description {
    max-width: none;
    white-space: nowrap;
  }
}

.portfolio-more-note {
  max-width: 620px;
  margin: 48px auto 0;
  padding: 0 16px;
  color: #fff;
  font-size: 18px;
  line-height: 1.75;
  text-align: center;
  text-wrap: pretty;
}
.portfolio-more-note::before {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  margin: 0 auto 20px;
  background: var(--color-primary);
  border-radius: 2px;
}
.portfolio-more-note .statement-strong {
  display: block;
  margin-bottom: 8px;
  color: var(--color-primary);
  font-weight: 600;
}
.portfolio-more-note .statement-accent {
  color: inherit;
}
.project-live-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin: 32px 0 40px;
}
.project-live-links .project-live-button {
  min-height: 58px;
  min-width: 230px;
  max-width: 100%;
  justify-content: center;
  text-align: center;
  white-space: normal;
  font-size: 18px;
  font-weight: 700;
}
@media (max-width: 575px) {
  .project-live-links .project-live-button { width: 100%; min-width: 0; }
}
/* Checklist: tick in the primary colour, text in white. The template colours every span in the row,
   and the LTR wrapper around English text is a span too, so the text is set back to the heading colour. */
.project-details-content-wrap .check-box-wrap .check-box-item > span > i {
  color: var(--color-primary);
}
.project-details-content-wrap .check-box-wrap .check-box-item span[dir="ltr"] {
  color: var(--color-heading);
}
.contact-form-intro {
  margin: 0 0 24px;
  color: var(--color-body);
  font-size: 17px;
  line-height: 1.75;
}
.signle-side-bar.project-details-area .project-details-info span {
  display: block;
  margin-left: 0;
  margin-top: 6px;
  line-height: 1.6;
}
/* Only the value goes under its label. English words inside it ("Web & Mobile") are wrapped in their own
   left-to-right span, which the rule above also caught and pushed onto a line of their own. */
.signle-side-bar.project-details-area .project-details-info span span {
  display: inline;
  margin: 0;
}
.project-details-content-wrap .project-intro {
  margin: 0 0 32px;
  color: var(--color-heading);
  font-size: clamp(21px, 2.2vw, 28px);
  line-height: 1.6;
}

/* Contact heading ("the next step..."): 6px smaller than the template at every breakpoint. */
.contact-inner .title-left { font-size: 34px; line-height: 44px; }
@media (min-width: 576px) {
  .contact-inner .title-left { font-size: 62px; line-height: 72px; }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .contact-inner .title-left { font-size: 44px; line-height: 1.23; }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .contact-inner .title-left { font-size: 44px; line-height: 1.23; }
}
@media only screen and (max-width: 767px) {
  .contact-inner .title-left { font-size: 26px; line-height: 1.2; }
}

/* Previous/next navigation: the template's RTL rule turns every fa-arrow-right into a left arrow
   (right for buttons like "let's talk"). "Previous" must point right in RTL, so restore the real glyph here. */
[dir=rtl] .project-swiper-button-prev .fa-arrow-right::before,
[dir=rtl] .project-pager .is-prev .fa-arrow-right::before,
[dir=rtl] .our-portfolio-swiper-btn-wrap .prev-btn .fa-arrow-right::before {
  content: "\f061";
}

/* Previous/next project at the end of a project page. Each side shows only when that project exists;
   "next" stays on its own side even when it is alone. */
.project-pager {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-top: 60px;
  padding-top: 30px;
  border-top: 1px solid var(--color-border);
}
.project-pager-link {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 48%;
  color: var(--color-heading);
  font-family: var(--font-primary);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  transition: color .4s ease;
}
.project-pager-link.is-next {
  margin-inline-start: auto;
  text-align: end;
}
.project-pager-text small {
  display: block;
  margin-bottom: 4px;
  color: var(--color-gray);
  font-size: 15px;
  font-weight: 400;
}
.project-pager-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  border: 2px solid var(--color-border);
  border-radius: 100px;
  font-size: 14px;
  transition: all .4s ease;
}
.project-pager-link:hover { color: var(--color-primary); }
.project-pager-link:hover .project-pager-icon {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}
@media only screen and (max-width: 575px) {
  .project-pager-link { font-size: 16px; gap: 12px; }
  .project-pager-icon { min-width: 38px; height: 38px; }
}

/* Screen tilt: product screenshots float in 3D, tilted, on a soft primary glow, and settle flat on hover.
   Used for images under /screens/ (project cover and portfolio card). */
.screen-tilt {
  position: relative;
  display: block;
  perspective: 1800px;
  isolation: isolate;
}
.screen-tilt::before {
  content: "";
  position: absolute;
  inset: 12% 10% 2%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--color-primary) 55%, transparent), transparent);
  filter: blur(60px);
  opacity: .55;
  transition: opacity .8s ease, transform .8s ease;
}
.screen-tilt-frame {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 16px;
  box-shadow:
    0 50px 90px -40px rgba(0, 0, 0, .9),
    0 30px 60px -30px color-mix(in srgb, var(--color-primary) 35%, transparent);
  transform: rotateX(10deg) rotateY(14deg) rotateZ(-2deg) scale(.94);
  transform-origin: center;
  transition: transform .9s cubic-bezier(.2, .75, .2, 1), box-shadow .9s ease;
  will-change: transform;
}
.screen-tilt-frame img {
  display: block;
  width: 100%;
  height: auto;
}
/* A light sheen that sweeps across the glass on hover. */
.screen-tilt-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .22) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform 1.1s ease;
  pointer-events: none;
}
/* Only straighten on hover. The frame itself casts no shadow here: the devices inside carry their own,
   and a shadow on the frame would draw a rectangle around them. The glow comes from ::before. */
.screen-tilt:hover .screen-tilt-frame,
.screen-tilt:focus-visible .screen-tilt-frame {
  transform: none;
}
.screen-tilt:hover .screen-tilt-frame::after { transform: translateX(120%); }
.screen-tilt:hover::before { opacity: .85; transform: scale(1.05); }

/* Project page: give the tilted cover room to breathe. */
.screen-tilt-cover { padding: 30px 6% 50px; margin-bottom: 40px; }
/* Portfolio card: the screenshot sits on a dark stage inside the card's image area. */
.screen-tilt-card {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 16 / 10;
  box-sizing: border-box;
  padding: 38px 34px;
  border-radius: 20px;
  background: radial-gradient(120% 90% at 50% 100%, color-mix(in srgb, var(--color-primary) 18%, transparent), transparent 60%), var(--color-gray-2);
  overflow: hidden;
}

/* Gallery pages (e.g. report pages): room for the tilt inside the slide, and every other page leans the other way. */
.screen-tilt-page { padding: 30px 26px 46px; }
.project-details-swiper-wrapper .project-details-swiper .screen-tilt-page img { border-radius: 0; }
.swiper-slide:nth-child(even) .screen-tilt-page .screen-tilt-frame {
  transform: rotateX(10deg) rotateY(-14deg) rotateZ(2deg) scale(.94);
}
.swiper-slide:nth-child(even) .screen-tilt-page:hover .screen-tilt-frame { transform: none; }

@media only screen and (max-width: 767px) {
  .screen-tilt-frame { transform: rotateX(6deg) rotateY(8deg) rotateZ(-1deg) scale(.96); }
  .screen-tilt-page { padding: 16px 12px 30px; }
  .screen-tilt-cover { padding: 16px 2% 30px; }
  .screen-tilt-card { padding: 24px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .screen-tilt-frame, .screen-tilt:hover .screen-tilt-frame,
  .swiper-slide:nth-child(even) .screen-tilt-page .screen-tilt-frame { transform: none; transition: none; }
  .screen-tilt-frame::after { display: none; }
}

/* Laptop mockup around the screenshot. The whole device tilts and settles; the sheen crosses the screen only. */
.screen-tilt-frame.device-laptop {
  container-type: inline-size;
  overflow: visible;
  border-radius: 0;
  box-shadow: none;
}
/* The screen's own corners clip the screenshot. The template rounds every card image by 10px, which on a
   small device came out rounder than the screen around it, so the image itself stays square. */
.latest-portfolio-card-style-two .portfoli-card-img .device-screen img,
.latest-portfolio-card-style-two .portfoli-card-img .device-phone-screen img,
.device-screen img,
.device-phone-screen img { border-radius: 0; }
.screen-tilt-frame.device-laptop::after { display: none; }
.device-lid {
  position: relative;
  display: block;
  padding: 2.6% 2.6% 3.4%;
  /* Corners scale with the laptop, so a small one on a phone screen isn't over-rounded. */
  border-radius: clamp(6px, 1.9cqw, 18px) clamp(6px, 1.9cqw, 18px) clamp(3px, .6cqw, 6px) clamp(3px, .6cqw, 6px);
  background: linear-gradient(160deg, #2a2a2f 0%, #121215 55%, #1b1b20 100%);
  box-shadow:
    0 50px 90px -40px rgba(0, 0, 0, .95),
    0 30px 70px -30px color-mix(in srgb, var(--color-primary) 35%, transparent);
  transition: box-shadow .9s ease;
}
/* Camera dot in the top bezel. */
.device-lid::before {
  content: "";
  position: absolute;
  top: 1.1%;
  left: 50%;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: #3a3a40;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.device-screen {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: clamp(2px, .45cqw, 4px);
  background: #000;
}
.device-screen img { display: block; width: 100%; height: auto; }
.device-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .22) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform 1.1s ease;
  pointer-events: none;
}
/* Keyboard deck: a little wider than the lid, with the opening notch in the middle. */
.device-base {
  position: relative;
  display: block;
  width: 114%;
  height: 0;
  padding-bottom: 2.6%;
  margin: 0 -7%;
  border-radius: 2px 2px clamp(5px, 1.5cqw, 14px) clamp(5px, 1.5cqw, 14px);
  background: linear-gradient(180deg, #4a4a52 0%, #26262b 45%, #141417 100%);
  box-shadow: 0 18px 30px -12px rgba(0, 0, 0, .9);
}
.device-base::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 16%;
  height: 40%;
  transform: translateX(-50%);
  border-radius: 0 0 8px 8px;
  background: #18181c;
}
.screen-tilt:hover .device-lid,
.screen-tilt:focus-visible .device-lid {
  box-shadow:
    0 40px 80px -40px rgba(0, 0, 0, .95),
    0 30px 90px -30px color-mix(in srgb, var(--color-primary) 55%, transparent);
}
.screen-tilt:hover .device-screen::after { transform: translateX(120%); }
/* The deck is wider than the lid; keep it inside the card's stage. */
.screen-tilt-card .device-laptop { flex: 0 0 86%; width: 86%; margin: 0 7%; }
@media (prefers-reduced-motion: reduce) {
  .device-screen::after { display: none; }
}

/* Phone next to the laptop (when a "-mobile" screenshot exists). Sizes use container units of the laptop,
   so the pair scales together from the project cover down to the portfolio card. */
.device-laptop.has-phone {
  container-type: inline-size;
  transform-style: preserve-3d;
  margin-left: 6%;
}
.device-phone {
  position: absolute;
  left: -9%;
  bottom: -7%;
  z-index: 3;
  display: block;
  width: 21%;
  padding: 1.1cqw;
  border-radius: 3.6cqw;
  background: linear-gradient(160deg, #2e2e34 0%, #111114 60%, #1d1d22 100%);
  box-shadow:
    0 40px 60px -25px rgba(0, 0, 0, .95),
    0 20px 50px -20px color-mix(in srgb, var(--color-primary) 40%, transparent);
  transform: translateZ(90px);
  transition: transform .9s cubic-bezier(.2, .75, .2, 1), box-shadow .9s ease;
}
.device-phone-screen {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 2.6cqw;
  background: #000;
}
.device-phone-screen img { display: block; width: 100%; height: auto; }
/* Dynamic island. */
.device-phone-screen::before {
  content: "";
  position: absolute;
  top: 2.2%;
  left: 50%;
  z-index: 1;
  width: 32%;
  height: 3.4%;
  transform: translateX(-50%);
  border-radius: 99px;
  background: #050506;
}
.device-phone-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .2) 50%, transparent 65%);
  transform: translateX(-130%);
  transition: transform 1.1s ease .1s;
  pointer-events: none;
}
.screen-tilt:hover .device-phone,
.screen-tilt:focus-visible .device-phone {
  transform: translateZ(0) translateY(-4%);
}
.screen-tilt:hover .device-phone-screen::after { transform: translateX(130%); }
/* Leave room under the card's stage for the phone that overhangs the laptop. */
.screen-tilt-card .device-laptop.has-phone { margin-bottom: 5%; }
/* Phones are narrow: the row takes most of the stage so the devices read at a similar size to a laptop. */
.screen-tilt-card .device-trio { flex: 0 0 90%; width: 90%; }
@media (prefers-reduced-motion: reduce) {
  .device-phone, .screen-tilt:hover .device-phone { transform: none; transition: none; }
  .device-phone-screen::after { display: none; }
}

/* A row of phones (images named -phone1, -phone2...). The front phone is the one the project points to;
   the others stand a little behind and fan outward, then straighten and spread on hover. */
.device-trio {
  container-type: inline-size;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  overflow: visible;
  border-radius: 0;
  box-shadow: none;
  transform-style: preserve-3d;
  padding: 2% 0 4%;
}
.device-trio::after { display: none; }
.device-trio .trio-phone {
  position: relative;
  left: auto;
  bottom: auto;
  flex: 0 0 30%;
  width: 30%;
  margin: 0 -2.5%;
  padding: 1.5cqw;
  border-radius: 5cqw;
  transform: translateZ(-60px) scale(.9);
  transition: transform .9s cubic-bezier(.2, .75, .2, 1), box-shadow .9s ease;
}
.device-trio .trio-phone .device-phone-screen { border-radius: 3.6cqw; }
.device-trio .trio-phone:first-child { transform: translateZ(-60px) scale(.9) rotateY(-14deg); }
.device-trio .trio-phone:last-child { transform: translateZ(-60px) scale(.9) rotateY(14deg); }
.device-trio .trio-phone.is-front {
  z-index: 4;
  transform: translateZ(70px);
}
.screen-tilt:hover .device-trio .trio-phone,
.screen-tilt:focus-visible .device-trio .trio-phone { transform: scale(.94); }
.screen-tilt:hover .device-trio .trio-phone:first-child { transform: scale(.94) translateX(8%); }
.screen-tilt:hover .device-trio .trio-phone:last-child { transform: scale(.94) translateX(-8%); }
.screen-tilt:hover .device-trio .trio-phone.is-front { transform: translateY(-4%); }
/* Project page: phones are tall, so keep the row narrower than a laptop would be. */
.screen-tilt-cover .device-trio { max-width: 960px; margin: 0 auto; }
@media (prefers-reduced-motion: reduce) {
  .device-trio .trio-phone, .screen-tilt:hover .device-trio .trio-phone { transform: none !important; transition: none; }
}

/* A single phone (only -phone1 exists): larger, centred, no side phones to fan out. */
.device-trio .trio-phone:only-child {
  flex-basis: 40%;
  width: 40%;
  margin: 0;
  transform: translateZ(40px);
}
.screen-tilt:hover .device-trio .trio-phone:only-child { transform: translateY(-3%); }

/* Language switch: Hebrew / English as a two-option pill, the current language filled. Each option opens the
   same page in that language. In the header on desktop; at the top of the mobile menu, full width. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
}
.lang-switch a {
  min-width: 38px;
  padding: 5px 12px;
  border-radius: 999px;
  color: var(--color-body);
  font-family: var(--font-secondary);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  transition: background .25s, color .25s;
}
.lang-switch a:hover { color: var(--color-heading); }
.lang-switch a.is-active { background: var(--color-primary); color: #fff; }
.lang-switch a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lang-switch-wide { display: flex; margin: 0 0 24px; }
.lang-switch-wide a { flex: 1; padding: 8px 12px; font-size: 15px; }

/* Header at 1200-1399px: the container is 1140px there, and the menu, language switch and social icons no
   longer fit on one line (the icons stacked and "Let's talk" wrapped). The social links stay in the side
   panel and the footer, so the header drops them in that range only. Menu labels never wrap. */
.tmp-mainmenu-nav .tmp-mainmenu > li > a { white-space: nowrap; }
@media (min-width: 1200px) and (max-width: 1399px) {
  .header-one .tmp-header-right .social-share-wrapper { display: none !important; }
}

/* Hero "find me on" links: below 1200px the hamburger menu already lists the same links, so the hero drops them. */
@media (max-width: 1199px) {
  .rpp-banner-two-area .find-me-on { display: none; }
  /* The links used to give the button its space above the client strip. */
  .rpp-banner-two-area .button-area-banner-two { margin-bottom: 48px; }
}

/* Review card source line ("Google review · 3 months ago"): the name column shrinks to the reviewer's name, so
   with a short name the line wrapped mid-phrase. Keep it on one line. */
.google-review-card .client-details .client-para:not(.review-quote) { white-space: nowrap; }

/* Home article cards, four in a row: keep each meta item (category, reading time) whole; the row wraps
   between items instead of inside "Design Systems". */
.blog-card-style-two .blog-tags ul li { white-space: nowrap; }

/* Home article cards: one image shape for every card, whatever the cover's proportions (the Captain Credit
   cover is 2:1, the others 3:2), so the cards line up. The article page shows each cover whole. */
.blog-card-style-two .blog-card-img img { aspect-ratio: 3 / 2; object-fit: cover; }

/* Contact and chat forms after sending: the form is replaced by a check mark in the accent colour and a short
   confirmation. */
.form-sent {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 36px 16px;
  text-align: center;
  outline: none;
}
.form-sent-icon {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin-bottom: 6px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 30px;
  box-shadow: 0 0 0 10px color-mix(in srgb, var(--color-primary) 18%, transparent);
  animation: form-sent-pop .5s cubic-bezier(.2, .9, .3, 1.3) both;
}
.form-sent-title { color: var(--color-heading); font-size: 22px; font-weight: 700; line-height: 1.3; }
.form-sent-text { max-width: 340px; margin: 0; color: var(--color-body); font-size: 15px; line-height: 1.6; }
.ready-chatting-option .form-sent { padding: 24px 8px 8px; }
.ready-chatting-option .form-sent-icon { width: 60px; height: 60px; font-size: 24px; }
.ready-chatting-option .form-sent-title { font-size: 19px; }
@keyframes form-sent-pop {
  from { opacity: 0; transform: scale(.4); }
  to { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .form-sent-icon { animation: none; }
}

/* Sending: the submit button keeps its size, hides its label and shows a spinning ring. */
button.is-sending {
  position: relative;
  pointer-events: none;
  cursor: progress;
}
button.is-sending > *,
.ready-chatting-option .chat-box form .field button.is-sending { color: transparent !important; }
button.is-sending > * { visibility: hidden; }
button.is-sending::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border: 2.5px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: form-sending-spin .7s linear infinite;
}
@keyframes form-sending-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  button.is-sending::after { animation-duration: 1.6s; }
}