/**
Theme Name: maxim
Description: Twenty Twenty-Five Child Theme
Author: MTK
Description: Twenty Twenty-Five emphasizes simplicity and adaptability. It offers flexible design options, supported by a variety of patterns for different page types, such as services and landing pages, making it ideal for building personal blogs, professional portfolios, online magazines, or business websites. Its templates cater to various blog styles, from text-focused to image-heavy layouts. Additionally, it supports international typography and diverse color palettes, ensuring accessibility and customization for users worldwide.
Template: twentytwentyfive
Requires at least: 6.7
Tested up to: 6.7
Requires PHP: 7.2
Version: 1.0 License: GNU General Public License v2 or later
License URI: http: //www.gnu.org/licenses/gpl-2.0.html
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
Text Domain: twentytwentyfivechild
*/
@media screen and (max-width: 781px) {
}
@media (min-width: 782px) {
}
strong {
  font-weight: bold;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-hidden-y {
  overflow-y: clip;
}
.overflow-hidden-x {
  overflow-x: clip;
}
.noise-100 {
  position: relative;
  overflow: hidden;
  &::after {
    content: '';
    display: block;
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background-image: url(./assets/images/common/noise.png.webp);
    background-position: center center;
    background-repeat: repeat;
    background-size: 100px;
    mix-blend-mode: multiply;
    opacity: .25;
    pointer-events: none;
  }
  &.noise-animation {
    &::after {
      -webkit-animation: noise 8s steps(10) infinite;
      animation: noise 8s steps(10) infinite;
      opacity: .5;
    }
  }
  &.blend-lighten {
    &::after {
      mix-blend-mode: lighten;
    }
  }
  &.blend-soft-light {
    &::after {
      mix-blend-mode: soft-light;
      opacity: .75;
    }
  }
  & > div {
    position: relative;
    z-index: 1;
  }
}
.background-dots {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiIgc3R5bGU9IndoaXRlLXNwYWNlOiBwcmU7Ij4KICAgIDxlbGxpcHNlIHJ4PSIwLjUwOTc1NyIgcnk9IjAuNTA5NzU3IiBmaWxsPSIjODk4OTg5IiBzdHJva2U9Im5vbmUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE2LDE2KSIvPgo8L3N2Zz4=');
  background-repeat: repeat;
  background-size: 32px;
}
.background-architect {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='199' viewBox='0 0 100 199'%3E%3Cg fill='%23dddddd' fill-opacity='1'%3E%3Cpath d='M0 199V0h1v1.99L100 199h-1.12L1 4.22V199H0zM100 2h-.12l-1-2H100v2z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
}
.background-plus {
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23dddddd' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.background-diagonal-lines {
  background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23dddddd' fill-opacity='1' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
}
.vk_highlighter {
    background: var(--vk-highlighter-color)!important;
}
@-webkit-keyframes noise {
    to {
        background-position: 0 0;
    }

    10% {
        background-position: -5% -10%;
    }

    20% {
        background-position: -15% 5%;
    }

    30% {
        background-position: 7% -25%;
    }

    40% {
        background-position: 20% 25%;
    }

    50% {
        background-position: -25% 10%;
    }

    60% {
        background-position: 15% 5%;
    }

    70% {
        background-position: 0 15%;
    }

    80% {
        background-position: 25% 35%;
    }

    90% {
        background-position: -10% 10%;
    }
}

@keyframes noise {
    to {
        background-position: 0 0;
    }

    10% {
        background-position: -5% -10%;
    }

    20% {
        background-position: -15% 5%;
    }

    30% {
        background-position: 7% -25%;
    }

    40% {
        background-position: 20% 25%;
    }

    50% {
        background-position: -25% 10%;
    }

    60% {
        background-position: 15% 5%;
    }

    70% {
        background-position: 0 15%;
    }

    80% {
        background-position: 25% 35%;
    }

    90% {
        background-position: -10% 10%;
    }
}
body {
  & .header--inner {
    background-color: #F9F9FA80!important;
    backdrop-filter: blur(10px);
    & #mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-item > a.mega-menu-link {
    }
  }
}
@media  (max-width: 991.98px) {
    .header-navigation-pc,
    .header-navigation-cta {
        display: none !important;
    }
}
header.wp-block-template-part {
    position: sticky;
    z-index: 100;
    top: 0;
    & .wp-block-site-logo {
      @media screen and (max-width: 782px) {
        max-width: 120px;
      }
    }
    & .header--contact {
      & .wp-block-button__link {
        @media screen and (max-width: 782px) {
          padding: 10px 20px;
          font-size: .75rem;
        }
      }
    }
    & .gs_hamburger_cross {
    }
}
.header-navigation {
  @media screen and (max-width: 781px) {
      gap: 10px;
      & .gsbp-bc9f4bf {
        margin-left: 20px;
      }
  }
}
a {
  text-decoration: none;
  &:focus {
    border: none;
    outline-style: none;
  }
}
button:focus {
    border: none;
    outline-style: none;
  }
