:root {
  --color-primary-50: #DEF3F2;
  --color-primary-100: #ADE2DE;
  --color-primary-200: #74CFC9;
  --color-primary-base: #29BCB2;
  --color-primary-400: #00ADA1;
  --color-primary-500: #009D8F;
  --color-primary-600: #009081;
  --color-primary-700: #006F61;
  --color-primary-800: #005344;
  --color-primary-900: #005344;

  --color-info-base: #49B0C3;
  --color-info-500: #008BAD;
  --color-info-600: #008CAE;

  --color-secondary-50: #FEF3E9;
  --color-secondary-100: #FDE7D2;
  --color-secondary-200: #FBCEA5;
  --color-secondary-300: #FAB679;
  --color-secondary-400: #F89D4C;
  --color-secondary-base: #F6851F;
  --color-secondary-600: #C56A19;
  --color-secondary-700: #62350C;
  --color-secondary-800: #311B06;
  --color-secondary-1000: #DB761D;

  --color-gray-50: #F7F7F7;
  --color-gray-100: #E6E6E6;
  --color-gray-200: #C1C1C1;
  --color-gray-300: #808082;
  --color-gray-400: #636363;
  --color-gray-500: #383938;

  --color-bg-01: #FFFFFF;
  --color-bg-02: #F7F7F7;
  --color-bg-03: #F7F9FB;
  --color-bg-04: #85878B;

  --color-blue-info: #008CCF;

  --error-500-base: #EA4335;

  font-size: 16px;
  --menu-hightlight-height: 40px;
  --menu-height: 70px;

  --color-primary-hover: #29bcb2;
  --color-primary-hover-light: #DEF3F2;

}

body {
  color: var(--color-gray-400);
  font-size: 1rem;
  font-family: 'Questrial';
  overflow-x: hidden;
}
.thai-only {
  display: none;
}

.fi::before {
  vertical-align: middle;
}

::placeholder {
  color: var(--color-gray-300);
}

h1,
h2,
h3,
h4 {
  color: var(--color-gray-500);
}

h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.7rem;
}

h3 {
  font-size: 1.5rem;
}

h4 {
  font-size: 1.25rem;
}

.p1 {
  font-size: 0.875rem;
}

.p2 {
  font-size: 1rem;
}

.p3 {
  font-size: 1.125rem;
}

.h4 {
  font-size: 1.5rem;
  line-height: 2rem;
  color: var(--color-gray-500);
}

.h5 {
  font-size: 1.3rem;
  line-height: 2rem;
  color: var(--color-gray-500);
}

.bg-gray {
  background-color: var(--color-bg-03);
  border-radius: 24px;
}

.productCard {
  border-radius: 12px;
  border: 0.5px solid var(--color-bg-03);
  background: var(--color-bg-03);
  padding: 16px;
  position: relative;
  height: 100%;
}

.productCard:hover {
  cursor: pointer;
  border: 0.5px solid var(--color-primary-base);
  background: var(--color-bg-02);
}

.productCard .title {
  font-size: 20px;
  font-weight: 100;
  text-align: center;
  line-height: 150%;
}

.productCard .originalPrice {
  font-size: 24px;
  color: var(--color-gray-200);
  text-decoration-line: line-through;
}

.productCard .salePrice {
  font-size: 28px;
  margin-left: 10px;
  color: var(--color-gray-500);
}

.btn-geneus-orange {
  border-radius: 32px;
  border: 1px solid var(--color-secondary-base);
  background: var(--color-secondary-base);
  padding: 7px 28px;
  margin: 5px 0px;
  color: #fff;
}

.btn-geneus-orange:hover,
.btn.btn-geneus-orange:active {
  border: 1px solid var(--color-secondary-base);
  color: var(--color-secondary-base);
  background-color: #fff;
}

.btn-geneus-orange:disabled {
  border: 1px solid var(--color-secondary-base);
  background: var(--color-secondary-base);
  color: #fff;
  pointer-events: none;
  opacity: var(--bs-btn-disabled-opacity);
}

.btn-geneus-green {
  border-radius: 32px;
  padding: 7px 28px;
  border: 1px solid var(--color-primary-base);
  background: var(--color-primary-base);
  color: #fff;
}

