/*--------------------------------------------------------------
	Common
--------------------------------------------------------------*/

body {
    font-family: "Kanit", "Open Sans", sans-serif;
    font-size: 20px;
    line-height: 1.45;
    color: #000;
}

p,
ol,
ul,
blockquote {
    margin: 0 0 20px;
    color: #000;
}

/* Transition elsements */
.ss-table {
    transition: all 0.3s ease-in-out 0s;
}

/* Sections */
.navbar-custom + .main {
    margin-top: 97px;
}

.module,
.module-small {
    padding: 80px 0;
}

.llmodule,
.llmodule-smalllead {
    padding: 30px 0;
}

.moduless,
.module-smallss {
    padding: 10px 0;
}

.modulesss,
.module-smallsss {
    padding: 5px 0;
}

/* Horizonal margin, padding */
.pl-0 {
    padding-left: 0px !important;
}

.pr-0 {
    padding-right: 0px !important;
}

.ml-0 {
    margin-left: 0px !important;
}

.mr-0 {
    margin-right: 0px !important;
}

.pl-30 {
    padding-left: 30px !important;
}

hr.gold {
    border: 5px solid #00a3c7;
    clear: both;
}

/*--------------------------------------------------------------
	Typography
--------------------------------------------------------------*/

a:hover,
a:focus {
    color: #00a3c7;
}

.site-footer a:hover,
.site-footer a:focus {
    color: #223b78;
}

.module-title {
    letter-spacing: 0px;
    font-size: 34px;
    font-style: italic;
    margin: 0 0 30px;
    font-family: "Open Sans", sans-serif;
}

.module-title-2 {
    letter-spacing: 0px;
    font-size: 45px;
    font-style: italic;
    margin: 0 0 30px;
}

.fs-itl {
    font-style: italic;
}

.bg-dark p,
.bg-dark-30 p,
.bg-dark-60 p,
.bg-dark-90 p {
    color: #fff;
}

/*---------------------------------------
  SECTION               
-----------------------------------------*/
.section-padding {
    padding-top: 50px;
    padding-bottom: 50px;
}

.section-bg {
    background-color: #f0f8ff;
}

.section-overlay {
    background-color: #000;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    width: 100%;
    height: 100%;
    opacity: 0.35;
}

.section-overlay + .container {
    position: relative;
}

/*---------------------------------------
  VIDEO              
-----------------------------------------*/
.video-wrap {
    z-index: -100;
}

