@import "sass/font";
@import "sass/generals";

////////////  GENERAL BUTTON

html,
body {
  scroll-behavior: smooth;
}

.generalBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 15px 20px 10px 44px;
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  width: fit-content;
  border-radius: 200px;

  &::before {
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='17' viewBox='0 0 16 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.00008 1.33331H8.03833C9.57726 1.3333 10.7833 1.3333 11.7243 1.45981C12.6874 1.5893 13.4475 1.85953 14.044 2.45607C14.6405 3.05261 14.9108 3.81263 15.0403 4.77578C15.1668 5.71677 15.1668 6.9228 15.1667 8.46173V8.53823C15.1668 10.0772 15.1668 11.2832 15.0403 12.2242C14.9108 13.1873 14.6405 13.9473 14.044 14.5439C13.4475 15.1404 12.6874 15.4107 11.7243 15.5401C10.7833 15.6667 9.57726 15.6667 8.03833 15.6666H7.96183C6.4229 15.6667 5.21688 15.6667 4.27588 15.5401C3.31273 15.4107 2.55271 15.1404 1.95617 14.5439C1.35963 13.9473 1.08941 13.1873 0.959912 12.2242C0.833399 11.2832 0.833405 10.0772 0.833414 8.53823V8.49998C0.833414 8.22384 1.05727 7.99998 1.33341 7.99998C1.60956 7.99998 1.83341 8.22384 1.83341 8.49998C1.83341 10.0855 1.83448 11.2243 1.95099 12.0909C2.06558 12.9432 2.28351 13.457 2.66328 13.8368C3.04305 14.2166 3.55686 14.4345 4.40913 14.5491C5.27578 14.6656 6.4146 14.6666 8.00008 14.6666C9.58556 14.6666 10.7244 14.6656 11.591 14.5491C12.4433 14.4345 12.9571 14.2166 13.3369 13.8368C13.7167 13.457 13.9346 12.9432 14.0492 12.0909C14.1657 11.2243 14.1667 10.0855 14.1667 8.49998C14.1667 6.9145 14.1657 5.77568 14.0492 4.90903C13.9346 4.05676 13.7167 3.54295 13.3369 3.16318C12.9571 2.78341 12.4433 2.56548 11.591 2.45089C10.7244 2.33438 9.58556 2.33331 8.00008 2.33331C7.72394 2.33331 7.50008 2.10946 7.50008 1.83331C7.50008 1.55717 7.72394 1.33331 8.00008 1.33331Z' fill='%23004741'/%3E%3Cpath d='M7.68697 7.47976C7.88223 7.67502 7.88223 7.9916 7.68697 8.18687C7.49171 8.38213 7.17512 8.38213 6.97986 8.18687L1.83341 3.04042V5.39581C1.83341 5.67196 1.60956 5.89581 1.33341 5.89581C1.05727 5.89581 0.833414 5.67196 0.833414 5.39581V1.83331C0.833414 1.55717 1.05727 1.33331 1.33341 1.33331H4.89591C5.17206 1.33331 5.39591 1.55717 5.39591 1.83331C5.39591 2.10946 5.17206 2.33331 4.89591 2.33331H2.54052L7.68697 7.47976Z' fill='%23004741'/%3E%3C/svg%3E%0A");
    position: absolute;
    height: 17px;
    width: 16px;
    left: 20px;
    top: 0;
    bottom: 0;
    margin: auto;
    background-position: 0px 1px;
    background-repeat: no-repeat;
    background-size: contain;
  }
}

////////////  MOBILE MENU & SEARCH BAR

.backDropSubMeno {
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background-color: rgb(0 0 0 / 70%);
  backdrop-filter: blur(25px);
  z-index: 20;
  display: none;
}

.backDropSearch {
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background-color: rgb(0 0 0 / 72%);
  backdrop-filter: blur(10px);
  z-index: 100;
  display: none;
}

.menuMobilesection {
  z-index: 103;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: column;
  transform: translateX(100%);
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s linear;
  overflow: auto;

  .upSidebarMenumobile {
    display: flex;
    justify-content: end;
    width: 100%;
    padding: 40px;
  }

  .downerNav {
    width: 100%;
  }

  ul#menu-menu-mobile {
    padding: 0 32px;

    > li > a {
      font-size: 16px;
      font-weight: 500;
      line-height: 30px;

      a {
        font-size: 14px;
        font-weight: 300;
        line-height: 20px;
      }
    }

    ul {
      width: 100%;
      padding: 0 14px;
      display: none;
    }

    li {
      display: flex;
      justify-content: start;
      align-items: center;
      flex-wrap: wrap;

      > svg path {
        stroke: white;
        fill: white;
        transition: all 0.2s linear;
      }
    }

    a {
      padding: 12px 0;
      display: block;
      color: white !important;
      width: calc(100% - 40px);
      position: relative;

      &::before {
        content: "";
        position: absolute;
        height: 1px;
        width: 100%;
        margin: auto;
        background: #ffffff;
        background: linear-gradient(
          90deg,
          rgba(255, 255, 255, 0) 0%,
          rgb(78 78 78 / 50%) 50%,
          rgb(255 255 255 / 0%) 100%
        );
        bottom: 0;
        opacity: 0.5;
      }
    }

    svg {
      margin: auto;
    }
  }

  .menuSideBarMenumobile svg {
    transition: all 0.2s linear;
  }
}

#SearchsContainer {
  z-index: 103;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: column;
  transform: translateX(100%);
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s linear;
  overflow: auto;

  @include md {
    padding-right: 15px;
    padding-left: 15px;
  }

  input::placeholder,
  textarea::placeholder {
    font-size: 14px;
    font-weight: 300;
    color: white;
  }

  input#search-input {
    max-width: 846px;
    width: 100%;
    background-color: transparent;
    border: 0;
    outline: 0;
    border-bottom: 1px solid #ffffff;
    padding-bottom: 18px;
    padding-right: 44px;
    font-size: 20px;
    font-weight: 500;
    line-height: 25px;
    color: #ffffff4f;
  }

  span#closeSea {
    display: flex;
    justify-content: end;
    width: 100%;
    margin-bottom: 40px;
    margin-top: 80px;
    cursor: pointer;

    @include sm {
      margin-top: 24px;
    }

    svg path {
      transition: all 0.2s linear;
    }

    &:hover {
      svg path {
        fill: #d3ac69;
      }
    }
  }

  .searchResults {
    display: flex;
    justify-content: center;
    align-items: start;
    gap: 20px;
    margin-top: 64px;
    max-width: 846px;
    width: 100%;

    @include sm {
      flex-direction: column;
      margin-top: 32px;
      gap: 32px;
    }
  }

  .searchResultsChild {
    width: calc(50% - 10px);

    @include sm {
      width: 100%;
    }
  }

  .searchResultsHead {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }

  .searchResultsHead span {
    font-size: 20px;
    font-weight: 500;
    line-height: 25px;
    color: white;
  }

  .searchResultsHead a {
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    color: #d3ac69;
    transition: all 0.2s linear;

    &:hover {
      transform: translate(-4px, 0px);
    }
  }

  .search-item a span {
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;
    color: white;
    width: 55%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.2s linear;

    @include sm {
      max-width: 170px;
      font-size: 12px;
    }
  }

  .search-item a img {
    width: 33%;
    height: 100%;
    object-fit: cover;
    clip-path: polygon(12% 0, 100% 0, 100% 75%, 90% 100%, 0 100%, 0 30%);
    transition: all 0.2s linear;

    @include sm {
      width: 84px;
    }
  }

  .search-item a {
    display: flex;
    justify-content: start;
    align-items: center;
    padding: 12px 13px;
    height: 100%;
    width: 100%;
    gap: 11px;
    background-image: url("data:image/svg+xml,%3Csvg width='415' height='99' viewBox='0 0 415 99' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.66853 1L1 8.67677V98H406.331L414 90.3232V1H8.66853Z' stroke='white' stroke-opacity='0.3' stroke-width='0.666667'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;

    @include sm {
      background-image: url("data:image/svg+xml,%3Csvg width='288' height='74' viewBox='0 0 288 74' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.66853 1L1 8.67677V73H279.331L287 65.3232V1H8.66853Z' stroke='white' stroke-opacity='0.3' stroke-width='0.666667'/%3E%3C/svg%3E%0A");
      background-position: right;
    }

    &:hover {
      span {
        color: #d3ac69;
      }

      img {
        // filter: blur(10px);
      }
    }
  }

  .search-item {
    width: 100%;
    height: 97px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;

    @include sm {
      height: 72px;
      margin-bottom: 14px;
    }
  }

  .search-input-div {
    width: 100%;
    max-width: 846px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;

    svg {
      position: absolute;
      right: 2px;
      top: 0;
    }
  }
}

#SearchsContainer .searchResultsHead a svg {
  margin-right: 8px;
}

#SearchsContainer.active,
.menuMobilesection.active {
  transform: translateX(0%);
  opacity: 1;
  visibility: visible;
  transition: all 0.4s linear 0.5s;
}

////////////  HEADER ITEMS

