* {
  box-sizing: border-box;
}

:root {
  --primary: #e3bb42;
  --text1: #fff;
  --text2: #143112;
}

@font-face {
  font-family: Playfair;
  src: url("../fonts/Playfair_Display_SC/PlayfairDisplaySC-Bold.ttf");
}

@font-face {
  font-family: DBHeavent;
  src: url("../fonts/DB/DBHeavent.ttf");
}

@font-face {
  font-family: ChonburiRegular;
  src: url("../fonts/Chonburi/ChonburiRegular.ttf");
}

.container-fluid {
  max-width: 1440px;
  margin: 0 auto;
}

.title {
  font-family: Playfair;
  font-weight: 700;
  color: var(--primary) !important;
}

.kanit-regular {
  font-family: "Kanit", sans-serif;
  font-weight: 300;
  color: var(--primary) !important;
}

.kanit {
  font-family: "Kanit", sans-serif;
}

.playfair {
  font-family: Playfair;
}

.kanit-bold {
  font-family: "Kanit", sans-serif;
  font-weight: 500;
}

.DBHeavent-font {
  font-family: DBHeavent;
  font-weight: 500;
}

/* // <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 100 to 900 */

.noto-sans-thai {
  font-family: "Noto Sans Thai", sans-serif;
  font-style: normal;
}

.chonburi-font {
  font-family: ChonburiRegular;
  font-weight: 500;
}

.DBHeavent-italic {
  font-family: DBHeavent;
  font-style: italic;
}

.acme {
  font-family: "Acme", sans-serif;
}

.title-sm {
  font-family: Playfair;
  font-weight: 700;
  color: #216A07;
}

.subtitle {
  font-family: Playfair;
  font-weight: 400;
  color: var(--primary) !important;
}
.subtitle-sm {
  font-family: Playfair;
  font-weight: 500;
  color: #216A07;
}
.content {
  font-family: "Kanit", sans-serif;
  line-height: 30.29px;
  font-weight: 300;
}

.abeezee-regular {
  font-family: "ABeeZee", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.abeezee-regular-italic {
  font-family: "ABeeZee", sans-serif;
  font-weight: 400;
  font-style: italic;
}


.btn-buyproduct {
  background: linear-gradient(180deg, #e3bb42 -34.51%, #eeac04 100%);
  border-radius: 8px;
  padding: 10px;
  color: #014a36;
}

.btn-submit {
  background: linear-gradient(180deg, #e3bb42 -34.51%, #100%);
  border-radius: 8px;
  padding: 7px;
}

.text-color2 {
  color: var(--text2) !important;
}

.font-poppin {
  font-family: "Poppins";
}

.eng {
  font-family: "Playfair Display SC", serif;
}

.promotion_pills {
  display: inline-flex;
  background: red;
  align-items: center;
  border-radius: 20px;
  background: #d4e1e6;
  justify-content: center;
}

.promotion_pills {
  position: absolute;
  top: calc((370 / 1080) * 100%);
  left: calc(640 / 1080 * 100%);
}

.promotion_pills h2 {
  font-size: clamp(10px, 2vw, 36px);
}

.promotion_pills .left_box {
  background: linear-gradient(87deg, rgba(237, 177, 23, 1) 0%, rgba(229, 188, 63, 1) 100%);
  padding: 0px 32px;
  border-radius: 40px;
}

.promotion_pills .right_box {
  padding: 0px 32px;
  border-top-right-radius: 40px;
}

.promotion_price {
  position: absolute;
  top: calc((420 / 1080) * 100%);
  left: calc(640 / 1080 * 100%);
}
.promotion_price-sm {
  position: absolute;
  top: calc((800 / 1080) * 100%);
  left: calc(400 / 1080 * 100%);
}
.promotion_price h3 {
  font-size: clamp(70px, 10vw, 150px);
  font-weight: 600;

  background: linear-gradient(0deg, rgba(237, 177, 23, 1) 0%, rgba(229, 188, 63, 1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media screen and (max-width: 540px) {
  .promotion_price h3 {
    font-size: clamp(50px, 10vw, 150px);
  }

  .promotion_pills .left_box {
    padding: 0px 20px;
  }

  .promotion_pills .right_box {
    padding: 0px 20px;
  }
}

@media screen and (max-width: 404px) {
  .promotion_pills .left_box {
    padding: 0px 12px;
  }

  .promotion_pills .right_box {
    padding: 0px 12px;
  }
}