.bnav_bottom_nav_wrapper {
    bottom: -120px;
}
.bnav_bottom_nav_wrapper.visible {
    bottom: 0;
}
.btn-trigger {
    position: relative;
    width: 50px;
    height: 44px;
    cursor: pointer;
    transform: scale(.65);
  }
  .btn-trigger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: #333;
    border-radius: 4px;
  }
  .btn-trigger, .btn-trigger span {
    display: inline-block;
    transition: all .5s;
    box-sizing: border-box;
  }
  .btn-trigger span:nth-of-type(1) {
    top: 0;
  }
  .btn-trigger span:nth-of-type(2) {
    top: 20px;
  }
  .btn-trigger span:nth-of-type(3) {
    bottom: 0;
  }

  .btn-trigger.triggeractive span:nth-of-type(1) {
    -webkit-transform: translateY(20px) rotate(-45deg);
    transform: translateY(20px) rotate(-45deg);
  }
  .btn-trigger.triggeractive span:nth-of-type(2) {
    opacity: 0;
  }
  .btn-trigger.triggeractive span:nth-of-type(3) {
    -webkit-transform: translateY(-20px) rotate(45deg);
    transform: translateY(-20px) rotate(45deg);
  }
  .animated-text {
    & .chars {
      transform: translateZ(0);
      -webkit-transform: scale(2.2);
      transform: scale(2.2);
      opacity: 0;
      filter: blur(0.5px) contrast(150%);
      will-change: filter;
    }
  }
  .hero-group {
    position: relative;
    @media (min-width: 782px) {
      &::before {
        content: '';
        display: block;
        position: absolute;
        right: -120px; top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        width: 600px; height: 600px;
        background-color: var(--wp--preset--color--custom-primary);
        clip-path: polygon(83% 12%, 0 53%, 80% 99%);
        animation: spin 120s linear infinite;
        filter: blur(95px);
      }
    }
    &::after {
      content: '';
      display: block;
      position: absolute;
      left: -80px; top: 125%;
      width: 800px; height: 800px;
      background-image: url(./assets/images/bg-fruid-left.svg);
      background-position: left center;
      background-repeat: no-repeat;
      background-size: contain;
    }
  }
  .hero-image-group {
    position: relative;
    &::before {
              content: '';
              display: block;
              position: absolute;
              left: -80px; top: -60px;
              width: 80%; height: 80%;
              border: 1px solid #ededed;
            }
    @media screen and (min-width: 1200px) {
      top: 20px; right: -240px;
      &::before {
        left: -40px;
      }
      &::after {
        content: '';
        display: block;
        position: absolute;
        left: -200%; top: 10%;
        z-index: -1;
        width: 200%; height: 150%;
        border: 1px solid #ededed;
        animation: spin 30s linear infinite;
      }
    }
  }
  @keyframes rotation {
    0% {
    transform: rotate(0deg);
  }
  1.66%,
  3.33% {
    transform: rotate(12deg);
  }
  4.99%,
  6.66% {
    transform: rotate(24deg);
  }
  8.32%,
  9.99% {
    transform: rotate(36deg);
  }
  11.65%,
  13.32% {
    transform: rotate(48deg);
  }
  14.98%,
  16.65% {
    transform: rotate(60deg);
  }
  18.31%,
  19.98% {
    transform: rotate(72deg);
  }
  21.65%,
  23.31% {
    transform: rotate(84deg);
  }
  24.98%,
  26.65% {
    transform: rotate(96deg);
  }
  28.31%,
  29.98% {
    transform: rotate(108deg);
  }
  31.65%,
  33.33% {
    transform: rotate(120deg);
  }
  34.98%,
  36.65% {
    transform: rotate(132deg);
  }
  38.33%,
  39.98% {
    transform: rotate(144deg);
  }
  41.65%,
  43.33% {
    transform: rotate(156deg);
  }
  44.98%,
  46.65% {
    transform: rotate(168deg);
  }
  48.33%,
  50% {
    transform: rotate(180deg);
  }
  51.65%,
  53.33% {
    transform: rotate(192deg);
  }
  54.99%,
  56.65% {
    transform: rotate(204deg);
  }
  58.33%,
  59.99% {
    transform: rotate(216deg);
  }
  61.65%,
  63.33% {
    transform: rotate(228deg);
  }
  64.99%,
  66.66% {
    transform: rotate(240deg);
  }
  68.33%,
  69.99% {
    transform: rotate(252deg);
  }
  71.66%, 73.33% {
    transform: rotate(264deg);
  }
  74.99%,
  76.66% {
    transform: rotate(276deg);
  }
  78.33%,
  79.99% {
    transform: rotate(288deg);
  }
  81.66%,
  83.33% {
    transform: rotate(300deg);
  }
  84.99%,
  86.66% {
    transform: rotate(312deg);
  }
  88.33%,
  89.99% {
    transform: rotate(324deg);
  }
  91.66%,
  93.33% {
    transform: rotate(336deg);
  }
  94.99%,
  96.66% {
    transform: rotate(348deg);
  }
  98.33%,
  100% {
    transform: rotate(360deg);
  }
  }
  .hero-image-container {
            clip-path: polygon(10% 0, 100% 0, 100% 90%, 0% 100%);
        }
  .tp--news--category {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--wp--preset--font-size--medium);
    & li {
      &:not(:first-of-type) {
        margin-top: var(--wp--preset--spacing--20);
      }
      & a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%; height: 60px;
        border: 1px solid #ededed;
        border-radius: 4px;
      }
    }
  }

  .categories {
    display: flex;
    gap: 10px;
    & li {
      margin: 0;
      overflow: hidden;
      & a {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px 15px;
      }
    }
  }
  .works-cat-nav {
    list-style: none;
    display: flex;
    align-items: center;
    flex-flow: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    font-size: var(--wp--preset--font-size--small);
    & li {
      & a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 4px 12px;
        background-color: #c9c9c9;
        border: 1px solid #686868;
        border-radius: 200px;
        @media screen and (min-width: 782px) {
          padding: 7px 21px;
          font-size: var(--wp--preset--font-size--medium);
        }
      }
    &.current {
      & a {
        background-color: #fff;
      }
    }
    }
  }
  .wp-block-post-template-is-layout-flow:has(.type-works) {
    & .type-works {
      &:not(:first-of-type) {
        border-top: 1px solid #686868;
      }
      & .wp-block-post-featured-image {
        border-radius: 10px;
        overflow: hidden;
      }
    }
  }
  .category--meta--item {
    & a {
      display: inline-flex;
      padding: 4px 14px;
      background-color: #ededed;
      border-radius: 200px;
      color: #8d8d8d;
      font-weight: 400;
    }
  }
  .pagination--circle {
    & span {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 40px; height: 40px;
      background-color: #8d8d8d;
      border-radius: 50%;
      &.current {
        color: #fff;
      }
      &.wp-block-query-pagination-next-arrow, &.wp-block-query-pagination-previous-arrow {
        display: inline-flex;
        background-color: inherit;
      }
    }
    & .page-numbers {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 40px; height: 40px;
    }
  }
  footer {
    margin-top: 0;
    & .breadcrumb-list {
      display: flex;
      align-items: center;
      list-style: none;
      margin: 0;
      padding: 0;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #686868;
      font-size: var(--wp--preset--font-size--small);
      font-weight: 600;
      & .breadcrumb-item {
        &:not(:last-of-type) {
          &::after {
            content: '\f105';
            margin: 0 8px;
            font-family: fontawesome;
            font-family: 700;
          }
        }
      }
      & .breadcrumb-item--current {
        color: var(--wp--preset--color--contrast);
      }
    }
    .footer-navigation {
      font-weight: 600;
      @media screen and (max-width: 781px) {
        width: 100%;
        justify-content: start;
        column-gap: normal;
        gap: 20px;
      }
      & > li {
        @media screen and (max-width: 781px) {
          display: flex;
          gap: 0;
          width: calc(50% - 10px);
          font-weight: 600;
          & a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            padding: 20px 10px;
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 50px;
            font-weight: 600;
            text-align: center;
          }
        }
      }
      @media (min-width: 782px) {
        gap: 0;
        & > li {
          &:not(:first-of-type) {
            border-left: 1px solid #ddd;
          }
          & > a {
            padding: 15px 20px;
          }
        }
      }
    }
  }
