@font-face {
  font-family: 'LINESeedSansTH';
  src:  url('/font/LINESeedSansTH_W_Rg.woff2') format('woff2');
}
.dark {
    /*background: rgba(0, 0, 0, 0.1) !important;*/
   /* opacity: 0.6;*/
}
body {
  font-family: 'LINESeedSansTH', 'Noto Sans Thai', sans-serif !important;
}
.slider-caption h2, .slider-caption .h2 {
    color: #ffffff;
    font-family: 'LINESeedSansTH' !important;
}
 
.heading-block h1, h2 {
    color: #F39700  !important;
}
.before-heading{
    color:black;
}
.menu-top-row {
    width: 100%;
    max-height: 80px;
   
}
.header-misc {
    justify-content: end;
}
.menu-bottom-row {
    width: 100%;
    max-height: 60px;
    
}
.primary-menu {
    max-height: 60px;
    
}
/*#page-title {
    max-height: 120px;
}*/
.menu-item {
    max-height: 60px;
}
.menu-container {
    max-height: 60px;
}
.menu-item:hover > .menu-link {
    color: #F39700 !important;
}
#header {
    --cnvs-header-height: 140px !important;
   /* --cnvs-primary-menu-hover-color: #ff0000 !important;*/
    --cnvs-primary-font: 'LINESeedSansTH', 'Noto Sans Thai', sans-serif !important;
    /*min-width: 290px !important;*/
    /* --cnvs-contrast-900: #ffff00 !important;*/
}
/*.menu-top-row {
    width: 100%;
}*/
/*.header-botom-right {
   height: 140px !important;
}*/
/*.header-botom-right {
    border: 0px 1px 0px 0px !important;
    border-style: solid !important;
    border-color: rgba(0,0,0, 0.1) !important;
}*/
/*#header.sticky-header {
    min-width: 120px !important;
    max-width: 120px !important;
}*/
#logo {
    min-width: 220px !important;
    /* --cnvs-contrast-900: #ffff00 !important;*/
}
/*.primary-menu {
    max-height: 120px !important;
}*/
:root {
    --cnvs-themecolor: #1B6927;
    --cnvs-header-height: 120px !important;
    --cnvs-header-height-sm: 80px !important;
    --cnvs-header-height-md: 120px !important;
    --cnvs-header-height-lg: 140px !important;
    --cnvs-primary-menu-padding-x: 15px !important;
    --cnvs-header-floating-top-offset: 20px !important;
    --cnvs-header-floating-padding: 5px !important;
    --cnvs-side-header-padding-gutters: 5px !important;
    --cnvs-header-sticky-bg: #197828 !important;
    --cnvs-header-bg: #197828 !important;
    --cnvs-primary-menu-tt: none !important;
    --cnvs-primary-menu-submenu-tt: none !important;
    
    --cnvs-primary-font: "LINESeedSansTH", !important;
    --bs-font-sans-serif: "LINESeedSansTH" !important;
    --cnvs-primary-menu-submenu-width: 260px !important;
    /**/
    /* --cnvs-primary-menu-submenu-bg: #197828 !important;*/
    /*   --cnvs-contrast-900: #ffff00 !important;*/
}


element.style {
    min-width: 50px;
}

.form-control-lang {
    --cnvs-input-btn-padding-y: 0.175rem;
    --cnvs-input-btn-padding-x: 0.375rem;
    --cnvs-input-btn-font-size: 0.8rem;
    --cnvs-input-font-family: "LINESeedSansTH" !important;
    --cnvs-input-btn-font-weight: 700;
    --cnvs-input-btn-line-height: 1.0;
    --cnvs-input-btn-input-color: var(--bs-body-color);
    --cnvs-input-btn-input-bg: var(--bs-body-bg);
    --cnvs-form-control-radius: var(--bs-border-radius);
    --cnvs-input-btn-border-width: var(--bs-border-width);
    --cnvs-input-btn-border-color: var(--bs-border-color);
    --cnvs-input-btn-padding-y-sm: 0.125rem;
    --cnvs-input-btn-padding-x-sm: 0.25rem;
    --cnvs-input-btn-font-size-sm: 0.475rem;
    --cnvs-input-btn-padding-y-lg: 0.25rem;
    --cnvs-input-btn-padding-x-lg: 0.8rem;
    --cnvs-input-btn-font-size-lg: 0.8rem;
    --cnvs-input-focus-color: var(--bs-body-color);
    --cnvs-input-focus-bg: var(--bs-body-bg);
    --cnvs-input-focus-border-color: #86b7fe;
    --cnvs-input-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    padding: var(--cnvs-input-btn-padding-y) var(--cnvs-input-btn-padding-x);
    font-size: var(--cnvs-input-btn-font-size);
    font-family: var(--cnvs-input-font-family);
    font-weight: var(--cnvs-input-btn-font-weight);
    line-height: var(--cnvs-input-btn-line-height);
    color: var(--cnvs-input-btn-input-color);
    background-color: var(--cnvs-input-btn-input-bg);
    border: var(--cnvs-input-btn-border-width) solid var(--cnvs-input-btn-border-color);
    border-radius: var(--cnvs-form-control-radius);
}