.upperHeaderParent {
  position: relative;
  background-color: white;
  height: 72px;

  @include sm {
    height: 56px;
  }

  &::before {
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg width='264' height='26' viewBox='0 0 264 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M243.5 15.0024C235.5 25.5039 225.5 26 223 26H39C35.5 26 27 23.5029 21.5 14.9985C17.464 8.75786 9.5 0.00281292 0 0.00281292L263.773 0.00281116C263.853 -0.000924015 263.928 -0.00095007 264 0.00281116L263.773 0.00281116C260.325 0.164525 249.384 7.27875 243.5 15.0024Z' fill='%23ffffff'/%3E%3C/svg%3E");
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    bottom: -24.5px;
    width: 264px;
    max-width: 50%;
    max-height: 26px;
    height: 40%;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 10;
    background-position: center;

    @include sm {
      bottom: -17px;
    }
  }

  &::after {
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg width='264' height='26' viewBox='0 0 264 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M243.5 15.0024C235.5 25.5039 225.5 26 223 26H39C35.5 26 27 23.5029 21.5 14.9985C17.464 8.75786 9.5 0.00281292 0 0.00281292L263.773 0.00281116C263.853 -0.000924015 263.928 -0.00095007 264 0.00281116L263.773 0.00281116C260.325 0.164525 249.384 7.27875 243.5 15.0024Z' fill='%23004741'/%3E%3C/svg%3E");
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: 0;
    width: 264px;
    max-width: 50%;
    max-height: 26px;
    height: 40%;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top;

    @include sm {
    }
  }

  .logoSide {
    transform: translate(0px, 30px);
    z-index: 11;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    height: 48px;
    width: 118px;

    @include sm {
      height: 32px;
      width: 78px;
      transform: translate(0px, 19px);
    }

    a {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      width: 100%;

      svg,
      img {
        height: 100%;
        width: 100%;
        object-fit: contain;
      }
    }
  }

  .catalogSide,
  .searchSide {
    width: calc(50% - 132px);
    display: flex;
    align-items: center;
  }

  .searchSide {
    justify-content: start;
    position: relative;
    height: 40px;

    svg {
      position: absolute;
      right: 12px;
      bottom: 0;
      top: 0;
      margin: auto;
      z-index: 1;
    }

    input {
      position: absolute;
      height: 100%;
      border: 0;
      background-color: #f2f2f3;
      max-width: 320px;
      width: 85%;
      border-radius: 200px;
      padding: 12px 44px 11px;
      font-size: 14px;
      font-weight: 300;
      color: #68696e;
      outline: unset;
    }

    input::placeholder,
    textarea::placeholder {
      font-size: 14px;
      font-weight: 300;
      color: #68696e;
    }
  }

  .catalogSide {
    justify-content: end;

    .generalBtn {
      border: 1px solid #004741;
      color: #004741;
      background-color: white;

      &::before {
        background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_2034_10)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.99992 -0.166666C8.27606 -0.166666 8.49992 0.0571917 8.49992 0.333334V7.64837L9.62029 6.34127C9.8 6.13161 10.1157 6.10733 10.3253 6.28704C10.535 6.46675 10.5593 6.7824 10.3795 6.99206L8.37955 9.3254C8.28456 9.43622 8.14588 9.5 7.99992 9.5C7.85396 9.5 7.71528 9.43622 7.62029 9.3254L5.62029 6.99206C5.44058 6.7824 5.46486 6.46675 5.67452 6.28704C5.88419 6.10733 6.19984 6.13161 6.37955 6.34127L7.49992 7.64837V0.333334C7.49992 0.0571917 7.72378 -0.166666 7.99992 -0.166666ZM4.6638 4.50131C4.93994 4.49977 5.16504 4.72238 5.16658 4.99852C5.16812 5.27466 4.94551 5.49976 4.66937 5.5013C3.94037 5.50535 3.42365 5.52429 3.03148 5.59632C2.65361 5.66573 2.43489 5.77718 2.27259 5.93949C2.08808 6.12399 1.96779 6.38304 1.90202 6.87223C1.83431 7.37579 1.83325 8.0432 1.83325 9.00015V9.66681C1.83325 10.6238 1.83431 11.2912 1.90202 11.7947C1.96779 12.2839 2.08808 12.543 2.27259 12.7275C2.4571 12.912 2.71615 13.0323 3.20533 13.0981C3.7089 13.1658 4.37631 13.1668 5.33325 13.1668H10.6666C11.6235 13.1668 12.2909 13.1658 12.7945 13.0981C13.2837 13.0323 13.5427 12.912 13.7272 12.7275C13.9118 12.543 14.0321 12.2839 14.0978 11.7947C14.1655 11.2912 14.1666 10.6238 14.1666 9.66681V9.00015C14.1666 8.0432 14.1655 7.37579 14.0978 6.87223C14.0321 6.38304 13.9118 6.12399 13.7272 5.93949C13.5649 5.77718 13.3462 5.66573 12.9684 5.59632C12.5762 5.52429 12.0595 5.50535 11.3305 5.5013C11.0543 5.49976 10.8317 5.27466 10.8333 4.99852C10.8348 4.72238 11.0599 4.49977 11.336 4.50131C12.0571 4.50533 12.658 4.52258 13.149 4.61278C13.6543 4.7056 14.0844 4.88243 14.4344 5.23238C14.8356 5.63366 15.0082 6.13891 15.0889 6.73898C15.1666 7.31696 15.1666 8.05184 15.1666 8.96357V9.70339C15.1666 10.6151 15.1666 11.35 15.0889 11.928C15.0082 12.5281 14.8356 13.0333 14.4344 13.4346C14.0331 13.8359 13.5278 14.0085 12.9278 14.0891C12.3498 14.1668 11.6149 14.1668 10.7032 14.1668H5.29667C4.38494 14.1668 3.65006 14.1668 3.07208 14.0891C2.47201 14.0085 1.96676 13.8359 1.56549 13.4346C1.16421 13.0333 0.991612 12.5281 0.910935 11.928C0.833227 11.35 0.833239 10.6151 0.833252 9.7034V8.96356C0.833239 8.05184 0.833227 7.31696 0.910935 6.73898C0.991612 6.13891 1.16421 5.63366 1.56549 5.23238C1.91544 4.88243 2.34549 4.7056 2.85082 4.61278C3.34186 4.52258 3.94278 4.50533 4.6638 4.50131Z' fill='%23004741'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_2034_10'%3E%3Crect width='16' height='16' rx='5' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
      }
    }
  }

  .searchSide {
    input,
    svg {
      @include sm {
        display: none;
      }
    }
  }

  .catalogSide {
    @include sm {
      a {
        display: none;
      }
    }
  }
}

.downerHeaderParent {
  position: relative;
  background-color: #005d56;
}

.upperHeader,
.downerHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.upperHeader {
  height: 100%;
}

.downerHeader {
  @include sm {
    padding-bottom: 8px;
    padding-top: 8px;
  }

  .leftSide {
    display: flex;
    align-items: center;
    gap: 20px;

    @include sm {
      gap: 4px;
    }
  }

  .secondaryMenu ul#menu-menu-secondary {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
  }

  a.langBox {
    background-color: #004741;
    height: 32px;
    width: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;

    @include sm {
      height: 20px;
      width: 20px;

      svg {
        height: 6px;
        width: 11px;
      }
    }
  }

  .rightSide {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 8px;

    div#resSearchIcon,
    div#hambergerMenu {
      display: none;
      justify-content: center;
      align-items: center;

      @include sm {
        display: flex;
      }
    }
  }

  .numberBox {
    display: flex;
    justify-content: center;
    align-items: center;

    @include sm {
      display: none;
    }

    span {
      display: flex;
      justify-content: center;
      align-items: center;
      line-height: 22px;
      color: #d3ac69;
      font-size: 14px;
      font-weight: 600;
    }
  }

  .leftSide {
    .secondaryMenu {
      @include md {
        display: none;
      }
    }
  }

  .mobileEmergencyCall {
    display: none;
    justify-content: center;
    align-items: center;

    @include sm {
      display: flex;
    }
  }
}

.menuHeader {
  .menu-menu-primary-container,
  .menu-menu-secondary-container {
    @include sm {
      display: none;
    }

    > ul {
      display: flex;
      justify-content: start;
      align-items: center;
      gap: 20px;

      > li > a {
        font-size: 14px;
        line-height: 21px;
        font-weight: 300;
        transition: all 0.2s linear;
        color: white;
        &:hover {
          color: #d3ac69;
        }
      }

      > .menu-item-has-children > ul {
        opacity: 0;
        visibility: hidden;
        transition: all 0.2s linear;
        line-height: 40px;
        position: absolute;
        top: 52px;
        right: -12px;
        border-radius: 16px;
        border: 1px solid #005d5680;
        padding: 0 20px;
        width: 400px;
        background: rgb(0 93 86);
        z-index: 12;
      }

      > .menu-item-has-children li {
        > a {
          transition: all 0.2s linear;
          display: flex;
          align-items: center;
          justify-content: start;
          padding: 8px 0 8px 4px;
          font-size: 14px;
          line-height: 40px;
          font-weight: 300;
          color: white;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        &:hover {
          > a {
            color: #d3ac69;
          }
        }
      }
    }
  }

  .menu-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px;
    clip-path: polygon(20% 0, 100% 0, 100% 80%, 80% 100%, 0 100%, 0 20%);
    background-color: #d3ac69;
    margin-left: 12px;

    img {
      height: 100%;
      width: 100%;
      object-fit: cover;
    }
  }

  .menu-item-has-children {
    position: relative;
    margin-left: 20px;
    padding: 13px 0px;

    &:hover {
      &::before {
        transform: rotate(180deg) translate(0px, 6px);
      }

      > ul {
        opacity: 1 !important;
        visibility: visible !important;
      }
    }
  }
}

.menuHeader .menu-menu-primary-container > ul > .menu-item-has-children > svg {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  left: -16px;
}

.menuHeader .menu-menu-primary-container > ul > .menu-item-has-children {
  svg {
    transition: all 0.2s linear;

    path {
      transition: all 0.2s linear;
    }
  }

  &:hover {
    > a {
      color: #d3ac69;
    }

    > svg {
      transform: rotate(180deg);

      path {
        stroke: #d3ac69;
      }
    }
  }
}

////////////  FOOTER

