@font-face {
  font-family: "GothamPro";
  src: url("../fonts/Gotham-Pro/gothampro.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "GothamPro";
  src: url("../fonts/Gotham-Pro/gothampro_light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "GothamPro";
  src: url("../fonts/Gotham-Pro/gothampro_bold.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: "GothamPro";
  src: url("../fonts/Gotham-Pro/gothampro_black.ttf") format("truetype");
  font-weight: 1000;
  font-style: normal;
}
@font-face {
  font-family: "GothamPro";
  src: url("../fonts/Gotham-Pro/gothampro_medium.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}
.reset {
  margin: 0;
  padding: 0;
}

.reset-list {
  list-style: none;
}

.reset-margin {
  margin: 0;
}

.reset-padding {
  padding: 0;
}

.reset-link {
  text-decoration: none;
  color: black;
}

.reset-underscore {
  text-decoration: none;
}

.hard-reset {
  all: unset;
}

p,
h1,
h2 {
  margin: 0;
}

a {
  text-decoration: none;
}

h1 {
  font-size: 40px;
  line-height: 48px;
  font-weight: 900;
  color: black;
}

h2 {
  font-weight: 900;
  font-size: 28px;
  line-height: 33.6px;
}

p.paragraph-title {
  font-weight: normal;
  size: 18px;
  line-height: 23.4px;
}

h4 {
  font-size: 16px;
  font-weight: 900;
  line-height: 19.2px;
}

.text-main {
  color: #eb2765;
}

.bg-main {
  background-color: #eb2765;
}

.text-gray-top-title {
  color: #d9d9d9;
}

.bg-gray-top-title {
  background-color: #d9d9d9;
}

.text-gray-title-navigation {
  color: #f1f1f1;
}

.bg-gray-title-navigation {
  background-color: #f1f1f1;
}

.text-black {
  color: #000000;
}

.bg-black {
  background-color: #000000;
}

.text-white {
  color: #ffffff;
}

.bg-white {
  background-color: #ffffff;
}

.text-wa {
  color: #29a71a;
}

.bg-wa {
  background-color: #29a71a;
}

.text-links {
  color: #357fa5;
}

.bg-links {
  background-color: #357fa5;
}

footer {
  display: flex;
  flex-direction: column;
  justify-content: end;
  z-index: 400;
}

img#whatsapp {
  position: fixed;
  z-index: 1100;
  right: 43px;
  top: 558px;
}

div#bg-certificate {
  background-image: url("../images/footer/bg-certificate.png");
  text-decoration: none;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
div#bg-certificate ul.certificate-logo-list {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  place-items: center;
  max-width: 1350px;
  margin-inline: auto;
  width: 100%;
  min-height: 155px;
}
div#bg-certificate ul.certificate-logo-list .cert-filter {
  opacity: 0.7;
}

div#bg-footer {
  position: relative;
  background-image: url("../images/footer/bg-footer.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 318px;
  width: 100%;
  border-top: 6px solid #eb2765;
}
div#bg-footer .back-to-top {
  position: absolute;
  right: 147px;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-inline: 1px solid #eb2765;
  border-bottom: 1px solid #eb2765;
  padding-top: 2px;
  padding-bottom: 4px;
  padding-inline: 8px;
}
div#bg-footer:before {
  content: "";
  position: absolute;
  width: 100%;
  min-height: 100%;
  background-color: rgba(255, 255, 255, 0.9);
}
div#bg-footer div#first-row {
  display: flex;
  gap: 20px;
  justify-content: center;
  padding-top: 60px;
  padding-bottom: 20px;
}
div#bg-footer div#first-row div.section-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 15px;
}
div#bg-footer div#first-row div#first-section {
  position: relative;
  font-size: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 400;
}
div#bg-footer div#first-row div#first-section .logo {
  z-index: 200;
  max-width: 174px;
  max-height: 43px;
}
div#bg-footer div#first-row div#first-section h2#brand-title {
  text-align: left;
}
div#bg-footer div#first-row div#first-section .social-media-container {
  display: flex;
  gap: 15px;
}
div#bg-footer
  div#first-row
  div#first-section
  .social-media-container
  .sosmed-logo {
  height: 30.65px;
}
div#bg-footer div#first-row div#second-section {
  position: relative;
  z-index: 600;
  font-size: 13px;
  display: flex;
  gap: 15px;
}
div#bg-footer div#first-row div#second-section h4.footer-address-title {
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 900;
}
div#bg-footer div#first-row div#second-section .list-address {
  list-style: none;
}
div#bg-footer
  div#first-row
  div#second-section
  .list-address
  .detail-address-main {
  max-width: 302px;
}
div#bg-footer
  div#first-row
  div#second-section
  .list-address
  .detail-address-factory {
  max-width: 280px;
}
div#bg-footer div#first-row div#second-section .location {
  display: flex;
  gap: 5px;
  align-items: center;
}
div#bg-footer div#first-row div#second-section .location .location-text {
  text-decoration: underline rgb(0, 0, 0) 0.4px;
  font-weight: 900;
}
div#bg-footer div#first-row div#third-section {
  position: relative;
  z-index: 600;
  font-size: 13px;
  display: flex;
  gap: 15px;
}
div#bg-footer div#first-row div#third-section .footer-address-title {
  font-size: 16px;
  font-weight: 900;
  margin-bottom: 8px;
}
div#bg-footer div#first-row div#third-section .list-address {
  list-style: none;
}
div#bg-footer
  div#first-row
  div#third-section
  .list-address
  .detail-address-main {
  max-width: 302px;
}
div#bg-footer
  div#first-row
  div#third-section
  .list-address
  .detail-address-factory {
  max-width: 280px;
}
div#bg-footer div#first-row div#third-section .location {
  display: flex;
  gap: 5px;
  align-items: center;
}
div#bg-footer div#first-row div#third-section .location .location-text {
  text-decoration: underline rgb(0, 0, 0) 0.4px;
  font-weight: 900;
}
div#bg-footer div#first-row div#fourth-section {
  position: relative;
  z-index: 400;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  border-collapse: collapse;
  gap: 8px;
}
div#bg-footer div#first-row div#fourth-section .footer-address-title {
  font-size: 16px;
  font-weight: 900;
}
div#bg-footer div#first-row div#fourth-section .list-contact {
  list-style: none;
}
div#bg-footer div#first-row div#fourth-section .list-contact .footer-email {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
}
div#bg-footer div#second-row {
  width: 100%;
  border-top: 1px solid rgb(199, 199, 199);
  z-index: 300;
  position: relative;
  height: 100%;
}
div#bg-footer div#second-row div.content-container {
  display: flex;
  height: 100%;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  max-width: 1250px;
  margin-inline: auto;
  margin-top: 20px;
}
div#bg-footer div#second-row p.copyright {
  font-size: 12px;
}

@media screen and (max-width: 1280px) {
  div#bg-footer div#first-row div.section-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px 80px;
  }
  div#bg-footer div#first-row div#second-section {
    order: 4;
  }
  div#bg-footer div#first-row div#third-section {
    order: 3;
  }
  div#bg-footer div#first-row div#fourth-section {
    order: 2;
  }
  div#bg-footer div#second-row div.content-container {
    display: flex;
    height: 100%;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    max-width: 750px;
    margin-inline: auto;
    margin-top: 20px;
  }
  div#bg-footer div#second-row p.copyright {
    font-size: 12px;
  }
  div#bg-certificate ul.certificate-logo-list {
    padding-block: 30px;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px;
  }
  div#bg-certificate ul.certificate-logo-list .cert-filter {
    opacity: 0.7;
  }
}
@media screen and (max-width: 1200px) {
  .container-catalog-preview {
    width: 100%;
    height: 450px;
    margin-top: 1rem;
    display: flex;
    justify-content: start !important;
    overflow-x: auto;
    overflow-y: auto;
  }
}
@media screen and (max-width: 720px) {
  #home__article-swiper .swiper-slide {
    /* width: 100% !important; */
    padding-left: 3rem;
    padding-right: 3rem;
    transition: all 0.3s;
  }
  div#bg-footer div#first-row div.section-container {
    text-align: center;
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
    gap: 30px 30px;
  }
  div#bg-footer div#first-row div#first-section {
    text-align: center;
    justify-content: center;
    align-items: center;
    place-self: center;
  }
  div#bg-footer div#first-row div#first-section h2#brand-title {
    text-align: center;
  }
  div#bg-footer div#first-row div#second-section {
    order: 4;
  }
  div#bg-footer div#first-row div#second-section .location {
    justify-content: center;
  }
  div#bg-footer div#first-row div#third-section {
    order: 3;
  }
  div#bg-footer div#first-row div#third-section .location {
    justify-content: center;
  }
  div#bg-footer div#first-row div#fourth-section {
    order: 2;
  }
  div#bg-footer div#second-row div.content-container {
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    max-width: 1250px;
    margin-inline: auto;
    margin-top: 20px;
  }
  div#bg-footer div#second-row p.copyright {
    font-size: 12px;
  }
}
@media screen and (max-width: 540px) {
  div#bg-certificate ul.certificate-logo-list {
    grid-template-columns: 1fr 1fr;
    gap: 30px 0px;
  }
  div#bg-certificate ul.certificate-logo-list .cert-filter {
    opacity: 0.7;
  }
}

/* nav#navbar {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  background-color: #fff;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 300;
  background-color: white;
}
nav#navbar .logo {
  margin-right: 25px;
}
nav#navbar div#left-section {
  padding-left: 80px;
  padding-top: 18px;
  padding-bottom: 20px;
  box-sizing: content-box;
  margin-right: 16px;
}
nav#navbar div#left-section h2#brand-title {
  padding-left: 10px;
  padding-block: 2px;
  border-left: 1px solid black;
  line-height: 1;
}
nav#navbar div#right-section {
  position: relative;
  display: flex;
  flex-direction: column;
  z-index: 500;
  width: 100%;
  font-size: 16px;
}
nav#navbar div#right-section div#above-white {
  height: 100%;
}
nav#navbar div#right-section div#above-white div#content {
  padding-right: 80px;
  height: 100%;
  width: 100%;
  font-size: 16px;
  position: relative;
}
nav#navbar div#right-section div#above-white div#content .nav-menu {
  height: 100%;
  width: 100%;
  flex-grow: 1;
  list-style: none;
}
nav#navbar
  div#right-section
  div#above-white
  div#content
  .nav-menu
  .menu-container {
  justify-content: center;
}
nav#navbar div#right-section div#below-red {
  position: relative;
  overflow: visible;
  height: 100%;
  font-weight: 700;
  color: white;
  z-index: 700;
}
nav#navbar div#right-section div#below-red:before {
  content: "";
  background-color: white;
  transform: skewX(-35deg) translate(-50px, 0);
  width: 70px;
  height: 101%;
  position: absolute;
  z-index: 400;
}
nav#navbar div#right-section div#below-red div#content {
  padding-right: 80px;
  height: 100%;
  width: 100%;
  position: relative;
}
nav#navbar div#right-section div#below-red div#content ul.nav-menu {
  position: relative;
  height: 100%;
  width: 100%;
  list-style: none;
  align-items: center;
  gap: 50px;
}
nav#navbar
  div#right-section
  div#below-red
  div#content
  ul.nav-menu
  .button-menu {
  display: flex;
}
nav#navbar
  div#right-section
  div#below-red
  div#content
  ul.nav-menu
  .button-menu
  .button-order {
  border-radius: 35px;
  font-size: 16px;
  padding-inline: 20px;
  padding-block: 3px;
  font-weight: 700;
}
nav#navbar
  div#right-section
  div#below-red
  div#content
  ul.nav-menu
  .button-menu
  .hamburger-icon {
  border-inline: 1px white solid;
  height: max-content;
}
nav#navbar div#right-section div#below-red div#content ul.nav-menu li.nav-link {
  position: relative;
}
nav#navbar
  div#right-section
  div#below-red
  div#content
  ul.nav-menu
  div#link-container {
  position: relative;
  z-index: 850;
}
nav#navbar
  div#right-section
  div#below-red
  div#content
  ul.nav-menu
  div#link-container
  .hidden {
  opacity: 0;
  transition: opacity 0.5s ease;
}
nav#navbar
  div#right-section
  div#below-red
  div#content
  ul.nav-menu
  div#link-container
  .show {
  opacity: 1;
  transition: opacity 0.5s ease;
}
nav#navbar
  div#right-section
  div#below-red
  div#content
  ul.nav-menu
  div#link-container
  div#product-modal {
  position: absolute;
  padding-inline: 43px;
  padding-block: 35px;
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.9);
  top: 34px;
  left: -500%;
  z-index: 900;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  width: 987px;
}
nav#navbar
  div#right-section
  div#below-red
  div#content
  ul.nav-menu
  div#link-container
  div#product-modal
  div.item-container {
  width: 100%;
}
nav#navbar
  div#right-section
  div#below-red
  div#content
  ul.nav-menu
  div#link-container
  div#product-modal
  h4.product-title {
  color: black;
  font-weight: 16px;
  font-weight: 1000;
  margin-top: 2px;
}
nav#navbar
  div#right-section
  div#below-red
  div#content
  ul.nav-menu
  div#link-container
  div#product-modal
  div.item {
  border-top-left-radius: 20px;
  cursor: pointer;
  width: max-content;
  overflow: hidden;
}
nav#navbar
  div#right-section
  div#below-red
  div#content
  ul.nav-menu
  div#link-container
  div#product-modal
  div.item
  img {
  margin: 0;
  padding: 0;
  border-bottom: 4px solid #eb2765;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  width: 285px;
} */

.logo {
  max-width: 202px;
  max-height: 50px;
}

h2#brand-title {
  box-sizing: content-box;
  width: 200px;
  height: 40px;
  text-align: center;
  margin-bottom: 0;
  line-height: 18px;
}

h2.text-black {
  font-size: 18px;
  font-weight: 900;
}

main#article-detail section#header-article {
  margin-top: 25px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
main#article-detail section#header-article a#back-link {
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 900;
  line-height: 19.2px;
  margin-bottom: 37px;
}
main#article-detail section#header-article h1.article-heading {
  width: 100%;
  text-align: center;
  max-width: 902px;
  margin-bottom: 37px;
}
main#article-detail section#header-article .author {
  font-size: 16px;
  line-height: 20.8px;
  text-align: center;
  color: rgb(128, 130, 133);
}
main#article-detail section#header-article p.author {
  margin-bottom: 16px;
}
main#article-detail article {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-bottom: 75px;
}
main#article-detail article p {
  text-align: justify;
}
main#article-detail article img#article-image {
  display: flex;
  max-width: 100%;
  object-fit: cover;
  height: 371px;
  border-radius: 20px;
  border: 0;
  margin-bottom: 33px;
}
main#article-detail article div.article-content {
  max-width: 708px;
}
main#article-detail article h2.sub-title {
  margin-bottom: 16px;
}
main#article-detail article div#two-column-container {
  display: flex;
  gap: 25px;
  margin-bottom: 16px;
}
main#article-detail article div#two-column-container img#detail-image {
  max-width: 311px;
  max-height: 191px;
  border-radius: 10px;
}
main#article-detail div#share {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  margin-bottom: 47px;
}
main#article-detail div#share .share-title {
  color: rgb(128, 130, 133);
  font-size: 16px;
  line-height: 20.8px;
  text-align: center;
}
main#article-detail div#share img#share-sosmed {
  mix-blend-mode: multiply;
  width: 166px;
  height: 31px;
}
main#article-detail div#related-content {
  display: flex;
  gap: 26px;
  flex-direction: column;
  margin-bottom: 30px;
  max-width: 1132px;
  margin-inline: auto;
  justify-content: center;
}
main#article-detail div#related-content h4 {
  border-bottom: 1px solid rgb(128, 130, 133);
  width: 100%;
  padding-bottom: 20px;
}
main#article-detail div#related-content div.template-related-contents {
  display: flex;
  justify-content: space-between;
}
main#article-detail div#related-content div#related-container {
  display: flex;
  gap: 15px;
}
main#article-detail
  div#related-content
  div#related-container
  img.related-image {
  width: 210px;
  height: 118.1px;
  border-radius: 10px;
}
main#article-detail
  div#related-content
  div#related-container
  div.content-container {
  max-width: 303px;
}
main#article-detail
  div#related-content
  div#related-container
  div.content-container
  div.title-container
  p.article-date {
  font-size: 12px;
  line-height: 15px;
}
main#article-detail
  div#related-content
  div#related-container
  div.content-container
  div.title-container
  h2.title-related {
  font-size: 16px;
  line-height: 19.2px;
  font-weight: 900;
  margin-bottom: 6px;
}
main#article-detail
  div#related-content
  div#related-container
  div.content-container
  p {
  font-size: 14px;
  line-height: 18.2px;
}