/*.sub-menu-container.not-dark {
    --cnvs-primary-menu-submenu-bg: #211529 !important;
}*/


   /* --cnvs-primary-menu-hover-color: #808080;
     --cnvs-contrast-900: #f8f9fa;*/
    /*--cnvs-primary-menu-hover-color: */
    /* --cnvs-contrast-900: #f8f9fa;*/
    /*--cnvs-contrast-900: #ff0000 !important;*/
}
/*.bg-primary {
    --bs-bg-opacity: 1;
    background-color: #ff6a00   !important;
}*/
.fbox-icon i,fox-icon img{

    background-color: #F39700;
}
/*.is-expanded-menu.side-header .header-row {
    flex-direction: column;
    flex-grow: 1 !important;
}*/
.header-misc-element, .header-misc-icon {
    margin: 5px 8px 0px 0px;
}
.header-misc{
    margin: 5px 8px 0px 0px;
    padding-right: 10px;
}

.menu-link {
    /* color: #F39700 !important;*/
    color: #ffffff !important;
    /*text-shadow: 1px 1px 1px #f29408 !important;*/
    font-size: 1em !important;
}
.menu_sub_text {
    font-family: 'LINESeedSansTH' !important;
}
.menu-link:hover {
    /* color: #F39700 !important;*/
    /*text-shadow: 1px 1px 1px #f29408 !important;*/
    /* font-size: 1em !important;*/
    /*color: #F39700 !important;*/
    /*background-color: #D2E5D5 !important;*/
}

    .menu_main_text_active {
        color: #F39700 !important;
        /*text-shadow: 1px 1px 1px #008C44 !important;*/
        font-size: 1em !important;
    }

    .menu_sub_bg_active {
        font-size: 1em !important;
        background-color: #808080 !important;
    }

    .menu_sub_text_active {
        color: #F39700 !important;
    }
@media (min-width: 721px) {
    .header-row {
        flex-wrap: nowrap !important;
    }
    .header-botom-right {
        width: 100%  !important;
    }
}
@media (max-width: 992px) {
    .menu-top-row {
        top: 10px !important;
        right: 10px;
        position: absolute !important;
    }
    .header-botom-right {
        width: 100% !important;
    }
}

@media (max-width: 992px) {
    .primary-menu-trigger, #page-menu-trigger {
        justify-content: left;
    }
    
    .menu-item {
        background-color: #333333 !important;
        max-height: fit-content !important;
    }

    button.sub-menu-trigger.fa-solid.fa-chevron-right {
        color: #ffffff !important;
    }

    .menu_sub_bg_active {
        background-color: #333333 !important;
    }
}
    /* a:hover{

    --bs-link-hover-color-rgb: #FFBF00 !important;
}
a{

    --bs-link-hover-color-rgb: #FFBF00 !important;
} */
    /* .slider-caption p {
    color: #FFDC73;

} */
    #logo a .logo-default {
        display: flex;
    }

    #header {
        --cnvs-primary-menu-font-size: 1.0rem;
    }

    .sidebar {
        border: 1px solid #dddddd !important;
        padding: 5px !important;
        margin-bottom: 10px !important;
    }

    .page-title {
        /* background-color: #dddddd !important;*/
        background-color: transparent !important;
        max-height: 140px !important;
        padding: 10px !important;
        border: none !important;
    }

    blockquote {
        background-color: #ddf4dd !important;
    }
    /*---------------------*/