.btn-geneus-green:hover,
.btn.btn-geneus-green:active {
  border: 1px solid var(--color-primary-base);
  background: var(--color-primary-base);
  color: #fff;
  opacity: 0.8;
}

.btn-geneus-green:disabled {
  border: 0px;
  background: var(--color-gray-50);
  color: var(--color-gray-200);
  pointer-events: none;
  opacity: var(--bs-btn-disabled-opacity);
}


.btn-geneus-orange-outline {
  border: 1px solid var(--color-secondary-base);
  color: var(--color-secondary-base);
  background-color: transparent;
  border-radius: 32px;
  margin: 5px 2px;
  padding: 7px 28px;
}

.btn-geneus-orange-outline:hover {
  border: 1px solid var(--color-secondary-600);
  color: var(--color-secondary-600);
  background-color: var(--color-gray-50);
}

.btn-geneus-blue {
  border-radius: 32px;
  border: 1px solid var(--color-info-base);
  background: var(--color-info-base);
  padding: 7px 28px;
  margin: 5px 2px;
  color: #fff;
}

.btn-geneus-blue:hover,
.btn.btn-geneus-blue:active {
  border: 1px solid var(--color-info-base);
  color: var(--color-info-base);
  background-color: #fff;
}

.btn-geneus-blue:disabled {
  border: 1px solid var(--color-info-base);
  background: var(--color-info-base);
  color: #fff;
  pointer-events: none;
  opacity: var(--bs-btn-disabled-opacity);
}

.btn-geneus-blue-white {
  border-radius: 32px;
  border: 1px solid var(--color-info-base);
  background: #fff;
  padding: 7px 28px;
  margin: 5px 2px;
  color: var(--color-info-base);
}

.btn-geneus-blue-white:hover,
.btn.btn-geneus-blue-white:active {
  border: 1px solid #ffffff;
  color: #ffffff;
  background-color: var(--color-info-base);
}

.btn-geneus-blue-white:disabled {
  border: 1px solid var(--color-info-base);
  background: var(--color-info-base);
  color: #fff;
  pointer-events: none;
  opacity: var(--bs-btn-disabled-opacity);
}

.btn-geneus-blue-outline {
  border: 1px solid var(--color-info-base);
  color: var(--color-info-base);
  background-color: transparent;
  border-radius: 32px;
  margin: 5px 2px;
  padding: 7px 28px;
}

.btn-geneus-blue-outline:hover {
  border: 1px solid var(--color-info-500);
  color: var(--color-info-500);
  background-color: var(--color-gray-50);
}

