@import url("https://fonts.googleapis.com/css2?family=EB+Garamond&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=EB+Garamond&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

@media screen and (max-width: 1440px) {
  .same-height {
    height: 50%;
    display: flex;
    align-items: center;
    padding-right: calc(((100vw - 100%) * 0.1)) !important;
  }
}

@media screen and (min-width: 721px) {
  .desktop-hidden {
    display: none !important;
  }
}

@media screen and (max-width: 720px) {
    .navbar-toggler-icon{
        background-image: url('../../assets/img/navbar-toggle-icon.png') !important;
    }
    .navbar-toggler{
        border: none;
    }
  #banner-top {
    background-size: cover;
    margin-top: 50px !important
  }
  .heading-contact {
    margin-top: 1rem;
    font-size: 26px !important;
  }

  .subheading-contact {
    font-size: 12px !important;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }
  .copyright-content {
    font-size: 10px !important;
    margin-top: 1rem !important;
    margin-bottom: 2rem !important;
  }
  .footer-content,
  .content-contact {
    font-size: 14px !important;
  }
  .footer-heading,
  .subheading-contact {
    font-size: 14px !important;
  }

  #mobile-vision-row {
    height: 100% !important;
    width: 105%;
  }
  .mobile-same-height {
    height: 50% !important;
  }
  .heading-company {
    font-size: 12px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: normal !important;
    letter-spacing: 2.4px !important;
  }
  .heading-xl-company {
    font-size: 36px !important;
    font-style: normal !important;
    font-weight: 300 !important;
    line-height: 38px !important;
  }
  .mobile-hidden {
    display: none;
  }
  .section-header {
    font-size: 26px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 120% !important; /* 31.2px */
  }
  .about-subtitle {
    font-size: 11px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: normal !important;
  }
  .about-content {
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: normal !important;
  }
  .vision-content {
    font-size: 12px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: normal !important;
  }
  .quality-content,
  .product-subheading {
    font-size: 11px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: normal !important;
  }
  .p-company {
    font-size: 12px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: normal !important;
    letter-spacing: 0.6px !important;
  }
  #banner-top,
  #about,
  #vision-mission,
  #quality,
  #wecare,
  #contact {
    min-height: 331px !important;
  }
  #products {
    min-height: 200px !important;
  }
  #product-row {
    min-height: 200px !important;
  }
  .mobile-reverse {
    display: flex !important;
    flex-direction: column-reverse !important;
  }
  .mobile-certificate {
    width: 80px;
    object-fit: contain;
  }
  .map-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 200px;
    padding-bottom: 2rem;
  }
  th {
    font-size: 12px !important;
  }
  tr {
    font-size: 11px !important;
    vertical-align: middle;
  }
  td {
    padding: 0 !important;
  }
  .footer-logo {
    width: 160px;
    margin-top: 2rem;
  }
  .kampanyapic {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
  #kampanyacontrol {
    width: 100%;
    text-align: center;
  }
}

#navbarTogglerDemo03 {
  max-width: 550px;
}

.map-iframe {
  width: 100%;
  height: 100%;
}

:root {
  --bs-primary: rgba(249, 70, 28, 1) !important;
  --bs-primary-forty: rgba(249, 70, 28, 0.4) !important;
  --bs-primary-twenty: rgba(249, 70, 28, 0.2) !important;
  --bs-white: rgba(255, 255, 255, 1) !important;
  --bs-table-striped-bg: rgba(255, 255, 255, 1) !important;
  --bs-table-bg: rgba(255, 255, 255, 1) !important;
}

a {
  color: #ffffff;
}

a:visited {
  color: #ffffff;
}

a:hover {
  color: rgba(255, 255, 255, 0.75);
}

body {
  font-family: "Montserrat" !important;
}

hr {
  color: var(--bs-primary);
  height: 2px !important;
  opacity: 1 !important;
}

textprimary {
  color: var(--bs-primary);
}

.bg-orange {
  background-color: var(--bs-primary);
}

.bg-primary-40 {
  background-color: var(--bs-primary-forty);
}

.bg-primary-20 {
  background-color: var(--bs-primary-twenty);
}

.color-primary {
  color: var(--bs-primary);
}

.color-white {
  color: var(--bs-white);
}

.same-height {
  height: 50%;
  display: flex;
  align-items: center;
  padding-right: calc(((100vw - 100%) * 0.25));
}

#banner-top {
  min-height: 638px;
  margin-top:75px;
}

#about {
  min-height: 502px;
  background-size: fit;
  background-repeat: no-repeat;
}

#vision-mission {
  min-height: 448px;
}

.vision-bg {
  background-size: cover;
  background-repeat: no-repeat;
}

#quality {
  min-height: 599px;
  background-repeat: no-repeat;
}

#products {
  min-height: 448px;
  background-size: cover;
  backdrop-filter: brightness(70%);
}