footer#colophon {
  background-color: #004f49;
  padding-top: 66px;
  padding-bottom: 80px;
  margin-top: 160px;
  position: relative;

  @include sm {
    padding-top: 60px;
    padding-bottom: 50px;
  }

  &::before {
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg width='264' height='26' viewBox='0 0 264 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M243.5 15.0024C235.5 25.5039 225.5 26 223 26H39C35.5 26 27 23.5029 21.5 14.9985C17.464 8.75786 9.5 0.00281292 0 0.00281292L263.773 0.00281116C263.853 -0.000924015 263.928 -0.00095007 264 0.00281116L263.773 0.00281116C260.325 0.164525 249.384 7.27875 243.5 15.0024Z' fill='%23ffffff'/%3E%3C/svg%3E");
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 0px;
    width: 264px;
    max-width: 50%;
    max-height: 26px;
    height: 40%;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 10;
    background-position: top;
    transform: rotate(180deg);

    @include sm {
      bottom: -1px;
    }
  }

  &::after {
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg width='264' height='26' viewBox='0 0 264 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M243.5 15.0024C235.5 25.5039 225.5 26 223 26H39C35.5 26 27 23.5029 21.5 14.9985C17.464 8.75786 9.5 0.00281292 0 0.00281292L263.773 0.00281116C263.853 -0.000924015 263.928 -0.00095007 264 0.00281116L263.773 0.00281116C260.325 0.164525 249.384 7.27875 243.5 15.0024Z' fill='%23ffffff'/%3E%3C/svg%3E");
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: 0;
    width: 264px;
    max-width: 50%;
    max-height: 26px;
    height: 40%;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top;

    @include sm {
      top: -1px;
    }
  }

  .mainFooterBox {
    display: flex;
    justify-content: space-between;
    align-items: start;
    flex-wrap: wrap;

    .footerItemsTitle {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 18px;
      line-height: 32px;
      font-weight: 500;
      margin-bottom: 32px;
      color: white;

      h4 {
        font-size: 18px;
        line-height: 32px;
        font-weight: 500;
      }

      svg {
        display: none;

        @include sm {
          display: block;
        }
      }
    }

    .footerItems2 {
      width: 12%;

      @include sm {
        width: 100%;
      }
    }

    .footerItems {
      li {
        display: flex;
        justify-content: start;
        align-items: center;
        gap: 12px;
        margin-bottom: 24px;
        width: fit-content;

        &:last-child {
          margin-bottom: 0px;
        }

        a,
        p {
          font-size: 16px;
          line-height: 32px;
          font-weight: 300;
          transition: all 0.3s linear;
          color: white;

          &:hover {
            color: #d3ac69;
          }
        }
      }
    }

    .footerItems1 > svg {
      position: absolute;
      top: -30px;
      left: 0;
      right: 0;
      margin: auto;
      z-index: 2;
      height: 48px;
      width: 118px;
      object-fit: contain;

      @include sm {
        height: 40px;
        width: 78px;
      }
    }

    .footerItems1 {
      width: 32.2%;

      @include sm {
        width: 100%;
      }

      > p {
        color: white;
        line-height: 36px;
        font-size: 14px;
        text-align: justify;
        font-weight: 300;

        @include sm {
          text-align: center;
          line-height: 26px;
        }
      }

      .footerSocialMedia {
        display: flex;
        justify-content: start;
        align-items: center;
        gap: 12px;
        margin-top: 24px;

        @include sm {
          margin-top: 44px;
          margin-bottom: 32px;
          justify-content: center;
        }

        a {
          height: 40px;
          width: 40px;
          background: white;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 50%;
          transition: all 0.3s linear;

          path {
            fill: #d3ac69;
            transition: all 0.3s linear;
          }

          &:hover {
            background: #d3ac69;

            path {
              fill: white;
            }
          }
        }
      }
    }

    .footerItems3 {
      width: 30%;

      @include sm {
        width: 100%;
      }
    }
  }

  @include sm {
    .footerItems {
      margin-bottom: 16px;

      &:last-child,
      &:first-child {
        margin-bottom: 0px;
      }

      .footerItemsTitle {
        padding: 14px;
        margin-bottom: 0px;
        background-color: #d3ac69;
        border-radius: 16px;
        color: #020014;

        h4 {
          font-size: 12px;
          line-height: 22px;
          font-weight: 400;
        }

        svg path {
          stroke: #020014;
        }
      }

      > ul {
        display: none;
      }
    }

    .footerItems ul li {
      width: 100% !important;
      margin-bottom: 8px !important;
      margin-top: 8px;
      padding: 14px;
      padding-left: 34px;
      border-radius: 16px;
      background: #d3ac69c7;
      position: relative;

      &::before {
        content: "";
        position: absolute;
        content: "";
        position: absolute;
        width: 16px;
        height: 16px;
        left: 16px;
        bottom: 0;
        top: 0;
        margin: auto;
        background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.3332 8H2.6665M2.6665 8L6.6665 4M2.6665 8L6.6665 12' stroke='%23020014' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      }

      svg {
        height: 16px;
        width: 16px;
      }

      a,
      p {
        color: #020014 !important;
        font-size: 12px !important;
        line-height: 22px !important;
        font-weight: 400 !important;
      }

      &:not(:first-child) {
        path,
        circle {
          stroke: #020014;
        }
      }

      &:first-child {
        path {
          fill: #020014;
        }
      }
    }
  }
}

.copyrightBack {
  .copyright {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding-bottom: 16px;
    padding-top: 16px;

    @include sm {
      flex-direction: column-reverse;
      padding-top: 0;
      padding-bottom: 16px;
      gap: 8px;
      text-align: center;
    }

    > p {
      color: #212121;
      line-height: 28px;
      font-weight: 300;
      font-size: 14px;

      span {
        color: #d3ac69;
      }
    }

    .payamAva {
      display: flex;
      justify-content: end;
      align-items: center;
      font-size: 10px;
      color: white;
      gap: 8px;
      width: 33%;
      line-height: 30px;
      font-weight: 300;

      @include sm {
        width: 100%;
        justify-content: center;
        font-size: 10px;
      }
    }
  }
}

////////////  BLOG CARD STYLE

.postCardHome {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  padding: 8px 8px 16px;
  border-radius: 32px;
  background-color: #fafafa;
  border: 1px solid transparent;
  transition: all 0.3s linear;

  @include sm {
    border-radius: 16px;
  }

  .postCardHomeImage {
    height: 224px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 26px;
    overflow: hidden;
    width: 100%;
    margin-bottom: 16px;
    position: relative;

    &::after {
      content: "";
      background-color: color(srgb 0 0 0 / 0.2);
      background-image: url("data:image/svg+xml,%3Csvg width='119' height='48' viewBox='0 0 119 48' fill='none' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cmask id='mask0_2887_934' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='119' height='37'%3E%3Crect x='0.175781' width='117.891' height='36.3515' fill='url(%23pattern0_2887_934)'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_2887_934)'%3E%3Crect x='0.175781' width='117.891' height='36.3515' fill='%23004741'/%3E%3C/g%3E%3Cmask id='mask1_2887_934' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='38' width='119' height='10'%3E%3Crect x='0.175781' y='38.7615' width='117.891' height='9.23849' fill='url(%23pattern1_2887_934)'/%3E%3C/mask%3E%3Cg mask='url(%23mask1_2887_934)'%3E%3Crect x='0.175781' y='38.7615' width='117.891' height='9.23849' fill='%23D3AC69'/%3E%3C/g%3E%3Cdefs%3E%3Cpattern id='pattern0_2887_934' patternContentUnits='objectBoundingBox' width='1' height='1'%3E%3Cuse xlink:href='%23image0_2887_934' transform='matrix(0.00170358 0 0 0.00552486 0 -0.127072)'/%3E%3C/pattern%3E%3Cpattern id='pattern1_2887_934' patternContentUnits='objectBoundingBox' width='1' height='1'%3E%3Cuse xlink:href='%23image0_2887_934' transform='matrix(0.00170358 0 0 0.0217391 0 -4.47826)'/%3E%3C/pattern%3E%3Cimage id='image0_2887_934' width='587' height='275' preserveAspectRatio='none' xlink:href='data:image/png;base64, '/%3E%3C/defs%3E%3C/svg%3E%0A");
      height: 100%;
      width: 100%;
      position: absolute;
      background-repeat: no-repeat;
      background-size: 104px;
      background-position: center;
      backdrop-filter: blur(11px);
      transition: all 0.3s linear;
      visibility: hidden;
      opacity: 0;
    }

    // &::before {
    //   content: "";
    //   background-image: url(../img/arm.png);
    //   height: 100%;
    //   width: 100%;
    // }

    @include sm {
      height: 153px;
      border-radius: 12px;
    }

    img {
      height: 100%;
      width: 100%;
      object-fit: cover;
    }
  }

  .blogCardTitles {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0px 8px;
    width: 100%;

    h4 {
      font-size: 18px;
      font-weight: 400;
      line-height: 40px;
      color: #212121;
      transition: all 0.3s linear;
    }
  }

  .blogCardtext {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0px 8px;
    width: 100%;
    font-weight: 300;
    line-height: 30px;
    font-size: 14px;
    color: #68696e;
    margin-bottom: 12px;

    @include sm {
      margin-bottom: 16px;
    }
  }

  .postDateParent {
    padding: 0px 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;

    .postDate {
      display: flex;
      justify-content: start;
      align-items: center;
      gap: 8px;
      font-weight: 300;
      line-height: 28px;
      color: #212121;
      font-size: 14px;

      svg {
        margin-top: -6px;
      }
    }

    .aboutUseSide {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 8px;
      font-weight: 300;
      line-height: 28px;
      color: #008f83;
      font-size: 14px;
      visibility: hidden;
      opacity: 0;
      transition: all 0.3s linear;
    }
  }

  &:hover {
    background-color: #ffffff;
    border-color: #008f83;

    .blogCardTitles {
      h4 {
        color: #008f83;
      }
    }

    .aboutUseSide {
      visibility: visible;
      opacity: 1;
    }

    .postCardHomeImage {
      &::after {
        visibility: visible;
        opacity: 1;
      }
    }
  }
}

////////////  PRODUCT CARD STYLE

.productCardHome {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: #fafafa;
  border-radius: 32px;
  padding: 16px 16px 24px;
  transition: all 0.3s linear;
  border: 1px solid transparent;

  @include xs {
    border-radius: 16px;
    padding: 16px;
  }

  .productCardHomeImage {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 381px;
    width: 100%;

    @include sm {
      height: 264px;
    }

    img {
      height: 100%;
      width: 100%;
      border-radius: 24px;
      background: white;
      object-fit: cover;

      @include xs {
        border-radius: 16px;
      }
    }
  }

  .mergeTitles {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    margin: 24px auto 16px;
    padding: 0 8px;

    @include xs {
      margin: 12px auto 12px;
    }

    h4 {
      font-size: 24px;
      line-height: 36px;
      font-weight: 500;
      color: #020014;
      transition: all 0.3s linear;

      @include xs {
        font-size: 20px;
      }
    }
  }

  .featuresList {
    display: flex;
    justify-content: start;
    width: 100%;
    align-items: center;
    margin: 0px auto 16px;
    gap: 8px;
    flex-wrap: wrap;
    padding: 0 8px;

    @include xs {
      gap: 4px;
      margin: 0px auto 12px;
    }

    span {
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #f2f6f5;
      color: #004741;
      border-radius: 100px;
      padding: 6px 12px;
      font-size: 14px;
      font-weight: 300;
      line-height: 21px;

      @include xs {
        padding: 4px 8px;
        font-size: 10px;
      }
    }
  }

  .aboutUseSide {
    font-size: 14px;
    line-height: 22px;
    border: 1px solid #008f83;
    border-radius: 200px;
    color: #008f83;
    padding: 13px 24px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    transition: all 0.3s linear;
    background-color: #ffffff;
  }

  &:hover {
    background-color: white;
    border: 1px solid #008f83;

    .mergeTitles {
      h4 {
        &:first-child {
          color: #008f83;
        }

        &:last-child {
          color: #bd8c37;
        }
      }
    }

    .aboutUseSide {
      color: #ffffff;
      background-color: #008f83;
    }
  }
}

////////////  BLOG PAGE & PRODUCT PAGE

.archiveBlogParent {
  margin-top: 80px;
  display: flex;
  justify-content: start;
  align-items: center;
  flex-wrap: wrap;
  gap: 40px 20px;

  @include sm {
    margin-top: 40px;
    gap: 16px 16px;
  }

  .postCardHome,
  .productCardHome {
    width: calc(33.3% - 13px);

    @include md {
      width: calc(50% - 10px);
    }

    @include xs {
      width: 100%;
    }
  }
}

.content-item-pruduct {
  display: none;
}

.content-item-pruduct.active {
  display: flex !important;
}

