.main-wrapper {
  max-width: 70vw;
  margin: 0 auto;
  padding: 20px 20px 0 20px;
}

.grid-2-cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 50px;
  margin: 0 0 20px 0 !important;
}

.grid-1-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin: 0 0 20px 0 !important;
}

.service-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #000000;
  background-color: #ffffff;
  position: relative;
  overflow: hidden;
  height: 100%;
  margin: 0 !important;
}

.service-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 100%;
  width: 100%;
  height: 4px;
  background-color: black;
  transition: left 0.5s ease;
}

.service-card:hover::after {
  left: 0;
}

.service-image-container {
  height: 250px;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid #000000;
  margin: 0 !important;
}

.service-bg-image {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.8s ease;
  margin: 0 !important;
}

.service-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: transparent !important;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.1) 100%);
  display: flex;
  align-items: flex-start;
  padding: 20px;
  z-index: 1;
  margin: 0 !important;
}

.service-card:hover .service-bg-image {
  transform: scale(1.05);
}

.service-image-container h2 {
  color: #ffffff !important;
  font-size: 24px;
  font-weight: 900;
  margin: 0;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
}

.service-content {
  padding: 30px 20px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  margin: 0 !important;
}

.service-subtitle {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 15px;
  border-bottom: 1px solid #000000;
  padding-bottom: 10px;
  margin: 2% 0 2% 0 !important;
}

.service-list {
  list-style-type: none;
  padding: 0;
  margin: 0 0 20px 0;
  flex-grow: 1;
}

.service-list li {
  position: relative;
  padding-right: 22px;
  margin-bottom: 10px;
  font-size: 14.5px;
}

.service-list li::before {
  content: "✓";
  position: absolute;
  right: 0;
  top: 0;
  font-weight: 900;
  font-size: 16px;
}

.button-area {
  height: 60px;
  margin: auto 0 0 0 !important;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 30px;
  background: #ffffff;
  color: #1a1a2e;
  border: 2px solid #1a1a2e;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.35s ease;
}

.btn:hover {
  background: black;
  color: #ffffff !important;
  border-color: black;
}

.btn .arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #1a1a2e;
  transition: all 0.35s ease;
  flex-shrink: 0;
}

.btn .arrow svg {
  width: 10px;
  height: 10px;
  fill: none;
  stroke: #ffffff;
  stroke-width: 2.2;
  transition: stroke 0.35s ease;
}

.btn:hover .arrow {
  background: #ffffff;
}

.btn:hover .arrow svg {
  stroke: black;
}

.addons-title-section {
  text-align: center;
  padding: 10px 20px;
  margin-bottom: 20px;
  margin: 3% 20px 0 0 !important;
}
.addons-title-section p {
  font-size: 1.2rem;
  font-weight: 500;
  margin: 0;
}

.addons-title-section h2 {
  font-size: 40px;
  font-weight: 900;
  text-transform: uppercase;
  margin-top: 15px;
  margin-bottom: 15px;
  -webkit-text-stroke: 2px black;
  letter-spacing: 2px;
}

/* אזור הכפתורים המוקטנים והמעודנים */
.addons-buttons {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin: 4% 0 5% 0 !important;
}

.btn-custom {
  padding: 12px 35px;
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  border-radius: 50px;
  border: 2px solid #000;
  transition: 0.3s;
  cursor: pointer;
  display: inline-block;
}

.btn-black {
  background: #000;
  color: #fff !important;
}

.btn-black:hover {
  background: white;
  border-color: black;
  color: #000 !important;
}

.btn-white {
  background: #fff;
  color: #000 !important;
}

.btn-white:hover {
  background: #000;
  color: #fff !important;
  border-color: #000;
}

/* ----- add-ons carousel (javascript/addons.js) -----
   Light cards with dark accents (only the dots keep the site's red). They rise in one by one the first time the carousel is seen, the
   icons float, and on hover a dark light runs around the card's border while a soft glare sweeps across it.
   On a computer the row can also be dragged with the mouse. */
@property --addon-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@keyframes addonIn {
  from {
    opacity: 0;
    transform: translateY(34px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes addonFloat {
  50% {
    transform: translateY(-5px);
  }
}
@keyframes addonPing {
  0% {
    opacity: 0.5;
    transform: scale(1);
  }
  70%, 100% {
    opacity: 0;
    transform: scale(1.75);
  }
}
@keyframes addonBorder {
  to {
    --addon-angle: 360deg;
  }
}
.addons-carousel {
  position: relative;
  margin: 0 0 4% !important;
  padding: 0 56px;
}
.addons-carousel__track {
  display: flex;
  gap: 22px;
  /* The scroll box clips whatever sticks out of it, shadows included. So the box is made bigger than the row of
     cards (26px on the sides, 34px above, 60px below, pulled back with the negative margin) and the shadows
     have room to fade out inside it instead of being cut off. */
  margin: 0 -26px !important;
  padding: 34px 26px 60px;
  overflow-x: auto;
  list-style: none;
  cursor: grab;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 26px;
  scrollbar-width: none;
}
.addons-carousel__track::-webkit-scrollbar {
  display: none;
}
.addons-carousel__track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}
.addons-carousel__btn {
  position: absolute;
  top: calc(50% - 26px);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  color: #111111;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, transform 0.2s, opacity 0.2s;
}
.addons-carousel__btn--prev {
  right: 0;
}
.addons-carousel__btn--next {
  left: 0;
}
.addons-carousel__btn:hover:not(:disabled) {
  border-color: #111111;
  background: #111111;
  color: #ffffff;
  transform: scale(1.08);
}
.addons-carousel__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.addons-carousel__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  /* (the shared `.body div div` rule would otherwise give every nested div a 10% margin) */
  margin: -26px 0 0 !important;
}
.addons-carousel__dots button {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #cfcfd4;
  cursor: pointer;
  transition: background-color 0.2s, width 0.2s;
}
.addons-carousel__dots button.is-active {
  width: 26px;
  border-radius: 5px;
  background: #d32f3b;
}
.addons-carousel.is-waiting .addon-slide {
  opacity: 0;
}
.addons-carousel.is-revealed .addon-slide {
  animation: addonIn 0.75s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--i) * 90ms);
}

