@media (max-width: 1024px) {
  .nav-menu {
    background: #1E1E1D;
    display: flex;
    overflow-y: auto;
  }
  .nav-menu ul.primary-nav {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    padding: 0;
    margin: 0;
    list-style: none;
    padding-top: 40px;
    width: 100%;
  }
  .nav-menu ul.primary-nav .current-menu-item a {
    color: #E30613;
  }
  .nav-menu ul.primary-nav > .menu-item {
    width: 100%;
  }
  .nav-menu ul.primary-nav > .menu-item a {
    width: 100%;
  }
  .nav-menu ul.primary-nav > .menu-item:last-of-type {
    padding: 20px 20px 0 !important;
    margin: 0 !important;
  }
  .nav-menu ul.primary-nav > .menu-item:last-of-type a {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}
.nav-menu ul.primary-nav > .menu-item {
  transition: all 0.3s ease;
  position: relative;
}
.nav-menu ul.primary-nav > .menu-item a {
  padding: 8px 14px 8px 24px;
  display: flex;
  gap: 5px;
  color: white;
}
.nav-menu ul.primary-nav > .menu-item:last-of-type {
  margin-left: 20px;
}
.nav-menu ul.primary-nav > .menu-item:last-of-type:before, .nav-menu ul.primary-nav > .menu-item:last-of-type:after {
  display: none;
}
.nav-menu ul.primary-nav > .menu-item:last-of-type:hover:before, .nav-menu ul.primary-nav > .menu-item:last-of-type:hover:after {
  display: none;
}
@media (min-width: 1025px) {
  .nav-menu ul.primary-nav > .menu-item:before {
    content: "";
    transition: opacity 0.2s ease;
    opacity: 0;
  }
  .nav-menu ul.primary-nav > .menu-item:after {
    content: "";
    transition: all 0.2s ease 0.1s;
    right: 100%;
  }
  .nav-menu ul.primary-nav > .menu-item:hover > a, .nav-menu ul.primary-nav > .menu-item.open > a {
    color: white;
  }
  .nav-menu ul.primary-nav > .menu-item:hover:before, .nav-menu ul.primary-nav > .menu-item.open:before {
    opacity: 1;
    content: "";
    position: absolute;
    left: -8px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 45px;
    background-size: cover;
    background-image: url('data:image/svg+xml,<svg width="72" height="106" viewBox="0 0 72 106" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.1084 96.699H47.7959L32.7178 105.995H0.00878906L0 106L0.00292969 105.995H0L0.00390625 105.992L56.4102 9.17944L72 0.769287L16.1084 96.699Z" fill="%23E30613"/></svg>');
  }
  .nav-menu ul.primary-nav > .menu-item:hover:after, .nav-menu ul.primary-nav > .menu-item.open:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 12px;
    bottom: 0;
    background: #1E1E1D;
    z-index: -1;
    transform: skew(-30deg);
  }
}

.primary-nav > li:last-child a {
  padding: 1rem !important;
  border-radius: 4px;
  background-color: #E30613;
}
.primary-nav > li:last-child a:hover {
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.1);
  color: white;
  cursor: pointer;
}

/** 
 * Dropdown Menu
 */
.menu-item-has-children {
  position: relative;
}
.menu-item-has-children.open > .sub-menu {
  display: block;
}
.menu-item-has-children > a {
  padding: 0 !important;
}
.menu-item-has-children > a span {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 10px;
  padding: 8px 14px 8px 24px;
}
.menu-item-has-children > a span:after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-size: cover;
  background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16.2977 5.35938L17.9713 7.03299L10.0339 14.9703L2.09659 7.03299L3.7702 5.35938L10.0339 11.6231L16.2977 5.35938Z" fill="%23E30613"/></svg>');
}
.menu-item-has-children > .sub-menu {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background-color: white;
  padding: 1rem;
  border: 2px solid #E30613; /* light grey border */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  min-width: 280px;
  z-index: 1000;
}
.menu-item-has-children > .sub-menu a {
  padding: 0 !important;
}
@media (min-width: 1025px) {
  .menu-item-has-children > .sub-menu a {
    color: #1E1E1D !important;
  }
}
.menu-item-has-children > .sub-menu a span {
  padding: 8px 14px 8px 24px;
  display: flex;
  width: 100%;
}
@media all and (max-width: 1024px) {
  .menu-item-has-children > .sub-menu a span {
    padding: 14px 24px;
  }
}
.menu-item-has-children > .sub-menu:before {
  content: "";
  position: absolute;
  bottom: 100%;
  right: 20px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid white;
}
@media (max-width: 1024px) {
  .menu-item-has-children > .sub-menu {
    position: relative;
    top: auto;
    left: auto;
    background-color: black;
    box-shadow: none;
    border: none;
    padding: 10px 0;
  }
  .menu-item-has-children > .sub-menu:before {
    display: none;
  }
}
.menu-item-has-children > .sub-menu li {
  text-align: left;
}
.menu-item-has-children > .sub-menu a {
  color: #1E1E1D;
  text-decoration: none;
  display: block;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}