.custom-video {
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*---------------------------------------
  CUSTOM BUTTON               
-----------------------------------------*/
.custom-btn {
    background: #ffe661;
    border: 2px solid transparent;
    /* border-radius: 100px; */
    color: #000;
    font-size: 18px;
    font-weight: 700;
    line-height: normal;
    transition: all 0.3s;
    padding: 10px 20px;
}

.custom-btn:hover {
    background: #c01f27;
    color: #fff;
}

.custom-border-btn {
    background: transparent;
    border: 2px solid #ffe661;
    color: #ffe661;
}

.navbar-expand-lg .navbar-nav .nav-link.custom-btn:hover,
.custom-border-btn:hover {
    background: #c01f27;
    border-color: transparent;
    color: #fff;
}

.custom-btn-bg-white {
    border-color: #fff;
    color: #fff;
}

/*---------------------------------------
  Video Background
-----------------------------------------*/
.video-bg-section {
    position: relative;
    overflow: hidden;
    padding-top: 150px;
}

.video-bg-section small {
    color: #fff;
    text-transform: uppercase;
}

.video-bg-section .section-overlay {
    z-index: 2;
    opacity: 0.45;
}

.video-bg-section .container {
    position: relative;
    z-index: 2;
    height: 100%;
    padding-bottom: 50px;
}

.video-bg-section .container .row {
    height: 100%;
}

/*--------------------------------------------------------------
	Carousel
--------------------------------------------------------------*/

/* Custom style for lead graphic */
.carousel-inner > .item > a > img {
    width: 100%;
    height: auto;
}

.carousel-caption {
    background-color: rgba(0, 0, 0, 0.5);
    padding: 20px;
}

.carousel-control.right,
.carousel-control.left {
    background-image: none;
}

/*--------------------------------------------------------------
	Navbar
--------------------------------------------------------------*/
.navbar-custom {
    background-color: rgba(250, 250, 250, 1);
    font-family: "Kanit", "Roboto Condensed", sans-serif;
    letter-spacing: 0px;
    font-size: 15px;
    padding-top: 15px;
}

.navbar-custom .navbar-brand {
    letter-spacing: 2px;
    height: fit-content;
}

.navbar-custom .nav li > a {
    color: rgba(5, 5, 5, 0.7);
}

.navbar-transparent .nav li > a {
    position: relative;
    color: rgba(255, 255, 255, 0.7);
}

.navbar-transparent .in li > a {
    position: relative;
    color: rgba(5, 5, 5, 0.7);
}

.navbar-custom .nav > li > a.active {
    margin-top: auto;
    text-decoration: underline #10d6dd 2px;
    text-underline-offset: 4px;
}

.navbar-custom .nav > li > a:focus,
.navbar-custom .nav > li > a:hover,
.navbar-custom .nav .open > a,
.navbar-custom .nav .open > a:focus,
.navbar-custom .nav .open > a:hover,
.navbar-custom .dropdown-menu > li > a:focus,
.navbar-custom .dropdown-menu > li > a:hover {
    background: none;
    color: #31b7f5;
    text-decoration: underline #10d6dd 2px;
    text-underline-offset: 4px;
}

.navbar-custom .navbar-toggle .icon-bar {
    background: #000;
}

/*--------------------------------------------------------------
	LINE Chat
--------------------------------------------------------------*/

.line-chat {
    position: fixed;
    bottom: 50px;
    right: 10px;
    z-index: 999;
    font-size: 1.5rem;
    text-align: right;
}

.line-chat .chat {
    color: #e0bc75;
    font-weight: 400;
}

.line-chat .chat2 {
    -webkit-text-stroke: 0.7px #43a351;
    text-stroke: 0.7px greenyellow;
    /* color: #E0592A; */
    color: #fff;
    font-weight: 700;
}

.line-chat .chat3 {
    -webkit-text-stroke: 0.7px #008000;
    text-stroke: 0.7px greenyellow;
    /* color: #E0592A; */
    color: #fff;
    font-weight: 700;
}

.line-chat .fa-line {
    font-size: 48px;
    /* color: #00c400; */
    line-height: 0.6;
    background-color: #fff;
}

gads-chat-widget-third-party .chat-widget__container {
    position: fixed;
    bottom: 50px;
    right: 20px;
    z-index: 9997;
}

gads-chat-widget-third-party .chat-widget__tooltip {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    background: #fff;
    border-radius: 10px;
    bottom: 80px;
    -webkit-box-shadow: 0 0.62px 1.25px rgba(60, 64, 67, 0.3),
        0 1.25px 3.77px 1.25px rgba(60, 64, 67, 0.15);
    box-shadow: 0 0.62px 1.25px rgba(60, 64, 67, 0.3),
        0 1.25px 3.77px 1.25px rgba(60, 64, 67, 0.15);
    color: #3c4043;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    font-size: 1.5rem;
    gap: 22px;
    height: auto;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin: 0 auto;
    padding: 16px;
    position: absolute;
    right: 0;
    width: 155px;
}

gads-chat-widget-third-party .chat-widget__tooltip span {
    color: #e0bc75;
    font-weight: 700;
}

gads-chat-widget-third-party .chat-widget__tooltip a,
gads-chat-widget-third-party .chat-widget__tooltip a:hover {
    color: black;
    font-weight: 500;
    font-size: 14px;
    cursor: default;
}

gads-chat-widget-third-party .chat-widget__tooltip:before {
    border: solid transparent;
    border-width: 10px 10px 0;
    border-top: 15px solid #fff;
    bottom: -14px;
    content: "";
    -webkit-filter: drop-shadow(0 1.62px 1.25px rgba(60, 64, 67, 0.3));
    filter: drop-shadow(0 1.62px 1.25px rgba(60, 64, 67, 0.3));
    height: 0;
    position: absolute;
    right: 5px;
    width: 0;
}

gads-chat-widget-third-party .chat-widget__tooltip:after {
    background-color: #fff;
    bottom: 0;
    content: "";
    height: 4px;
    position: absolute;
    right: 12px;
    width: 32px;
}

@keyframes showAndHide {
    0% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        visibility: hidden;
    }
}