@keyframes border-move-horizon {
  0% { width: 0; transform-origin: left; }
  80% { width: 100%; }
  100% { width: 100%; }
}
  .hero-container {
    position: relative;
    &::before {
      content: '';
      display: block;
      position: absolute;
      left: 50%; top: 0;
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
      width: 95%; height: 100%;
      border: 1px solid #ededed;
      border-bottom: 0;
      border-top: 0;
    }
    &::after {
      content: 'WELDING OF MAXIM';
      display: block;
      position: absolute;
      left: -25%; bottom: -15%;
      opacity: .2;
      color: var(--wp--preset--color--custom-primary);
      font-size: 16.8rem;
      font-weight: bold;
      white-space: nowrap;
      -webkit-text-stroke: 1px #fff;
    }
    & .container-inner {
      position: relative;
      &::before {
          content: '';
          display: block;
          position: absolute;
          left: -100vw; top: -40px;
          width: 300vw; height: calc(100% + 80px);
          border: 1px solid #ededed;
        }
      &::after {
        content: '';
        display: block;
        position: absolute;
        left: 0; top: -40px;
        width: 250px; height: 1px;
        background-color: var(--wp--preset--color--custom-accent-gray);
        animation: border-move-horizon 15s linear infinite;
      }
    }
  }
@media (min-width: 782px) {
  .tp-strength-center {
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
  }
}
.service-list {
  @media (min-width: 782px) {
    .service-item-img.item-top {
      clip-path: polygon(20% 14%, 100% 0%, 94% 80%, 5% 100%);
    }
    .service-item-img.item-middle {
      clip-path: polygon(0 16%, 93% 0, 100% 100%, 4% 86%);
    }
    .service-item-img.item-bottom {
      clip-path: polygon(2% 0, 100% 19%, 100% 81%, 11% 100%);
    }
  }
}
.tp-service-container {
  overflow: hidden;
  & .container-inner {
    position: relative;
    z-index: 0;
    & > div {
      transition: all .3s;
    }
    &::before {
      content: '';
      display: block;
      position: absolute;
      left: 50%; top: -20%;
      z-index: -1;
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
      width: 90vw; height: 140%;
      border: 1px solid #ddd;
      border-top: 0; border-bottom: 0;
      @media (min-width: 782px) {
        width: 60vw;
      }
    }
    &::after {
      content: '';
      display: block;
      position: absolute;
      left: -100vw; top: 50%;
      z-index: -1;
      -webkit-transform: translateY(-50%);
      transform: translateY(-50%);
      width: 300vw; height: calc(100% - var(--wp--preset--spacing--60) - var(--wp--preset--spacing--60));
      border: 1px solid #ddd;
      border-left: 0; border-right: 0;
    }
  }
  @media (min-width: 1367px) {
    &:hover {
      & .container-inner {
        & .copy-inner {
          transition: all .3s;
        }
        & > div {
          opacity: .65;
          filter: blur(2px);
          & .wp-block-heading {
            transition: all .4s;
            text-shadow: 0px 0px 0px;
            & .has-custom-primary-color {
              transition: all .4s;
              text-shadow: 0 0 0;
            }
            & .has-inline-color {
              transition: all .4s;
              text-shadow: 0 0 0;
            }
          }
          &:hover {
            opacity: 1;
            transition: all .3s;
            filter: blur(0px);
            & .copy-inner {
              background-color: #fff!important;
              box-shadow: inset 1px 1px 4px #ddd , inset -2px -2px 6px #ededed;
            }
            & .service-inner {
              & > .wp-block-group {
                &::before {
                      transform: scaleX(1);
                      transform-origin: bottom left;
                      transition-timing-function: steps(6, end);
                }
              }
            }
            & .wp-block-heading {
                  text-shadow: 8px 2px 20px rgba(36, 30, 28, 0.65);
                  & .has-inline-color {
                    text-shadow: 8px 2px 20px rgba(104, 104, 104, .65);
                  }
                  & .has-custom-primary-color {
                    text-shadow: 8px 2px 20px rgba(94, 168, 67, .85);
                  }
                }
          }
          & .service-inner {
              & > .wp-block-group {
                position: relative;
                overflow-x: hidden;
                &::before {
                  content: '';
                  display: block;
                  position: absolute;
                  left: 0%; top: 0; right: 0;
                  width: calc(100% - 1px); height: calc(100% - 1px);
                  transform: scaleX(0);
                  transform-origin: bottom right;
                  background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
                  box-shadow: inset 1px 1px 4px #fff;
                  border: 1px solid #fff;
                  border-left: none; border-top: none;
                  transform: scaleX(0);
                  transform-origin: bottom right;
                  transition: transform .65s ease;
                }
              }
          }
        }
      }
    }
  }
}
.tp-profile-container {
  overflow: hidden;
  &::before {
      content: '';
      display: block;
      position: absolute;
      left: -100vw; top: 50%;
      z-index:0;
      -webkit-transform: translateY(-50%);
      transform: translateY(-50%);
      width: 300vw; height: calc(100% - var(--wp--preset--spacing--80) - var(--wp--preset--spacing--80) - 2px);
      border: 1px solid #ddd;
      border-left: 0; border-right: 0;
    }
    &::after {
      content: '';
      display: block;
      position: absolute;
      left: 50%; top: 0;
      z-index: 0;
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
      width: calc(100% - var(--wp--style--root--padding-right) - var(--wp--style--root--padding-left) - 2px );
      max-width: 1280px; height: 100%;
      border: 1px solid #ddd;
      border-top: 0; border-bottom: 0;
    }
  & .container-inner {
    position: relative;
    @media (min-width: 782px) {
    border: 1px solid #ededed;
    border-left: none; border-right: none;

    &::before {
      content: '';
      display: block;
      position: absolute;
      left: 50%; top: -50%;
      width: 90%; height: 200%;
      z-index: -1;
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
      border: 1px solid #ddd;
      border-top: 0; border-bottom: 0;
    }
    &::after {
      content: '';
      display: block;
      position: absolute;
      left: -100vw; top: 50%;
      z-index: -2;
      -webkit-transform: translateY(-50%);
      transform: translateY(-50%);
      width: 300vw; height: calc(100% - var(--wp--preset--spacing--60) - var(--wp--preset--spacing--60) + 20px);
      border: 1px solid #ddd;
      border-left: 0; border-right: 0;
    }
  }
  }
}
.infinite-carousel-group {
  pointer-events: none;
}