@media screen and (max-width: 1280px) {
  main#article-detail {
    padding-inline: 50px;
  }
  main#article-detail article h2.sub-title {
    margin-block: 16px;
  }
  main#article-detail article div#two-column-container {
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin-bottom: 16px;
  }
  main#article-detail article div#two-column-container img#detail-image {
    object-fit: cover;
    max-width: 100%;
    max-height: auto;
    border-radius: 10px;
  }
  main#article-detail div#related-content h4 {
    border-bottom: 1px solid rgb(128, 130, 133);
    width: 100%;
    padding-bottom: 20px;
  }
  main#article-detail div#related-content div.template-related-contents {
    display: flex;
    gap: 15px;
    justify-content: space-between;
  }
  main#article-detail div#related-content div#related-container {
    display: flex;
    flex-direction: column;
  }
  main#article-detail
    div#related-content
    div#related-container
    img.related-image {
    width: 100%;
    height: auto;
  }
  main#article-detail
    div#related-content
    div#related-container
    div.content-container
    div.title-container
    p.article-date {
    font-size: 12px;
    line-height: 15px;
  }
  main#article-detail
    div#related-content
    div#related-container
    div.content-container
    div.title-container
    h2.title-related {
    font-size: 16px;
    line-height: 19.2px;
    font-weight: 900;
    margin-bottom: 6px;
  }
  main#article-detail
    div#related-content
    div#related-container
    div.content-container
    p {
    font-size: 14px;
    line-height: 18.2px;
  }
}
@media screen and (max-width: 720px) {
  .home__testimony-text-container {
    /* fill: #e3e3e3; */
    /* width: 100%; */
    background-size: auto 100% !important;
  }
  main#article-detail {
    padding-inline: 15px;
  }
  main#article-detail h1 {
    font-size: 30px;
  }
  main#article-detail article h2.sub-title {
    font-size: 24px;
  }
  main#article-detail article p.paragraph-title {
    font-size: 16px;
  }
  main#article-detail article div#two-column-container {
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin-bottom: 16px;
  }
  main#article-detail div#related-content h4 {
    border-bottom: 1px solid rgb(128, 130, 133);
    width: 100%;
    padding-bottom: 20px;
  }
  main#article-detail div#related-content div#related-container {
    align-items: start;
  }
  main#article-detail
    div#related-content
    div#related-container
    div.content-container
    div.title-container
    p.article-date {
    font-size: 12px;
    line-height: 15px;
  }
  main#article-detail
    div#related-content
    div#related-container
    div.content-container
    div.title-container
    h2.title-related {
    font-size: 20px;
    line-height: 19.2px;
    font-weight: 900;
    margin-bottom: 6px;
  }
  main#article-detail
    div#related-content
    div#related-container
    div.content-container
    p {
    font-size: 14px;
    line-height: 18.2px;
  }
}
@media screen and (max-width: 540px) {
  main#article-detail article h2.sub-title {
    margin-block: 16px;
  }
  main#article-detail article div#two-column-container {
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin-bottom: 16px;
  }
  main#article-detail div#related-content h4 {
    border-bottom: 1px solid rgb(128, 130, 133);
    width: 100%;
    padding-bottom: 20px;
  }
  main#article-detail div#related-content div.template-related-contents {
    display: flex;
    flex-direction: column;
    gap: 35px;
    justify-content: space-between;
  }
  main#article-detail div#related-content div#related-container {
    display: flex;
    flex-direction: column;
    align-items: start;
  }
  main#article-detail
    div#related-content
    div#related-container
    img.related-image {
    width: 100%;
    height: auto;
  }
  main#article-detail
    div#related-content
    div#related-container
    div.content-container
    div.title-container
    p.article-date {
    font-size: 12px;
    line-height: 15px;
  }
  main#article-detail
    div#related-content
    div#related-container
    div.content-container
    div.title-container
    h2.title-related {
    font-size: 16px;
    line-height: 19.2px;
    font-weight: 900;
    margin-bottom: 6px;
  }
  main#article-detail
    div#related-content
    div#related-container
    div.content-container
    p {
    font-size: 14px;
    line-height: 18.2px;
  }
}
main section#header-contact-us {
  margin-block: 45.5px;
}
main section#contact-content {
  margin: 0 190px 80px;
}
main section#contact-content img.content-image {
  width: 100%;
  height: 339px;
  object-fit: cover;
  border-radius: 20px;
  margin-bottom: 47px;
}
main section#contact-content div#contact-info {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 20px;
}
main section#contact-content div#contact-info h2.title-contact-detail {
  font-size: 34px;
  margin-bottom: 20px;
  line-height: 40.8px;
}
main section#contact-content div#contact-info p.paragraph {
  max-width: 513px;
}
main section#contact-content div#contact-info form#form-contact {
  display: grid;
  gap: 22px;
  padding-left: 40px;
}
main
  section#contact-content
  div#contact-info
  form#form-contact
  .two-column-container {
  width: 100%;
}
main
  section#contact-content
  div#contact-info
  form#form-contact
  .two-column-container
  .contact-field {
  width: 100%;
}
main section#contact-content div#contact-info form#form-contact .contact-field {
  all: unset;
  padding-inline: 14px;
  padding-block: 18px;
  border: 1px solid rgb(158, 158, 158);
  border-radius: 10px;
  color: rgb(25, 29, 34);
  font-size: 16px;
  font-weight: normal;
  line-height: 20.8px;
}
main
  section#contact-content
  div#contact-info
  form#form-contact
  .contact-field::placeholder {
  color: rgb(25, 29, 34);
  font-size: 16px;
  font-weight: normal;
  line-height: 20.8px;
}
main
  section#contact-content
  div#contact-info
  form#form-contact
  button.button-submit {
  all: unset;
  justify-self: end;
  padding: 5px 40px;
  border-radius: 20px;
  background-color: rgb(235, 39, 101);
  color: white;
  font-weight: 300;
}
main section#contact-maps {
  padding: 50px 190px 50px 182px;
  background-color: #f6f6f6;
}
main section#contact-maps h2.subtitle {
  font-size: 34px;
  line-height: 40.8px;
  margin-bottom: 18px;
}
main section#contact-maps div#maps div.maps-container {
  gap: 90px;
}
main section#contact-maps div#maps div.map {
  display: grid;
  gap: 15px;
  max-width: 600px;
}
main section#contact-maps div#maps div.map .iframe-container {
  border: 1px solid rgb(136, 136, 136);
  max-width: max-content;
  border-radius: 20px;
}
main section#contact-maps div#maps div.map .iframe-container iframe {
  border-radius: 20px;
  width: 650px;
  height: 350px;
}
main section#contact-maps div#maps div.map .description {
  max-width: 421px;
}
main section#contact-maps div#maps div.map .description p {
  font-size: 16px;
  line-height: 24px;
}

@media screen and (max-width: 1280px) {
  main section#contact-content {
    margin: 0 100px 40px;
  }
  main section#contact-content div#contact-info {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
  }
  main section#contact-content div#contact-info form#form-contact {
    padding: 0;
  }
  main section#contact-maps h2.subtitle {
    text-align: center;
  }
  main section#contact-maps div#maps {
    width: 800px;
  }
  main section#contact-maps div#maps div.maps-container {
    flex-direction: column;
    align-items: center;
  }
}
@media screen and (max-width: 720px) {
  main section#contact-content {
    margin: 0 20px 40px;
  }
  main section#contact-content div#contact-info h2.title-contact-detail {
    font-size: 28px;
    margin-bottom: 20px;
    line-height: 34.8px;
  }
  main section#contact-content div#contact-info p {
    font-size: 14px;
  }
  main
    section#contact-content
    div#contact-info
    form#form-contact
    .two-column-container {
    flex-direction: column;
    max-width: 95%;
  }
  main
    section#contact-content
    div#contact-info
    form#form-contact
    .two-column-container
    .contact-field {
    width: 100%;
  }
  main
    section#contact-content
    div#contact-info
    form#form-contact
    .contact-field {
    font-size: 14px;
  }
  main
    section#contact-content
    div#contact-info
    form#form-contact
    .contact-field::placeholder {
    font-size: 14px;
  }
  main section#contact-maps h2.subtitle {
    text-align: center;
    font-size: 30px;
  }
  main section#contact-maps div#maps {
    width: 380px;
  }
  main section#contact-maps div#maps div.maps-container {
    width: 400px;
  }
  main section#contact-maps div#maps div.map {
    place-items: center;
    max-width: 400px;
  }
  main section#contact-maps div#maps div.map .iframe-container {
    border: 1px solid rgb(136, 136, 136);
    max-width: max-content;
    border-radius: 20px;
  }
  main section#contact-maps div#maps div.map .iframe-container iframe {
    border-radius: 20px;
    width: 380px;
    height: 250px;
  }
  main section#contact-maps div#maps div.map h4 {
    text-align: center;
  }
  main section#contact-maps div#maps div.map .description p {
    text-align: center;
  }
}
@media screen and (max-width: 540px) {
  main section#contact-maps div#maps {
    width: 350px;
  }
  main section#contact-maps div#maps div.maps-container {
    width: 350px;
  }
  main section#contact-maps div#maps div.map {
    max-width: 350px;
  }
  main section#contact-maps div#maps div.map .iframe-container iframe {
    width: 300px;
    height: 250px;
  }
}
main#sustainable {
  margin: 28px auto 40px;
  max-width: 1132px;
}
main#sustainable nav#breadcrumb ol.breadcrumb li {
  font-size: 12px;
}
main#sustainable nav#breadcrumb ol.breadcrumb li a {
  color: rgba(0, 0, 0, 0.7);
}
main#sustainable section#article {
  margin-bottom: 50px;
}
main#sustainable section#article h1 {
  margin-bottom: 10px;
}
main#sustainable section#article div.description-container {
  margin-bottom: 20px;
  gap: 25px;
}
main#sustainable section#article div.description-container p.description {
  box-sizing: content-box;
  font-size: 16px;
  max-width: 886px;
  line-height: 22.4px;
  color: rgb(25, 29, 34);
  padding-right: 34px;
  border-right: 1px solid rgb(138, 138, 138);
}
main#sustainable section#article div.description-container button.btn-download {
  color: rgb(235, 39, 101);
  background-color: transparent;
  font-size: 14px;
  line-height: 18.2px;
  border: 2px solid rgb(235, 39, 101);
  border-radius: 20px;
  padding-inline: 14px;
  padding-block: 4px;
}
main#sustainable section#article div.image-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  padding: 35px;
  background-color: #eb2765;
  border-radius: 20px;
  color: white;
}
main#sustainable section#article div.image-container p {
  font-size: 14px;
  font-weight: 700;
  line-height: 18.2px;
  max-width: 152px;
}
main#sustainable section#article div.image-container span {
  font-size: 48px;
  line-height: 1;
  font-weight: 900;
}
main#sustainable section#content {
  display: grid;
  gap: 10px;
  max-width: 1013px;
  margin: 0 auto 180px auto;
}
main#sustainable section#content div.description {
  max-width: 574px;
}
main#sustainable section#content div.description h2 {
  font-size: 34px;
  line-height: 41px;
  margin-bottom: 14px;
  max-width: 560px;
}