.addon-slide {
  position: relative;
  flex: 0 0 calc((100% - 44px) / 3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: 260px;
  padding: 34px 22px 26px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-top: 3px solid #111111;
  border-radius: 18px;
  background: radial-gradient(ellipse 85% 40% at 50% 100%, rgba(0, 0, 0, 0.05), transparent 72%), linear-gradient(180deg, #ffffff 0%, #f8f8fa 100%);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.1);
  color: #111111;
  text-align: center;
  scroll-snap-align: start;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}
/* a dark light circling the border, only while the card is hovered / focused */
.addon-slide::before {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 1.5px;
  border-radius: inherit;
  background: conic-gradient(from var(--addon-angle), transparent 0 62%, rgba(17, 17, 17, 0.85) 82%, transparent 100%);
  -webkit-mask: linear-gradient(#000000 0 0) content-box, linear-gradient(#000000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000000 0 0) content-box exclude, linear-gradient(#000000 0 0);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
/* a soft glare that sweeps across the card on hover */
.addon-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 38%, rgba(0, 0, 0, 0.05) 50%, transparent 62%);
  background-position: 130% 0;
  background-size: 260% 100%;
  pointer-events: none;
  transition: background-position 0.9s ease;
}
.addon-slide:hover, .addon-slide:focus-within {
  transform: translateY(-8px);
  box-shadow: 0 26px 46px rgba(0, 0, 0, 0.18);
}
.addon-slide:hover::before, .addon-slide:focus-within::before {
  opacity: 1;
  animation: addonBorder 2.8s linear infinite;
}
.addon-slide:hover::after, .addon-slide:focus-within::after {
  background-position: -40% 0;
}
.addon-slide__num {
  position: absolute;
  top: 12px;
  left: 16px;
  color: transparent;
  font-size: 2.4rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 1px;
  -webkit-text-stroke: 1px rgba(0, 0, 0, 0.16);
  pointer-events: none;
}
.addon-slide__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(145deg, #2f2f34, #000000);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  color: #ffffff;
  animation: addonFloat 3.6s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.5s);
}
/* a ring that keeps expanding out of the icon and fading away */
.addon-slide__icon::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid rgba(17, 17, 17, 0.45);
  border-radius: 50%;
  animation: addonPing 2.8s ease-out infinite;
  animation-delay: calc(var(--i) * -0.4s);
}
.addon-slide__icon svg {
  width: 28px;
  height: 28px;
}
.addon-slide h3 {
  margin: 6px 0 0;
  font-size: 1.25rem;
  font-weight: 900;
}
/* (one class more than the shared `.body div div p { color: black }` rule keeps this grey) */
.addons-carousel .addon-slide p {
  margin: 0 !important;
  color: #555555;
  font-size: 0.95rem;
  line-height: 1.7;
}
/* price + time pill and the button are pinned to the bottom of the card, so they line up across all the cards
   (the pill never wraps: same height on every card) */
.addon-slide__meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto !important;
  padding: 5px 12px;
  border: 1px solid rgba(0, 0, 0, 0.09);
  border-radius: 999px;
  background: #f1f1f4;
  color: #222222;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
}
/* The buttons alternate from card to card: a dark one that turns light on hover, then a light one that turns dark */
.addon-slide__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 22px;
  border: 2px solid #111111;
  border-radius: 999px;
  background: #111111;
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, gap 0.25s ease;
}
.addon-slide__cta:hover, .addon-slide__cta:focus-visible {
  gap: 12px;
  background: #ffffff;
  color: #111111;
}
.addon-slide:nth-child(even) .addon-slide__cta {
  background: #ffffff;
  color: #111111;
}
.addon-slide:nth-child(even) .addon-slide__cta:hover, .addon-slide:nth-child(even) .addon-slide__cta:focus-visible {
  background: #111111;
  color: #ffffff;
}
@media (max-width: 900px) {
  .main-wrapper {
    max-width: 100%;
    padding: 20px 12px 0;
  }
  .grid-2-cols,
  .grid-1-col {
    grid-template-columns: 1fr;
  }
  .addons-carousel {
    padding: 0 4px;
  }
  .addons-carousel__track {
    margin: 0 -12px !important;
    padding: 30px 12px 56px;
    scroll-padding: 0 12px;
  }
  .addons-carousel__btn {
    display: none;
  }
  .addon-slide {
    flex-basis: 84%;
  }
  .addons-buttons {
    flex-direction: column;
    gap: 10px;
    align-items: center;
  }
  .btn-custom {
    width: 100%;
    max-width: 250px;
    text-align: center;
  }
}
#bottom-spacing {
  margin-bottom: 7%;
}

/* the short line under "בחירת תוספות לשירות" fills up to the title's width on hover, like the other section titles */
.addons-title-section h2 {
  position: relative;
  display: inline-block;
}
.addons-title-section h2::after {
  content: "";
  position: absolute;
  bottom: -8px;
  right: 50%;
  width: 60px;
  height: 4px;
  background-color: #d32f3b;
  transform: translateX(50%);
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.addons-title-section h2:hover::after {
  width: 100%;
}