@media all and (max-width: 1024px) {
  .menu-item-has-children > .sub-menu a {
    color: white;
    font-size: 20px;
  }
}
.menu-item-has-children > .sub-menu a:hover {
  background-color: #f3f4f6; /* light grey on hover */
  color: #E30613;
}

@media all and (min-width: 1025px) {
  .mega.open .sub-menu {
    width: 100%;
    max-width: 1024px;
    position: fixed;
    top: 90px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-wrap: wrap;
  }
  .mega.open .sub-menu:before {
    display: none;
  }
  .mega.open .sub-menu li {
    width: 25%;
    position: relative;
    padding: 5px;
  }
  .mega.open .sub-menu li a span {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: 2.6rem;
    line-height: 1.8;
  }
  .mega.open .sub-menu li a {
    position: relative;
  }
  .mega.open .sub-menu li a:hover::after {
    content: attr(title);
    position: absolute;
    top: 0px; /* Adjust as needed */
    left: 0px;
    background-color: #f3f4f6;
    padding: 8px 14px 8px 24px;
    border-radius: 4px;
    line-height: 1.8;
    white-space: nowrap;
    z-index: 1000;
    opacity: 1;
    transition: opacity 0.2s ease-in-out;
    max-height: 2.6rem;
  }
  .mega.open .sub-menu li a:hover::after {
    opacity: 1;
  }
}
.shadow-md .logo .light {
  display: block !important;
}
.shadow-md .logo .dark {
  display: none !important;
}

/**
 * fade-in
 */
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.fade-in {
  opacity: 0;
}

.fade-in.animate {
  animation: fade-in 0.8s ease-out forwards;
}

/**
  * fade-in-up 
  */