@media screen and (max-width: 1280px) {
  main#sustainable {
    margin: 28px auto 40px;
  }
  main#sustainable section#article div.description-container {
    align-items: start;
    justify-content: start;
    flex-direction: column;
    gap: 15px;
  }
  main#sustainable section#article div.description-container p.description {
    order: 2;
    padding-right: 0;
    border-right: 0;
  }
  main#sustainable
    section#article
    div.description-container
    button.btn-download {
    order: 1;
  }
  main#sustainable section#article div.image-container {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 32px;
  }
  main#sustainable section#content {
    display: grid;
    gap: 10px;
    margin: 0 auto 180px auto;
  }
  main#sustainable section#content div.description {
    max-width: 574px;
  }
  main#sustainable section#content div.description h2 {
    font-size: 34px;
    line-height: 41px;
    margin-bottom: 14px;
  }
}
@media screen and (max-width: 860px) {
  main#sustainable {
    margin: 28px 10px 40px;
  }
  main#sustainable section#article h1 {
    font-size: 32px;
  }
  main#sustainable section#article div.image-container {
    grid-template-columns: 1fr 1fr;
    gap: 35px;
    place-items: center;
  }
  main#sustainable section#content {
    gap: 65px;
  }
  main#sustainable section#content div#right-picture-section {
    flex-direction: column;
    gap: 25px;
  }
  main#sustainable section#content div#right-picture-section img {
    order: 1;
  }
  main#sustainable section#content div#right-picture-section div.description {
    order: 2;
  }
  main#sustainable section#content div#left-picture-section {
    flex-direction: column;
  }
}
@media screen and (max-width: 540px) {
  main#sustainable {
    margin: 28px 10px 40px;
  }
  main#sustainable section#article div.image-container {
    grid-template-columns: 1fr;
    gap: 55px;
  }
  main#sustainable section#content img {
    width: 220px;
  }
  main#sustainable section#content div.description h2 {
    font-size: 28px;
    line-height: 30px;
    margin-bottom: 14px;
  }
}
main section.header-container {
  position: relative;
  background-image: url("../images/aboutus/header-image.jpg");
  background-size: cover;
  background-position: center;
  height: 355px;
}
main section.header-container::before {
  content: "";
  background-color: rgba(0, 0, 0, 0.2);
  position: absolute;
  width: 100%;
  height: 100%;
  /* z-index: 10; */
}
main section.header-container h1 {
  position: relative;
  color: white;
  z-index: 10;
}
main section.history {
  position: relative;
  margin-block: 80px;
  margin-inline: auto;
  max-width: 1100px;
}
main section.history h1 {
  margin-bottom: 25px;
}
main section.history div.content {
  position: relative;
  width: 100%;
  display: flex;
  gap: 35px;
  align-items: center;
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
  margin-bottom: 30px;
}
main section.history div.content .fade-out {
  opacity: 0;
  transform: translateY(20px); /* Optional downward motion */
}
main section.history div.content .fade-in {
  opacity: 1;
  transform: translateY(0);
}
main section.history div.content img.right-arrow {
  position: absolute;
  top: 50%;
  right: 0;
}
main section.history div.content img.left-arrow {
  position: absolute;
  transform: rotate(-180deg);
  top: 50%;
  left: 0;
}
main section.history div.content img.content-image {
  max-height: 240px;
  box-shadow: 5px 8px #eb2765;
}
main section.history div.content div.description {
  color: rgb(25, 29, 34);
}
main section.history div.content div.description h2 {
  font-size: 24px;
  line-height: 28.8px;
  margin-bottom: 20px;
}
main section.history div.content div.description h4 {
  font-size: 16px;
  line-height: 19.2px;
  margin-bottom: 8px;
}
main section.history div.content div.description p {
  font-size: 18px;
  line-height: 23.4px;
  max-width: 658px;
}
main section.history nav ul.timeline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  margin: 50px auto;
  width: 80%;
  height: 40px;
}
main section.history nav ul.timeline::before {
  content: "";
  position: absolute;
  top: 10%;
  inset-inline: 5px;
  transform: translateY(-50%);
  height: 0.2px;
  background-color: black;
  z-index: 0;
}
main section.history nav ul.timeline .milestone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
}
main section.history nav ul.timeline .first {
  align-items: start;
}
main section.history nav ul.timeline .end {
  align-items: end;
}
main section.history nav ul.timeline .year-first {
  margin-left: -50%;
  transform: translateX(25%);
}
main section.history nav ul.timeline .year-end {
  margin-left: 50%;
  transform: translateX(35%);
}
main section.history nav ul.timeline .dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: black;
}
main section.history nav ul.timeline .dot.active {
  background-color: #eb2765;
  border: 12px solid #eb2765;
  outline: rgba(235, 39, 101, 0.1) solid 5px;
}
main section.history nav ul.timeline .year {
  margin-top: 5px;
  font-size: 20px;
  color: #333;
}
main section.history nav ul.timeline .year.active {
  color: #f52b7f;
  font-weight: 900;
}
.history-list > div {
  display: flex;
  gap: 2rem;
  align-items: center;
  flex-direction: row;
}
main section.grid-vision div.container-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
main section.grid-vision .left-p {
  padding-left: 100px;
}
main section.grid-vision .right-p {
  padding-right: 100px;
  align-items: end;
}
main section.grid-vision div.description {
  background-color: #eb2765;
  color: white;
}
main section.grid-vision div.description h1 {
  color: white;
}
main section.grid-vision div.description .description-container p {
  font-weight: 300;
}
main
  section.grid-vision
  div.description
  .description-container
  ul.list-container {
  gap: 30px;
}
main
  section.grid-vision
  div.description
  .description-container
  p.first-description {
  max-width: 390px;
  font-size: 20px;
  line-height: 24px;
}
main
  section.grid-vision
  div.description
  .description-container
  p.second-description {
  max-width: 435px;
  font-size: 18px;
  line-height: 23.4px;
}
main section.grid-vision div.description .description-container img.tick {
  box-sizing: content-box;
  padding-top: 10px;
}
main section.grid-vision .content-image1 {
  object-position: left;
  object-fit: cover;
  margin: 0;
  padding: 0;
  max-width: 100%;
  height: 498.5px;
}
main section.grid-vision .content-image2 {
  object-position: center;
  object-fit: cover;
  margin: 0;
  padding: 0;
  max-width: 100%;
  height: 498.5px;
}
.grid-vision .description {
  position: relative;
}

.grid-vision .description.left-p::before {
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  top: 0;
  left: 0;
  background-color: white;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.grid-vision .description.right-p::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 30px;
  height: 30px;
  background-color: white;
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

.history-list > .items {
  display: none;
}

.history-list > .items.active {
  display: flex;
}

@media screen and (max-width: 1280px) {
  main section.history {
    position: relative;
    margin-block: 80px;
    margin-inline: 50px;
    max-width: 1100px;
  }
  main section.history h1 {
    font-size: 34px;
    text-align: center;
    margin-bottom: 25px;
  }
  main section.history div.content {
    flex-direction: column;
    position: relative;
    width: 100%;
    margin-bottom: 30px;
  }
  .history-list > div {
    flex-direction: column;
  }
  main section.grid-vision .left-p {
    padding-left: 0;
    align-items: center;
  }
  main section.grid-vision .right-p {
    padding-right: 0;
    align-items: center;
  }
  main section.grid-vision div.description {
    background-color: #eb2765;
    color: white;
  }
  main section.grid-vision div.description h1 {
    color: white;
  }
  main section.grid-vision div.description .description-container p {
    font-weight: 300;
  }
  main
    section.grid-vision
    div.description
    .description-container
    p.first-description {
    max-width: 390px;
    font-size: 20px;
    line-height: 24px;
  }
  main
    section.grid-vision
    div.description
    .description-container
    p.second-description {
    max-width: 435px;
    font-size: 18px;
    line-height: 23.4px;
  }
  main section.grid-vision div.description .description-container img.tick {
    box-sizing: content-box;
    padding-top: 10px;
  }
}
@media screen and (max-width: 1280px) {
  main section.grid-vision .left-p {
    padding-left: 0;
    padding-block: 35px;
    align-items: center;
  }
  main section.grid-vision .right-p {
    padding-right: 0;
    padding-block: 35px;
    align-items: center;
  }
  main section.grid-vision div.description {
    background-color: #eb2765;
    color: white;
  }
  main section.grid-vision div.description h1 {
    color: white;
  }
}
@media screen and (max-width: 1024px) {
  main section.history {
    position: relative;
    margin-block: 80px;
    margin-inline: 50px;
    max-width: 1100px;
  }
  main section.history h1 {
    font-size: 34px;
    text-align: center;
    margin-bottom: 25px;
  }
  main section.history div.content img.right-arrow {
    display: none;
  }
  main section.history div.content img.left-arrow {
    display: none;
  }
  main section.grid-vision div.container-row {
    grid-template-columns: 1fr;
  }
  main section.grid-vision .left-p {
    padding: 25px;
  }
  main section.grid-vision .right-p {
    padding: 25px;
    order: 2;
  }
  main section.grid-vision h1 {
    font-size: 32px;
  }
  main section.grid-vision div.description div.description-container {
    gap: 10px;
  }
  main section.grid-vision div.description p.first-description {
    font-size: 16px;
  }
  main section.grid-vision div.description p.second-description {
    font-size: 16px;
  }
  main section.grid-vision .content-image1 {
    object-fit: cover;
    object-position: left center;
    max-height: 315px;
  }
  main section.grid-vision .content-image2 {
    object-position: fill;
    object-position: bottom center;
    width: 100%;
    max-height: 315px;
  }
}
@media screen and (max-width: 580px) {
  main section.grid-vision .content-image1 {
    object-position: center;
  }
}
.carrer-top {
  background-color: #eb2765;
  height: 556px;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.carrer-top .top-left {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.carrer-top .top-left h1 {
  font-size: 64px;
  font-weight: 900;
  color: white;
  width: 400px;
  line-height: normal;
  text-align: center;
}
.carrer-top img {
  object-fit: cover;
  object-position: left;
  width: 100%;
  max-width: 50%;
}
@media screen and (max-width: 1280px) {
  .carrer-top {
    height: 100%;
  }
  .carrer-top .top-left h1 {
    font-size: 36px;
    font-weight: 800;
    width: 100%;
  }
  .carrer-top img {
    height: 300px;
    object-fit: cover;
  }
}
@media screen and (max-width: 640px) {
  .carrer-top {
    flex-direction: column-reverse;
  }
  .carrer-top .top-left h1 {
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
  }
  .carrer-top img {
    max-width: 100%;
    height: 240px;
    object-fit: cover;
    object-position: center center;
  }
}

.driven {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 898px;
  margin: 89px auto 150px;
  gap: 26px;
}
.driven h2 {
  font-size: 30px;
  font-weight: 800;
}
.driven p {
  font-size: 24px;
  line-height: 30px;
  font-weight: 400;
  /* font-family: 'Gotham', sans-serif; */
}
@media screen and (max-width: 1280px) {
  .driven {
    margin: 52px auto 64px;
    padding: 0 24px;
    gap: 16px;
  }
  .driven h2 {
    font-size: 24px;
  }
  .driven p {
    font-size: 20px;
    text-align: justify;
  }
}
@media screen and (max-width: 640px) {
  .driven {
    margin: 36px auto 48px;
  }
  .driven h2 {
    font-size: 20px;
  }
  .driven p {
    font-size: 16px;
    line-height: 1.4rem;
  }
}

.newsroom-wrapper {
  position: relative;
  background-color: #eb2765;
  height: 284px;
  margin-top: 5rem;
  margin-bottom: 5rem;
}
.newsroom-wrapper .newsroom-content {
  height: 100%;
  width: 100%;
  max-width: 1132px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
}
.newsroom-wrapper .newsroom-content .left-section {
  width: 100%;
  max-width: 200px;
  height: 100%;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.newsroom-wrapper .newsroom-content .left-section p {
  font-size: 16px;
  font-weight: 800;
}
.newsroom-wrapper .newsroom-content .left-section h2 {
  font-size: 34px;
  font-weight: 800;
  line-height: normal;
}
.newsroom-wrapper .newsroom-content .left-section .carousel {
  height: 80px;
  margin: 0;
  align-items: center;
}
.newsroom-wrapper
  .newsroom-content
  .left-section
  .carousel
  .carousel-indicators {
  position: relative;
  height: 100%;
  gap: 12px;
}
.newsroom-wrapper
  .newsroom-content
  .left-section
  .carousel
  .carousel-indicators
  .button-indicator {
  margin: auto 0;
  width: 12px;
  height: 12px;
  border-radius: 30px;
  overflow: hidden;
  background-clip: border-box;
  border: none;
  background-color: #d9d9d9;
  opacity: 100;
  transition: all 0.2s linear;
}
.newsroom-wrapper
  .newsroom-content
  .left-section
  .carousel
  .carousel-indicators
  .button-indicator.active {
  width: 35px;
  background-color: black;
}
.newsroom-wrapper .newsroom-content .right-section {
  width: 100%;
  max-width: calc(100% - 220px);
}
.newsroom-wrapper .newsroom-content .right-section .slider-wrapper {
  position: relative;
}
.newsroom-wrapper .newsroom-content .right-section .news-list {
  display: flex;
  flex-direction: row;
  gap: 18px;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0;
  margin: 0;
}
.newsroom-wrapper
  .newsroom-content
  .right-section
  .news-list
  ::-webkit-scrollbar {
  display: none;
}
.newsroom-wrapper .newsroom-content .right-section .news-list .news-item {
  display: flex;
  flex-direction: column;
  background-color: white;
  height: 346px;
  border: 1px solid #bebebe;
  min-width: 292px;
  max-width: 292px;
}
.newsroom-wrapper .newsroom-content .right-section .news-list .news-item img {
  width: 100%;
  height: 175px;
  object-fit: cover;
  object-position: center;
}
.newsroom-wrapper
  .newsroom-content
  .right-section
  .news-list
  .news-item
  .news-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding: 0 22px;
}
.newsroom-wrapper
  .newsroom-content
  .right-section
  .news-list
  .news-item
  .news-info
  .title {
  font-size: 24px;
  font-weight: 800;
}
.newsroom-wrapper
  .newsroom-content
  .right-section
  .news-list
  .news-item
  .news-info
  .description {
  font-size: 14px;
  line-height: 1.2rem;
}
.newsroom-wrapper .newsroom-content .right-section .slider-scrollbar {
  height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  visibility: hidden;
}
.newsroom-wrapper
  .newsroom-content
  .right-section
  .slider-scrollbar:hover
  .scrollbar-track {
  height: 4px;
}
.newsroom-wrapper
  .newsroom-content
  .right-section
  .slider-scrollbar
  .scrollbar-track {
  background: #ccc;
  width: 100%;
  height: 2px;
  display: flex;
  align-items: center;
  border-radius: 4px;
  position: relative;
}
.newsroom-wrapper .newsroom-content .right-section .scrollbar-thumb {
  position: absolute;
  background: #000;
  top: 0;
  bottom: 0;
  width: 50%;
  height: 100%;
  cursor: grab;
  border-radius: inherit;
}
.newsroom-wrapper .newsroom-content .right-section .scrollbar-thumb:active {
  cursor: grabbing;
  height: 8px;
  top: -2px;
}
.newsroom-wrapper .newsroom-content .right-section .scrollbar-thumb::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  bottom: -10px;
}
.newsroom-wrapper .newsroom-content .slide-button#prev-slide {
  opacity: 0.5;
}
.newsroom-wrapper .newsroom-content .slide-button#next-slide {
  opacity: 1;
}
@media screen and (max-width: 1280px) {
  .newsroom-wrapper {
    padding: 0 24px;
  }
  .newsroom-wrapper .newsroom-content .right-section {
    max-width: calc(100% - 375px);
  }
}
@media screen and (max-width: 768px) {
  .newsroom-wrapper {
    padding: 0 24px;
  }
  .newsroom-wrapper .newsroom-content .right-section {
    max-width: calc(100% - 275px);
  }
}
@media screen and (max-width: 640px) {
  .newsroom-wrapper {
    padding: 24px;
    height: 100%;
  }
  .newsroom-wrapper .newsroom-content {
    flex-direction: column;
    align-items: start;
  }
  .newsroom-wrapper .newsroom-content .left-section {
    max-width: 100%;
  }
  .newsroom-wrapper .newsroom-content .left-section .carousel-indicators {
    margin: 0;
  }
  .newsroom-wrapper .newsroom-content .left-section .carousel-control-prev,
  .newsroom-wrapper .newsroom-content .left-section .carousel-control-next {
    z-index: 2;
  }
  .newsroom-wrapper .newsroom-content .right-section {
    max-width: 290px;
    margin: 0 auto;
  }
}

.opening {
  width: 100%;
  max-width: 1132px;
  margin: 121px auto 89px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.opening h2 {
  font-size: 34px;
  font-weight: 800;
}
.opening .table-responsive {
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.2);
  border-radius: 15px;
}
.opening .table-responsive table {
  overflow: hidden;
  margin: 0;
}
.opening .table-responsive table th {
  font-size: 16px;
  background-color: #191d22;
  color: white;
  text-align: center;
}
.opening .table-responsive table td {
  font-size: 14px;
  line-height: 2em;
  text-align: center;
}
.opening
  .table-responsive
  table.table-striped
  > tbody
  > tr:nth-of-type(even)
  > * {
  --bs-table-color-type: #191d22 !important;
  --bs-table-bg-type: #e8e8e8 !important;
}
.opening
  .table-responsive
  table.table-striped
  > tbody
  > tr:nth-of-type(odd)
  > * {
  --bs-table-color-type: #191d22 !important;
  --bs-table-bg-type: transparent !important;
}
.opening .table-responsive table .link-view {
  text-decoration: none;
  color: #eb2765;
  font-size: 14px;
  line-height: normal;
}
.opening .table-responsive table .btn-apply {
  font-size: 14px;
  background: transparent;
  border: 1px solid #eb2765;
  color: #eb2765;
  border-radius: 20px;
  padding: 3px 10px;
  line-height: 1.4em;
}
@media screen and (max-width: 1280px) {
  .opening {
    padding: 0 24px;
    margin: 64px auto 48px;
    gap: 16px;
  }
  .opening h2 {
    font-size: 24px;
  }
  .opening .table-responsive {
    border-radius: 8px;
  }
}