.product-tabs-archive {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: -60px;
  position: relative;
  z-index: 10;

  @include sm {
    margin-top: 16px;
    flex-direction: column;
  }

  .productCategoryItems {
    display: flex;
    align-items: center;
    width: calc(32% - 14px);
    max-width: 305px;
    justify-content: start;
    padding: 24px;
    gap: 24px;
    background-color: #fafafa;
    border-radius: 32px;
    transition: all 0.3s linear;
    border: 1px solid transparent;
    cursor: pointer;

    @include sm {
      width: 100%;
      max-width: unset;
      padding: 8px;
      gap: 16px;
      border-radius: 16px;
    }

    .productCatImage {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 72px;
      width: 72px;
      background-color: white;
      border-radius: 100%;
      transition: all 0.3s linear;

      @include sm {
        height: 50px;
        width: 50px;
      }

      svg {
        height: 48px;
        width: 48px;

        @include sm {
          height: 30px;
          width: 30px;
        }
      }
    }

    .productCatText h4 {
      font-size: 18px;
      font-weight: 400;
      line-height: 40px;
      color: #212121;
      transition: all 0.3s linear;

      @include sm {
        font-size: 16px;
      }
    }

    .productCatText span {
      font-size: 14px;
      font-weight: 300;
      line-height: 32px;
      color: #68696e;
      transition: all 0.3s linear;

      @include sm {
        font-size: 13px;
      }
    }

    &:hover {
      border: 1px solid #004741;

      .productCatImage {
        background-color: #004741;
      }

      h4 {
        color: #004741;
      }
    }
  }
}

.productCategoryItems.tab-item-product.active {
  border: 1px solid #004741;

  .productCatImage {
    background-color: #004741;
  }
}

////////////  BLOG PAGINATION

.sitePagination ul.page-numbers {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 40px 0 160px;
  gap: 8px;
  padding: 0;

  @include sm {
    margin-top: 32px;
    margin: 40px 0 80px;
  }
}

.sitePagination ul.page-numbers a,
.sitePagination ul.page-numbers span {
  width: 44px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 12px;
  color: #020014;
  transition: all 0.3s ease-in-out;
  font-size: 20px;
  font-weight: 500;
  line-height: 31px;
}

.sitePagination ul.page-numbers .current {
  background-color: #008f83;
  transition: all 0.3s ease-in-out;
  color: #ffffff;
}

ul.page-numbers li svg path {
  transition: all 0.3s ease-in-out;
}

ul.page-numbers li {
  list-style: none;
}

////////////  ENTRY CONTENT STYLE

.entry-content {
  h2 {
    color: #212121;
    transition: all 0.3s ease-in-out;
    font-size: 24px;
    line-height: 36px;
    margin: 0;
    font-weight: 500;
    margin-bottom: 14px;

    @include sm {
      font-size: 18px;
    }
  }

  > p {
    color: #212121;
    transition: all 0.3s ease-in-out;
    font-size: 16px;
    margin: 0;
    line-height: 32px;
    font-weight: 300;
    margin-bottom: 32px;
    text-align: justify;
  }

  p {
    &:has(img) {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 32px auto;
      height: 264px;
      gap: 20px;

      @include sm {
        flex-direction: column;
        height: 345px;
        gap: 16px;
      }

      img {
        width: calc(50% - 10px);
        height: 100%;
        object-fit: cover;

        @include sm {
          height: calc(50% - 8px);
          width: 100%;
        }

        border-radius: 32px;
      }
    }
  }

  blockquote {
    position: relative;
    margin: 70px auto 48px;

    &::before {
      content: "";
      background-image: url("data:image/svg+xml,%3Csvg width='53' height='53' viewBox='0 0 53 53' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M35.2129 41.0791C33.3891 41.0791 31.7856 40.3927 30.5186 39.0801C29.2543 37.7703 28.6172 36.1433 28.6172 34.3184L28.6172 16.8613C28.6172 14.8843 28.9903 12.9834 29.7383 11.1748C30.4281 9.50702 31.3571 8.02592 32.5303 6.74902L32.7686 6.49609C34.0556 5.16267 35.5756 4.11151 37.3096 3.3418C39.0741 2.55864 40.9351 2.16504 42.873 2.16504H44.4043C45.3953 2.16504 46.2628 2.56777 46.9189 3.24609L46.9209 3.24707C47.5779 3.9277 47.9364 4.79634 47.9365 5.75195V8.92676C47.9365 9.88348 47.5777 10.7513 46.9209 11.4316L46.9199 11.4326C46.2631 12.1123 45.3943 12.5137 44.4043 12.5137H42.873C41.7354 12.5137 40.8064 12.9052 39.9785 13.7627C39.1486 14.623 38.7452 15.618 38.7451 16.8613V17.6543C38.7451 17.8143 38.7787 17.8737 38.8535 17.9512V17.9521C38.9082 18.0088 38.9385 18.0208 38.9424 18.0225C38.9471 18.0245 38.9736 18.0352 39.043 18.0352H44.4043C46.1145 18.0352 47.6306 18.6392 48.8574 19.7959L49.0986 20.0352C50.3632 21.3451 50.9999 22.9714 51 24.7959V34.3184C51 36.1432 50.3626 37.7692 49.0986 39.0791V39.0801C47.8315 40.3923 46.2286 41.0791 44.4043 41.0791H35.2129ZM8.5957 50.165C6.77186 50.165 5.16915 49.4782 3.90234 48.166C2.63665 46.8558 2.00035 45.2286 2 43.4043V25.9473C2 24.0937 2.32798 22.3068 2.98535 20.6006L3.12109 20.2607C3.85664 18.4817 4.86504 16.9148 6.15137 15.582C7.43848 14.2487 8.95861 13.1975 10.6924 12.4277V12.4268C12.457 11.6437 14.3172 11.251 16.2549 11.251H17.7871C18.7766 11.251 19.6467 11.6523 20.3037 12.333V12.334C20.9602 13.0142 21.3193 13.882 21.3193 14.8379V18.0127C21.3193 18.9698 20.9603 19.8376 20.3037 20.5176C19.6465 21.1985 18.7764 21.5996 17.7871 21.5996H16.2549C15.1172 21.5997 14.1891 21.9912 13.3613 22.8486C12.5311 23.709 12.127 24.7039 12.127 25.9473V26.7402C12.127 26.899 12.1609 26.9589 12.2373 27.0381V27.0391C12.29 27.0934 12.3194 27.1054 12.3242 27.1074C12.328 27.109 12.3542 27.1211 12.4258 27.1211H17.7871C19.4975 27.1211 21.0136 27.7249 22.2402 28.8818L22.4814 29.1211C23.7456 30.4309 24.3828 32.0572 24.3828 33.8818V43.4043C24.3827 45.2289 23.7454 46.8551 22.4814 48.165L22.2402 48.4043C21.0135 49.5614 19.4974 50.165 17.7871 50.165H8.5957Z' fill='%23008f83' stroke='white' stroke-width='4'/%3E%3C/svg%3E");
      position: absolute;
      height: 53px;
      width: 53px;
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      top: -28px;
      left: 0;
      right: 0;
      margin: auto;
      z-index: 1;
      transition: all 0.3s ease-in-out;
    }

    p {
      color: #212121;
      font-size: 16px;
      line-height: 32px;
      font-weight: 400;
      padding: 40px 115px 37px;
      background-color: #fafafa;
      transition: all 0.3s ease-in-out;
      text-align: center;
      border-radius: 24px;

      @include sm {
        padding: 40px 16px 24px;
      }
    }
  }

  ul li,
  ol li {
    color: #212121;
    transition: all 0.3s ease-in-out;
    font-size: 16px;
    line-height: 32px;
    font-weight: 500;
    margin-bottom: 12px;

    &::marker {
      font-size: 18px;
      color: #008f83;
    }
  }

  ul,
  ol {
    padding-right: 30px;
    margin: 48px 0;
  }

  ul li {
    list-style: circle;
  }

  ol li {
    list-style: persian;
  }
}

////////////  SINGLE BLOG STYLE

.singlePageParent
  .mainSinglepage
  .sidebarSinglePage
  .listSide
  .listSideItem
  svg {
  transform: rotate(-45deg);
}

.singlePageParent {
  .mainSinglepage {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 20px;
    flex-direction: row-reverse;

    @include sm {
      flex-direction: column;
    }

    .singleContentSide {
      width: calc(100% - 305px);

      @include sm {
        width: 100%;
      }

      h1.entry-title-single {
        margin-bottom: 20px;
        font-size: 32px;
        line-height: 40px;
        font-weight: bold;
        color: #212121;
        transition: all 0.3s ease-in-out;

        @include sm {
          font-size: 28px;
        }
      }

      .additionalSingle {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 20px 0;
        gap: 24px;

        > div {
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 8px;
          font-size: 16px;
          line-height: 20px;
          font-weight: 300;
        }

        .shareButtons {
          @include sm {
            display: none;
          }
        }

        .catSide {
          margin-left: auto;
        }
      }

      .single-thumbnail {
        width: 100%;
        height: 536px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 20px auto 32px;

        @include sm {
          height: 170px;
          margin-bottom: 16px;
        }

        > img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 48px;

          @include sm {
            border-radius: 24px;
          }
        }

        > div {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100%;
          width: 100%;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 48px;

            @include sm {
              border-radius: 24px;
            }
          }
        }
      }

      .res-shareButtons {
        display: none;

        @include sm {
          display: block;
        }

        .product-share-buttons {
          margin: auto !important;
        }
      }
    }

    .sidebarSinglePage {
      width: 305px;

      @include sm {
        width: 100%;
      }

      .listSide {
        @include sm {
          display: none;
        }

        .post-headings {
          background-color: #fafafa;
          padding: 24px 20px 8px;
          margin-bottom: 20px;
          border-radius: 24px;

          .tabelBarContent {
            padding: 16px 0;
            text-align: center;
            background-color: #008f83;
            margin-bottom: 24px;
            border-radius: 16px;

            span {
              font-size: 18px;
              font-weight: 500;
              line-height: 24px;
              color: #ffffff;
            }
          }

          ul.listTableContent {
            padding-right: 0px;
            margin: 0;

            li {
              list-style: disc;
              margin-bottom: 24px;
              font-size: 14px;
              font-weight: 300;
              line-height: 21px;
              color: #212121;
              transition: all 0.3s ease-in-out;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
              overflow: hidden;
              text-overflow: ellipsis;

              &:last-child {
                margin-bottom: 10px;
              }

              a {
                font-size: 14px;
                line-height: 24px;
                font-weight: 500;
                color: #212121;
                transition: all 0.3s ease-in-out;
              }

              &:hover {
                a {
                  color: #008f83;
                }
              }
            }
          }
        }

        .listSideItem {
          background-color: #fafafa;
          transition: all 0.3s ease-in-out;
          padding: 18px 24px 17px 16px;
          margin: 20px 0;
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-radius: 16px;

          svg path {
            fill: #212121;
            transition: all 0.3s ease-in-out;
          }

          a {
            font-size: 14px;
            line-height: 24px;
            font-weight: 500;
            color: #212121;
          }

          &:hover {
            background-color: #008f83 !important;

            a {
              color: white !important;
            }

            svg path {
              fill: #ffffff;
            }
          }
        }
      }

      .listSideArchive {
        background-color: #212121;
        transition: all 0.3s ease-in-out;
        padding: 0 20px 20px;
        margin-bottom: 20px;
        border-radius: 24px;

        @include sm {
          display: none;
        }

        .listSideArchiveHead {
          padding: 12px 0;
          text-align: center;
          background-color: #008f83;
          margin: 0 20px 24px;
          border-radius: 0px 0px 20px 20px;

          span,
          div {
            color: white;
          }
        }

        .listSideArchiveItem {
          padding: 24px 0;
          border-bottom: 1px solid #e0e0e0;
        }
      }
    }
  }
}

