@layer base {
  :root {
    --bozon-bold: 'bozon-bold', sans-serif;
    --bozon-demibold: 'bozon-demibold', sans-serif;
    --questrial: 'Questrial', sans-serif;
    --light: 300;
    --regular: 400;
    --medium: 500;
    --semibold: 600;
    --bold: 700;
    --extrabold: 800;
    --black: 900;
    --anchor: #2a80b9;
    --yellow: #fbc733;
    --gold: #e4aa17;
    --brown: #827979;
  }

  html,
  body {
    margin: 0;
    padding: 0;
    font-family: var(--questrial);
    scroll-behavior: smooth;
    line-height: 1.5;
  }

  * {
    box-sizing: border-box;
  }

  a {
    color: #fff;
    transition: 0.3s;
  }

  a:hover {
    opacity: 0.8;
  }

  img {
    display: block;
    max-width: 100%;
    height: auto;
  }

  p {
    margin-block: 1em;
  }

  .fp12 {
    font-size: min((100vw * 12 / 375), 12px) !important;
  }

  .fp14 {
    font-size: min((100vw * 14 / 375), 14px) !important;
  }

  .viewport:after {
    display: none;
    content: 'XS, smaller than 576px';
    font-size: 10px;
    background-color: #eee;
    color: #999;
    padding: 5px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
  }

  .mobile-only {
    display: block;
  }

  .desktop-only {
    display: none;
  }

  .container {
    margin: 0 auto;
    max-width: 1280px;
  }

  .mobile-header {
    position: fixed;
    top: 0;
    background-color: #000;
    width: 100%;
    padding: 15px;
    z-index: 3;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .mobile-header .logo img {
    width: 150px;
  }

  .mobile-header .hamburger {
    width: 30px;
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  .mobile-header .hamburger.close .patty:nth-of-type(2) {
    opacity: 0;
    visibility: hidden;
  }

  .mobile-header .hamburger.close .patty:nth-of-type(1) {
    transform: rotate(45deg);
  }

  .mobile-header .hamburger.close .patty:nth-of-type(3) {
    transform: rotate(-45deg);
    margin-top: -15px;
  }

  .mobile-header .patty {
    background-color: #fff;
    height: 3px;
    border-radius: 3px;
    transition: 0.3s;
  }

  .mobile-menu {
    position: fixed;
    height: 100vh;
    width: 100%;
    top: calc(-100vh+54px);
    background-color: #333;
    z-index: 2;
    transition: 0.5s;
    transition-timing-function: ease-in-out;
    font-size: 25px;
    padding: 30px;
  }

  .mobile-menu .language .selector {
    width: 53px;
    background-color: #000;
    left: 40%;
  }

  .mobile-menu ul {
    margin: 0;
    padding: 0;
  }

  .mobile-menu ul li {
    text-align: center;
    list-style-type: none;
    border-bottom: 1px solid #666;
    padding: 15px;
  }

  .mobile-menu ul li:last-of-type {
    border-bottom: 0;
  }

  .mobile-menu ul li a {
    text-decoration: none;
  }

  .mobile-menu.active {
    top: 54px;
  }

  .mobile-menu .language {
    justify-content: center;
  }

  .mobile-menu a.active {
    color: var(--yellow);
  }

  header {
    position: relative;
  }

  .button {
    padding: 12px 30px;
    background-color: var(--gold);
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    color: #fff;
    display: inline-block;
    line-height: 100%;
    border: 1px solid transparent;
    text-transform: uppercase;
  }

  .button.black {
    background-color: #000;
  }

  .button:hover {
    opacity: 1;
    background-color: #000;
  }

  .button.black:hover {
    background-color: var(--yellow);
    border: 1px solid #000;
    color: #000;
  }

  .logo-nav {
    display: none;
    position: absolute;
    top: 40px;
    justify-content: space-between;
    width: 100%;
    left: 0;
    right: 0;
    align-items: center;
  }

  .logo-nav .logo img {
    width: 150px;
  }

  .stickybar {
    position: static;
    top: -57px;
    z-index: 5;
    transition: 0.3s;
    width: 100%;
  }

  .stickybar.active {
    position: fixed;
    background-color: #000;
    width: 100%;
    padding: 15px 0;
  }

  .stickybar.active .logo-nav {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
  }

  .stickybar .request {
    background: var(--gold);
    a {
      color: white;
      padding-inline: 0.5em;
    }
    .active,
    &:hover a {
      color: black;
      background: var(--yellow);
    }
  }

  .w1280 {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
  }

  .w1180 {
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
  }

  .w1080 {
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
  }

  .hide {
    display: none;
  }
  .hide-576 {
    @media (width < 576px) {
      display: none;
    }
  }
  .hide-768 {
    @media (width < 768px) {
      display: none;
    }
  }
  .hide-992 {
    @media (width < 992px) {
      display: none;
    }
  }
  .hide-1200 {
    @media (width < 1200px) {
      display: none;
    }
  }

  .view-576 {
    display: none;
    @media (width < 576px) {
      display: block;
    }
  }
  .view-768 {
    display: none;
    @media (width < 768px) {
      display: block;
    }
  }
  .view-992 {
    display: none;
    @media (width < 992px) {
      display: block;
    }
  }
  .view-1200 {
    display: none;
    @media (width < 1200px) {
      display: block;
    }
  }

  header nav ul {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    align-items: center;
    font-size: 0;
    margin: 0;
    padding: 0;
    gap: 0 10px;
    @media (768px < width) {
      gap: 0 10px;
    }
    @media (992px < width) {
      gap: 0 20px;
    }
    @media (1200px < width) {
      gap: 0 25px;
    }
  }

  header nav ul li {
    list-style-type: none;
    font-size: 0;
    margin: 0;
    padding: 0;
  }

  header nav ul li span {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font-size: 13px;
    line-height: 1;
    padding-block: 8px 6px;
    @media (992px < width) {
      font-size: 15px;
    }
  }

  header nav ul li a {
    transition: 0.3s;
    text-decoration: none;
    font-size: 13px;
    line-height: 1;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    margin: unset;
    padding-block: 8px 6px;
    @media (992px < width) {
      font-size: 15px;
    }
  }

  header nav ul li a:hover {
    opacity: 1;
  }

  header nav ul li a::after {
    content: '';
    display: block;
    height: 2px;
    width: 0;
    position: absolute;
    bottom: 0;
    left: 50%;
    background: var(--yellow);
    transition:
      width 0.3s ease,
      left 0.3s ease;
    transform: translateX(-50%);
  }

  header nav ul li a:hover::after,
  header nav ul li a.active::after {
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
  }

  .language {
    position: relative;
    display: flex;
    gap: 0 6px;
    color: #fff;
    padding-left: 15px;
  }

  .hero {
    background-color: #000;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
    display: grid;
    place-items: center;
  }

  .hero .particles-js-canvas-el {
    position: absolute;
    top: 0;
    left: 0;
  }

  .hero.sub {
    max-height: 500px;
    background-position: center;
    display: revert;
    place-items: revert;
  }

  .hero .caption {
    position: static;
    margin: 0 auto;
    display: inline-block;
    max-width: 880px;
    text-align: center;
  }

  .hero .caption .block {
    display: inline-block;
    background-color: var(--yellow);
    font-family: var(--bozon-bold);
    font-size: min((100vw * 22 / 375), 22px);
    font-weight: bold;
    padding: 10px;
  }

  .hero .caption .title {
    display: inline-block;
    color: #fff;
    font-weight: bold;
    font-size: min((100vw * 36 / 375), 60px);
    margin-top: 20px;
    text-transform: uppercase;
    font-family: var(--bozon-bold);
    line-height: 110%;
    letter-spacing: 0;
    text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2);
    .lang-en {
      font-size: min((100vw * 38 / 375), 70px);
      font-family: var(--bozon-bold);
      letter-spacing: -3px;
    }
  }

  .hero .caption .title .copy {
    font-size: min((100vw * 22 / 375), 30px);
    line-height: 120%;
    letter-spacing: 0;
    margin-top: 20px;
  }

  .hero .caption .title.smaller {
    font-size: 46px;
  }

  .hero.sub .caption {
    position: absolute;
    bottom: 35%;
    left: 0;
    right: 0;
    bottom: 20%;
    margin: 0 auto;
    text-align: left;
    max-width: 1180px;
    padding-left: 20px;
  }

  .hero.sub .caption .tag {
    color: var(--yellow);
    font-family: var(--bozon-bold);
    font-weight: bold;
    font-size: min((100vw * 22 / 375), 22px);
    letter-spacing: 0;
  }

  .hero.sub .caption .title {
    text-transform: capitalize;
  }

  .hero.sub .caption .title .copy {
    font-size: min((100vw * 22 / 375), 22px);
    line-height: 120%;
    letter-spacing: 0;
    margin-top: 20px;
  }

  .hero.less {
    max-height: 60px;
    background-position: center;
    display: revert;
    place-items: revert;
    @media (min-width: 768px) {
      max-height: 100px;
    }
  }

  .hero .down-arrow {
    position: absolute;
    width: 40px;
    margin: 0 auto;
    bottom: 30px;
    left: 0;
    right: 0;
    text-align: center;
    animation: bounce 1s infinite;
    filter: invert(88%) sepia(19%) saturate(4491%) hue-rotate(342deg) brightness(90%) contrast(100%);
  }

  .hero .down-arrow:hover {
    filter: invert(98%) sepia(100%) saturate(9%) hue-rotate(203deg) brightness(103%) contrast(103%);
    opacity: 1;
  }

  @keyframes bounce {
    0,
    100% {
      transform: translateY(0);
    }

    50% {
      transform: translateY(-10px);
    }
  }

  .hero .down-arrow img {
    display: inline-block;
  }

  .home-solutions {
    position: relative;
    margin-top: 0;
    display: flex;
    flex-direction: column;
  }

  .home-solutions .yellow-bg {
    background-color: var(--yellow);
    margin-left: auto;
    padding: 20px 20px 35px 20px;
    border-radius: 0 0 30px 30px;
  }

  .home-solutions .thumb {
    padding: 20px 20px 0 20px;
    background-color: var(--yellow);
    z-index: 1;
  }

  .home-solutions .thumb img {
    border-radius: 10px;
    width: 100%;
  }

  .home-solutions .solutions {
    display: flex;
    flex-wrap: wrap;
    gap: 35px 0;
    margin-top: 40px;
  }

  .home-solutions .solutions .item {
    width: 100%;
    display: flex;
    gap: 0 4%;
  }

  .home-solutions .solutions .item .icon {
    width: 16%;
  }

  .home-solutions .solutions .item .writeup {
    width: 80%;
    color: #fff;
    margin-top: 5px;
  }

  .home-solutions .solutions .item .writeup .title {
    font-size: 18px;
    color: #000;
    font-weight: bold;
    margin-bottom: 10px;
  }

  .home-solutions .solutions .item .writeup .description {
    line-height: 140%;
    font-size: 18px;
  }

  .home-solutions .solutions .button {
    margin-top: 20px;
  }

  .home-solutions .head {
    color: #fff;
  }

  .home-solutions .head .tag {
    font-size: 20px;
    font-weight: bold;
  }

  .home-solutions .head .title {
    font-size: min((100vw * 40 / 375), 50px);
    margin-top: 10px;
    font-family: var(--bozon-demibold);
    line-height: 110%;
    letter-spacing: -3px;
    .lang-en {
      font-size: min((100vw * 50 / 375), 50px);
    }
  }

  .home-solutions .head .subtitle {
    margin-top: 20px;
    font-size: 18px;
    line-height: 130%;
  }

  section {
    margin-top: 50px;
  }

  .home-companies {
    text-align: center;
    padding: 0 15px;
  }

  .home-companies .head .tag {
    font-size: 18px;
    font-weight: bold;
  }

  .home-companies .head .title {
    color: #e4aa17;
    font-size: 50px;
    margin-top: 5px;
    letter-spacing: -3px;
    font-family: var(--bozon-bold);
    line-height: 110%;
  }

  .home-companies .head .subtitle {
    font-size: 18px;
    margin-top: 10px;
  }

  .home-companies .logos {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 50px;
    gap: 35px 0;
    flex-wrap: wrap;
  }

  .home-companies .logos .item {
    width: 100%;
    text-align: center;
  }

  .home-companies .logos .item img {
    display: inline-block;
  }

  .home-companies .button-wrap {
    margin-top: 40px;
  }

  .home-about {
    position: relative;
  }

  .home-about .wrapper {
    position: relative;
  }

  .home-about .brownbg {
    background-color: var(--brown);
    border-radius: 0 0 30px 30px;
    padding: 20px 20px 35px 20px;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
  }

  .home-about .brownbg .head {
    margin-top: 20px;
  }

  .home-about .brownbg .head .tag {
    color: var(--gold);
    font-size: 20px;
    font-weight: bold;
  }

  .home-about .brownbg .head .title {
    font-size: 50px;
    margin-top: 10px;
    font-family: var(--bozon-demibold);
    line-height: 110%;
    letter-spacing: -3px;
    color: #fff;
  }

  .home-about .brownbg .writeup {
    color: #fff;
    margin-top: 20px;
    line-height: 130%;
    font-size: 18px;
  }

  .home-about .thumb {
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 100%;
    padding: 0 20px;
  }

  .home-about .thumb.mobile-only {
    position: relative;
    padding: 0;
    top: 0;
  }

  .home-about .thumb img {
    border-radius: 10px;
    width: 100%;
  }

  .home-about .brownbg .button {
    margin-top: 30px;
    align-self: flex-start;
  }

  .home-notices {
    padding: 0 15px;
  }

  .home-notices .head {
    text-align: center;
  }

  .home-notices .head .tag {
    color: var(--gold);
    font-weight: bold;
    font-size: 20px;
  }

  .home-notices .head .title {
    font-size: 50px;
    margin-top: 10px;
    font-family: var(--bozon-demibold);
    line-height: 110%;
    letter-spacing: -3px;
  }

  .home-notices .listing {
    display: flex;
    flex-direction: column;
    gap: 25px 0;
    font-size: 18px;
    max-width: 880px;
    margin: 30px auto 0 auto;
  }

  .home-notices .listing .item {
    display: flex;
    gap: 7px 0;
    flex-direction: column;
  }

  .home-notices .listing .item .date {
    width: 100%;
    font-weight: bold;
    white-space: nowrap;
  }

  .home-notices .listing .item .title {
    width: 100%;
  }

  .home-notices .button-wrap {
    text-align: center;
    margin-top: 40px;
  }

  .home-connect {
    background-color: var(--yellow);
    margin-top: 40px;
  }

  .home-connect .content {
    padding: 0 0 35px 0;
    position: relative;
    display: block;
  }

  .home-connect .content .thumb {
    padding: 20px;
  }

  .home-connect .content .thumb img {
    border-radius: 10px;
    width: 100%;
  }

  .home-connect .content .writeup {
    padding: 20px 20px 0 20px;
  }

  .home-connect .content .writeup .tag {
    font-size: 20px;
    font-weight: bold;
  }

  .home-connect .content .writeup .title {
    font-size: 42px;
    margin-top: 10px;
    font-family: var(--bozon-demibold);
    line-height: 110%;
    letter-spacing: -3px;
  }

  .home-connect .content .writeup .subtitle {
    font-size: 18px;
    margin-top: 20px;
  }

  .home-connect .content .writeup .button {
    margin-top: 30px;
  }

  footer {
    padding: 0 0 40px 0;
  }

  footer .logo {
    text-align: center;
    padding: 80px 0;
  }

  footer .logo img {
    display: inline-block;
    height: 52px;
  }

  footer a {
    color: #000;
    text-decoration: none;
  }

  footer .copyright {
    display: flex;
    justify-content: center;
    gap: 10px 0;
    flex-direction: column;
    text-align: center;
  }

  a.anchor {
    display: block;
    position: relative;
    top: -57px;
    visibility: hidden;
  }

  .breadcrumbs {
    margin-top: 25px;
    margin-bottom: 35px;
    font-size: 15px;
    padding-left: 15px;
    padding-right: 15px;
    line-height: 200%;
  }

  .breadcrumbs br {
    display: none;
  }

  .breadcrumbs a {
    display: inline-block;
    color: #000;
    margin-right: 8px;
    text-decoration: underline;
    text-underline-offset: 5px;
  }

  .breadcrumbs ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    overflow-x: auto;
    word-break: keep-all;
    white-space: nowrap;
  }

  .breadcrumbs ul li:last-of-type a {
    pointer-events: none;
    color: var(--brown);
    text-decoration: none;
    margin-right: 0;
  }

  .breadcrumbs ul li:last-of-type a::after {
    border-right: 0;
  }

  .breadcrumbs a::after {
    display: inline-block;
    vertical-align: middle;
    content: '';
    border-right: 1px solid #000;
    padding-left: 10px;
    width: 1px;
    height: 20px;
  }

  .card-with-thumb {
    display: flex;
    position: relative;
  }

  .card-with-thumb .icon {
    width: 80px;
    position: absolute;
    top: 30px;
    right: 30px;
    z-index: 1;
  }

  .card-with-thumb .icon.mobile-only {
    position: relative;
    top: unset;
    right: unset;
    width: 140px;
  }

  .card-with-thumb .thumb img {
    border-radius: 10px;
    width: 100%;
  }

  .card-with-thumb .content {
    background-color: var(--yellow);
    border-radius: 0 0 30px 30px;
    padding: 20px 20px 35px 20px;
  }

  .card-with-thumb .content .tag {
    font-size: min((100vw * 20 / 375), 20px);
    font-weight: bold;
  }

  .card-with-thumb .content .title {
    font-size: min((100vw * 30 / 375), 40px);
    margin-top: 10px;
    font-family: var(--bozon-demibold);
    letter-spacing: 0;
    line-height: 110%;
  }

  .card-with-thumb .content .writeup {
    font-size: min((100vw * 18 / 375), 18px);
    margin-top: 20px;
    line-height: 130%;
    br {
      display: none;
    }
  }

  .card-with-thumb .thumb {
    width: 100%;
    margin-bottom: 15px;
  }

  .card-with-thumb .button {
    margin-top: 20px;
  }

  .card-no-thumb {
    text-align: right;
    position: relative;
    margin-top: 20px;
  }

  .card-no-thumb .content {
    background-color: var(--brown);
    display: inline-block;
    color: #fff;
    padding: 20px 20px 35px 20px;
    border-radius: 0 0 30px 30px;
    position: relative;
    text-align: left;
  }

  .card-no-thumb .content .tag {
    font-size: min((100vw * 20 / 375), 20px);
    font-weight: bold;
  }

  .card-no-thumb .content .title {
    font-size: min((100vw * 30 / 375), 40px);
    margin-top: 10px;
    font-family: var(--bozon-demibold);
    letter-spacing: 0;
    line-height: 110%;
    width: 70%;
  }

  .card-no-thumb .content .writeup {
    font-size: min((100vw * 18 / 375), 18px);
    margin-top: 20px;
    line-height: 130%;
    br {
      display: none;
    }
  }

  .card-no-thumb .content .button {
    margin-top: 20px;
  }

  .card-no-thumb .icon {
    width: 80px;
    position: absolute;
    top: 45px;
    right: 25px;
  }

  .card-no-thumb.reverse {
    text-align: left;
    z-index: 2;
  }

  .card-no-thumb.reverse .content {
    background-color: var(--yellow);
    top: 0;
    text-align: left;
    color: #000;
  }

  .card-no-thumb.reverse .title {
    font-size: min((100vw * 30 / 375), 40px);
  }

  .card-with-thumb.reverse .content {
    background-color: var(--brown);
    color: #fff;
    margin-left: 0;
  }

  .card-with-thumb.reverse .thumb img {
    border-radius: 10px;
  }

  .card-with-thumb.reverse {
    margin-top: 20px;
  }

  .loans-pg .card-bgwrap {
    margin-top: 0;
  }

  .loans-pg .card {
    position: relative;
    display: flex;
    flex-wrap: wrap;
  }

  .loans-pg .card .content {
    background-color: var(--brown);
    padding: 20px 20px 35px 20px;
    color: #fff;
    border-radius: 0 0 30px 30px;
    order: 2;
  }

  .loans-pg .card .content .tag {
    color: var(--yellow);
    font-weight: bold;
    font-size: 20px;
  }

  .loans-pg .card .content .title {
    font-weight: bold;
    font-size: min((100vw * 28 / 375), 45px);
    margin-top: 10px;
    font-family: var(--bozon-bold);
    letter-spacing: 0;
    line-height: 110%;
    .lang-en {
      font-size: min((100vw * 32 / 375), 50px);
      letter-spacing: -3px;
    }
  }

  .loans-pg .card .content .writeup {
    font-size: 18px;
    line-height: 130%;
    margin-top: 20px;
  }

  .loans-pg .card .thumb {
    order: 1;
    padding: 20px 20px 0 20px;
    background-color: var(--brown);
  }

  .loans-pg .card .thumb img {
    border-radius: 10px;
  }

  .loans-pg .three-circles {
    background-color: var(--yellow);
  }

  .loans-pg .three-circles {
    text-align: center;
    padding: 65px 0 65px 0;
  }

  .loans-pg .three-circles .content .tag {
    font-size: 20px;
    font-weight: bold;
  }

  .loans-pg .three-circles .content .title {
    font-weight: bold;
    font-size: min((100vw * 40 / 375), 50px);
    color: #fff;
    font-family: var(--bozon-bold);
    letter-spacing: -3px;
    line-height: 110%;
  }

  .loans-pg .three-circles .three-col {
    display: flex;
    margin-top: 45px;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 30px 0;
  }

  .loans-pg .three-circles .three-col .item {
    text-align: center;
  }

  .loans-pg .three-circles .three-col .item img {
    display: inline-block;
  }

  .loans-pg .three-circles .three-col .item .thumb {
    position: relative;
  }

  .loans-pg .three-circles .three-col .item .caption {
    width: 200px;
    height: 200px;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    font-size: 20px;
    font-weight: bold;
    line-height: 130%;
  }

  .loans-pg .three-circles .three-col .item .text {
    margin-top: 15px;
    line-height: 130%;
    padding: 0 15px;
    font-size: 18px;
  }

  .loans-pg .button {
    margin-top: 35px;
  }

  .zoom-in {
    animation: zoom-in linear;
    animation-timeline: view();
    animation-range-start: 0;
    animation-range-end: 500px;
  }

  @keyframes zoom-in {
    from {
      scale: 0.8;
      opacity: 0.5;
    }

    to {
      scale: 1;
      opacity: 1;
    }
  }

  .companies {
    display: flex;
    flex-direction: column;
    gap: 20px 0;
  }

  .company-card {
    position: relative;
    display: flex;
    flex-direction: column;
  }

  .company-card .card {
    background-color: var(--yellow);
    position: relative;
    order: 2;
    padding: 20px 20px 35px 20px;
    border-radius: 0 0 30px 30px;
  }

  .company-card .card .tag {
    font-weight: bold;
    font-size: 20px;
  }

  .company-card .card .logo {
    margin-top: 20px;
  }

  .company-card .card .text {
    margin-top: 25px;
    line-height: 130%;
    font-size: 18px;
  }

  .company-card .thumb {
    order: 1;
    padding: 20px 20px 0 20px;
    background-color: var(--yellow);
  }

  .company-card .thumb img {
    border-radius: 10px;
    max-height: 100%;
    display: inline-block;
    width: 100%;
  }

  .company-card .card .button {
    margin-top: 25px;
  }

  .documents {
    display: flex;
    flex-wrap: wrap;
    gap: 60px 2%;
    margin-top: 70px;
    padding: 0 20px;
  }

  .documents .card {
    background-color: #c3bab5;
    padding: 50px 30px 40px 30px;
    border-radius: 10px;
    position: relative;
    display: inline-block;
    width: 100%;
  }

  .documents .card .title {
    background-color: var(--yellow);
    display: inline-block;
    padding: 10px 20px;
    font-weight: bold;
    position: absolute;
    top: -20px;
    margin: 0 auto;
    font-size: 21px;
    width: auto;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
  }

  .documents .card .listing {
    display: flex;
    flex-direction: column;
    gap: 20px 0;
  }

  .documents .card .listing .item {
    display: block;
    font-size: 19px;
    text-decoration: none;
    color: #000;
    font-weight: bold;
  }

  .documents .card .listing .note {
    margin-top: -8px;
    font-size: 15px;
    margin-bottom: 3px;
  }

  .notices {
    border-bottom: 1px solid #c3bab5;
    padding-bottom: 60px;
    margin-bottom: 60px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .notices:last-of-type {
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 0;
    margin-top: 0;
  }

  .notices .listing {
    display: flex;
    flex-direction: column;
    gap: 25px 0;
    font-size: 18px;
    margin: 30px 0 0 0;
    max-width: 100%;
  }

  .notices .listing .item {
    display: flex;
    gap: 7px 0;
    flex-direction: column;
  }

  .notices .listing .item .date {
    width: 100%;
    font-weight: bold;
    white-space: nowrap;
  }

  .notices .listing .item .title {
    width: 100%;
  }

  .notices .head {
    font-size: 28px;
    font-weight: bold;
    text-transform: uppercase;
  }

  .notices .button {
    margin-top: 30px;
  }

  .about-pg .head {
    text-align: center;
    padding: 0 20px;
  }

  .about-pg .head .title {
    color: var(--gold);
    font-size: 46px;
    font-family: var(--bozon-demibold);
    line-height: 110%;
    letter-spacing: -3px;
  }

  .about-pg .head .subtitle {
    font-size: 18px;
    margin-top: 10px;
  }

  .chairmans-msg {
    display: flex;
    margin-top: 55px;
    justify-content: center;
    flex-direction: column;
    padding: 0 20px;
  }

  .chairmans-msg .writeup {
    margin-top: 20px;
  }

  .chairmans-msg .writeup .title {
    font-size: 28px;
    text-transform: uppercase;
    font-weight: bold;
  }

  .chairmans-msg .writeup .text {
    font-size: 18px;
    line-height: 130%;
    margin-top: 20px;
  }

  .chairmans-msg .writeup .signoff {
    font-size: 20px;
    font-weight: bold;
    margin-top: 20px;
  }

  .about-pg .stats {
    background-color: var(--yellow);
  }

  .about-pg .stats .wrapper {
    display: flex;
    justify-content: center;
    gap: 25px 0;
    position: relative;
    flex-direction: column;
    padding: 20px;
  }

  .about-pg .stats .item {
    text-align: center;
  }

  .about-pg .stats .item .value {
    font-size: min((100vw * 70 / 375), 70px);
    font-weight: bold;
  }

  .about-pg .stats .item .property {
    color: #fff;
    font-size: 40px;
  }

  .about-pg .stats .count {
    animation: count 5s steps(25);
  }

  @keyframes count {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  .about-pg .team {
    padding: 0 20px;
  }

  .about-pg .team .head .tag {
    font-size: 20px;
    font-weight: bold;
    color: var(--gold);
  }

  .about-pg .team .head .title {
    color: #000;
    font-family: var(--bozon-demibold);
    letter-spacing: -3px;
    line-height: 110%;
    margin-top: 5px;
  }

  .about-pg .team .people {
    margin-top: 50px;
    display: flex;
    flex-wrap: wrap;
    max-width: 1080px;
    margin: 50px auto 0 auto;
    gap: 20px 4%;
  }

  .about-pg .team .people .item {
    width: 48%;
  }

  .about-pg .team .people .item .thumb img {
    border-radius: 10px;
  }

  .about-pg .team .people .item .text {
    text-align: center;
    margin-top: 17px;
  }

  .about-pg .team .people .item .text .name {
    font-weight: bold;
    font-size: 20px;
  }

  .about-pg .team .people .item .text .title {
    font-size: 18px;
    margin-top: 5px;
  }

  .factsheet .wrapper {
    background-color: var(--yellow);
    border-radius: 0 0 30px 30px;
    padding: 20px 20px 135px 20px;
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
  }

  .factsheet.--right .thumb {
    position: relative;
    top: -100px;
  }

  .factsheet .head {
    text-align: left;
    padding: 0;
  }

  .factsheet .head .tag {
    font-weight: bold;
    font-size: 20px;
  }

  .factsheet .head .title {
    font-family: var(--bozon-demibold);
    color: #fff;
    letter-spacing: -3px;
    line-height: 110%;
    margin-top: 5px;
  }

  .factsheet .listing {
    display: flex;
    flex-direction: column;
    gap: 15px 0;
    margin-top: 30px;
  }

  .factsheet .listing .item {
    display: flex;
    flex-direction: column;
  }

  .factsheet .listing .item .property {
    margin: 0 0 5px 0;
  }

  .factsheet .listing .item .value {
    font-weight: bold;
  }

  .history {
    position: relative;
  }

  .history .head .tag {
    color: var(--gold);
    font-weight: bold;
    font-size: 20px;
  }

  .history .head .title {
    color: #000;
    font-family: var(--bozon-demibold);
    letter-spacing: -3px;
    line-height: 110%;
    font-size: 46px;
    margin-top: 10px;
  }

  .history .timeline {
    display: flex;
    gap: 0 40px;
    cursor: grab;
  }

  .history .timeline .item {
    text-align: center;
    width: 175px;
    flex: 0 0 auto;
    position: relative;
  }

  .history .timeline .item:after {
    content: '';
    width: 170px;
    background-color: #000;
    position: absolute;
    display: block;
    height: 4px;
    top: 38px;
    left: 109px;
    border-radius: 15px;
  }

  .history .timeline .item:last-of-type:after {
    display: none;
  }

  .history .timeline .item .year {
    width: 100%;
    font-weight: bold;
  }

  .history .timeline .item .circle {
    margin: 10px 0;
  }

  .history .timeline .item .circle img {
    display: inline-block;
  }

  .history .timeline-window {
    margin-left: auto;
    margin-top: 40px;
    overflow-x: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
    user-select: none;
    margin-left: 0;
  }

  .history .timeline-window::-webkit-scrollbar {
    display: none;
  }

  .history .timeline-window.active {
    cursor: grabbing;
  }

  .history .timeline .item .text {
    width: 100%;
  }

  .history .scroll-marker {
    position: absolute;
    right: 0;
    width: 155px;
    margin-top: 20px;
  }

  .history .scroll-marker .title {
    font-size: 15px;
    color: var(--gold);
    font-weight: bold;
  }

  .history .scroll-marker .progress-bar {
    background-color: #d0d4d2;
    height: 4px;
    margin-top: 10px;
    border-radius: 5px;
  }

  .history .scroll-marker .progress-bar .bg {
    width: 10%;
    background-color: #000;
    height: 4px;
    border-radius: 5px;
  }

  .framework {
    margin-top: 100px;
  }

  .framework .wrapper {
    text-align: right;
    position: relative;
    max-width: 1080px;
  }

  .framework .wrapper .thumb {
    padding: 20px;
    background-color: var(--brown);
    z-index: 1;
  }

  .framework .wrapper .thumb img {
    border-radius: 10px;
  }

  .framework .wrapper .card {
    background-color: var(--brown);
    padding: 0 20px 35px 20px;
    max-width: 950px;
    display: inline-block;
    text-align: left;
    border-radius: 0 0 30px 30px;
  }

  .framework .wrapper .card .tag {
    color: var(--gold);
    font-weight: bold;
    font-size: 20px;
  }

  .framework .wrapper .card .title {
    font-family: var(--bozon-demibold);
    font-size: 50px;
    color: #fff;
    letter-spacing: -3px;
    margin-top: 10px;
    line-height: 110%;
  }

  .framework .wrapper .card .writeup {
    color: #fff;
    line-height: 130%;
    font-size: 18px;
    margin-top: 20px;
  }

  .framework .wrapper .card .button.black {
    margin-top: 25px;
  }

  .location .head .tag {
    color: var(--gold);
    text-transform: uppercase;
    font-weight: bold;
    font-size: 20px;
  }

  .location .head .title {
    color: #000;
    font-family: var(--bozon-demibold);
    letter-spacing: -3px;
    line-height: 110%;
    font-size: 50px;
  }

  .location .head .address {
    margin-top: 10px;
  }

  .location .map {
    width: 100%;
    margin-top: 30px;
  }

  .gold-price {
    text-align: center;
  }

  .gold-price .flex {
    justify-content: center;
  }

  .gold-price .yellow-bg {
    background-color: var(--yellow);
    display: inline-block;
    padding: 15px;
    font-size: min((100vw * 16 / 375), 20px);
    position: relative;
    margin-top: unset;
  }

  .gold-price .yellow-bg span {
    display: inline-block;
  }

  .chart-one {
    text-align: center;
    margin-top: unset;
    padding: 0 20px;
  }

  .chart-one .title {
    dt {
      font-size: min((100vw * 20 / 375), 30px);
      font-weight: bold;
    }
    dd {
      font-size: min((100vw * 16 / 375), 18px);
    }
  }

  .chart-one .note {
    font-size: 21px;
    text-align: center;
    margin-top: 25px;
  }

  .chart-one .note.align-left {
    text-align: left;
    font-size: 20px;
  }

  .chart-one .table {
    padding-block: 20px;
    dl {
      display: grid;
      border-radius: 10px;
      overflow: clip;
      column-gap: 20px;
      dt {
        background-color: var(--brown);
        color: #fff;
        font-size: min((100vw * 18 / 375), 26px);
        line-height: 2.5em;
        font-weight: bold;
        &:nth-of-type(1) {
          grid-row: 1 / 2;
          grid-column: 1 / 2;
        }
        &:nth-of-type(2) {
          grid-row: 2 / 3;
          grid-column: 1 / 2;
        }
        &:nth-of-type(3) {
          grid-row: 3 / 4;
          grid-column: 1 / 2;
        }
        &:not(:last-of-type) {
          border-bottom: 1px solid var(--brown);
        }
      }
      dd {
        text-align: right;
        font-size: min((100vw * 18 / 375), 30px);
        line-height: 2.5em;
        font-weight: bold;
        padding-inline-end: 1em;
        &:nth-of-type(1) {
          grid-row: 1 / 2;
          grid-column: 2 / 3;
        }
        &:nth-of-type(2) {
          grid-row: 2 / 3;
          grid-column: 2 / 3;
        }
        &:nth-of-type(3) {
          color: var(--gold);
          grid-row: 3 / 4;
          grid-column: 2 / 3;
        }
        &:not(:last-of-type) {
          border-bottom: 1px solid #c3bab5;
        }
      }
    }
  }

  .chart-one .bullion {
    padding-top: 20px;
  }

  .chart-one .bullion a {
    display: inline-block;
  }

  .card-contact {
    text-align: right;
    position: relative;
  }

  .card-contact .thumb {
    padding: 20px;
    background-color: var(--yellow);
    z-index: 1;
  }

  .card-contact .thumb.brown {
    background-color: var(--brown);
  }

  .card-contact .thumb img {
    border-radius: 10px;
    width: 100%;
  }

  .card-contact .card {
    background-color: var(--yellow);
    display: inline-block;
    text-align: left;
    padding: 0 20px 35px 20px;
    border-radius: 0 0 30px 30px;
  }

  .card-contact .card.brown {
    background-color: var(--brown);
    color: #fff;
  }

  .card-contact .card.brown .content .contact-no {
    margin-top: 30px;
  }

  .card-contact .card .content .text {
    font-size: 20px;
  }

  .card-contact .card .content .contact-no {
    display: flex;
    align-items: center;
    gap: 0 15px;
    margin-top: 20px;
  }

  .card-contact .card .content .contact-no .number {
    font-size: min((100vw * 36 / 375), 50px);
    font-weight: bold;
  }

  .card-contact .card .content .timings {
    margin-top: 20px;
    font-size: 18px;
  }

  .card-contact .card .content .button {
    margin-top: 20px;
  }

  .faq {
    padding: 20px;
  }

  .faq .title {
    font-size: min((100vw * 30 / 375), 30px);
    font-weight: bold;
  }

  .faq .subtitle {
    font-size: 20px;
    margin-top: 25px;
    font-weight: bold;
  }

  .faq .listing {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 30px 0;
  }

  .faq .listing .item {
    display: flex;
    flex-direction: column;
    gap: 10px 0;
  }

  .faq .listing .item .qn {
    display: flex;
  }

  .faq .listing .item .qn .no {
    width: 20%;
    font-weight: bold;
    padding-top: 5px;
  }

  .faq .listing .item .qn .text {
    width: 80%;
  }

  .faq .listing .item .ans {
    display: flex;
  }

  .faq .listing .item .ans .no {
    width: 20%;
    font-weight: bold;
    padding-top: 5px;
  }

  .faq .listing .item .ans .text {
    width: 80%;
  }

  .chart-two {
    padding-bottom: 40px;
    border-bottom: 2px solid #c3bab5;
    padding-left: 20px;
    padding-right: 20px;
  }

  .chart-two .head {
    background-color: var(--brown);
    padding: 15px 0;
    color: #fff;
    font-size: 26px;
    border-radius: 10px 10px 0 0;
    text-align: center;
  }

  .chart-two .chart-img {
    margin-top: 40px;
  }

  .chart-two .note {
    color: var(--brown);
    margin-top: 40px;
    font-size: 20px;
  }

  .chart-two .listing {
    margin-top: 50px;
  }

  .chart-two .listing .group {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 15px 0;
    margin-bottom: 20px;
  }

  .chart-two .listing .group .item {
    color: #000;
    background-image: url('../images/icon-goldrightarrow.svg');
    background-repeat: no-repeat;
    padding-left: 19px;
    background-size: 11px;
    font-weight: bold;
    width: 45%;
    white-space: nowrap;
    font-size: min((100vw * 16 / 375), 22px);
    line-height: 100%;
    text-decoration: none;
  }

  .chart-two .listing .group .item:hover {
    color: var(--gold);
  }

  .chart-two .listing .group.first {
    margin-bottom: 40px;
  }

  .three-circles {
    background-color: var(--yellow);
  }

  .three-circles .wrapper {
    display: flex;
    flex-direction: column;
    gap: 15px 0;
    padding: 20px;
    text-align: center;
  }

  .three-circles .item {
    text-align: center;
    display: inline-block;
    position: relative;
  }

  .three-circles .item img {
    display: inline-block;
    width: 200px;
    height: 200px;
  }

  .three-circles .item .caption {
    width: 200px;
    height: 200px;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    font-size: 20px;
    font-weight: bold;
    line-height: 130%;
  }

  .trading-card-with-thumb .wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
  }

  .trading-card-with-thumb .card {
    background-color: #c3bab5;
    padding: 0 20px 35px 20px;
    border-radius: 0 0 30px 30px;
    order: 2;
  }

  .trading-card-with-thumb .card .tag {
    font-family: var(--bozon-demibold);
    font-size: 34px;
    color: #fff;
    background-color: var(--yellow);
    display: inline-block;
    padding: 5px 10px;
  }

  .trading-card-with-thumb .card .title {
    color: #333;
    font-size: min((100vw * 30 / 375), 50px);
    font-weight: bold;
    margin-top: 20px;
    line-height: 130%;
  }

  .trading-card-with-thumb .card .writeup {
    font-size: 18px;
    margin-top: 20px;
  }

  .trading-card-with-thumb .thumb {
    order: 1;
    padding: 20px 20px 20px 20px;
    background-color: #c3bab5;
  }

  .trading-card-with-thumb .thumb img {
    border-radius: 10px;
    width: 100%;
  }

  .trading-card-with-thumb.reverse .card {
    background-color: var(--brown);
    border-radius: 0 0 30px 30px;
    display: inline-block;
    text-align: left;
    padding: 0 20px 35px 20px;
    color: #fff;
  }

  .trading-card-with-thumb.reverse .wrapper {
    text-align: right;
  }

  .trading-card-with-thumb.reverse .thumb {
    background-color: var(--brown);
    left: 0;
  }

  .trading-card-with-thumb.reverse .card .title {
    color: #fff;
  }

  .banner {
    padding: 0 20px 0 20px;
  }

  .overview {
    margin-top: 0;
    padding: 0 20px;
  }

  .overview .head .tag {
    color: var(--gold);
    font-size: 20px;
    font-weight: bold;
  }

  .overview .head .title {
    font-size: min((100vw * 30 / 375), 50px);
    font-weight: bold;
    line-height: 110%;
    margin-top: 15px;
  }

  .overview .head .date {
    font-size: 22px;
    margin-top: 10px;
  }

  .overview .charts {
    display: flex;
    flex-direction: column;
    margin-top: 25px;
    gap: 20px 0;
  }

  .news {
    padding: 0 20px;
  }

  .news .head .tag {
    color: var(--gold);
    font-size: 20px;
    font-weight: bold;
  }

  .news .head .title {
    font-size: min((100vw * 30 / 375), 50px);
    font-weight: bold;
    line-height: 110%;
    margin-top: 15px;
  }

  .news .listing {
    margin-top: 25px;
    display: flex;
    flex-direction: column;
    gap: 30px 0;
  }

  .news .listing .item {
    display: flex;
    gap: 0 5%;
  }

  .news .listing .item .thumb {
    width: 30%;
  }

  .news .listing .item .thumb img {
    border-radius: 10px;
  }

  .news .listing .item .details {
    width: 65%;
  }

  .news .listing .item .details .date {
    font-size: 18px;
  }

  .news .listing .item .details .title {
    font-size: 22px;
    margin-top: 10px;
    font-weight: bold;
  }

  .news .listing .item .details .writeup {
    font-size: 18px;
    margin-top: 10px;
  }

  .goldspot-price {
    padding: 0 20px;
  }

  .goldspot-price .head .tag {
    color: var(--gold);
    font-size: 20px;
    font-weight: bold;
  }

  .goldspot-price .head .title {
    font-size: min((100vw * 30 / 375), 50px);
    font-weight: bold;
    line-height: 110%;
    margin-top: 15px;
  }

  .goldspot-price .head .date {
    font-size: 22px;
    margin-top: 20px;
  }

  .goldspot-price .charts {
    margin-top: 25px;
    display: flex;
    flex-direction: column;
    gap: 40px 0;
  }

  .gold-etf {
    padding: 0 20px;
  }

  .gold-etf .head {
    margin-bottom: 25px;
  }

  .gold-etf .head .tag {
    color: var(--gold);
    font-size: 20px;
    font-weight: bold;
  }

  .gold-etf .head .title {
    font-size: min((100vw * 30 / 375), 50px);
    font-weight: bold;
    line-height: 110%;
    margin-top: 15px;
  }

  .gold-etf .header-bar {
    background-color: var(--brown);
    padding: 15px 0;
    color: #fff;
    font-size: 18px;
    border-radius: 10px 10px 0 0;
    text-align: center;
  }

  .gold-etf .date {
    margin-top: 30px;
    font-size: 20px;
    font-weight: bold;
  }

  .gold-etf .chart {
    margin-top: 10px;
  }

  .gold-etf .note {
    margin-top: 30px;
    font-size: 18px;
  }

  .gold-etf .table {
    padding-bottom: 20px;
    border-bottom: 1px solid #c3bab5;
    margin-top: 40px;
  }

  .gold-etf .table .row {
    display: flex;
    font-size: 15px;
    font-weight: bold;
  }

  .gold-etf .table .row.thead {
    background-color: var(--brown);
    color: #fff;
    font-size: 15px;
    border-radius: 10px 10px 0 0;
    padding: 15px 0;
    margin-bottom: 20px;
  }

  .gold-etf .table .row.thead .cell {
    border-right: 0;
  }

  .gold-etf .table .row .cell {
    width: 33.3333%;
    text-align: center;
    padding: 8px 0;
    border-right: 1px solid #c3bab5;
  }

  .gold-etf .table .row .cell:last-of-type {
    border-right: 0;
  }

  .gold-etf .writeup {
    margin-top: 50px;
  }

  .useful-sites {
    padding: 0 20px;
  }

  .useful-sites .head .tag {
    color: var(--gold);
    font-size: 20px;
    font-weight: bold;
  }

  .useful-sites .head .title {
    font-size: min((100vw * 30 / 375), 50px);
    font-weight: bold;
    line-height: 110%;
    margin-top: 15px;
  }

  .useful-sites .listing {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 35px;
  }

  .useful-sites .listing .item {
    display: flex;
    align-items: center;
  }

  .useful-sites .listing .item .text {
    width: 55%;
    font-size: 18px;
    font-weight: bold;
  }

  .contact-pg .intro {
    margin-top: 0;
    padding: 0 20px;
  }

  .contact-pg .intro .text {
    font-size: min((100vw * 18 / 375), 28px);
  }

  .contact-pg .intro .contact-no {
    display: flex;
    align-items: center;
    gap: 0 15px;
    margin-top: 30px;
  }

  .contact-pg .intro .contact-no .no {
    font-size: min((100vw * 36 / 375), 50px);
    font-weight: bold;
  }

  .contact-pg .intro .timing {
    font-size: 20px;
    margin-top: 20px;
  }

  .contact-pg .intro .note {
    font-size: 22px;
    margin-top: 20px;
  }

  .contact-pg .intro .head {
    margin-top: 55px;
  }

  .contact-pg .form .head .tag {
    color: var(--gold);
    font-size: 20px;
    font-weight: bold;
  }

  .contact-pg .form .head .title {
    font-size: min((100vw * 30 / 375), 50px);
    font-weight: bold;
    line-height: 110%;
    margin-top: 15px;
  }

  .contact-pg .form {
    margin-top: 55px;
  }

  .contact-pg .form form {
    background-color: var(--yellow);
    padding: 20px;
    margin-top: 40px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 30px 0;
  }

  .contact-pg .form .row {
    display: flex;
    flex-direction: column;
    gap: 10px 0;
  }

  .contact-pg .form .row label {
    font-size: 18px;
    font-weight: bold;
    line-height: 140%;
    padding-top: 5px;
    display: flex;
    flex-direction: row;
    gap: 0 9px;
  }

  .contact-pg .form .row .entry select {
    width: 100%;
    font-size: 18px;
    padding: 18px 20px;
    border-radius: 5px;
    border: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    cursor: pointer;
    background-image: url('../images/select-arrow.svg');
    background-repeat: no-repeat;
    background-position: 97%center;
    font-family: var(--questrial);
  }

  .contact-pg .form .row .entry .error {
    margin-top: 10px;
    color: #ed1d25;
  }

  .contact-pg .form .row .entry .two-col {
    display: flex;
    gap: 15px 0;
    flex-direction: column;
  }

  .contact-pg .form .row .entry .two-col .item {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    gap: 0 15px;
  }

  .contact-pg .form .row .entry .two-col input[type='text'] {
    width: 72%;
  }

  .contact-pg .form .row .entry .two-col .item .label {
    text-align: right;
    font-weight: bold;
    width: 28%;
  }

  .contact-pg .form .row .entry input[type='email'],
  .contact-pg .form .row .entry input[type='text'] {
    width: 100%;
    font-size: 18px;
    padding: 18px 20px;
    border-radius: 5px;
    border: 0;
    font-family: var(--questrial);
  }

  .contact-pg .form .row .entry .note {
    margin-top: 8px;
    color: #333;
  }

  .contact-pg .form .row .entry textarea {
    width: 100%;
    height: 200px;
    border-radius: 5px;
    border: 0;
    resize: vertical;
    padding: 18px 20px;
    font-family: var(--questrial);
    font-size: 18px;
  }

  .contact-pg .form .row .button.black {
    cursor: pointer;
    margin-inline: auto;
    width: 100%;
    letter-spacing: 1em;
    text-indent: 1em;
  }

  .wpcf7-spinner {
    position: absolute !important;
    right: 0;
    bottom: 0;
  }

  .contact-pg .form .head {
    padding: 0 20px;
  }

  .contact-pg .form .row label div {
    display: inline-block;
  }

  .contact-pg .form .row label.flex-row {
    flex-direction: column;
  }

  .card-with-thumb.reverse .button-wrap {
    display: flex;
    justify-content: flex-end;
    gap: 0 10px;
    flex-direction: column;
  }

  .card-with-thumb.reverse .button-wrap a {
    text-align: center;
  }

  .home-solutions .solutions .button-wrap {
    display: flex;
    gap: 10px 0;
    flex-direction: column;
    margin-top: 20px;
  }

  .home-solutions .solutions .button-wrap .button {
    margin-top: 0;
    text-align: center;
  }

  .footer_info__box {
    padding-bottom: 1em;
  }

  .footer_info__logo {
    width: 3em;
    margin-inline: auto;
  }

  .bold {
    font-weight: bold;
  }

	.note {
    p {
      margin: unset;
    }
	}

  .indent {
    p {
      text-indent: -1.15em;
      padding: 0 0 0 1.15em;
      > i {
        display: inline-block;
        min-width: 1.15em;
        margin: 0 -1.15em 0 1.15em;
      }
    }
  }

  .indents {
    p {
      text-indent: -2.15em;
      padding: 0 0 0 2.15em;
      > i {
        display: inline-block;
        min-width: 2.15em;
        margin: 0 -2.15em 0 2.15em;
      }
    }
  }

  .flex {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
  }

  .row-reverse {
    flex-direction: row-reverse;
  }

  .column-reverse {
    flex-direction: column-reverse;
  }

  .justify-start {
    justify-content: flex-start;
  }

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

  .justify-end {
    justify-content: flex-end;
  }

  .alignitems-start {
    align-items: flex-start;
  }

  .alignitems-center {
    align-items: center;
  }

  .alignitems-end {
    align-items: flex-end;
  }

  .gold__charm,
  .gold__tax,
  .gold__brand,
  .gold__process,
  .gold__process__buy-sell,
  .gold__process__packing {
    article {
      padding-block: 0 20px;
      @media (min-width: 768px) {
        padding-block: 40px;
      }
      &:first-of-type {
        @media (min-width: 768px) {
          padding-block: 0 40px;
        }
      }
      &:nth-of-type(even) {
        background-color: rgba(130, 121, 121, 0.05);
      }
    }
    h4 {
      color: var(--gold);
      font-size: 22px;
      font-weight: bold;
      margin-block: unset;
      @media (min-width: 768px) {
        font-size: 28px;
      }
    }
    h5 {
      color: var(--yellow);
      font-size: 18px;
      font-weight: bold;
      margin-block: unset;
      padding-block: 0.5em;
      @media (min-width: 768px) {
        font-size: 22px;
      }
      + .text p:first-of-type {
        margin-block-start: 0;
      }
    }
    .text {
      a {
        color: var(--brown);
        font-weight: bold;
        &[target='_blank']::after {
          display: inline;
          vertical-align: bottom;
          font-family: 'Material Symbols Outlined';
          color: var(--brown);
          content: '\e89e';
        }
      }
    }
    .caption {
      font-size: 14px;
      a {
        color: var(--brown);
        font-weight: bold;
        &[target='_blank']::after {
          display: inline;
          vertical-align: bottom;
          font-family: 'Material Symbols Outlined';
          color: var(--brown);
          content: '\e89e';
        }
      }
    }
    .box {
      border: 5px double rgba(130, 121, 121, 0.5);
      background-color: rgba(251, 199, 51, 0.1);
      padding: 10px 20px;
    }
  }

  .gold__charm {
    overflow: clip;
    .flex {
      .gold__charm__image {
        @media (min-width: 768px) {
          margin-inline: -5% 0;
        }
      }
    }
    .flex.row-reverse {
      .gold__charm__image {
        @media (min-width: 768px) {
          margin-inline: 0 -5%;
        }
      }
    }
  }

  .gold__charm__image {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: clip;
    flex-basis: 100%;
    width: 100%;
    max-block-size: 243px;
    aspect-ratio: 16 / 9;
    @media (min-width: 768px) {
      flex-basis: 40%;
      width: 40%;
      padding: 20px;
    }
    img {
      display: block;
      width: 100%;
      max-width: none;
      max-block-size: unset;
    }
  }

  .gold__charm__content {
    flex-basis: 100%;
    width: 100%;
    padding: 20px;
    @media (min-width: 768px) {
      flex-basis: 65%;
      width: 65%;
    }
  }

  .gold__tax {
    .box {
      margin-block-end: 20px;
    }
  }

  .gold__brand {
    article {
      padding: 20px;
      &:first-of-type {
        padding-block-start: unset;
      }
    }
    .box {
      margin-block-end: 20px;
      dt {
        color: red;
        font-weight: bold;
      }
    }
    .table {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      align-items: stretch;
      box-shadow: -0.5px -0.5px 0 0.5px var(--brown);
      margin-block-end: 20px;
      li {
        flex-basis: calc(100% / 3);
        width: calc(100% / 3);
        background-color: white;
        box-shadow: inset -0.5px -0.5px 0 0.5px var(--brown);
        @media (min-width: 768px) {
          flex-basis: calc(100% / 8);
          width: calc(100% / 8);
        }
        figure {
          text-align: center;
          padding-block: 20px 10px;
          padding-inline: 5px;
          img {
            margin-inline: auto;
          }
          figcaption {
            display: block;
            color: var(--gold);
            font-size: 11px;
            letter-spacing: -0.2cap;
            padding-block-start: 10px;
            @media (min-width: 768px) {
              font-size: 13px;
            }
          }
        }
      }
    }
  }

  .gold__brand__image {
    flex-basis: 100%;
    width: 100%;
    padding: 20px;
    @media (min-width: 768px) {
      flex-basis: 40%;
      width: 40%;
    }
    img {
      margin-inline: auto;
    }
  }

  .gold__brand__content {
    flex-basis: 100%;
    width: 100%;
    @media (min-width: 768px) {
      flex-basis: 55%;
      width: 55%;
    }
    li {
      &:not(:last-of-type) {
        border-block-end: dotted 1px var(--brown);
      }
      p {
        span {
          display: inline-block;
          background: var(--gold);
          text-align: center;
          color: white;
          line-height: 1.5em;
          width: 1.5em;
          height: 1.5em;
          margin-inline-end: 0.5em;
        }
      }
    }
  }

  .gold__process {
    article {
      padding: 20px;
      &:first-of-type {
        padding-block-start: unset;
      }
    }
    .flex {
      justify-content: center;
      gap: 10px;
      @media (min-width: 768px) {
        gap: 20px;
      }
    }
    .col2 {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px;
      @media (min-width: 768px) {
        gap: 20px;
      }
      dl {
        text-align: center;
        flex-basis: 100%;
        width: 100%;
        @media (min-width: 768px) {
          flex-basis: 40%;
          width: 40%;
        }
        dt {
          p {
            font-weight: bold;
          }
        }
      }
    }
  }

  .gold__process__buy,
  .gold__process__sell {
    .box {
      margin-block-end: 20px;
      padding: 10px 10px 0 10px;
      @media (min-width: 768px) {
        padding: 20px;
      }
    }
    .flex {
      width: min(100%, 884px);
      margin-inline: auto;
      dt,
      dd {
        flex-basis: 100%;
        width: 100%;
        @media (min-width: 768px) {
          flex-basis: calc(50% - 10px);
          width: calc(50% - 10px);
        }
      }
      dd {
        text-align: center;
      }
    }
  }

  .gold__process__sell {
    .flex {
      flex-direction: row-reverse;
    }
  }

  .gold__process__sctl {
    text-align: center;
    flex-basis: 100%;
    width: 100%;
  }

  .gold__process__buy-sell {
    overflow: clip;
    .flex {
      align-items: flex-start;
      flex-direction: row-reverse;
    }
    .box {
      margin-inline: 20px;
    }
  }

  .gold__process__buy-sell__image {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: clip;
    flex-basis: 100%;
    width: 100%;
    max-block-size: 243px;
    aspect-ratio: 16 / 9;
    @media (min-width: 768px) {
      flex-basis: 35%;
      width: 35%;
      padding: 20px;
    }
    img {
      display: block;
      width: 100%;
      max-width: none;
      max-block-size: unset;
    }
  }

  .gold__process__buy-sell__content {
    flex-basis: 100%;
    width: 100%;
    padding: 20px;
    color: var(--gold);
    @media (min-width: 768px) {
      flex-basis: 65%;
      width: 65%;
    }
    .h4 {
      font-size: 22px;
      font-weight: bold;
      margin-block: unset;
      padding: 0 0 0 1.75em;
      @media (min-width: 768px) {
        font-size: 28px;
      }
      i {
        display: inline-block;
        background-color: var(--gold);
        text-align: center;
        color: white;
        text-indent: 0;
        line-height: 1.5em;
        width: 1.5em;
        height: 1.5em;
        min-width: unset;
        margin-inline: -0.75em 0.5em;
      }
    }
    .tel {
      color: var(--brown);
      text-align: center;
      font-size: min((100vw * 32 / 375), 36px);
      line-height: 1;
    }
  }

  .gold__process__packing {
    article {
      padding-block: 20px;
      padding-inline: 20px;
      @media (min-width: 768px) {
        padding-block: 40px;
        padding-inline: unset;
      }
    }
    .box {
      padding: 20px;
      > div {
        flex-basis: 100%;
        width: 100%;
        @media (min-width: 768px) {
          flex-basis: calc(50% - 20px);
          width: calc(50% - 20px);
        }
      }
    }
    .justify-center {
      gap: 20px;
      li {
        flex-basis: 100%;
        width: 100%;
        @media (min-width: 768px) {
          flex-basis: calc(45% - 50px);
          width: calc(45% - 50px);
        }
        &:nth-of-type(even) {
          background: var(--brown);
          height: calc(tan(60deg) * 30px / 2);
          flex-basis: 30px;
          width: 30px;
          clip-path: polygon(0 0, 100% 0, 50% 100%);
          @media (min-width: 768px) {
            clip-path: polygon(0 0, 100% 50%, 0 100%);
          }
        }
      }
    }
    .h4 {
      color: var(--gold);
      font-size: 22px;
      font-weight: bold;
      margin-block: 0 1em;
      padding: 0 0 0 1.75em;
      @media (min-width: 768px) {
        font-size: 28px;
      }
      i {
        display: inline-block;
        background-color: var(--gold);
        text-align: center;
        color: white;
        text-indent: 0;
        line-height: 1.5em;
        width: 1.5em;
        height: 1.5em;
        min-width: unset;
        margin-inline: -0.75em 0.5em;
      }
    }
  }

  .gold__link {
    ul {
      padding-block: 30px;
      li {
        padding: 10px;
      }
    }
  }

  .post-column {
    .post_eye_catching {
      img {
        width: 100%;
      }
    }
    .plugin-toc {
      display: none;
      flex-basis: 100%;
      width: 100%;
      padding-inline: 1rem;
      @media (min-width: 768px) {
        display: block;
        flex-basis: 20rem;
        width: 20rem;
      }
      li {
        a {
          color: var(--anchor);
          font-size: min((100vw * 12 / 375), 14px);
        }
        ul {
          padding-inline-start: 1rem;
        }
      }
      > li {
        padding-block: 0.5rem;
        > a {
          font-weight: bold;
          font-size: min((100vw * 14 / 375), 16px);
        }
      }
    }
    .post-area {
      flex-basis: 100%;
      width: 100%;
      padding-inline: 1rem;
      @media (min-width: 768px) {
        flex-basis: 100%;
        width: 100%;
      }
      h1,
      h2,
      strong {
        font-weight: bold;
      }
      h1 {
        border-block-start: 1px solid var(--brown);
        font-size: min((100vw * 24 / 375), 26px);
        margin-block-start: min((100vw * 24 / 375), 26px);
        padding-block: min((100vw * 24 / 375), 26px) min((100vw * 12 / 375), 13px);
      }
      h2 {
        font-size: min((100vw * 18 / 375), 20px);
      }
      #toc_container {
        border: 1px solid var(--brown);
        @media (min-width: 768px) {
          display: none !important;
        }
        .toc_list {
          flex-basis: 100%;
          width: 100%;
          padding-inline: 1rem;
          @media (min-width: 768px) {
            flex-basis: 20rem;
            width: 20rem;
          }
          li {
            a {
              color: var(--anchor);
              font-size: min((100vw * 12 / 375), 14px);
            }
            ul {
              padding-inline-start: 1rem;
            }
          }
          > li {
            padding-block: 0.5rem;
            > a {
              font-weight: bold;
              font-size: min((100vw * 14 / 375), 16px);
            }
          }
        }
      }
      .box {
        background-color: rgba(251, 199, 51, 0.1);
        margin-block: 1em 1.5em;
        padding: min((100vw * 5 / 375), 1em) min((100vw * 15 / 375), 2rem);
      }
      .post_index {
        border-block-start: 2px solid var(--brown);
        padding-block-start: 1rem;
        @media (min-width: 768px) {
          border-block-start: unset;
          padding-block-start: unset;
        }
        li {
          padding-inline: 0.5rem;
          &:not(:last-of-type) {
            border-inline-end: 1px solid var(--brown);
          }
          &:first-of-type {
            padding-inline-start: unset;
          }
          &:last-of-type {
            padding-inline-end: unset;
          }
        }
      }
      .post_title {
        border-block: 2px solid var(--brown);
        font-size: min((100vw * 22 / 375), 28px);
        font-weight: bold;
        margin-block: 1rem;
        padding-block: 0.5rem;
      }
      .post_tags {
        margin-block-end: 2rem;
        li {
          padding: 0.25rem;
          a {
            display: inline-block;
            border: 1px solid var(--brown);
            border-radius: 100vmax;
            color: black;
            font-size: min((100vw * 12 / 375), 14px);
            line-height: 4cap;
            padding-inline: 1em;
          }
        }
      }
    }
    .plugin-toc + .post-area {
      flex-basis: 100%;
      width: 100%;
      @media (min-width: 768px) {
        flex-basis: calc(100% - 20rem);
        width: calc(100% - 20rem);
      }
    }
  }

  .archive-area {
    padding-inline: 1rem;
    gap: 2rem 1rem;
  }
  .archive_card {
    flex-basis: 100%;
    width: 100%;
    @media (min-width: 576px) {
      flex-basis: calc((100% / 2) - (1rem / 2));
      width: calc((100% / 2) - (1rem / 2));
    }
    @media (min-width: 992px) {
      flex-basis: calc((100% / 3) - (2rem / 3));
      width: calc((100% / 3) - (2rem / 3));
    }
    a {
      color: black;
      dl {
        dt {
          display: grid;
          place-items: center;
          background-color: black;
          background-image: url('/wp-content/themes/daiichi/assets/images/slide01.jpg');
          background-size: cover;
          aspect-ratio: 2 / 1;
          overflow: clip;
          width: 100%;
          height: 50%;
          margin-block-end: 0.25em;
          img {
            object-fit: cover;
            max-width: 150%;
          }
        }
        dd {
          line-height: 1;
          padding-block: 0.25rem;
        }
        .archive_card_title {
          font-size: min((100vw * 14 / 375), 16px);
          line-height: 1.5;
          font-weight: bold;
          min-height: min((100vw * 28 / 375), 56px);
          br {
            display: none;
          }
        }
        .archive_card_time {
          color: var(--brown);
          font-size: min((100vw * 12 / 375), 14px);
        }
        .archive_card_link {
          text-align: right;
          color: var(--anchor);
          font-size: min((100vw * 10 / 375), 12px);
          padding-inline-end: 0.5em;
        }
      }
    }
  }
  .column-tag-list {
    padding-block-end: min((100vw * 20 / 375), 3rem);
    padding-inline: 1rem;
    ul {
      padding-block: 0.5rem;
      gap: 0.25rem;
      li {
        a {
          background: white;
          border: 0.1rem solid black;
          border-radius: 100vmax;
          color: black;
          font-size: min((100vw * 12 / 375), 12px);
          line-height: min((100vw * 20 / 375), 20px);
          padding-inline: 0.75em;
        }
        a:hover,
        .active {
          background: black;
          color: white;
        }
      }
    }
  }
  #column {
    .caption {
      padding-block-end: min((100vw * 10 / 375), 1.5rem);
      padding-inline: 1rem;
      .tag {
        color: var(--yellow);
        font-family: var(--bozon-bold);
        font-weight: bold;
        font-size: min((100vw * 22 / 375), 22px);
        letter-spacing: 0;
      }
      .title {
        a {
          color: black;
          font-weight: bold;
          font-size: min((100vw * 36 / 375), 60px);
          font-family: var(--bozon-bold);
          line-height: 110%;
          letter-spacing: 0;
        }
      }
    }
    .pagination {
      text-align: center;
      padding-block-start: 3rem;
      a,
      span {
        display: block;
        aspect-ratio: 1 / 1;
        border-radius: 0.2rem;
        background: white;
        color: var(--anchor);
        margin-inline: 0.25em;
      }
      .page-numbers {
        font-size: min((100vw * 14 / 375), 14px);
        line-height: min((100vw * 28 / 375), 28px);
        width: min((100vw * 28 / 375), 28px);
        height: min((100vw * 28 / 375), 28px);
      }
      .prev,
      .next {
        margin-inline: 0.75em;
      }
      a:hover,
      .current {
        background: var(--anchor);
        color: white;
      }
    }
  }
  .return-btn {
    text-align: center;
    border-block-start: 1px solid var(--brown);
    margin-block-start: min((100vw * 24 / 375), 26px);
    padding-block-start: min((100vw * 24 / 375), 26px);
  }

  #parts_sticky {
    .spacer {
      position: relative;
      width: 100%;
      height: 60px;
      display: block;
      @media (min-width: 768px) {
        display: none;
      }
    }
    ul {
      position: fixed;
      right: 0;
      bottom: 0;
      z-index: 1;
      width: 100%;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      align-items: center;
      text-align: center;
      @media (min-width: 768px) {
        right: 15px;
        bottom: 15px;
        width: unset;
      }
      li {
        &:first-of-type {
          display: none;
          @media (min-width: 768px) {
            display: block;
          }
          a {
            border-radius: 100vmax;
            aspect-ratio: 1 / 1;
            width: 115px;
            padding-block: 1.75em;
            span {
              flex-basis: 100%;
              width: 100%;
            }
          }
        }
        &:not(:first-of-type) {
          display: block;
          flex-basis: 50%;
          width: 50%;
          @media (min-width: 768px) {
            display: none;
          }
          a {
            padding-block: 1.25em;
            span {
              padding-inline-start: 0.25em;
            }
          }
        }
        &:nth-of-type(2) {
          a {
            background: var(--gold);
          }
        }
        a {
          display: flex;
          justify-content: center;
          flex-wrap: wrap;
          align-items: center;
          background: black;
          color: white;
          font-size: min((100vw * 14 / 375), 14px);
          font-weight: bold;
          span {
            display: block;
          }
          img,
          svg {
            width: 24px;
            height: 24px;
          }
        }
      }
    }
  }
}