.wrapper-top {
  /* background: url("../images/bg-texture.jpeg"); */
  position: relative;
}
.wrapper-top .bg-overlay {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  /* background: rgba(245, 251, 255, 0.7); */
}
.wrapper-top .carrer-detail-top {
  width: 100%;
  height: 100%;
  max-width: 992px;
  margin: 43px auto 116px;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.wrapper-top .carrer-detail-top .left-section {
  display: flex;
  flex-direction: column;
  position: relative;
}
.wrapper-top .carrer-detail-top .left-section .breadcrumb {
  margin: 0;
}
.wrapper-top .carrer-detail-top .left-section .breadcrumb li {
  font-size: 12px;
}
.wrapper-top .carrer-detail-top .left-section .breadcrumb li a {
  color: rgba(0, 0, 0, 0.7);
}
.wrapper-top .carrer-detail-top .left-section h1 {
  font-size: 30px;
  font-weight: 800;
}
.wrapper-top .carrer-detail-top .right-section {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  color: black;
}
.wrapper-top .carrer-detail-top .right-section p {
  font-size: 16px;
}
@media screen and (max-width: 1280px) {
  .wrapper-top .carrer-detail-top {
    padding: 0 24px;
    margin: 36px 0 64px;
    flex-wrap: wrap;
  }
}

.carrer-detail {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 992px;
  margin: -58px auto 0;
  padding: 24px 44px 48px;
  border-radius: 15px 15px 0 0;
  background: #fff;
  z-index: 1;
}
.carrer-detail h1 {
  font-size: 30px;
  font-weight: 800;
}
.carrer-detail .carrer-info {
  display: flex;
  flex-direction: row;
  gap: 100px;
  margin-top: 36px;
}
.carrer-detail .carrer-info .info-item {
  display: flex;
  flex-direction: column;
}
.carrer-detail .carrer-info .info-item .title {
  font-size: 14px;
}
.carrer-detail .carrer-info .info-item .value {
  font-size: 16px;
  font-weight: 800;
}
.carrer-detail hr {
  border-color: black;
  margin: 28px 0 30px;
}
.carrer-detail .carrer-description {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.carrer-detail .carrer-description .description-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.carrer-detail .carrer-description .description-item .title {
  font-size: 18px;
  font-weight: 800;
}
.carrer-detail .carrer-description .description-item .value {
  font-size: 18px;
}
.carrer-detail .carrer-description .description-item ul {
  padding-left: 1.5rem;
}
.carrer-detail .carrer-description .description-item ul li {
  font-size: 18px;
}
.carrer-detail .carrer-description .description-item .btn-submit {
  font-size: 16px;
  background: transparent;
  border: 2px solid #eb2765;
  color: #eb2765;
  border-radius: 20px;
  padding: 5px 24px;
  line-height: 1.4em;
  width: 148px;
  margin-top: 10px;
}
@media screen and (max-width: 1280px) {
  .carrer-detail {
    padding: 24px 24px 48px;
    margin: -24px auto 0;
  }
  .carrer-detail .carrer-info {
    margin-top: 20px;
  }
  .carrer-detail .carrer-info .info-item {
    width: 100%;
  }
  .carrer-detail .carrer-info .info-item .value {
    font-size: 16px;
  }
  .carrer-detail hr {
    margin: 24px 0;
  }
  .carrer-detail .carrer-description {
    gap: 20px;
  }
}
@media screen and (max-width: 640px) {
  .carrer-detail .carrer-info {
    flex-wrap: wrap;
    gap: 18px;
  }
  .carrer-detail .carrer-info .info-item {
    width: fit-content;
  }
}

.wrapper-texture {
  /* background: url("../images/bg-texture.jpeg"); */
  position: relative;
}
.wrapper-texture .bg-overlay {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  /* background: rgba(245, 251, 255, 0.7); */
}
.wrapper-texture .top-texture {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 54px auto 18px;
  max-width: 1129px;
  width: 100%;
  gap: 51px;
}
.wrapper-texture .top-texture h1 {
  font-size: 40px;
  font-weight: 800;
}
.wrapper-texture .top-texture .categories {
  display: flex;
  flex-direction: row;
  gap: 20px;
  width: 100%;
}
.wrapper-texture .top-texture .categories .category-item {
  height: 50px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 30px;
  background: rgba(241, 241, 241, 0.6980392157);
  cursor: pointer;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-right: 1rem;
  padding-left: 1rem;
}
.wrapper-texture .top-texture .categories .category-item p {
  font-size: 16px;
  text-align: center;
  line-height: 1.3rem;
}
.wrapper-texture .top-texture .categories .category-item:hover {
  background-color: #eb2765;
  color: white;
}
.wrapper-texture .top-texture .categories .category-item.active {
  background-color: #eb2765;
  color: white;
}
.wrapper-texture .top-texture .categories .category-item.active p {
  font-weight: 800;
}
.wrapper-texture .category-select {
  display: none;
}
@media screen and (max-width: 1280px) {
  .wrapper-texture .top-texture {
    padding: 0 20px;
    gap: 36px;
  }
  .wrapper-texture .top-texture .categories {
    gap: 14px;
  }
}
@media screen and (max-width: 640px) {
  .wrapper-texture .top-texture {
    margin: 36px auto 18px;
    gap: 24px;
  }
  .wrapper-texture .top-texture h1 {
    font-size: 28px;
  }
  .wrapper-texture .top-texture .categories {
    display: none;
  }
  .wrapper-texture .top-texture .category-select {
    height: 50px;
    width: 100%;
    display: flex;
    border-radius: 30px;
    background: rgba(241, 241, 241, 0.6980392157);
    color: black;
    border-color: black;
    text-indent: 12px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: url(https://cdn3.iconfinder.com/data/icons/arrows-219/24/chevron-down-512.png)
      98%/10% no-repeat #eee;
  }
}

.article-list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 26px;
  width: 100%;
  max-width: 1129px;
  margin: 42px auto 86px;
}
.article-list .article-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.article-list .article-item img {
  width: 360px;
  height: 210px;
  object-fit: cover;
  object-position: center;
  overflow: hidden;
  border-radius: 10px;
}
.article-list .article-item .article-info {
  font-size: 13px;
  margin-top: 3px;
}
.article-list .article-item .article-info span {
  color: rgba(0, 0, 0, 0.5);
}
.article-list .article-item .article-description {
  line-height: 1.5rem;
}
@media screen and (max-width: 1280px) {
  .article-list {
    grid-template-columns: 1fr 1fr;
    padding: 0 20px;
    gap: 24px;
    margin: 24px auto 48px;
  }
  .article-list .article-item img {
    width: 100%;
    height: 200px;
  }
}
@media screen and (max-width: 640px) {
  .article-list {
    grid-template-columns: 1fr;
    margin: 24px auto;
  }
}

.wrapper-pagination {
  width: fit-content;
  margin: 0 auto 58px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 26px;
}
.wrapper-pagination .pagination {
  gap: 10px;
  margin: 0;
}
.wrapper-pagination .pagination .page-item .page-link {
  border-radius: 20px !important;
  height: 35px;
  width: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: black;
  font-weight: 700;
  border-color: rgb(133, 132, 132);
  background: transparent;
}
.wrapper-pagination .pagination .page-item.active .page-link {
  background-color: #eb2765;
  color: white;
}
@media screen and (max-width: 1280px) {
  .wrapper-pagination {
    margin: 0 auto 48px;
  }
}
@media screen and (max-width: 640px) {
  .wrapper-pagination {
    margin: 0 auto 24px;
  }
  .wrapper-pagination > p {
    display: none;
  }
}

@media screen and (max-width: 1024px) {
  .wrapper-texture.our-project .top-texture .categories {
    display: none;
  }
  .wrapper-texture.our-project .top-texture .category-select {
    height: 50px;
    width: 100%;
    display: flex;
    border-radius: 30px;
    background: rgba(241, 241, 241, 0.6980392157);
    color: black;
    border-color: black;
    text-indent: 24px;
    line-height: normal;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: url(https://cdn3.iconfinder.com/data/icons/arrows-219/24/chevron-down-512.png)
      98%/5% no-repeat #eee;
  }
}
@media screen and (max-width: 640px) {
  .wrapper-texture.our-project .top-texture .category-select {
    text-indent: 12px;
    background: url(https://cdn3.iconfinder.com/data/icons/arrows-219/24/chevron-down-512.png)
      98%/10% no-repeat #eee;
  }
}

.project-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1129px;
  margin: 30px auto 75px;
}
.project-content .latest-project {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 31px 43px 41px;
  background-color: white;
  border-radius: 20px;
  gap: 55px;
  box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.2509803922);
}
.project-content .latest-project .project-description {
  display: flex;
  flex-direction: column;
}
.project-content .latest-project .project-description > p {
  font-size: 16px;
  font-weight: 800;
}
.project-content .latest-project .project-description h2 {
  font-size: 30px;
  font-weight: 700;
  margin: 6px 0 12px;
}
.project-content .latest-project .project-description .text-description {
  font-weight: normal;
  font-size: 18px;
  line-clamp: 3;
  text-overflow: ellipsis;
  max-width: 690px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.project-content .latest-project .project-description .btn-download-pdf {
  background: transparent;
  border-radius: 15px;
  border: 1px solid #eb2765;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 216px;
  padding: 0;
}
.project-content .latest-project .project-description .btn-download-pdf img {
  border-right: 1px solid #eb2765;
  padding: 8px 12px;
}
.project-content .latest-project .project-description .btn-download-pdf p {
  color: #eb2765;
  font-size: 14px;
  padding: 0 8px;
  line-height: normal;
}
@media screen and (max-width: 1280px) {
  .project-content {
    padding: 0 24px;
    margin: 24px auto 48px;
  }
  .project-content .latest-project {
    border-radius: 12px;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.137254902);
    padding: 20px;
    overflow: hidden;
    gap: 20px;
  }
  .project-content .latest-project .wrapper-standing .standing-image {
    border-radius: 8px;
  }
  .project-content .latest-project .project-description .text-description {
    line-clamp: 8;
    -webkit-line-clamp: 8;
    text-align: justify;
  }
}
@media screen and (max-width: 640px) {
  .project-content .latest-project {
    flex-direction: column;
    gap: 36px;
  }
  .project-content .latest-project .project-description > p {
    font-size: 12px;
    font-weight: 600;
  }
  .project-content .latest-project .project-description h2 {
    font-size: 22px;
    margin: 2px 0 6px;
  }
  .project-content .latest-project .project-description .text-description {
    font-size: 16px;
  }
}

.wrapper-standing {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.wrapper-standing .standing-image {
  border: 1px solid #d2d2d2;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  background: white;
  z-index: 1;
}
.wrapper-standing .standing-image img {
  margin: 14px;
  height: 279px;
  width: 194px;
  object-fit: cover;
  object-position: center;
}
.wrapper-standing .standing-image p {
  font-size: 14px;
}
.wrapper-standing .standing-image .download-catalog {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 14px;
}
.wrapper-standing .standing-image .download-catalog p {
  color: #357fa5;
  font-size: 14px;
}
.wrapper-standing .standing-image .download-catalog img {
  height: 18px;
  width: auto;
}
.wrapper-standing .standing-shadow {
  position: absolute;
  bottom: -15px;
  height: 31px;
  width: 300px;
  background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(0, 0, 0, 0.8) 0%,
    rgba(115, 115, 115, 0) 100%
  );
  opacity: 30%;
}
.wrapper-list {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1129px;
  margin: 0 auto 103px;
  gap: 47px;
}
.wrapper-list .top-list {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.wrapper-list .project-list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 80px;
}
@media screen and (max-width: 1280px) {
  .wrapper-list {
    padding: 0 24px;
    margin: 0 auto 48px;
    gap: 28px;
  }
  .wrapper-list .project-list {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (max-width: 640px) {
  .wrapper-list .project-list {
    grid-template-columns: 1fr;
  }
}

.wrapper-content {
  display: grid;
  grid-template-columns: 322px 1fr;
  width: 100%;
  max-width: 1129px;
  margin: 58px auto 97px;
  gap: 45px;
  position: relative;
}
.wrapper-content .wrapper-category .floating-menu {
  position: sticky;
  top: 114px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.wrapper-content .wrapper-category .categories {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.wrapper-content .wrapper-category .categories p {
  font-size: 16px;
}
.wrapper-content .wrapper-category .categories .category-item {
  height: 60px;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 20px 34px;
  border-radius: 30px;
  background: white;
  cursor: pointer;
  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1019607843);
}
.wrapper-content .wrapper-category .categories .category-item p {
  font-size: 16px;
  text-align: center;
  line-height: 1.3rem;
}
.wrapper-content .wrapper-category .categories .category-item.active {
  background-color: #eb2765;
  color: white;
}
.wrapper-content .wrapper-category .categories .category-item.active p {
  font-weight: 800;
}
.wrapper-content .faq-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.wrapper-content .faq-list .category-title {
  font-size: 20px;
  font-weight: 800;
}
.wrapper-content .faq-list .accordion {
  display: flex;
  flex-direction: column;
  gap: 25px;
}
.wrapper-content .faq-list .accordion .accordion-item {
  border-radius: 30px !important;
  overflow: hidden !important;
  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1019607843);
  transition: all 0.3s linear;
}
.wrapper-content .faq-list .accordion .accordion-item .accordion-header {
  height: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}
.wrapper-content .faq-list .accordion .accordion-item .accordion-header hr {
  position: absolute;
  bottom: -2px;
  width: 100%;
  max-width: calc(100% - 80px);
  margin: 0;
}
.wrapper-content .faq-list .accordion .accordion-item button {
  height: 100%;
  font-weight: 800;
  padding: 0 40px;
  color: black;
}
.wrapper-content .faq-list .accordion .accordion-item .accordion-button:focus {
  box-shadow: none;
}
.wrapper-content
  .faq-list
  .accordion
  .accordion-item
  .accordion-button:not(.collapsed) {
  background: transparent;
  box-shadow: none;
}
.wrapper-content .faq-list .accordion .accordion-item .accordion-body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 16px 40px 32px;
}
.wrapper-content .faq-list .accordion .accordion-item .accordion-body p {
  font-size: 16px;
}
@media screen and (max-width: 1280px) {
  .wrapper-content {
    grid-template-columns: 1fr;
    padding: 0 24px;
    margin: 24px auto 48px;
    gap: 36px;
  }
  .wrapper-content .wrapper-category .categories {
    gap: 14px;
  }
  .wrapper-content .faq-list .accordion .accordion-item {
    border-radius: 12px !important;
  }
  .wrapper-content .faq-list .accordion .accordion-item .accordion-header hr {
    max-width: calc(100% - 48px);
  }
  .wrapper-content .faq-list .accordion .accordion-item button {
    padding: 0 24px;
    line-height: 1.2rem;
  }
  .wrapper-content .faq-list .accordion .accordion-item .accordion-body {
    padding: 16px 24px 24px;
  }
}
@media screen and (max-width: 640px) {
  .wrapper-content .faq-list .accordion .accordion-item .accordion-header hr {
    bottom: -24px;
  }
  .wrapper-content
    .faq-list
    .accordion
    .accordion-item
    .accordion-button:not(.collapsed) {
    padding: 24px 24px 0;
    line-height: 1.5rem;
  }
  .wrapper-content .faq-list .accordion .accordion-item .accordion-body {
    padding: 42px 24px 24px;
  }
}

content {
  margin-top: 100px;
}

.cursor-pointer {
  cursor: pointer;
}

.font-bold {
  font-weight: 900;
}

body {
  font-size: 18px;
  color: black;
  font-weight: 500;
  position: relative;
}

.header__container {
  background-color: white;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 20;
  width: 100%;
}

.header__logo {
  max-width: 100px;
}

.header__main-title {
  font-size: 12px;
  line-height: 12px;
  font-weight: 700;
  max-width: 120px;
}

.header__menu {
  position: relative;
}

.header__menu::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 102%;
  background-color: #eb2765;
  clip-path: polygon(5% 0, 100% 0, 100% 100%, 0% 100%);
}

.header__nav-container {
  font-size: 10px;
}

.header__nav-container .nav-link {
  color: white;
  padding: 0.4rem 0.8rem;
}

.header__nav-container .nav-link:not(.active):hover {
  background-color: rgba(0, 0, 0, 0.5);
}

.header__nav-container .nav-link.active {
  background-color: black;
}

.header__language-dropdown::after {
  display: none;
}

#header__product-dropdown .dropdown-menu {
  width: 620px;
  background-color: rgba(255, 255, 255, 0.9);
}

#header__product-dropdown .dropdown-menu > .card {
  width: 100%;
}