.listSideUnderThumb {
  display: none;

  @include sm {
    display: block;
  }

  .quikAccess.extra-quikAccess,
  .filter-archive-project-extra {
    color: white;

    .extra-tab-title {
      background-color: #d3ac69 !important;
      color: #212121 !important;
    }
    svg {
      path {
        stroke: #212121;
      }
    }

    li {
      background-color: rgb(231 206 163) !important;
      padding: 20px 20px 20px;
      margin-bottom: 10px;
      border-radius: 16px;
      a {
        color: #212121;
      }
    }

    ul {
      border-top: 1px solid rgb(255 255 255 / 12%);
    }
  }
}

.listSideUnderThumb > div {
  margin: 16px auto;
}

.listSideUnderThumb {
  margin-bottom: 34px;

  @include sm {
    margin-bottom: 0;
  }
}

.extra-tab-buttons-project,
.extra-tab-buttons-blog,
.extra-quikAccess,
.extra-post-headings,
.archive-project-extra,
.filter-archive-project-extra {
  position: relative;
  width: 100%;
  display: none;

  @include sm {
    display: block;
  }

  path {
    stroke: white;
  }

  .extra-tab-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: #008f83;
    border-radius: 16px;
    color: white;
  }

  .extra-tab-title svg {
    transition: all 0.3s linear;
    path {
      transition: all 0.3s linear;
    }
  }

  ul {
    margin-top: 10px;
    display: none;
  }
}

.post-headings.extra-post-headings {
  ul.listTableContent {
    li {
      padding: 20px 20px 20px;
      background-color: rgb(0 71 65);
      margin-bottom: 10px;
      border-radius: 16px;

      a {
        font-size: 14px;
        line-height: 20px;
        font-weight: 300;
        color: white;
      }
    }
  }
}

////////////  404 PAGE STYLE

.responsiveBreadCramp {
  display: none;
  margin-top: 16px;

  .rankMathBC404,
  .rankMathBC {
    p {
      display: flex;
      justify-content: start;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
    }

    a,
    span {
      color: #004741;
      font-size: 14px;
      line-height: 21px;
      font-weight: 400;
      opacity: 0.3;
    }

    span.last,
    span.separator {
      opacity: 1;
    }

    span.separator {
      position: relative;
      color: transparent;
      width: 16px;

      &::before {
        content: "";
        background-image: url("data:image/svg+xml,%3Csvg width='16' height='17' viewBox='0 0 16 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='0.3'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.02055 4.14645C7.21581 4.34171 7.21581 4.65829 7.02055 4.85355L3.8741 8H13.3337C13.6098 8 13.8337 8.22386 13.8337 8.5C13.8337 8.77614 13.6098 9 13.3337 9H3.8741L7.02055 12.1464C7.21581 12.3417 7.21581 12.6583 7.02055 12.8536C6.82528 13.0488 6.5087 13.0488 6.31344 12.8536L2.31344 8.85355C2.11818 8.65829 2.11818 8.34171 2.31344 8.14645L6.31344 4.14645C6.5087 3.95118 6.82528 3.95118 7.02055 4.14645Z' fill='%23004741'/%3E%3C/g%3E%3C/svg%3E%0A");
        position: absolute;
        height: 17px;
        width: 16px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        top: 0;
        bottom: 0;
        margin: auto;
      }
    }
  }

  @include sm {
    display: block;
  }
}

.error-not-found-parent {
  display: flex;
  justify-content: start;
  align-items: start;
  position: relative;
  height: 256px;
  margin-top: 40px;
  border-radius: 64px;
  overflow: hidden;

  @include sm {
    height: 220px;
    margin-top: 13px;
  }

  @include xs {
    height: 120px;
  }

  @include xxs {
    height: 100px;
  }

  .rankMathBC404 {
    padding: 40px;

    > p {
      display: flex;
      justify-content: start;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
    }

    a,
    span {
      color: #004741;
      font-size: 14px;
      line-height: 21px;
      font-weight: 400;
      opacity: 0.3;
    }

    span.last,
    span.separator {
      opacity: 1;
    }

    span.separator {
      position: relative;
      color: transparent;
      width: 16px;

      &::before {
        content: "";
        background-image: url("data:image/svg+xml,%3Csvg width='16' height='17' viewBox='0 0 16 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='0.3'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.02055 4.14645C7.21581 4.34171 7.21581 4.65829 7.02055 4.85355L3.8741 8H13.3337C13.6098 8 13.8337 8.22386 13.8337 8.5C13.8337 8.77614 13.6098 9 13.3337 9H3.8741L7.02055 12.1464C7.21581 12.3417 7.21581 12.6583 7.02055 12.8536C6.82528 13.0488 6.5087 13.0488 6.31344 12.8536L2.31344 8.85355C2.11818 8.65829 2.11818 8.34171 2.31344 8.14645L6.31344 4.14645C6.5087 3.95118 6.82528 3.95118 7.02055 4.14645Z' fill='%23004741'/%3E%3C/g%3E%3C/svg%3E%0A");
        position: absolute;
        height: 17px;
        width: 16px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        top: 0;
        bottom: 0;
        margin: auto;
      }
    }

    @include sm {
      display: none;
    }
  }

  img {
    position: absolute;
    height: 100%;
    width: calc(100% - 30px);
    object-fit: cover;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: -1;
    border-radius: 64px;

    @include xs {
      border-radius: 24px;
    }
  }
}

img.main404Image {
  margin: -176px auto 18px;
  display: block;
  width: 80%;
  max-width: 1064px;

  @include sm {
    margin: -136px auto 18px;
  }

  @include xs {
    margin: -82px auto 18px;
  }

  @include xxs {
    margin: -65px auto 18px;
  }
}

.error-404-not-found-content {
  margin: auto;
  width: fit-content;
  text-align: center;

  h4 {
    font-size: 24px;
    line-height: 38px;
    font-weight: 500;
    margin-bottom: 10px;
    color: #212121;

    @include xs {
      font-size: 20px;
      line-height: 32px;
      margin-bottom: 12px;
    }
  }

  p {
    font-size: 26px;
    line-height: 40px;
    font-weight: 300;
    margin-bottom: 34px;
    color: #212121;

    @include xs {
      font-size: 22px;
      line-height: 32px;
      margin-bottom: 24px;
    }
  }

  a {
    margin: auto;
    background: #004741;
    color: white;

    &::before {
      background-image: url("data:image/svg+xml,%3Csvg width='16' height='17' viewBox='0 0 16 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.00008 1.33331H8.03833C9.57726 1.3333 10.7833 1.3333 11.7243 1.45981C12.6874 1.5893 13.4475 1.85953 14.044 2.45607C14.6405 3.05261 14.9108 3.81263 15.0403 4.77578C15.1668 5.71677 15.1668 6.9228 15.1667 8.46173V8.53823C15.1668 10.0772 15.1668 11.2832 15.0403 12.2242C14.9108 13.1873 14.6405 13.9473 14.044 14.5439C13.4475 15.1404 12.6874 15.4107 11.7243 15.5401C10.7833 15.6667 9.57726 15.6667 8.03833 15.6666H7.96183C6.4229 15.6667 5.21688 15.6667 4.27588 15.5401C3.31273 15.4107 2.55271 15.1404 1.95617 14.5439C1.35963 13.9473 1.08941 13.1873 0.959912 12.2242C0.833399 11.2832 0.833405 10.0772 0.833414 8.53823V8.49998C0.833414 8.22384 1.05727 7.99998 1.33341 7.99998C1.60956 7.99998 1.83341 8.22384 1.83341 8.49998C1.83341 10.0855 1.83448 11.2243 1.95099 12.0909C2.06558 12.9432 2.28351 13.457 2.66328 13.8368C3.04305 14.2166 3.55686 14.4345 4.40913 14.5491C5.27578 14.6656 6.4146 14.6666 8.00008 14.6666C9.58556 14.6666 10.7244 14.6656 11.591 14.5491C12.4433 14.4345 12.9571 14.2166 13.3369 13.8368C13.7167 13.457 13.9346 12.9432 14.0492 12.0909C14.1657 11.2243 14.1667 10.0855 14.1667 8.49998C14.1667 6.9145 14.1657 5.77568 14.0492 4.90903C13.9346 4.05676 13.7167 3.54295 13.3369 3.16318C12.9571 2.78341 12.4433 2.56548 11.591 2.45089C10.7244 2.33438 9.58556 2.33331 8.00008 2.33331C7.72394 2.33331 7.50008 2.10946 7.50008 1.83331C7.50008 1.55717 7.72394 1.33331 8.00008 1.33331Z' fill='white'/%3E%3Cpath d='M7.68697 7.47976C7.88223 7.67502 7.88223 7.9916 7.68697 8.18687C7.49171 8.38213 7.17512 8.38213 6.97986 8.18687L1.83341 3.04042V5.39581C1.83341 5.67196 1.60956 5.89581 1.33341 5.89581C1.05727 5.89581 0.833414 5.67196 0.833414 5.39581V1.83331C0.833414 1.55717 1.05727 1.33331 1.33341 1.33331H4.89591C5.17206 1.33331 5.39591 1.55717 5.39591 1.83331C5.39591 2.10946 5.17206 2.33331 4.89591 2.33331H2.54052L7.68697 7.47976Z' fill='white'/%3E%3C/svg%3E%0A");
    }
  }
}

////////////  GLOBAL HEADER STYLE

