.inner-banner {
  .banner-content {
    height: 404px;
  }
}

.custom-tabs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  border-bottom: 1px solid #ffffff8f;
  gap: 12px;

  .arrow-slide {
    background: none;
    border: none;
    border: 1px solid #fff;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    padding: 8px;
    transition: 0.3s all ease-in-out;

    img {
      transition: 0.3s all ease-in-out;
    }

    &:hover {
      background-color: #fff;

      img {
        filter: invert(1);
      }
    }
  }
  /* 
  @media (min-width: 1400px) {
    .arrow-slide {
      display: none;
    }
  } */

  .about-tabs-slider {
    width: 100%;
  }

  .swiper-wrapper {
    justify-content: space-between;
  }

  .swiper-slide {
    padding: 8px;
    transition: 0.3s all ease-in-out;
    font-size: clamp(16px, 2.4vw, 24px);
    color: #878d97;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    width: auto;
    font-weight: 700;

    a {
      color: #fff;
    }

    &:hover,
    &.custom-active {
      color: #fff;

      a {
        color: #878d97;
      }

      font-size: clamp(18px, 2.4vw, 32px);
      font-weight: 700;
      cursor: pointer;
    }
  }
}

.about-page {
  .about-content {
    margin-top: 40px;

    .about-content-item {
      display: none;
      background: transparent;
      backdrop-filter: none;
      border-radius: 9px;
      padding: 50px;

      @media (max-width: 992px) {
        padding: 24px;
      }

      &.ceo-message {
        .inner-content {
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          gap: 32px;

          .left-side {
            display: flex;
            flex-direction: column;
            gap: 24px;
            max-width: 329px;
            flex: 1;

            .title {
              font-size: clamp(16px, 2vw, 24px);
              font-weight: 700;
              padding-inline-end: 31px;
              margin: 0;
            }

            .profile {
              display: flex;
              flex-direction: column;
              gap: 24px;
              text-align: center;

              .image {
                border-radius: 8px;
                background: radial-gradient(
                  40.63% 70.89% at 62.62% 78.37%,
                  #747379 0%,
                  #161417 100%
                );
                overflow: hidden;
                width: 100%;
                height: 100%;
                object-fit: cover;

                img {
                  mix-blend-mode: luminosity;
                  width: 100%;
                  height: auto;
                  transform: rotateY(180deg);
                }
              }

              .ceo-name {
                font-size: clamp(16px, 2vw, 24px);
                font-weight: 600;
                margin: 0;
              }

              .ceo-position {
                font-size: clamp(14px, 1.6vw, 16px);
                font-weight: 400;
                margin: 0;
                color: #000000;
              }
            }
          }

          .right-side {
            flex: 1;
            font-size: 16px;
            color: black;
            max-width: 744px;
          }
        }

        @media (max-width: 992px) {
          padding: 50px 24px;

          .inner-content {
            flex-direction: column;
            align-items: center;

            .right-side,
            .left-side {
              max-width: 100%;
            }
          }
        }
      }

      &.vision-mission {
        .inner-content {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          gap: 16px 19px;

          .card-vision-mission {
            flex: 1 1 400px;
            background: transparent;
            border: 3px solid rgba(255, 255, 255, 0.35);
            border-radius: 8px;
            padding: 30px 24px;
            display: flex;
            gap: 5px;
            flex-direction: column;
            align-items: center;

            .header-card {
              display: flex;
              align-items: center;
              justify-content: center;
              gap: 16px;

              .icon {
                width: 32px;
                height: 32px;
                display: flex;
                align-items: center;
                justify-content: center;

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

              .title {
                font-weight: 700;
                color: #fff;
                margin: 0;
                font-size: clamp(18px, 2vw, 32px);
              }
            }

            .body-card {
              font-size: 16px;
              font-weight: 400;
              margin: 0;
              color: #fff;
              text-align: center;
              max-width: 529px;

              ul {
                display: flex;
                flex-direction: column;
                align-items: center;
              }

              a {
                color: #fff;
              }
            }
          }

          @media (max-width: 992px) {
            .card-vision-mission {
              flex: 1 1 300px;
            }
          }
        }
      }

      &.board-members {
        .members-section {
          width: 100%;
          margin-bottom: clamp(32px, 5vw, 56px);

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

        .members-section-title {
          width: 100%;
          font-size: clamp(20px, 2.5vw, 28px);
          font-weight: 700;
          color: #fff;
          margin: 0 0 24px;
          text-align: center;
        }

        .inner-content {
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          gap: 24px;

          .member {
            display: flex;
            align-items: center;
            flex-direction: column;
            gap: 24px;
            flex: 1 1 250px;

            .member-image {
              position: relative;
              overflow: hidden;
              width: 100%;
              height: 400px;
              display: flex;

              @media (max-width: 992px) {
                width: 280px;
              }

              &::after {
                content: none;
                display: none;
              }

              img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                filter: grayscale(1);
                transition: filter 0.35s ease;
              }
            }

            &:hover .member-image img {
              filter: grayscale(0);
            }

            .member-info {
              display: flex;
              flex-direction: column;
              text-align: center;

              .member-name {
                font-size: 18px;
                font-weight: 700;
                color: #fff;
                margin: 0;
              }

              .member-position {
                font-weight: 700;
                color: #cfcfcf;
                font-size: 16px;
                margin: 0;
              }
            }
          }
        }
      }

      &.sustainability {
        background: transparent;
        padding: 0;

        .inner-content {
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          gap: 24px;

          .card-sustainability {
            flex: 1 1 300px;
            max-width: 600px;
            background: #fff;
            border-radius: 8px;
            padding: 50px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 16px;

            .header-card {
              display: flex;
              align-items: center;
              justify-content: center;
              flex-direction: column;
              gap: 16px;

              .icon {
                width: 88px;
                height: 88px;
                display: flex;
                align-items: center;
                justify-content: center;

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

              .title {
                font-weight: 700;
                color: #000;
                margin: 0;
                font-size: clamp(18px, 2vw, 20px);
              }
            }

            .body-card {
              font-size: 16px;
              font-weight: 400;
              margin: 0;
              color: #000;
              max-width: 529px;
              text-align: start;

              ul {
                display: flex;
                flex-direction: column;
                margin: 0;
                list-style: square;
              }

              a {
                color: #000;
              }
            }

            &:first-child {
              flex: 1 1 100%;
              flex-direction: row;
              justify-content: space-between;
              max-width: 100%;

              .header-card {
                flex-direction: row;

                .icon {
                  width: 47px;
                  height: 47px;
                }

                .title {
                  font-size: clamp(18px, 2vw, 32px);
                }
              }

              .body-card {
                max-width: 700px;
              }
            }
          }
        }
      }

      &.certifications-awards {
        background: transparent;
        padding: 0;

        .inner-content {
          display: flex;
          flex-direction: column;
          gap: 24px;

          .box-content {
            border-radius: 9px;
            background: #fff;
            padding: 32px 48px;
            display: flex;
            flex-direction: column;
            gap: 16px;
            backdrop-filter: blur(16px);

            .title-box {
              font-size: clamp(18px, 2vw, 32px);
              font-weight: 700;
              margin: 0;
            }

            .body-box {
              font-size: clamp(16px, 2vw, 19px);
              color: #000;
              display: flex;
              flex-direction: column;
              gap: 32px;

              .list-certifications {
                list-style: none;
                display: flex;
                text-align: center;
                flex-wrap: wrap;
                justify-content: space-between;
                padding: 0;
                margin: 0;
                gap: 24px;

                .item-certifications {
                  flex: 1 1 187px;

                  .inner-item {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    gap: 10px;
                  }

                  .certifications-image {
                    width: 100%;
                    height: auto;
                    max-height: 287px;
                    display: flex;

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

                  .certifications-name {
                    font-size: 16px;
                    margin: 0;
                  }

                  .btn-download {
                    background: #53535352;
                    border-radius: 4.35px;
                    color: #000;
                    width: 100%;
                    max-width: 146px;
                    padding: 8px;
                    transition: 0.3s all ease-in-out;

                    &:hover {
                      background: #000;
                      color: #fff;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
.list-certifications {
  list-style: none;
  display: flex;
  text-align: center;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0;
  margin: 0;
  gap: 24px;

  .item-certifications {
    flex: 1 1 187px;

    .inner-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }

    .certifications-image {
      width: 100%;
      height: auto;
      max-height: 287px;
      display: flex;

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

    .certifications-name {
      font-size: 16px;
      margin: 0;
    }

    .btn-download {
      background: #53535352;
      border-radius: 4.35px;
      color: #000;
      width: 100%;
      max-width: 146px;
      padding: 8px;
      transition: 0.3s all ease-in-out;

      &:hover {
        background: #000;
        color: #fff;
      }
    }
  }
}
.media-page {
  .custom-tabs {
    justify-content: center;

    .media-tabs-slider {
      display: flex;
      justify-content: center;
      gap: 48px;
    }

    @media (max-width: 992px) {
      .media-tabs-slider {
        gap: 24px;
      }
    }

    @media (max-width: 448px) {
      .media-tabs-slider {
        gap: 12px;
      }
    }

    @media (min-width: 992px) {
      .media-tabs-slider {
        gap: 24px;
      }

      .arrow-slide {
        display: none;
      }
    }
  }

  .media-content {
    margin-top: 0;
    display: flex;
    flex-direction: column;
    gap: 40px;

    .list-gallery-media {
      display: flex;
      flex-wrap: wrap;
      gap: 24px;
      justify-content: center;

      .item-media {
        flex: 1 1 320px;
        max-width: 487px;
        height: 215px;
        display: flex;
        flex-direction: column;
        gap: 16px;
        position: relative;
        border-radius: 14px;
        overflow: hidden;
        border: 1px solid #3f3f3f;
        z-index: 1;

        .link-detail {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: 10;
        }

        &::before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: linear-gradient(
            180deg,
            rgba(0, 0, 0, 0) 40%,
            #000000 100%
          );
        }

        &::after {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: #1c1c1c;
          opacity: 0;
          transition: 0.3s all ease-in-out;
        }

        .cover-image {
          width: 100%;
          height: 100%;
          overflow: hidden;
          display: flex;

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

        .media-title {
          font-size: clamp(16px, 2vw, 24px);
          font-weight: 700;
          margin: 0;
          color: #fff;
          position: absolute;
          bottom: 24px;
          left: 24px;
          right: 24px;
          z-index: 1;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }

        .play-video {
          background: none;
          width: 73px;
          height: 73px;
          border: none;
          position: absolute;
          top: 50%;
          left: 50%;
          translate: -50% -75%;
          opacity: 0;
          scale: 1.2;
          transition: 0.3s all ease-in-out;
          z-index: 11;

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

          @media (max-width: 448px) {
            width: 50px;
            height: 50px;
          }
        }

        &.video-item {
          .play-video {
            opacity: 1;
            scale: 1;
            translate: -50% -50%;
            pointer-events: none;
          }
        }

        &:hover {
          cursor: pointer;

          .play-video {
            opacity: 1;
            scale: 1;
          }

          &::after {
            opacity: 0.7;
          }
        }
      }
    }

    .list-projects-media {
      display: flex;
      flex-wrap: wrap;
      gap: 24px;
      justify-content: center;

      .item-media {
        flex: 1 1 320px;
        max-width: 487px;
        display: flex;
        flex-direction: column;
        gap: 32px;
        position: relative;

        .header-item {
          width: 100%;
          height: 238px;
          display: flex;
          overflow: hidden;
          border-radius: 12px;

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

        .body-item {
          display: flex;
          flex-direction: column;
          gap: 4px;

          .title-project {
            color: #fff;
            font-size: clamp(18px, 2vw, 24px);
            margin: 0;
            font-weight: 700;
          }

          .description-project {
            color: #ffffff;
            font-size: clamp(16px, 1.6vw, 20px);
            margin: 0;
            font-weight: 400;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
            -webkit-line-clamp: 2;
            line-clamp: 2;
          }

          .type {
            color: #ffffff;
            font-size: clamp(16px, 1.6vw, 20px);
            margin: 0;
            font-weight: 600;
          }
        }
      }
    }
  }
}

.header-section {
  display: flex;
  flex-direction: column;
  gap: 16px;

  .title-section {
    color: #ffffff;
    font-size: clamp(18px, 3vw, 32px);
    font-weight: 700;
  }

  .filter-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;

    .list-filter {
      list-style: none;
      padding: 0;
      margin: 0;
      max-width: 600px;
      flex: 1;
      display: flex;
      width: 100%;
      gap: 5px;
      flex-wrap: wrap;

      li {
        flex: 1;
        max-width: 116px;
      }

      .btn-filter {
        font-size: 14px;
        color: #333333;
        background: #ffffff;
        border-radius: 8px;
        padding: 10px;
        width: 100%;
        transition: 0.3s all ease-in-out;
        border: none;

        &.active {
          color: #e71d25;
          font-weight: 700;
        }

        &:hover {
          cursor: pointer;
          background: #bbb;
        }
      }
    }

    .btn-more-filter {
      font-size: 14px;
      color: #ffffff;
      background: #333333;
      border-radius: 8px;
      padding: 10px;
      width: 100%;
      transition: 0.3s all ease-in-out;
      max-width: 117px;
      flex: 1;
      outline: none;
      border: none;
      text-wrap: nowrap;
      align-self: flex-end;

      &:hover {
        cursor: pointer;
        background: #555555;
      }
    }

    @media (max-width: 778px) {
      flex-direction: column;

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

.custom-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;

  .arrow {
    width: 24px;
    height: 24px;

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

    &.disable {
      filter: brightness(0.4);
      pointer-events: none;
    }
  }

  .pargination-item {
    font-size: clamp(14px, 2vw, 20px);
    color: #ffffff66;
    transition: 0.3s all ease-in-out;
    cursor: pointer;
    text-decoration: none;

    &:hover,
    &.active {
      color: #ffffff;
    }
  }
}

.btn-back {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(16px, 2vw, 24px);
  font-weight: 700;
  color: #fff;
  transition: 0.3s all ease-in-out;
  border: 1.17px solid #0000004d;

  .icon {
    width: 27px;
    height: 27px;
    display: flex;

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

.news-article {
  display: flex;
  flex-direction: column;
  gap: 40px;

  .body-article {
    display: flex;
    flex-direction: column;

    .image-article {
      width: 100%;
      height: 315px;
      display: flex;
      overflow: hidden;
      border-radius: 14px;
      margin-bottom: 20px;

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

      &.image-article-2 {
        height: 522px;

        @media (max-width: 778px) {
          height: 300px;
        }
      }
    }

    h3,
    h4,
    .normal-title {
      font-size: clamp(18px, 2vw, 24px);
      font-weight: 700;
      color: #ffffff;
    }

    .normal-title-2 {
      font-size: clamp(18px, 2vw, 20px);
      font-weight: 700;
      color: #ffffff;
    }

    p {
      margin-bottom: 20px;
      color: #fff;
    }
  }

  @media (max-width: 778px) {
    gap: 20px;
  }

  .attachments {
    th,
    td {
      a {
        display: inline-flex;
        align-items: center;
        gap: 14px;
        color: #fff;
        font-weight: 600;
        transition: 0.3s all ease-in-out;

        &:hover {
          color: #bbb;
        }
      }

      @media (max-width: 992px) {
        padding: 20px 12px;
      }

      @media (max-width: 558px) {
        font-size: 16px;
        padding: 20px 16px;

        a {
          img {
            width: 32px;
            height: 32px;
          }
        }
      }
    }
  }
}

.header-article {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 16px;

  .title-article {
    font-size: clamp(24px, 6vw, 64px);
    font-weight: 600;
    color: #fff;
  }

  .date-article {
    font-size: clamp(16px, 2vw, 20px);
    font-weight: 600;
    color: #fff;
    opacity: 0.8;
  }
}

#mediaModal {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  .modal-dialog {
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    height: 100dvh;
    margin: 0;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(24px);
    background: #000000cc;
  }

  .btn-close {
    position: static !important;
    margin: 0 !important;
    z-index: 10;
    font-size: clamp(16px, 2vw, 24px);
  }

  #mediaModalTitle {
    z-index: 10;
    margin: 0;
    font-weight: 700;
    font-size: clamp(16px, 2vw, 24px);
  }

  .modal-body {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 40px;
    justify-content: center;
    gap: 12px;
  }

  .header-modal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .modal-content {
    height: 100%;

    width: 100%;
    max-width: 1244px;
  }

  .media-container {
    height: auto;
    max-height: 780px;

    width: 100%;
    max-width: 100%;

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

.btn-white {
  background: #ffffff;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  padding: 8px;
  max-width: 130px;
  color: #000;
}

.btn-white:hover {
  color: #000;
  background-color: #bbb;
}

.careers-page {
  background: #1e1e1e;

  .header-section {
    display: flex;
    flex-direction: column;
    gap: 10px;

    .title-section {
      font-size: clamp(20px, 3vw, 32px);
      font-weight: 700;
      margin: 0;
    }

    .desc-section {
      color: #ffffff;
    }
  }

  .our-features {
    display: flex;
    flex-direction: column;
    gap: 53px;

    .list-features {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 64px;

      .item-feature {
        display: flex;
        align-items: flex-start;
        gap: 16px;

        .num-feature {
          color: #959595;
          font-size: clamp(18px, 2vw, 24px);
          font-weight: 700;
        }

        .detail-feature {
          display: flex;
          flex-direction: column;
          gap: 15px;

          .header-title {
            display: flex;
            align-items: center;
            gap: 16px;

            .icon {
              display: flex;
              width: 32px;
              height: 32px;

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

            .title {
              color: #fff;
              font-size: clamp(18px, 2vw, 24px);
              font-weight: 700;
              margin: 0;
            }
          }

          .desc-feature {
            color: #fff;
          }
        }
      }

      @media (max-width: 1400px) {
        gap: 48px;
      }

      @media (max-width: 1024px) {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;

        .item-feature {
          .detail-feature {
            gap: 12px;
          }
        }
      }

      @media (max-width: 778px) {
        grid-template-columns: 1fr;
        gap: 24px;

        .item-feature {
          .detail-feature {
            gap: 8px;
          }
        }
      }
    }
  }

  .current-vacancies {
    .header-section {
      .filter-section {
        .list-filter {
          max-width: 100%;

          li {
            max-width: fit-content;
            min-width: 130px;
            text-wrap: nowrap;

            .btn-filter {
              &.active {
                color: #959595;
              }
            }
          }
        }
      }
    }
  }

  .body-vacancies {
    margin-block: 40px;
    display: flex;
    flex-direction: column;
    gap: 16px;

    .header-accordion-vacancies {
      background: #ffffff14;
      display: grid;
      grid-template-columns: 2fr 4fr 2fr 1fr;
      color: #fff;
      padding: 25px 24px;
      border-radius: 16px;
    }
  }

  #accordion-vacancies {
    display: flex;
    flex-direction: column;
    gap: 16px;

    .accordion-item {
      border: none;
      background: none;

      .accordion-header {
        background: none;
        border: none;

        .accordion-button:focus {
          box-shadow: none;
        }

        .accordion-button {
          border-bottom: 1px dashed #ffffff52;
          background: none;
          display: grid;
          grid-template-columns: 2fr 4fr 2fr 1fr;
          color: #fff;
          gap: 8px;
        }

        .accordion-button:not(.collapsed) {
          border: 1px solid #95959552;
          background: #95959514;
          color: #959595;
          border-radius: 16px;
        }

        .accordion-button::after {
          width: 40px;
          height: 40px;
          background-image: url(../img/minus.svg);
          background-position: center center;
          background-color: #ffffff14;
          border-radius: 50%;
        }

        .accordion-button:not(.collapsed)::after {
          background-image: url(../img/plus.svg);
        }

        @media (max-width: 778px) {
          .accordion-button {
            padding: 12px;
          }
        }
      }

      .accordion-body {
        display: flex;
        flex-direction: column;
        gap: 30px;
        border-bottom: 1px dashed #ffffff52;

        .group-content {
          display: flex;
          flex-direction: column;
          gap: 6px;

          .sub-title {
            font-size: clamp(18px, 2vw, 20px);
            font-weight: 700;
            color: #fff;
            margin: 0;
          }

          ul {
            color: #ffffff;
            list-style: square;
          }

          .content-rows {
            display: flex;
            flex-direction: column;
            gap: 6px;
            margin-block: 6px;

            .content-row {
              display: grid;
              grid-template-columns: 200px 1fr;
              gap: 12px;
              color: #fff;

              .title-row {
                color: #fff;
                font-size: 16px;
                font-weight: 600;
                margin: 0;
              }
            }
          }
        }
      }
    }
  }

  .footer-careers {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }
}

.btn.btn-custom-dark {
  background: #333333;
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 32px;
  max-width: fit-content;
  transition: 0.3s all ease-in-out;
  margin-top: 40px;
  box-shadow: none;

  &:hover {
    background: #959595;
  }
}

.application-form {
  display: flex;
  flex-direction: column;
  gap: 56px;
  margin-top: 56px;

  .section-form {
    display: flex;
    flex-direction: column;
    gap: 16px;

    .title-section-form {
      font-size: clamp(20px, 3vw, 32px);
      font-weight: 600;
      color: #959595;
      margin: 0;
    }

    .groups-language {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 30px 50px;

      .subtitle {
        color: #6f6f6f;
        font-size: clamp(18px, 2vw, 24px);
      }

      .group-language {
        display: flex;
        flex-direction: column;
        gap: 16px;

        .form-content {
          grid-template-columns: repeat(2, 1fr);
        }
      }
    }

    .form-content {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 30px 50px;

      .form-group {
        display: flex;
        flex-direction: column;
        gap: 8px;
        border-bottom: 1.5px solid #ffffff80;
        padding-block: 8px;
        min-width: 60px;

        input,
        select,
        .select2 {
          font-size: clamp(16px, 2vw, 20px);
          color: #fff;
          background-color: transparent;
          border: none;
          outline: none;

          &::placeholder {
            color: white;
          }
        }

        .select2 {
          width: auto !important;
          font-size: clamp(16px, 2vw, 20px);

          .select2-selection--single {
            background: transparent;
            border: none;

            .select2-selection__arrow {
              right: 12px;
              top: 50%;
              transform: translateY(-100%);
              width: 12px;
              height: 12px;
              border: solid white;
              border-width: 0 2px 2px 0;
              rotate: 45deg;
            }

            .select2-selection__arrow b {
              display: none;
            }

            .option-content {
              color: #fff;
              display: flex;
              align-items: center;
              gap: 4px;
            }
          }
        }

        .select2-container--default
          .select2-selection--single
          .select2-selection__rendered {
          color: #fff;
        }

        .select2-search__field {
          color: #000;
          font-size: 16px;
        }

        .phone-number {
          display: flex;
          align-items: center;
          gap: 24px;

          .select2::before {
            content: "";
            position: absolute;
            top: 50%;
            right: -14px;
            translate: 0 -50%;
            width: 1px;
            height: 24px;
            background: #ffffff;
            z-index: 1;
          }

          & > input {
            flex: 1;
            position: relative;
          }
        }

        .error-msg {
          color: #ff3300;
          display: none;
        }

        &.show-error {
          .error-msg {
            display: block;
          }
        }

        .file-field {
          position: relative;

          /* The native "No file chosen" text can't be translated via CSS
             content or the page's lang/dir — it's locale-drawn by the
             browser. So the real <input> is made fully invisible and
             stretched to cover the whole .file-field box (still focusable/
             clickable, just not painted), and .file-field__filename takes
             its place as the one visible, normally-flowing item — which is
             what lets the existing justify-content rules below (centered
             for CV/Other Documents, flex-start elsewhere) keep working the
             same way they did for the native text. Kept in sync by
             initFileFieldLabels() in inner-code.js. */
          input[type="file"] {
            position: absolute;
            inset: 0;
            opacity: 0;
            cursor: pointer;
          }

          .file-field__filename {
            display: inline-block;
            max-width: calc(100% - 90px);
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            text-align: start;
            font-size: clamp(16px, 2vw, 20px);
            font-weight: 400;
            color: #959595;
            pointer-events: none;
          }

          label {
            cursor: pointer;
            font-size: clamp(16px, 2vw, 20px);
            font-weight: 600;
            background: transparent;
            border: none;
            transition: 0.3s all ease-in-out;
            padding: 0;
            position: absolute;
            right: 0;
            top: 50%;
            translate: 0 -50%;
            color: #959595;

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

        &.form-group-with-label {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 10px;
          border: none;
          padding-block: 0;

          label {
            font-size: clamp(16px, 2vw, 22px);
            font-weight: 600;
            color: #ffffff;
          }

          .select2 {
            flex: 1;
          }

          .file-field label {
            font-size: clamp(16px, 2vw, 20px);
            font-weight: 400;
            color: #959595;
          }

          .input-wrapper {
            border-bottom: 1.5px solid #ffffff80;
            flex: 1;
            display: flex;
            padding-bottom: 8px;

            &:has(.file-field) {
              grid-column: 1 / -1;
              align-items: center;

              .file-field {
                flex: 1;
                display: flex;
              }

              > .file-field:only-child {
                justify-content: flex-start;
              }

              > label + .file-field {
                justify-content: center;
              }
            }
          }
        }
      }

      .group-language {
        display: flex;
        flex-direction: column;
        gap: 16px;

        .form-content {
          grid-template-columns: repeat(2, 1fr);
        }
      }

      .two-column {
        grid-column: span 2;
      }

      .four-column {
        grid-column: span 4;
      }

      .one-column {
        grid-column: span 1;
      }

      .contents {
        display: flex;
        flex-direction: column;
        gap: 30px;
      }
    }
  }

  .btn-submit-form {
    width: 100%;
    max-width: 100%;
    flex: 1 1 100%;
  }
}

.submit-result {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 100px;

  .wrapper-result {
    display: flex;
    flex-direction: column;
    max-width: 336px;
    gap: 80px;

    .header-result {
      display: flex;
      align-items: center;
      text-align: center;
      flex-direction: column;
      gap: 16px;

      .icon-result {
        width: 96px;
        height: 96px;
        display: flex;

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

      .title-result {
        font-size: clamp(24px, 4vw, 48px);
        font-weight: 700;
        color: #ffffff;
      }

      .subtitle-result {
        font-size: clamp(18px, 2vw, 24px);
        font-weight: 400;
        color: #ffffff;
      }
    }

    .btn-white {
      max-width: 100%;
    }
  }
}

.media-content:has(.factories-media) {
  gap: 20px;
  margin-block: 0;
}

.factories-media {
  .list-factories-media {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;

    .item-factories {
      flex: 1 1 320px;
      max-width: 487px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      position: relative;

      .link-card {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 10;
      }

      .header-item {
        width: 100%;
        height: 332px;
        display: flex;
        overflow: hidden;
        border-radius: 12px;

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

      .body-item {
        display: flex;
        flex-direction: column;
        gap: 4px;

        .title-project {
          color: #fff;
          font-size: clamp(18px, 2vw, 20px);
          margin: 0;
          font-weight: 700;
        }

        .description-project {
          color: #ffffff;
          font-size: 16px;
          margin: 0;
          font-weight: 400;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          overflow: hidden;
          -webkit-line-clamp: 2;
          line-clamp: 2;
        }

        .type {
          color: #959595;
          font-size: 12px;
          margin: 0;
          font-weight: 600;
          background-color: #9595953d;
          border-radius: 8px;
          padding: 4px 15px;
          width: fit-content;
        }
      }
    }
  }
}

.sales-page {
  .sales-tabs {
    max-width: 800px;
    border: none;
    margin: 0 auto;

    .sales-tabs-slider {
      width: 100%;
    }

    .swiper-slide {
      padding: 8px;
      transition:
        0.3s color ease-in-out,
        0.3s font-size ease-in-out;
      font-size: clamp(16px, 2.4vw, 24px);
      color: #878d97;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 80px;
      width: auto;
      font-weight: 700;

      a {
        color: #fff;
      }

      &:hover,
      &.custom-active {
        color: #fff;

        a {
          color: #878d97;
        }

        font-size: clamp(18px, 2.4vw, 32px);
        font-weight: 700;
        cursor: pointer;
      }
    }
  }

  .sales-content {
    .sales-content-item {
      display: flex;
      flex-direction: column;
      gap: 24px;

      .sales-items {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        align-content: center;
        place-items: center;
        gap: 24px;
        background: #ffffff14;
        padding: 0;

        .sales-item {
          border-radius: 12px;
          padding: 16px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 16px;

          .image-sales {
            width: 100%;
            border-radius: 8px;
            overflow: hidden;
            display: flex;

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

          .title-sales {
            font-size: clamp(16px, 2vw, 20px);
            font-weight: 700;
            color: #fff;
            margin: 0;
          }
        }
      }
    }
  }
}

.btn-black {
  background: linear-gradient(180deg, #262525 0%, #000000 100%);
  backdrop-filter: blur(24px);
  display: flex;
  align-items: center;
  gap: 10px;
  border: none;
  border-radius: 8px;
  padding: 12px 16px;
  transition: 0.3s all ease-in-out;
}

.btn-black:hover {
  box-shadow: 0 0 10px #262525;
}

.btn-black-2 {
  background: #101010;
  display: flex;
  align-items: center;
  gap: 10px;
  border: none;
  border-radius: 8px;
  padding: 12px 16px;
  transition: 0.3s all ease-in-out;
  border: 1px solid #ffffff;
}

.btn-black-2:hover {
  background-color: #333333;
}

.product-details {
  .header-article {
    display: flex;
    align-items: center;
    flex-direction: row;

    .tabs {
      display: flex;
      align-items: center;
      flex: 1;

      a {
        font-size: clamp(16px, 2vw, 24px);
        color: #fff;
        border: 1.17px solid #0000004d;
      }

      ul {
        display: flex;
        margin: 0;
        font-size: clamp(16px, 2vw, 24px);
        color: #959595;
        padding-inline-start: 47px;
        border: 1.17px solid #0000004d;
      }
    }

    @media (max-width: 992px) {
      flex-wrap: wrap;

      .tabs {
        flex: 1 1 auto;
      }

      .btn {
        flex: 1 1 100%;
        max-width: fit-content;
        margin-left: auto;
      }
    }
  }

  .detail-product {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-block: 40px;

    @media (max-width: 992px) {
      flex-direction: column-reverse;
      align-items: stretch;
      gap: 12px;
    }

    .left-side {
      display: flex;
      flex-direction: column;
      gap: 20px;

      .title-product {
        margin: 0;
        font-size: clamp(20px, 4vw, 42px);
        color: #ffffff;
        font-weight: 700;
      }

      .property-product {
        margin: 0;
        padding: 0;
        list-style: none;
        color: #fff;
        opacity: 0.8;
      }
    }

    .right-side {
      display: flex;
      align-items: center;
      justify-content: center;
      max-width: 600px;
      width: 100%;
      border-radius: 16px;
      overflow: hidden;

      img {
        width: 100%;
        height: auto;
        max-height: 400px;
        object-fit: contain;
      }
    }
  }

  .table-product-details {
    width: 100%;
    overflow-x: auto;

    .dividend-table {
      border-spacing: 16px;
      max-width: 100%;
      width: 100%;
      overflow-x: auto;

      thead tr:nth-child(2) {
        th {
          border-radius: 16px;
          margin-bottom: 8px;
        }
      }

      th,
      td {
        text-align: center !important;
      }
    }
  }

  .additional-features {
    display: flex;
    flex-direction: column;
    gap: 12px;

    .title-additional-features {
      font-weight: 700;
      font-size: clamp(20px, 4vw, 34px);
      color: #ffffff;
    }

    .list-additional-features {
      padding: 0;
      margin: 0;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
      list-style: square;
      list-style-position: inside;

      li {
        font-size: clamp(16px, 2vw, 20px);
        color: #ffffff;
        opacity: 0.8;
        align-items: center;
        background: #ffffff14;
        padding: 16px 32px 16px 64px;
        border-radius: 16px;
        display: flex;
        align-items: center;

        span {
          position: relative;

          &::before {
            content: "";
            position: absolute;
            left: -24px;
            top: 10px;
            width: 8px;
            height: 8px;
            background: #ffffff;
          }
        }
      }

      @media (max-width: 668px) {
        grid-template-columns: 1fr;
      }
    }
  }

  .flow-actions {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: fixed;
    top: 300px;
    left: 60px;

    .btn {
      overflow: hidden;
      width: fit-content;
      gap: 0;

      .icon {
        width: 24px;
        height: 24px;
        display: flex;
        min-width: 24px;
        min-height: 24px;

        img {
          width: 100%;
          height: 100%;
          object-fit: contain;
          transition: 0.3s all ease-in-out;
          filter: grayscale(1);
        }
      }

      .text-action {
        font-size: 14px;
        font-weight: 600;
        color: #fff;
        width: 0px;
        overflow: hidden;
        text-wrap: nowrap;
        transition: 0.3s all ease-in-out;
      }

      &:hover {
        gap: 10px;

        .icon {
          img {
            filter: none;
          }
        }

        .text-action {
          flex: 1;
          width: 100%;
          margin-left: 8px;
        }
      }
    }
  }

  .mobile-actions {
    display: none;

    .btn {
      flex-direction: column;
      flex: 1;
    }
  }

  @media (max-width: 992px) {
    .flow-actions {
      display: none;
    }

    .mobile-actions {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      margin-top: 24px;
    }
  }

  @media (max-width: 668px) {
    .mobile-actions {
      grid-template-columns: repeat(2, 1fr);
    }
  }
}

#comparisonModal {
  .modal-content {
    max-width: 425px;
    border: 1px solid #333333;
    background: #101010;
    border-radius: 16px !important;
    padding: 24px 40px;

    .modal-header {
      text-align: center;
      border: none;
      justify-content: center;

      .modal-title {
        color: #ffffff;
        font-weight: 700;
        font-size: clamp(18px, 2vw, 24px);
      }
    }

    .modal-body {
      padding-left: 0;
      padding-right: 0;

      .num-products {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 32px;
        margin-bottom: 16px;

        .input-content {
          flex: 1;
          display: flex;
          align-items: center;
          border-bottom: 1.5px solid #ffffff80;

          button {
            width: 20px;
            height: 20px;
            padding: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;

            background: rgba(255, 255, 255, 0.4);

            i {
              color: #fff;
              width: 12px;
              height: 14px;
              object-fit: contain;
            }
          }

          input {
            flex: 1;
            background-color: none;
            appearance: none;
            background: none;
            border: none;
            box-shadow: none;

            &::-webkit-inner-spin-button,
            &::-webkit-outer-spin-button {
              appearance: none;
            }
          }
        }
      }

      .form-group {
        display: flex;
        flex-direction: column;
        gap: 8px;
        border-bottom: 1.5px solid #ffffff80;
        padding-block: 8px;
        min-width: 60px;
        margin-bottom: 16px;

        .input-wrapper {
          position: relative;
        }

        input,
        select,
        .select2 {
          font-size: clamp(16px, 2vw, 20px);
          color: #fff;
          background-color: transparent;
          border: none;
          outline: none;

          &::placeholder {
            color: white;
          }
        }

        .select2 {
          width: 100% !important;
          font-size: clamp(16px, 2vw, 20px);

          .select2-selection--single {
            background: transparent;
            border: none;

            .select2-selection__arrow {
              right: 12px;
              top: 50%;
              transform: translateY(-100%);
              width: 12px;
              height: 12px;
              border: solid white;
              border-width: 0 2px 2px 0;
              rotate: 45deg;
            }

            .select2-selection__arrow b {
              display: none;
            }

            .option-content {
              color: #fff;
              display: flex;
              align-items: center;
              gap: 4px;
            }
          }
        }

        .select2-container--default
          .select2-selection--single
          .select2-selection__rendered {
          color: #fff;
        }

        .select2-search__field {
          color: #000;
          font-size: 16px;
        }
      }
    }

    .modal-footer {
      border-top: none;
      padding: 0;
      justify-content: center;
      align-items: stretch;
      gap: 24px;

      .btn {
        margin: 0;
        flex: 1;
        max-width: none;
        display: flex;
        text-align: center;
        align-items: center;
        justify-content: center;
        padding: 12px 16px;
      }
    }
  }
}

.btn-gray {
  background: #333333;
  display: flex;
  align-items: center;
  gap: 10px;
  border: none;
  border-radius: 8px;
  padding: 12px 16px;
  transition: 0.3s all ease-in-out;
  border: none;
}

.btn-gray:hover {
  box-shadow: 0 0 24px 0 #333;
}

.product-comparison {
  .grid-comparison {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 40px;
    gap: 8px;

    .btn-black {
      max-width: none;
      justify-content: center;

      @media (max-width: 778px) {
        flex-direction: column;
      }
    }

    .form-group {
      display: flex;
      flex-direction: column;
      gap: 8px;
      border-bottom: 1.5px solid #ffffff80;
      padding-block: 8px;
      min-width: 60px;
      margin-bottom: 16px;
      width: 100%;

      .input-wrapper {
        position: relative;
      }

      input,
      select,
      .select2 {
        width: 100%;
        font-size: clamp(16px, 2vw, 20px);
        color: #fff;
        background-color: transparent;
        border: none;
        outline: none;

        &::placeholder {
          color: white;
        }
      }

      .select2 {
        width: 100% !important;
        font-size: clamp(16px, 2vw, 20px);

        .select2-selection--single {
          background: transparent;
          border: none;

          .select2-selection__arrow {
            right: 12px;
            top: 50%;
            transform: translateY(-100%);
            width: 12px;
            height: 12px;
            border: solid white;
            border-width: 0 2px 2px 0;
            rotate: 45deg;
          }

          .select2-selection__arrow b {
            display: none;
          }

          .option-content {
            color: #fff;
            display: flex;
            align-items: center;
            gap: 4px;
          }
        }
      }

      .select2-container--default
        .select2-selection--single
        .select2-selection__rendered {
        color: #fff;
      }

      .select2-search__field {
        color: #000;
        font-size: 16px;
      }
    }

    .image-product {
      width: 100%;
      height: 100%;
      background: radial-gradient(
        24.41% 53.72% at 27.51% 46.28%,
        #151318 0%,
        #080609 100%
      );
      border: 1px solid #333333;
      height: 242px;
      border-radius: 18px;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;

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

    .title-section-grid {
      grid-column: span 3;
      text-align: center;
      color: #fff;
      font-weight: 700;
      font-size: clamp(20px, 3vw, 32px);

      span {
        font-weight: 400;
      }
    }

    .item-grid {
      background: #ffffff14;
      border-radius: 16px;
      padding: 16px 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: clamp(16px, 2vw, 18px);
      color: #fff;
      font-weight: 600;
    }

    .see-more-btn {
      display: flex;
      align-items: center;
      gap: 8px;
      background: none;
      color: #959595;
      border: none;
      width: fit-content;
      grid-column: 3 span;
      margin: 10px auto;
      transition: 0.3s all ease-in-out;

      .icon {
        width: 8px;
        height: 16px;
        display: flex;

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

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

.product-inquiry {
  .detail-inquiry {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-block: 40px;

    @media (max-width: 992px) {
      flex-direction: column-reverse;
      align-items: stretch;
      gap: 12px;
    }

    .left-side {
      display: flex;
      flex-direction: column;
      gap: 20px;

      .title-product {
        margin: 0;
        font-size: clamp(20px, 4vw, 42px);
        color: #ffffff;
        font-weight: 700;
      }

      .property-product {
        margin: 0;
        padding: 0;
        list-style: none;
        color: #fff;
        opacity: 0.8;
      }

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

    .right-side {
      display: flex;
      align-items: center;
      justify-content: center;
      max-width: 600px;
      width: 100%;
      border-radius: 16px;
      overflow: hidden;

      img {
        width: 100%;
        height: auto;
        max-height: 400px;
        object-fit: contain;
      }
    }
  }

  .navigation-arrow {
    display: flex;
    align-items: center;
    gap: 32px;

    .btn-navigate {
      background: none;
      border: none;
      width: 27px;
      height: 27px;
    }
  }

  .application-form {
    .btn-white {
      width: 100%;
      max-width: 301px;
      margin-top: 40px;
    }

    .section-form {
      .form-content {
        @media (max-width: 778px) {
          .two-column {
            grid-column: span 4;
          }
        }
      }
    }
  }

  .list-inquiry {
    margin: 40px 0;

    .item-inquiry {
      display: flex;
      justify-content: center;
      align-items: flex-end;
      padding: 30px 12px;
      justify-content: center;
      background: radial-gradient(
        24.41% 53.72% at 27.51% 46.28%,
        #151318 0%,
        #080609 100%
      );
      border: 1px solid #333333;
      border-radius: 18px;
      position: relative;
      height: 242px;
      z-index: 1;
      max-width: 300px;

      .remove-button {
        padding: 0;
        position: absolute;
        width: 25px;
        height: 25px;
        background: none;
        border: none;
        top: 10px;
        right: 10px;
        display: flex;

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

      .image-item {
        display: flex;
        justify-content: center;

        width: calc(100% - 60px);
        height: 100%;
        position: absolute;
        top: 0;
        left: 50%;
        translate: -50% 0;
        z-index: -1;

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

      .title-item {
        font-size: clamp(16px, 2vw, 18px);
        font-weight: 600;
        color: #fff;
        text-align: center;
        margin: 0;
      }
    }
  }
}

.product-inquiry.vendor-registration-page {
  .vendor-category-options .form-check-input[type="checkbox"] {
    border-radius: 0.25rem;
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
  }

  .vendor-company-type-options .form-check-input[type="radio"] {
    border-radius: 50%;
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
  }

  .vendor-option-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }

  .vendor-option-label {
    font-size: clamp(16px, 2vw, 20px);
    font-weight: 600;
    color: #fff;
  }

  .vendor-hint {
    font-weight: 400;
    font-size: clamp(13px, 1.5vw, 16px);
    color: #959595;
  }

  .vendor-inline-options {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    align-items: center;
  }

  .vendor-inline-options .form-check {
    margin: 0;
    padding-left: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .vendor-inline-options .form-check-input {
    margin: 0;
    float: none;
    margin-left: 0;
    flex-shrink: 0;
    cursor: pointer;
  }

  .vendor-inline-options .form-check-label {
    color: #fff;
    font-size: clamp(14px, 1.5vw, 18px);
    cursor: pointer;
  }

  .label-req {
    color: #ff6b6b;
    font-weight: 700;
    font-size: 0.85em;
  }

  .vendor-add-row-wrap {
    display: flex;
    justify-content: flex-start;
    margin-top: 16px;
  }

  .management-contact-row + .management-contact-row {
    margin-top: 0;
  }

  #vendor-mgmt-rows {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
  }

  .vendor-mgmt-section .form-content {
    @media (max-width: 992px) {
      .one-column {
        grid-column: span 4;
      }
    }
  }

  .vendor-mgmt-section .form-content.management-contact-row {
    grid-template-columns: repeat(4, 1fr) auto;
    align-items: end;
  }

  .vendor-remove-row-wrap {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    align-self: end;
    margin: 0;
    padding: 0;
  }

  .vendor-remove-row-wrap[hidden] {
    display: none;
  }

  .vendor-remove-mgmt-row {
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: none;
    border-radius: 50%;
    background: #ff3300;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    /* Sit on the input underline (form-group border-bottom) */
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(255, 51, 0, 0.35);
    transition:
      background-color 0.2s ease,
      box-shadow 0.2s ease,
      transform 0.15s ease;
  }

  .vendor-remove-mgmt-row span {
    display: block;
    line-height: 1;
    /* Optical vertical centering for × glyph */
    transform: translateY(-1px);
  }

  .vendor-remove-mgmt-row:hover,
  .vendor-remove-mgmt-row:focus-visible {
    background-color: #d92c00;
    box-shadow: 0 3px 12px rgba(255, 51, 0, 0.5);
    transform: scale(1.08);
  }

  .vendor-remove-mgmt-row:active {
    transform: scale(0.94);
  }

  .vendor-remove-mgmt-row:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
  }

  select.select-native {
    width: 100%;
    max-width: 100%;
    cursor: pointer;
    appearance: auto;
    -webkit-appearance: menulist;
    min-height: 2.25rem;
    padding: 4px 8px 4px 0;
    background-color: transparent;
    color: #fff;
    border: none;
    outline: none;
    font-size: clamp(16px, 2vw, 20px);
    font-weight: 500;
  }

  select.select-native:focus {
    outline: none;
  }

  select.select-native option {
    background: #1e1e1e;
    color: #fff;
  }

  select.select-native option:disabled {
    color: #959595;
  }
}

.custom-tabs-section {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;

  a {
    color: #fff;
    padding: 8px;
    transition: 0.3s all ease-in-out;
    font-size: clamp(16px, 2.4vw, 24px);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    width: auto;
    font-weight: 700;

    &.active,
    &:hover {
      color: #878d97;
      font-size: clamp(18px, 2.4vw, 32px);
      font-weight: 700;
      cursor: pointer;
    }
  }

  .about-tabs-slider {
    font-size: clamp(18px, 2.4vw, 32px);
    font-weight: 700;
    cursor: pointer;
  }
}

/*****corporate******/
.about-content-item.corporate-governance {
  background-color: transparent !important;
}
.about-content-item.corporate-governance h3 {
  color: #fff;
  font-size: 24px;
  margin-bottom: 32px;
}
.about-content-item.corporate-governance p {
  color: #fff;
  margin-bottom: 32px;
  font-size: 16px;
}
.cookie-content h3 {
  font-size: 32px;
  color: #fff;
  font-weight: 700;
  padding-bottom: 20px;
}
.cookie-content p {
  color: #fff;
  font-size: 16px;
  margin-bottom: 20px;
}
.cookie-content h4 {
  font-size: 20px;
  color: #fff;
  font-weight: 700;
  margin-bottom: 16px;
}
.cookie-content h5 {
  font-size: 18px;
  color: #fff;
  font-weight: 600;
  margin-bottom: 12px;
}
.cookie-content ul {
  margin-bottom: 20px;
}
.cookie-content ul li {
  color: #fff;
  font-size: 16px;
  margin-bottom: 8px;
}
.cookie-content a {
  color: #fff;
}
.cookie-content a:hover {
  color: #9b000e;
  text-decoration: underline;
}
.invest-article h1 {
  color: #fff;
}
.invest-article .invest-img {
  border-radius: 16px;
}
.invest-info ul {
  list-style: none;
  display: flex;
  justify-content: space-between;
  margin-top: 44px;
}
.invest-info ul li {
  background: rgba(51, 51, 51, 0.4);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-direction: column;
  width: 31%;
  height: 250px;
  backdrop-filter: blur(6px);
}
.invest-info ul li h6 {
  color: rgba(149, 149, 149, 1);
  font-size: 20px;
  font-weight: 600;
}
.invest-info ul li p {
  color: #fff;
  font-size: 20px;
  font-weight: 600;
}
@media (min-width: 1200px) and (max-width: 1400px) {
  .swiper-slide {
    font-size: clamp(16px, 2.4vw, 20px) !important;
  }
}
.about-tabs.custom-tabs.corp-tabs .arrow-slide {
  border: 0;
}
.about-content-item.corporate-governance h5 {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}
.about-content-item.corporate-governance .disclosure-table a {
  color: #fff;
  font-size: 16px;
  width: 150px;
  background-color: rgba(83, 83, 83, 0.32);
  border-radius: 5px;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.about-content-item.corporate-governance ul {
  list-style: auto;
  padding-left: 15px;
}
.about-content-item.corporate-governance ul li {
  color: #fff;
  font-size: 16px;
}
.sales-items.download-items {
  background-color: transparent !important;
  display: block !important;
}
.sales-items.download-items .sales-item {
  width: 100%;
}
.select2 {
  width: auto !important;
  font-size: clamp(16px, 2vw, 20px);

  .select2-selection--single {
    background: transparent;
    border: none;

    .select2-selection__arrow {
      right: 12px;
      top: 50%;
      transform: translateY(-100%);
      width: 12px;
      height: 12px;
      border: solid white;
      border-width: 0 2px 2px 0;
      rotate: 45deg;
    }

    .select2-selection__arrow b {
      display: none;
    }

    .option-content {
      color: #fff;
      display: flex;
      align-items: center;
      gap: 4px;
    }
  }
}

.select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  color: #fff;
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-bottom: 1.5px solid #ffffff80;
  padding-block: 8px;
  min-width: 60px;

  input,
  select,
  textarea,
  .select2 {
    font-size: clamp(16px, 2vw, 20px);
    color: #fff;
    background-color: transparent;
    border: none;
    outline: none;

    &::placeholder {
      color: white;
    }
  }

  .select2 {
    width: auto !important;
    font-size: clamp(16px, 2vw, 20px);

    .select2-selection--single {
      background: transparent;
      border: none;

      .select2-selection__arrow {
        right: 12px;
        top: 50%;
        transform: translateY(-100%);
        width: 12px;
        height: 12px;
        border: solid white;
        border-width: 0 2px 2px 0;
        rotate: 45deg;
      }

      .select2-selection__arrow b {
        display: none;
      }

      .option-content {
        color: #fff;
        display: flex;
        align-items: center;
        gap: 4px;
      }
    }
  }

  .select2-container--default
    .select2-selection--single
    .select2-selection__rendered {
    color: #fff;
  }

  .select2-search__field {
    color: #000;
    font-size: 16px;
  }

  .phone-number {
    display: flex;
    align-items: center;
    gap: 24px;

    .select2::before {
      content: "";
      position: absolute;
      top: 50%;
      right: -14px;
      translate: 0 -50%;
      width: 1px;
      height: 24px;
      background: #ffffff;
      z-index: 1;
    }

    & > input {
      flex: 1;
      position: relative;
    }
  }

  .error-msg {
    color: #ff3300;
    display: none;
  }

  &.show-error {
    .error-msg {
      display: block;
    }
  }

  .file-field {
    position: relative;

    input[type="file"] {
      position: absolute;
      inset: 0;
      opacity: 0;
      cursor: pointer;
    }

    .file-field__filename {
      display: inline-block;
      max-width: calc(100% - 90px);
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      text-align: start;
      font-size: clamp(16px, 2vw, 20px);
      font-weight: 400;
      color: #959595;
      pointer-events: none;
    }

    label {
      cursor: pointer;
      font-size: clamp(16px, 2vw, 20px);
      font-weight: 600;
      background: transparent;
      border: none;
      transition: 0.3s all ease-in-out;
      padding: 0;
      position: absolute;
      right: 0;
      top: 50%;
      translate: 0 -50%;
      color: #959595;

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

  &.form-group-with-label {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    border: none;
    padding-block: 0;

    label {
      font-size: clamp(16px, 2vw, 22px);
      font-weight: 600;
      color: #ffffff;
    }

    .select2 {
      flex: 1;
    }

    .file-field label {
      font-size: clamp(16px, 2vw, 20px);
      font-weight: 400;
      color: #959595;
    }

    .input-wrapper {
      border-bottom: 1.5px solid #ffffff80;
      flex: 1;
      display: flex;
      padding-bottom: 8px;

      &:has(.file-field) {
        grid-column: 1 / -1;
        align-items: center;

        .file-field {
          flex: 1;
          display: flex;
        }

        > .file-field:only-child {
          justify-content: flex-start;
        }

        > label + .file-field {
          justify-content: center;
        }
      }
    }
  }
}
.filter-btn {
  background-color: #fff;
  width: 181px;
  height: 40px;
  border-radius: 8px;
  font-size: 14px;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease-in-out;
  border: 1px solid #fff;
  &:hover {
    background-color: transparent;
    color: #fff;
  }
}
.sales-items.invest-items {
  grid-template-columns: repeat(3, 1fr) !important;
  padding: 50px 0 0 0 !important;

  background: transparent !important;
}
.sales-items.invest-items .sales-item {
  align-items: flex-start !important;
  justify-content: flex-start !important;
}
.sales-items.invest-items .sales-item ul {
  list-style: none;
  display: flex;
  justify-content: space-between;
  padding: 0;
  width: 100%;
}
.sales-items.invest-items .sales-item ul li {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

.sales-items.invest-items .sales-item p {
  font-size: 16px;
  color: #fff;
}
.sales-items.invest-items .sales-item h2 {
  font-size: 20px;
  font-weight: 700;
}
.filter-section .form-group {
  width: 60%;
}
.filter-section {
  display: flex;
  align-items: end;
}
textarea {
  font-size: clamp(16px, 2vw, 20px);
  color: #fff;
  background-color: transparent;
  border: none;
  outline: none;
  height: 40px;
}

.sales-items.download-items .box-content .title-box {
  text-align: center;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  padding-bottom: 16px;
}
.sales-items.download-items .box-content .body-box p {
  color: #fff;
  font-size: 16px;
  text-align: center;
  margin-bottom: 32px;
}
.sales-items.download-items .disclosure-table a {
  color: #fff;
  transition: all 0.3s ease-in-out;
}
.sales-items.download-items .disclosure-table th:last-of-type {
  text-align: end;
}
.sales-items.download-items .disclosure-table a:hover {
  color: #9b000e;
}
.sales-item .about-tabs.custom-tabs .swiper-slide {
  width: auto !important;
}
.sales-items.download-items .list-certifications {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.sales-items.download-items .list-certifications {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
@media (max-width: 1400px) {
  .sales-items.download-items .list-certifications {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 992px) {
  .sales-items.download-items .list-certifications {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 768px) {
  .sales-items.download-items .list-certifications {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 575px) {
  .sales-items.download-items .list-certifications {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
  }
}
.sales-items.download-items .list-certifications .certifications-name {
  color: #fff;
  font-size: 16px;
}

.sales-items.download-items .list-certifications .btn-download {
  color: #fff;
}

.sales-items.download-items .list-certifications {
  align-items: stretch;
}

.sales-items.download-items .list-certifications .item-certifications {
  display: flex;
  min-width: 0;
}

.sales-items.download-items .list-certifications .inner-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
}

.sales-items.download-items .list-certifications .certifications-name {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 48px;
  margin-bottom: 0;
}

.sales-items.download-items .list-certifications .btn-download {
  margin-top: auto;
}

/* Global values (inlined from SCSS) */

.radio-btns {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 20px;
  width: 20%;
  margin-top: 15px;
}
/* Base reset for the checkboxes you provided (adjust selectors if needed) */
.toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  /* ensure layout doesn't shift when toggling */
}

/* Hide the native checkbox but keep it accessible for screen readers */
.toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
}

/* The visible circular track (outer circle) */
.toggle .circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #555; /* outer ring color */
  display: inline-block;
  position: relative;
  background: transparent;
  transition: border-color 0.2s ease;
}

/* Inner dot that appears when checked */
.toggle input[type="checkbox"]:checked + label .circle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: #777; /* gray dot inside when checked */
}

/* Optional: subtle color change on hover/focus for accessibility */
.toggle:hover .circle,
.toggle input[type="checkbox"]:focus + label .circle {
  border-color: #333;
}

/* Space for the text label (you already have a span with class "text") */
.toggle .text {
  font-family: inherit;
  font-size: 14px;
  color: #fff;
}

/* Ensure the entire label acts as the clickable area for accessibility */
.toggle label.overlay {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* If you want the gray dot to only appear on check for the first example */
/* No extra rules needed beyond the :checked rule above. */

/* Optional: reflect the checked state by changing the ring color when active */
.toggle input[type="checkbox"]:checked + label .circle {
  border-color: #666;
}
.sales-lists {
  display: flex;
  justify-content: space-between;
}
.sales-lists ul {
  list-style: none;
}
.contact-us .nav-tabs .nav-link {
  background-color: #333;
  color: #fff;
  border-radius: 8px;
  font-size: 20px;
  font-weight: 600;
}
.contact-us .nav-tabs {
  gap: 10px;
  border-bottom: 0;
}
.bg-dark {
  background-color: rgba(255, 255, 255, 0.08) !important;
}
.accordion-item .accordion-button {
  background-color: transparent !important;
}
.contact-us .nav-tabs .nav-link.active {
  background-color: #fff;
  color: #959595;
  font-weight: 700;
}
.accordion-item {
  margin-bottom: 40px;
  border-radius: 9px;
}
.accordion-item:first-of-type {
  border-top-left-radius: 9px;
  border-top-right-radius: 9px;
}
.contact-inquiry .application-form {
  margin-top: 0;
}
.map-content {
  margin-top: 40px;
}
@media (max-width: 768px) {
  .contact-us .two-column {
    grid-column: span 4 !important;
  }
  .about-content-item.corporate-governance .left-side {
    overflow-x: scroll;
  }
  .contact-us .accordion-button {
    padding: 20px;
  }
  .contact-us .nav-tabs {
    flex-direction: column;
  }
  .contact-us .accordion-item .accordion-body {
    padding: 0 20px 20px 20px;
  }
  .contact-info,
  .contact-inquiry {
    padding: 20px;
  }
}
.about-content-item.corporate-governance .disclosure-table a {
  float: inline-end;
}
.about-content-item.corporate-governance .disclosure-table th:last-of-type {
  text-align: end;
}
.contact-us .application-form input,
.contact-us .application-form textarea {
  font-size: 18px !important;
}
.contact-us .application-form input::placeholder,
.contact-us .application-form textarea::placeholder {
  font-size: 18px !important;
}
@media (min-width: 1200px) {
  .mobile-num {
    width: 120px;
  }
}
.contact-us .application-form .form-content {
  display: grid;
  gap: 30px 10px;
}
@media (max-width: 1200px) {
  .sales-items.invest-items {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .filter-section {
    gap: 16px;
    flex-direction: column;
    align-items: flex-start;
  }
  .sales-page {
    & .sales-content {
      & .sales-content-item {
        .sales-items {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
        }
      }
    }
  }
  .radio-btns {
    justify-content: flex-start;
    width: auto;
    margin-top: 0;
  }
  .filter-section .form-group {
    width: 100%;
  }
}
@media (max-width: 768px) {
  .sales-items.invest-items {
    grid-template-columns: repeat(1, 1fr) !important;
  }
  .products-pagination .pagination-items {
    gap: 10px;
  }
  .dividend-table {
    td {
      background-color: #141414;
      padding-block: 8px;
    }
  }
  .table-content-ir {
    overflow-x: scroll;
  }
  .table-content-ir table {
    width: auto;
  }
  .section-heading {
    font-size: 26px;
    margin-bottom: 20px;
  }
  .sales-page {
    & .sales-content {
      & .sales-content-item {
        .sales-items {
          display: grid;
          grid-template-columns: repeat(1, 1fr);
        }
      }
    }
  }
  .invest-info ul {
    flex-direction: column;
  }
  .invest-info ul li {
    width: 100%;
    margin-bottom: 20px;
  }
  .disclosure-table td {
    padding: 10px 10px;
    border-bottom: 1px dashed #ffffff52;
    font-weight: 600;
    font-size: 14px;
  }
  .sales-items.download-items {
    padding: 0 !important;
  }
}
.sales-items.invest-items .sales-item ul {
  margin-bottom: 0;
}
.invest-info ul {
  padding-left: 0;
}
.invest-article p {
  font-size: 16px;
  color: #fff;
  margin-bottom: 20px;
}
.invest-article h1 {
  font-size: 40px;
  font-weight: 700;
  color: #fff;
}
.years-tab .arrow-slide {
  border: 0;
}
.sales-item .about-content-item {
  background-color: transparent !important;
}
.about-tabs.years-tab .swiper-slide {
  background-color: #fff;
  border-radius: 8px;
  height: 40px;
  color: #000;
  font-weight: 400;
}
.about-tabs.years-tab .swiper-slide.active {
  color: #959595 !important;
  font-weight: 700 !important;
}
/* .sales-tabs.custom-tabs.down-tabs{
max-width: 800px;
} */
.body-vacancies .accordion-button.collapsed .column-title {
  font-size: 16px;
  color: #959595;
  font-weight: 600;
}
.body-vacancies .accordion-button .column-title {
  font-size: 16px;
  color: #fff;
  font-weight: 600;
}
.careers-page .body-vacancies .header-accordion-vacancies .column-title,
.careers-page .body-vacancies #accordion-vacancies .accordion-button .column-title {
  justify-self: stretch;
  text-align: start;
}
.info-item p {
  font-size: 18px;
  color: #fff;
}
@media (max-width: 992px) {
  .application-form {
    & .section-form {
      .form-content {
        display: grid;
        grid-template-columns: repeat(2, 1fr) !important;
      }
    }
  }
  .sales-lists ul li:not(:first-of-type) span:first-of-type,
  .sales-lists ul li span:last-of-type {
    font-size: 14px;
    width: 100px;
  }
  .sales-lists ul li span:first-of-type {
    font-size: 14px;
  }
  .inner-banner .right {
    display: none;
  }
  .disclosure-table th {
    padding: 15px;
  }
  .report-content {
    flex-direction: column;
    align-items: flex-start !important;
  }
}
.news-article {
  .attachments {
    h3 {
      color: #fff;
      font-size: 32px;
      font-weight: 700;
    }
  }
}
@media (max-width: 768px) {
  .application-form {
    & .section-form {
      .form-content {
        display: grid;
        grid-template-columns: repeat(1, 1fr) !important;
      }
    }
  }
  .news-article {
    .attachments {
      h3 {
        color: #fff;
        font-size: 22px;
        font-weight: 700;
      }
    }
  }
  .info-item p {
    font-size: 16px;
  }
  .dividend-table {
    th,
    td {
      font-size: 12px;
    }
  }
  .share-column {
    .top,
    .bottom {
      min-height: 50px;
    }
  }
  .radio-group {
    gap: 20px;
  }
  .custom-radio {
    span {
      font-size: 14px;
    }
  }
  .contact-info h4,
  .contact-inquiry h4 {
    padding-bottom: 20px;
    font-size: 22px;
  }
  .shareholders-column {
    .animate-number-container {
      font-size: 34px;
      margin-bottom: 20px;
    }
  }
  .reports-content {
    flex-wrap: wrap;
  }
  .application-form {
    & .section-form {
      .groups-language {
        display: grid;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px 10px;
      }
    }
  }
  .invest-article h1 {
    font-size: 30px;
  }
  .invest-info ul li {
    height: 200px;
  }
  .inner-banner {
    & .left {
      .heading {
        font-size: 40px;
      }
    }
  }
  .dividend-table {
    th {
      padding: 9px;
      vertical-align: baseline;
      font-size: 14px;
    }
  }
  .application-form {
    & .section-form {
      .title-section-form {
        font-size: clamp(24px, 3vw, 32px);
        margin-top: 0 !important;
      }
    }
  }
}
.info-item p a {
  color: #fff !important;
}
.custom-radio {
  span {
    text-transform: capitalize;
  }
}

.footer .form-control::placeholder {
  text-transform: capitalize;
}

html[dir="rtl"] .footer .form-control::placeholder,
html[lang="ar"] .footer .form-control::placeholder {
  text-transform: none;
}
.financial-report-item {
  .report-content {
    text-transform: capitalize;
  }
}
.blog .blog-item .blog-content {
  padding: 10px;
  height: 250px;
}
.footer .btn.btn-light {
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 1400px) {
  .custom-tabs .swiper-slide.custom-active {
    font-size: 19px;
    padding-inline: 0;
  }
}

@media (max-width: 420px) {
  .application-form {
    & .section-form {
      .groups-language {
        display: grid;
        grid-template-columns: repeat(1, 1fr) !important;
        gap: 20px 10px;
      }
    }
  }
  .footer .btn.btn-light {
    margin-right: 0.2rem !important;
    font-size: 14px;
  }
  .application-form {
    & .section-form {
      & .form-content {
        .two-column {
          grid-column: span 4;
        }
      }
    }
  }
}
.navbar .navbar-nav .nav-item,
.navbar .navbar-nav .dropdown-item {
  cursor: pointer;
  text-transform: capitalize;
}
@media (min-width: 575px) {
  .inner-banner .page-container {
    padding-inline: 0 !important;
  }
}
.language-menu .dropdown-menu {
  min-width: 7rem !important;
}

.shareholders-column {
  text-align: center;
}
.shareholders-column {
  .animate-number-container {
    font-weight: 400;
    margin-bottom: 20px;
  }
}

@media (min-width: 1400px) {
  .custom-tabs .swiper-slide {
    font-size: 18px;
    min-width: 220px;
  }

  .custom-tabs .swiper-slide.custom-active {
    font-size: 20px;
  }
}
@media (min-width: 1200px) and (max-width: 1400px) {
  .navbar .navbar-nav .nav-item {
    margin-right: 10px;
    font-size: 0.85rem;
  }
  .blog .blog-item .blog-heading {
    height: 100px;
  }
  .blog .blog-item .blog-heading a {
    font-size: 20px;
  }
  .blog .blog-item .blog-content {
    height: 300px;
  }
}
.about-page {
  & .about-content {
    & .about-content-item {
      &.vision-mission {
        & .inner-content {
          & .card-vision-mission {
            & .body-card {
              ul {
                padding: 0;
                list-style-position: inside;
              }
            }
          }
        }
      }
    }
  }
}
.language-button:hover {
  color: #9b000e !important;
}
.accordion-button:focus {
  border-color: transparent;
  box-shadow: none;
}
.grey-btn,
.white-btn {
  text-transform: capitalize;
}
@media (max-width: 1200px) {
  .blog .blog-item .blog-heading {
    height: 120px;
  }
  .blog .blog-item .blog-heading a {
    font-size: 20px;
  }
  .blog .blog-item .blog-content {
    padding: 10px;
    height: 300px;
  }
  .blog .blog-item .blog-content p {
    font-size: 13px;
  }
}
@media (min-width: 1200px) {
  .blog .blog-item .blog-content .blog-desc-main {
    height: 135px;
  }
}
.date-field {
  position: relative;
}
.date-field:after {
  cursor: pointer;
  width: 40px;
  position: absolute;
  height: 100%;
  background-position: calc(100% - 12px) center;
  background-image: url(../img/calendar.svg);
  background-size: 24px;
  content: "";
  right: 0;
  top: 10%;
  background-repeat: no-repeat;
  z-index: 0;
}
.date-field input {
  z-index: 1;
}
.date-field input::placeholder {
  z-index: 8;
}
#ui-datepicker-div {
  z-index: 11000 !important;
}
@media (max-width: 768px) {
  .subscribe-field {
    background-color: transparent;
    border: 0;
  }
  .subscribe-field .newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .subscribe-field button {
    width: 100%;
    margin: 0 !important;
    position: static !important;
    height: 50px;
  }
  .subscribe-field input {
    border: 1px solid #ced4da;
    padding: 10px 12px !important;
    height: 50px;
  }
  .subscribe-field input::placeholder {
    font-size: 12px;
  }
  .careers-page {
    #accordion-vacancies {
      gap: 5px;
    }
  }
  .procurement-page {
    & .disclosure-table {
      th {
        padding: 10px !important ;
      }
    }
  }
  .procurement-page .disclosure-table th:nth-child(2),
  .procurement-page .disclosure-table td:nth-child(2),
  .procurement-page .disclosure-table th:last-child {
    text-align: start !important;
  }

  .careers-page {
    & .current-vacancies {
      & .header-section {
        & .filter-section {
          & .list-filter {
            li {
              max-width: 100%;
              min-width: 200px;
            }
          }
        }
      }
    }
  }
  /* .list-filter{
                  flex-direction: column;
                } */
  .careers-page {
    & #accordion-vacancies {
      & .accordion-item {
        & .accordion-header {
          .accordion-button {
            align-items: baseline;
          }
        }
      }
    }
  }
  .accordion-item .column-title {
    font-size: 14px;
  }
  .accordion-button .column-title,
  .header-accordion-vacancies .column-title {
    font-size: 14px !important;
  }
  .careers-page {
    & #accordion-vacancies {
      & .accordion-item {
        & .accordion-header {
          .accordion-button::after {
            width: 20px;
            height: 20px;
            background-image: url(../img/minus.svg);
            background-position: center center;
            background-color: #ffffff14;
            border-radius: 50%;
            background-size: 12px;
          }
        }
      }
    }
  }
  .accordion-item {
    margin-bottom: 15px;
  }
}
.category-item {
  text-transform: capitalize;
}
.sustainability {
  background: transparent;
  padding: 0;

  &.inner-content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px;

    .card-sustainability {
      flex: 1 1 300px;
      max-width: 600px;
      background: #fff;
      border-radius: 8px;
      padding: 50px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;

      .header-card {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 16px;

        .icon {
          width: 88px;
          height: 88px;
          display: flex;
          align-items: center;
          justify-content: center;

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

        .title {
          font-weight: 700;
          color: #000;
          margin: 0;
          font-size: clamp(18px, 2vw, 20px);
        }
      }

      .body-card {
        font-size: 16px;
        font-weight: 400;
        margin: 0;
        color: #000;
        max-width: 529px;
        text-align: start;

        ul {
          display: flex;
          flex-direction: column;
          margin: 0;
          list-style: square;
        }

        a {
          color: #000;
        }
      }

      &:first-child {
        flex: 1 1 100%;
        flex-direction: row;
        justify-content: space-between;
        max-width: 100%;

        .header-card {
          flex-direction: row;

          .icon {
            width: 47px;
            height: 47px;
          }

          .title {
            font-size: clamp(18px, 2vw, 32px);
          }
        }

        .body-card {
          max-width: 700px;
        }
      }
    }
  }
}
.financial-report-item {
  & .report-content {
    .left {
      flex-grow: 1;
    }
  }
}
.financial-report-item {
  & .report-content {
    & .left {
      p:last-child {
        display: none;
      }
    }
  }
}
.financial-report-item {
  & .report-content {
    & .right,
    & .mid {
      & > p:first-child {
        display: none;
      }
    }
  }
}
.financial-report-item {
  & .report-content {
    & .left {
      p:first-child {
        margin-bottom: 0;
      }
    }
  }
}
.financial-report-item {
  & .report-content {
    align-items: center;

    .left {
      > .financial-report-row,
      > div {
        display: grid;
        grid-template-columns: 130px minmax(0, 1fr);
        gap: 24px 40px;
        align-items: center;
        width: 100%;
      }

      .financial-report-label,
      > div > p:first-child {
        margin-bottom: 0;
      }
    }

    .download-items {
      margin-bottom: 0;
      padding-left: 0;
      list-style: none;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px 24px;
      width: 100%;

      li,
      .download-item {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        align-items: center;
        gap: 10px;
        min-width: 0;
      }
    }
  }
}
@media (max-width: 991px) {
  .financial-report-item {
    & .report-content {
      & .left {
        > .financial-report-row,
        > div {
          grid-template-columns: 1fr;
          gap: 16px;
        }

        p:first-child {
          font-size: 16px;
        }
      }

      .download-items {
        grid-template-columns: 1fr;
        gap: 15px;
      }
    }
  }
}
.about-invest {
  margin: 30px 0 0;
}
.about-invest p {
  color: #fff;
  font-size: 18px;
  margin-bottom: 20px;
}
.about-invest h2 {
  color: #fff;
  padding-bottom: 30px;
}
.ceo-message .right-side p {
  margin-bottom: 10px;
}
.sales-items.invest-items .sales-item ul {
  /* flex-direction: column; */
  flex-wrap: wrap;
}
.sales-items.invest-items .sales-item p {
  font-size: 16px;
  color: #fff;
  /* display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden; */
}
.sales-items.invest-items .sales-item {
  padding: 16px 0!important;
}

:root {
    --primary-red: #9b000e;
    --light-grey: #f4f4f4;
    --border-grey: #ccc;
}




/* Stepper */
.stepper { display: flex; justify-content: space-between; margin-bottom: 50px; position: relative; }
.stepper::before { content: ""; position: absolute; top: 15px; left: 0; right: 0; height: 1px; background: var(--border-grey); z-index: 0; }

.step { background: white; padding: 0 10px; color: #888; display: flex; align-items: center; gap: 10px;z-index: 1; }
.step span { width: 30px; height: 30px; border: 1px solid var(--border-grey); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.step.active { color: #000; font-weight: bold; }
.step.active span { background: var(--primary-red); border-color: var(--primary-red); color: white; }

/* Layout */
#drumForm .row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
#drumForm .field { display: flex; flex-direction: column; margin-bottom: 15px; }
#drumForm label { font-size: 0.9rem; margin-bottom: 5px; font-weight: 500;cursor: pointer; }
#drumForm input,#drumForm select,#drumForm textarea { padding: 10px; border: 1px solid var(--border-grey); border-radius: 4px; }

#drumForm .hidden { display: none; }

/* Buttons */
#drumForm button { cursor: pointer; padding: 12px 30px; border-radius: 0; border: none; font-weight: bold;transition: all 0.3s ease; }
 #drumForm .btn-next,#drumForm .btn-submit { background: var(--primary-red); color: white;transition: all 0.3s ease; }
 #drumForm .btn-back { background: white; border: 1px solid var(--border-grey);color: #000;font-size: 16px; transition: all 0.3s ease; }
 #drumForm .btn-add { background: none; color: black; text-align: left; padding: 0; margin-bottom: 20px; transition: all 0.3s ease; }
 #drumForm .btn-new { background: white; border: 1px solid var(--border-grey); border-radius: 0; margin-top: 20px; transition: all 0.3s ease;}
 #drumForm .form-success-panel .btn-new {
  background: #9b000e;
  border: 1px solid #9b000e;
  color: #fff;
  font-weight: 700;
  min-width: 150px;
  padding: 12px 22px;
  margin-top: 24px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
 }
 #drumForm .form-success-panel .btn-new:hover {
  background: #fff;
  color: #9b000e;
 }

 #drumForm .text-center { text-align: center; padding: 50px 0; }
 #drumForm .thank-you { font-size: 2.5rem; }
 .drum-form-page{
  padding: 40px;
 }
 .inner-page-content.drum-form-page h1{
  margin-bottom: 40px;
 }
 @media (max-width:991px) {
  #drumForm .row{
    grid-template-columns: 1fr;
  }
  .navbar .btn.btn-primary.contact-btn{
    width: 200px;
    margin: 12px;
  }
  .stepper { flex-direction: column; align-items: flex-start; gap: 20px; }
.stepper::before{
  display: none ;
}
.drum-form-page{
  padding: 20px;
}
#drumForm .text-center{
  padding: 20px 0;
}
 #drumForm .thank-you { font-size: 2rem; }

 }
 .form-step .button-group {
  display: flex;
  margin-top: 20px;
  gap: 10px;
 }
 body{
  min-height: 100vh;
  flex-direction: column;
  display: flex;
 }
 .footer{
  position: sticky;
  top: 100%;
 }
 /* Flex body stretches header and breaks position:sticky on inner pages */
 body > .header-top {
  position: sticky;
  top: 0;
  align-self: flex-start;
  width: 100%;
  flex-shrink: 0;
  z-index: 1000;
  background-color: #fff;
 }
 #drumForm .btn-submit:hover,
 #drumForm .btn-next:hover{
  background-color: #fff;
  color: var(--primary-red);
    border:1px solid var(--primary-red);

 }
 #drumForm .btn-back:hover{
  background-color: var(--primary-red);
  color: #fff;
  border-color: var(--primary-red);
 }
 .btn-add:hover{
  color: var(--primary-red);
 }
 #drumForm .btn-new:hover{
  background-color: var(--primary-red);
  color: #fff;
  border-color: var(--primary-red);
 }
 .sales-items.invest-items .image-sales img{
  object-fit: contain!important;
  background-color: #616161;
  height: 250px!important;

 }
  #drumForm  .radio-group label{
    margin-bottom: 0;
  }
  .footer .btn.btn-light:hover {
    color: var(--bs-white);
    background: var(--bs-primary);
}
  .footer .btn.btn-light:hover .nav-link{
    color: var(--bs-white);
  }
  .footer .form-group{
    padding-inline: 0;
  }

  .btn,
  .contact-us .nav-tabs .nav-link{
    border-radius: 0!important;
  }

   .media-page {
    & .media-content {
        & .list-gallery-media {
            & .item-media {
                &::before {
                  display: none;
                }}}}}
  .media-page {
    & .media-content {
        & .list-gallery-media {
            & .item-media {
                &::after {
                  display: none;
                }}}}}
                .media-page {
    & .media-content {
        & .list-gallery-media {
            & .item-media:hover img {
                transform: scale(1.05);
                transition: all 0.3s ease-in-out;
            }
        }
    }
}
  & .media-content {
        & .list-gallery-media {
            & .item-media{ img {
                transition: all 0.3s ease-in-out;
            }
        }
    }}