#header__product-dropdown .dropdown-toggle::after {
  display: none;
}

.header__button {
  cursor: pointer;
}

.header__hamburger {
  border-left: 2px solid white;
  border-right: 2px solid white;
}

#sidebar {
  width: 100%;
  position: fixed;
  z-index: 999999;
}

.header__sidebar-top-nav {
  font-size: 16px;
}

.header__sidebar-bottom-nav {
  font-size: 18px;
}

.header__sidebar-language {
  font-size: 20px;
  font-weight: 700;
}

#sidebar input[type="radio"] {
  accent-color: black;
}

.header__product-image {
  /* border-bottom: 5px solid #eb2765; */
  border-radius: 10px !important;
  width: 100%;
  object-fit: cover;
  aspect-ratio: 1 / 1;
}

.header__product-text {
  font-size: 13px;
  text-align: center;
}

@media (min-width: 576px) {
  .header__logo {
    max-width: 150px;
    padding-right: 1rem;
    border-right: 2px solid black;
  }

  .header__main-title {
    font-size: 16px;
    line-height: 16px;
    max-width: 150px;
  }

  .header__product-image {
    width: 100%;
    /* height: 60px; */
  }
}

@media (min-width: 768px) {
  .header__logo {
    max-width: 130px;
  }

  .header__main-title {
    font-size: 14px;
    line-height: 14px;
    max-width: 130px;
  }

  #sidebar {
    width: 50%;
  }

  #sidebar .offcanvas-header {
    padding-left: 4rem;
    padding-right: 4rem;
  }

  #sidebar .offcanvas-body {
    padding-left: 4rem;
    padding-right: 6rem;
  }
}

@media (min-width: 850px) {
  .header__logo {
    max-width: 150px;
  }

  .header__main-title {
    font-size: 16px;
    line-height: 16px;
    max-width: 150px;
  }

  .header__nav-container {
    font-size: 12px;
  }
}

@media (min-width: 992px) {
  .header__nav-container {
    font-size: 12px;
  }

  .header__nav-container .nav-link {
    padding: 0.4rem 1.1rem;
  }

  #header__product-dropdown .dropdown-menu {
    width: 825px;
  }

  .header__product-image {
    /* height: 80px; */
  }

  .header__product-text {
    font-size: 16px;
  }
}

@media (min-width: 1200px) {
  .header__logo {
    max-width: 170px;
  }

  .header__main-title {
    font-size: 18px;
    line-height: 18px;
    max-width: 170px;
  }

  .header__nav-container {
    font-size: 16px;
  }

  .header__nav-container .nav-link {
    padding: 0.4rem 1.5rem;
  }

  .header__hamburger {
    width: 70px;
  }

  #header__product-dropdown .dropdown-menu {
    width: 99.5vw;
    max-height: 87.5vh;
    overflow: auto;
    transform: translate3d(-45vw, 39.1385px, 0px) !important;
    padding-left: 9rem;
    padding-right: 9rem;
    background-color: #fff !important;
  }

  .header__product-image {
    /* height: 98px; */
  }
}

@media (min-width: 1400px) {
  .header__nav-container .nav-link {
    padding: 0.4rem 1.7rem;
  }

  #sidebar {
    width: 40%;
  }
}

.footer__container {
  position: relative;
  z-index: 1;
  /* border-top: 5px solid #eb2765; */
  background-color: #17030a !important;
  color: #fff !important;
}
.footer__normal-text img {
  filter: invert(1);
}
.footer__container .footer__geo-location {
  color: #fff !important;
}

/* .footer__container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  opacity: 0.1;
  background-image: url("../images/footer/bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
} */

.footer__padded-content {
  padding: 2rem 3rem;
}

.footer__padded-content img {
  max-width: 194px;
  height: auto !important;
}

@media (min-width: 768px) {
  .footer__padded-content {
    padding: 2rem 6rem;
  }
}

.footer__logo {
  max-width: 150px;
}

.footer__title-text {
  font-size: 18px;
  line-height: 18px;
  height: 30px;
  font-weight: 700;
}

.footer__main-title {
  height: auto;
  max-width: 180px;
}

.footer__icon-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  max-width: 210px;
}

.footer__normal-text {
  font-size: 13px;
}

.footer__geo-location {
  text-decoration: underline;
}

/* ------------------------------
Banner Section
------------------------------ */
#home__banner-swiper {
  position: relative;
  /* border-bottom: 3px solid #eb2765; */
}

.home__banner-swiper-button {
  cursor: pointer;
  color: white;
  transition: all 0.3s;
}

.home__banner-swiper-button.swiper-button-disabled {
  cursor: default;
  color: rgba(0, 0, 0, 0.25);
}

.home__banner-swiper-button-prev {
  position: absolute;
  top: 50%;
  left: 20px;
  z-index: 2;
  transform: translateY(-50%);
}

.home__banner-swiper-button-next {
  position: absolute;
  top: 50%;
  right: 20px;
  z-index: 2;
  transform: translateY(-50%);
}

.home__banner {
  object-fit: cover;
  width: 100%;
  height: 380px;
}

.home__banner-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: 80%;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

.home__banner-title {
  font-size: 1.5rem;
  color: #fff;
}

.home__banner-triangle {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1;
  width: 40px;
  height: 48px;
  clip-path: polygon(100% 0, 0% 100%, 100% 100%);
}

.widget {
  position: fixed;
  bottom: 1rem;
  padding-left: 1rem;
  padding-right: 1rem;
  z-index: 18;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: end;
  justify-content: end;
  width: 100%;
}

.home__banner-whatsapp img {
  width: 45px;
  height: 45px;
  justify-self: end !important;
}