.titlePageCustome {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  position: relative;
  height: 256px;
  margin-top: 40px;
  border-radius: 64px;
  overflow: hidden;

  @include sm {
    height: 220px;
    margin-top: 13px;
    justify-content: center;
    border-radius: 24px;
  }

  @include xs {
    height: 160px;
  }

  .titlePageCustomeIMG {
    position: absolute;
    height: 100%;
    width: calc(100% - 30px);
    object-fit: cover;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: -1;
    border-radius: 64px;
    overflow: hidden;

    @include xs {
      border-radius: 24px;
    }

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .rankMathBC {
    padding: 40px 40px 18px 0px;
    margin-left: auto;

    p {
      display: flex;
      justify-content: start;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
    }

    a,
    span {
      color: #004741;
      font-size: 14px;
      line-height: 21px;
      font-weight: 400;
      opacity: 0.3;
    }

    span.last,
    span.separator {
      opacity: 1;
    }

    span.separator {
      position: relative;
      color: transparent;
      width: 16px;

      &::before {
        content: "";
        background-image: url("data:image/svg+xml,%3Csvg width='16' height='17' viewBox='0 0 16 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='0.3'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.02055 4.14645C7.21581 4.34171 7.21581 4.65829 7.02055 4.85355L3.8741 8H13.3337C13.6098 8 13.8337 8.22386 13.8337 8.5C13.8337 8.77614 13.6098 9 13.3337 9H3.8741L7.02055 12.1464C7.21581 12.3417 7.21581 12.6583 7.02055 12.8536C6.82528 13.0488 6.5087 13.0488 6.31344 12.8536L2.31344 8.85355C2.11818 8.65829 2.11818 8.34171 2.31344 8.14645L6.31344 4.14645C6.5087 3.95118 6.82528 3.95118 7.02055 4.14645Z' fill='%23004741'/%3E%3C/g%3E%3C/svg%3E%0A");
        position: absolute;
        height: 17px;
        width: 16px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        top: 0;
        bottom: 0;
        margin: auto;
      }
    }

    @include sm {
      display: none;
    }
  }

  .mainHeaderContent {
    text-align: center;

    span {
      background: linear-gradient(
        0deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(8, 55, 106, 0.1) 50%,
        rgba(8, 55, 106, 0.64) 100%
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      font-size: 40px;
      opacity: 0.5;
      font-weight: 600;
      line-height: 16px;
      font-family: Altissimo !important;

      @include xs {
        font-size: 24px;
      }
    }

    h1 {
      font-size: 40px;
      font-weight: 600;
      line-height: 51px;
      color: #004741;

      @include xs {
        font-size: 24px;
        line-height: 17px;
      }
    }
  }
}

////////////  SINGLE PRODUCT STYLE

.rankmath-header {
  margin-top: 30px;
  margin-bottom: 26px;

  p {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
  }

  a,
  span {
    color: #004741;
    font-size: 14px;
    line-height: 21px;
    font-weight: 400;
    opacity: 0.3;
  }

  span.last,
  span.separator {
    opacity: 1;
  }

  span.separator {
    position: relative;
    color: transparent;
    width: 16px;

    &::before {
      content: "";
      background-image: url("data:image/svg+xml,%3Csvg width='16' height='17' viewBox='0 0 16 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='0.3'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.02055 4.14645C7.21581 4.34171 7.21581 4.65829 7.02055 4.85355L3.8741 8H13.3337C13.6098 8 13.8337 8.22386 13.8337 8.5C13.8337 8.77614 13.6098 9 13.3337 9H3.8741L7.02055 12.1464C7.21581 12.3417 7.21581 12.6583 7.02055 12.8536C6.82528 13.0488 6.5087 13.0488 6.31344 12.8536L2.31344 8.85355C2.11818 8.65829 2.11818 8.34171 2.31344 8.14645L6.31344 4.14645C6.5087 3.95118 6.82528 3.95118 7.02055 4.14645Z' fill='%23004741'/%3E%3C/g%3E%3C/svg%3E%0A");
      position: absolute;
      height: 17px;
      width: 16px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      top: 0;
      bottom: 0;
      margin: auto;
    }
  }
}

.upSideHeaderPro {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;

  @include sm {
    margin-bottom: 16px;
  }

  > div {
    width: 25%;
    @include md {
      width: 35%;
    }
    @include sm {
      display: none !important;
    }
  }

  .catSide {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 8px;
    color: #212121;
    font-size: 16px;
    line-height: 24px;
    font-weight: 300;
  }

  h1.entry-title-single22 {
    margin: auto;
    color: #212121;
    font-size: 32px;
    line-height: 50px;
    font-weight: 600;

    @include sm {
      font-size: 28px;
    }
    @include xs {
      font-size: 24px;
    }
    @include xxs {
      font-size: 20px;
    }
  }
}

.upSideHeaderPro-res {
  display: none;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  margin-top: 16px;
  .catSide {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 8px;
    color: #212121;
    font-size: 16px;
    line-height: 24px;
    font-weight: 300;
  }
  @include sm {
    display: flex;
  }

  .shareButtons .product-share-buttons {
    background-color: #fafafa00;

    a {
      display: none;
    }
    div {
      display: none !important;
    }
  }
}

.thuSideHeaderPro {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-bottom: 40px;

  @include sm {
    flex-direction: column-reverse;
  }

  .post-thumbnail {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 413px;
    background-color: #fafafa;
    border-radius: 26px;
    width: calc(33.8% - 20px);
    overflow: hidden;
    @include sm {
      width: 100%;
      height: 340px;
    }

    @include xs {
      height: 280px;
      border-radius: 18px;
    }

    img {
      height: 100%;
      width: 100%;
      object-fit: contain;
    }
  }

  video#myVideoHomeSin {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }

  .videoSide {
    height: 413px;
    overflow: hidden;
    border-radius: 48px;
    width: 66.2%;
    position: relative;

    @include sm {
      width: 100%;
      height: 300px;
    }
    @include xs {
      height: 140px;
      border-radius: 16px;
    }

    &::before {
      content: "";
      position: absolute;
      z-index: 3;
      background: #00000040;
      height: 100%;
      width: 100%;
      transition: all 0.3s linear;
      opacity: 1;
      visibility: visible;
    }

    .videoSideTitleAn {
      &::before {
        content: "";
        background: #008f83;
        width: 300px;
        position: absolute;
        height: 134%;
        left: -60px;
        border-radius: 100% 0% 0% 100%;
        z-index: -1;

        @include xs {
          width: 200px;
          position: absolute;
          height: 134%;
          left: -30px;
          border-radius: 40% 0% 0% 40%;
          z-index: -1;
        }
      }
    }

    div#playBtnHomeSin {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      height: fit-content;
      width: fit-content;
      z-index: 4;
      transition: all 0.3s linear;
      opacity: 1;
      visibility: visible;
      animation: playBtnHomeAniSin 5s linear infinite;

      @include sm {
        height: 100px;
        width: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      @include xs {
        height: 64px;
        width: 64px;
      }
      @include xxs {
        height: 54px;
        width: 54px;
      }

      foreignObject {
        display: none;
      }
    }

    .playBtnHome.hidden {
      opacity: 0 !important;
      visibility: hidden !important;
    }

    .videoSideTitleAn {
      position: absolute;
      height: 100%;
      width: 36%;
      background: #008f83;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 40px;
      line-height: 50px;
      font-weight: 600;
      color: white;
      padding: 40px;
      text-align: center;
      transition: all 1s;
      z-index: 1;
      @include xs {
        width: 30%;
        font-size: 18px;
        line-height: 20px;
        font-weight: 600;
      }
    }
    .videoSideTitleAn.active {
      transform: scale(2.5) translate(300px, -250px);
    }
  }

  .videoSide.active {
    &::before {
      opacity: 0;
      visibility: hidden;
    }
  }
}

@keyframes playBtnHomeAniSin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.tabsSideHeaderPro {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-bottom: 40px;
  position: sticky;
  top: 10px;
  z-index: 90;

  .tabsSide {
    padding: 8px;
    background-color: #fafafa;
    gap: 8px;
    display: flex;
    justify-content: start;
    align-items: center;
    border-radius: 100px;
    width: fit-content;
    overflow-x: auto;
    @include sm {
      border-radius: 16px;
    }

    a {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 13px 20px;
      color: #212121;
      font-size: 14px;
      font-weight: 400;
      line-height: 21px;
      border-radius: 100px;
      transition: all 0.3s linear;
      text-align: center;
      min-width: 100px;
    }

    a.active {
      background: #008f83;
      color: white;
    }
  }

  .catalugeSide {
    display: flex;
    justify-content: center;
    align-items: center;

    @include md {
      display: none;
    }

    a {
      background-color: #008f83;
      font-size: 16px;
      line-height: 25px;
      font-weight: 600;
      height: 63px;
      padding: 19px 40px 19px 64px;
      color: white;
      text-align: center;

      &::before {
        left: 40px;
        top: -2px;
        background-image: url("data:image/svg+xml,%3Csvg width='16' height='17' viewBox='0 0 16 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.00008 1.33331H8.03833C9.57726 1.3333 10.7833 1.3333 11.7243 1.45981C12.6874 1.5893 13.4475 1.85953 14.044 2.45607C14.6405 3.05261 14.9108 3.81263 15.0403 4.77578C15.1668 5.71677 15.1668 6.9228 15.1667 8.46173V8.53823C15.1668 10.0772 15.1668 11.2832 15.0403 12.2242C14.9108 13.1873 14.6405 13.9473 14.044 14.5439C13.4475 15.1404 12.6874 15.4107 11.7243 15.5401C10.7833 15.6667 9.57726 15.6667 8.03833 15.6666H7.96183C6.4229 15.6667 5.21688 15.6667 4.27588 15.5401C3.31273 15.4107 2.55271 15.1404 1.95617 14.5439C1.35963 13.9473 1.08941 13.1873 0.959912 12.2242C0.833399 11.2832 0.833405 10.0772 0.833414 8.53823V8.49998C0.833414 8.22384 1.05727 7.99998 1.33341 7.99998C1.60956 7.99998 1.83341 8.22384 1.83341 8.49998C1.83341 10.0855 1.83448 11.2243 1.95099 12.0909C2.06558 12.9432 2.28351 13.457 2.66328 13.8368C3.04305 14.2166 3.55686 14.4345 4.40913 14.5491C5.27578 14.6656 6.4146 14.6666 8.00008 14.6666C9.58556 14.6666 10.7244 14.6656 11.591 14.5491C12.4433 14.4345 12.9571 14.2166 13.3369 13.8368C13.7167 13.457 13.9346 12.9432 14.0492 12.0909C14.1657 11.2243 14.1667 10.0855 14.1667 8.49998C14.1667 6.9145 14.1657 5.77568 14.0492 4.90903C13.9346 4.05676 13.7167 3.54295 13.3369 3.16318C12.9571 2.78341 12.4433 2.56548 11.591 2.45089C10.7244 2.33438 9.58556 2.33331 8.00008 2.33331C7.72394 2.33331 7.50008 2.10946 7.50008 1.83331C7.50008 1.55717 7.72394 1.33331 8.00008 1.33331Z' fill='white'/%3E%3Cpath d='M7.68697 7.47976C7.88223 7.67502 7.88223 7.9916 7.68697 8.18687C7.49171 8.38213 7.17512 8.38213 6.97986 8.18687L1.83341 3.04042V5.39581C1.83341 5.67196 1.60956 5.89581 1.33341 5.89581C1.05727 5.89581 0.833414 5.67196 0.833414 5.39581V1.83331C0.833414 1.55717 1.05727 1.33331 1.33341 1.33331H4.89591C5.17206 1.33331 5.39591 1.55717 5.39591 1.83331C5.39591 2.10946 5.17206 2.33331 4.89591 2.33331H2.54052L7.68697 7.47976Z' fill='white'/%3E%3C/svg%3E%0A");
      }
    }
  }
}

div#info_profession,
div#main_explaintion,
div#how_to_use,
div#source_drug,
div#seciurity_points,
div#fight_drug,
div#product_pecifics {
  max-width: 1064px;
  margin: auto;
  padding: 32px 24px;
  border-radius: 24px;
  background-color: #fafafa;
  margin-bottom: 32px;
  scroll-margin-top: 90px;

  > span {
    margin-bottom: 30px;
    display: flex;
    justify-content: start;
    align-items: center;
    color: #bd8c37;
    font-size: 18px;
    line-height: 28px;
    font-weight: 600;
  }

  .infoProfessionItems {
    display: flex;
    justify-content: start;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px 20px;

    > div {
      width: calc(50% - 10px);
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: white;
      padding: 30px 23px 30px 32px;
      border-radius: 16px;

      @include sm {
        width: 100%;
      }
    }
  }
}

.shareButtons {
  .product-share-buttons {
    display: flex;
    justify-content: end;
    align-items: center;
    flex-direction: row-reverse;
    background-color: #fafafa;
    border-radius: 16px;
    padding: 4px 12px 4px 4px;
    width: fit-content;
    margin-right: auto;

    span {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 40px;
      width: 40px;
      background-color: #004741;
      border-radius: 16px;
      margin-right: 16px;
    }

    a {
      height: 24px;
      width: 24px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 16px;

      svg {
        height: 100%;
        width: 100%;

        path {
          fill: #212121;
          transition: all 0.3s linear;
        }
      }

      &:hover {
        path {
          fill: #d3ac69;
          transition: all 0.3s linear;
        }
      }
    }

    div#copyUrlButton {
      display: flex;
      justify-content: center;
      align-items: center;

      path {
        fill: #212121;
        transition: all 0.3s linear;
      }

      &:hover {
        &:hover {
          path {
            fill: #d3ac67;
            transition: all 0.3s linear;
          }
        }
      }
    }
  }
}

