.horizontal-slide-from-right-to-left {
  animation: horizontal-slide-from-right-to-left linear 10s infinite;
}

@keyframes horizontal-slide-from-right-to-left {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.horizontal-slide-from-left-to-right {
  animation: horizontal-slide-from-left-to-right linear 10s infinite;
}

@keyframes horizontal-slide-from-left-to-right {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(50%);
  }
}

.animation-duration-2s {
  animation-duration: 2s;
}
.animation-duration-5s {
  animation-duration: 5s;
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }

  100% {
    opacity: 1;
    transform: translateZ(0);
  }
}

.rotate-full {
  animation: rotate-full 10s linear infinite;
}
@keyframes rotate-full {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.scrolling {
  animation: fadeInDown 0.9s 1;
  backdrop-filter: blur(4px);
}

.swiper-wrapper {
  transition-timing-function: linear;
}

.swiper-scrollbar-drag {
  cursor: pointer;
  width: 85px !important;
  height: 50px;
  top: -24px;
  left: -2px;
  position: absolute;
  background-size: cover;
  background-color: transparent;
  background-image: url(../img/icons/icon-white-slider-drug-arrow.svg);
}

.testimonial-custom-pagination .swiper-pagination-bullet {
  width: 50px;
  height: 6px;
  border-radius: 6px;
  background-color: #a58a6a;
}

.testimonial-custom-pagination .swiper-pagination-bullet-active {
  background-color: #221f1a;
}

.offcanvas-body {
  transition: transform 0.3s ease;
}



/* Custom work */
.horizontal-slide-from-right-to-left {
  animation: horizontal-slide-from-right-to-left linear 10s infinite;
}

@keyframes horizontal-slide-from-right-to-left {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.horizontal-slide-from-left-to-right {
  animation: horizontal-slide-from-left-to-right linear 10s infinite;
}

@keyframes horizontal-slide-from-left-to-right {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(50%);
  }
}

.animation-duration-2s {
  animation-duration: 2s;
}
.animation-duration-5s {
  animation-duration: 5s;
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }

  100% {
    opacity: 1;
    transform: translateZ(0);
  }
}

.rotate-full {
  animation: rotate-full 10s linear infinite;
}
@keyframes rotate-full {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.scrolling {
  animation: fadeInDown 0.9s 1;
  backdrop-filter: blur(4px);
}

.swiper-wrapper {
  transition-timing-function: linear;
}

.swiper-scrollbar-drag {
  cursor: pointer;
  width: 85px !important;
  height: 50px;
  top: -24px;
  left: -2px;
  position: absolute;
  background-size: cover;
  background-color: transparent;
  background-image: url(../img/icons/icon-white-slider-drug-arrow.svg);
}

.testimonial-custom-pagination .swiper-pagination-bullet {
  width: 50px;
  height: 6px;
  border-radius: 6px;
  background-color: #a58a6a;
}

.testimonial-custom-pagination .swiper-pagination-bullet-active {
  background-color: #221f1a;
}

.offcanvas-body {
  transition: transform 0.3s ease;
}



/* ===== Theme tokens (tweak these to match your brand) */
:root{
  --card-bg: #202e3d;
  --card-ring: rgba(255,255,255,0.06);
  --text-main: #F2F4F7;
  --text-dim: #8B909A;
  --thumb-bg: #F1E6D6;          /* beige behind images */
  --cta-fill: #E5C21A;          /* button yellow */
  --cta-fill-hover: #F3D43A;
  --cta-ring: rgba(229, 194, 26, .25);
}

/* ===== Section + centered, smaller container */
.work{
  background: var(--bg-page);
  padding: 48px 18px;
}
.work__container{
  max-width: 1040px;            /* smaller than full width */
  margin: 0 auto;
}
.work__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 28px;
}
@media (max-width: 800px){
  .work__grid{ grid-template-columns: 1fr; }
}

/* ===== Card hover animations ===== */
.work-card {
  background: var(--card-bg);
  border-radius: 26px;
  position: relative;
  box-shadow: 0 1px 0 0 var(--card-ring) inset,
              0 20px 40px rgba(0,0,0,.35);
  padding: 18px;
  overflow: hidden;
  transition: transform .35s ease, box-shadow .35s ease;
}

.work-card:hover {
  transform: translateY(-10px); /* lift effect */
  box-shadow: 0 28px 50px rgba(0,0,0,.45);
}

/* Thumbnail zoom effect */
.work-card__media img {
  transition: transform .5s ease;
}

.work-card:hover .work-card__media img {
  transform: scale(1.08);
}

/* CTA button hover wiggle */
.work-card__cta {
  transition: transform .3s ease, background .3s ease, box-shadow .3s ease;
}

.work-card__cta:hover {
  transform: translateX(4px) scale(1.05);
  background: var(--cta-fill-hover);
}


/* ===== Thumb */
.work-card__media{
  background: var(--thumb-bg);
  border-radius: 15px;
  overflow: hidden;
  aspect-ratio: 16/9;           /* same proportions in the screenshot */
  display: grid;
  place-items: center;
}
.work-card__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ===== Footer */
.work-card__footer{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 18px 6px 6px;
}
.work-card__title{
  color: var(--text-main);
  font-weight: 700;
  font-size: clamp(1.25rem, 1.1rem + .6vw, 1.75rem);
  line-height: 1.15;
  margin: 12px 0 4px;
  letter-spacing: .2px;
  font-family: Syne, sans-serif;
}
.work-card__subtitle{
  color: var(--text-dim);
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .12em;
  margin: 0;
}

/* ===== Round arrow button (CSS mask so color is CSS-controlled) */
.work-card__cta{
  --size: 48px;
  width: var(--size);
  height: var(--size);
  border-radius: 999px;
  background: var(--cta-fill);
  box-shadow:
    0 0 0 2px rgba(255,255,255,.06) inset,
    0 10px 22px var(--cta-ring);
  position: relative;
  display: inline-block;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
  /* single chevron mask */
  -webkit-mask: url('data:image/svg+xml;utf8,\
  <svg xmlns="http://www.w3.org/2000/svg" viewBox=\'0 0 24 24\' fill=\'%23000\'>\
    <path d=\'M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6z\'/>\
  </svg>') no-repeat center / 36%;
  mask: url('data:image/svg+xml;utf8,\
  <svg xmlns="http://www.w3.org/2000/svg" viewBox=\'0 0 24 24\' fill=\'%23000\'>\
    <path d=\'M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6z\'/>\
  </svg>') no-repeat center / 36%;
}
/* fake the “double chevron” with a ghost copy */
.work-card__cta::after{
  content:"";
  position:absolute; inset:0;
  transform: translateX(-6px);                  /* offsets to show “>>” */
  -webkit-mask: inherit; mask: inherit;
  background: inherit;
  opacity:.85;
}

.work-card__cta:hover{
  background: var(--cta-fill-hover);
  transform: translateY(-1px);
  box-shadow:
    0 0 0 2px rgba(255,255,255,.08) inset,
    0 12px 26px var(--cta-ring);
}

/* a11y helper */
.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}