.certificate {
  margin-left: 25px;
  margin-right: 25px;
}

.wecare-container {
  min-height: 394px;
}

#wecare {
  background-position: right center;
  background-repeat: no-repeat;
}

#contact {
  min-height: 750px;
}

.bg-footer {
  background-color: #353735;
  min-height: 265px;
}

.footer-logo-container {
  margin-right: 50px;
}

.contact-container {
  margin-right: 50px;
}

/* FONTS */

.heading-company {
  font-family: Montserrat;
  font-size: 22px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 4.4px;
}

.heading-xl-company {
  font-family: Montserrat;
  font-size: 72px;
  font-style: normal;
  font-weight: 300;
  line-height: 80px; /* 111.111% */
}

.section-header {
  color: #f9461c;
  font-family: Montserrat;
  font-size: 38px;
  font-style: normal;
  font-weight: 400;
  line-height: 122%; /* 46.36px */
}

.p-company {
  font-family: Poppins;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 1px;
}

.about-subtitle {
  color: rgba(0, 0, 0, 0.6);
  font-family: Poppins;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.about-content {
  color: rgba(53, 55, 53, 0.8);
  font-family: Poppins;
  font-size: 28px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.quality-content {
  color: rgba(53, 55, 53, 0.8);
  font-family: Poppins;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.vision-content {
  color: rgba(53, 55, 53, 0.8);
  font-family: Poppins;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.product-heading {
  font-family: Montserrat;
  font-size: 38px;
  font-style: normal;
  font-weight: 400;
  line-height: 122%; /* 46.36px */
}

.product-subheading {
  color: #fff;
  font-family: Poppins;
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.product-number {
  color: #fff;
  font-family: Montserrat;
  font-size: calc(32px + 6 * ((100vw - 320px) / 100));
  font-style: normal;
  font-weight: 300;
  line-height: normal;
  letter-spacing: -5.68px;
  vertical-align: top;
  margin-bottom: 125px;
}

sup {
  top: -0.75em;
  font-size: 0.5em;
}

.product-col {
  padding-left: 15px;
  padding-right: 50px;
}

#product-row {
  min-height: 448px;
}

.heading-contact {
  color: #fff;
  font-family: Montserrat;
  font-size: 38px;
  font-style: normal;
  font-weight: 400;
  line-height: 122%; /* 46.36px */
}

.subheading-contact {
  color: #ffa48a;
  font-family: Poppins;
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.content-contact {
  color: #fff;
  font-family: Poppins;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.wecare-content {
  color: rgba(53, 55, 53, 0.8);
  font-family: Poppins;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.footer-heading {
  color: #f9461c;
  font-family: Poppins;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.footer-content {
  color: #fff;
  font-family: Poppins;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.copyright-content {
  color: #fff;
  font-family: Poppins;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-top: 50px;
}

.mobile-product-number {
  color: #fff;
  font-family: Montserrat;
  font-size: 84px;
  font-style: normal;
  font-weight: 300;
  line-height: 120%; /* 115.2px */
  letter-spacing: -3.84px;
}

/* IMAGES */

#navbar-psb-logo {
  height: 100%;
  object-fit: contain;
}

/* BUTTON TABS */

.navbar {
  border-bottom: 4px solid #f9461c;
}

.nav-link {
  padding: 1rem 1rem !important;
}

.nav-tabs .nav-link.active {
  background-color: rgba(249, 70, 28, 0.55) !important;
  border: none;
}

#product-tabs-ul {
  height: 100%;
  border: none;
}

#navbar-tabs-ul {
  height: 100%;
  border: none;
}

#navbar-tabs-ul a {
  color: #f9461c;
  font-family: Poppins;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

#navbar-tabs-ul a:hover {
  color: #fff;
  font-family: Poppins;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

#product-tabs-ul li {
  width: 33.3%;
}

#product-tabs-ul button {
  width: 100%;
}

#navbar-tabs-ul .nav-item:hover {
  border: none;
  background-color: #f9461c !important;
}

.nav-tabs .nav-link:hover {
  border: none;
  background-color: rgba(249, 70, 28, 0.25) !important;
}

.nav-tabs .nav-link.active:hover {
  border: none;
  background-color: rgba(249, 70, 28, 0.65) !important;
}

.prod-tabs {
  height: 100%;
}

/* TABLE */

th {
  color: #fff;
  text-align: center;
  font-family: Poppins;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.96px;
  background-color: #f9461c !important;
}

tr {
  color: rgba(53, 55, 53, 0.8);
  text-align: center;
  font-family: Poppins;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.table-striped > tbody > tr:nth-of-type(2n + 1) {
  background-color: #fff !important;
}

.table-striped > tbody > tr:nth-of-type(2n) {
  background-color: var(--bs-primary-twenty);
}

td {
  width: 47%;
}

.table-separator {
  width: 6%;
}