@keyframes fade-in-up {
  0% {
    opacity: 0;
    transform: translateY(80px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.fade-in-up {
  opacity: 0;
  transform: translateY(80px);
  will-change: opacity, transform;
}

.fade-in-up.animate {
  animation-name: fade-in-up;
  animation-duration: 1.6s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-fill-mode: forwards;
}

/**
  * fade-in-left
  */
@keyframes fade-in-left {
  0% {
    opacity: 0;
    transform: translateX(-80px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.fade-in-left {
  opacity: 0;
  transform: translateY(-80px);
  will-change: opacity, transform;
}

.fade-in-left.animate {
  animation-name: fade-in-left;
  animation-duration: 1.6s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-fill-mode: forwards;
}

/**
  * fade-in
  */
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fade-in {
  opacity: 0;
  will-change: opacity;
}

.fade-in.animate {
  animation-name: fade-in;
  animation-duration: 1.6s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-fill-mode: forwards;
}

/** 
  * Delay
  */
.ani-delay-100 {
  animation-delay: 0.1s;
}

.ani-delay-200 {
  animation-delay: 0.2s;
}

.ani-delay-300 {
  animation-delay: 0.3s;
}

.ani-delay-400 {
  animation-delay: 0.4s;
}

.ani-delay-500 {
  animation-delay: 0.5s;
}

.ani-delay-600 {
  animation-delay: 0.6s;
}

.ani-delay-700 {
  animation-delay: 0.7s;
}

.ani-delay-800 {
  animation-delay: 0.8s;
}

.ani-delay-900 {
  animation-delay: 0.9s;
}

.ani-delay-1000 {
  animation-delay: 1s;
}

#social a:hover img svg {
  fill: red;
}

.section {
  overflow: hidden;
}
.section.image-columns + .section {
  padding-top: 6rem;
}
.section + .section {
  padding-top: 0;
}
.section .section:last-of-type {
  padding-bottom: 0;
}

.text-columns h2 {
  position: relative;
  display: inline-block;
}
.text-columns h2:after {
  content: "";
  position: absolute;
  left: 100%;
  top: 16px;
  margin-left: 14px;
  width: 38px;
  height: 39px;
  background-size: cover;
  background-image: url('data:image/svg+xml,<svg width="38" height="39" viewBox="0 0 38 39" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M34.6346 38.6112C35.9199 38.6372 36.9831 37.6066 37.0094 36.3092L37.4368 15.1674C37.463 13.87 36.4424 12.7972 35.1571 12.7712C33.8718 12.7452 32.8086 13.7759 32.7823 15.0733L32.4024 33.866L13.7846 33.4896C12.4993 33.4636 11.4361 34.4943 11.4098 35.7916C11.3836 37.089 12.4043 38.1618 13.6896 38.1878L34.6346 38.6112ZM2.08447 2L0.405291 3.62779L33.0029 37.8899L34.6821 36.2622L36.3613 34.6344L3.76365 0.372211L2.08447 2Z" fill="black"/></svg>');
}
@media all and (max-width: 767px) {
  .text-columns h2:after {
    width: 20px;
    height: 21px;
  }
}

.testimonial-slider .content-wrapper {
  position: relative;
}
.testimonial-slider .testimonialSwiper .swiper-slide {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0 20px;
  text-align: left;
  border: 1px solid #e1e1e1;
  border-radius: 28px;
  padding: 40px;
  gap: 20px;
}
.testimonial-slider .testimonialSwiper .swiper-slide .quote {
  width: 77px;
  height: 53px;
  display: block;
  background-size: cover;
  background-image: url('data:image/svg+xml,<svg width="77" height="53" viewBox="0 0 77 53" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M32.56 52.896C29.1253 52.896 25.4667 52.5973 21.584 52C17.8507 51.2533 14.416 49.984 11.28 48.192C8.144 46.4 5.53067 44.0853 3.44 41.248C1.34933 38.2613 0.304001 34.528 0.304001 30.048V0.479996H24.944V24.448C25.2427 27.584 26.288 29.6 28.08 30.496C30.0213 31.2427 31.5147 31.616 32.56 31.616V52.896ZM76.016 52.896C72.5813 52.896 68.9227 52.5973 65.04 52C61.3067 51.2533 57.872 49.984 54.736 48.192C51.6 46.4 48.9867 44.0853 46.896 41.248C44.8053 38.2613 43.76 34.528 43.76 30.048V0.479996H68.4V24.448C68.6987 27.584 69.744 29.6 71.536 30.496C73.4773 31.2427 74.9707 31.616 76.016 31.616V52.896Z" fill="%23E30613"/></svg>');
}
.testimonial-slider .testimonialSwiper .swiper-slide .testimonial-item {
  flex: 1;
}
.testimonial-slider .testimonialSwiper .swiper-slide .testimonial-item .author {
  font-size: 14px;
  font-weight: bold;
  color: #515151;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.testimonialSwiper .swiper-pagination,
.serviceSwiper .swiper-pagination {
  position: static;
  padding-top: 20px;
}
.testimonialSwiper .swiper-pagination-bullet-active,
.serviceSwiper .swiper-pagination-bullet-active {
  background-color: #E30613 !important;
}

.testimonials .testimonial-item {
  padding: 10px;
}
.testimonials .testimonial-item .testimonial-item__innner {
  background: #f1f1f1;
  border-radius: 28px;
  padding: 40px;
  text-align: left;
}
.testimonials .testimonial-item .quote {
  margin-bottom: 20px;
  width: 77px;
  height: 53px;
  display: block;
  background-size: cover;
  background-image: url('data:image/svg+xml,<svg width="77" height="53" viewBox="0 0 77 53" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M32.56 52.896C29.1253 52.896 25.4667 52.5973 21.584 52C17.8507 51.2533 14.416 49.984 11.28 48.192C8.144 46.4 5.53067 44.0853 3.44 41.248C1.34933 38.2613 0.304001 34.528 0.304001 30.048V0.479996H24.944V24.448C25.2427 27.584 26.288 29.6 28.08 30.496C30.0213 31.2427 31.5147 31.616 32.56 31.616V52.896ZM76.016 52.896C72.5813 52.896 68.9227 52.5973 65.04 52C61.3067 51.2533 57.872 49.984 54.736 48.192C51.6 46.4 48.9867 44.0853 46.896 41.248C44.8053 38.2613 43.76 34.528 43.76 30.048V0.479996H68.4V24.448C68.6987 27.584 69.744 29.6 71.536 30.496C73.4773 31.2427 74.9707 31.616 76.016 31.616V52.896Z" fill="%23E30613"/></svg>');
}
.testimonials .testimonial-item .author {
  font-size: 14px;
  font-weight: bold;
  color: #515151;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.testimonials .testimonial-item.fade-in-up {
  opacity: 0;
  transform: translateY(80px);
  will-change: opacity, transform;
  animation-name: fade-in-up;
  animation-duration: 1.6s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-fill-mode: forwards;
}

.slider-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  gap: 20px;
}
.slider-header h2 {
  margin: 0;
}
.slider-header .slider-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  gap: 10px;
}
.slider-header .slider-nav .swiper-button-disabled {
  border-color: #E30613;
  background-color: white;
  color: #E30613;
}
.slider-header .swiper-button-next,
.slider-header .swiper-button-prev {
  background: #E30613;
  color: white;
  transform: none;
  top: auto;
  right: auto;
  left: auto;
  position: relative;
  padding: 10px;
  width: 56px;
  height: 56px;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid transparent;
  margin: 0;
}
.slider-header .swiper-button-next:after,
.slider-header .swiper-button-prev:after {
  font-size: 24px;
}

.wysiwyg-content strong {
  font-weight: 700;
  font-size: 44px;
}
@media all and (max-width: 767px) {
  .wysiwyg-content strong {
    font-size: 24px;
  }
}
.wysiwyg-content ul,
.wysiwyg-content ol {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 20px;
  margin: 40px 0;
  padding: 0;
  list-style: none;
}
.wysiwyg-content li {
  flex: 1 1 30%;
  border-radius: 16px;
  background: #f1f1f1;
  padding: 20px;
}
@media all and (max-width: 1023px) {
  .wysiwyg-content li {
    flex: 1 1 40%;
  }
}
@media all and (max-width: 767px) {
  .wysiwyg-content li {
    flex: 1 1 100%;
  }
}
.wysiwyg-content li > strong {
  display: block;
  font-size: initial;
}

.wysiwyg-contact strong {
  font-weight: 700;
}

.service-item {
  background: #f1f1f1;
  border-radius: 16px;
  padding: 20px;
}

.image-columns + .image-columns:nth-child(even),
.text-columns + .text-columns:nth-child(odd) {
  background-color: #f9f9f9;
  border-radius: 18px;
  padding: 20px 20px !important;
}
@media all and (min-width: 768px) {
  .image-columns + .image-columns:nth-child(even) .content-wrapper,
  .text-columns + .text-columns:nth-child(odd) .content-wrapper {
    display: flex;
    flex-direction: row-reverse;
  }
}

.big-content h3,
.big-content h4,
.big-content h5 {
  font-size: 3rem;
}
.big-content p {
  font-size: 1.5rem;
}

p {
  margin: 15px 0 0;
}

@media all and (max-width: 767px) {
  .project-slider .swiper-button-next,
  .project-slider .swiper-button-prev,
  .product-range .swiper-button-next,
  .product-range .swiper-button-prev {
    display: none;
  }
}

.project-gallery .current-image {
  border-radius: 28px;
  overflow: hidden;
}
.project-gallery .current-image .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 28px;
  overflow: hidden;
}
.project-gallery .current-image .swiper-slide img {
  border-radius: 28px;
  overflow: hidden;
}
.project-gallery .thumb-images {
  overflow: hidden;
  padding: 10px 0 0;
  margin: 0 auto;
  max-width: 800px;
}
.project-gallery .thumb-images .swiper-slide {
  border-radius: 18px;
  overflow: hidden;
  border: 2px solid transparent;
  opacity: 0.6;
  cursor: pointer;
}
@media all and (max-width: 767px) {
  .project-gallery .thumb-images .swiper-slide {
    border-radius: 8px;
  }
}
.project-gallery .thumb-images .swiper-slide.swiper-slide-thumb-active {
  border-color: red;
  opacity: 1;
  cursor: default;
}

.wp-block-image {
  margin: 40px auto;
  max-width: 900px;
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wp-block-image img {
  border-radius: 28px;
}

.imageColSwiper .swiper-slide img {
  border-radius: 28px;
}

.img-half {
  width: 40%;
  height: auto;
  float: left;
  aspect-ratio: 3/4;
  margin: 5%;
  border-radius: 28px;
}
@media all and (max-width: 767px) {
  .img-half {
    width: 90%;
  }
}

.img-single {
  width: 40%;
  height: auto;
  aspect-ratio: 4/3;
  margin: 0 auto;
  border-radius: 28px;
}
@media all and (max-width: 767px) {
  .img-single {
    width: 90%;
  }
}

/* Override Gravity Forms CSS variables with higher specificity */
.gform_wrapper {
  /* Primary colors */
  --gf-color-primary: #E30613 !important;
  --gf-color-primary-darker: #ca0511 !important;
  --gf-color-primary-darkest: #b1050f !important;
  --gf-color-primary-lighter: #f90a18 !important;
  --gf-color-primary-lightest: #f9232f !important;
  /* Secondary colors */
  --gf-color-secondary: #474747 !important;
  --gf-color-dark: #333333 !important;
  --gf-color-light: #f8f8f8 !important;
  --gf-color-white: #ffffff !important;
  /* Form structure */
  --gf-border-width: 1px !important;
  --gf-border-radius: 4px !important;
  --gf-spacing-xs: 8px !important;
  --gf-spacing-sm: 12px !important;
  --gf-spacing-md: 16px !important;
  --gf-spacing-lg: 24px !important;
  --gf-spacing-xl: 32px !important;
  /* Typography */
  --gf-font-size-xs: 12px !important;
  --gf-font-size-sm: 14px !important;
  --gf-font-size-md: 16px !important;
  --gf-font-size-lg: 18px !important;
  --gf-font-size-xl: 20px !important;
  --gf-line-height: 1.5 !important;
  /* Form elements */
  --gf-input-color-background: #ffffff7d !important;
  --gf-input-color-border: #e5e7eb !important;
  --gf-input-color-text: #222 !important;
  --gf-input-color-focus: #E30613 !important;
  --gf-ctrl-outline-color-focus: #E30613 !important;
  --gf-color-in-ctrl-primary: #E30613 !important;
  --gf-color-in-ctrl-primary-darker: #E30613 !important;
  --gf-color-in-ctrl-primary-lighter: #E30613 !important;
  --gf-input-padding: 0.75rem 1rem !important;
  /* Control buttons */
  --gf-ctrl-btn-bg-color-ctrl: #E30613 !important;
  --gf-ctrl-btn-bg-color-hover: #b1050f !important;
  --gf-ctrl-btn-bg-color-active: #98040d !important;
  --gf-ctrl-btn-color: #ffffff !important;
  --gf-ctrl-btn-color-hover: #ffffff !important;
  --gf-ctrl-btn-border-color: #E30613 !important;
  --gf-ctrl-btn-border-color-hover: #b1050f !important;
  /* Label overrides */
  --gf-label-color: #ffffff !important;
  --gf-label-font-size: 1rem !important;
  --gf-label-font-weight: 600 !important;
  --gf-label-margin-bottom: 0.25rem !important;
  --gf-legend-color: #ffffff !important;
  --gf-legend-font-weight: 600 !important;
  /* Button styles */
  --gf-button-border-radius: 4px !important;
  --gf-button-padding: 0.75rem 2rem !important;
  --gf-button-color-background: #E30613 !important;
  --gf-button-color-background-hover: #b1050f !important;
  --gf-button-color-text: #fff !important;
  /* Validation and messages */
  --gf-color-error: #d63638 !important;
  --gf-color-success: #00a32a !important;
  --gf-color-warning: #dba617 !important;
  --gf-color-info: #2271b1 !important;
  /* Also apply direct CSS for labels */
}
.gform_wrapper .gfield_label,
.gform_wrapper legend,
.gform_wrapper label {
  color: white !important;
  font-weight: 600 !important;
  margin-bottom: 0.25rem !important;
}

@media all and (max-width: 1024px) {
  .btn-primary {
    font-size: 22px;
    padding: 14px 20px;
    display: block;
    height: auto;
  }
}
.swiper-slide.product-item {
  display: flex;
  flex-direction: column;
  transition: all 0.2s ease;
}
.swiper-slide.product-item img {
  flex-grow: 1;
  transition: all 0.2s ease;
}
.swiper-slide.product-item .product-image {
  position: relative;
}
.swiper-slide.product-item .product-image::before {
  transition: all 0.2s ease;
  content: "";
  position: absolute;
  inset: 0;
  background-color: #E30613;
  opacity: 0;
  z-index: 1;
}
.swiper-slide.product-item:hover {
  transform: translateY(-10px);
  color: #E30613;
}
.swiper-slide.product-item:hover .product-image img {
  transform: scale(1.05);
}
.swiper-slide.product-item:hover .product-image:before {
  opacity: 0.4;
}

.product-card {
  border: 1px solid #e1e1e1;
  border-radius: 28px;
  overflow: hidden;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
}
.product-card .product-image {
  position: relative;
  transition: all 0.2s ease;
  overflow: hidden;
  flex-grow: 1;
  aspect-ratio: 4/3;
}
.product-card .product-image img {
  transition: all 0.2s ease;
}
.product-card .product-title {
  padding: 10px 20px;
  transition: all 0.2s ease;
}
.product-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.product-card:hover .product-title {
  color: #E30613;
}
.product-card:hover .product-image img {
  transform: scale(1.05);
}
.product-card:hover .product-image:before {
  opacity: 0.4;
}

.project-single {
  padding-bottom: 40px;
}
.project-single .project-slider {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  gap: 20px;
}
.project-single .slider-header {
  flex-direction: column;
  width: 50%;
  flex: 1;
  align-items: flex-start;
  justify-content: flex-start;
}
.project-single h2 {
  width: 100%;
  flex: 1 1 100%;
  text-align: center;
}
.project-single .project-gallery {
  width: 50%;
  flex: 1;
}
@media all and (max-width: 767px) {
  .project-single .project-gallery {
    width: 100%;
    flex: 1 1 100%;
  }
}

.tray {
  position: fixed;
  display: flex;
  right: 0;
  top: 50%;
  z-index: 30;
  transform: translateY(-50%) translateX(calc(100% + 1px));
  transition: 0.2s ease-in-out transform;
  min-height: 300px;
  width: 85%;
}
@media (min-width: 1025px) {
  .tray {
    min-width: 400px;
    width: 30%;
  }
}
.tray.animate {
  animation: tray-pop 0.3s normal forwards cubic-bezier(0.4, 0.2, 0.2, 1);
}
.tray.open {
  transform: translateY(-50%) translateX(0);
  animation: none !important;
  transition: 0.2s ease-in-out transform;
}

.tray__content {
  background: var(--color-black);
  width: 100%;
  padding: 16px;
  border-radius: 12px 0 0 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 26px;
}
.tray__content ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 200px;
  overflow-y: auto;
}
.tray__content ul li a {
  display: inline-block;
  background: rgba(255, 255, 255, 0.1);
  padding: 4px 12px;
  color: white;
  border-radius: 4px;
  transition: 0.2s ease-in-out all;
}
.tray__content ul li a:hover {
  background: rgba(255, 255, 255, 0.2);
}

.tray-toggle {
  position: absolute;
  top: 30px;
  right: 100%;
  width: 60px;
  height: 60px;
  background-color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 4px 0 0 4px;
  color: white;
  font-size: 0;
  background-size: 33px 36px;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('data:image/svg+xml,<svg width="33" height="36" viewBox="0 0 33 36" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.20748 31.8653C5.13894 34.1911 8.73147 34.1911 15.9198 34.1911H17.0786C24.2669 34.1911 27.8611 34.1911 29.7925 31.8653M3.20748 31.8653C1.27601 29.5379 1.93914 26.0065 3.26381 18.9406C4.2054 13.9188 4.67539 11.4063 6.46361 9.92224M29.7925 31.8653C31.724 29.5379 31.0609 26.0065 29.7362 18.9406C28.7946 13.9188 28.323 11.4063 26.5348 9.92224M26.5348 9.92224C24.7482 8.43823 22.1906 8.43823 17.0802 8.43823H15.9181C10.8078 8.43823 8.25183 8.43823 6.46361 9.92224" stroke="white" stroke-width="2.41434"/><path d="M11.6699 8.43823V6.82867C11.6699 5.54803 12.1787 4.31984 13.0842 3.41428C13.9898 2.50873 15.2179 2 16.4986 2C17.7792 2 19.0074 2.50873 19.913 3.41428C20.8185 4.31984 21.3273 5.54803 21.3273 6.82867V8.43823" stroke="white" stroke-width="2.41434" stroke-linecap="round"/></svg>');
}

@keyframes tray-pop {
  0% {
    transform: translateY(-50%) translateX(100%);
  }
  50% {
    transform: translateY(-50%) translateX(95%);
  }
  100% {
    transform: translateY(-50%) translateX(100%);
  }
}