.about-copy {
  & .copy-inner {
    position: relative;
    max-width: max-content;
    margin-left: 0!important;
    &::before {
      content: '';
      display: block;
      position: absolute;
      left: 0; top: calc(0px - var(--wp--preset--spacing--70));
      width: calc(100% - 2px); height: calc(100% + var(--wp--preset--spacing--70) * 2 );
      border: 1px solid #ddd;
      border-top: 0; border-bottom: 0;
    }
    & .wp-block-heading {
      @media screen and (max-width: 781px) {
        font-size: clamp(2.311rem, 2.311rem + ((1vw - 0.2rem) * 5.316), 6.7rem)!important;
        letter-spacing: 4px!important;
      }
      @media screen and (max-width: 1440px) {
        font-size: clamp(2.311rem, 2.311rem + ((1vw - 0.2rem) * 5.316), 5.5rem)!important;
        letter-spacing: 4px!important;
      }
      @media screen and (max-width: 1920px) {
        font-size: clamp(2.311rem, 2.311rem + ((1vw - 0.2rem) * 5.316), 5.8rem)!important;
        letter-spacing: 4px!important;
        &.small {
              font-size: clamp(2.545rem, 2.545rem + ((1vw - 0.2rem) * 2.819), 4.8rem)!important;
        }
      }
      @media screen and (max-width: 781px) {
        & span[data-fontsize="3.2rem"] {
          margin-right: 7px;
          font-size: 2.1rem!important;
          letter-spacing: 0;
        }
      }
    }
    & p {
      font-size: clamp(1.545rem, 1.545rem + ((1vw - 0.2rem) * 3.537), 4.8rem)!important;
      & strong {
        font-weight: bold;
      }
    }
  }
  &.copy-right {
    & .copy-inner {
      margin-left: auto!important;
    }
  }
  &.copy-accent {
      & .has-custom-primary-color {
        font-size: 150%;
      }
  }
}