.product_container {
    position: relative;
    text-align: center;
    color: white;
}
.product_caption {
    position: absolute;
    font-size: 2.0em;
    top: 50%;
    left: 50%;
    /*color: #197828;*/
    z-index: 3;
    transform: translate(-50%, -50%);
    color: #ffffff;
}
.product_caption:hover {
    /* color: #197828;*/

    color: #ffffff;
}
.portfolio, [class*=portfolio-] {
    --cnvs-portfolio-desc-padding-y: 0rem !important;
 }




    #sideContactUs {
        z-index: 999;
        position: fixed;
        width: 100px;
        height: 50px;
        line-height: 1.2em;
        /* background-color: #F39700;*/
    background-color: #197828;
    font-size: 1.1em;
    text-align: center;
    color: #ffffff;
    top: auto;
    left: auto;
    right: 10px;
    bottom: 120px;
    cursor: pointer;
    border-radius: 10px;
    opacity: 0.8;
    transition: background-color 0.2s linear, opacity 0.4s ease;
}
.ribbon-contact .ribbon-contact__link {
    display: flex;
    flex-flow: column;
    width: 105px;
    height: 95px;
    /*  background-color: #8246af;*/
    background-color: #197828;
    align-items: center;
    justify-content: center;
    border-radius: 50% 0 0 50%;
    text-align: center;
    color: #fff;
    opacity: 0.6;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
.ribbon-contact__link:hover {
    opacity: 1;
}
.ribbon-contact {
    position: fixed;
    right: 0;
    bottom: 150px;
    z-index: 10;
}



    /*
 .timeline {
    position: relative !important;
    max-width: 800px !important;
    margin: 0 auto !important;
    background-color: #474e5d !important;
    box-sizing: border-box !important;
  }
  
 
  .timeline::after {
    content: '' !important;
    position: absolute !important;
    width: 6px;
    background-color: white !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 50% !important;
    margin-left: -3px !important;
    box-sizing: border-box !important;
  }
  
   
  .timeline-container {
    padding: 10px 40px !important;
    position: relative !important;
    background-color: inherit !important;
    width: 50% !important;
    box-sizing: border-box !important;
    
  }
  
   
  .timeline-container::after {
    content: '' !important;
    position: absolute !important;
    width: 25px !important;
    height: 25px !important;
    right: -17px !important;
    background-color: white !important;
    border: 4px solid #FF9F55 !important ;
    top: 15px !important;
    border-radius: 50% !important;
    z-index: 1  !important ;
    box-sizing: border-box !important;
    
  }
  .timeline-container-first::after {
    content: '' !important;
    position: absolute !important;
    width: 25px !important;
    height: 25px !important;
    right: -17px !important;
    background-color: white !important;
    border: 4px solid #ed1c1c !important ;
    top: 15px !important;
    border-radius: 50% !important;
    z-index: 1  !important ;
    box-sizing: border-box !important;
    
  }
  
   
  .timeline-left-first {
    left: 0 !important;
    box-sizing: border-box !important;
  }
  .timeline-right-first {
    left: 50% !important;
    box-sizing: border-box !important;
    margin-top: -7rem;
  }
  .timeline-left {
    left: 0 !important;
    box-sizing: border-box !important;
    margin-top: -10rem;
  }
  
   
  .timeline-right {
    left: 50% !important;
    box-sizing: border-box !important;
    margin-top: -4rem;
  }
  
  
  .timeline-left::before {
    content: " " !important;
    height: 0 !important;
    position: absolute !important;
    top: 22px !important;
    width: 0 !important;
    z-index: 1 !important;
    right: 30px !important;
    border: medium solid white !important;
    border-width: 10px 0 10px 10px !important;
    border-color: transparent transparent transparent white !important;
    box-sizing: border-box !important;
  }
  .timeline-left-first::before {
    content: " " !important;
    height: 0 !important;
    position: absolute !important;
    top: 22px !important;
    width: 0 !important;
    z-index: 1 !important;
    right: 30px !important;
    border: medium solid white !important;
    border-width: 10px 0 10px 10px !important;
    border-color: transparent transparent transparent rgb(255, 255, 255) !important;
    box-sizing: border-box !important;
  }
  
   
  .timeline-right::before {
    content: " " !important;
    height: 0 !important;
    position: absolute !important;
    top: 22px !important;
    width: 0 !important;
    z-index: 1 !important;
    left: 30px !important;
    border: medium solid white !important;
    border-width: 10px 10px 10px 0 !important;
    border-color: transparent white transparent transparent !important;
    box-sizing: border-box !important;
  }

  .timeline-right-first::before {
    content: " " !important;
    height: 0 !important;
    position: absolute !important;
    top: 22px !important;
    width: 0 !important;
    z-index: 1 !important;
    left: 30px !important;
    border: medium solid white !important;
    border-width: 10px 10px 10px 0 !important;
    border-color: transparent white transparent transparent !important;
    box-sizing: border-box !important;
  }
  
  .timeline-right-first::after {
    left: -16px !important;
    box-sizing: border-box !important;
  }
   
  .timeline-right::after {
    left: -16px !important;
    box-sizing: border-box !important;
  }
  
   
  .timeline-content {
    padding: 20px 30px !important;
    background-color: white !important;
    position: relative !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
  }
  
  
  @media screen and (max-width: 600px) {
   
    .timeline::after {
    left: 31px !important;
    box-sizing: border-box !important;
    }
    
    
    .timeline-container {
    width: 100% !important;
    padding-left: 70px !important;
    padding-right: 25px !important;
    box-sizing: border-box !important;
    }
    
     
    .timeline-container::before {
    left: 60px !important;
    border: medium solid white !important;
    border-width: 10px 10px 10px 0 !important;
    border-color: transparent white transparent transparent !important;
    }
  
     
    .timeline-left::after, .timeline-right::after {
    left: 15px !important;
    }
      
    
    .timeline-right {
    left: 0% !important;
    }

    .timeline-text-title-small{
      font-size: 12px !important;
      color: rgb(49, 47, 47) !important;
    }
    .timeline-text-title-big{
      font-size: 18px !important;
      color: #FF9F55 !important;
    }
  }
*/