.btn-geneus-premium-plus {
  color: #ffffff;
  /* background: linear-gradient(135deg, #5CB1B5 0.58%, #96C0A0 23.15%, #C2CC91 39.41%, #E3D585 55.93%, #C0A557 74.58%, #986D21 100.58%) padding-box,
    linear-gradient(45deg, #5CB1B5 0.58%, #96C0A0 23.15%, #C2CC91 39.41%, #E3D585 55.93%, #C0A557 74.58%, #986D21 100.58%) border-box; */
    background: linear-gradient(90deg, #CAAD5E 0%, #986D20 27.6%, #7C561C 100%) padding-box,
    linear-gradient(90deg, #CAAD5E 0%, #986D20 27.6%, #7C561C 100%) border-box;

  /* background: linear-gradient(90deg, #CAAD5E 0%, #986D20 27.6%, #7C561C 100%); */
  border: 1px solid transparent;
  border-radius: 50px;
  margin: 5px 2px;
  padding: 7px 28px;
}

.btn-geneus-premium-plus:hover {
  background: linear-gradient(#fff, #fff) padding-box,
  linear-gradient(90deg, #CAAD5E 0%, #986D20 27.6%, #7C561C 100%) border-box;
  border: 1px solid transparent;
  border-radius: 50px;
  margin: 5px 2px;
  padding: 7px 28px;
  color: #986D21;
}

.btn-geneus-premium-outline {
  background: linear-gradient(#fff, #fff) padding-box,
    linear-gradient(45deg, #F0CF30, #D08E2D, #B4832C) border-box;
  border: 1px solid transparent;
  border-radius: 50px;
  margin: 5px 2px;
  padding: 7px 28px;
  color: #D08E2D;
}

.btn-geneus-premium-outline:hover {
  color: #ffffff;
  background: linear-gradient(to right, #F0CF30, #D08E2D, #B4832C) padding-box,
    linear-gradient(45deg, #F0CF30, #D08E2D, #B4832C) border-box;
  border: 1px solid transparent;
}




.btn-geneus-premium {
  color: #ffffff;
  background: linear-gradient(to right, #F0CF30, #D08E2D, #B4832C) padding-box,
    linear-gradient(45deg, #F0CF30, #D08E2D, #B4832C) border-box;
  border: 1px solid transparent;
  border-radius: 50px;
  margin: 5px 2px;
  padding: 7px 28px;
}

.btn-geneus-premium:hover {
  background: linear-gradient(#fff, #fff) padding-box,
    linear-gradient(45deg, #F0CF30, #D08E2D, #B4832C) border-box;
  border: 1px solid transparent;
  border-radius: 50px;
  margin: 5px 2px;
  padding: 7px 28px;
  color: #D08E2D;
}

.btn-geneus-cancel {
  border: 1px solid var(--color-primary-base);
  color: var(--color-primary-base);
  background-color: transparent;
  border-radius: 12px;
  margin: 5px 2px;
  padding: 7px 28px;
}

.btn-geneus-cancel:hover {
  border: 0;
  background-color: var(--color-gray-200);
  border-radius: 12px;
  margin: 5px 2px;
}

.btn-gray-outline {
  border: solid 1px var(--color-gray-300);
  border-radius: 32px;
  padding: 7px;
}

.btn-geneus-cancel:focus,
.btn-geneus-cancel:focus-visible,
.btn-geneus-cancel:active {
  border: 0;
  background-color: var(--color-gray-200);
  border-radius: 12px;
  margin: 5px 2px;
  outline: none;
}


.btn-geneus-green-outline {
  border: 1px solid var(--color-primary-base);
  color: var(--color-primary-base);
  background-color: transparent;
  border-radius: 32px;
  margin: 5px 2px;
  padding: 7px 28px;
}

.btn-geneus-green-outline:hover {
  border: 1px solid var(--color-primary-base);
  color: #FFFFFF;
  background-color: var(--color-primary-base);
  border-radius: 32px;
  margin: 5px 2px;
}

.btn-geneus-green-outline:disabled {
  border: 1px solid var(--color-primary-base);
  color: var(--color-primary-base);
  pointer-events: none;
  opacity: var(--bs-btn-disabled-opacity);
}

.btn-geneus-link {
  border: 1px solid transparent;
  color: var(--color-gray-200);
  background-color: #fff;
  border-radius: 12px;
  margin: 5px 2px;
}

.btn-geneus-link:hover {
  border: 1px solid transparent;
  color: var(--color-primary-base);
  background-color: var(--color-gray-50);
  border-radius: 12px;
  margin: 5px 2px;
}

.btn-geneus-link:disabled {
  border: 1px solid var(--color-primary-base);
  background: var(--color-primary-base);
  color: #fff;
  pointer-events: none;
  opacity: var(--bs-btn-disabled-opacity);
}

.btn-geneus-link-orange {
  border: none;
  color: var(--color-secondary-base);
  text-decoration: underline;
  padding: 10px 0px;
}

.btn-geneus-link-orange:hover {
  color: var(--color-secondary-600)
}

.btn-geneus-link-green {
  border: none;
  color: var(--color-primary-400);
  text-decoration: underline;
  padding: 10px 0px;
}
.btn-geneus-blue-link {
  border: none;
  color: #008CCF;
  text-decoration: none;
  padding: 10px 0px;
}
.btn-geneus-blue-link:hover {
  color: #006fa3;
}

.btn-geneus-cancel {
  padding: 14px;
  border-radius: 12px;
  border: none;
  background-color: none;
  color: var(--color-gray-300);
}

.btn-geneus-cancel:hover {
  border: none;
  background-color: #F7F7F7;
  cursor: pointer;

}

.back-page {
  color: var(--color-gray-300);
  text-decoration: none;
}

.mobile-w100 {
  width: initial;
}

.btn-geneus-gray {
  padding: 14px;
  border-radius: 12px;
  border: none;
  background-color: none;
  color: var(--color-gray-300);
  text-decoration: none;
}

.btn-geneus-gray:hover {
  background-color: var(--color-gray-50);
  color: var(--color-gray-300);
  cursor: pointer;
}

.care-icon {
  content: url(../images/icons/care_icon.svg);
  vertical-align: middle;
}

/* .btn-geneus-outline-green {
  border-radius: 5px;
  border: 1px solid var(--color-primary-base);
  color: var(--color-primary-base);
}

.btn-geneus-outline-green:hover {
  border-radius: 5px;
  border: 1px solid var(--color-primary-base);
  background: var(--color-primary-base);
  color: #fff;
} */

.product-detail-images img {
  max-width: 400px;
}

.product-detail-title {
  color: var(--color-primary-base);
  font-size: 28px;
}

.product-detail-line {
  width: 70%;
  text-align: center;
}

.product-detail .originalPrice {
  font-size: 15px;
  color: var(--color-gray-200);
  text-decoration-line: line-through;
}

.product-detail .salePrice {
  margin-left: 10px;
}

.product-detail .lable {
  margin-left: 10px;
}

.geneus-input {
  border-radius: 8px;
  padding: 16px !important;
  height: 45px !important;
  /*width: 293px;*/
}

.geneus-input-select {
  border-radius: 8px;
  padding-left: 16px !important;
  height: 45px !important;
}

hr.line-gray {
  border: 3px solid var(--color-bg-03);
}

.geneus-input ::placeholder {
  color: var(--color-gray-200);
}

.text-gray {
  color: var(--color-gray-200)
}

.text-orange {
  color: var(--color-secondary-base)
}

.text-red {
  color: #ff0000;
}


.offcanvas {
  height: 100svh;
  overflow-y: auto;
}

.offcanvas.offcanvas-end {
  width: 400px;
  background-color: #fff;
}

.offcanvas.offcanvas-end {
  transform: unset;
}


.section {
  border-radius: 12px;
  background: var(--color-bg-03);
}

.text-green,
.color-title-2 {
  color: var(--color-primary-base);
}

.text-blue {
  color: var(--color-info-base);
}

.text-green-400 {
  color: var(--color-primary-400);
}

.text-gray-200 {
  color: var(--color-gray-200);
}

.text-gray-300 {
  color: var(--color-gray-300);
}

.text-gray-400 {
  color: var(--color-gray-400);
}

.text-gray-500 {
  color: var(--color-gray-500);
}

.premium-plus-icon {
  background: linear-gradient(135deg, #5CB1B5 0.58%, #96C0A0 23.15%, #C2CC91 39.41%, #E3D585 55.93%, #C0A557 74.58%, #986D21 100.58%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-premium-plus {
  background: linear-gradient(90deg, #CAAD5E 0%, #986D20 27.6%, #7C561C 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-premium {
  background: linear-gradient(to right, #F0CF30, #D08E2D, #B4832C);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-standard {
  background: linear-gradient(to right, #00B2AB, #01B0AB, #03A7AC, #0799AD, #0A8FAE);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-pet-dog {
  color: #ED008C;
}

.text-multi-cancer {
  color: var(--color-info-base)
}

.cart-product-item {
  --bs-card-spacer-y: 1rem;
  --bs-card-spacer-x: 1rem;
  --bs-card-title-spacer-y: 0.5rem;
  --bs-card-title-color: ;
  --bs-card-subtitle-color: ;
  --bs-card-border-width: var(--bs-border-width);
  --bs-card-border-color: var(--bs-border-color-translucent);
  --bs-card-border-radius: var(--bs-border-radius);
  --bs-card-box-shadow: ;
  --bs-card-inner-border-radius: calc(var(--bs-border-radius) - (var(--bs-border-width)));
  --bs-card-cap-padding-y: 0.5rem;
  --bs-card-cap-padding-x: 1rem;
  --bs-card-cap-bg: rgba(var(--bs-body-color-rgb), 0.03);
  --bs-card-cap-color: ;
  --bs-card-height: ;
  --bs-card-color: ;
  --bs-card-bg: var(--color-bg-03, #F7F9FB);
  --bs-card-img-overlay-padding: 1rem;
  --bs-card-group-margin: 0.75rem;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: var(--bs-card-height);
  color: var(--bs-body-color);
  word-wrap: break-word;
  background-color: var(--bs-card-bg);
  background-clip: border-box;
  border: var(--bs-card-border-width) solid var(--bs-card-border-color);
  border-radius: 12px;

}

.img-border-radius {
  border-radius: 24px;
}

.cart-product-item .product-image {
  cursor: pointer;
}

.cart-product-item .card-title {
  font-size: 1.125rem;
}

.cart-product-item .card-text {
  font-size: 1rem;
}

.text-12 {
  font-size: 0.75rem;
  line-height: 150%;
}

.text-14 {
  font-size: 0.875rem;
  line-height: 150%;
}

.text-16 {
  font-size: 1rem;
  line-height: 150%;
}

.text-18 {
  font-size: 1.125rem;
  line-height: 150%;
}

.text-20 {
  font-size: 1.3rem;
  line-height: 150%;
}

.text-24 {
  font-size: 1.5rem;
  line-height: 150%;
}

.text-28 {
  font-size: 1.7rem;
  line-height: 150%;
}

.text-h4 {
  font-size: 1.25rem;
  line-height: 150%;
  font-weight: 500;
  color: var(--color-gray-500)
}

.text-h5 {
  font-size: 1.125rem;
  line-height: 150%;
  font-weight: 500;
  color: var(--color-gray-500)
}

.text-originalPrice {
  color: var(--color-gray-200);
  text-decoration-line: line-through;
}

.text-black {
  color: #000000;
}


.cart-product-item .item-originalPrice {
  color: var(--color-gray-200);
  text-decoration-line: line-through;
}

.offcanvas-header .offcanvas-title {
  font-size: 1.3rem;
  color: var(--color-gray-500);
  vertical-align: middle;
}

.offcanvas-body {
  line-height: 150%;
}

.btn-store {
  border-radius: 12px;
  border: 0px;
  background: transparent;
  color: #fff;
}


.btn-store:hover {
  border-radius: 12px;
  border: 0px;
  background: transparent;
  color: #fff;
  opacity: 0.8;
}

.container-body {
  min-height: calc(100vh - 460px)
}

.cardDiscount {
  border-radius: 12px;
  background: var(--background-02, #F7F9FB);
  font-size: 1rem;
}

.cardDiscount label {
  font-size: 1rem;
  color: var(--color-gray-500, #383938);
}

.cardDiscount input {
  text-align: left;
  padding: 11px 14px;
  border: 1px solid #dee2e6;
  border-radius: 12px;
  color: var(--color-gray-300);
  font-size: 1rem;
}

.cardDiscount input:focus-visible {
  border: 1px solid var(--color-primary-base);
  outline: none;
}


.cardDiscount input::placeholder {
  color: var(--gray-200, #C1C1C1);
}

.cardDiscount .applyCoupon {
  justify-content: center;
  width: 100%;
  padding: 11px 14px;
  border-radius: 12px;
  background: var(--color-secondary-base);
  color: #fff;
}


.cardDiscount .applyCoupon:disabled {
  justify-content: center;
  color: var(--gray-200, #C1C1C1);
  border-radius: 12px;
  background: var(--background-00, #FFF);
  border: 1px solid var(--gray-200, #C1C1C1);
}


.cardDiscount .applyCoupon:hover {
  background: var(--color-secondary-base);
  color: #fff;
  opacity: 0.8;
}

.cardDiscount .applyCoupon:focus,
.cardDiscount .applyCoupon:active {
  background: var(--color-secondary-1000);
  border: 1px solid var(--gray-200, #C1C1C1);
  color: #fff;
  opacity: 1;
}

.cardDiscount .pill-orange {
  color: var(--color-secondary-base, #F6851F);
  background: rgba(246, 133, 31, 0.1);
  border-radius: 12px;
  /* fontsize 18px */
  font-size: 1rem;
}

.cardDiscount .pill-orange a {
  color: var(--color-secondary-base, #F6851F);
  text-decoration: none;
}

.cardDiscount .pill-orange a:hover {
  color: var(--color-secondary-600, #C56A19);
}

.header_th {
  font-family: 'Sukhumvit';
  font-weight: bold;
}

.btn-close-circle {
  --bs-btn-close-color: #000;
  --bs-btn-close-bg: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20id%3D%22Outline%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%22512%22%20height%3D%22512%22%3E%3Cpath%20d%3D%22M23.707.293h0a1%2C1%2C0%2C0%2C0-1.414%2C0L12%2C10.586%2C1.707.293a1%2C1%2C0%2C0%2C0-1.414%2C0h0a1%2C1%2C0%2C0%2C0%2C0%2C1.414L10.586%2C12%2C.293%2C22.293a1%2C1%2C0%2C0%2C0%2C0%2C1.414h0a1%2C1%2C0%2C0%2C0%2C1.414%2C0L12%2C13.414%2C22.293%2C23.707a1%2C1%2C0%2C0%2C0%2C1.414%2C0h0a1%2C1%2C0%2C0%2C0%2C0-1.414L13.414%2C12%2C23.707%2C1.707A1%2C1%2C0%2C0%2C0%2C23.707.293Z%22%2F%3E%3C%2Fsvg%3E%0A");
  --bs-btn-close-opacity: 0.5;
  --bs-btn-close-hover-opacity: 0.75;
  --bs-btn-close-focus-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  --bs-btn-close-focus-opacity: 1;
  --bs-btn-close-disabled-opacity: 0.25;
  --bs-btn-close-white-filter: invert(1) grayscale(100%) brightness(200%);
  box-sizing: content-box;
  width: 1em;
  height: 1em;
  padding: .5em .5em;
  color: var(--color-gray-300, #808082);
  background: var(--bs-btn-close-bg) center/1em auto no-repeat;
  background-color: var(--color-gray-100);
  border: 0;
  border-radius: 50%;
  opacity: var(--bs-btn-close-opacity);
}

.btn-close-circle:hover {
  color: var(--color-gray-300, #808082);
  background-color: var(--color-gray-100);
  opacity: 0.8;
}

.geneus-input-field {
  width: 100%;
  text-align: left;
  padding: 11px 14px;
  border: 1px solid #dee2e6;
  border-radius: 12px;
  color: var(--color-gray-300);
  font-size: 1rem;
}

::placeholder,
.form-control::placeholder {
  color: #C1C1C1;
}

.geneus-input-field:focus-visible {
  border: 1px solid var(--color-primary-base);
  outline: none;
}

#subscription-news {
  padding-bottom: 8px;
}

#subscribedThankyouModal .modal-title {
  font-size: 1.5rem;
  color: var(--color-primary-base);
}

#subscribedThankyouModal .description {
  font-size: 1rem;
  color: var(--color-gray-300);
  margin-top: 16px;
}

.modal {
  z-index: 2046;
}

.modal-content {
  border-radius: 12px;
}

.mounted {
  animation: inAnimation 250ms ease-in
}

.unmounted {
  animation: outAnimation 250ms ease-out;
  animation-fill-mode: forwards;
}

.text-justify {
  text-align: justify;
}

.modal-topics .modal-body {
  padding: 48px 64px;
}

.modal-topics .topic-item {
  border-bottom: 1px solid var(--color-gray-100);
  padding: 8px 0px;
  font-size: 0.875rem;
}

.modal-topics .topic-item i {
  color: var(--color-primary-base);
}

.offcanvas-topics .topic-item i {
  color: var(--color-primary-base);
}

.offcanvas-topics .topic-item {
  border-bottom: 1px solid var(--color-gray-100);
  padding: 8px 0px;
  font-size: 0.875rem;
}

.offcanvas-topics {
  width: 400px;
  background-color: #fff;
  /* position: fixed; */
  z-index: 10000;
}

#chatWithUsModal .modal-dialog .modal-body .dropdown-row small {
  color: #636363;
}
#chatWithUsModal .modal-dialog {
  max-width: 650px;
}
.chat-with-us-modal .card-body {
  display: grid;
  grid-template-columns: 32px auto;
  gap: 4px 8px;
  padding: 12px;
}
.chat-with-us-modal .card-body div {
  display: flex;
  align-items: center;
}
.chat-with-us-modal .card-body div:last-child {
  grid-column: span 2;
  color: #636363;
  font-size: 14px;
}

/* .chat-with-us-modal {
  width: 500px;
  height: 250px;
} */

.chat-with-us-card {
  width: 100%;
  border: none;
  box-shadow: 0px 3px 5px -6px;
  background-color: var(--color-bg-03);
  text-decoration: none;
  border-radius: 12px !important;
}

.chat-with-us-card-social {
  width: 100%;
  height: 120px;
  border: none;
  box-shadow: 0px 3px 5px -6px;
  background-color: var(--color-bg-03);
  text-decoration: none;
  border-radius: 12px;
}

.chat-with-us-card-social-th {
  height: 110px;
  width: 100%;
  border: none;
  box-shadow: 0px 3px 5px -6px;
  background-color: var(--color-bg-03);
  text-decoration: none;
  border-radius: 12px;
}

.chat-with-us-card-social:hover, .chat-with-us-card-social-th:hover  {
  box-shadow: 0px 3px 6px -4px;
}

.chat-with-us-card:hover {
  box-shadow: 0px 3px 6px -4px;
}


.chat-with-us-card .card-body .icon {
  width: 50px;
}

.cc_div #c-bns {
  flex-direction: row-reverse;
}

#c-bns button:first-child,
#s-bns button:first-child {
  margin-right: 0;
  margin-left: 5px;
}

#c-bns button+button,
#s-cnt button+button {
  margin-top: 0px;
  margin-left: 0;
}

@keyframes inAnimation {
  0% {
    opacity: 0;
    visibility: hidden;
  }

  100% {
    opacity: 1;
    visibility: visible;
  }
}

@keyframes outAnimation {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    visibility: hidden;
  }
}

.text-header {
  font-size: 2rem;
}
.sub-header {
  font-size: 1.7rem;
}

.fab-wrapper {
  position: fixed;
  bottom: 15px;
  right: 15px;
  display: none;
  z-index: 20;
}
.fab-checkbox {
  display: none;
}
.fab {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: #0A8FAE;
  box-shadow: 0px 1px 4px #101828;
  z-index: 20;
  border: 1px solid #0A8FAE;
}
.fab:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border-radius: 50%;
  background-color: #0A8FAE;
}
.fab:hover {
  background: #0A8FAE;
  box-shadow: 0px 2px 6px 0px #101828;
  cursor: pointer;
}

.fab-comments {
  position: absolute;
  color: #ffffff;
  font-size: 1.25rem;
  top: 50%;
  transform: translateX(63%) translateY(-50%) rotate(0deg);
}

.fab-wheel {
  position: absolute;
  bottom: 0;
  right: 0;
  border: 1px solid transparent;
  width: 10rem;
  height: 10rem;
  transition: all 0.5s ease;
  transform-origin: bottom right;
  transform: scale(0);
}

.fab-checkbox:checked ~ .fab-wheel {
  transform: scale(1);
}
.fab-action {
  position: absolute;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: White;
  box-shadow: 0px 0px 4px #101828;
  transition: all 1s ease;
  opacity: 0;
}
.fab-action img {
  border-radius: 100%;
}

.fab-checkbox:checked ~ .fab-wheel .fab-action {
  opacity: 1;
}

.fab-action:hover {
  cursor: pointer;
  box-shadow: 0px 0px 6px #101828;
}

.fab-wheel .fab-action-1 {
  right: 0;
  top: -7rem;
}

.fab-wheel .fab-action-2 {
  right: 0;
  top: -3.5rem;
}
.fab-wheel .fab-action-3 {
  right: 0;
  top: 0rem;
}
.fab-wheel .fab-action-4 {
  right: 0;
  top: 3.5rem;
  background: linear-gradient(#00B2FF, #006AFF);
}

.img-500 {
  max-width: 501px;
  width: 100%;
}


/* cookie */
@media screen and (max-width: 688px) {

  #cm .c-bn,
  .cc_div .c-bn {
    width: 40%;
  }

  .cc_div #c-bns {
    flex-direction: row-reverse;
  }

  #c-bns button+button,
  #s-cnt button+button {
    margin-right: 0;
    margin-left: 0;
  }

  #c-bns button:first-child,
  #s-bns button:first-child {
    margin-top: 0px;
    margin-left: 5px;
  }
}



/* @media (max-width: 575.98px) {
  body {
    font-size: 16px;
  }
}

@media (max-width: 767.98px) {
  body {
    font-size: 16px;
  }
}

@media (max-width: 991.98px) {
  body {
    font-size: 16px;
  }
}

@media (max-width: 1199.98px) {
  body {
    font-size: 18px;
  }
}

@media (max-width: 1399.98px) {
  body {
    font-size: 16px;
  }
} */

/* `xxl` applies to x-large devices (large desktops, less than 1400px) */
@media (max-width: 1399.98px) {}

/* `xl` applies to large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {
  .title-head-3 {
    font-size: 28px;
  }
}

/* `lg` applies to medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
  h1 {
    font-size: 1.7rem;
    line-height: 2.5rem;
  }

  h2 {
    font-size: 1.5rem;
  }

  h3 {
    font-size: 1.3rem;
  }

  .p1 {
    font-size: 0.75rem;
  }

  .p2 {
    font-size: 0.875rem;
  }

  .p3 {
    font-size: 1rem;
  }

  .h4 {
    font-size: 1.5rem;
  }

  .h5 {
    font-size: 1.25rem;
    line-height: 2rem;
  }

  .text-h4 {
    font-size: 1.25rem;
    line-height: 150%;
    font-weight: 500;
  }

  .text-h5 {
    font-size: 1.125rem;
    line-height: 150%;
    font-weight: 500;
  }

  .text-header {
    font-size: 1.7rem;
    line-height: 2.5rem;
  }
  .sub-header {
    font-size: 1.5rem;
  }


}

@media (max-width: 767.98px) {
  :root {
    --menu-hightlight-height: 60px;
  }

  /* .pt-5 {
      padding-top: 1.5rem !important;
    } */
  /* .mt-5 {
    margin-top: 1.5rem !important;
  } */

  .btn-geneus-green {
    padding: 8px;
  }

  /* .btn-geneus-orange {
    padding: 8px;
  } */

  .mobile-w100 {
    width: 100%;
  }

  .modal-topics .modal-body {
    padding: 24px 32px;
  }

  .chat-with-us-modal {
    width: 500px;
    height: 100%;
  }

  .chat-with-us-card {
    width: 100%;
    height: 100%;
    border: none;
    box-shadow: none;
    text-decoration: none;
    border-radius: 12px;
  }

  .chat-with-us-card:hover {
    box-shadow: none;
  }

  .chat-with-us-card .card-body .icon {
    width: 2.5rem;
  }

  .offcanvas-body {
    flex-grow: 0;
  }

}

/* `sm` applies to x-small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {

  h1 {
    font-size: 1.5rem;
  }

  h2 {
    font-size: 1.2rem;
  }

  h3 {
    font-size: 1.2rem;
    line-height: 1.7rem;
  }

  .h4 {
    font-size: 1.5rem;
    line-height: 2rem;
    color: var(--color-gray-500);
  }

  .h5 {
    font-size: 1.15rem;
    line-height: 1.5rem;
    color: var(--color-gray-500);
  }

  .offcanvas.offcanvas-end {
    width: 100vw;
    border: 0px;
  }

  .chat-with-us-modal {
    /* width: 500px; */
    height: 100%;
  }

  .chat-with-us-card {
    width: 100%;
    height: 100%;
    border: 1px solid #e5e5e5;
    box-shadow: 0px 3px 5px -6px;
    /* border-radius: 30px; */
  }

  .chat-with-us-card .card-body .icon {
    width: 1.5rem;
  }

  .chat-with-us-card {
    width: 100%;
    height: 100%;
    border: none;
    box-shadow: none;
    text-decoration: none;
    /* border-radius: 30px; */
  }

  .chat-with-us-card:hover {
    box-shadow: none;
  }

  .chat-with-us-card .card-body .icon {
    width: 2.5rem;
  }

  .offcanvas-body {
    flex-grow: 0;
  }

  .chat-with-us-card-social {
    height: 95px;
  }

  .chat-with-us-card-social-th {
    height: 110px;
  }

  .icon-contact {
    font-size: 1.5rem !important;
  }

  .btn-geneus-blue-outline {
    padding: 7px 15px;
  }

  .btn-geneus-blue {
    padding: 7px 15px;
  }

  .btn-geneus-green-outline {
    padding: 7px 15px;
  }

  .text-header {
    font-size: 1.5rem;
  }
  .sub-header {
    font-size: 1.2rem;
  }

}