.service-link-list {
  position: relative;
  margin: 0; padding: 0;
  list-style: none;
  @media (min-width: 782px) {
    &::before {
      content: '';
      display: block;
      position: absolute;
      left: -100vw; top: 50%;
      -webkit-transform: translateY(-50%);
      transform: translateY(-50%);
      width: 300vw; height: 1px;
      background-color: #ddd;
    }
  }
  & li {
    position: relative;
    margin-top: 0; padding: 0;
    @media screen and (max-width: 781px) {
      margin-left: 20px;
      &:not(:first-of-type) {
        margin-top: 20px;
      }
      &::before {
        content: '';
        display: block;
        width: calc(20px + var(--wp--preset--spacing--30)); height: 1px;
        position: absolute;
        left: -40px; top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        background-color: #ddd;
      }
    }
    & a {
      display: inline-flex;
      padding: 15px 30px;
      border: 1px solid #ddd;
      border-radius: 10px;
      background-color: #f9f9fa;
      color: var(--wp--preset--color--custom-accent-gray);
      font-weight: 600;
      transition: all .3s;
      &:hover {
        background-color: #ffffff;
      }
    }
    &.current {
      @media screen and (max-width: 781px) {
        &::before {
          background-color: var(--wp--preset--color--custom-primary);
        }
      }
      & a {
        border-color: var(--wp--preset--color--custom-primary);
        background-color: #ededed;
        pointer-events: none;
        color: var(--wp--preset--color--accent-4);
      }
    }
  }
  @media (min-width: 782px) {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: center;
  }
}