////////////  CONTACT US PAGE STYLE

.coFormBack {
  margin: 80px 0;

  input::placeholder,
  textarea::placeholder {
    font-size: 14px;
    line-height: 34px;
    font-weight: 300;
    color: #cacace;
  }

  .mainFormBox {
    margin-bottom: 80px;
    margin-top: 8px;

    @include sm {
      margin-top: 0px;
    }
  }

  form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    max-width: 1064px;
    margin: auto;
    gap: 0px 20px;

    .gform_validation_errors {
      border-radius: 16px !important;
      h2 {
        flex-direction: row !important;
      }
    }

    .gform-footer,
    .gform-body {
      width: 100%;
    }

    .gform-footer {
      justify-content: center;
    }

    .gform_fields {
      display: flex !important;
      flex-wrap: wrap;
      justify-content: start;
      align-items: center;
      gap: 20px 20px;
    }

    .gform_fields > div {
      width: calc(50% - 10px);
      position: relative;

      @include sm {
        width: 100%;
      }

      .gfield_description.validation_message.gfield_validation_message {
        position: absolute;
        top: 0;
        left: 22px;
        background-color: white;
        padding: 0 8px;
        font-size: 14px;
        @include sm {
          font-size: 10px;
        }
      }

      > label {
        font-size: 16px;
        line-height: 34px;
        background: white;
        position: relative;
        margin-right: 26px;
        z-index: 1;
        font-weight: 500;
        width: -moz-fit-content;
        width: fit-content;
        margin-top: 0px;
        margin-bottom: 0px;
        padding: 0 10px;
        color: #212121;
        transition: all 0.3s ease-in-out;
      }
    }

    .gform_fields > div:has(textarea) {
      width: 100%;
      height: 260px !important;
    }

    textarea {
      border: 1px solid #f2f2f3 !important;
      border-radius: 20px !important;
      padding: 18px 24px !important;
      box-shadow: unset !important;
      height: 240px !important;
      color: #212121 !important;
      background: white !important;
      transition: all 0.3s ease-in-out !important;
    }

    .gform_fields > div:has([type="submit"]) {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 24px;
      width: 100%;

      input {
        font-size: 14px;
        line-height: 24px;
        font-weight: 500;
        background: #004741 !important;
        color: white !important;
        display: flex;
        justify-content: start;
        align-items: center;
        width: fit-content;
        height: 48px;
        position: relative;
        padding-left: 28px;
        padding: 12px 26px 12px 26px;
        transition: all 0.4s ease-out;
        margin-right: 72px;

        &:hover {
          background-color: #06312d !important;
        }
      }
    }

    input:not([type="submit"]) {
      margin-bottom: 40px;

      @include sm {
        margin-bottom: 24px;
      }
    }

    input:not([type="submit"]) {
      border: 1px solid #f2f2f3 !important;
      border-radius: 20px !important;
      padding: 18px 24px !important;
      box-shadow: unset !important;
      height: 70px !important;
      color: #212121 !important;
      margin-bottom: 0 !important;
      background: white !important;
    }

    input:not([type="submit"]),
    textarea {
      position: relative;
      margin-top: -17px;
    }
  }

  input.wpcf7-form-control.wpcf7-tel.wpcf7-text.wpcf7-validates-as-tel {
    direction: rtl;
  }

  button,
  input[type="button"],
  input[type="reset"],
  input[type="submit"] {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    position: relative !important;
    padding: 15px 20px 10px 44px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 22px !important;
    width: fit-content !important;
    border-radius: 200px !important;
    background: #004741 !important;
    color: white !important;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='17' viewBox='0 0 16 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.00008 1.33331H8.03833C9.57726 1.3333 10.7833 1.3333 11.7243 1.45981C12.6874 1.5893 13.4475 1.85953 14.044 2.45607C14.6405 3.05261 14.9108 3.81263 15.0403 4.77578C15.1668 5.71677 15.1668 6.9228 15.1667 8.46173V8.53823C15.1668 10.0772 15.1668 11.2832 15.0403 12.2242C14.9108 13.1873 14.6405 13.9473 14.044 14.5439C13.4475 15.1404 12.6874 15.4107 11.7243 15.5401C10.7833 15.6667 9.57726 15.6667 8.03833 15.6666H7.96183C6.4229 15.6667 5.21688 15.6667 4.27588 15.5401C3.31273 15.4107 2.55271 15.1404 1.95617 14.5439C1.35963 13.9473 1.08941 13.1873 0.959912 12.2242C0.833399 11.2832 0.833405 10.0772 0.833414 8.53823V8.49998C0.833414 8.22384 1.05727 7.99998 1.33341 7.99998C1.60956 7.99998 1.83341 8.22384 1.83341 8.49998C1.83341 10.0855 1.83448 11.2243 1.95099 12.0909C2.06558 12.9432 2.28351 13.457 2.66328 13.8368C3.04305 14.2166 3.55686 14.4345 4.40913 14.5491C5.27578 14.6656 6.4146 14.6666 8.00008 14.6666C9.58556 14.6666 10.7244 14.6656 11.591 14.5491C12.4433 14.4345 12.9571 14.2166 13.3369 13.8368C13.7167 13.457 13.9346 12.9432 14.0492 12.0909C14.1657 11.2243 14.1667 10.0855 14.1667 8.49998C14.1667 6.9145 14.1657 5.77568 14.0492 4.90903C13.9346 4.05676 13.7167 3.54295 13.3369 3.16318C12.9571 2.78341 12.4433 2.56548 11.591 2.45089C10.7244 2.33438 9.58556 2.33331 8.00008 2.33331C7.72394 2.33331 7.50008 2.10946 7.50008 1.83331C7.50008 1.55717 7.72394 1.33331 8.00008 1.33331Z' fill='white'/%3E%3Cpath d='M7.68697 7.47976C7.88223 7.67502 7.88223 7.9916 7.68697 8.18687C7.49171 8.38213 7.17512 8.38213 6.97986 8.18687L1.83341 3.04042V5.39581C1.83341 5.67196 1.60956 5.89581 1.33341 5.89581C1.05727 5.89581 0.833414 5.67196 0.833414 5.39581V1.83331C0.833414 1.55717 1.05727 1.33331 1.33341 1.33331H4.89591C5.17206 1.33331 5.39591 1.55717 5.39591 1.83331C5.39591 2.10946 5.17206 2.33331 4.89591 2.33331H2.54052L7.68697 7.47976Z' fill='white'/%3E%3C/svg%3E%0A") !important;
    background-repeat: no-repeat !important;
    background-size: auto !important;
    background-position: 20px 16px !important;
  }
}