.appearAndDisappear {
    -webkit-animation: showAndHide 15s forwards;
    animation: showAndHide 15s forwards;
}

.row2 {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(var(--bs-gutter-y) * -1);
    margin-right: calc(var(--bs-gutter-x) / -2);
    margin-left: calc(var(--bs-gutter-x) / -2);
}

/*--------------------------------------------------------------
	Header
--------------------------------------------------------------*/
.dietary-section {
    position: relative;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center center;
    width: 100%;
    z-index: 0;
    background-size: cover;
}

.lead-section {
    position: relative;
    width: 100%;
    padding-top: 0px;
    z-index: 0;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

/*---------------------------------------
  SITE FOOTER              
-----------------------------------------*/
.site-footer {
    background-color: #333;
    position: relative;
    overflow: hidden;
    padding-bottom: 10px;
    font-size: 16px;
}

.site-footer-top {
    margin-bottom: 30px;
    padding-top: 30px;
    padding-bottom: 10px;
}

.site-footer-bottom {
    border-top: 1px solid #1f1c1c;
    margin-top: 10px;
}

.site-footer-title {
    color: #ffffff;
    font-size: 1.2em;
}

.site-footer-link,
.copyright-text {
    color: #fff;
}

.site-footer-links {
    padding-left: 0;
}

.site-footer-link:hover {
    color: #00a3c7;
}

.site-footer-link-item {
    list-style: none;
}

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

.text-white {
    color: #fff;
}

.text-white-50 {
    --bs-text-opacity: 1;
    color: rgba(255, 255, 255, 0.5) !important;
}

.text-dark-navy {
    color: #0e2358 !important;
}

.text-gold {
    color: #00a3c7;
}

.text-double {
    font-size: 2em;
}

img.line-qr {
    width: 50%;
}

/*--------------------------------------------------------------
	Accordion
--------------------------------------------------------------*/

.panel-body {
    background-color: #00a3c7;
    color: black;
}

/*---------------------------------------
  SOCIAL ICON               
-----------------------------------------*/
.social-icon {
    margin: 0;
    padding: 0;
}

.social-icon-item {
    list-style: none;
    display: inline-block;
    vertical-align: top;
}

.social-icon-link {
    color: #fff;
    font-size: 32px;
    display: block;
    margin-right: 10px;
    text-align: center;
    width: 35px;
    height: 35px;
    transition: background 0.2s, color 0.2s;
}

.social-icon-link:hover {
    color: #00a3c7;
}

.social-icon-link span {
    display: block;
}

.social-icon-link span:hover::before {
    animation: spinAround 2s linear infinite;
}

@keyframes spinAround {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* -------------------------------------------------------------
Google map
------------------------------------------------------------- */
#map-section {
    height: 700px;
}

/*---------------------------------------
  ABOUT              
-----------------------------------------*/
.about-section {
    position: relative;
    background-image: url("../images/about/hcpr_bg.jpg");
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: top left;
}

.about-image {
    border-radius: 20px;
    display: block;
}

.about-text-wrap {
    position: relative;
}

.about-background {
    width: 100%;
    height: 100%;
    background-color: #f0f0f0;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top left;
}

.about-text-icon {
    background: #f8cb2e;
    border-radius: 100%;
    font-size: 24px;
    width: 70px;
    height: 70px;
    line-height: 70px;
    text-align: center;
}

.about-text-info {
    backdrop-filter: blur(5px) saturate(180%);
    -webkit-backdrop-filter: blur(5px) saturate(180%);
    background-color: rgba(255, 255, 255, 0.75);
    border-radius: 20px;
    border: 1px solid rgba(209, 213, 219, 0.3);
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    margin: 20px;
    padding: 35px;
}

.img-fluid {
    max-width: 100%;
    height: auto;
}

.lead-about {
    background-image: url("../images/about/lead_about.jpg");
    background-repeat: no-repeat;
    width: 100%;
    height: auto;
    background-size: cover;
}

.standard-img {
    width: 50%;
    height: 50%;
}

/*--------------------------------------------------------------
	Team
--------------------------------------------------------------*/
.team-name {
    font-size: 16px;
}

.team-role {
    font-size: 14px;
}

/*--------------------------------------------------------------
	Blog Post
--------------------------------------------------------------*/

/* Post columns */
.post-columns .post-title {
    margin: 10px 0px;
    font-size: 18px;
}

.post-columns .post-entry {
    font-size: 16px;
}

.post-columns .post-entry p {
    margin: 10px 0px;
}

.post-columns .post-entry p:last-child {
    margin: 10px 0px;
}

.pagination a {
    border: 1px solid #eaeaea;
    display: inline-block;
    text-transform: uppercase;
    text-align: center;
    color: #999;
    padding: 4px 12px;
}

.pagination a.active {
    border-color: #cacaca;
}

/*--------------------------------------------------------------
	Header Pages
--------------------------------------------------------------*/
.subpage-heading {
    padding: 0px 0px 40px 0px !important;
}

h1.subpage {
    -webkit-font-smoothing: auto;
    font-style: italic;
    margin-bottom: 10px;
    font-size: 50px;
    font-weight: 300;
    text-transform: none !important;
    color: rgb(0, 51, 153, 0.9) !important;
}

p.subpage-head {
    font-size: 20px;
    text-align: left;
    padding-left: 20px;
    border-left: 2px solid #25225b;
    color: #25225b !important;
}

/*--------------------------------------------------------------
	Success Stories
--------------------------------------------------------------*/
.ss-table {
    background: #fff;
    border: 1px solid #eaeaea;
    padding: 25px 20px;
    margin: 15px 0 30px;
    border-radius: 2px;
    text-align: center;
}

.ss-table:hover {
    border-color: #cacaca;
}

.ss-table.best {
    margin: 0 0 30px;
}

.ss-table .small {
    margin: 0;
}

.ss-table h4 {
    color: #527dcc;
    padding-top: 30px;
    padding-bottom: 20px;
}

.ss-table ul,
.detail-page ul,
.panel-body ul {
    font-family: monospace;
    list-style-type: none;
    list-style-position: inside;
    padding: 0;
    margin: 0;

    li {
        margin: 0;
        padding-left: 1em;
        position: relative;
        font-family: "Kanit", "Open Sans", sans-serif;
        line-height: inherit;

        &:after {
            content: "";
            height: 0.4em;
            width: 0.4em;
            background: #0e2358;
            display: block;
            position: absolute;
            transform: rotate(45deg);
            top: 0.5em;
            left: 0;
        }
    }
}

.ss-table p,
.ss-table ul > li,
.detail-page p,
.detail-page ul > li .post-entry p,
.post-entry ul > li {
    line-height: 1.4;
    font-size: 16px;
    text-transform: none;
    letter-spacing: 0px;
    text-align: left;
}

div.more-btn {
    margin-top: 30px;
}

.ss-more-btn {
    background: #0098c1;
    color: #b8effb;
    border: 2px solid #0098c1;
}

.ss-more-btn:hover,
.ss-more-btn:focus {
    background: #111;
    color: #b8effb;
    border: 2px solid #0098c1;
}

.bg-dark a.ss-more-btn {
    color: #111;
}

.bg-dark a.ss-more-btn:hover,
.bg-dark a.ss-more-btn:focus {
    color: #b8effb;
}

.bg-dark-10 {
    color: #fff;
}

.bg-dark-10:before {
    position: absolute;
    background: rgba(2, 2, 2, 0.2);
    content: " ";
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
}

/*--------------------------------------------------------------
	Brands
--------------------------------------------------------------*/
.brand-title-hover {
    font-size: 14px;
    font-weight: 700;
    color: #dfb77a;
    margin: 0 0 6px;
}

.brand-desc-hover {
    color: #fff;
}

.brand-header {
    font-size: 2.5em;
    color: #dcb236;
}

.brand-subhead {
    font-size: 1.2em;
    font-style: italic;
}

.font-alt2 {
    font-family: "Kanit", "Open Sans", sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/*--------------------------------------------------------------
	Services
--------------------------------------------------------------*/
.services-section.bg-yellow {
    background-color: #b8effb;
    color: #fff;
}

.services-section.bg-blue {
    background-color: #00a3c7;
    color: #fff;
}
.services-section.bg-blue-2 {
    background-color: #171449;
    color: #fff;
}

.bg-service-dark {
    background-color: #333;
    padding-bottom: 30px;
}

.bg-service-dark p {
    color: #fff;
}

.services-section .image-half,
.services-section .info-half {
    padding-top: 20px;
}

.services-section .image-half {
    width: 100%;
    height: auto;
    padding-bottom: 20px;
}

.services-section .desktop .image-half {
    padding-right: 40px;
}

.services-section .info-half {
    padding-right: 40px;
}

.service-title {
    font-size: 45px;
    line-height: 55px;
    font-style: italic;
    color: #ffffff;
}

.services-section .border-services {
    border-left: 3px solid #dcb236;
    display: block;
    padding-left: 20px;
    float: left;
    margin-top: 25px;
}

p.services {
    font-size: 24px !important;
    font-weight: 400;
    line-height: 30px;
    font-style: italic;
    font-family: sans-serif !important;
}

.services-img {
    margin: 25px;
}

.services-credit,
.services-img {
    float: left;
    display: inline-block;
}

.services-credit .name {
    font-size: 16px !important;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 400;
    margin-bottom: 10px;
}

.services-credit .position {
    font-style: italic;
}

.services-section .ss-more-btn {
    float: left;
    margin-top: 25px;
}

@media screen and (max-width: 991px) {
    .desktop {
        display: none;
    }

    .services-section .image-half,
    .services-section .info-half {
        padding-right: 0 !important;
    }
}

@media (min-width: 992px) {
    .mobile {
        display: none;
    }
}

/*--------------------------------------------------------------
	Dietary Supplements
--------------------------------------------------------------*/
.dietary-section {
    background-image: url(../images/dietary/lead_menu_supplements.jpg);
}

.dietary-section .container,
.cosmetic-section .container,
.packaging-section .container,
.marketing-section .container {
    position: relative;
    z-index: 2;
    height: 100%;
    padding-bottom: 50px;
}

.dietary-section .container .row,
.cosmetic-section .container .row,
.packaging-section .container .row,
.marketing-section .container .row {
    height: 50%;
}

.cosmetic-section {
    background-image: url(../images/cosmetic/lead_cosmetic.jpg);
}

.packaging-section {
    background-image: url(../images/packaging/lead_packaging.jpg);
}

/*--------------------------------------------------------------
	Articles
--------------------------------------------------------------*/
.article_intro {
    font-size: 24px;
    font-style: italic;
    font-weight: 400;
    line-height: 1.2;
}

.lead-image img {
    width: 100%;
    height: auto;
}

.detail-page .detail-image {
    margin: 15px 0px;
}

.detail-video,
.detail-page .detail-video {
    margin: 30px 0px;
}

.detail-page h1 {
    color: #e0592a;
    font-size: 32px;
    font-style: italic;
}

.detail-page h2 {
    font-size: 20px;
}

.detail-page p {
    margin: 0 0 10px;
}

.detail-page .lead-image {
    margin: 20px auto;
}

.detail-page .lead-image img {
    width: 100%;
    height: auto;
}

/*--------------------------------------------------------------
	Responsive Styles - Media Queries
--------------------------------------------------------------*/
@media (min-width: 768px) {
    .navbar-transparent {
        background: transparent;
        padding-bottom: 15px;
    }

    .navbar-brand {
        padding: 0px 15px 15px 15px;
    }

    .scroll .navbar {
        background-color: #fff;
        height: 75px;
    }
}

@media (max-width: 991px) {
    /* Navbar */
    .logo {
        width: 50x;
        height: 50px;
    }

    .navbar-brand {
        padding: 5px 10px 15px 10px;
    }

    .nav > li > a {
        padding: 10px;
    }

    /* Headers */
    .video-bg-section {
        padding-top: 150px;
    }
}

@media (max-width: 767px) {
    /* Navbar */
    .navbar-custom .navbar-nav {
        margin-bottom: 3px;
    }
}