.works-item-image {
  & img {
    max-width: 100%;
    aspect-ratio: revert-layer;
    height: max-content;
  }

}

.tp-separator-slide-item {
  overflow: hidden;
}


/* =========================
   Safari 安定化（共通）
   対象：figure / img / GSAP transform要素
========================= */
.fixed-center-image,
.fixed-right-image,
.fixed-left-image,
.fixed-far-left-image,
.fixed-far-right-image {
  /* 描画の安定化 */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;

  will-change: transform, clip-path;

  /* Safariでclip-pathが欠けるのを防ぐ */
  -webkit-clip-path: inherit;
  clip-path: inherit;
}

/* =========================
   figure 専用（重要）
========================= */
.fixed-far-right-image,
.fixed-far-left-image {
  overflow: hidden;              /* 中身のはみ出し対策 */
  position: relative;            /* clip-path安定 */
  contain: layout paint;         /* iOS Safariでの再描画安定 */
}

/* =========================
   figure 内の img
========================= */
.fixed-far-right-image img,
.fixed-far-left-image img {
  display: block;
  height: auto;
  max-width: 100%;

  /* imgの描画安定化 */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* =========================
   iOS Safari特有のチラつき対策
========================= */
@supports (-webkit-touch-callout: none) {
  .fixed-center-image,
  .fixed-right-image,
  .fixed-left-image,
  .fixed-far-left-image,
  .fixed-far-right-image {
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
  }
}
.addtoany_list {
  display: flex;
  gap: 10px;
}