.mainContactUsBack {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 20px;
  margin-top: 80px;
  margin-bottom: 160px;
  min-height: 390px;

  @include sm {
    flex-direction: column;
    margin-bottom: 80px;
  }

  .iframe-contact-us {
    width: calc(50% - 10px);
    border-radius: 32px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;

    @include sm {
      width: 100%;
      height: 450px;
    }

    .mainIframe {
      height: 100%;
      width: 100%;
      position: relative;

      &::before {
        content: "";
        background: rgba(91, 91, 91, 0.5294117647);
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        position: absolute;
        opacity: 1;
        visibility: visible;
        transition: all 0.3s linear;
        @include sm {
          opacity: 0 !important;
          visibility: hidden !important;
        }
      }
    }

    .hide-before-overlay::before {
      opacity: 0 !important;
      visibility: hidden !important;
    }

    .secondaryframe {
      position: absolute;
      right: 16px;
      top: 16px;
      display: flex;
      justify-content: start;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;

      a {
        display: flex;
        justify-content: start;
        align-items: center;
        gap: 6px;
        background-color: #008f83;
        border-radius: 46px;
        padding: 8px 8px 8px 16px;
        font-size: 13px;
        font-weight: 300;
        line-height: 20px;
        color: white;

        .secondaryframeSvg {
          height: 27px;
          width: 27px;
          background: white;
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 6px;
          border-radius: 50%;

          svg {
            height: 100%;
            width: 100%;
          }
        }
      }
    }

    &::before {
      content: "";
      background-image: url("data:image/svg+xml,%3Csvg width='264' height='26' viewBox='0 0 264 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M243.5 15.0024C235.5 25.5039 225.5 26 223 26H39C35.5 26 27 23.5029 21.5 14.9985C17.464 8.75786 9.5 0.00281292 0 0.00281292L263.773 0.00281116C263.853 -0.000924015 263.928 -0.00095007 264 0.00281116L263.773 0.00281116C260.325 0.164525 249.384 7.27875 243.5 15.0024Z' fill='%23ffffff'/%3E%3C/svg%3E");
      position: absolute;
      left: -121px;
      top: 0;
      margin: auto;
      bottom: 0px;
      width: 264px;
      max-width: 50%;
      max-height: 26px;
      height: 40%;
      background-repeat: no-repeat;
      background-size: contain;
      z-index: 10;
      background-position: top;
      transform: rotate(270deg);

      @include sm {
        top: -1px;
        transform: rotate(0deg);
        right: 0;
        left: 0;
        bottom: unset;
        display: none;
      }
    }

    &::after {
      content: "";
      background-image: url("data:image/svg+xml,%3Csvg width='264' height='26' viewBox='0 0 264 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M243.5 15.0024C235.5 25.5039 225.5 26 223 26H39C35.5 26 27 23.5029 21.5 14.9985C17.464 8.75786 9.5 0.00281292 0 0.00281292L263.773 0.00281116C263.853 -0.000924015 263.928 -0.00095007 264 0.00281116L263.773 0.00281116C260.325 0.164525 249.384 7.27875 243.5 15.0024Z' fill='%23ffffff'/%3E%3C/svg%3E");
      position: absolute;
      top: 0;
      right: -120px;
      margin: auto;
      bottom: 0px;
      width: 264px;
      max-width: 50%;
      max-height: 26px;
      height: 40%;
      background-repeat: no-repeat;
      background-size: contain;
      z-index: 10;
      background-position: top;
      transform: rotate(90deg);

      @include sm {
        bottom: -1px;
        transform: rotate(180deg);
        right: 0;
        left: 0;
        top: unset;
      }
    }
  }

  .mainContactUs {
    width: calc(50% - 10px);
    border-radius: 32px;
    overflow: hidden;
    background-color: #f2f2f3;
    padding: 40px 54px 40px 40px;
    display: flex;
    justify-content: center;
    align-items: start;
    flex-direction: column;
    position: relative;

    @include sm {
      width: 100%;
      padding: 34px 16px 34px 16px;
    }

    &::before {
      content: "";
      background-image: url("data:image/svg+xml,%3Csvg width='264' height='26' viewBox='0 0 264 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M243.5 15.0024C235.5 25.5039 225.5 26 223 26H39C35.5 26 27 23.5029 21.5 14.9985C17.464 8.75786 9.5 0.00281292 0 0.00281292L263.773 0.00281116C263.853 -0.000924015 263.928 -0.00095007 264 0.00281116L263.773 0.00281116C260.325 0.164525 249.384 7.27875 243.5 15.0024Z' fill='%23ffffff'/%3E%3C/svg%3E");
      position: absolute;
      left: -121px;
      top: 0;
      margin: auto;
      bottom: 0px;
      width: 264px;
      max-width: 50%;
      max-height: 26px;
      height: 40%;
      background-repeat: no-repeat;
      background-size: contain;
      z-index: 10;
      background-position: top;
      transform: rotate(270deg);

      @include sm {
        top: -1px;
        transform: rotate(0deg);
        right: 0;
        left: 0;
        bottom: unset;
      }
    }

    &::after {
      content: "";
      background-image: url("data:image/svg+xml,%3Csvg width='264' height='26' viewBox='0 0 264 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M243.5 15.0024C235.5 25.5039 225.5 26 223 26H39C35.5 26 27 23.5029 21.5 14.9985C17.464 8.75786 9.5 0.00281292 0 0.00281292L263.773 0.00281116C263.853 -0.000924015 263.928 -0.00095007 264 0.00281116L263.773 0.00281116C260.325 0.164525 249.384 7.27875 243.5 15.0024Z' fill='%23ffffff'/%3E%3C/svg%3E");
      position: absolute;
      top: 0;
      right: -120px;
      margin: auto;
      bottom: 0px;
      width: 264px;
      max-width: 50%;
      max-height: 26px;
      height: 40%;
      background-repeat: no-repeat;
      background-size: contain;
      z-index: 10;
      background-position: top;
      transform: rotate(90deg);

      @include sm {
        bottom: -1px;
        transform: rotate(180deg);
        right: 0;
        left: 0;
        top: unset;
      }
    }

    .mainContactUsBox {
      display: flex;
      justify-content: start;
      align-items: center;
      width: 100%;
      margin-bottom: 24px;

      svg {
        margin-left: 8px;
        height: 40px;
        width: 40px;
        padding: 8px;
      }

      h4 {
        font-size: 14px;
        font-weight: 400;
        line-height: 21px;
        color: #212121;
        @include sm {
          display: none;
        }
      }

      .numbersCo {
        margin-right: auto;
        display: flex;
        justify-content: end;
        align-items: center;
        flex-wrap: wrap;
        gap: 16px;

        @include sm {
          margin-left: auto;
          margin-right: 0;
        }

        a,
        p,
        span {
          font-size: 13px;
          font-weight: 400;
          line-height: 20px;
          color: #212121;
        }
      }
    }
  }

  .socialmediaCo {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    height: 50%;
    width: fit-content;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: column;

    @include sm {
      flex-direction: row;
      bottom: unset;
      height: fit-content;
      top: 448px;
      width: 45%;
    }

    svg path {
      transition: all 0.3s linear;
      stroke: #68696e;
    }

    a {
      &:hover {
        svg path {
          stroke: #d3ac69;
        }
      }
    }
  }
}

////////////  ABOUT US PAGE STYLE

.historyAboutBack {
  margin: 160px 0;

  .historyAbout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    @include md {
      flex-direction: column;
    }

    .historyAboutImg {
      position: relative;
      width: calc(50% - 84px);

      @include md {
        width: 100%;
      }

      &::before {
        content: "";
        background-image: url("data:image/svg+xml,%3Csvg width='264' height='26' viewBox='0 0 264 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M243.5 15.0024C235.5 25.5039 225.5 26 223 26H39C35.5 26 27 23.5029 21.5 14.9985C17.464 8.75786 9.5 0.00281292 0 0.00281292L263.773 0.00281116C263.853 -0.000924015 263.928 -0.00095007 264 0.00281116L263.773 0.00281116C260.325 0.164525 249.384 7.27875 243.5 15.0024Z' fill='%23ffffff'/%3E%3C/svg%3E");
        position: absolute;
        left: -121px;
        top: 0;
        margin: auto;
        bottom: 0px;
        width: 264px;
        max-width: 50%;
        max-height: 26px;
        height: 40%;
        background-repeat: no-repeat;
        background-size: contain;
        z-index: 10;
        background-position: top;
        transform: rotate(270deg);

        @include md {
          transform: rotate(180deg);
          top: unset;
          left: 0;
          right: 0;
          bottom: 8px;
        }
      }

      .timlineNumb {
        position: absolute;
        left: -80px;
        top: 0;
        bottom: 0;
        margin: auto;
        z-index: 11;
        height: 200px;
        display: flex;
        justify-content: center;
        pointer-events: none;

        @include md {
          left: 0;
          right: 0;
          bottom: -90px;
          top: unset;
          margin: auto;
          height: unset;
          width: 200px;
        }

        .swiper-slide {
          padding-right: 32px;
          padding-left: 32px;
          pointer-events: none;

          @include md {
            padding: 32px 0;
          }

          &::before {
            content: "";
            background-color: #d3ac69;
            width: 16px;
            height: 8px;
            border-radius: 100px;
            position: absolute;
            right: 11px;
            top: 0;
            bottom: 0;
            margin: auto;

            @include md {
              width: 8px;
              height: 16px;
              right: 0;
              left: 0;
              top: 0;
              bottom: unset;
            }
          }

          span {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 16px;
            font-weight: 300;
            line-height: 38px;
            color: #a5afbd;
            gap: 10px;
            position: relative;
          }
        }

        .swiper-slide-active {
          &::before {
            background-color: #008f83;
            width: 40px;

            @include md {
              height: 40px;
              width: 8px;
            }
          }

          span {
            font-size: 20px;
            font-weight: 300;
            line-height: 38px;
            color: #08376a;
            transform: translateX(-27px);

            @include md {
              transform: translateY(16px);
            }
          }
        }
      }

      .timlineNumbImg {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        width: 100%;
        img {
          height: 100%;
          width: 100%;
          object-fit: cover;
          border-radius: 40px;
        }
      }
    }

    .historyAboutItems {
      width: calc(50% - 12px);

      @include md {
        width: 100%;
        margin-top: 60px;
      }
    }

    .historyAboutInner {
      display: none;

      > span {
        background: linear-gradient(
          0deg,
          rgb(33 33 33 / 0%) 0%,
          rgb(33 33 33 / 10%) 50%,
          rgb(33 33 33 / 64%) 100%
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 24px;
        opacity: 0.5;
        font-weight: 600;
        line-height: 28px;
        margin-bottom: 3px;
        font-family: Altissimo !important;

        @include md {
          display: none;
        }
      }

      > h2 {
        font-size: 32px;
        font-weight: 600;
        line-height: 22px;
        margin-bottom: 20px;

        @include md {
          display: none;
        }
      }

      > p {
        font-size: 14px;
        font-weight: 300;
        line-height: 32px;
        color: #444444;
        text-align: justify;
      }
    }
  }
}

.extraResHeader {
  display: none;

  @include md {
    display: block;
  }
}

.goalsWishesBack {
  margin: 160px 0;

  .goalsWishesBtns {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    position: relative;

    @include sm {
      flex-wrap: wrap;
      gap: 16px;
    }

    &::before {
      content: "";
      position: absolute;
      height: 4px;
      width: 100%;
      left: 0;
      right: 0;
      margin: auto;
      background: #f2f2f3;
      bottom: 0px;
      border-radius: 40px;

      @include sm {
        display: none;
      }
    }

    .goalsWishesBtnIN {
      text-align: center;
      width: 25%;
      padding-bottom: 18px;
      border-bottom: 4px solid #00000000;
      transition: all 0.3s linear;
      z-index: 0;

      @include sm {
        width: calc(50% - 8px);
        border: 1px solid #dbdbde;
        padding-top: 16px;
        border-radius: 16px;
        position: relative;

        &::before {
          content: "";
          position: absolute;
          height: 100%;
          width: 100%;
          left: 0;
          top: 0;
          border-radius: 16px;
          border: 2px solid #00544d;
          opacity: 0;
          visibility: hidden;
          transform: scale(0.5);
          transition: all 0.3s linear;
        }
      }

      .titlePart {
        font-size: 18px;
        font-weight: 500;
        line-height: 28px;
        color: #212121;
        @include sm {
          font-size: 14px;
          line-height: 22px;
        }
      }

      .iconPart {
        height: 32px;
        width: 32px;
        margin: auto;
        margin-bottom: 12px;
      }
    }

    .goalsWishesBtnIN.active {
      border-bottom-color: #008f83;

      @include sm {
        border-bottom-color: unset;
        border: unset;

        &::before {
          opacity: 1;
          visibility: visible;
          transform: scale(1);
        }
      }
    }
  }

  .goalsWishesItems {
    .goalsWishesInner {
      display: none;

      p {
        font-size: 14px;
        font-weight: 300;
        line-height: 28px;
        color: #212121;
        text-align: justify;
      }
    }
  }
}

.deActiveContentScroll {
  blockquote p {
    background-color: white;
  }
}

////////////////////////////////////////////////////////////////////