.footer__btn-to-top {
  display: none;
  background-color: #fff !important;
  opacity: 0;
  color: rgb(235, 39, 101) !important;
  transition: opacity 1s;
}
@keyframes show {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.footer__btn-to-top.show {
  display: block;
  opacity: 1;
  animation-name: show;
  animation-duration: 1s;
}

@media (max-width: 992px) {
  .widget {
    bottom: 6rem;
  }
  .footer__container .border-secondary {
    margin-bottom: 100px;
  }
  .shortcut-mobile {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background-color: #eb2765;
  }
  .nav-mobile {
    list-style: none;
    display: flex;
    margin: 0.5rem;
    padding: 0.5rem;
    font-size: 0.8rem;
    align-items: center;
    justify-content: space-between;
  }
  .nav-mobile li div {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #fff;
  }
  .nav-mobile li div img {
    width: auto;
    height: 24px;
  }
}

@media (min-width: 576px) {
  .home__banner-swiper-button-prev {
    left: 30px;
  }

  .home__banner-swiper-button-next {
    right: 30px;
  }

  .home__banner {
    height: 430px;
  }

  .home__banner-title {
    font-size: 1.7rem;
  }
}

@media (min-width: 768px) {
  .home__banner-swiper-button-prev {
    left: 40px;
  }

  .home__banner-swiper-button-next {
    right: 40px;
  }

  .home__banner-text {
    max-width: 520px;
  }
}

@media (min-width: 992px) {
  .home__banner-title {
    font-size: 2rem;
  }

  .home__banner-text {
    font-size: 20px;
  }
}

@media (min-width: 1200px) {
  .home__banner {
    height: 90vh;
  }
}

/* ------------------------------
Product Section
------------------------------ */
.home__product-section {
  position: relative;
  background-image: linear-gradient(#fff, #ffffff00);
  padding-top: 3rem;
  padding-bottom: 4rem;
}

.home__product-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  /* background-image: url("../images/home/product/4122250_89257_1.png"); */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.home__product-text {
  font-size: 14px;
  max-width: 80%;
}

.home__product-title {
  font-size: 1.5rem;
}

.home__side-product {
  flex-grow: 1;
  width: 17%;
}

.home__center-product {
  flex-grow: 1;
  width: 20%;
}

.home__product-svg {
  position: relative;
  z-index: 3;
}

.home__product-image {
  height: 100%;
  object-fit: cover;
  clip-path: url(#home__product-clip);
}

.home__product-image-text {
  position: absolute;
  bottom: 0.5rem;
  left: 0.3rem;
  right: 0.3rem;
  z-index: 5;
  font-size: 12px;
  line-height: 18px;
  color: white;
}

.home__product-gradient {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
}

.home__product-reflection {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  transform: translateY(35px);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  width: 100%;
  height: 36px;
  background-image: linear-gradient(#0000001a, #00000000);
}

.home__product-shadow {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 10px;
  transform: translateY(7px);
  margin: 0 auto;
  border-radius: 50%;
  background-image: radial-gradient(#000000ff, #00000000);
  opacity: 0.9;
}

@media (min-width: 400px) {
  .home__product-image-text {
    bottom: 0.5rem;
    left: 0.5rem;
    right: 0.5rem;
  }
}

@media (min-width: 576px) {
  .home__product-text {
    max-width: 480px;
  }

  .home__product-reflection {
    transform: translateY(44px);
    height: 45px;
  }

  .home__product-image-text {
    bottom: 0.8rem;
    left: 0.6rem;
    right: 0.6rem;
    font-size: 16px;
  }
}

@media (min-width: 768px) {
  .home__product-text {
    font-size: 16px;
    max-width: 600px;
  }

  .home__product-title {
    font-size: 1.7rem;
  }

  .home__product-reflection {
    transform: translateY(49px);
    height: 50px;
  }

  .home__product-image-text {
    bottom: 0.7rem;
    left: 0.8rem;
    right: 0.8rem;
  }
}

@media (min-width: 1200px) {
  .home__product-image-text {
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
  }
}

/* ------------------------------
Project Section
------------------------------ */
.home__project-section {
  padding: 1.5rem;
}

.home__project {
  position: relative;
  color: #fff;
}

.home__project::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(#eb276500 60%, #eb2765b2);
}

.home__project-image {
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home__project-exp-image {
  display: block;
  margin: 0 auto;
  width: 100%;
}

.home__project-image-text {
  position: absolute;
  bottom: 0.4rem;
  left: 0.4rem;
  right: 0.4rem;
  z-index: 3;
  font-size: 0.7rem;
}

.home__project-image-text-facility {
  position: absolute;
  bottom: 0.4rem;
  left: 0.4rem;
  right: 0.4rem;
  z-index: 3;
  font-size: 0.7rem;
}

.home__project-larger-text {
  font-size: 36px;
}

.home__project-large-text {
  font-size: 24px;
  line-height: 28px;
}

.home__project-medium-text {
  font-size: 14px;
}

.home__project-small-text {
  font-size: 11px;
}

.home__project-detail-box {
  min-height: 150px;
}

@media (min-width: 440px) {
  .home__project-section {
    padding: 2.5rem;
  }

  .home__project-exp-image {
    width: 80%;
  }
}

@media (min-width: 576px) {
  .home__project-section {
    padding: 3.2rem;
  }

  .home__project-exp-image {
    width: 60%;
  }
}

@media (min-width: 768px) {
  .home__project-section {
    padding: 3.2rem 1.5rem;
  }

  .home__project-card {
    box-shadow: 0 10px 20px 2px rgba(0, 0, 0, 0.2);
  }

  .home__product-project-part {
    max-width: 260px;
  }

  .home__project {
    height: 50%;
  }

  .home__project-exp-image {
    width: 80%;
    height: 90%;
  }

  .home__project-detail-box {
    min-height: 50%;
  }
}

@media (min-width: 992px) {
  .home__project-section {
    padding: 3.2rem 4rem;
  }

  .home__project-larger-text {
    font-size: 46px;
  }

  .home__project-large-text {
    font-size: 28px;
    line-height: 33px;
  }

  .home__project-medium-text {
    font-size: 16px;
  }

  .home__project-small-text {
    font-size: 14px;
  }
}

@media (min-width: 1200px) {
  .home__project-section {
    padding: 3.2rem 6rem;
  }

  .home__project-card {
    margin: 0 auto;
  }

  .home__project-medium-text {
    font-size: 15px;
  }
}

/* ------------------------------
Article Section
------------------------------ */
.home__article-section {
  position: relative;
  background-color: #eb2765;
  padding-bottom: 2rem;
}

.home__article-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  opacity: 0.2;
  background-image: url("../images/home/article/article-bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.home__article-section-bg {
  display: none;
  position: absolute;
  height: 50%;
  width: 100%;
  background-color: #eb2765;
}

.home__article-section-bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  opacity: 0.2;
  background-image: url("../images/home/article/article-bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.home__article-top {
  padding: 2rem 3rem 0;
  z-index: 2;
}

.home__article-swiper-container {
  height: 400px;
  overflow-x: hidden;
  margin: 0 auto;
}

#home__article-swiper {
  overflow: visible;
}

#home__article-swiper .swiper-wrapper {
  overflow: visible;
}

#home__article-swiper .swiper-slide {
  width: 250px;
  transition: all 0.3s;
}

#home__article-swiper .swiper-slide:not(.swiper-slide-active) {
  transform: scale(0.9);
}

.home__article-card {
  overflow: hidden;
  width: 100%;
  height: 300px;
  border: 0;
  box-shadow: 0 2px 20px 1px #00000040;
}

.home__article-image {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.home__article-date {
  font-size: 1rem;
}

.home__article-title {
  font-size: 1.25rem;
}

.home__article-swiper-button::after {
  font-size: 20px;
}

.home__article-section .swiper-pagination {
  width: 100% !important;
}

.home__article-section .swiper-pagination-bullet {
  background-color: white;
  opacity: 1;
  transform: scale(1) !important;
}

.home__article-section .swiper-pagination-bullet-active {
  background-color: black;
  width: 25px;
  border-radius: 20px;
}
@media screen and (min-width: 1024px) {
  .home__article-section {
    background-color: unset;
  }

  .home__article-section::before {
    all: initial !important;
  }
  .home__article-section-bg {
    display: block;
  }
}

/* ------------------------------
Testimony Section
------------------------------ */
.home__testimony-section {
  position: relative;
  margin-bottom: 10rem;
  padding-top: 4rem;
  padding-bottom: 4rem;
  min-height: 550px;
}

.home__testimony-title {
  font-size: 1.5rem;
}

#home__testimony-swiper {
  width: 100%;
}

.home__testimony-quotes {
  position: absolute;
  top: -30px;
  right: 280px;
  color: white;
  text-shadow: -1px 0 #676767, 0 1px #676767, 1px 0 #676767, 0 -1px #676767;
  font-size: 320px;
  opacity: 0.3;
}

.home__testimony-image {
  object-fit: cover;
  width: 267px;
  height: 266px;
}
.testi-frame-image {
  position: relative;
}
.testi-frame-image::before {
  position: absolute;
  content: "";
  background: url("data:image/svg+xml,%3Csvg width='445' height='210' viewBox='0 0 445 210' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0H445V210V60V51C444.5 43.5 436.5 37 426 45L322.5 110V50C322.5 50 323 44.5 317.5 42C312 39.5 308.5 42 308.5 42C292.5 51.5 200.5 109.797 200.5 109.797V48.5C200.5 48.5 200 44.5 195.5 42C191 39.5 187 42 187 42L47 129.5L4 156.5L1 160L0 164V0Z' fill='%23F1F1F1'/%3E%3C/svg%3E%0A");
  background-size: 100% auto;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  z-index: 10;
  top: 0px;
  left: 0px;
}

.home__testimony-detail {
  position: absolute;
  bottom: -110%;
  right: 10px;
}

.home__testimony-text-container {
  padding-top: 5rem !important;
  /* fill: #e3e3e3; */
  /* width: 100%; */
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 731 262' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.5 242C0.5 252.77 9.23045 261.5 20 261.5L711 261.5C721.77 261.5 730.5 252.77 730.5 242V69.9704C730.5 64.4067 728.123 59.1078 723.968 55.4077L667.854 5.43726C664.283 2.25708 659.668 0.5 654.886 0.5L20 0.5C9.23045 0.5 0.5 9.23044 0.5 20L0.5 242Z' fill='%23E3E3E3' stroke='%23E3E3E3'/%3E%3C/svg%3E%0A");
  background-size: 100% auto;
  background-repeat: no-repeat;
}

.home__testimony-text-wrapper {
  /* max-width: 380px; */
}

.home__testimony-large-text {
  font-size: 16px;
}

.home__testimony-small-text {
  font-size: 17px;
}

.home__testimony-swiper-button {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #eb2765;
  cursor: pointer;
  color: white;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  transition: all 0.3s;
}

.home__testimony-swiper-button.swiper-button-disabled {
  background-color: transparent;
  cursor: default;
  color: black;
}

@media (min-width: 405px) {
  .home__testimony-detail {
    bottom: -95%;
  }
}

@media (min-width: 500px) {
  .home__testimony-title {
    font-size: 1.75rem;
  }

  .home__testimony-quotes {
    font-size: 400px;
    top: -50px;
    right: 320px;
  }

  .home__testimony-image {
    width: 300px;
    height: 300px;
  }

  .home__testimony-detail {
    bottom: -85%;
  }

  .home__testimony-text-wrapper {
    /* max-width: 430px; */
  }

  .home__testimony-large-text {
    font-size: 18px;
  }

  .home__testimony-small-text {
    font-size: 15px;
  }
}

@media (min-width: 576px) {
  .home__testimony-section {
    margin-bottom: 8rem;
  }

  .home__testimony-quotes {
    top: -60px;
  }

  .home__testimony-image {
    width: 320px;
    height: 320px;
  }

  .home__testimony-detail {
    bottom: -55%;
    left: 0;
    right: 10%;
  }

  .home__testimony-text-wrapper {
    /* max-width: 630px; */
  }

  .home__testimony-large-text {
    font-size: 16px;
  }

  .home__testimony-small-text {
    font-size: 17px;
  }
}

@media (min-width: 768px) {
  .home__testimony-section {
    margin-bottom: 3rem;
  }

  .home__project-image-text-facility {
    position: absolute;
    bottom: 1.5rem;
    left: 0.4rem;
    right: 0.4rem;
    z-index: 3;
    font-size: 0.7rem;
  }

  .home__testimony-quotes {
    top: 10px;
    right: 400px;
    opacity: 0.2;
  }

  .home__testimony-image {
    width: 400px;
    height: 400px;
  }

  .home__testimony-detail {
    bottom: -10%;
    right: 17%;
  }
}

@media (min-width: 992px) {
  .home__testimony-section {
    margin-bottom: 4rem;
  }

  .home__testimony-title {
    font-size: 34px;
  }

  .home__testimony-quotes {
    font-size: 500px;
    top: 0;
    right: 444px;
  }

  .home__testimony-image {
    width: 444px;
    height: 444px;
  }

  .home__testimony-detail {
    bottom: -15%;
  }

  .home__testimony-large-text {
    font-size: 20px;
  }

  .home__testimony-small-text {
    font-size: 14px;
  }
}

@media (min-width: 1200px) {
  .home__testimony-section {
    /* max-width: 1258px; */
    margin: 0 auto;
  }

  .home__testimony-quotes {
    top: -10%;
    right: 450px;
  }

  .home__testimony-detail {
    bottom: -5%;
  }
}

/* ------------------------------
Join Us Section
------------------------------ */
.home__join-us-image {
  position: relative;
  margin-top: -0.25rem !important;
  margin-bottom: -0.25rem !important;
  padding-top: 2rem;
}
.home__join-us-image::before {
  position: absolute;
  content: "";
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: -2;
  background-image: linear-gradient(#ffffff80, #ffffff20 50%, #ffffff00);
  width: 220px;
  height: 200px;
  clip-path: polygon(40% 0, 60% 0, 100% 100%, 0% 100%);
}
.home__join-us-triangle {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  background-image: linear-gradient(#ffffff80, #ffffff20 50%, #ffffff00);
  width: 220px;
  height: 200px;
  clip-path: polygon(40% 0, 60% 0, 100% 100%, 0% 100%);
}

.home__join-us-ellipse {
  position: absolute;
  top: 0;
  left: 40%;
  background-image: radial-gradient(#fb6897, #eb2765 60%);
  width: 300px;
  height: 300px;
  border-radius: 50%;
}

.home__join-us-bg-text {
  position: absolute;
  top: 0;
  left: 5%;
  z-index: 1;
  font-weight: 900;
  opacity: 0.05;
  font-size: 200px;
  line-height: 160px;
}

.home__join-us-content {
  position: relative;
  z-index: 3;
}

.home__join-us-title {
  font-size: 34px;
}

.home__join-us-text {
  font-size: 18px;
}

.home__join-us-button {
  border: 2px solid white;
}

.home__chair-image {
  width: 120px;
}

.h-card-facility {
  height: 100%;
}

@media (min-width: 992px) {
  .padding-global {
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .padding-sub-global {
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .home__join-us-section {
    min-height: 160px;
  }

  .home__join-us-triangle {
    left: 0;
    transform: translateX(5rem);
    width: 200px;
    height: 180px;
  }

  .home__join-us-ellipse {
    left: 5rem;
    width: 250px;
    height: 250px;
    background-image: radial-gradient(#fb6897, #eb2765 75%);
  }

  .home__join-us-text {
    font-size: 16px;
  }

  .home__chair-image {
    width: 150px;
  }

  .h-card-facility {
    height: 50%;
  }
}

@media (min-width: 1087px) {
  .home__join-us-bg-text {
    left: 10%;
  }
  .home__project-image-text-facility {
    position: absolute;
    bottom: 3.5rem;
    left: 0.4rem;
    right: 0.4rem;
    z-index: 3;
    font-size: 0.7rem;
  }
}

@media (min-width: 1200px) {
  .home__join-us-triangle {
    transform: translateX(7rem);
  }

  .home__join-us-ellipse {
    left: 7rem;
  }

  .home__join-us-bg-text {
    left: 20%;
  }

  .home__join-us-content {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .home__project-image-text-facility {
    position: absolute;
    bottom: 2.5rem;
    left: 0.4rem;
    right: 0.4rem;
    z-index: 3;
    font-size: 0.7rem;
  }
}

.text-p-title {
  font-size: 13px;
  line-height: 130%;
  word-break: break-word;
}

.text-p-14 {
  font-size: 11px;
  line-height: 130%;
  word-break: break-word;
}

.text-short-link {
  font-size: 28px;
  line-height: 120%;
  word-break: break-word;
  left: 250px;
}
.text-title-product {
  font-size: 14px;
  line-height: 120%;
}

a {
  color: black;
  text-decoration: none;
}

.bg-pink {
  background-color: #eb2765;
}

.text-pink,
.text-pink1 {
  color: #eb2765;
}

.text-green,
.text-green1 {
  color: #5ec093;
}

.text-blue,
.text-blue1 {
  color: #3f68ff;
}

.text-yellow,
.text-yellow1 {
  color: #ffc107;
}

.bg-gray-1 {
  background-color: #f1f1f1;
}
.bg-gray-2 {
  background: #e8e8e8;
}

.custom-shape {
  display: flex;
  gap: 1rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 2rem;
  padding-left: 1rem;
  padding-right: 1rem;
  background-color: #f6f6f6;
  color: #000;
  width: 109px;
  height: 121px;
  clip-path: path(
    "M0 36.8154C0 28.8812 4.69011 21.6972 11.9539 18.5053L46.0193 3.53574C51.1467 1.28256 56.984 1.28256 62.1115 3.53574L96.1768 18.5053C103.441 21.6972 108.131 28.8812 108.131 36.8154V100.401C108.131 111.447 99.1764 120.401 88.1307 120.401H20C8.95432 120.401 0 111.447 0 100.401V36.8154Z"
  );
}
.img-icon-banner {
  width: 96px;
  height: 54px;
}

.custom-shape.active {
  background-color: #eb2765;
  color: #fff;
}

.custom-shape:hover {
  background-color: #eb2765;
  color: #fff;
}

.w-fit {
  width: fit-content !important;
}

.padding-global {
  padding-left: 1rem;
  padding-right: 1rem;
}

.padding-sub-global {
  padding-left: 0;
  padding-right: 0;
}
.img-banner {
  width: 100%;
  height: 312px;
}
.two-card-left {
  position: relative;
  z-index: 2;
  height: 277px;
  width: 75%;
  top: 30px;
  margin: auto;
}

.two-card-right {
  position: relative;
  width: 100%;
  z-index: 1;
  min-height: 438px;
  /* padding-left: 100px !important; */
}
.two-card-right-image {
  position: relative;
  width: 100%;
  z-index: 1;
  /* min-height: 438px; */
  padding-left: 100px !important;
}
.two-card-left-2 {
  position: relative;
  z-index: 2;
  height: 277px;
  width: 75%;
  bottom: 30px;
  margin: auto;
}

.two-card-right-2 {
  position: relative;
  width: 100%;
  min-height: 438px;
  z-index: 1;
  /* padding-left: 100px !important; */
}
.two-card-left.v-2 {
  top: -120px;
}

@media (min-width: 768px) {
  .two-card-left-md {
    top: 0px;
    left: 30px;
    width: 100%;
    /* max-width: 600px; */
    margin: 0 !important;
  }
  .two-card-left.v-2 {
    top: initial;
  }

  .two-card-right-md {
    right: 30px;
    padding-left: 100px !important;
    /* max-width: 600px; */
  }
  .two-card-right-md-image {
    right: 30px;
    /* padding-left: 100px !important; */
    /* max-width: 600px; */
  }
  .two-card-left-md-2 {
    top: 0px;
    right: 30px;
    width: 100%;
    /* max-width: 600px; */
    margin: 0 !important;
  }

  .two-card-right-md-2 {
    left: 30px;
    padding-right: 100px !important;
    /* max-width: 600px; */
  }
}

@media (min-width: 1024px) {
  body {
    font-family: "Gotham", sans-serif;
    margin: 0;
    padding: 0;
    color: #191d22;
    font-size: 16px;
  }

  .img-banner {
    width: 100%;
    height: 436px;
  }

  /* Untuk ukuran layar besar (lg) */
  .padding-global {
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .padding-sub-global {
    padding-left: 6rem;
    padding-right: 6rem;
  }
  .custom-shape {
    width: 141px;
    height: 156px;
    display: flex;
    gap: 1rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 2rem;
    background-color: #f6f6f6;
    clip-path: path(
      "M0 44.5968C0 36.6218 4.73792 29.409 12.057 26.2418L62.557 4.38841C67.6252 2.19519 73.3748 2.19519 78.443 4.38841L128.943 26.2418C136.262 29.409 141 36.6218 141 44.5969V135.559C141 146.605 132.046 155.559 121 155.559H20C8.95431 155.559 0 146.605 0 135.559V44.5968Z"
    );
  }
  h1 {
    font-weight: bold;
    font-size: 40px;
    line-height: 120%;
    word-break: break-word;
  }

  h2 {
    font-weight: bold;
    font-size: 32px;
    line-height: 120%;
    word-break: break-word;
  }

  h3 {
    font-weight: bold;
    font-size: 30px;
    line-height: 120%;
    word-break: break-word;
  }

  h4 {
    font-size: 16px;
    line-height: 120%;
    font-weight: bold;
    word-break: break-word;
  }

  .text-p-title {
    font-size: 18px;
    line-height: 130%;
    word-break: break-word;
  }

  .text-p-14 {
    font-size: 14px;
    line-height: 130%;
    word-break: break-word;
  }

  .text-short-link {
    font-size: 22px;
    line-height: 120%;
    word-break: break-word;
  }
  .text-title-product {
    font-size: 20px;
    line-height: 120%;
  }
}

@media (min-width: 768px) {
  .two-card-left-md {
    top: 0px;
    left: 30px;
    width: 100%;
    /* max-width: 600px; */
    margin: 0 !important;
  }
  .two-card-left.v-2 {
    top: initial;
  }

  .two-card-right-md {
    right: 30px;
    padding-left: 100px !important;
    /* max-width: 600px; */
  }
  .two-card-right-md-image {
    right: 30px;
    /* padding-left: 100px !important; */
    /* max-width: 600px; */
  }
  .two-card-left-md-2 {
    top: 0px;
    right: 30px;
    width: 100%;
    /* max-width: 600px; */
    margin: 0 !important;
  }

  .two-card-right-md-2 {
    left: 30px;
    padding-right: 100px !important;
    /* max-width: 600px; */
  }
}

.certification__section {
  /* background-image: url("../images/certification/bg.png"); */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem 3rem;
  align-items: center;
  justify-content: center;
  padding: 3rem;
}

@media (min-width: 576px) {
  .certification__section {
    grid-template-columns: repeat(4, 1fr);
    column-gap: 1rem;
  }
}

@media (min-width: 992px) {
  .certification__section {
    padding-left: 7rem;
    grid-template-columns: repeat(5, 1fr);
    padding-right: 7rem;
  }
}

.certification__image {
  min-width: 68px;
  max-width: 120px;
}

#rcw-description {
  /* background-color: #fff; */
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.grid {
  display: grid;
}

@media (min-width: 1024px) {
  .grid-lg {
    display: grid !important;
  }
}

.grid-cols-6 {
  grid-template-columns: repeat(6, 1fr);
}

.grid-cols-5 {
  grid-template-columns: repeat(5, 1fr);
}
.grid-cols-4 {
  grid-template-columns: repeat(4, 1fr);
}
.grid-cols-3 {
  grid-template-columns: repeat(3, 1fr);
}
.grid-cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.col-span-6 {
  grid-column: span 6 / span 6;
}
.col-span-5 {
  grid-column: span 5 / span 5;
}
.col-span-4 {
  grid-column: span 4 / span 4;
}
.col-span-3 {
  grid-column: span 3 / span 3;
}
.col-span-2 {
  grid-column: span 2 / span 2;
}

.box-card {
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  /* height: auto; */
}

.card-people {
  background: #f6f6f6 !important;
  border-radius: 15px;
  /* background-image: url("../images/coil/related.png"); */
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.bg-rcw-a {
  /* background-image: url("../images/rcw/bg-banner1.png"); */
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 420px;
  /* transform: rotate(180); */
}
.bg-rcw-b {
  /* background-image: url("../images/rcw/bg-banner-rcwb.png"); */
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;

  /* transform: rotate(180); */
}
.bg-linear {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.045) 17.3%,
    rgba(255, 255, 255, 0.9) 81.36%,
    rgba(255, 255, 255, 0.9) 110.28%
  );
}
.slider-product .swiper-button-prev::after,
.slider-product .swiper-button-next::after {
  display: none; /* Hilangkan ikon bawaan */
}
.slider-product .swiper-button-prev.v2::after,
.slider-product .swiper-button-next.v2::after {
  display: none; /* Hilangkan ikon bawaan */
}
.slider-product .swiper-slide {
  text-align: center;
  /* Center slide text vertically */
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.slider-product .swiper-button-prev,
.slider-product .swiper-button-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  z-index: 10;
}

.slider-product .swiper-button-prev {
  left: 10px;
}

.slider-product .swiper-button-next {
  right: 10px;
}
.slider-product .swiper-button-prev.v2,
.slider-product .swiper-button-next.v2 {
  position: absolute;
  top: 100%;
  transform: translateY(-50%);
  cursor: pointer;
  z-index: 10;
}

.slider-product .swiper-button-prev.v2 {
  left: calc(50% - 27px);
}

.slider-product .swiper-button-next.v2 {
  right: calc(50% - 27px);
}

/* Sesuaikan ukuran dan efek hover */
.slider-product .swiper-button-prev svg,
.slider-product .swiper-button-next svg {
  transition: transform 0.3s;
}

.slider-product .swiper-button-prev:hover svg,
.slider-product .swiper-button-next:hover svg {
  transform: scale(1.1);
}

.rcwa-tabs {
  color: #191d22;
  background-color: transparent;
  cursor: pointer;
}
.rcwa-tabs.active {
  background-color: #eb2765;
  color: white;
  font-weight: bold;
}
.rcwa-tabs:hover {
  background-color: #eb2765;
  color: white;
  cursor: pointer;
  font-weight: bold;
}

.card-product-rcwa {
  transition: all 0.3s ease; /* Agar perubahan terlihat halus */
  padding: 1rem;
}
.card-product-rcwa-label {
  background-color: #eb2765;
  color: white;
}

.card-product-rcwa:hover {
  background: #ffffff;
  /* border: 1px solid #E6E6E6; */
  box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.25);
  border-radius: 20px;
}
.card-product-rcwa:hover .card-product-rcwa-label {
  background: transparent;
  color: #eb2765; /* Ubah teks menjadi hitam */
  transition: all 0.3s ease; /* Transisi untuk perubahan */
  font-weight: bold;
}

.coil-img-label {
  width: 75px;
  height: 75px;
}

@media (min-width: 1024px) {
  .coil-img-label {
    width: 145px;
    height: 145px;
  }
  .slider-product .swiper-button-prev.v2 {
    left: 43%;
  }

  .slider-product .swiper-button-next.v2 {
    left: 46%;
  }
}

.custom-shape-color-outside {
  position: relative;
  z-index: 2;
  width: 236px;
  height: 200px;
  display: flex;
  gap: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  clip-path: path(
    "M0 67.0456C0 59.3439 4.42227 52.3265 11.37 49.0033L109.37 2.12789C114.827 -0.482419 121.173 -0.482414 126.63 2.1279L224.63 49.0033C231.578 52.3265 236 59.3439 236 67.0456V170C236 181.046 227.046 190 216 190H20C8.95431 190 0 181.046 0 170V67.0456Z"
  );
}

.custom-shape-border-bottom {
  position: absolute;
  bottom: 1px;
}

.custom-shape-color-shadow-bottom {
  background: radial-gradient(
    50% 50% at 50% 50%,
    #000000 27.9%,
    rgba(0, 0, 0, 0) 100%
  );
  width: 274px;
  height: 41px;
  bottom: 1px;
  z-index: 1;
  left: -20px;
}

.custom-shape-color-shadow-right {
  background: radial-gradient(
    50% 50% at 50% 50%,
    #393434 0%,
    rgba(0, 0, 0, 0) 100%
  );
  width: 324px;
  height: 345px;
  bottom: 1px;
  z-index: 1;
  right: -277px;
  top: -68px;
}

.custom-shape-color-recommended {
  position: absolute;
  z-index: 3;
  right: px;
  top: 20px;
  width: 100%;
  height: 100%;
  background: no-repeat right/30% url(../images/color/rekomended.png);
}

.custom-shape-color-inside {
  width: 222px;
  height: 134px;
  display: flex;
  gap: 1rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #0c0b0b;
  clip-path: path(
    "M0 67.0591C0 59.4516 4.31597 52.5028 11.1354 49.131L101.635 4.38311C107.222 1.62066 113.778 1.62066 119.365 4.38311L209.865 49.131C216.684 52.5028 221 59.4516 221 67.0591V113C221 124.046 212.046 133 201 133H20C8.9543 133 0 124.046 0 113V67.0591Z"
  );
  position: relative;
  z-index: 2;
}

.custom-shape-color.active {
  background-color: #eb2765;
}

.polygon {
  clip-path: polygon(100% 39%, 62% 0, 0 100%);
}

.clip-svg {
  clip-path: url(#myClipPolygon);
}

.list-color > .items.active {
  border-bottom: 2px solid #4a4a4a;
}

.color-items {
  height: 33px;
  width: 33px;
  cursor: pointer;
  user-select: none;
}

.color-image {
  display: none;
}

.color-image.active {
  display: flex;
}

.color-content {
  display: none;
}
.color-content.active {
  display: flex;
  flex-direction: column;
}
.container-catalog-preview {
  width: 100%;
  height: 450px;
  margin-top: 1rem;
  display: flex;
  justify-content: center;
}

.catalog-preview {
  width: max-content;
  display: flex;
  gap: 1rem;
  padding-top: 1.5rem;
  height: max-content;
}
.catalog-preview .items-catalog-preview {
  width: 204px;
  aspect-ratio: 200/333;
  position: relative;
  transition: ease-in-out 0.5s;
}
.catalog-preview .items-catalog-preview:hover {
  scale: 1.1;
}
.catalog-preview .items-catalog-preview:hover::before {
  position: absolute;
  content: "";
  bottom: -6px;
  left: 0;
  z-index: 4;
  width: 100%;
  height: 10px;
  transform: translateY(7px);
  margin: 0 auto;
  border-radius: 50%;
  background-image: radial-gradient(#000000ff, #00000000);
  opacity: 0.9;
}

.catalog-preview .items-catalog-preview > img {
  object-fit: cover;
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 333' fill='none' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M0.860779 61.9131C0.860779 54.3863 5.08658 47.4969 11.7958 44.0854L93.3655 2.60929C99.0617 -0.287105 105.799 -0.287108 111.495 2.60929L193.065 44.0854C199.774 47.4969 204 54.3863 204 61.9131V312.835C204 323.881 195.046 332.835 184 332.835H20.8608C9.81509 332.835 0.860779 323.881 0.860779 312.835V61.9131Z' fill='black' /%3E%3C/svg%3E");
  mask-size: fill;
  width: 100%;
  height: 100%;
  mask-repeat: no-repeat;
}

.catalog-preview .items-catalog-preview .body-catalog-preview {
  position: absolute;
  background: linear-gradient(rgba(0, 0, 0, 0), #c90040);
  width: 100%;
  border-bottom-right-radius: 14px;
  border-bottom-left-radius: 14px;
  color: #fff;
  bottom: 0;
  left: 0;
  padding: 1rem;
  line-height: 19.2px;
}

.ic-search {
  content: url("data:image/svg+xml,%3Csvg width='18' height='19' viewBox='0 0 18 19' fill='none' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M8.1 0C12.5735 0 16.2 3.64568 16.2 8.14286C16.2 10.3032 15.3631 12.267 13.9975 13.7247C14.0169 13.735 14.0344 13.7477 14.0516 13.7612L14.1364 13.8364L17.7364 17.4555C18.0879 17.8088 18.0879 18.3817 17.7364 18.735C17.412 19.0612 16.9015 19.0862 16.5484 18.8103L16.4636 18.735L12.8636 15.116C12.7865 15.0384 12.7263 14.9504 12.683 14.8564C11.3811 15.7581 9.80184 16.2857 8.1 16.2857C3.62649 16.2857 0 12.64 0 8.14286C0 3.64568 3.62649 0 8.1 0ZM8.1 1.80952C4.62061 1.80952 1.8 4.64505 1.8 8.14286C1.8 11.6407 4.62061 14.4762 8.1 14.4762C11.5794 14.4762 14.4 11.6407 14.4 8.14286C14.4 4.64505 11.5794 1.80952 8.1 1.80952Z' fill='%23191D22' /%3E%3C/svg%3E");
}

.top-nav-form-search {
  display: none;
  position: absolute;
  opacity: 0;
  right: 0;
  transition: opacity 1s;
  bottom: -2.5rem;
}
.top-search-nav {
  cursor: pointer;
  user-select: none;
}

.top-nav-form-search .ic-search {
  filter: invert(1);
}
@keyframes show {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.top-nav-form-search.show {
  display: block;
  opacity: 1;
  animation-name: show;
  animation-duration: 0.25s;
}

.swiper-hero-banner-next {
  content: url("data:image/svg+xml,%3Csvg width='18' height='32' viewBox='0 0 7 14' fill='none' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M0.259211 0.219788C-0.066215 0.531838 -0.0881996 1.06077 0.210107 1.40119L5.117 7L0.210107 12.5988C-0.0633407 12.9109 -0.0676551 13.3813 0.184185 13.6979L0.259211 13.7802C0.584636 14.0923 1.09027 14.0693 1.38858 13.7288L6.78989 7.56502C6.79334 7.56109 6.79674 7.55713 6.8001 7.55315L6.74079 7.61638C6.77739 7.58129 6.81015 7.54345 6.83904 7.50345C6.84967 7.4886 6.85978 7.47359 6.86936 7.45833C6.87914 7.44289 6.88843 7.42692 6.89717 7.41071C6.90511 7.39593 6.91247 7.38126 6.91938 7.36643C6.92755 7.34893 6.93523 7.33082 6.94227 7.3125C6.94855 7.29628 6.9543 7.27985 6.95954 7.2633C6.96467 7.24688 6.96931 7.23051 6.97347 7.21403C6.97815 7.19572 6.98218 7.17722 6.98559 7.15863C6.98905 7.13952 6.99192 7.12029 6.99416 7.101C6.99583 7.08697 6.99713 7.07268 6.99807 7.05838C6.99936 7.03867 7.00001 7.01909 7 6.9995C6.99999 6.98033 6.99934 6.96104 6.99806 6.94179C6.99713 6.92732 6.99583 6.91303 6.99418 6.89877C6.99192 6.8797 6.98904 6.86048 6.98553 6.84136C6.98218 6.82278 6.97815 6.80428 6.97352 6.78591C6.96931 6.76949 6.96467 6.75312 6.95954 6.73688C6.9543 6.72015 6.94855 6.70372 6.94229 6.68746C6.93523 6.66918 6.92755 6.65107 6.91923 6.63322C6.91247 6.61874 6.9051 6.60407 6.89729 6.58959C6.88843 6.57308 6.87914 6.55711 6.86929 6.54143C6.85978 6.52641 6.84967 6.5114 6.83902 6.49667C6.81015 6.45655 6.77739 6.41871 6.74079 6.38362L6.8001 6.44685C6.79674 6.44287 6.79334 6.43891 6.78989 6.43498L1.38858 0.271153C1.09027 -0.0692662 0.584636 -0.092263 0.259211 0.219788Z' fill='currentColor' %3E%3C/path%3E%3C/svg%3E");
  filter: invert(1);
}

.swiper-hero-banner-prev {
  content: url("data:image/svg+xml,%3Csvg width='18' height='32' viewBox='0 0 7 14' fill='none' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M0.259211 0.219788C-0.066215 0.531838 -0.0881996 1.06077 0.210107 1.40119L5.117 7L0.210107 12.5988C-0.0633407 12.9109 -0.0676551 13.3813 0.184185 13.6979L0.259211 13.7802C0.584636 14.0923 1.09027 14.0693 1.38858 13.7288L6.78989 7.56502C6.79334 7.56109 6.79674 7.55713 6.8001 7.55315L6.74079 7.61638C6.77739 7.58129 6.81015 7.54345 6.83904 7.50345C6.84967 7.4886 6.85978 7.47359 6.86936 7.45833C6.87914 7.44289 6.88843 7.42692 6.89717 7.41071C6.90511 7.39593 6.91247 7.38126 6.91938 7.36643C6.92755 7.34893 6.93523 7.33082 6.94227 7.3125C6.94855 7.29628 6.9543 7.27985 6.95954 7.2633C6.96467 7.24688 6.96931 7.23051 6.97347 7.21403C6.97815 7.19572 6.98218 7.17722 6.98559 7.15863C6.98905 7.13952 6.99192 7.12029 6.99416 7.101C6.99583 7.08697 6.99713 7.07268 6.99807 7.05838C6.99936 7.03867 7.00001 7.01909 7 6.9995C6.99999 6.98033 6.99934 6.96104 6.99806 6.94179C6.99713 6.92732 6.99583 6.91303 6.99418 6.89877C6.99192 6.8797 6.98904 6.86048 6.98553 6.84136C6.98218 6.82278 6.97815 6.80428 6.97352 6.78591C6.96931 6.76949 6.96467 6.75312 6.95954 6.73688C6.9543 6.72015 6.94855 6.70372 6.94229 6.68746C6.93523 6.66918 6.92755 6.65107 6.91923 6.63322C6.91247 6.61874 6.9051 6.60407 6.89729 6.58959C6.88843 6.57308 6.87914 6.55711 6.86929 6.54143C6.85978 6.52641 6.84967 6.5114 6.83902 6.49667C6.81015 6.45655 6.77739 6.41871 6.74079 6.38362L6.8001 6.44685C6.79674 6.44287 6.79334 6.43891 6.78989 6.43498L1.38858 0.271153C1.09027 -0.0692662 0.584636 -0.092263 0.259211 0.219788Z' fill='currentColor' %3E%3C/path%3E%3C/svg%3E");
  filter: invert(1);
  rotate: 180deg;
}

.icon-next {
  content: url("data:image/svg+xml,%3Csvg width='18' height='32' viewBox='0 0 7 14' fill='none' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M0.259211 0.219788C-0.066215 0.531838 -0.0881996 1.06077 0.210107 1.40119L5.117 7L0.210107 12.5988C-0.0633407 12.9109 -0.0676551 13.3813 0.184185 13.6979L0.259211 13.7802C0.584636 14.0923 1.09027 14.0693 1.38858 13.7288L6.78989 7.56502C6.79334 7.56109 6.79674 7.55713 6.8001 7.55315L6.74079 7.61638C6.77739 7.58129 6.81015 7.54345 6.83904 7.50345C6.84967 7.4886 6.85978 7.47359 6.86936 7.45833C6.87914 7.44289 6.88843 7.42692 6.89717 7.41071C6.90511 7.39593 6.91247 7.38126 6.91938 7.36643C6.92755 7.34893 6.93523 7.33082 6.94227 7.3125C6.94855 7.29628 6.9543 7.27985 6.95954 7.2633C6.96467 7.24688 6.96931 7.23051 6.97347 7.21403C6.97815 7.19572 6.98218 7.17722 6.98559 7.15863C6.98905 7.13952 6.99192 7.12029 6.99416 7.101C6.99583 7.08697 6.99713 7.07268 6.99807 7.05838C6.99936 7.03867 7.00001 7.01909 7 6.9995C6.99999 6.98033 6.99934 6.96104 6.99806 6.94179C6.99713 6.92732 6.99583 6.91303 6.99418 6.89877C6.99192 6.8797 6.98904 6.86048 6.98553 6.84136C6.98218 6.82278 6.97815 6.80428 6.97352 6.78591C6.96931 6.76949 6.96467 6.75312 6.95954 6.73688C6.9543 6.72015 6.94855 6.70372 6.94229 6.68746C6.93523 6.66918 6.92755 6.65107 6.91923 6.63322C6.91247 6.61874 6.9051 6.60407 6.89729 6.58959C6.88843 6.57308 6.87914 6.55711 6.86929 6.54143C6.85978 6.52641 6.84967 6.5114 6.83902 6.49667C6.81015 6.45655 6.77739 6.41871 6.74079 6.38362L6.8001 6.44685C6.79674 6.44287 6.79334 6.43891 6.78989 6.43498L1.38858 0.271153C1.09027 -0.0692662 0.584636 -0.092263 0.259211 0.219788Z' fill='currentColor' %3E%3C/path%3E%3C/svg%3E");
  filter: invert(1);
}

.icon-prev {
  content: url("data:image/svg+xml,%3Csvg width='18' height='32' viewBox='0 0 7 14' fill='none' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M0.259211 0.219788C-0.066215 0.531838 -0.0881996 1.06077 0.210107 1.40119L5.117 7L0.210107 12.5988C-0.0633407 12.9109 -0.0676551 13.3813 0.184185 13.6979L0.259211 13.7802C0.584636 14.0923 1.09027 14.0693 1.38858 13.7288L6.78989 7.56502C6.79334 7.56109 6.79674 7.55713 6.8001 7.55315L6.74079 7.61638C6.77739 7.58129 6.81015 7.54345 6.83904 7.50345C6.84967 7.4886 6.85978 7.47359 6.86936 7.45833C6.87914 7.44289 6.88843 7.42692 6.89717 7.41071C6.90511 7.39593 6.91247 7.38126 6.91938 7.36643C6.92755 7.34893 6.93523 7.33082 6.94227 7.3125C6.94855 7.29628 6.9543 7.27985 6.95954 7.2633C6.96467 7.24688 6.96931 7.23051 6.97347 7.21403C6.97815 7.19572 6.98218 7.17722 6.98559 7.15863C6.98905 7.13952 6.99192 7.12029 6.99416 7.101C6.99583 7.08697 6.99713 7.07268 6.99807 7.05838C6.99936 7.03867 7.00001 7.01909 7 6.9995C6.99999 6.98033 6.99934 6.96104 6.99806 6.94179C6.99713 6.92732 6.99583 6.91303 6.99418 6.89877C6.99192 6.8797 6.98904 6.86048 6.98553 6.84136C6.98218 6.82278 6.97815 6.80428 6.97352 6.78591C6.96931 6.76949 6.96467 6.75312 6.95954 6.73688C6.9543 6.72015 6.94855 6.70372 6.94229 6.68746C6.93523 6.66918 6.92755 6.65107 6.91923 6.63322C6.91247 6.61874 6.9051 6.60407 6.89729 6.58959C6.88843 6.57308 6.87914 6.55711 6.86929 6.54143C6.85978 6.52641 6.84967 6.5114 6.83902 6.49667C6.81015 6.45655 6.77739 6.41871 6.74079 6.38362L6.8001 6.44685C6.79674 6.44287 6.79334 6.43891 6.78989 6.43498L1.38858 0.271153C1.09027 -0.0692662 0.584636 -0.092263 0.259211 0.219788Z' fill='currentColor' %3E%3C/path%3E%3C/svg%3E");
  filter: invert(1);
  rotate: 180deg;
}

.icon-next-pink {
  content: url("data:image/svg+xml, %3Csvg width='37' height='37' viewBox='0 0 37 37' fill='none' xmlns='http://www.w3.org/2000/svg' %3E%3Ccircle cx='18.5' cy='18.5' r='18.5' fill='%23EB2765'%3E%3C/circle%3E%3Cpath d='M15.3333 9.29828C14.9149 9.72178 14.8866 10.4396 15.2701 10.9016L21.579 18.5L15.2701 26.0984C14.9186 26.5219 14.913 27.1604 15.2368 27.59L15.3333 27.7017C15.7517 28.1252 16.4018 28.094 16.7853 27.632L23.7299 19.2668L16.7853 9.36799C16.4018 8.906 15.7517 8.87479 15.3333 9.29828Z' fill='white' %3E%3C/path%3E%3C/svg%3E");
}

.icon-prev-pink {
  content: url("data:image/svg+xml, %3Csvg width='37' height='37' viewBox='0 0 37 37' fill='none' xmlns='http://www.w3.org/2000/svg' %3E%3Ccircle cx='18.5' cy='18.5' r='18.5' fill='%23EB2765'%3E%3C/circle%3E%3Cpath d='M15.3333 9.29828C14.9149 9.72178 14.8866 10.4396 15.2701 10.9016L21.579 18.5L15.2701 26.0984C14.9186 26.5219 14.913 27.1604 15.2368 27.59L15.3333 27.7017C15.7517 28.1252 16.4018 28.094 16.7853 27.632L23.7299 19.2668L16.7853 9.36799C16.4018 8.906 15.7517 8.87479 15.3333 9.29828Z' fill='white' %3E%3C/path%3E%3C/svg%3E");
  rotate: 180deg;
}

.icon-chevron-3 {
  content: url("data:image/svg+xml,%3Csvg width='10' height='14' viewBox='0 0 10 14' fill='none' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath opacity='0.5' d='M0 14L4.59016 7L0 0H5.04918L9.63934 7L5.04918 14H0Z' fill='%23EB2765' %3E%3C/path%3E%3C/svg%3E");
}

.vidplayer {
  display: none;
  min-height: 90vh;
  position: relative;
}

.vidplayer iframe {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

.rcw__article-section {
  position: relative;
  background-color: #eb2765;
  padding-bottom: 3rem;
}

.rcw__article-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  opacity: 0.2;
  background-image: url("../images/home/article/article-bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.rcw__article-top {
  padding: 2rem 3rem 0;
  z-index: 2;
}

.rcw__article-swiper-container {
  max-width: 300px;
  height: 400px;
  overflow-x: hidden;
  margin: 0 auto;
}

#rcw__article-swiper {
  overflow: visible;
}

#rcw__article-swiper .swiper-wrapper {
  overflow: visible;
  max-width: 900px;
}

#rcw__article-swiper .swiper-slide {
  width: 250px;
  transition: all 0.3s;
}

#rcw__article-swiper .swiper-slide-active {
  transform: scale(1.2);
}

.rcw__article-card {
  overflow: hidden;
  width: 100%;
  height: 300px;
  border: 0;
  box-shadow: 0 5px 20px 2px rgba(0, 0, 0, 0.4);
}

.rcw__article-image {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.rcw__article-date {
  font-size: 1rem;
}

.rcw__article-title {
  font-size: 1.25rem;
}

.rcw__article-swiper-button::after {
  font-size: 20px;
}

.rcw__article-section .swiper-pagination {
  width: 100% !important;
}

.rcw__article-section .swiper-pagination-bullet {
  background-color: white;
  opacity: 1;
  transform: scale(1) !important;
}

.rcw__article-section .swiper-pagination-bullet-active {
  background-color: black;
  width: 25px;
  border-radius: 20px;
}

@media (min-width: 576px) {
  .rcw__article-section {
    padding-bottom: 3rem;
    margin: 0 0;
  }

  .rcw__article-top {
    padding: 2rem 3rem;
  }

  .rcw__article-swiper-container {
    position: absolute;
    top: -35%;
    left: 50%;
    z-index: 1;
    max-width: 250px;
    height: 300px;
  }

  #rcw__article-swiper .swiper-wrapper {
    max-width: 900px;
  }

  #rcw__article-swiper .swiper-slide {
    width: 200px;
  }

  .rcw__article-card {
    height: 220px;
    box-shadow: none;
    border: 1px solid #bebebe;
  }

  .rcw__article-image {
    height: 100px;
  }

  .rcw__article-date {
    font-size: 0.8rem;
  }

  .rcw__article-title {
    font-size: 1rem;
  }
}

@media (min-width: 800px) {
  .rcw__article-swiper-container {
    left: 35%;
    max-width: 500px;
  }

  .rcw__article-date {
    font-size: 0.8rem;
  }

  .rcw__article-title {
    font-size: 1rem;
  }
}

@media (min-width: 992px) {
  .rcw__article-section {
    padding: 2rem 3rem;
  }

  .rcw__article-swiper-container {
    max-width: 600px;
  }
}

@media (min-width: 1200px) {
  .rcw__article-section {
    padding: 2rem 4rem;
  }

  .rcw__article-swiper-container {
    left: 30%;
    max-width: 750px;
  }
}

#rcw-product {
  background-color: #fff;
  /* margin-top: 1rem; */
}

.dynamic-content {
  display: flex;
  gap: 1rem;
  flex-direction: column;
}

.dynamic-content > img,
.dynamic-content > p > img {
  max-width: 100%;
}

.dynamic-content table td {
  border: 0 !important;
  display: flex;
  width: 100%;
  gap: 1rem;
  align-items: center;
}

.dynamic-content table tr {
  border: 0 !important;
  width: 100%;
  display: flex;
}

.search-header {
  position: relative;
  z-index: 3;
}

.list-search {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.list-search .item-search {
  display: flex;
  background-color: #fff;
  border-radius: 1rem;
  gap: 1rem;
  padding: 2rem;
}

.list-search .item-search img {
  width: 100px;
}
.search-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-top: 1rem;
  margin-top: -3rem;
  z-index: 3;
}
.search-result-section {
  background-color: #f6f6f6;
  padding: 1rem;
  border-radius: 10px;
}

.coil-slide {
  cursor: pointer;
  user-select: none;
}

.coil-slide img {
  width: 100%;
}

.container-advan-swiper {
  position: relative;
  .swiper-button-prev {
    position: absolute;
    left: 4px;
  }
}

.container-product-swiper {
  position: relative;
  .swiper-button-prev {
    position: absolute;
    left: 0px;
  }
}

#advan-swiper {
  margin-left: 2.5rem;
  margin-right: 2.5rem;
  margin-top: 1rem;
}
#product-swiper {
  margin-left: 2.5rem;
  margin-right: 2.5rem;
}

.h-14px {
  height: 14px;
}

.home_news-section {
  position: relative;
  background-color: #eb2765;
}

.home_news-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  opacity: 0.2;
  background-image: url(../images/home/article/article-bg.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.popup-slide {
  user-select: none;
  cursor: pointer;
}

.icon-close {
  content: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg id='Layer_1' style='enable-background:new 0 0 512 512;' version='1.1' viewBox='0 0 512 512' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath d='M443.6,387.1L312.4,255.4l131.5-130c5.4-5.4,5.4-14.2,0-19.6l-37.4-37.6c-2.6-2.6-6.1-4-9.8-4c-3.7,0-7.2,1.5-9.8,4 L256,197.8L124.9,68.3c-2.6-2.6-6.1-4-9.8-4c-3.7,0-7.2,1.5-9.8,4L68,105.9c-5.4,5.4-5.4,14.2,0,19.6l131.5,130L68.4,387.1 c-2.6,2.6-4.1,6.1-4.1,9.8c0,3.7,1.4,7.2,4.1,9.8l37.4,37.6c2.7,2.7,6.2,4.1,9.8,4.1c3.5,0,7.1-1.3,9.8-4.1L256,313.1l130.7,131.1 c2.7,2.7,6.2,4.1,9.8,4.1c3.5,0,7.1-1.3,9.8-4.1l37.4-37.6c2.6-2.6,4.1-6.1,4.1-9.8C447.7,393.2,446.2,389.7,443.6,387.1z'/%3E%3C/svg%3E");
  height: 32px;
  width: 32px;
}
.mobile-child-menu.card {
  display: none;
}

.close-mobile-child-menu {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 100;
  cursor: pointer;
  user-select: none;
}
.mobile-child-menu-box {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 100;
  height: 100vh;
  background-color: #fff;
}
.mobile-child-menu-box .mobile-child-menu.card {
  display: block;
}

.desktop-child-menu-container {
  position: relative;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  height: 89vh;
  overflow: auto;
  padding-left: 9rem;
  padding-right: 9rem;
}

.mobile-child-menu-container {
  position: relative;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-height: 89vh;
  overflow: auto;
}
@media (max-width: 550px) {
  .text-short-link {
    font-size: 16px;
    line-height: 120%;
    word-break: break-word;
    left: 200px;
  }

  .search-header {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .dynamic-content table tr {
    flex-direction: column;
  }
  div.container-breadcrumb {
    width: 100%;
    overflow: hidden;
  }
  ol.breadcrumb {
    width: max-content;
  }
  .title-detail-rcw {
    flex-direction: column;
  }
  .two-card-left {
    width: 90%;
  }
  .two-card-left p {
    font-size: 15px;
  }
}

@media (max-width: 423px) {
  .text-short-link {
    font-size: 16px;
    line-height: 120%;
    word-break: break-word;
    right: 0;
    width: 100px;
  }
}

/* .home__banner { */
/* min-height: 100vh;
} */
.home__product-section {
  min-height: 100vh;
}
.home-project-showcase {
  margin-left: auto;
  margin-right: auto;
  max-width: 92%;
  min-height: 100vh;
}
.home__testimony-section {
  min-height: 100vh;
}

.thumb-list-project {
  position: relative;
}

.thumb-list-project .thumb-project-code {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 0.25rem;
  padding-left: 1rem;
  padding-right: 1rem;
  color: #fff;
  background-color: #eb2765;
  border-radius: 10px;
  font-weight: 700;
}

.home__project-detail-box,
.home__project-image {
  aspect-ratio: 1/1;
  object-fit: cover;
  height: auto;
  min-height: auto;
}

.home__project::before {
  aspect-ratio: 1/1;
}

.home__project-card div {
  min-width: 25%;
}
.home__project {
  height: auto !important;
}

.home__individual-project {
  height: auto !important;
}

.h-card-facility {
  height: auto !important;
}

.home__individual-project.landscape-mode .home__project-image {
  aspect-ratio: 2/1;
  object-fit: cover;
  height: auto;
  min-height: auto;
}