:root { --font-playfair: 'Playfair Display', sans-serif; --font-worksans: 'Work Sans', sans-serif; --primary-color: #171717; --primary-color-opc: 23, 23, 23; --dark-title-color: #171717; --title-color: #171717; --title-color-opc: 23, 23, 23; --white-color: #fff; --dark-white-color: #fff; --text-color-white: #D3D3D3; --dark-text-color: #595959; --text-color: #595959; --text-color2: #545454; --text-color-opc: 89, 89, 89; --borderr-color: #EEEEEE; --borderr-color-opc: 230, 230, 230; --section-bg-color: #F9F9F9; --section-bg-color2: #FBF8F8; }
body.dark { --primary-color: #FFFFFF; --primary-color-opc: 255, 255, 255; --title-color: #FFFFFF; --title-color-opc: 255, 255, 255; --text-color: #D3D3D3; --text-color-opc: 211, 211, 211; --borderr-color: #343434; --white-color: #171717; --section-bg-color: #212121; --section-bg-color2: #212121; background-color: rgb(23, 23, 23); }
* { margin: 0px; padding: 0px; box-sizing: border-box; }
a:focus, input:focus, textarea:focus, button:focus { outline: solid 0px; box-shadow: unset; }
input, textarea { border-radius: 0px; }
html, body { height: 100%; }
body { font-size: 16px; font-family: var(--font-worksans); font-weight: 400; overflow-x: hidden; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-playfair); font-weight: 500; margin-bottom: 15px; }
img { height: auto; max-width: 100%; }
p { color: var(--text-color); font-family: var(--font-worksans); font-size: 16px; font-weight: 400; line-height: 1.7; }
a { color: unset; text-decoration: none; }
button { border: unset; }
input, select, audio, canvas, iframe, img, svg, video { vertical-align: middle; }
.bi-twitter-x { font-size: 14px; }
.sec-mar { margin: 40px 0px; }
.pt-150 { padding-top: 150px; }
.pt-130 { padding-top: 130px; }
.pb-130 { padding-bottom: 130px; }
.pt-120 { padding-top: 120px; }
.pt-110 { padding-top: 110px; }
.pt-90 { padding-top: 90px; }
.pb-90 { padding-bottom: 90px; }
.pb-80 { padding-bottom: 80px; }
.pb-65 { padding-bottom: 65px; }
.mt-130 { margin-top: 130px; }
.mt-120 { margin-top: 120px; }
.mb-130 { margin-bottom: 130px; }
.mb-120 { margin-bottom: 120px; }
.mb-110 { margin-bottom: 110px; }
.mb-100 { margin-bottom: 100px; }
.mt-100 { margin-top: 110px !important; }
.mb-90 { margin-bottom: 90px; }
.mb-15 { margin-bottom: 15px; }
.mb-10 { margin-bottom: 10px; }
.pt-80 { padding-top: 80px; }
.pt-25 { padding-top: 25px; }
.pt-50 { padding-top: 50px; }
.pt-40 { padding-top: 40px; }
.pt-35 { padding-top: 35px; }
.pt-30 { padding-top: 30px; }
.pb-80 { padding-bottom: 80px; }
.pb-60 { padding-bottom: 60px; }
.mb-60 { margin-bottom: 60px; }
.mb-70 { margin-bottom: 70px; }
.mb-80 { margin-bottom: 80px; }
.mb-50 { margin-bottom: 50px; }
.mb-45 { margin-bottom: 45px; }
.mb-44 { margin-bottom: 44px; }
.mb-40 { margin-bottom: 40px; }
.mb-35 { margin-bottom: 35px; }
.mb-20 { margin-bottom: 20px; }
.mt-15 { margin-top: 15px; }
.mt-40 { margin-top: 40px; }
.mt-35 { margin-top: 35px; }
.mb-30 { margin-bottom: 30px; }
.mb-25 { margin-bottom: 25px; }
.mt-30 { margin-top: 30px; }
.mt-50 { margin-top: 50px; }
.mt-25 { margin-top: 25px; }
.mb-50 { margin-bottom: 50px; }
.mt-60 { margin-top: 60px; }
.mt-70 { margin-top: 70px; }
.primary-btn1 {
  background-color: var(--primary-color); padding: 19px 22px; border-radius: 6px; overflow: hidden; position: relative; border: 1px solid transparent; z-index: 1; white-space: nowrap; transition: 0.6s; display: inline-flex; align-items: center; line-height: 1; gap: 6px; color: var(--white-color); font-family: var(--font-worksans); font-size: 16px; font-weight: 500;
  & span { background-image: ; background-attachment: ; background-origin: ; background-clip: ; background-color: ; background-repeat: no-repeat; background-size: 100% 1px; background-position: left 100%; transition: background-size 0.75s; }
  & svg { fill: var(--white-color); transition: 0.6s; }
  & strong { position: absolute; display: block; width: 0px; height: 0px; border-radius: 36px; background-color: var(--white-color); transition: 0.6s; transform: translate(-50%, -50%); z-index: -1; }
  &:hover {
    border-color: var(--primary-color);
    /* color: var(--title-color); */
    color: white;




    & span { background-size: 0px 1px; background-position: 0% 100%; }
    & svg { fill: var(--title-color); }
    & strong { width: 225%; height: 1000.5px; }
  }
}
.primary-btn2 {
  color: var(--white-color); font-family: var(--font-worksans); font-size: 16px; font-weight: 500; background-color: var(--primary-color); border-radius: 6px; padding: 15px 18px; white-space: nowrap; overflow: hidden; position: relative; z-index: 1; transition: 0.6s; display: inline-flex; align-items: center; line-height: 1; gap: 6px; border: 1px solid transparent;
  &::before { content: ""; display: block; position: absolute; bottom: 0px; left: 0px; width: 100%; background-image: ; background-attachment: ; background-origin: ; background-clip: ; background-color: ; background-repeat: no-repeat; background-size: 100% 1px; background-position: left 100%; transition: background-size 0.75s; }
  & svg { fill: var(--white-color); transition: 0.6s; }
  & strong { position: absolute; display: block; width: 0px; height: 0px; border-radius: 36px; background-color: var(--white-color); transition: 0.6s; transform: translate(-50%, -50%); z-index: -1; }
  &:hover {
    color: var(--title-color); border-color: var(--primary-color); text-decoration: none;
    & svg { fill: var(--title-color); }
    & strong { width: 225%; height: 1000.5px; }
  }
}
.form-inner {
  position: relative; line-height: 1;
  & label { color: var(--title-color); font-family: var(--font-inter); font-size: 14px; font-weight: 500; display: block; margin-bottom: 10px; }
  & input {
    background: var(--white-color); color: var(--title-color); font-family: var(--font-inter); font-size: 14px; font-weight: 500; height: 50px; width: 100%; padding: 10px 20px; outline: none; border: 1px solid var(--borderr-color); border-radius: 5px;
    &::placeholder { color: rgb(124, 124, 124); font-weight: 400; }
    &:focus { border: 1px solid var(--primary-color); }
  }
  & textarea {
    background: var(--white-color); color: var(--title-color); font-family: var(--font-playfair); font-size: 14px; font-weight: 400; width: 100%; padding: 20px; outline: none; border: 1px solid var(--borderr-color); min-height: 120px; border-radius: 5px;
    &::placeholder { color: rgb(124, 124, 124); }
    &:focus { border: 1px solid var(--primary-color); }
  }
}
.form-inner2 {
  & .form-check {
    min-height: unset; margin-bottom: 0px;
    & .form-check-input {
      cursor: pointer; height: 14px; width: 14px; margin-top: 5px; border: 1px solid var(--primary-color3);
      &:focus { box-shadow: none; border-color: var(--primary-color3); }
      &:checked { background-color: var(--primary-color); border-color: var(--primary-color); }
    }
    & .form-check-label { cursor: pointer; color: var(--paragraph-color); font-family: var(--font-playfair); font-size: 14px; font-weight: 400; }
  }
}
.form-inner3 {
  position: relative; line-height: 1;
  & label { color: var(--primary-color); font-family: var(--font-worksans); font-size: 18px; font-weight: 500; display: block; margin-bottom: 10px; text-transform: capitalize; }
  & input {
    background: var(--white-color); color: rgb(125, 125, 125); font-family: var(--font-worksans); font-size: 14px; font-weight: 500; height: 50px; width: 100%; padding: 10px 20px; outline: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial;
    &::placeholder { color: rgb(124, 124, 124); font-weight: 400; }
    &:focus { border: 1px solid var(--primary-color); }
  }
  & textarea {
    background: var(--white-color); color: rgb(125, 125, 125); font-family: var(--font-worksans); font-size: 14px; font-weight: 400; width: 100%; padding: 15px 25px; outline: none; min-height: 200px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial;
    &::placeholder { color: rgb(124, 124, 124); }
    &:focus { border: 1px solid var(--primary-color); }
  }
}
.section-title {
  & h3 { color: var(--title-color); font-family: var(--font-playfair); font-size: 32px; font-weight: 600; line-height: 1.3; margin-bottom: 0px; }
  & p { color: var(--text-color); font-family: var(--font-worksans); font-size: 20px; font-weight: 400; line-height: 1.6; margin-bottom: 0px; padding-top: 20px; }
  &.two {
    display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
    & p { padding-top: 0px; }
    & .section-content {
      max-width: 498px; width: 100%;
      & .view-all-btn { padding-top: 20px; }
    }
  }
}
.view-all-btn {
  color: var(--title-color); font-family: var(--font-worksans); font-size: 16px; font-weight: 600; line-height: 1; white-space: nowrap; position: relative; display: inline-block; background-image: ; background-attachment: ; background-origin: ; background-clip: ; background-color: ; background-repeat: no-repeat; background-size: 100% 1px; background-position: left 100%; transition: background-size 0.75s;
  &:hover { background-size: 0px 1px; background-position: 0% 100%; }
}
.slider-btn-grp {
  display: flex; align-items: center; gap: 20px;
  & .slider-btn {
    min-width: 35px; max-width: 35px; height: 35px; background-color: transparent; border: 1px solid var(--borderr-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: 0.5s;
    & svg { fill: rgb(80, 80, 80); transition: 0.5s; }
    &:hover {
      background-color: var(--primary-color);
      & svg { fill: var(--white-color); }
    }
    &.swiper-button-disabled { opacity: 0.5; }
  }
  &.two {
    & .slider-btn {
      background-color: transparent; border: 1px solid var(--title-color2);
      & svg { fill: var(--title-color2); }
      &:hover {
        border-color: var(--primary-color); background-color: var(--primary-color);
        & svg { fill: var(--white-color); }
      }
    }
  }
}
.nice-select {
  width: 100%; background: transparent; border-radius: 5px; height: 50px; display: flex; align-items: center; line-height: 1; padding: 0px 25px; border: 1px solid var(--borderr-color); outline: none !important; box-shadow: none !important;
  &::after { height: 8px; width: 8px; border-bottom: 1px solid var(--title-color); border-right: 1px solid var(--title-color); right: 28px; margin-top: -5px; }
  & .current { color: rgba(var(--title-color-opc), 0.5); font-family: var(--font-playfair); font-size: 14px; font-weight: 500; }
  &:focus { border-color: var(--primary-color); background-color: var(--white-color); }
  & .list {
    border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 5px; width: 100%; max-height: 250px; overflow-y: auto;
    &::-webkit-scrollbar { width: 5px; }
    &::-webkit-scrollbar-track { background: rgb(241, 241, 241); }
    &::-webkit-scrollbar-thumb { background: rgba(var(--title-color-opc), 0.7); }
    & .option {
      color: var(--title-color); font-family: var(--font-playfair); font-size: 14px; font-weight: 500; padding-left: 25px; padding-right: 25px; display: flex; align-items: center; justify-content: space-between; width: 100%;
      &:hover { color: var(--white-color); background-color: var(--primary-color); }
    }
  }
}
.circle-container {
  background: var(--white-color); position: fixed; right: 30px; bottom: 55px; height: 40px; width: 40px; cursor: pointer; display: block; border-radius: 50px; z-index: 999; opacity: 0; visibility: hidden; transform: translateY(15px); transition: 200ms linear; border: 1px solid var(--text-color);
  &.active { opacity: 1; visibility: visible; transform: translateY(0px); }
  &::after { position: absolute; font-family: Bootstrap-icons; content: ""; text-align: center; line-height: 40px; font-size: 28px; color: var(--title-color); left: 0px; top: 0px; height: 40px; width: 40px; cursor: pointer; display: block; z-index: 1; transition: 0.5s linear; }
  &:hover {
    border: 1px solid var(--white-color); background: var(--title-color);
    & svg {
      & path { fill: var(--primary-color); transition: 0.5s; }
    }
    &::after { color: var(--white-color); }
  }
  & svg {
    & path { fill: none; stroke: var(--primary-color); }
    &.circle-progress {
      & path { stroke: var(--primary-color); stroke-width: 5; box-sizing: border-box; transition: 200ms linear; }
    }
  }
}
@keyframes fade-down {
  0% { opacity: 0; transform: scaleY(0); visibility: hidden; }
  100% { opacity: 1; transform: scaleY(1); visibility: visible; }
}
.topbar {
  border-bottom: 1px solid var(--borderr-color); padding: 18px 0px;
  & .topbar-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    
    & .header-logo {
      & a {
        & img {
          width: 138px;
          &.dark { display: none; }
        }
      }
    }
    & .search-area {
      /* max-width: 690px; */
      width: 100%;
      
      
      
      
      
      & form {
        width: 100%;
        & .form-inner {
          display: flex; align-items: center; max-width: 760px; width: 100%; background-color: rgb(250, 248, 248); border-radius: 6px; padding: 0px 25px;
          & input {
            background: transparent; border: unset; border-radius: 5px 0px 0px 5px; width: 100%; height: 52px; padding: 10px 10px 10px 0px; font-family: var(--font-worksans); font-weight: 400; font-size: 14px; color: var(--text-color);
            &::placeholder { color: rgb(125, 125, 125); }
          }
          & button {
            background-color: transparent;
            & svg { fill: var(--text-color); }
          }
        }
      }
    }
    & .topbar-right {
      display: flex; align-items: center; gap: 24px;
      & .language-area {
        position: relative;
        & .language-btn {
          display: flex; align-items: center; gap: 14px; cursor: pointer;
          & svg { fill: var(--title-color); transition: 0.5s; }
          & span {
            color: var(--title-color); font-family: var(--font-worksans); font-size: 16px; font-weight: 400; line-height: 1; transition: 0.5s; display: flex; align-items: center; gap: 7px;
            & svg { fill: var(--title-color); }
          }
        }
        & .language-list {
          padding: 0px; margin: 0px; list-style: none; position: absolute; top: 35px; left: 0px; z-index: 9999; width: 180px; background-color: var(--white-color); box-shadow: rgba(8, 0, 42, 0.08) 0px 30px 80px; display: none; transform: scaleY(0); transform-origin: center top;
          &.active { display: block; transform: scaleY(1); animation: 0.5s linear 0s 1 normal none running fade-up2; }
          & li {
            & a {
              color: var(--title-color); font-family: var(--font-worksans); font-weight: 500; text-transform: capitalize; font-size: 14px; padding: 10px 20px; width: 100%; display: flex; align-items: center; transition: 0.35s;
              &:hover { color: var(--white-color); background-color: var(--primary-color); }
            }
          }
        }
      }
      & .wishlist-btn {
        width: 45px; height: 50px; border-radius: 6px; border: 1px solid var(--borderr-color); display: flex; align-items: center; justify-content: center; transition: 0.5s; background-color: #f8f9fa; color: #333;
        & svg { fill: var(--title-color); transition: 0.5s; }
        &:hover {
          background-color: var(--primary-color);
          & svg { fill: var(--white-color); }
        }
      }
      & .header-btn {
        color: var(--white-color); font-family: var(--font-worksans); font-size: 16px; font-weight: 500; background-color: var(--primary-color); border-radius: 6px; padding: 15px 18px; white-space: nowrap; overflow: hidden; position: relative; z-index: 1; transition: 0.6s; display: inline-flex; align-items: center; line-height: 1; gap: 6px; border: 1px solid transparent;
        &::before { content: ""; display: block; position: absolute; bottom: 0px; left: 0px; width: 100%; background-image: ; background-attachment: ; background-origin: ; background-clip: ; background-color: ; background-repeat: no-repeat; background-size: 100% 1px; background-position: left 100%; transition: background-size 0.75s; }
        & svg { fill: var(--white-color); transition: 0.6s; }
        & strong { position: absolute; display: block; width: 0px; height: 0px; border-radius: 36px; background-color: var(--white-color); transition: 0.6s; transform: translate(-50%, -50%); z-index: -1; }
        &:hover {
          color: var(--title-color); border-color: var(--primary-color); text-decoration: none;
          & svg { fill: var(--title-color); }
          & strong { width: 225%; height: 1000.5px; }
        }
      }
    }
  }
}
header.style-1 {
  position: relative; width: 100%; z-index: 99; transition: 0.8s ease-out; background-color: transparent; border-bottom: 1px solid var(--borderr-color);
  &.inner-page { border-bottom: 1px solid var(--borderr-color); }
  &.sticky { position: fixed; top: 0px; left: 0px; width: 100%; box-sizing: border-box; background-color: var(--white-color); box-shadow: rgba(0, 72, 88, 0.1) 5px 3px 40px; z-index: 9999; padding-top: 0px !important; padding-bottom: 0px !important; }
  & .header-logo {
    & a {
      & img {
        width: 138px;
        &.dark { display: none; }
      }
    }
  }
  & .main-menu {
    display: inline-block; position: relative;
    & ul {
      list-style: none; margin: 0px; padding: 0px;
      & > li {
        display: inline-block; position: relative; padding: 0px 25px;
        &:first-child { padding-left: 0px; }
        & > a {
          color: var(--title-color); display: block; text-transform: capitalize; padding: 18px 0px; font-family: var(--font-worksans); font-weight: 500; font-size: 16px; transition: 0.5s ease-out; position: relative; border-radius: 15px; line-height: 1;
          &::after { content: ""; display: block; position: absolute; bottom: 16px; left: 0px; width: 100%; border-bottom: 1px solid var(--title-color); transform-origin: right center; transform: scale(0, 1); transition: transform 0.5s; }
        }
        &.current-menu-item, &.current_page_item, &.current-menu-ancestor, &.current-menu-parent {
          & a {
            &::after { transform-origin: left center; transform: scale(1, 1); }
          }
        }
        & i {
          font-size: 20px; text-align: center; color: var(--white-color); font-style: normal; position: absolute; right: -5px; top: 35px; z-index: 999; cursor: pointer; display: none; transition: 0.5s ease-out; opacity: 0;
          &.active {
            color: var(--primary-color);
            &::before { content: ""; }
          }
        }
        & ul.sub-menu {
          position: absolute; left: 0px; right: 0px; top: auto; margin: 0px; display: none; min-width: 265px; background: var(--white-color); border: 1px solid var(--borderr-color); text-align: left;
          & > li {
            & i { position: absolute; top: 10px; right: 6px; color: var(--title-color); font-size: 20px; display: none; }
            & .dropdown-icon { color: var(--title-color); opacity: 1; top: 15px; font-size: 13px; right: 15px; }
            & .dropdown-icon2 { color: var(--title-color); opacity: 1; top: 14px; right: 10px; font-size: 13px; }
            padding: 0px; display: block; position: relative;
            & > a {
              display: flex; gap: 20px; padding: 25px 35px 5px; font-family: var(--font-worksans); color: var(--title-color); font-weight: 500; text-transform: capitalize; font-size: 13px; line-height: 1.4; transition: 0.4s ease-out; position: relative; border-radius: 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial;
              &::after { display: none; }
              &:hover { color: var(--primary-color); }
              & .icon {
                margin-top: 5px;
                & svg { fill: var(--title-color); }
              }
              & .content {
                & h6 { color: var(--title-color); font-family: var(--font-worksans); font-size: 16px; font-weight: 500; line-height: 1.3; margin-bottom: 5px; display: inline-block; background-image: ; background-attachment: ; background-origin: ; background-clip: ; background-color: ; background-repeat: no-repeat; background-size: 0px 1px; background-position: 0% 100%; transition: background-size 0.75s; }
                & p { color: var(--text-color); font-family: var(--font-worksans); font-size: 14px; font-weight: 400; line-height: 20px; margin-bottom: 0px; }
              }
              &.active { color: var(--primary-color); }
            }
            &.current-menu-item, &.current_page_item {
              & a { color: var(--primary-color); font-weight: 600; }
            }
            &:last-child {
              & a {
                padding-bottom: 25px;
                &::before { display: none; }
              }
              & .sub-menu {
                & li {
                  & i { display: none; }
                  & a {
                    border-bottom: 1px solid rgba(13, 23, 32, 0.08);
                    &::before { display: block; }
                  }
                  &:last-child {
                    & a {
                      border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor;
                      &::before { display: none; }
                    }
                  }
                }
              }
            }
            &:hover {
              & > a {
                color: var(--primary-color);
                & .content {
                  & h6 { background-size: 100% 1px; background-position: left 100%; }
                }
              }
              & .dropdown-icon { color: var(--primary-color); }
              & .dropdown-icon2 { color: var(--primary-color); }
            }
            &.active {
              & > a {
                font-weight: 600;
                & .content {
                  & h6 { background-image: ; background-attachment: ; background-origin: ; background-clip: ; background-color: ; background-size: 100% 1px; background-repeat: no-repeat; background-position: left 100%; transition: background-size 0.75s; }
                }
                &::before { display: none; }
              }
              & .dropdown-icon { color: var(--primary-color); }
              & .dropdown-icon2 { color: var(--primary-color); }
            }
            & .sub-menu {
              left: 100%; position: absolute; max-width: 230px; min-width: 215px; background: var(--white-color); top: 0px;
              &::before { display: none; visibility: hidden; }
              @media only screen and (max-width: 991px) {
                margin-left: 10px; position: unset; max-width: 230px; min-width: 215px; background: transparent; top: 0px;
              }
              & > li {
                & i { display: none; }
              }
            }
            &:last-child { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }
          }
          &.two {
            min-width: 200px;
            & > li {
              & a {
                padding: 15px; border-bottom: 1px solid var(--borderr-color);
                &::before { content: ""; position: absolute; bottom: -1px; left: 0px; background: linear-gradient(90deg, var(--white-color), var(--primary-color), var(--white-color)); width: 100%; height: 1px; transform: scaleX(0); transform-origin: left center; transition: 0.4s ease-in; z-index: 1; display: block; }
                &:hover {
                  &::before { transform: scale(1); }
                }
              }
              &:last-child {
                & a {
                  border-bottom: unset;
                  &::before { display: none; }
                }
              }
            }
          }
        }
        & .mega-menu {
          position: absolute; left: 0px; right: 0px; top: auto; margin: 0px; display: none; min-width: 495px; background: var(--white-color); padding: 25px 30px; border: 1px solid var(--borderr-color);
          & .menu-row {
            columns: 2; border-bottom: 1px solid rgb(217, 217, 217); margin-bottom: 20px;
            & > li {
              display: flex; align-items: center; gap: 10px; position: relative; padding: 0px; margin-bottom: 30px;
              & .artists-img {
                padding: 0px;
                &::after { display: none; }
                & img { border-radius: 4px; min-width: 56px; max-width: 56px; height: 54px; }
              }
              & .artists-content {
                & h6 {
                  margin-bottom: 0px;
                  & > a {
                    color: var(--title-color); font-family: var(--font-worksans); font-size: 16px; font-weight: 500; line-height: 1.4; display: inline-block; background-image: ; background-attachment: ; background-origin: ; background-clip: ; background-color: ; background-repeat: no-repeat; background-size: 0px 1px; background-position: 0% 100%; transition: background-size 0.75s;
                    &:hover { background-size: 100% 1px; background-position: left 100%; }
                  }
                }
                & span { color: var(--text-color); font-family: var(--font-worksans); font-size: 14px; font-weight: 400; line-height: 1; }
              }
              &.active {
                & > a {
                  color: var(--primary-color);
                  & .content {
                    & h6 { background: linear-gradient(rgb(11, 12, 12) 0%, rgb(11, 12, 12) 98%) left 100% / 100% 1px no-repeat; transition: background-size 0.75s; }
                  }
                }
                & .dropdown-icon { color: var(--primary-color); }
                & .dropdown-icon2 { color: var(--primary-color); }
              }
              & .sub-menu {
                left: 100%; position: absolute; max-width: 230px; min-width: 215px; background: var(--white-color); top: 0px;
                @media only screen and (max-width: 991px) {
                  margin-left: 10px; position: unset; max-width: 230px; min-width: 215px; background: transparent; top: 0px;
                }
                & > li {
                  & i { display: block; }
                }
              }
            }
          }
          & .all-btn {
            & > a {
              color: var(--title-color); font-family: var(--font-worksans); font-size: 14px; font-weight: 500; line-height: 1; background-image: ; background-attachment: ; background-origin: ; background-clip: ; background-color: ; background-repeat: no-repeat; background-size: 100% 1px; background-position: left 100%; transition: background-size 0.75s; padding-bottom: 1px; display: inline-flex; justify-content: center;
              &:hover { background-size: 0px 1px; background-position: 0% 100%; }
            }
          }
        }
        & .mega-menu2 {
          position: absolute; left: 0px; top: auto; margin: 0px; display: none; min-width: max-content; background: var(--white-color); padding: 25px 30px; border: 1px solid var(--borderr-color);
          & .menu-row {
            display: flex; justify-content: space-between;
            & .menu-single-item {
              padding: 0px 40px 0px 0px; position: relative;
              &::after { content: ""; position: absolute; top: 50%; transform: translateY(-50%); right: 0px; width: 1px; height: 131px; background-color: rgb(217, 217, 217); }
              &:last-child {
                padding-right: 0px;
                &::after { display: none; }
              }
              & .menu-title {
                margin-bottom: 18px;
                & h6 { color: var(--title-color); font-family: var(--font-worksans); font-size: 16px; font-weight: 500; line-height: 1.3; margin-bottom: 0px; }
              }
              & ul {
                & li {
                  margin-bottom: 13px; padding: 0px; display: block;
                  &:last-child { margin-bottom: 0px; }
                  & a {
                    color: var(--text-color); font-family: var(--font-worksans); font-size: 14px; font-weight: 400; line-height: 1; padding: 0px; transition: 0.5s;
                    &::after { display: none; }
                    &:hover { color: var(--title-color); font-weight: 500; }
                  }
                  & .all-btn {
                    & span {
                      color: var(--title-color); font-family: var(--font-worksans); font-size: 14px; font-weight: 500; line-height: 1; background-image: ; background-attachment: ; background-origin: ; background-clip: ; background-color: ; background-repeat: no-repeat; background-size: 100% 1px; background-position: left 100%; transition: background-size 0.75s; padding-bottom: 1px; display: inline-flex; justify-content: center;
                      &:hover { background-size: 0px 1px; background-position: 0% 100%; }
                    }
                  }
                  &.active {
                    & a { color: var(--title-color); font-weight: 500; }
                  }
                }
              }
            }
          }
          & .all-btn {
            & > a {
              color: var(--title-color); font-family: var(--font-worksans); font-size: 14px; font-weight: 500; line-height: 1; background-image: ; background-attachment: ; background-origin: ; background-clip: ; background-color: ; background-repeat: no-repeat; background-size: 100% 1px; background-position: left 100%; transition: background-size 0.75s; padding-bottom: 1px; display: inline-flex; justify-content: center;
              &:hover { background-size: 0px 1px; background-position: 0% 100%; }
            }
          }
          & .auction-card-area {
            padding-top: 35px;
            & .auction-card {
              display: grid; grid-template-columns: 42% 58%; box-shadow: rgba(0, 0, 0, 0.14) 2px 4px 12px 0px;
              & .auction-card-img-wrap {
                & .card-img {
                  height: 100%;
                  & img { height: 100%; }
                }
                & .batch {
                  top: 6px;
                  & span { font-size: 12px; font-weight: 400; padding: 4px 9px; }
                }
                & .countdown-timer {
                  width: 100%; height: 26px; bottom: 15px; border-radius: unset;
                  & ul {
                    gap: 2px;
                    & li { padding: 0px; font-size: 12px; }
                  }
                }
              }
              & .auction-card-content {
                padding: 25px 12px; border: unset;
                & h6 {
                  margin-bottom: 2px;
                  & a { font-size: 14px; }
                }
                & ul {
                  & li {
                    font-size: 14px; padding: 0px; margin-bottom: 0px;
                    & span { font-size: 12px; }
                  }
                }
              }
            }
          }
        }
        &.menu-item-has-children {
          transition: 0.55s ease-in-out;
          &::after { content: ""; font-family: bootstrap-icons; font-weight: 500; position: absolute; top: 18px; right: 8px; font-size: 12px; color: var(--title-color); transition: 0.55s ease-in-out; }
          &:hover {
            &::after { content: ""; }
          }
        }
        &:hover {
          & > a {
            color: var(--primary-color);
            &::after { transform-origin: left center; transform: scale(1, 1); }
          }
          & > ul.sub-menu { }
          & .mega-menu { }
          & .mega-menu2 { }
        }
        &.active {
          & > a {
            &::before { content: ""; position: absolute; bottom: 16px; left: 0px; width: 100%; height: 1px; background-color: var(--primary-color); }
          }
          & svg { opacity: 1; }
          & .dropdown-icon2 { color: var(--primary-color); }
        }
      }
    }
  }
  & .nav-right {
    display: flex; align-items: center; gap: 15px;
    & .language-area {
      position: relative;
      & .language-btn {
        display: flex; align-items: center; gap: 14px; cursor: pointer;
        & svg { fill: var(--title-color); transition: 0.5s; }
        & span {
          color: var(--title-color); font-family: var(--font-worksans); font-size: 16px; font-weight: 400; line-height: 1; transition: 0.5s; display: flex; align-items: center; gap: 7px;
          & svg { fill: var(--title-color); }
        }
      }
      & .language-list {
        padding: 0px; margin: 0px; list-style: none; position: absolute; top: 35px; left: 0px; z-index: 9999; width: 180px; background-color: var(--white-color); box-shadow: rgba(8, 0, 42, 0.08) 0px 30px 80px; display: none; transform: scaleY(0); transform-origin: center top;
        &.active { display: block; transform: scaleY(1); animation: 0.5s linear 0s 1 normal none running fade-up2; }
        & li {
          & a {
            color: var(--title-color); font-family: var(--font-worksans); font-weight: 500; text-transform: capitalize; font-size: 14px; padding: 10px 20px; width: 100%; display: flex; align-items: center; transition: 0.35s;
            &:hover { color: var(--white-color); background-color: var(--primary-color); }
          }
        }
      }
    }
    & .wishlist-btn {
      width: 44px; height: 48px; border-radius: 6px; border: 1px solid var(--borderr-color); display: flex; align-items: center; justify-content: center; transition: 0.5s;
      & svg { fill: var(--title-color); transition: 0.5s; }
      &:hover {
        background-color: var(--primary-color);
        & svg { fill: var(--white-color); }
      }
    }
    & .header-btn {
      color: var(--white-color); font-family: var(--font-worksans); font-size: 16px; font-weight: 500; background-color: var(--primary-color); border-radius: 6px; padding: 15px 18px; white-space: nowrap; overflow: hidden; position: relative; z-index: 1; transition: 0.6s; display: inline-flex; align-items: center; line-height: 1; gap: 6px; border: 1px solid transparent;
      &::before { content: ""; display: block; position: absolute; bottom: 0px; left: 0px; width: 100%; background-image: ; background-attachment: ; background-origin: ; background-clip: ; background-color: ; background-repeat: no-repeat; background-size: 100% 1px; background-position: left 100%; transition: background-size 0.75s; }
      & svg { fill: var(--white-color); transition: 0.6s; }
      & strong { position: absolute; display: block; width: 0px; height: 0px; border-radius: 36px; background-color: var(--white-color); transition: 0.6s; transform: translate(-50%, -50%); z-index: -1; }
      &:hover {
        color: var(--title-color); border-color: var(--primary-color); text-decoration: none;
        & svg { fill: var(--title-color); }
        & strong { width: 225%; height: 1000.5px; }
      }
    }
    & .mobile-menu-btn { display: none; visibility: hidden; }
    & .dark-light-switch {
      cursor: pointer; line-height: 1;
      & i { color: var(--title-color); font-size: 18px; }
    }
  }
  & .header-btn {
    color: var(--white-color); font-family: var(--font-worksans); font-size: 16px; font-weight: 500; background-color: var(--primary-color); border-radius: 6px; padding: 15px 18px; white-space: nowrap; overflow: hidden; position: relative; z-index: 1; transition: 0.6s; display: inline-flex; align-items: center; justify-content: center; line-height: 1; gap: 6px; border: 1px solid transparent; width: 100%;
    &::before { content: ""; display: block; position: absolute; bottom: 0px; left: 0px; width: 100%; background-image: ; background-attachment: ; background-origin: ; background-clip: ; background-color: ; background-repeat: no-repeat; background-size: 100% 1px; background-position: left 100%; transition: background-size 0.75s; }
    & svg { fill: var(--white-color); transition: 0.6s; }
    & strong { position: absolute; display: block; width: 0px; height: 0px; border-radius: 36px; background-color: var(--white-color); transition: 0.6s; transform: translate(-50%, -50%); z-index: -1; }
    &:hover {
      color: var(--title-color); border-color: var(--primary-color); text-decoration: none;
      & svg { fill: var(--title-color); }
      & strong { width: 225%; height: 1000.5px; }
    }
  }
  & .search-area {
    width: 100%; margin-bottom: 20px;
    & form {
      width: 100%;
      & .form-inner {
        display: flex; align-items: center; max-width: 760px; width: 100%; background-color: rgb(250, 248, 248); border-radius: 6px; padding: 0px 15px;
        & input {
          background: transparent; border: unset; border-radius: 5px 0px 0px 5px; width: 100%; height: 52px; padding: 10px 10px 10px 0px; font-family: var(--font-worksans); font-weight: 400; font-size: 14px; color: var(--text-color);
          &::placeholder { color: rgb(125, 125, 125); }
        }
        & button {
          background-color: transparent;
          & svg { fill: var(--text-color); }
        }
      }
    }
  }
  & .mobile-logo-area {
    & .mobile-logo-wrap {
      & img {
        width: 138px;
        &.dark { display: none; }
      }
    }
    & .menu-close-btn {
      height: 32px; width: 32px; border-radius: 50%; border: 1px solid var(--title-color); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.35s;
      & i { font-size: 26px; line-height: 1; margin-top: 2px; color: var(--title-color); transition: 0.35s; }
      &:hover {
        background-color: var(--title-color);
        & i { color: var(--white-color); }
      }
    }
  }
  @media only screen and (max-width: 991px) {
    & .dropdown-icon { color: var(--white-color); }
    & .main-menu {
      position: fixed; top: 0px; left: 0px; width: 280px; z-index: 99999; height: 100%; overflow: auto; background: var(--white-color); border-right: 1px solid var(--borderr-color); transform: translateX(-100%); transition: transform 0.3s ease-in, -webkit-transform 0.3s ease-in; padding: 30px 20px !important;
      &.show-menu { transform: translateX(0px); }
      & .mobile-menu-logo { text-align: left; padding-top: 20px; display: block; padding-bottom: 8px; }
      & .menu-list { padding-top: 50px; padding-bottom: 30px; }
      & > ul {
        float: none; text-align: left; padding: 5px 0px 20px;
        & > li {
          display: block; position: relative; padding: 0px;
          & i { display: none; }
          &.menu-item-has-children {
            & i { display: block; }
          }
          & > a { padding: 15px 0px; display: block; }
          & ul.sub-menu {
            position: static; min-width: 200px; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; opacity: 1; visibility: visible; transform: translateY(0px); padding-left: 10px;
            & > li {
              border-bottom: 1px solid transparent;
              & i { display: none; }
              &.menu-item-has-children {
                & i { display: block; }
              }
              & a {
                color: var(--title-color); padding: 12px 0px;
                &:hover { color: var(--primary-color); margin-left: 10px; }
              }
              & a.active { color: var(--primary-color); }
              & i { color: var(--primary-color); right: -13px; }
            }
          }
          & .mega-menu {
            position: static; min-width: 200px; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; opacity: 1; visibility: visible; transform: translateY(0px); padding: 15px 0px 15px 10px;
            & .menu-row {
              columns: unset; padding-bottom: 20px; margin-bottom: 15px;
              & + i { display: none !important; }
              & > li {
                margin-bottom: 20px;
                &:last-child { margin-bottom: 0px; }
              }
            }
          }
          & .mega-menu2 {
            position: static; min-width: 200px; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; opacity: 1; visibility: visible; transform: translateY(0px); padding: 15px 0px 15px 10px;
            & .menu-row {
              display: block;
              & .menu-single-item {
                padding: 0px; display: block; margin-bottom: 20px;
                &:last-child { margin-bottom: 0px; }
                &::after { display: none; }
                & .menu-title {
                  & h6 { border-bottom: 1px solid var(--primary-color); display: inline-block; }
                }
                & ul {
                  padding-left: 10px;
                  & li { margin-bottom: 15px; }
                }
              }
            }
          }
          & .bi { top: 11px; font-size: 20px; color: var(--title-color); line-height: 1; }
        }
      }
    }
  }
}
header.style-2 {
  position: relative; width: 100%; z-index: 99; transition: 0.8s ease-out; background-color: transparent; border-bottom: 1px solid var(--borderr-color);
  &.sticky { position: fixed; top: 0px; left: 0px; width: 100%; box-sizing: border-box; background-color: var(--white-color); box-shadow: rgba(0, 72, 88, 0.1) 5px 3px 40px; z-index: 9999; padding-top: 0px !important; padding-bottom: 0px !important; }
  & .header-logo {
    & a {
      & img {
        width: 138px;
        &.dark { display: none; }
      }
    }
  }
  & .main-menu {
    display: inline-block; position: relative;
    & ul {
      list-style: none; margin: 0px; padding: 0px;
      & > li {
        display: inline-block; position: relative; padding: 0px 25px;
        &:first-child { padding-left: 0px; }
        & > a {
          color: var(--title-color); display: block; text-transform: capitalize; padding: 37px 0px; font-family: var(--font-worksans); font-weight: 500; font-size: 16px; transition: 0.5s ease-out; position: relative; border-radius: 15px; line-height: 1;
          &::after { content: ""; display: block; position: absolute; bottom: 34px; left: 0px; width: 100%; border-bottom: 1px solid var(--title-color); transform-origin: right center; transform: scale(0, 1); transition: transform 0.5s; }
        }
        &.current-menu-item, &.current_page_item, &.current-menu-ancestor, &.current-menu-parent {
          & a {
            &::after { transform-origin: left center; transform: scale(1, 1); }
          }
        }
        & i {
          font-size: 20px; text-align: center; color: var(--white-color); font-style: normal; position: absolute; right: -5px; top: 35px; z-index: 999; cursor: pointer; display: none; transition: 0.5s ease-out; opacity: 0;
          &.active {
            color: var(--primary-color);
            &::before { content: ""; }
          }
        }
        & ul.sub-menu {
          position: absolute; left: 0px; right: 0px; top: auto; margin: 0px; display: none; min-width: 265px; background: var(--white-color); border: 1px solid rgba(13, 23, 32, 0.08); text-align: left;
          & > li {
            padding: 0px; display: block; position: relative;
            &.menu-item-has-children {
              &::after { top: 15px; }
            }
            & i { position: absolute; top: 10px; right: 6px; color: var(--title-color); font-size: 20px; display: none; }
            & .dropdown-icon { color: var(--title-color); opacity: 1; top: 15px; font-size: 13px; right: 15px; }
            & .dropdown-icon2 { color: var(--title-color); opacity: 1; top: 14px; right: 10px; font-size: 13px; }
            & > a {
              display: flex; gap: 20px; padding: 25px 35px 5px; font-family: var(--font-worksans); color: var(--title-color); font-weight: 500; text-transform: capitalize; font-size: 13px; line-height: 1.4; transition: 0.4s ease-out; position: relative; border-radius: 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial;
              &::after { display: none; }
              &:hover { color: var(--primary-color); }
              & .icon {
                margin-top: 5px;
                & svg { fill: var(--title-color); }
              }
              & .content {
                & h6 { color: var(--title-color); font-family: var(--font-worksans); font-size: 16px; font-weight: 500; line-height: 1.3; margin-bottom: 5px; display: inline-block; background-image: ; background-attachment: ; background-origin: ; background-clip: ; background-color: ; background-repeat: no-repeat; background-size: 0px 1px; background-position: 0% 100%; transition: background-size 0.75s; }
                & p { color: var(--text-color); font-family: var(--font-worksans); font-size: 14px; font-weight: 400; line-height: 20px; margin-bottom: 0px; }
              }
              &.active { color: var(--primary-color); }
            }
            &.current-menu-item, &.current_page_item, &.current-menu-ancestor, &.current-menu-parent {
              & a { font-weight: 600; color: var(--primary-color); }
            }
            &:last-child {
              & a {
                padding-bottom: 25px;
                &::before { display: none; }
              }
              & .sub-menu {
                & li {
                  & i { display: none; }
                  & a {
                    border-bottom: 1px solid rgba(13, 23, 32, 0.08);
                    &::before { display: block; }
                  }
                  &:last-child {
                    & a {
                      border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor;
                      &::before { display: none; }
                    }
                  }
                }
              }
            }
            &:hover {
              & > a {
                color: var(--primary-color);
                & .content {
                  & h6 { background-size: 100% 1px; background-position: left 100%; }
                }
              }
              & .dropdown-icon { color: var(--primary-color); }
              & .dropdown-icon2 { color: var(--primary-color); }
            }
            &.active {
              & > a {
                font-weight: 600;
                & .content {
                  & h6 { background-image: ; background-attachment: ; background-origin: ; background-clip: ; background-color: ; background-size: 100% 1px; background-repeat: no-repeat; background-position: left 100%; transition: background-size 0.75s; }
                }
                &::before { display: none; }
              }
              & .dropdown-icon { color: var(--primary-color); }
              & .dropdown-icon2 { color: var(--primary-color); }
            }
            & .sub-menu {
              left: 100%; position: absolute; max-width: 230px; min-width: 215px; background: var(--white-color); top: 0px;
              &::before { display: none; visibility: hidden; }
              @media only screen and (max-width: 991px) {
                margin-left: 10px; position: unset; max-width: 230px; min-width: 215px; background: transparent; top: 0px;
              }
              & > li {
                & i { display: block; }
              }
            }
            &:last-child { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }
          }
          &.two {
            min-width: 200px;
            & > li {
              & a {
                padding: 15px; border-bottom: 1px solid var(--borderr-color);
                &::before { content: ""; position: absolute; bottom: -1px; left: 0px; background: linear-gradient(90deg, var(--white-color), var(--primary-color), var(--white-color)); width: 100%; height: 1px; transform: scaleX(0); transform-origin: left center; transition: 0.4s ease-in; z-index: 1; display: block; }
                &:hover {
                  &::before { transform: scale(1); }
                }
              }
              &:last-child {
                & a {
                  &::before { display: none; }
                }
              }
            }
          }
        }
        & .mega-menu {
          position: absolute; left: 0px; right: 0px; top: auto; margin: 0px; display: none; min-width: 495px; background: var(--white-color); padding: 25px 30px; border: 1px solid var(--borderr-color);
          & .menu-row {
            columns: 2; border-bottom: 1px solid rgb(217, 217, 217); margin-bottom: 20px;
            & > li {
              display: flex; align-items: center; gap: 10px; position: relative; padding: 0px; margin-bottom: 30px;
              & .artists-img {
                padding: 0px;
                &::after { display: none; }
                & img { border-radius: 4px; min-width: 56px; max-width: 56px; height: 54px; }
              }
              & .artists-content {
                & h6 {
                  margin-bottom: 0px;
                  & > a {
                    color: var(--title-color); font-family: var(--font-worksans); font-size: 16px; font-weight: 500; line-height: 1.4; display: inline-block; background-image: ; background-attachment: ; background-origin: ; background-clip: ; background-color: ; background-repeat: no-repeat; background-size: 0px 1px; background-position: 0% 100%; transition: background-size 0.75s;
                    &:hover { background-size: 100% 1px; background-position: left 100%; }
                  }
                }
                & span { color: var(--text-color); font-family: var(--font-worksans); font-size: 14px; font-weight: 400; line-height: 1; }
              }
              &.active {
                & > a {
                  color: var(--primary-color);
                  & .content {
                    & h6 { background: linear-gradient(rgb(11, 12, 12) 0%, rgb(11, 12, 12) 98%) left 100% / 100% 1px no-repeat; transition: background-size 0.75s; }
                  }
                }
                & .dropdown-icon { color: var(--primary-color); }
                & .dropdown-icon2 { color: var(--primary-color); }
              }
              & .sub-menu {
                left: 100%; position: absolute; max-width: 230px; min-width: 215px; background: var(--white-color); top: 0px;
                @media only screen and (max-width: 991px) {
                  margin-left: 10px; position: unset; max-width: 230px; min-width: 215px; background: transparent; top: 0px;
                }
                & > li {
                  & i { display: block; }
                }
              }
            }
          }
          & .all-btn {
            & > a {
              color: var(--title-color); font-family: var(--font-worksans); font-size: 14px; font-weight: 500; line-height: 1; background-image: ; background-attachment: ; background-origin: ; background-clip: ; background-color: ; background-repeat: no-repeat; background-size: 100% 1px; background-position: left 100%; transition: background-size 0.75s; padding-bottom: 1px; display: inline-flex; justify-content: center;
              &:hover { background-size: 0px 1px; background-position: 0% 100%; }
            }
          }
        }
        & .mega-menu2 {
          position: absolute; left: 0px; top: auto; margin: 0px; display: none; min-width: max-content; background: var(--white-color); padding: 25px 30px; border: 1px solid var(--borderr-color);
          & .menu-row {
            display: flex; justify-content: space-between;
            & .menu-single-item {
              padding: 0px 40px 0px 0px; position: relative;
              &::after { content: ""; position: absolute; top: 50%; transform: translateY(-50%); right: 0px; width: 1px; height: 131px; background-color: rgb(217, 217, 217); }
              &:last-child {
                padding-right: 0px;
                &::after { display: none; }
              }
              & .menu-title {
                margin-bottom: 18px;
                & h6 { color: var(--title-color); font-family: var(--font-worksans); font-size: 16px; font-weight: 500; line-height: 1.3; margin-bottom: 0px; }
              }
              & ul {
                & li {
                  margin-bottom: 13px; padding: 0px; display: block;
                  &:last-child { margin-bottom: 0px; }
                  & a {
                    color: var(--text-color); font-family: var(--font-worksans); font-size: 14px; font-weight: 400; line-height: 1; padding: 0px; transition: 0.5s;
                    &::after { display: none; }
                    &:hover { color: var(--title-color); font-weight: 500; }
                  }
                  & .all-btn {
                    & span {
                      color: var(--title-color); font-family: var(--font-worksans); font-size: 14px; font-weight: 500; line-height: 1; background-image: ; background-attachment: ; background-origin: ; background-clip: ; background-color: ; background-repeat: no-repeat; background-size: 100% 1px; background-position: left 100%; transition: background-size 0.75s; padding-bottom: 1px; display: inline-flex; justify-content: center;
                      &:hover { background-size: 0px 1px; background-position: 0% 100%; }
                    }
                  }
                  &.active {
                    & a { color: var(--title-color); font-weight: 500; }
                  }
                }
              }
            }
          }
          & .all-btn {
            & > a {
              color: var(--title-color); font-family: var(--font-worksans); font-size: 14px; font-weight: 500; line-height: 1; background-image: ; background-attachment: ; background-origin: ; background-clip: ; background-color: ; background-repeat: no-repeat; background-size: 100% 1px; background-position: left 100%; transition: background-size 0.75s; padding-bottom: 1px; display: inline-flex; justify-content: center;
              &:hover { background-size: 0px 1px; background-position: 0% 100%; }
            }
          }
          & .auction-card-area {
            padding-top: 35px;
            & .auction-card {
              display: grid; grid-template-columns: 42% 58%; box-shadow: rgba(0, 0, 0, 0.14) 2px 4px 12px 0px;
              & .auction-card-img-wrap {
                & .card-img {
                  height: 100%;
                  & img { height: 100%; }
                }
                & .batch {
                  top: 6px;
                  & span { font-size: 12px; font-weight: 400; padding: 4px 9px; }
                }
                & .countdown-timer {
                  width: 100%; height: 26px; bottom: 15px; border-radius: unset;
                  & ul {
                    gap: 2px;
                    & li { padding: 0px; font-size: 12px; }
                  }
                }
              }
              & .auction-card-content {
                padding: 25px 12px; border: unset;
                & h6 {
                  margin-bottom: 2px;
                  & a { font-size: 14px; }
                }
                & ul {
                  & li {
                    font-size: 14px; padding: 0px; margin-bottom: 0px;
                    & span { font-size: 12px; }
                  }
                }
              }
            }
          }
        }
        &.menu-item-has-children {
          transition: 0.55s ease-in-out;
          &::after { content: ""; font-family: bootstrap-icons; font-weight: 500; position: absolute; top: 36px; right: 8px; font-size: 12px; color: var(--title-color); transition: 0.55s ease-in-out; }
          &:hover {
            &::after { content: ""; }
          }
        }
        &:hover {
          & > a {
            color: var(--primary-color);
            &::after { transform-origin: left center; transform: scale(1, 1); }
          }
          & > ul.sub-menu { }
          & .mega-menu { }
          & .mega-menu2 { }
        }
        &.active {
          & > a {
            &::before { content: ""; position: absolute; bottom: 34px; left: 0px; width: 100%; height: 1px; background-color: var(--primary-color); }
          }
          & svg { opacity: 1; }
          & .dropdown-icon2 { color: var(--primary-color); }
        }
      }
    }
  }
  & .nav-right {
    display: flex; align-items: center; gap: 15px;
    & .language-area {
      position: relative;
      & .language-btn {
        display: flex; align-items: center; gap: 14px; cursor: pointer;
        & svg { fill: var(--title-color); transition: 0.5s; }
        & span {
          color: var(--title-color); font-family: var(--font-worksans); font-size: 16px; font-weight: 400; line-height: 1; transition: 0.5s; display: flex; align-items: center; gap: 7px;
          & svg { fill: var(--title-color); }
        }
      }
      & .language-list {
        padding: 0px; margin: 0px; list-style: none; position: absolute; top: 35px; left: 0px; z-index: 9999; width: 180px; background-color: var(--white-color); box-shadow: rgba(8, 0, 42, 0.08) 0px 30px 80px; display: none; transform: scaleY(0); transform-origin: center top;
        &.active { display: block; transform: scaleY(1); animation: 0.5s linear 0s 1 normal none running fade-up2; }
        & li {
          & a {
            color: var(--title-color); font-family: var(--font-worksans); font-weight: 500; text-transform: capitalize; font-size: 14px; padding: 10px 20px; width: 100%; display: flex; align-items: center; transition: 0.35s;
            &:hover { color: var(--white-color); background-color: var(--primary-color); }
          }
        }
      }
    }
    & .wishlist-btn {
      min-width: 44px; min-height: 48px; border-radius: 6px; border: 1px solid var(--borderr-color); display: flex; align-items: center; justify-content: center; transition: 0.5s;
      & svg { fill: var(--title-color); transition: 0.5s; }
      &:hover {
        background-color: var(--primary-color);
        & svg { fill: var(--white-color); }
      }
    }
    & .mobile-menu-btn { display: none; visibility: hidden; }
    & .dark-light-switch {
      cursor: pointer; line-height: 1;
      & i { color: var(--title-color); font-size: 18px; }
    }
  }
  & .header-btn {
    color: var(--white-color); font-family: var(--font-worksans); font-size: 16px; font-weight: 500; background-color: var(--primary-color); border-radius: 6px; padding: 15px 18px; white-space: nowrap; overflow: hidden; position: relative; z-index: 1; transition: 0.6s; display: inline-flex; align-items: center; justify-content: center; line-height: 1; gap: 6px; border: 1px solid transparent; width: 100%;
    &::before { content: ""; display: block; position: absolute; bottom: 0px; left: 0px; width: 100%; background-image: ; background-attachment: ; background-origin: ; background-clip: ; background-color: ; background-repeat: no-repeat; background-size: 100% 1px; background-position: left 100%; transition: background-size 0.75s; }
    & svg { fill: var(--white-color); transition: 0.6s; }
    & strong { position: absolute; display: block; width: 0px; height: 0px; border-radius: 36px; background-color: var(--white-color); transition: 0.6s; transform: translate(-50%, -50%); z-index: -1; }
    &:hover {
      color: var(--title-color); border-color: var(--primary-color); text-decoration: none;
      & svg { fill: var(--title-color); }
      & strong { width: 225%; height: 1000.5px; }
    }
  }
  & .search-area {
    width: 100%; margin-bottom: 20px;
    & form {
      width: 100%;
      & .form-inner {
        display: flex; align-items: center; max-width: 760px; width: 100%; background-color: rgb(250, 248, 248); padding: 0px 15px;
        & input {
          background: transparent; border: unset; border-radius: 5px 0px 0px 5px; width: 100%; height: 52px; padding: 10px 10px 10px 0px; font-family: var(--font-worksans); font-weight: 400; font-size: 14px; color: var(--text-color);
          &::placeholder { color: rgb(125, 125, 125); }
        }
        & button {
          background-color: transparent;
          & svg { fill: var(--text-color); }
        }
      }
    }
  }
  & .mobile-logo-area {
    & .mobile-logo-wrap {
      & img {
        width: 138px;
        &.dark { display: none; }
      }
    }
    & .menu-close-btn {
      height: 32px; width: 32px; border-radius: 50%; border: 1px solid var(--title-color); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.35s;
      & i { font-size: 26px; line-height: 1; margin-top: 2px; color: var(--title-color); transition: 0.35s; }
      &:hover {
        background-color: var(--title-color);
        & i { color: var(--white-color); }
      }
    }
  }
  @media only screen and (max-width: 991px) {
    & .dropdown-icon { color: var(--white-color); }
    & .main-menu {
      position: fixed; top: 0px; left: 0px; width: 280px; z-index: 99999; height: 100%; overflow: auto; background: var(--white-color); border-right: 1px solid var(--borderr-color); transform: translateX(-100%); transition: transform 0.3s ease-in, -webkit-transform 0.3s ease-in; padding: 30px 20px !important;
      &.show-menu { transform: translateX(0px); }
      & .mobile-menu-logo { text-align: left; padding-top: 20px; display: block; padding-bottom: 8px; }
      & .menu-list { padding-top: 50px; padding-bottom: 30px; }
      & > ul {
        float: none; text-align: left; padding: 5px 0px 20px;
        & > li {
          display: block; position: relative; padding: 0px;
          & i { display: none; }
          &.menu-item-has-children {
            & i { display: block; }
          }
          & > a { padding: 15px 0px; display: block; }
          & ul.sub-menu {
            position: static; min-width: 200px; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; opacity: 1; visibility: visible; transform: translateY(0px); padding-left: 10px;
            & > li {
              border-bottom: 1px solid transparent;
              & i { display: none; }
              &.menu-item-has-children {
                & i { display: block; }
              }
              & a {
                color: var(--title-color); padding: 12px 0px;
                &:hover { color: var(--primary-color); margin-left: 10px; }
              }
              & a.active { color: var(--primary-color); }
              & i { color: var(--primary-color); right: -13px; }
            }
          }
          & .mega-menu {
            position: static; min-width: 200px; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; opacity: 1; visibility: visible; transform: translateY(0px); padding: 15px 0px 15px 10px;
            & .menu-row {
              columns: unset; padding-bottom: 20px; margin-bottom: 15px;
              & > li {
                margin-bottom: 20px;
                &:last-child { margin-bottom: 0px; }
              }
            }
          }
          & .mega-menu2 {
            position: static; min-width: 200px; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; opacity: 1; visibility: visible; transform: translateY(0px); padding: 15px 0px 15px 10px;
            & .menu-row {
              display: block;
              & .menu-single-item {
                padding: 0px; display: block; margin-bottom: 20px;
                &:last-child { margin-bottom: 0px; }
                &::after { display: none; }
                & .menu-title {
                  & h6 { border-bottom: 1px solid var(--primary-color); display: inline-block; }
                }
                & ul {
                  padding-left: 10px;
                  & li { margin-bottom: 15px; }
                }
              }
            }
          }
          & .bi { top: 11px; font-size: 20px; color: var(--title-color); line-height: 1; }
        }
      }
    }
  }
}
.home1-banner-section {
  position: relative;
  & .banner-bg { min-height: 780px; background-size: cover; background-position: center center; background-repeat: no-repeat; }
  & .banner-wrapper {
    position: absolute; bottom: 0px; left: 0px; width: 100%; z-index: 1; padding: 90px 0px;
    & .banner-content {
      & h1 { color: var(--dark-white-color); font-family: var(--font-playfair); font-size: 70px; font-weight: 900; line-height: 1.2; letter-spacing: 0.04em; margin-bottom: 20px; }
      & p { color: var(--text-color-white); font-family: var(--font-worksans); font-size: 18px; font-weight: 400; line-height: 1.7; max-width: 554px; width: 100%; margin-bottom: 50px; }
      & .primary-btn1 {
        &:hover { border-color: var(--dark-primary-color); }
      }
    }
  }
  & .pagination-area {
    display: flex; justify-content: center;
    & .swiper-pagination1 {
      position: absolute; bottom: 25px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; width: unset; z-index: 9; gap: 5px;
      & .swiper-pagination-bullet {
        height: 4px; width: 16px; background-color: rgb(172, 172, 172); opacity: 1; position: relative; border-radius: 8px;
        &.swiper-pagination-bullet-active { width: 100px; }
      }
    }
  }
}
.home1-about-section {
  & .about-content-wrap {
    & .about-content {
      text-align: center;
      & h3 { color: var(--title-color); font-family: var(--font-playfair); font-size: 32px; font-weight: 600; line-height: 1.2; margin-bottom: 25px; }
      & p { color: var(--text-color); font-family: var(--font-worksans); font-size: 18px; font-weight: 400; line-height: 1.6; margin-bottom: 30px; }
      & ul {
        padding: 0px; list-style: none; width: 100%; margin: 0px auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
        & li {
          & svg { fill: none; stroke: rgb(14, 214, 120); }
          color: var(--title-color); font-family: var(--font-worksans); font-size: 18px; font-weight: 500; line-height: 1; display: flex; align-items: center; gap: 8px;
        }
      }
      & .learn-btn { position: relative; left: unset; bottom: unset; width: 120px; height: 120px; font-size: 18px; margin: 25px auto 0px; }
    }
    & .countdown-wrap {
      margin: 50px 0px; padding: 12px 28px 12px 40px; background-color: rgb(249, 249, 249); border: 1px solid var(--borderr-color); border-radius: 6px;
      & .countdown-list {
        padding: 0px; margin: 0px; list-style: none; display: flex; align-items: center; flex-wrap: wrap; gap: 70px;
        & .single-countdown {
          text-align: center; position: relative;
          &::after { content: ""; position: absolute; top: 50%; transform: translateY(-50%); left: -35px; width: 1px; height: 48px; background-color: rgb(217, 217, 217); }
          &:first-child {
            &::after { display: none; }
          }
          & .number {
            display: flex; justify-content: center; margin-bottom: 10px;
            & h3, & strong { color: var(--title-color); font-family: var(--font-playfair); font-size: 32px; font-weight: 600; line-height: 1; margin-bottom: 0px; }
          }
          & span { color: var(--text-color); font-family: var(--font-worksans); font-size: 18px; font-weight: 500; line-height: 1; }
        }
      }
    }
  }
  & .about-img-wrap { position: relative; }
  & .learn-btn {
    color: var(--white-color); font-family: var(--font-worksans); font-size: 20px; font-weight: 500; line-height: 23.46px; text-align: center; width: 150px; height: 150px; background-color: var(--primary-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; position: absolute; bottom: 60px; left: -65px; transition: 0.8s;
    &:hover { box-shadow: inset 0 0 0 10em var(--white-color); color: var(--title-color); }
  }
}
.home1-artistic-section {
  background-color: var(--section-bg-color); padding: 90px 0px;
  & .artistic-content {
    padding-top: 40px;
    & h3 { color: var(--title-color); font-family: var(--font-playfair); font-size: 32px; font-weight: 600; line-height: 1.2; margin-bottom: 25px; }
    & p { color: var(--text-color); font-family: var(--font-worksans); font-size: 18px; font-weight: 400; line-height: 1.6; margin-bottom: 0px; }
    & ul {
      margin: 0px; list-style: none; padding: 25px 0px;
      & li {
        & svg { fill: rgb(14, 214, 120); }
        color: var(--title-color); font-family: var(--font-worksans); font-size: 18px; font-weight: 500; line-height: 1.3; display: flex; align-items: center; gap: 15px; margin-bottom: 20px;
        &:last-child { margin-bottom: 0px; }
        & .elementor-icon-list-text { font-family: var(--font-worksans); font-size: 18px; font-weight: 500; line-height: 1.3; color: var(--title-color) !important; }
      }
    }
  }
}
.list-grid-product-wrap {
  &.column-2-wrapper {
    & .item { width: 50%; }
    & .auction-card {
      & .auction-card-img-wrap {
        & .countdown-timer { width: 380px; }
      }
      & .auction-card-content {
        & h6 {
          & a { font-size: 20px; }
        }
      }
    }
  }
  &.column-3-wrapper {
    & .item { width: 33.33%; }
  }
}
.auction-card {
  &.sidebar-card {
    & .auction-card-content {
      padding: 16px 13px;
      & ul { margin-bottom: 0px; }
    }
  }
  & .auction-card-img-wrap {
    position: relative;
    & .card-img {
      position: relative; overflow: hidden; display: block;
      & img { height: auto; transition: 0.5s ease-out; }
      &::after { position: absolute; width: 200%; height: 0%; left: 50%; top: 50%; background-color: rgba(255, 255, 255, 0.3); transform: translate(-50%, -50%) rotate(-45deg); content: ""; z-index: 1; }
    }
    & .batch {
      position: absolute; top: 15px; left: 0px;
      & span {
        color: var(--dark-white-color); font-family: var(--font-worksans); font-size: 14px; font-weight: 500; line-height: 1; display: inline-flex; align-items: center; gap: 4px; background-color: rgb(223, 33, 33); border-radius: 0px 4px 4px 0px; padding: 6px 18px; margin-bottom: 5px;
        &:last-child { margin-bottom: 0px; }
        &.sold-out { background-color: rgb(169, 103, 27); }
        &.upcoming { background-color: rgb(48, 168, 111); }
      }
    }
    & .yith-add-to-wishlist-button-block, & .wishlist {
      position: absolute; top: 15px; right: 15px; z-index: 1; transform-origin: right center; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background-color: var(--dark-white-color); transition: 0.5s; margin: 0px;
      & span.yith-wcwl-add-to-wishlist-button__label { display: none !important; }
      & svg { color: var(--dark-title-color); transition: 0.5s; width: 18px; }
      &:hover {
        background-color: var(--dark-primary-color);
        & svg { color: var(--dark-white-color); }
      }
    }
    & .countdown-timer {
      position: absolute; left: 50%; bottom: -25px; transform: translateX(-50%); width: 282px; height: 60px; border-radius: 6px; line-height: 1; border: 1px solid var(--borderr-color); padding: 0px 15px; background: var(--white-color); box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px 0px; display: flex; align-items: center; justify-content: center; transition: 0.5s; opacity: 1;
      & ul {
        margin: 0px; padding: 0px; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px;
        & li {
          line-height: 1; color: var(--title-color); text-align: center; font-family: var(--font-worksans); font-size: 18px; font-weight: 500; display: flex; align-items: center;
          & span {
            display: inline-block;
            &:last-child { display: none; visibility: hidden; }
          }
        }
      }
      & .auction-time {
        width: 100%;
        & .auction-time-countdown {
          width: 100%; padding: 0px;
          & .countdown_row {
            display: flex; align-items: center; justify-content: space-between; gap: 12px;
            & .countdown_section {
              position: relative; width: auto; float: none; color: var(--title-color); font-family: var(--font-worksans);
              &::after { position: absolute; content: ":"; right: -18px; top: 5px; font-size: 20px; }
              & .countdown_amount { line-height: 1; color: var(--title-color); text-align: center; font-family: var(--font-worksans); font-size: 18px; font-weight: 500; }
            }
          }
        }
      }
    }
  }
  & .auction-card-content {
    padding: 100px 15px 25px; border-right-color: ; border-right-style: ; border-right-width: ; border-bottom-color: ; border-bottom-style: ; border-bottom-width: ; border-left-color: ; border-left-style: ; border-left-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-top: unset;
    & h6 {
      margin-bottom: 10px;
      margin-top: 20px;





      & a {
        color: var(--title-color); font-family: var(--font-worksans); font-size: 18px; font-weight: 500; line-height: 1.5; background-image: ; background-attachment: ; background-origin: ; background-clip: ; background-color: ; background-size: 0px 1px; background-repeat: no-repeat; background-position: right 100%; transition: background-size 0.75s;
        &:hover { background-size: 100% 1px; background-position: 0% 100%; }
      }
    }
    & ul {
      padding: 0px; margin: 0px 0px 20px; list-style: none;
      & li {
        color: var(--title-color); font-family: var(--font-worksans); font-size: 16px; font-weight: 500; line-height: 1.5; margin-bottom: 8px;
        &:last-child { margin-bottom: 0px; }
        & del { font-size: 90%; }
        & ins { text-decoration: none; }
        & span { font-weight: 400; color: var(--text-color); }
      }
    }
    & .bid-btn {
      background-color: transparent; padding: 9px 19px; border-radius: 6px; overflow: hidden; position: relative; border: 1px solid var(--primary-color); z-index: 1; white-space: nowrap; transition: 0.6s; display: inline-flex; align-items: center; line-height: 1; gap: 6px; color: var(--title-color); font-family: var(--font-worksans); font-size: 14px; font-weight: 500;
      & span { background-image: ; background-attachment: ; background-origin: ; background-clip: ; background-color: ; background-repeat: no-repeat; background-size: 0px 1px; background-position: 0% 100%; transition: background-size 0.75s; padding-bottom: 1px; }
      & strong { position: absolute; display: block; width: 0px; height: 0px; border-radius: 36px; background-color: var(--primary-color); transition: 0.6s; transform: translate(-50%, -50%); z-index: -1; }
      &:hover {
        border-color: var(--primary-color); color: var(--white-color);
        & span { background-size: 100% 1px; background-position: left 100%; }
        & strong { width: 225%; height: 1000.5px; }
      }
      &.disabled { pointer-events: none; cursor: not-allowed; opacity: 0.5; }
    }
  }
  &:hover {
    & .auction-card-img-wrap {
      & .card-img {
        & img { transform: scale(1.1); }
        &::after { height: 250%; transition: 600ms linear; background-color: transparent; }
      }
    }
  }
  &.general-art {
    & .auction-card-content { padding: 25px 15px; }
  }
  &.upcoming-auction {
    & .auction-card-content { padding: 25px 15px; }
  }
}
.home1-auction-slider-section {
  & .auction-slider-wrap {
    position: relative;
    & .slider-btn-grp {
      & .slider-btn {
        position: absolute; top: 50%; transform: translateY(-50%); left: -50px; z-index: 1;
        &.auction-slider-next { left: unset; right: -50px; }
      }
    }
  }
}
.artist-card, .museum-card {
  position: relative; overflow: hidden;
  &::before { content: ""; background: rgba(255, 255, 255, 0.2); position: absolute; left: -75%; top: 0px; height: 100%; width: 50%; transform: skewX(-25deg); transform-origin: right center; transition: transform 0.4s ease-in; }
  & a {
    display: block;
    & img { width: 100%; object-fit: cover; }
  }
  & .artist-content, & .museum-content {
    background-color: rgba(var(--primary-color-opc), 0.9); padding: 5px 14px; position: absolute; left: 0px; bottom: 10px; z-index: 1; text-align: left;
    & h6 {
      margin-bottom: 0px;
      & a {
        color: var(--white-color); font-family: var(--font-playfair); font-size: 16px; font-weight: 700; line-height: 1.5; display: inline-block; background-image: ; background-attachment: ; background-origin: ; background-clip: ; background-color: ; background-size: 0px 1px; background-repeat: no-repeat; background-position: right 100%; transition: background-size 0.75s;
        &:hover { background-size: 100% 1px; background-position: 0% 100%; }
      }
    }
    & span { color: var(--white-color); font-family: var(--font-worksans); font-size: 14px; font-weight: 400; line-height: 1.4; }
  }
  &:hover {
    &::before { transform-origin: left center; animation: 0.75s ease 0s 1 normal none running shine; }
  }
  &.style-2 {
    & .artist-content, & .museum-content { background-color: rgb(33, 33, 33); border-radius: 0px 97px 0px 0px; bottom: 0px; padding: 10px 40px 10px 20px; }
  }
}
.home1-artist-section { padding: 90px 0px 100px; background-color: var(--section-bg-color); }
.home1-general-art-slider-section {
  & .general-art-slider-wrap {
    position: relative;
    & .slider-btn-grp {
      & .slider-btn {
        position: absolute; top: 50%; transform: translateY(-50%); left: -50px; z-index: 1;
        &.generat-art-slider-next { left: unset; right: -50px; }
      }
    }
  }
}
.home1-feature-section {
  position: relative; z-index: 1; background-color: var(--primary-color);
  & .feature-content {
    padding: 80px 0px;
    & .section-title {
      margin-bottom: 40px;
      & h3 { color: var(--dark-white-color); }
      & p { color: var(--text-color-white); }
    }
    & .feature-list {
      padding: 0px; margin: 0px; list-style: none;
      & li {
        display: flex; gap: 16px; margin-bottom: 24px;
        &:last-child { margin-bottom: 0px; }
        & .icon {
          min-width: 32px; max-width: 32px; height: 32px; background-color: rgb(249, 249, 249); border-radius: 50%; display: flex; align-items: center; justify-content: center;
          & svg { max-height: 16px; fill: var(--dark-title-color); }
        }
        & .content {
          & h5 { color: var(--dark-white-color); font-family: var(--font-playfair); font-size: 20px; font-weight: 600; line-height: 1.4; margin-bottom: 10px; }
          & p { color: var(--text-color-white); font-family: var(--font-worksans); font-size: 18px; font-weight: 400; line-height: 1.6; margin-bottom: 0px; }
        }
      }
    }
  }
  & .feature-img {
    position: absolute; left: 0px; bottom: 0px; height: 108%;
    & img { height: 100%; object-fit: cover; }
    & img { }
  }
}
.home1-upcoming-auction-slider-section {
  & .upcoming-auction-slider-wrap {
    position: relative;
    & .slider-btn-grp {
      & .slider-btn {
        position: absolute; top: 50%; transform: translateY(-50%); left: -50px; z-index: 1;
        &.upcoming-auction-slider-next { left: unset; right: -50px; }
      }
    }
  }
}
.testimonial-card {
  padding: 30px 35px; border-radius: 10px; background-color: var(--white-color); position: relative;
  & .quote { fill: rgba(var(--title-color-opc), 0.05); position: absolute; top: 15px; right: 25px; }
  & h5 { color: var(--title-color); font-family: var(--font-worksans); font-size: 20px; font-weight: 500; line-height: 1.5; margin-bottom: 20px; }
  & p { color: var(--text-color); font-family: var(--font-worksans); font-size: 18px; font-weight: 400; line-height: 1.6; margin-bottom: 25px; }
  & .testimonial-bottom-area {
    padding-top: 15px; border-top: 1px solid rgba(var(--primary-color-opc), 0.05); display: flex; align-items: center; justify-content: space-between; gap: 20px;
    & .author-area {
      display: flex; align-items: center; gap: 10px;
      & .author-img {
        & img { min-width: 50px; max-width: 50px; }
      }
      & .author-content {
        line-height: 1;
        & h5 { color: var(--title-color); font-family: var(--font-playfair); font-size: 20px; font-weight: 500; line-height: 1.3; margin-bottom: 5px; }
        & span { color: var(--text-color); font-family: var(--font-worksans); font-size: 14px; font-weight: 400; line-height: 1; letter-spacing: 0.02em; }
      }
    }
    & .date-and-time-area {
      text-align: end;
      & strong { color: var(--title-color); font-family: var(--font-worksans); font-size: 14px; font-weight: 400; line-height: 1; margin-bottom: 10px; display: block; }
      & span { color: var(--text-color); font-family: var(--font-worksans); font-size: 12px; font-weight: 400; line-height: 1; display: block; }
    }
  }
}
.home1-testimonial-section {
  background-color: var(--section-bg-color); padding: 90px 0px;
  & .testimonial-slider-wrap {
    padding: 0px 6.5%; position: relative;
    & .slider-btn-grp {
      & .slider-btn {
        position: absolute; top: 50%; transform: translateY(-50%); left: 50px; z-index: 1;
        & svg { }
        &:hover {
          background-color: var(--primary-color);
          & svg { fill: var(--white-color); }
        }
        &.testimonial-slider-next { left: unset; right: 50px; }
      }
    }
  }
  &.two {
    background-color: unset; padding: 0px;
    & .testimonial-card { background-color: var(--section-bg-color); }
    & .testimonial-slider-wrap {
      & .slider-btn-grp {
        & .slider-btn {
          & svg { }
          &:hover {
            background-color: var(--primary-color);
            & svg { fill: var(--white-color); }
          }
        }
      }
    }
  }
}
.article-card {
  & .article-img {
    position: relative; overflow: hidden; display: block;
    & img { min-height: 270px; object-fit: cover; transition: 0.5s ease-out; }
    &::after { position: absolute; width: 200%; height: 0%; left: 50%; top: 50%; background-color: rgba(255, 255, 255, 0.3); transform: translate(-50%, -50%) rotate(-45deg); content: ""; z-index: 1; }
  }
  & .article-content-wrap {
    padding: 0px 10px; position: relative; z-index: 1; margin-top: -54px;
    & .article-content {
      padding: 25px 15px; background-color: var(--white-color); box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 10px 0px;
      & .blog-meta {
        display: flex; align-items: center; gap: 10px; line-height: 1; margin-bottom: 12px;
        & .blog-date {
          color: var(--text-color); font-family: var(--font-worksans); font-size: 14px; font-weight: 400; line-height: 1; transition: 0.5s;
          &:hover { color: var(--title-color); }
        }
        & .blog-comment {
          position: relative; padding-left: 10px;
          &::before { content: ""; position: absolute; top: 50%; transform: translateY(-50%); left: 0px; width: 1px; height: 14px; background-color: rgb(217, 217, 217); }
          & span { color: var(--text-color); font-family: var(--font-worksans); font-size: 14px; font-weight: 400; line-height: 1; display: block; }
        }
      }
      & h6 {
        margin-bottom: 15px;
        & a {
          color: var(--title-color); font-family: var(--font-worksans); font-size: 18px; font-weight: 500; line-height: 1.5; word-break: break-word; background-image: ; background-attachment: ; background-origin: ; background-clip: ; background-color: ; background-size: 0px 1px; background-repeat: no-repeat; background-position: right 100%; transition: background-size 0.9s;
          &:hover { background-size: 100% 1px; background-position: 0% 100%; }
        }
      }
      & .read-btn {
        color: var(--title-color); font-family: var(--font-worksans); font-size: 14px; font-weight: 500; line-height: 1; white-space: nowrap; background-image: ; background-attachment: ; background-origin: ; background-clip: ; background-color: ; background-repeat: no-repeat; background-size: 0px 1px; background-position: 0% 100%; transition: background-size 0.75s;
        &:hover { background-size: 100% 1px; background-position: left 100%; }
      }
    }
  }
  &:hover {
    & .article-img {
      & img { transform: scale(1.1); }
      &::after { height: 250%; transition: 600ms linear; background-color: transparent; }
    }
  }
  &.style-2 {
    & .article-content-wrap {
      padding: 0px; margin-top: 0px;
      & .article-content {
        box-shadow: unset; border: 1px solid var(--borderr-color); text-align: center;
        & .blog-meta { justify-content: center; }
      }
    }
  }
}
.home1-article-section {
  & .article-slider-wrap {
    position: relative;
    & .home1-article-slider { margin: -10px; padding: 10px; }
    & .slider-btn-grp {
      & .slider-btn {
        position: absolute; top: 50%; transform: translateY(-50%); left: -50px; z-index: 1;
        &.article-slider-next { left: unset; right: -50px; }
      }
    }
  }
}
.home1-faq-section {
  background-color: var(--section-bg-color); padding: 90px 0px;
  &.style-2 { background-color: var(--white-color); padding: 0px; }
  & .faq-wrap {
    & .accordion {
      & .accordion-item {
        border-top-width: medium; border-right-width: medium; border-left-width: medium; border-top-style: none; border-right-style: none; border-left-style: none; border-top-color: currentcolor; border-right-color: currentcolor; border-left-color: currentcolor; border-image: initial; background-color: transparent; border-bottom: 1px solid var(--borderr-color);
        &:first-child {
          & .accordion-header {
            & .accordion-button { padding-top: 0px; }
          }
        }
        &:last-child {
          border-bottom: unset;
          & .accordion-header {
            & .accordion-button { padding-bottom: 0px; }
          }
        }
        & .accordion-header {
          & .accordion-button {
            border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: unset; box-shadow: none; color: var(--title-color); font-family: var(--font-worksans); font-size: 20px; font-weight: 500; line-height: 1.4; text-transform: capitalize; padding: 17px 0px; background-color: transparent;
            &::after { width: unset; height: unset; content: ""; font-family: bootstrap-icons; background-image: none; font-weight: 800; font-size: 22px; }
            &:not(.collapsed) {
              background-color: unset;
              &::after { content: ""; }
            }
          }
        }
        & .accordion-body { padding: 15px 0px 20px; color: var(--text-color); font-family: var(--font-worksans); font-size: 18px; font-weight: 400; line-height: 1.6; letter-spacing: 0.48px; border-top: 1px solid var(--primary-color); }
      }
    }
  }
}
.footer-section {
  background-color: rgb(33, 33, 33);
  & .footer-menu-wrap {
    padding: 70px 0px;
    & .footer-content-area {
      position: relative;
      &::before { content: ""; position: absolute; top: 50%; transform: translateY(-50%); left: 110%; width: 1px; height: 184px; background-color: rgba(255, 255, 255, 0.08); }
      & .footer-logo {
        margin-bottom: 35px; display: block;
        & img { width: 152px; }
      }
      & p { color: var(--text-color-white); font-family: var(--font-worksans); font-size: 18px; font-weight: 400; line-height: 1.6; margin-bottom: 55px; }
      & .social-list {
        padding: 0px; margin: 0px; list-style: none; display: flex; align-items: center; gap: 30px; flex-wrap: wrap;
        & li {
          display: block; text-align: center; margin: 0px;
          & a {
            & i { color: var(--dark-white-color); transition: 0.5s; }
            & span { color: var(--dark-white-color); font-family: var(--font-worksans); font-size: 12px; font-weight: 400; line-height: 1; display: block; padding-top: 2px; transition: 0.5s; }
          }
        }
      }
    }
    & .footer-widget {
      & h1, & h2, & h3, & h4, & h5, & h6 { color: var(--dark-white-color); font-family: var(--font-playfair); font-size: 22px; font-weight: 600; line-height: 1; letter-spacing: 0.03em; margin-bottom: 0px; }
      & .widget-title {
        margin-bottom: 25px;
        & h5 { color: var(--dark-white-color); font-family: var(--font-playfair); font-size: 22px; font-weight: 600; line-height: 1; letter-spacing: 0.03em; margin-bottom: 0px; }
      }
      & ul, & .widget-list {
        padding: 0px; margin: 0px; list-style: none;
        & li {
          margin-bottom: 15px;
          &:last-child { margin-bottom: 0px; }
          & a {
            font-family: var(--font-worksans); font-size: 16px; font-weight: 500; line-height: 1.5; display: inline-block; background-repeat: no-repeat; background-size: 0px 1px; background-position: 0% 100%; transition: background-size 0.75s;
            &:hover { background-position: left 100%; background-size: 100% 1px; }
          }
        }
      }
    }
    & .newsletter-and-payment-area {
      max-width: 312px; width: 100%; position: relative;
      &::before { content: ""; position: absolute; top: 50%; transform: translateY(-50%); left: -20%; width: 1px; height: 184px; background-color: rgba(255, 255, 255, 0.08); }
      & h4 { color: var(--dark-white-color); font-family: var(--font-playfair); font-size: 26px; font-weight: 600; line-height: 1.5; letter-spacing: 0.01em; margin-bottom: 35px; }
      & .form-inner {
        border-radius: 5px; display: flex; align-items: center; justify-content: space-between; padding: 0px 15px;
        & input {
          height: 49px; background-color: transparent; border: unset; padding-left: 0px; color: var(--dark-white-color);
          &::placeholder { font-family: var(--font-worksans); font-size: 12px; }
        }
        & button {
          background-color: transparent; border: unset;
          & i { color: var(--dark-white-color); }
        }
      }
      & .payment-area {
        padding-top: 45px;
        & h6 { color: var(--dark-white-color); font-family: var(--font-worksans); font-size: 16px; font-weight: 500; line-height: 1.5; margin-bottom: 15px; }
        & .payment-options { margin: 0px; list-style: none; padding: 10px; display: flex; align-items: center; gap: 32px; background-color: var(--dark-white-color); border-radius: 5px; }
      }
    }
  }
  & .footer-bottom {
    display: flex; align-items: center; justify-content: space-between; padding: 25px 0px;
    & .copyright-area {
      & p {
        color: var(--text-color-white); font-family: var(--font-worksans); font-size: 16px; font-weight: 500; line-height: 1.5; margin-bottom: 0px;
        & a {
          color: var(--dark-white-color); display: inline-block; background-image: ; background-attachment: ; background-origin: ; background-clip: ; background-color: ; background-repeat: no-repeat; background-size: 0px 1px; background-position: 0% 100%; transition: background-size 0.75s;
          &:hover { background-position: left 100%; background-size: 100% 1px; }
        }
      }
    }
    & .footer-bottom-right {
      & ul {
        padding: 0px; margin: 0px; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; line-height: 1;
        & li {
          & a {
            color: var(--dark-white-color); font-family: var(--font-worksans); font-size: 16px; font-weight: 500; line-height: 1.3; letter-spacing: 0.3px; display: inline-block; background-image: ; background-attachment: ; background-origin: ; background-clip: ; background-color: ; background-repeat: no-repeat; background-size: 0px 1px; background-position: 0% 100%; transition: background-size 0.75s;
            &:hover { background-position: left 100%; background-size: 100% 1px; }
          }
        }
      }
    }
  }
}
.home2-search-bar-section {
  padding: 24px 0px;
  & .search-bar-wrap {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px;
    & .search-area {
      max-width: 722px; width: 100%;
      & form {
        width: 100%;
        & .form-inner {
          display: flex; align-items: center; max-width: 760px; width: 100%; background-color: transparent; padding: 0px 10px; border-bottom: 1px solid rgb(125, 125, 125);
          & input {
            background: transparent; border: unset; border-radius: 5px 0px 0px 5px; width: 100%; height: unset; padding: 10px 10px 12px 0px; font-family: var(--font-worksans); font-weight: 400; font-size: 14px; color: var(--text-color);
            &::placeholder { color: rgb(125, 125, 125); }
          }
          & button {
            background-color: transparent;
            & svg { fill: var(--dark-text-color); }
          }
        }
      }
    }
    & a {
      display: flex; align-items: center;
      & span { color: var(--title-color); font-family: var(--font-worksans); font-size: 16px; font-weight: 500; line-height: 1; display: inline-block; background-image: ; background-attachment: ; background-origin: ; background-clip: ; background-color: ; background-size: 0px 1px; background-repeat: no-repeat; background-position: right 100%; transition: background-size 0.9s; }
      & svg { fill: var(--title-color); }
      &:hover {
        & span { background-size: 100% 1px; background-position: 0% 100%; }
      }
    }
  }
}
.home2-banner-section {
  & .banner-wrapper {
    background-color: var(--section-bg-color2); padding: 70px 45px;
    & .banner-content {
      & > span { color: var(--title-color); font-family: var(--font-worksans); font-size: 16px; font-weight: 500; line-height: 1; display: inline-block; padding: 6px 15px; border: 1px solid rgb(89, 89, 89); border-radius: 6px; margin-bottom: 15px; }
      & h1 { color: var(--title-color); font-family: var(--font-playfair); font-size: 46px; font-weight: 800; line-height: 1.2; letter-spacing: 0.02em; margin-bottom: 20px; }
      & p { color: var(--text-color); font-family: var(--font-worksans); font-size: 18px; font-weight: 400; line-height: 1.6; margin-bottom: 50px; }
      & .primary-btn1 { padding: 19px 17px; }
    }
  }
}
.home2-about-section {
  & .about-wrapper {
    padding: 90px 50px; background-color: var(--section-bg-color2);
    & .about-img {
      & img { }
    }
    & .about-content {
      & h3 { color: var(--title-color); font-family: var(--font-playfair); font-size: 32px; font-weight: 600; line-height: 1.2; margin-bottom: 25px; }
      & p { color: var(--text-color); font-family: var(--font-worksans); font-size: 18px; font-weight: 400; line-height: 1.6; margin-bottom: 35px; }
      & .feature-list-and-btn-area {
        display: flex; gap: 80px;
        & .learn-btn {
          position: relative; display: block; margin-bottom: -55px;
          & svg { fill: var(--title-color); stroke: rgba(var(--title-color-opc), 0.3); transition: 0.5s; }
          & span { color: var(--white-color); font-family: var(--font-worksans); font-size: 16px; font-weight: 500; line-height: 18.77px; text-align: center; padding-bottom: 5px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: 0.5s; }
          &:hover {
            & svg { fill: transparent; }
            & span { color: var(--title-color); }
          }
        }
      }
      & ul {
        padding: 0px; margin: 0px; list-style: none; max-width: 324px; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
        & li {
          & svg { fill: none; stroke: rgb(14, 214, 120); }
          color: var(--title-color); font-family: var(--font-worksans); font-size: 18px; font-weight: 500; line-height: 1; display: flex; align-items: center; gap: 8px;
        }
      }
    }
    & .countdown-wrap {
      padding: 12px 28px 12px 40px; background-color: rgb(253, 253, 253); border: 1px solid var(--borderr-color); border-radius: 6px; max-width: 625px; width: 100%; margin-top: -60px; margin-left: 60px; position: relative;
      & .countdown-list {
        padding: 0px; margin: 0px; list-style: none; display: flex; align-items: center; flex-wrap: wrap; gap: 70px;
        & .single-countdown {
          text-align: center; position: relative;
          &::after { content: ""; position: absolute; top: 50%; transform: translateY(-50%); left: -35px; width: 1px; height: 48px; background-color: rgb(217, 217, 217); }
          &:first-child {
            &::after { display: none; }
          }
          & .number {
            display: flex; justify-content: center; margin-bottom: 10px;
            & h3, & strong { color: var(--title-color); font-family: var(--font-playfair); font-size: 32px; font-weight: 600; line-height: 1; margin-bottom: 0px; }
          }
          & span { color: var(--text-color); font-family: var(--font-worksans); font-size: 18px; font-weight: 500; line-height: 1; }
        }
      }
    }
  }
}
.home2-artistic-section {
  & .artistic-banner {
    position: relative;
    & img { }
    & .artistic-banner-content {
      position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
      & h3 { color: var(--dark-white-color); font-family: var(--font-playfair); font-size: 32px; font-weight: 600; line-height: 1.2; margin-bottom: 0px; padding: 20px; }
    }
  }
  & .artistic-content-wrap {
    background-color: var(--section-bg-color2); padding: 40px 50px 90px;
    & .artistic-img {
      padding-right: 50px; margin-top: -120px; position: relative;
      & img { box-shadow: rgba(0, 0, 0, 0.25) 4px 4px 31px 0px; }
    }
    & .artistic-content {
      & p { color: var(--text-color); font-family: var(--font-worksans); font-size: 18px; font-weight: 400; line-height: 1.6; margin-bottom: 0px; }
      & ul {
        margin: 0px; list-style: none; padding: 25px 0px;
        & li {
          & svg { fill: rgb(14, 214, 120); }
          color: var(--title-color); font-family: var(--font-worksans); font-size: 18px; font-weight: 500; line-height: 1.3; display: flex; align-items: center; gap: 15px; margin-bottom: 20px;
          &:last-child { margin-bottom: 0px; }
        }
      }
    }
  }
}
.home2-category-section {
  & .category-card {
    position: relative; height: 100%;
    & img { height: 100%; }
    & .category-content {
      position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: linear-gradient(360deg, rgb(0, 0, 0) 0%, rgba(102, 102, 102, 0.02) 46.41%); padding: 30px 20px; display: flex; align-items: end; justify-content: center;
      & h4 {
        margin-bottom: 0px;
        & a {
          color: var(--dark-white-color); font-family: var(--font-playfair); font-size: 24px; font-weight: 600; line-height: 1.2; display: inline-block; background-image: ; background-attachment: ; background-origin: ; background-clip: ; background-color: ; background-size: 0px 1px; background-repeat: no-repeat; background-position: right 100%; transition: background-size 0.75s;
          &:hover { background-size: 100% 1px; background-position: 0% 100%; }
        }
      }
    }
  }
}
.home2-feature-section {
  & .feature-wrapper {
    background-color: var(--section-bg-color2); padding: 90px 25px 90px 50px;
    & .feature-content {
      & .section-title { margin-bottom: 25px; }
      & .feature-list {
        padding: 30px 0px 0px; margin: 0px; list-style: none; border-top: 1px solid var(--borderr-color); display: flex; gap: 40px; flex-wrap: wrap;
        & li {
          max-width: 260px; width: 100%;
          & .icon-and-title {
            margin-bottom: 15px; display: flex; align-items: center; gap: 15px;
            & .icon {
              min-width: 32px; max-width: 32px; height: 32px; border: 1px solid var(--primary-color); border-radius: 50%; display: flex; align-items: center; justify-content: center;
              & svg, & i { height: 16px; font-size: 16px; fill: var(--title-color); color: var(--title-color); }
            }
            & h5 { color: var(--title-color); font-family: var(--font-playfair); font-size: 20px; font-weight: 600; line-height: 1.4; margin-bottom: 0px; }
          }
          & .content {
            & p { color: var(--text-color); font-family: var(--font-worksans); font-size: 18px; font-weight: 400; line-height: 1.6; margin-bottom: 0px; }
          }
        }
      }
    }
  }
}
.home2-testimonial-section {
  & .testimonial-wrapper {
    padding: 90px 70px 90px 50px; background-color: var(--section-bg-color2);
    & .testimonial-slider-wrap { position: relative; }
    & .testimonial-img {
      height: 100%;
      & img { height: 100%; object-fit: cover; }
    }
    & .slider {
      & .slider-item {
        & .testimonial-card { margin: 10px 0px; }
      }
      & .slick-prev {
        background-color: transparent; border: 1px solid var(--borderr-color); width: 35px; height: 35px; border-radius: 50%; right: -55px; left: unset; top: 42%; transform: unset; display: flex; align-items: center; justify-content: center; transition: 0.5s;
        &::before { content: ""; font-family: bootstrap-icons; color: rgb(80, 80, 80); font-size: 17px; transition: 0.5s; }
        &:hover {
          background-color: var(--primary-color);
          &::before { color: var(--white-color); }
        }
      }
      & .slick-next {
        background-color: transparent; border: 1px solid var(--borderr-color); width: 35px; height: 35px; border-radius: 50%; right: -55px; left: unset; top: unset; bottom: 41%; transform: unset; display: flex; align-items: center; justify-content: center; transition: 0.5s;
        &::before { content: ""; font-family: bootstrap-icons; color: rgb(80, 80, 80); font-size: 17px; transition: 0.5s; }
        &:hover {
          background-color: var(--primary-color);
          &::before { color: var(--white-color); }
        }
      }
    }
  }
}
.page-navigation-area {
  max-width: 984px; margin: 60px auto 0px; border: 1px solid rgb(238, 238, 238); border-radius: 6px; padding: 15px 25px; gap: 15px;
  & .prev-next-btn {
    & a {
      font-family: var(--font-worksans); font-size: 14px; font-weight: 500; line-height: 1; text-align: center; color: var(--title-color); display: flex; align-items: center; gap: 5px; padding: 11px 18px; transition: 0.35s; text-transform: uppercase; border: 1px solid rgba(238, 238, 238, 0.933); border-radius: 4px;
      & svg { fill: var(--paragraph-color); transition: 0.35s; }
      &:hover {
        background: var(--title-color); color: var(--white-color);
        & svg { fill: var(--white-color); }
      }
    }
  }
  & .pagination {
    margin: 0px; padding: 0px; list-style: none; gap: 20px;
    & li {
      & a.prev i, & a.next i { margin-top: 3px; }
      & a {
        font-family: var(--font-worksans); font-size: 15px; font-weight: 500; width: 36px; height: 36px; border: 1px solid rgb(238, 238, 238); border-radius: 50%; line-height: 1; text-align: center; align-items: center; justify-content: center; display: flex; color: var(--dark-text-color); transition: 0.35s;
        &.current { background: var(--title-color); color: var(--white-color) !important; }
        &:hover { background: var(--title-color); color: var(--white-color); }
      }
    }
  }
}
.nav-area {
  border-bottom: 1px solid rgb(217, 217, 217); padding-bottom: 24px;
  & .nav-tabs2 {
    border-bottom: unset; justify-content: center; background: transparent;
    & li {
      padding: 0px;
      & button {
        border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; font-family: var(--font-worksans); color: var(--text-color); font-size: 20px; font-weight: 500; text-align: center; line-height: 1;
        &.active { color: var(--primary-color); background: transparent; }
        &:hover { color: var(--title-color); }
      }
    }
  }
}
.nav-area {
  border-bottom: 1px solid rgb(217, 217, 217); padding-bottom: 24px;
  &.style-2 { max-width: 865px; margin: 0px auto; }
  & .nav-tabs3 {
    border-bottom: unset; justify-content: center;
    & li {
      padding: 0px; position: relative;
      &::before { content: ""; width: 1px; height: 19px; background-color: rgb(164, 164, 164); position: absolute; top: 55%; transform: translateY(-50%); left: 0px; }
      &:first-child {
        &::before { display: none; }
      }
      & button {
        border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; font-family: var(--font-playfair); color: var(--text-color); font-size: 24px; font-weight: 500; text-align: center; line-height: 1; padding-top: 0px;
        &.active { color: var(--primary-color); }
        &:hover { color: var(--title-color); }
      }
    }
  }
}
.sidebar-area {
  & .artists-widgets {
    & .widget-title {
      margin-bottom: 25px;
      & h5 { color: var(--dark-primary-color); font-family: var(--font-playfair); text-transform: capitalize; font-size: 22px; font-weight: 600; line-height: 1; margin-bottom: 0px; }
    }
    & .checkbox-container {
      & ul {
        margin: 0px; padding: 0px; list-style: none;
        & li {
          display: flex; align-items: center; gap: 10px; margin-bottom: 20px;
          &:last-child { margin-bottom: 0px; }
          & .containerss {
            display: flex; gap: 5px; width: 100%; position: relative; padding-left: 25px; cursor: pointer; user-select: none;
            & span { color: var(--text-color); font-family: var(--font-worksans); font-size: 16px; font-weight: 500; line-height: 1; text-transform: capitalize; }
            & input {
              position: absolute; opacity: 0; cursor: pointer; height: 0px; width: 0px;
              &:checked ~ .checkmark {
                background-color: var(--primary-color); border-color: var(--primary-color);
                &::after { content: url("../img/inner-page/icon/checkbox-icon.svg"); left: 1px; top: -2px; position: absolute; }
              }
            }
            & .checkmark { position: absolute; top: 1px; left: 0px; height: 14px; width: 14px; background-color: transparent; border: 1px solid rgb(52, 52, 52); border-radius: 2px; }
          }
        }
      }
    }
    & .button-area {
      margin-top: 20px;
      & a { font-family: var(--font-worksans); font-size: 16px; font-weight: 500; line-height: 1; text-align: left; color: var(--primary-color); text-decoration: underline; }
    }
    &.widget_search {
      border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; padding: 0px;
      & .wp-block-search__inside-wrapper {
        display: flex; align-items: center; border: 1px solid rgb(238, 238, 238); border-radius: 6px;
        & input { background-color: transparent; color: rgb(125, 125, 125); font-family: var(--font-worksans); font-size: 14px; font-weight: 400; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; outline: none; width: 100%; padding: 0px 25px; height: 52px; border-radius: unset; }
        & button {
          position: relative; min-width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; outline: none; color: var(--white-color); background-color: var(--title-color); overflow: hidden; z-index: 1; border-radius: 0px 6px 6px 0px;
          & svg { fill: var(--white-color); }
          &::after { position: absolute; content: ""; display: block; inset: -4% -20% 0px 15%; height: 150%; width: 150%; border-radius: 2px; background-color: var(--white-color); transform: skewX(45deg) scale(0, 1); z-index: -1; transition: 0.5s ease-out; }
          &:hover {
            color: rgb(0, 0, 0);
            & svg { fill: var(--primary-color3); }
            &::after { transform: skewX(45deg) scale(1, 1); }
          }
        }
      }
    }
  }
}
.range-wrap {
  padding-top: 10px;
  & .slider-labels {
    display: flex; align-items: center; justify-content: space-between; margin-top: 20px;
    & .caption { font-family: var(--font-worksans); font-size: 16px; font-weight: 400; line-height: 1; letter-spacing: 0.3px; }
  }
  & .noUi-target, & .range-wrap .noUi-target * { touch-action: none; user-select: none; box-sizing: border-box; }
  & .noUi-target { position: relative; direction: ltr; }
  & .noUi-base { width: 100%; height: 100%; position: relative; z-index: 1; }
  & .noUi-origin { position: absolute; inset: 0px; }
  & .noUi-handle { position: relative; z-index: 1; }
  & .noUi-stacking .noUi-handle { z-index: 10; }
  & .noUi-state-tap {
    & .noUi-origin { transition: left 0.3s, top 0.3s; }
  }
  & .noUi-state-drag * { cursor: inherit !important; }
  & .noUi-base, & .range-wrap .noUi-handle { transform: translate3d(0px, 0px, 0px); }
  & .noUi-horizontal {
    height: 4px;
    & .noUi-handle {
      width: 14px; height: 14px; border-radius: 50%; left: 0px; right: 0px; top: -4px; background-color: var(--title-color); cursor: pointer;
      &::after { content: ""; height: 7px; width: 7px; border-radius: 50%; background-color: var(--white-color); position: absolute; left: 7px; top: 7px; transform: translate(-50%, -50%); }
    }
  }
  & .noUi-background { background: rgba(33, 33, 33, 0.5); height: 5px; border-radius: 10px; }
  & .noUi-connect { background: var(--title-color); transition: background 450ms; border-radius: 10px; height: 5px; }
  & .noUi-target { border-radius: 10px; }
}
.auction-card-sidebar-section {
  & .right-content {
    & .biography-section {
      & p {
        font-family: var(--font-worksans); font-size: 18px; font-weight: 400; line-height: 1.8; text-align: left; color: var(--text-color); margin-bottom: 5px;
        & strong, & span { color: rgb(52, 52, 52); font-weight: 500; }
        &.biography-top-text { margin-bottom: 30px; }
      }
      & .biography-card {
        margin-bottom: 34px; background: var(--section-bg-color); padding: 25px 30px;
        & h4 { font-family: var(--font-playfair); font-size: 24px; font-weight: 600; line-height: 1; text-align: left; margin-bottom: 25px; }
      }
    }
    & .biography-right-section {
      background: var(--section-bg-color); padding: 30px 20px 8px; position: sticky; top: 30px;
      & .biography-right-content {
        & h6 { font-family: var(--font-playfair); font-size: 18px; font-weight: 500; line-height: 1; text-align: left; color: var(--primary-color); text-decoration: underline; margin-bottom: 10px; }
        & p { font-family: var(--font-worksans); font-size: 16px; font-weight: 400; line-height: 1.6; text-align: left; color: var(--text-color); margin-bottom: 20px; }
      }
    }
    & .awards-section {
      & p { font-family: var(--font-worksans); font-size: 18px; font-weight: 400; line-height: 1.8; text-align: left; color: var(--text-color); }
      & .awards-list {
        padding: 0px; margin: 30px 0px 0px; list-style: none;
        & li {
          display: flex; align-items: center; justify-content: space-between; margin-bottom: 50px; border-bottom: 1px solid rgba(23, 23, 23, 0.05); padding-bottom: 40px;
          &:last-child { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; padding-bottom: 0px; margin-bottom: 0px; }
          & .content {
            & span { font-family: var(--font-worksans); font-size: 18px; font-weight: 400; line-height: 30px; text-align: left; color: var(--text-color); margin-bottom: 5px; display: flex; }
            & h4 { font-family: var(--font-playfair); font-size: 26px; font-weight: 600; line-height: 1; text-align: left; color: var(--primary-color); margin-bottom: 30px; }
            & p { font-family: var(--font-worksans); font-size: 18px; font-weight: 400; line-height: 1; text-align: left; color: var(--text-color); margin-bottom: 0px; }
          }
          & .button-area {
            & .icon {
              border: 1px solid rgba(23, 23, 23, 0.3); width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: 0.5s;
              & svg { fill: rgba(23, 23, 23, 0.3); transition: 0.5s; }
            }
          }
          &:hover {
            & .button-area {
              & .icon {
                background: var(--title-color);
                & svg { fill: var(--white-color); transform: rotate(-180deg); }
              }
            }
          }
        }
      }
    }
  }
}
.breadcrumb-section {
  background-size: cover; background-repeat: no-repeat; background-position: center center; padding: 20px 60px 60px;
  & .breadcrumb-wrapper {
    & .artist-info {
      max-width: 550px; position: relative;
      &::before { content: url("../img/inner-page/icon/info-before.svg"); position: absolute; top: 15%; left: -65px; transform: translate(50%, -50%); }
      &::after { content: url("../img/inner-page/icon/info-after.svg"); position: absolute; top: 90%; left: 78%; transform: translate(50%, -50%); }
      & h1 { font-family: var(--font-playfair); font-size: 46px; font-weight: 900; line-height: 60px; letter-spacing: 0.04em; text-align: left; color: var(--white-color); }
      & p { font-family: var(--font-worksans); font-size: 18px; font-weight: 400; line-height: 30px; text-align: left; color: rgb(211, 211, 211); }
    }
    & .artist-image {
      border: 1px solid rgb(136, 136, 136); padding: 20px; border-radius: 6px;
      & img { max-height: 450px; object-fit: cover; border-radius: 6px; }
    }
  }
}
.auction-card-top-area {
  display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgb(217, 217, 217); padding-bottom: 30px;
  & .left-content {
    & h6 {
      font-family: var(--font-worksans); font-size: 16px; font-weight: 400; line-height: 1; letter-spacing: 0.02em; text-align: left; color: var(--text-color); margin-bottom: 0px;
      & span { font-weight: 500; }
    }
  }
  & .right-content {
    display: flex; align-items: center; gap: 24px;
    & .category-area {
      & .nice-select {
        color: var(--primary-color); font-family: var(--font-worksans); font-size: 16px; font-weight: 500; display: flex; gap: 20px; height: 30px; width: 180px; border: 1px solid rgba(238, 238, 238, 0.933); background: transparent; padding-left: 15px; padding-right: 15px;
        & .current { color: var(--title-color); font-family: var(--font-worksans); font-size: 14px; font-weight: 400; text-transform: capitalize; }
        &::after { border-bottom: 2px solid var(--title-color); border-right: 2px solid var(--title-color); content: ""; display: block; height: 9px; margin-top: -5px; pointer-events: none; position: absolute; right: 19px; top: 50%; width: 9px; }
        & .option { font-family: var(--font-worksans); font-size: 14px; line-height: 24px; text-align: left; text-transform: capitalize; min-height: 35px; color: var(--title-color); padding-left: 25px; }
        & .list { background-color: var(--white-color); box-shadow: rgba(129, 129, 129, 0.25) 0px 4px 32px 0px; border: 1px solid rgb(238, 238, 238); width: 230px; }
      }
      & .nice-select .option:hover, & .nice-select .option.focus, & .nice-select .option.selected.focus { background-color: rgb(246, 246, 246); }
    }
    & .filter-content {
      & h6 { font-family: var(--font-dm-sans); font-size: 16px; font-weight: 400; line-height: 1; letter-spacing: 0.02em; text-align: left; color: var(--title-color); margin-bottom: 0px; display: flex; align-items: center; gap: 10px; }
    }
    & .grid-view {
      margin: 0px; padding: 0px; list-style: none; display: flex; align-items: center; gap: 10px;
      & li {
        border: 1px solid rgb(238, 238, 238); display: flex; align-items: center; justify-content: center; width: 100%; transition: 0.35s; min-height: 24px; min-width: 24px; cursor: pointer;
        & svg {
          & path { stroke: rgb(160, 160, 160); }
        }
        &:hover {
          background: var(--title-color);
          & svg {
            & path { stroke: var(--white-color); }
          }
        }
        &.active {
          background: var(--title-color);
          & svg {
            & path { stroke: var(--white-color); }
          }
        }
      }
    }
  }
}
.breadcrumb-section2 {
  background-size: cover; background-repeat: no-repeat; padding: 20px 0px;
  & .breadcrumb-content {
    padding: 10% 0px; max-width: 650px;
    & h1 { font-family: var(--font-playfair); font-size: 46px; font-weight: 900; line-height: 1; letter-spacing: 0.04em; text-align: left; color: var(--white-color); margin-bottom: 30px; }
    & p { font-family: var(--font-worksans); font-size: 18px; font-weight: 400; line-height: 2; text-align: left; color: var(--text-color-white); margin-bottom: 0px; }
  }
}
.top-content {
  margin-top: 20px;
  &.style-2 {
    margin-top: 0px;
    & ul {
      & li {
        color: var(--white-color);
        & a { color: var(--white-color); }
        &::before { }
        & svg {
          & path { stroke: var(--white-color); }
        }
      }
    }
  }
  &.style-3 {
    & ul { }
  }
  & ul {
    margin: 0px;
    padding: 0px 0px 3px;
    list-style: none;
    display: flex;
    align-items: center;
    /* border-bottom: 1px solid rgb(211, 211, 211); */

    & li {
      font-family: var(--font-worksans);
      font-size: 14px;
      font-weight: 400;
      line-height: 1;
      text-align: left;
      color: var(--primary-color);
      position: relative;
      padding-left: 7px;

      &::before {margin-right: 15px;font-weight: 100;content: "/" !important;}
      &:first-child {
        padding-left: 0px; width: fit-content; margin-right: 10px;
        &::before { display: none; }
      }
      & a { font-family: var(--font-worksans); font-size: 14px; font-weight: 400; line-height: 1; text-align: left; color: var(--primary-color); }
      & svg {
        & path { stroke: var(--primary-color); }
      }
    }
  }
}
.enquery-section {
  &.style-2 {
    & .enquery-form-wrapper { padding: 30px; }
  }
  &.style-3 {
    & .enquery-section-title {
      & h3 { text-align: center; margin-bottom: 8px; }
      & p { text-align: center; }
    }
    & .enquery-form-wrapper { background: rgb(240, 240, 240); }
  }
  & .enquery-section-title {
    & h3 { font-family: var(--font-playfair); font-size: 32px; font-weight: 600; line-height: 1; text-align: left; color: var(--title-color); margin-bottom: 25px; }
    & p { font-family: var(--font-worksans); font-size: 20px; font-weight: 400; line-height: 1.6; text-align: left; color: var(--text-color); margin-bottom: 0px; }
  }
  & .enquery-form-wrapper {
    background: rgb(249, 249, 249); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; padding: 70px 90px;
    & .form-title {
      max-width: 540px; width: 100%;
      & h2 { font-family: var(--font-worksans); font-size: 25px; font-weight: 500; line-height: 1.2; color: var(--title-color); margin-bottom: 10px; text-transform: capitalize; text-decoration: underline; }
      & p { margin-bottom: 0px; }
    }
    & .form-inner3 {
      & input { color: var(--text-color); font-size: 16px; font-weight: 400; }
      & textarea { color: var(--text-color); font-size: 16px; font-weight: 400; }
    }
  }
  & .contact-area {
    & p {
      font-family: var(--font-worksans); font-size: 16px; font-weight: 400; line-height: 1; text-align: left; color: var(--text-color); margin-bottom: 0px;
      & a { font-family: var(--font-worksans); font-size: 18px; font-weight: 400; line-height: 1; text-align: left; color: var(--primary-color); }
    }
  }
}
.details-page-wrapper {
  & .mb--70 { margin-bottom: 70px; }
  & .line-break { height: 20px; display: block; }
  & .post-author-meta {
    display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 40px;
    & .author-and-date {
      max-width: 480px; width: 100%; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 15px;
      & .author-area {
        display: flex; align-items: center; gap: 14px;
        & .author-img {
          & img { min-width: 60px; max-width: 60px; height: 60px; border-radius: 50%; }
        }
        & .author-name-desig {
          & span { color: var(--text-color2); font-family: var(--font-worksans); font-size: 16px; font-weight: 400; line-height: 1; display: inline-block; margin-bottom: 10px; }
          & h6 {
            margin-bottom: 0px;
            & a { color: var(--title-color); font-family: var(--font-worksans); font-size: 18px; text-transform: capitalize; font-weight: 500; line-height: 1.2; }
          }
        }
      }
      & .date {
        & span { color: var(--text-color); font-family: var(--font-worksans); font-size: 16px; font-weight: 400; line-height: 1; display: inline-block; margin-bottom: 10px; }
        & h6 { color: var(--title-color); font-family: var(--font-worksans); text-transform: uppercase; font-size: 18px; font-weight: 500; line-height: 1.2; margin-bottom: 0px; }
      }
    }
  }
  & .post-thumb { margin-bottom: 40px; }
  & .social-area {
    display: flex; align-items: center; gap: 20px;
    & h6 { color: var(--title-color); font-family: var(--font-worksans); text-transform: capitalize; font-size: 18px; font-weight: 500; line-height: 1; margin-bottom: 0px; }
    & .social-link {
      padding: 0px; margin: 0px; list-style: none; display: flex; align-items: center; gap: 12px;
      & li {
        margin-bottom: 0px;
        & a {
          width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--borderr-color); display: flex; align-items: center; justify-content: center; color: var(--text-color2); transition: 0.5s;
          &:hover { background-color: var(--title-color); border-color: var(--title-color); color: var(--white-color); }
        }
      }
    }
  }
  & .details-page-content {
    font-family: var(--font-worksans);
    & .paginate-nav { clear: both; }
    & h3.post-ttl { color: var(--title-color); font-family: var(--font-playfair); text-transform: capitalize; font-size: 35px; font-weight: 500; line-height: 1; margin-bottom: 20px; word-break: break-all; }
    & p { font-family: var(--font-worksans); color: var(--text-color); font-size: 18px; font-weight: 400; line-height: 1.7; text-align: left; }
    & h4 { color: var(--title-color); font-family: var(--font-worksans); text-transform: capitalize; font-size: 22px; font-weight: 500; line-height: 1; margin-bottom: 20px; }
    & .key-area {
      border-bottom: 1px solid var(--borderr-color); padding-bottom: 30px;
      & ul {
        padding: 0px; margin: 0px; list-style: none;
        & li {
          display: flex; gap: 10px; color: var(--text-color); font-family: var(--font-worksans); font-size: 18px; font-weight: 400; line-height: 28px; margin-bottom: 15px;
          &:last-child { margin-bottom: 0px; }
          & svg { fill: var(--text-color); min-width: 16px; max-width: 16px; margin-top: 7px; }
        }
      }
    }
    & .blog-tag {
      display: inline-flex; align-items: center; gap: 20px; background-color: rgb(245, 245, 245); border-radius: 33px; padding: 18px 40px;
      & h6 { color: var(--title-color); font-family: var(--font-kanit); text-transform: uppercase; font-size: 18px; font-weight: 700; line-height: 22px; margin-bottom: 0px; }
      & ul {
        padding: 0px; margin: 0px; list-style: none; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; line-height: 1;
        & li {
          margin-bottom: 0px;
          & a {
            color: var(--paragraph-color); font-family: var(--font-dm-sans); font-size: 16px; font-weight: 500; line-height: 17px; transition: 0.5s;
            &:hover { color: var(--title-color); }
          }
        }
      }
    }
    & .counter-dark { display: none; }
    & .counter-dark, & .counter-light { }
  }
}
.details-navigation {
  display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 60px;
  & .single-navigation {
    display: flex; align-items: center; gap: 30px;
    & .arrow {
      display: flex; align-items: center; justify-content: center; gap: 4px; color: var(--title-color); font-family: var(--font-worksans); font-size: 14px; font-weight: 700; line-height: 1; transition: 0.7s;
      & svg { fill: var(--paragraph-color); transition: 0.5s; }
    }
    & .content {
      max-width: 340px; width: 100%;
      & h6 {
        margin-bottom: 0px;
        & a {
          color: var(--title-color); font-family: var(--font-worksans); font-size: 20px; text-transform: capitalize; font-weight: 500; line-height: 1.3; transition: 0.5s; word-break: break-all;
          &:hover { color: var(--primary-color); }
        }
      }
    }
  }
  &.two {
    padding: 35px 30px; border: 1px solid var(--borderr-color); border-radius: 10px; position: relative;
    &::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 1px; height: 88px; background-color: var(--borderr-color); }
  }
}
.article-standard-section {
  & .article-stndard-card {
    & .article-standard-image {
      position: relative; margin-bottom: 23px;
      & .date {
        position: absolute; top: 20px; left: 0px;
        & span {
          & a { font-family: var(--font-worksans); font-size: 14px; font-weight: 500; line-height: 1; text-align: left; color: var(--white-color); background: var(--title-color); padding: 6px 10px; border-radius: 0px 4px 4px 0px; }
        }
      }
    }
    & .article-standard-content {
      & h6 { font-family: var(--font-worksans); font-size: 16px; font-weight: 400; line-height: 1; letter-spacing: 0.02em; text-align: left; color: var(--text-color); display: inline-block; margin-bottom: 10px; }
      & h3 {
        margin-bottom: 15px;
        & a { font-family: var(--font-playfair); font-size: 32px; font-weight: 600; line-height: 1; text-align: left; color: var(--title-color); }
      }
      & p { font-family: var(--font-worksans); font-size: 18px; font-weight: 400; line-height: 1.7; text-align: left; color: var(--text-color); margin-bottom: 30px; }
      & .primary-btn1 {
        background-color: transparent; border: 1px solid var(--primary-color); color: var(--title-color);
        & span { background-image: ; background-attachment: ; background-origin: ; background-clip: ; background-color: ; background-repeat: no-repeat; background-size: 0px 1px; background-position: 0% 100%; transition: background-size 0.75s; padding-bottom: 1px; }
        & strong { position: absolute; display: block; width: 0px; height: 0px; border-radius: 36px; background-color: var(--primary-color); transition: 0.6s; transform: translate(-50%, -50%); z-index: -1; }
        &:hover {
          border-color: var(--primary-color); color: var(--white-color);
          & span { background-size: 100% 1px; background-position: left 100%; }
          & strong { width: 225%; height: 1000.5px; }
        }
        &.disabled { pointer-events: none; cursor: not-allowed; opacity: 0.5; }
      }
    }
  }
}
.discover-section {
  & .discover-content {
    & h3 { font-family: var(--font-playfair); font-size: 32px; font-weight: 600; line-height: 1; text-align: left; color: var(--title-color); margin-bottom: 25px; }
    & p { font-family: var(--font-worksans); font-size: 18px; font-weight: 400; line-height: 1.7; text-align: left; color: var(--text-color); margin-bottom: 25px; }
    & .discover-list {
      margin: 0px 0px 25px; padding: 0px; list-style: none; columns: 2; column-gap: 15px;
      & li {
        font-family: var(--font-worksans); font-size: 18px; font-weight: 500; line-height: 1; text-align: left; color: var(--text-color); display: flex; align-items: center; gap: 7px; padding-bottom: 15px;
        & svg {
          & path { stroke: rgb(52, 52, 52); }
        }
      }
    }
    & .countdown-wrap {
      padding: 12px 28px 12px 40px; background-color: rgb(253, 253, 253); border: 1px solid var(--borderr-color); border-radius: 6px; max-width: 625px; width: 100%; margin-bottom: 40px;
      & .countdown-list {
        padding: 0px; margin: 0px; list-style: none; display: flex; align-items: center; flex-wrap: wrap; gap: 70px;
        & .single-countdown {
          text-align: center; position: relative;
          &::after { content: ""; position: absolute; top: 50%; transform: translateY(-50%); left: -35px; width: 1px; height: 48px; background-color: rgb(217, 217, 217); }
          &:first-child {
            &::after { display: none; }
          }
          & .number {
            display: flex; justify-content: center; margin-bottom: 10px;
            & h3, & strong { color: var(--title-color); font-family: var(--font-playfair); font-size: 32px; font-weight: 600; line-height: 1; margin-bottom: 0px; }
          }
          & span { color: var(--text-color); font-family: var(--font-worksans); font-size: 18px; font-weight: 500; line-height: 1; }
        }
      }
    }
    & .primary-btn1 {
      background-color: transparent; border: 1px solid var(--primary-color); color: var(--title-color);
      & span { background-image: ; background-attachment: ; background-origin: ; background-clip: ; background-color: ; background-repeat: no-repeat; background-size: 0px 1px; background-position: 0% 100%; transition: background-size 0.75s; padding-bottom: 1px; }
      & strong { position: absolute; display: block; width: 0px; height: 0px; border-radius: 36px; background-color: var(--primary-color); transition: 0.6s; transform: translate(-50%, -50%); z-index: -1; }
      &:hover {
        border-color: var(--primary-color); color: var(--white-color);
        & span { background-size: 100% 1px; background-position: left 100%; }
        & strong { width: 225%; height: 1000.5px; }
      }
      &.disabled { pointer-events: none; cursor: not-allowed; opacity: 0.5; }
    }
  }
  & .discover-section-image { display: flex; gap: 8px; }
}
.product-description {
  & .artist-overview {
    border: 1px solid rgb(238, 238, 238);
    padding: 20px 25px;
    /* min-height: 533px; */

    & > h1, & > h2, & > h3, & > h4, & > h5, & > h6 { font-family: var(--font-playfair); font-size: 22px; font-weight: 600; line-height: 1; text-align: left; color: var(--title-color); text-decoration: underline; margin-bottom: 30px; }
    & ul {
      margin: 0px; padding: 0px; list-style: none;
      & li {
        margin-bottom: 28px;
        &:last-child { margin-bottom: 0px; }
        & h6 { font-family: var(--font-worksans); font-size: 18px; font-weight: 500; line-height: 1; text-align: left; color: var(--title-color); margin-bottom: 8px; }
        & p { font-family: var(--font-worksans); font-size: 16px; font-weight: 400; line-height: 1.5; text-align: left; color: var(--text-color); margin-bottom: 0px; }
      }
    }
  }
  & .exploring-artwork {
    border: 1px solid rgb(238 238 238 / 38%);
    padding: 20px 25px;
    /* background: var(--section-bg-color); */
    /* min-height: 533px; */




























    & > h1, & > h2, & > h3, & > h4, & > h5, & > h6 { font-family: var(--font-playfair); font-size: 22px; font-weight: 600; line-height: 1; text-align: left; color: var(--title-color); text-decoration: underline; margin-bottom: 30px; }
    & ul {
      margin: 0px 0px 25px; padding: 0px 0px 25px; list-style: none; border-bottom: 1px solid rgb(217, 217, 217);
      &:last-child { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; padding-bottom: 0px; margin-bottom: 0px; }
      & li {
        margin-bottom: 20px;
        & h6 { font-family: var(--font-worksans); font-size: 18px; font-weight: 500; line-height: 1; text-align: left; color: var(--title-color); margin-bottom: 8px; }
        & p { font-family: var(--font-worksans); font-size: 16px; font-weight: 400; line-height: 1.5; text-align: left; color: var(--text-color); margin-bottom: 0px; }
        &:last-child { margin-bottom: 0px; }
      }
    }
  }
  & .narrative-guidelines {
    border: 1px solid rgb(238, 238, 238); padding: 20px 25px; min-height: 533px;
    & > h1, & > h2, & > h3, & > h4, & > h5, & > h6 { font-family: var(--font-playfair); font-size: 22px; font-weight: 600; line-height: 1; text-align: left; color: var(--primary-color); text-decoration: underline; margin-bottom: 30px; }
    & ul {
      margin: 0px 0px 30px; padding: 0px 0px 30px; list-style: none; border-bottom: 1px solid rgb(217, 217, 217);
      &:last-child { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; padding-bottom: 0px; margin-bottom: 0px; }
      & li {
        & h6 { font-family: var(--font-worksans); font-size: 18px; font-weight: 500; line-height: 1; text-align: left; color: var(--title-color); margin-bottom: 18px; }
        & p { font-family: var(--font-worksans); font-size: 16px; font-weight: 400; line-height: 1.5; text-align: left; color: var(--text-color); margin-bottom: 0px; }
      }
    }
    & .guidelines {
      & h6 { font-family: var(--font-worksans); font-size: 18px; font-weight: 500; line-height: 1; text-align: left; color: var(--title-color); margin-bottom: 18px; }
      & .guidelines-list {
        margin-left: 20px;
        & li { font-family: var(--font-worksans); font-size: 16px; font-weight: 400; line-height: 1.5; text-align: left; color: var(--text-color); margin-bottom: 10px; list-style: disc; }
      }
    }
  }
}
.auction-details-section {
  & .summary.entry-summary, & .auction-details-content {
    & .batch {
      & h6 {
        font-family: var(--font-worksans); font-size: 18px; font-weight: 400; line-height: 1; text-align: left; color: var(--text-color); margin-bottom: 5px;
        & span { font-family: var(--font-worksans); font-size: 18px; font-weight: 400; line-height: 1; text-align: left; color: rgb(0, 0, 0); }
      }
    }
    & h1.product_title, & h3 { font-family: var(--font-playfair); font-size: 32px; font-weight: 600; text-align: left; color: var(--title-color); margin-bottom: 15px; }
    & .artist-info {
      margin: 0px 0px 20px; padding: 0px; list-style: none;
      & li {
        font-family: var(--font-worksans); font-size: 22px; font-weight: 500; line-height: 25.81px; text-align: left; margin-bottom: 10px;
        &.style-2 { color: rgb(223, 33, 33); }
        & span {
          font-family: var(--font-worksans); font-size: 20px; font-weight: 400; line-height: 23.46px; text-align: left; color: var(--text-color);
          &.style-2 { color: rgb(223, 33, 33); font-size: 22px; font-weight: 500; }
        }
      }
    }
    & .quantity-area {
      margin-bottom: 18px;
      & h6 { color: var(--text-color); font-size: 18px; font-family: var(--font-worksans); font-weight: 500; line-height: 1; display: block; margin-bottom: 16px; }
      & .quantity-counter-and-btn-area {
        display: flex; align-items: center; gap: 25px; flex-wrap: wrap;
        & .quantity-counter {
          display: flex; align-items: center; gap: 10px;
          & a {
            min-width: 41px; max-width: 41px; height: 48px; border-radius: 3px; display: flex; align-items: center; justify-content: center; color: var(--title-color); transition: 0.5s;
            & i {
              &::before { font-weight: 600 !important; }
            }
            &:hover { background-color: var(--title-color); color: var(--white-color); }
          }
          & .quantity__input {
            max-width: 128px; width: 100%; height: 48px; border: 1px solid var(--borderr-color); border-radius: 3px; padding: 0px 25px; color: var(--title-color); font-family: var(--font-worksans); font-size: 20px; font-weight: 500; line-height: 1; letter-spacing: 0.48px;
            &:focus { border: 1px solid rgb(221, 221, 221); }
          }
        }
        & .primary-btn1 {
          padding: 14px 33px;
          &.disabled { pointer-events: none; cursor: not-allowed; opacity: 0.5; }
        }
      }
    }
    & .auction-details-btn {
      & .auction-grid-btn {
        color: var(--white-color); font-family: var(--font-worksans); font-size: 16px; font-weight: 500; background-color: var(--primary-color); border-radius: 6px; padding: 15px 18px; white-space: nowrap; overflow: hidden; position: relative; z-index: 1; transition: 0.6s; display: inline-flex; align-items: center; justify-content: center; line-height: 1; gap: 6px; border: 1px solid transparent; min-width: 390px; margin-bottom: 18px;
        &:last-child { margin-bottom: 0px; }
        &.style-2 { background: rgb(61, 61, 61); }
        &::before { content: ""; display: block; position: absolute; bottom: 0px; left: 0px; width: 100%; background-image: ; background-attachment: ; background-origin: ; background-clip: ; background-color: ; background-repeat: no-repeat; background-size: 100% 1px; background-position: left 100%; transition: background-size 0.75s; }
        & svg { fill: var(--white-color); transition: 0.6s; }
        & strong { position: absolute; display: block; width: 0px; height: 0px; border-radius: 36px; background-color: var(--white-color); transition: 0.6s; transform: translate(-50%, -50%); z-index: -1; }
        &:hover {
          color: var(--title-color); border-color: var(--primary-color); text-decoration: none;
          & svg { fill: var(--title-color); }
          & strong { width: 225%; height: 1000.5px; }
        }
        &.wishlit-btn {
          background-color: transparent; border: 1px solid var(--primary-color); color: var(--title-color); padding: 14px 33px;
          & span { background-image: ; background-attachment: ; background-origin: ; background-clip: ; background-color: ; background-repeat: no-repeat; background-size: 0px 1px; background-position: 0% 100%; transition: background-size 0.75s; padding-bottom: 1px; }
          & strong { position: absolute; display: block; width: 0px; height: 0px; border-radius: 36px; background-color: var(--primary-color); transition: 0.6s; transform: translate(-50%, -50%); z-index: -1; }
          &:hover {
            border-color: var(--primary-color); color: var(--white-color);
            & span { background-size: 100% 1px; background-position: left 100%; }
            & strong { width: 225%; height: 1000.5px; }
          }
          &.disabled { pointer-events: none; cursor: not-allowed; opacity: 0.5; }
        }
      }
    }
    & .whishlist-area {
      margin-bottom: 30px;
      & a {
        color: var(--text-color); font-family: var(--font-worksans); font-size: 15px; font-weight: 400; line-height: 1; display: inline-flex; align-items: center; gap: 10px; transition: 0.5s;
        & span {
          width: 23px; height: 23px; border-radius: 50%; border: 1px solid var(--borderr-color); display: flex; align-items: center; justify-content: center; transition: 0.5s;
          & svg { fill: var(--title-color); transition: 0.5s; }
        }
        &:hover {
          color: var(--primary-color);
          & span {
            border-color: var(--primary-color); background-color: var(--primary-color);
            & svg { fill: var(--white-color); }
          }
        }
      }
    }
  }
  & .countdown-area {
    & h6 { font-family: var(--font-worksans); font-size: 18px; font-weight: 400; line-height: 1; text-align: left; color: var(--text-color); margin-bottom: 15px; }
    & .countdown-timer {
      width: 390px; height: 59px; border-radius: 6px; line-height: 1; border: 1px solid var(--borderr-color); background: rgb(250, 248, 248); display: flex; align-items: center; justify-content: center; transition: 0.5s; opacity: 1; margin-bottom: 8px;
      & ul {
        margin: 0px; padding: 0px; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px;
        & li {
          line-height: 1; color: var(--title-color); text-align: center; font-family: var(--font-worksans); font-size: 26px; font-weight: 500; display: flex; align-items: center; margin-bottom: 0px;
          & span {
            display: inline-block; font-size: 26px; font-weight: 500; color: var(--title-color);
            &:last-child { display: none; visibility: hidden; }
          }
        }
      }
    }
    & .ending-time {
      font-family: var(--font-worksans); font-size: 14px; font-weight: 400; line-height: 1; text-align: left; color: var(--primary-color); margin-left: 180px;
      & strong { font-family: var(--font-worksans); font-size: 14px; font-weight: 500; line-height: 1; text-align: left; color: var(--title-color); }
    }
  }
  & .payment-method {
    background: rgb(249, 249, 249); margin-top: 30px; padding: 15px 25px; max-width: 390px; width: 100%;
    & .payment-list {
      margin: 0px; padding: 0px; list-style: none;
      & li {
        font-family: var(--font-worksans); font-size: 16px; font-weight: 400; line-height: 24px; text-align: left; color: rgb(52, 52, 52); display: flex; align-items: center; margin-bottom: 15px; gap: 10px;
        &:last-child { margin-bottom: 5px; }
      }
    }
  }
  & .payment-card {
    margin: 10px 0px 0px; padding: 0px; list-style: none; display: flex; align-items: center; gap: 24px;
    &:last-child { margin-bottom: 0px; }
  }
  & .ask-question {
    font-family: var(--font-worksans); font-size: 14px; font-weight: 400; line-height: 1; text-align: left; color: var(--title-color); margin-top: 10px; display: inline-block;
    & a { font-weight: 500; color: var(--title-color); }
  }
}
.auction-details-img {
  position: sticky; top: 30px; margin-right: 35px;
  & .auction-details-tab-img {
    position: relative; overflow: hidden; background: rgb(211, 211, 211); padding: 29px 34px;
    & .slider-btn-grp {
      & .slider-btn {
        position: absolute; top: 50%; transform: translateY(-50%); left: 50px; z-index: 9;
        &.auction-details-slider-next2 { left: unset; right: 50px; }
        & svg { fill: var(--white-color); }
      }
    }
    & img { box-shadow: rgba(0, 0, 0, 0.27) 10px 13px 11px 0px; position: relative; }
  }
  & .nav-pills {
    padding-top: 30px;
    & .nav-item {
      max-width: 118px; width: 100%;
      & .nav-link {
        border-radius: unset; position: relative; background: rgb(228, 228, 228); padding: 8px 11px;
        & img { width: 100%; max-width: 96px; height: 131px; object-fit: cover; }
        &::after { content: ""; height: 100%; width: 100%; position: absolute; left: 0px; top: 0px; background-color: rgba(var(--primary-color-opc), 0.4); border-radius: 5px; opacity: 0.5; }
        &.active {
          &::after { display: none; }
        }
      }
    }
  }
}
.single-step {
  position: relative;
  & .arrow {
    position: absolute; top: -50%; left: 50px;
    &.style-2 { top: -60%; left: 42%; }
  }
  & span { font-family: var(--font-playfair); font-size: 60px; font-weight: 900; letter-spacing: 0.04em; text-align: left; line-height: 1; text-transform: uppercase; -webkit-text-stroke: 1px rgb(55, 55, 55); -webkit-text-fill-color: transparent; margin-bottom: 10px; display: inline-block; }
  & h3 { font-family: var(--font-playfair); font-size: 30px; font-weight: 600; line-height: 1; text-align: left; color: var(--title-color); margin-bottom: 25px; text-transform: capitalize; }
  & p { font-family: var(--font-worksans); font-size: 18px; font-weight: 400; line-height: 1.6; text-align: left; color: var(--text-color); margin-bottom: 0px; }
}
.video-tutorial-area {
  & h3 { color: var(--title-color); font-family: var(--font-playfair); font-size: 32px; font-weight: 600; line-height: 1.2; margin-bottom: 20px; }
  & > p { font-family: var(--font-worksans); font-size: 20px; font-weight: 400; line-height: 1.5; text-align: left; color: var(--text-color); margin-bottom: 55px; }
  & .video-wrapper {
    position: relative; margin-bottom: 40px;
    & img { }
    &::before { content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; }
    & .video-area {
      position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); cursor: pointer;
      & .icon {
        position: relative;
        & .video-circle {
          stroke: var(--dark-white-color); fill: none; transition: 0.5s;
          & .top-half { stroke-dasharray: 320; stroke-dashoffset: 320; transition: stroke-dashoffset 0.8s cubic-bezier(0.33, 1, 0.68, 1); }
        }
        & i { color: var(--dark-white-color); font-size: 40px; line-height: 1; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin-left: 2px; }
      }
      &:hover {
        & .icon {
          & .video-circle {
            & .top-half { stroke-dashoffset: 0; }
          }
        }
      }
    }
  }
  & .ask-question {
    display: flex; justify-content: center; padding-top: 35px; border-top: 1px solid var(--borderr-color);
    & p {
      font-family: var(--font-worksans); font-size: 18px; font-weight: 400; line-height: 30px; color: var(--title-color); margin-bottom: 0px;
      & a { font-weight: 500; color: var(--title-color); }
    }
  }
}
.how-to-bid-section {
  & .how-to-bid-wrap { background: var(--section-bg-color); padding: 80px 112px; }
}
.how-to-sell-section {
  & .how-to-sell-wrap { background: var(--section-bg-color); padding: 30px 112px 40px; }
}
.behiend-us-section {
  & .behiend-us-section-title {
    max-width: 900px;
    & h3 { font-family: var(--font-playfair); font-size: 32px; font-weight: 600; line-height: 1; text-align: left; color: var(--title-color); }
    & p { font-family: var(--font-worksans); font-size: 18px; font-weight: 400; line-height: 1.6; text-align: left; color: var(--text-color); }
  }
  & .behiend-us-section-card {
    border: 1px solid rgb(238, 238, 238); padding: 50px 17px; max-width: 560px; height: 309px; position: relative;
    & .arrow-1 { position: absolute; left: -25%; top: 50%; width: 23%; }
    & .arrow-2 { position: absolute; left: 50%; top: 105%; height: 30%; }
    & .arrow-3 { position: absolute; left: -28%; top: 50%; }
    & .arrow-4 { position: absolute; left: 50%; top: 105%; }
    &.style-2 { background: var(--section-bg-color); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; }
    & h5 { font-family: var(--font-playfair); font-size: 22px; font-weight: 600; line-height: 1; text-align: center; color: var(--title-color); text-transform: capitalize; }
    & p { font-family: var(--font-worksans); font-size: 18px; font-weight: 400; line-height: 30px; text-align: center; color: var(--text-color); }
    & span { position: absolute; top: 0px; left: 0px; background: rgb(0, 0, 0); color: var(--white-color); font-family: var(--font-worksans); font-size: 20px; font-weight: 500; line-height: 1; letter-spacing: 0.06em; text-align: center; padding: 5px 25px; }
  }
}
.map-area {
  & h3 { font-family: var(--font-playfair); font-size: 32px; font-weight: 600; line-height: 1; text-align: left; color: var(--primary-color); margin-bottom: 55px; }
  & .single-content {
    display: flex; gap: 60px; align-items: center;
    & ul {
      margin: 0px; padding: 0px; list-style: none;
      & li {
        font-family: var(--font-worksans); font-size: 20px; font-weight: 400; line-height: 1; text-align: left; color: var(--text-color); margin-bottom: 20px; text-transform: capitalize; transition: 0.5s; position: relative;
        & a { color: var(--title-color); font-weight: 500; display: inline-block; background-image: ; background-attachment: ; background-origin: ; background-clip: ; background-color: ; background-size: 0px 1px; background-repeat: no-repeat; background-position: right 100%; transition: background-size 0.75s; }
        &:hover {
          & a { background-size: 100% 1px; background-position: 0% 100%; }
        }
        & span { font-weight: 500; color: var(--title-color); }
      }
      &.opening-time {
        & li {
          &::after { content: ""; position: absolute; top: -30%; transform: translateY(-50%); left: -30px; width: 1px; height: 82px; background-color: rgb(217, 217, 217); }
          &:first-child {
            &::after { display: none; }
          }
        }
      }
    }
  }
}
.contact-map {
  line-height: 0; padding-top: 25px;
  & iframe { width: 100%; height: 433px; }
}
.nice-select {
  width: 100%; border-radius: 5px; height: 52px; display: flex; align-items: center; line-height: 1; padding: 0px 25px; background: var(--section-bg-color); outline: none !important; box-shadow: none !important;
  &::after { height: 8px; width: 8px; border-bottom: 1px solid var(--text-color); border-right: 1px solid var(--text-color); right: 28px; margin-top: -5px; }
  & .current { color: rgb(125, 125, 125); font-family: var(--font-worksans); font-size: 18px; font-weight: 400; }
  &:hover { border-color: rgb(243, 243, 243); background: rgb(243, 243, 243); }
  &:focus { border-color: var(--title-color); background-color: var(--white-color); }
  & .list {
    border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 5px; width: 100%; max-height: 250px; overflow-y: auto;
    &::-webkit-scrollbar { width: 5px; }
    &::-webkit-scrollbar-track { background: rgb(241, 241, 241); }
    &::-webkit-scrollbar-thumb { background: var(--text-color); }
    & .option {
      color: var(--title-color); font-family: var(--font-worksans); font-size: 13px; font-weight: 400; padding-left: 25px; padding-right: 25px; display: flex; align-items: center; justify-content: space-between; width: 100%;
      &:hover { color: var(--title-color); background-color: transparent; font-weight: 500; }
      &.selected { font-weight: 600; }
    }
  }
}
.dashboard-sidebar-menu {
  & ul {
    margin: 0px; list-style: none; padding: 30px 20px; border-radius: 10px; position: sticky; top: 50px;
    & li {
      margin-bottom: 20px;
      &:last-child { margin-bottom: 0px; }
      & a {
        display: flex; align-items: center; gap: 17px; transition: 0.5s; padding: 13px 20px; border: 1px solid var(--borderr-color); border-radius: 5px;
        & h5 { font-family: var(--font-worksans); font-size: 20px; font-weight: 500; line-height: 1; text-align: left; color: rgb(52, 52, 52); margin-bottom: 0px; }
        & svg { fill: rgb(52, 52, 52); }
        &:hover {
          background: var(--title-color);
          & h5 { color: var(--white-color); }
          & svg { fill: var(--white-color); }
        }
      }
      &.active {
        & a {
          background: var(--title-color);
          & h5 { color: var(--white-color); }
          & svg { fill: var(--white-color); }
        }
      }
    }
  }
}
.dashboard-section {
  & .dashboard-wrapper {
    display: grid; grid-template-columns: 24% 76%; border: 1px solid var(--borderr-color);
    & .dashboard-content-wrap {
      padding: 30px 60px; border-left: 1px solid var(--borderr-color);
      &.style-2 { padding: 30px 30px 0px 60px; border-left: 1px solid var(--borderr-color); }
      & .portfolio-info-wrap {
        & .portfolio-content {
          & h4 { font-family: var(--font-playfair); font-size: 24px; font-weight: 600; line-height: 1; text-align: left; color: var(--title-color); margin-bottom: 10px; }
          & p { font-family: var(--font-worksans); font-size: 16px; font-weight: 400; line-height: 1.5; text-align: left; color: var(--dark-text-color); }
        }
        & .single-content {
          border: 1px solid var(--borderr-color); padding: 25px; box-shadow: rgba(0, 0, 0, 0.06) 5px 2px 30px 0px; background: var(--section-bg-color);
          & h6 { font-family: var(--font-playfair); font-size: 18px; font-weight: 500; line-height: 1; text-align: center; color: var(--title-color); margin-bottom: 5px; border-bottom: 1px solid rgb(52, 52, 52); display: inline-flex; align-items: center; padding-bottom: 10px; }
          & h2 { font-family: var(--font-playfair); font-size: 50px; font-weight: 600; line-height: 1; letter-spacing: 0.02em; text-align: center; color: var(--title-color); margin-bottom: 0px; }
        }
      }
    }
  }
}
.dashboard-profile-content {
  & .single-content {
    border-bottom: 1px solid var(--borderr-color);
    &:last-child { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }
    &.style-2 {
      margin-top: 25px;
      & h5 { margin-bottom: 48px; }
    }
    & h5 { font-family: var(--font-playfair); font-size: 20px; font-weight: 600; line-height: 1; text-align: left; color: var(--title-color); text-decoration: underline; }
    & .author-area {
      margin-bottom: 45px;
      & .author-image {
        margin-bottom: 15px; position: relative;
        & .icon { position: absolute; left: 52%; top: 55px; background: var(--white-color); width: 28px; height: 28px; border-radius: 50%; }
      }
      & .author-content {
        & h4 { font-family: var(--font-playfair); font-size: 24px; font-weight: 600; line-height: 1; letter-spacing: 0.02em; text-align: center; color: var(--title-color); margin-bottom: 10px; }
        & span { font-family: var(--font-worksans); font-size: 20px; font-weight: 400; line-height: 1; text-align: center; color: var(--text-color); text-transform: capitalize; }
      }
    }
    & .form-inner {
      position: relative; line-height: 1;
      &.style-2 { display: flex; align-items: center; gap: 20px; margin-top: 30px; }
      & label {
        color: var(--title-color); font-family: var(--font-worksans); font-size: 18px; font-weight: 500; display: block; margin-bottom: 10px;
        &.containerss {
          display: flex; width: 100%; position: relative; padding-left: 20px; cursor: pointer; user-select: none;
          & span { color: var(--title-color); font-family: var(--font-open-sans); font-size: 15px; font-weight: 400; line-height: 1.4; }
          & input {
            position: absolute; opacity: 0; cursor: pointer; height: 0px; width: 0px;
            &:checked ~ .checkmark {
              background-color: var(--primary-color1); border-color: var(--primary-color1); border-radius: 2px;
              &::after { content: url("../img/inner-page/icon/checkbox-check.svg"); left: 1.5px; top: -5px; position: absolute; }
            }
          }
          & .checkmark { position: absolute; top: 3px; left: 0px; height: 14px; width: 14px; background-color: var(--primary-color1); border: 1px solid var(--primary-color1); border-radius: 2px; }
          &:hover {
            & input ~ .checkmark { border-color: var(--primary-color1); }
          }
        }
      }
      & input {
        border-radius: 5px; background: var(--section-bg-color); color: rgb(125, 125, 125); font-family: var(--font-worksans); font-size: 16px; font-weight: 400; height: 52px; width: 100%; padding: 10px 20px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial;
        &::placeholder { color: var(--text-color); }
        &:focus { border: 1px solid var(--primary-color1); }
      }
      & textarea {
        border-radius: 5px; background: var(--white-color); color: var(--text-color); font-family: var(--font-open-sans); font-size: 13px; width: 100%; padding: 20px; outline: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; min-height: 100px;
        &::placeholder { }
      }
      & > i { position: absolute; right: 20px; bottom: 15px; color: var(--text-color); cursor: pointer; }
      & .nice-select { background: var(--section-bg-color); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; }
      & .iti {
        width: 100%;
        & input { padding-left: 82px; }
      }
      & .iti__flag-container { top: 8px; left: 8px; }
      & .iti__selected-flag { padding-left: 16px; width: 60px; height: 34px; background-color: rgb(250, 248, 251); border: 1px solid rgb(238, 238, 238); }
      & .iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag { background-color: transparent; }
      & .iti__country-list {
        max-width: 280px; box-shadow: unset; background-color: white; border: 1px solid var(--primary-color1);
        & .iti__country.iti__highlight { }
        & li {
          font-family: var(--font-montserrat); font-weight: 400;
          & span { font-family: var(--font-montserrat); font-weight: 400; }
        }
      }
      & .primary-btn1 {
        background-color: transparent; border: 1px solid var(--primary-color); color: var(--title-color); padding: 14px 20px;
        & span { background-image: ; background-attachment: ; background-origin: ; background-clip: ; background-color: ; background-repeat: no-repeat; background-size: 0px 1px; background-position: 0% 100%; transition: background-size 0.75s; padding-bottom: 1px; }
        & strong { position: absolute; display: block; width: 0px; height: 0px; border-radius: 36px; background-color: var(--primary-color); transition: 0.6s; transform: translate(-50%, -50%); z-index: -1; }
        &:hover {
          border-color: var(--primary-color); color: var(--white-color);
          & span { background-size: 100% 1px; background-position: left 100%; }
          & strong { width: 225%; height: 1000.5px; }
        }
        &.disabled { pointer-events: none; cursor: not-allowed; opacity: 0.5; }
      }
    }
  }
}
.dashboard-order-content {
  & .dashboard-order-table {
    & h4 { font-family: var(--font-playfair); font-size: 26px; font-weight: 600; line-height: 1; text-align: left; color: var(--title-color); margin-bottom: 25px; }
    & .dashboard-top-area {
      display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;
      & h4 { margin-bottom: 0px; }
      & .category-area {
        & .nice-select {
          color: var(--primary-color); font-family: var(--font-worksans); font-size: 16px; font-weight: 400; display: flex; gap: 20px; height: 30px; width: 220px; border: 1px solid var(--borderr-color); background: transparent; padding-left: 15px; padding-right: 15px;
          & .current { color: var(--title-color); font-family: var(--font-worksans); font-size: 14px; font-weight: 400; text-transform: capitalize; }
          &::after { border-bottom: 2px solid var(--title-color); border-right: 2px solid var(--title-color); content: ""; display: block; height: 9px; margin-top: -5px; pointer-events: none; position: absolute; right: 10px; top: 50%; width: 9px; }
          & .option { font-family: var(--font-worksans); font-size: 14px; line-height: 24px; letter-spacing: 0.02em; text-align: left; text-transform: capitalize; min-height: 30px; color: var(--title-color); padding-left: 25px; }
          & .list { background-color: var(--white-color); box-shadow: rgba(129, 129, 129, 0.25) 0px 4px 32px 0px; border: 1px solid rgb(238, 238, 238); width: 230px; margin-left: -40px; }
        }
        & .nice-select .option:hover, & .nice-select .option.focus, & .nice-select .option.selected.focus { background-color: rgb(246, 246, 246); }
      }
    }
    & table {
      width: 100%; margin-bottom: 30px;
      & thead {
        & tr {
          & th { font-family: var(--font-worksans); font-size: 16px; font-weight: 500; line-height: 1; text-align: center; color: var(--title-color); background: var(--section-bg-color); padding: 15px 8px; border: 1px solid var(--borderr-color); }
        }
      }
      & tbody {
        & tr {
          & td {
            margin-bottom: 0px; text-align: center; line-height: 1; padding: 14px 0px; border: 1px solid var(--borderr-color);
            & .icon {
              border: 1px solid rgb(0, 0, 0); border-radius: 50%; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; text-align: center; transition: 0.35s; margin: 0px auto;
              & svg { fill: rgb(0, 0, 0); }
              &:hover {
                background: rgb(0, 0, 0);
                & svg { fill: var(--white-color); }
              }
            }
            & .table-text { font-family: var(--font-worksans); font-size: 16px; font-weight: 400; line-height: 1; color: var(--text-color); text-align: center; }
            & .green-color { font-family: var(--font-worksans); font-size: 16px; font-weight: 500; line-height: 1; text-align: center; color: rgb(48, 168, 111); }
            & .red-color { font-family: var(--font-worksans); font-size: 16px; font-weight: 500; line-height: 1; text-align: center; color: rgb(223, 33, 33); }
            & .primary-btn1 {
              background-color: transparent; border: 1px solid var(--primary-color); color: var(--title-color); padding: 10px 20px;
              & span { background-image: ; background-attachment: ; background-origin: ; background-clip: ; background-color: ; background-repeat: no-repeat; background-size: 0px 1px; background-position: 0% 100%; transition: background-size 0.75s; padding-bottom: 1px; }
              & strong { position: absolute; display: block; width: 0px; height: 0px; border-radius: 36px; background-color: var(--primary-color); transition: 0.6s; transform: translate(-50%, -50%); z-index: -1; }
              &:hover {
                border-color: var(--primary-color); color: var(--white-color);
                & span { background-size: 100% 1px; background-position: left 100%; }
                & strong { width: 225%; height: 1000.5px; }
              }
              &.disabled { pointer-events: none; cursor: not-allowed; opacity: 0.5; }
            }
          }
        }
      }
    }
    & .pagination-area {
      display: flex; justify-content: space-between;
      & .pagination-text {
        & span { font-family: var(--font-worksans); font-size: 14px; font-weight: 400; line-height: 1; text-align: left; color: var(--primary-color); }
      }
      & .pagination-button {
        margin-bottom: 40px;
        & ul {
          margin: 0px; padding: 0px; list-style: none; display: flex; gap: 20px;
          & li {
            & a {
              font-family: var(--font-worksans); font-size: 14px; font-weight: 500; line-height: 1; text-align: center; color: var(--text-color); border: 1px solid var(--borderr-color); padding: 7px 10px; transition: 0.35s; border-radius: 2px;
              &:hover { border: 1px solid var(--title-color); color: var(--title-color); }
            }
          }
        }
      }
    }
  }
}
.certificate-section {
  & .certificate-wrapper {
    border: 1px solid rgb(0, 0, 0); padding: 30px 20px;
    & .certificate-image {
      position: relative;
      & .certificate-download-icon {
        position: absolute; top: 15px; right: 20px;
        & ul {
          margin: 0px; padding: 0px; list-style: none; display: flex; align-items: center; gap: 16px;
          & li {
            & a {
              width: 44px; height: 42px; background: var(--white-color); display: flex; align-items: center; justify-content: center; transition: 0.35s;
              & svg { fill: var(--title-color); }
              &:hover {
                background: var(--text-color);
                & svg { fill: var(--white-color); }
              }
            }
          }
        }
      }
    }
  }
  & .certificate-other-info {
    border-top: 1px solid rgb(217, 217, 217); padding-top: 30px;
    & .info-list {
      margin: 0px; padding: 0px; list-style: none; display: flex; align-items: center; justify-content: space-between;
      & .list-content {
        position: relative;
        &::before { content: ""; width: 1px; height: 191px; background-color: rgb(217, 217, 217); position: absolute; top: -50%; transform: translateY(50%); left: -40%; }
        &:first-child {
          padding-left: 0px;
          &::before { display: none; }
        }
        & .certificate-number {
          max-width: 463px;
          & h4 { font-family: var(--font-playfair); font-size: 26px; font-weight: 600; line-height: 1; text-align: left; margin-bottom: 20px; text-decoration: underline; color: var(--title-color); }
          & p {
            font-family: var(--font-worksans); font-size: 18px; font-weight: 400; line-height: 1.5; text-align: left; margin-bottom: 20px; color: var(--title-color);
            &:last-child { margin-bottom: 0px; }
          }
        }
        & .certificate-issued {
          & h4 {
            font-family: var(--font-playfair); font-size: 26px; font-weight: 600; line-height: 1; text-align: left; color: var(--title-color); margin-bottom: 25px;
            & a { font-size: 28px; font-weight: 700; color: var(--title-color); }
          }
          & .issued-list {
            margin: 0px; padding: 0px 0px 0px 25px; list-style: none;
            & li {
              font-family: var(--font-worksans); font-size: 18px; font-weight: 400; line-height: 1; text-align: left; color: var(--title-color); margin-bottom: 15px; list-style: disc;
              & a { color: var(--title-color); }
            }
          }
        }
      }
    }
  }
}
.notify-modal {
  & .modal-dialog {
    & .modal-content {
      border-radius: 0px; padding: 20px 40px;
      & .modal-header {
        display: block; border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor;
        & .modal-title { font-family: var(--font-playfair); font-size: 20px; font-weight: 600; line-height: 1; text-align: center; color: var(--title-color); text-transform: capitalize; }
      }
      & .modal-close {
        position: absolute; top: 10px; right: 10px; display: flex; align-items: center; gap: 10px; background-color: transparent; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; outline: none; color: var(--title-color);
        & i {
          width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background-color: rgb(247, 249, 248); border: 1px solid var(--text-color2); transition: 0.5s;
          &:hover { background-color: red; color: var(--white-color); border: 1px solid red; }
        }
      }
      & .modal-body {
        & .form-inner {
          display: flex; background: rgb(250, 248, 248); border-radius: 8px; align-items: center; padding: 0px 20px;
          & input {
            background: transparent; color: rgb(125, 125, 125); font-family: var(--font-worksans); font-size: 14px; font-weight: 500; height: 50px; width: 100%; padding: 10px 0px; outline: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial;
            &::placeholder { color: rgb(124, 124, 124); font-weight: 400; }
            &:focus { border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; }
          }
          & .primary-btn1 {
            color: var(--white-color); font-family: var(--font-worksans); font-size: 14px; font-weight: 400; background-color: var(--primary-color); border-radius: 6px; padding: 8px 2px; white-space: nowrap; overflow: hidden; position: relative; z-index: 1; transition: 0.6s; display: inline-flex; align-items: center; justify-content: center; line-height: 1; gap: 6px; border: 1px solid transparent; min-width: 100px;
            &::before { content: ""; display: block; position: absolute; bottom: 0px; left: 0px; width: 100%; background-image: ; background-attachment: ; background-origin: ; background-clip: ; background-color: ; background-repeat: no-repeat; background-size: 100% 1px; background-position: left 100%; transition: background-size 0.75s; }
            & svg { fill: var(--white-color); transition: 0.6s; }
            & strong { position: absolute; display: block; width: 0px; height: 0px; border-radius: 36px; background-color: var(--white-color); transition: 0.6s; transform: translate(-50%, -50%); z-index: -1; }
            &:hover {
              color: var(--title-color); border-color: var(--primary-color); text-decoration: none;
              & svg { fill: var(--title-color); }
              & strong { width: 225%; height: 1000.5px; }
            }
          }
        }
      }
    }
  }
}
.terms-and-conditions-page {
  & .update-date {
    display: flex; align-items: center; gap: 48px; line-height: 1;
    & h6 {
      margin-bottom: 0px; color: var(--title-color); font-family: var(--font-worksans); font-size: 14px; font-weight: 500; line-height: 1;
      & i { color: var(--primary-color); }
      position: relative;
      &::after { content: ""; width: 28px; height: 1px; background-color: var(--primary-color); position: absolute; right: -38px; top: 50%; transform: translateY(-50%); }
    }
    & p { color: var(--text-color); font-family: var(--font-worksans); font-size: 14px; font-weight: 400; margin-bottom: 0px; }
  }
  & .terms-and-conditions {
    & h2 { color: var(--title-color); font-family: var(--font-worksans); font-size: 35px; font-weight: 600; line-height: 1.3; margin-bottom: 20px; }
    & h3 { color: var(--title-color); font-family: var(--font-worksans); font-size: 32px; font-weight: 600; line-height: 1.3; margin-bottom: 20px; }
    & p {
      color: var(--text-color); font-family: var(--font-worksans); font-size: 17px; font-weight: 400; line-height: 30px; margin-bottom: 15px;
      &:last-child { margin-bottom: 0px; }
    }
    & ul {
      margin: 0px 0px 20px; padding: 5px 0px 0px 50px; list-style: none;
      & li {
        color: var(--text-color); font-family: var(--font-worksans); font-size: 17px; font-weight: 400; line-height: 30px; margin-bottom: 15px;
        & strong { color: var(--title-color); font-family: var(--font-worksans); font-size: 17px; font-weight: 600; line-height: 30px; }
      }
    }
    & .btn-area { padding-top: 40px; }
    & .decline-btn {
      background-color: transparent; padding: 9px 19px; border-radius: 6px; overflow: hidden; position: relative; border: 1px solid var(--primary-color); z-index: 1; white-space: nowrap; transition: 0.6s; display: inline-flex; align-items: center; line-height: 1; gap: 6px; color: var(--title-color); font-family: var(--font-worksans); font-size: 14px; font-weight: 500;
      & span { background-image: ; background-attachment: ; background-origin: ; background-clip: ; background-color: ; background-repeat: no-repeat; background-size: 0px 1px; background-position: 0% 100%; transition: background-size 0.75s; padding-bottom: 1px; }
      & strong { position: absolute; display: block; width: 0px; height: 0px; border-radius: 36px; background-color: var(--primary-color); transition: 0.6s; transform: translate(-50%, -50%); z-index: -1; }
      &:hover {
        border-color: var(--primary-color); color: var(--white-color);
        & span { background-size: 100% 1px; background-position: left 100%; }
        & strong { width: 225%; height: 1000.5px; }
      }
      &.disabled { pointer-events: none; cursor: not-allowed; opacity: 0.5; }
    }
    & .accept-btn { padding: 9px 19px; }
    &.two {
      & ul { margin-bottom: 0px; }
    }
  }
}
body.dark {
  & .tt-style-switch { background-color: rgb(67, 67, 67); }
  & .topbar {
    & .topbar-wrap {
      & .header-logo {
        & a {
          & img {
            &.dark { display: block; }
            &.light { display: none; }
          }
        }
      }
    }
  }
  & .topbar .topbar-wrap .search-area form .form-inner { background-color: rgb(33, 33, 33); }
  & .topbar .topbar-wrap .search-area form .form-inner input {
    &::placeholder { color: rgb(211, 211, 211); }
  }
  & .topbar .topbar-wrap .topbar-right .language-area .language-list { background-color: rgb(33, 33, 33); }
  & header.style-1 {
    & .header-logo {
      & a {
        & img {
          &.dark { display: block; }
          &.light { display: none; }
        }
      }
    }
    & .mobile-logo-area {
      & .mobile-logo-wrap {
        & img {
          width: 138px;
          &.dark { display: block; }
          &.light { display: none; }
        }
      }
    }
  }
  & header.style-1 .search-area form .form-inner {
    background-color: rgb(33, 33, 33);
    & input {
      &::placeholder { color: rgb(211, 211, 211); }
    }
  }
  & header.style-1 .main-menu ul > li .mega-menu2 .menu-row .menu-single-item::after { background-color: rgb(52, 52, 52); }
  & header.style-1 .main-menu ul > li .mega-menu .menu-row { border-color: rgb(52, 52, 52); }
  & header.style-2 {
    & .header-logo {
      & a {
        & img {
          &.dark { display: block; }
          &.light { display: none; }
        }
      }
    }
    & .mobile-logo-area {
      & .mobile-logo-wrap {
        & img {
          width: 138px;
          &.dark { display: block; }
          &.light { display: none; }
        }
      }
    }
  }
  & .home1-about-section {
    & .about-content-wrap {
      & .countdown-wrap {
        background-color: rgb(52, 52, 52); border-color: rgb(52, 52, 52);
        & .countdown-list {
          & .single-countdown {
            &::after { background-color: rgb(125, 125, 125); }
          }
        }
      }
    }
  }
  & .auction-card .auction-card-content {
    background-color: rgb(33, 33, 33);
    & .bid-btn {
      border: 1px solid rgb(125, 125, 125);
      &:hover { border-color: var(--primary-color); }
    }
  }
  & .home1-testimonial-section {
    & .testimonial-slider-wrap {
      & .slider-btn-grp {
        & .slider-btn {
          border-color: rgb(89, 89, 89);
          & svg { fill: rgb(89, 89, 89); }
          &:hover {
            background-color: var(--primary-color);
            & svg { fill: var(--white-color); }
          }
        }
      }
    }
  }
  & .article-card .article-content-wrap .article-content { background-color: rgb(33, 33, 33); }
  & .artist-card.style-2 .artist-content { background-color: rgb(255, 255, 255); }
  & .home1-feature-section { background-color: rgb(33, 33, 33); }
  & .footer-section { background-color: rgb(19, 19, 19); }
  & .home2-search-bar-section .search-bar-wrap .search-area form .form-inner input {
    &::placeholder { color: rgb(211, 211, 211); }
  }
  & .home2-search-bar-section .search-bar-wrap .search-area form .form-inner { border-bottom: 1px solid rgb(89, 89, 89); }
  & .home2-about-section .about-wrapper .countdown-wrap { background-color: rgb(23, 23, 23); }
  & .home2-about-section .about-wrapper .countdown-wrap .countdown-list .single-countdown::after { background-color: rgb(52, 52, 52); }
  & .article-standard-section {
    & .article-stndard-card {
      & .article-standard-content {
        & .primary-btn1 { border: 1px solid rgb(52, 52, 52); }
      }
    }
  }
  & .page-navigation-area {
    border: 1px solid rgb(52, 52, 52);
    & .pagination {
      & li {
        & a { border: 1px solid rgb(52, 52, 52); color: var(--dark-white-color); }
        &.active {
          & a { color: var(--dark-title-color); border: 1px solid var(--dark-white-color); }
        }
      }
    }
    & .prev-next-btn {
      & a {
        border: 1px solid rgb(52, 52, 52);
        & svg { fill: var(--text-color-white); }
        &:hover {
          & svg { fill: var(--dark-title-color); }
        }
      }
    }
  }
  & .top-content {
    &.style-2 {
      & ul {
        & li {
          color: var(--dark-white-color);
          & a { color: var(--dark-white-color); }
          &::before { background-color: var(--dark-white-color); }
          & svg {
            & path { stroke: var(--dark-white-color); }
          }
        }
      }
    }
  }
  & .breadcrumb-section {
    & .breadcrumb-wrapper {
      & .artist-info {
        & h1 { color: var(--dark-white-color); }
      }
    }
  }
  & .breadcrumb-section2 {
    & .breadcrumb-content {
      & h1 { color: var(--dark-white-color); }
    }
  }
  & .nav-area { border-bottom: 1px solid rgb(52, 52, 52); }
  & .auction-card-sidebar-section {
    & .right-content {
      & .biography-section {
        & .biography-card {
          & h4 { color: var(--dark-white-color); }
        }
        & p {
          & span { color: var(--dark-white-color); }
        }
      }
      & .awards-section {
        & .awards-list {
          & li {
            & .button-area {
              & .icon {
                border: 1px solid rgb(52, 52, 52);
                & svg { fill: var(--dark-white-color); }
                &:hover {
                  & svg { fill: var(--dark-title-color); }
                }
              }
            }
          }
        }
      }
    }
  }
  & .sidebar-area {
    & .artists-widgets {
      & .widget-title {
        & h5 { color: var(--dark-white-color); }
      }
      & .checkbox-container {
        & ul {
          & li {
            & .containerss {
              & input {
                &:checked ~ .checkmark {
                  &::after { content: url("../img/inner-page/icon/checkbox-icon-black.svg"); left: 1px; top: -2px; position: absolute; }
                }
              }
            }
          }
        }
      }
      &.widget_search {
        & .wp-block-search__inside-wrapper {
          border: 1px solid rgb(52, 52, 52);
          & button {
            &:hover {
              & svg { fill: var(--dark-white-color); }
            }
          }
        }
      }
    }
  }
  & .auction-card-top-area { border-bottom: 1px solid rgb(52, 52, 52); }
  & .details-page-wrapper {
    & .post-author-meta {
      & .author-and-date {
        & .author-area {
          & .author-name-desig {
            & span { color: var(--dark-white-color); }
          }
        }
      }
    }
    & .social-area {
      & .social-link {
        & li {
          & a {
            border: 1px solid rgb(52, 52, 52); color: var(--dark-white-color);
            &:hover { color: var(--dark-title-color); }
          }
        }
      }
    }
  }
  & .details-navigation {
    & .single-navigation {
      & .arrow {
        & svg { fill: var(--dark-white-color); }
      }
    }
  }
  & .comment-and-form-area {
    & .comment-area {
      border: 1px solid rgb(52, 52, 52);
      & .comment {
        & .comment-replay { border-top: 1px solid rgb(52, 52, 52); }
      }
    }
    & .comment-title { border-bottom: 1px solid rgb(52, 52, 52); }
    & .inquiry-form { background: var(--section-bg-color); border: 1px solid rgb(52, 52, 52); }
  }
  & .enquery-section {
    & .enquery-form-wrapper { background: var(--section-bg-color); border: 1px solid rgb(52, 52, 52); }
  }
  & .discover-section {
    & .discover-content {
      & .countdown-wrap {
        background-color: rgb(52, 52, 52); border-color: rgb(52, 52, 52);
        & .countdown-list {
          & .single-countdown {
            &::after { background-color: rgb(52, 52, 52); }
          }
        }
      }
      & .discover-list {
        & li {
          & svg {
            & path { stroke: var(--dark-white-color); }
          }
        }
      }
    }
  }
  & .auction-details-section {
    & .auction-details-content {
      & .batch {
        & h6 {
          color: var(--dark-white-color);
          & span { color: var(--dark-white-color); }
        }
      }
      & .countdown-area {
        & .countdown-timer { background: transparent; }
      }
      & .payment-method {
        background: transparent; border: 1px solid rgb(52, 52, 52);
        & .payment-list {
          & li { color: var(--dark-white-color); }
        }
      }
      & .artist-info {
        & li { color: var(--dark-white-color); }
      }
    }
    & .quantity-area {
      & .quantity-counter-and-btn-area {
        & .quantity-counter {
          & a { border: 1px solid rgb(52, 52, 52); }
          & .quantity__input { background: transparent; }
        }
      }
    }
  }
  & .product-description {
    & .artist-overview { border: 1px solid rgb(52, 52, 52); }
    & .exploring-artwork {
      border: 1px solid rgb(52, 52, 52);
      & ul {
        border-bottom: 1px solid rgb(52, 52, 52);
        &:last-child { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }
      }
    }
    & .narrative-guidelines {
      border: 1px solid rgb(52, 52, 52);
      & ul {
        border-bottom: 1px rgb(52, 52, 52);
        &:last-child { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }
      }
    }
  }
  & .behiend-us-section {
    & .behiend-us-section-card {
      border: 1px solid rgb(52, 52, 52);
      &.style-2 { border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; }
      & span { background: var(--dark-white-color); }
    }
  }
  & .auction-details-section {
    & .auction-details-content {
      & .auction-details-btn {
        & .auction-grid-btn {
          &.style-2 { background: var(--dark-white-color); }
        }
      }
    }
  }
  & .single-step {
    & span { -webkit-text-stroke: 1px var(--dark-white-color); -webkit-text-fill-color: transparent; }
  }
  & .dashboard-sidebar-menu {
    & ul {
      & li {
        & a {
          & h5 { color: var(--dark-white-color); }
          & svg { fill: var(--dark-white-color); }
          &:hover {
            background: var(--title-color);
            & h5 { color: var(--dark-title-color); }
            & svg { fill: var(--dark-title-color); }
          }
        }
        &.active {
          & a {
            background: var(--title-color);
            & h5 { color: var(--dark-title-color); }
            & svg { fill: var(--dark-title-color); }
          }
        }
      }
    }
  }
  & .dashboard-section {
    & .dashboard-wrapper {
      & .dashboard-content-wrap {
        & .portfolio-info-wrap {
          & .portfolio-content {
            & p { color: var(--dark-white-color); }
          }
        }
      }
    }
  }
  & .nice-select {
    & .list {
      & .option { color: var(--dark-title-color); }
    }
  }
  & .dashboard-order-content {
    & .dashboard-order-table {
      & table {
        & tbody {
          & tr {
            & td {
              & .icon {
                border: 1px solid rgb(52, 52, 52);
                & svg { fill: var(--dark-white-color); }
                &:hover {
                  background: var(--dark-white-color);
                  & svg { fill: var(--dark-title-color); }
                }
              }
            }
          }
        }
      }
    }
  }
  & .top-content {
    & ul { border-bottom: 1px solid rgb(52, 52, 52); }
  }
  & .auction-details-section {
    & .auction-details-content {
      & .quantity-area {
        & .quantity-counter-and-btn-area {
          & .primary-btn1 { border: 1px solid rgb(52, 52, 52); }
        }
      }
    }
  }
  & .range-wrap {
    & .slider-labels {
      & .caption { color: var(--dark-white-color); }
    }
  }
  & .map-area {
    & .single-content {
      & ul {
        &.opening-time {
          & li {
            &::after { background-color: rgb(52, 52, 52); }
          }
        }
      }
    }
  }
  & .dashboard-order-content {
    & .dashboard-order-table {
      & tbody {
        & tr {
          & td {
            & .primary-btn1 { border: 1px solid rgb(52, 52, 52); }
          }
        }
      }
    }
  }
  & .dashboard-profile-content {
    & .single-content {
      & .form-inner {
        & .primary-btn1 { border: 1px solid rgb(52, 52, 52); }
      }
    }
  }
  & .slider-btn-grp {
    & .slider-btn {
      border: 1px solid rgb(52, 52, 52);
      & svg { fill: var(--dark-white-color); }
    }
  }
  & .auction-details-img {
    & .auction-details-tab-img {
      & .slider-btn-grp {
        & .slider-btn {
          border: 1px solid var(--dark-white-color);
          & svg { fill: var(--dark-white-color); }
          &:hover {
            & svg { fill: var(--dark-title-color); }
          }
        }
      }
    }
  }
  & .video-tutorial-area {
    & .video-wrapper { border-bottom: 1px solid rgb(52, 52, 52); }
  }
  & .auction-details-section {
    & .auction-details-content {
      & .auction-details-btn {
        & .auction-grid-btn {
          &.wishlit-btn { border: 1px solid rgb(52, 52, 52); }
        }
      }
    }
  }
  & .certificate-section {
    & .certificate-wrapper { border: 1px solid rgb(52, 52, 52); }
    & .certificate-other-info {
      border-top: 1px solid rgb(52, 52, 52);
      & .info-list {
        & .list-content {
          &::before { background-color: rgb(52, 52, 52); }
        }
      }
    }
  }
  & .notify-modal {
    & .modal-dialog {
      & .modal-content {
        & .modal-header {
          & .modal-title { color: var(--dark-title-color); }
        }
        & .modal-close {
          & i { color: var(--dark-title-color); }
        }
        & .modal-body {
          & .form-inner {
            & .primary-btn1 { color: rgb(255, 255, 255); background: var(--dark-title-color); }
          }
        }
      }
    }
  }
}
.tt-style-switch {
  position: fixed; align-items: center; justify-content: center; top: 40%; left: 30px; padding: 10px 6px; background-color: rgb(67, 67, 67); font-size: 16px; cursor: pointer; z-index: 9999; border-radius: 8px; writing-mode: vertical-rl; transform: rotate(-180deg); transition: 0.2s; display: flex; gap: 12px; color: rgb(255, 255, 255) !important;
  & span {
    color: var(--dark-white-color); font-family: var(--font-worksans); font-size: 14px; font-weight: 500; line-height: 1;
    &.active { padding: 9px 4px; background-color: var(--dark-white-color); color: var(--dark-title-color); border-radius: 6px; }
  }
}
.tt-stsw-dark, .tt-stsw-light { line-height: 0; }
.tt-style-switch:not(.is-dark) .tt-stsw-dark { display: none; }
.tt-style-switch.is-dark .tt-stsw-light { display: none; }
.error-page {
  & .error-wrap {
    text-align: center;
    & img { max-width: 600px; }
    & .error-content {
      padding-top: 50px;
      & h1 { color: var(--title-color); font-family: var(--font-dmsans); font-size: 55px; font-weight: 800; line-height: 1.3; margin-bottom: 25px; }
      & p { color: var(--paragraph-color); font-family: var(--font-dmsans); font-size: 22px; font-weight: 500; line-height: 1.8; letter-spacing: 0.03em; max-width: 85%; margin: 0px auto 50px; }
      & .primary-btn1 { min-width: 150px; justify-content: center; }
    }
  }
}
.grid-wrapper {
  display: grid; gap: 15px; grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)); grid-auto-rows: 280px; grid-auto-flow: dense;
  & .category-card {
    display: flex; justify-content: center; align-items: center;
    & img { width: 100%; height: 100%; object-fit: cover; border-radius: 5px; }
    &.wide { grid-column: span 2; }
    &.tall { grid-row: span 2; }
  }
}
@keyframes spin {
  100% { transform: rotate(360deg); }
}
body.dark .mega-menu2 .elementor-widget-icon-box .elementor-icon svg { fill: rgb(255, 255, 255); }
@media only screen and (max-width: 575px) {
  header.style-1 .main-menu ul > li .mega-menu2.active { overflow: scroll; height: 350px; transition: 0.5s ease-in-out; display: block !important; }
  header.style-2 .main-menu ul > li .mega-menu2.active { transition: 0.5s ease-in-out; display: block !important; }
  header.style-1 .wp-menu ul.menu-list, header.style-2 .wp-menu ul.menu-list { padding-top: 0px; padding-bottom: 0px; }
  .mega-menu2 { max-height: 0px; opacity: 0; overflow: hidden; visibility: hidden; transition: 0.5s ease-in-out; }
  .mega-menu2.active { max-height: 500px; opacity: 1; visibility: visible; display: block; transition: 0.5s ease-in-out; }
  header.style-1 .main-menu { width: 320px; }
  .woocommerce div.product { display: flex; flex-direction: column; }
  .woocommerce div.product div.images.woocommerce-product-gallery { width: 100%; }
  .woocommerce div.product div.summary { width: 100%; }
  .woocommerce .auction-details-section .auction-ajax-change .hasCountdown { max-width: 100%; }
}

/* CELSO */

.page-id-116875 .sec-mar, .page-id-118828 .sec-mar {
  margin-top: 20px;
}

.page-id-116875 #breadcrumb {
  border: none;
}


/* Artindex Custom Biography Layout */
.biography-full {
  background: #fdfdfd;
  padding: 35px;
  border-radius: 12px;
  border: 1px solid #eee;
  box-shadow: 0 5px 15px rgba(0,0,0,0.03);
}

.biography-full .artist-image img {
  border: 4px solid #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.artist-short-bio {
  font-size: 17px;
  line-height: 1.6;
  color: #444;
  font-family: var(--font-worksans);
}

.artist-short-bio p {
  margin-bottom: 10px;
}

.exploring-artwork h4,
.narrative-guidelines h4 {
  border-bottom: 2px solid #eee;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.product-description.artmart-custom {
  border-top: 1px solid #eee;
  padding-top: 50px;
}