@charset "UTF-8";


html {
    overflow-x: hidden;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
  }

  /* Sections
      ========================================================================== */

  body {
    margin: 0;
  }

  section{
    position: relative;
    padding-top: 110px;
    padding-bottom: 55px;
    background-image: url('../images/bg/section-bg.png');
    background-size: cover;
    background-repeat: no-repeat;
  }




  /*--------------------------------------------------------------
  # Typography
  --------------------------------------------------------------*/
  body,
  button,
  input,
  select,
  optgroup,
  textarea {
    color: #49331E;
    font-family: "Noto Sans Thai", sans-serif;
    font-size: 16px;
    line-height: 1.6;
    font-weight: 400;
    word-break: break-word;
    box-sizing: border-box;
  }

  body.dark-scheme {
    color: #a3a3a3;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: "Noto Sans Thai", sans-serif;
    font-weight: 400;
    line-height: 1.4;
    margin: 0 0 20px;
    color: #1a1a1a;
  }


  h1 {
    font-size: 48px;
  }

  h2 {
    font-size: 42px;
  }

  h3 {
    font-size: 36px;
  }

  h4 {
    font-size: 30px;
  }

  h5 {
    font-size: 24px;
  }

  h6 {
    font-size: 20px;
  }

  p {
    margin: 0 0 20px;
  }

  dfn, cite, em, i {
    font-style: italic;
  }



  address {
    margin: 0 0 1.5em;
  }

  pre {
    background: #eee;
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 1.6em;
    max-width: 100%;
    overflow: auto;
    padding: 1.6em;
  }

  code, kbd, tt, var {
    font-size: 15px;
  }

  abbr, acronym {
    border-bottom: 1px dotted #666;
    cursor: help;
  }

  mark, ins {
    background: #fff9c0;
    text-decoration: none;
  }

  big {
    font-size: 125%;
  }

  .bg-alt {
    background: #f7f7f7;
  }

  .bg-primary {
    background: #9f9e9e;
  }

  .text-primary {
    color: #9f9e9e;
  }

  .section-padd {
    padding: 110px 0;
  }

  .section-padd-bot {
    padding-bottom: 110px;
  }

  .section-padd-top {
    padding-top: 110px;
  }

  .section-padd-top70 {
    padding-top: 70px;
  }

  .lead {
    font-size: 18px;
  }

  .clear-both {
    clear: both;
  }

  .unstyle {
    list-style: none;
    padding-left: 0;
  }

  .font14 {
    font-size: 14px;
  }

  .text-light {
    color: #fff;
  }
  .text-light * {
    color: #fff;
  }

  .bolder {
    font-weight: 600;
  }

  .normal {
    font-weight: 400;
  }

  .lighter {
    font-weight: 300;
  }

  .f-left {
    float: left;
  }

  .f-right {
    float: right;
  }

  .dtable {
    display: table;
  }

  .dcell {
    display: table-cell;
    vertical-align: middle;
  }

  .flex-middle {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .overflow {
    overflow: hidden;
  }

  .overlay {
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
    opacity: 0.8;
    width: 100%;
    height: 100%;
    z-index: -1;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
  }

  .layer-behind {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: #f4f4f4;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
  }

  .gaps {
    clear: both;
    height: 20px;
    display: block;
  }
  .gaps.size-2x {
    height: 40px;
  }

  .number-stroke {
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    color: transparent !important;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #fff;
    opacity: 0.5;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
  }

  .title-link {
    display: inline;
    background-size: 0 2px;
    background-position: 0 90%;
    background-repeat: no-repeat;
    background-image: linear-gradient(0deg, #7e7e7e, #f5f5f5);
  }
  .title-link:hover {
    background-size: 100% 2px;
  }


  .btn-general {
    width:185px;
    height: 50px;
    position: relative;
    font-family: "Noto Sans Thai", sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #F6F6F6;
    text-decoration: none;
    text-align: center;
  }



.btn-gradient{
 background: linear-gradient(to right,#af7a48 ,#49331e);
 background-color: #af7a48;
 padding: 14px 15px;
 border: 0px solid #000;
 border-radius: 44px;
 display: inline-block;
}
.btn-gradient:hover{
 background: linear-gradient(to right,#49331e ,#af7a48);
 background-color: #49331e;
}




  /*--------------------------------------------------------------
  # Elements
  --------------------------------------------------------------*/
  html {
    box-sizing: border-box;
  }

  *,
  *:before,
  *:after {
    /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
    box-sizing: inherit;
  }

  body {
    background: #fff;
    /* Fallback for when there is no custom background color defined. */
    overflow: hidden;

  }

  hr {
    background-color: #ccc;
    border: 0;
    height: 1px;
    margin-bottom: 1.5em;
  }

  ul,
  ol {
    margin: 0 0 20px;
    padding-left: 18px;
  }

  ul {
    list-style: disc;
  }

  ol {
    list-style: decimal;
  }

  li > ul,
  li > ol {
    margin-bottom: 0;
    margin-left: 1.5em;
  }

  dt {
    font-weight: 700;
  }

  dd {
    margin: 0 1.5em 1.5em;
  }

  .none-style {
    list-style: none;
    padding-left: 0;
  }

  img {
    height: auto;
    /* Make sure images are scaled correctly. */
    max-width: 100%;
    /* Adhere to container width. */
  }

  figure {
    margin: 0;
    /* Extra wide images within figure tags don't overflow the content area. */
  }

  table {
    margin: 0 0 1.5em;
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    border-width: 1px 0 0 1px;
  }

  caption,
  td,
  th {
    padding: 0;
    font-weight: normal;
    text-align: left;
  }

  table,
  th,
  td {
    border: 1px solid #eee;
  }

  th {
    font-weight: 700;
  }

  th,
  td {
    padding: 0.4375em;
  }

  /* Custom*/
  .bg-transparent{
    background: transparent;
  }
  .mt-0{
    margin-top: 0;
  }
  .mt-10{
    margin-top: 10px;
  }
  .mt-20{
    margin-top: 20px;
  }
  .mt-30{
    margin-top: 30px;
  }
  .mt-40{
    margin-top: 40px;
  }
  .mt-50{
    margin-top: 50px;
  }
  .mt-60{
    margin-top: 60px;
  }
  .mt-70{
    margin-top: 70px;
  }

  .mb-0{
    margin-bottom: 0;
  }
  .mb-50{
    margin-bottom: 50px;
  }
  .mb-60{
    margin-bottom: 60px;
  }
  .mb-70{
    margin-bottom: 70px;
  }
  .mb-110{
    margin-bottom: 110px;
  }



  .pt-0{
    padding-top: 0;
  }



  /*--------------------------------------------------------------
  # Navigation
  --------------------------------------------------------------*/
  /*--------------------------------------------------------------
  ## Links
  --------------------------------------------------------------*/
  a {
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    color: #1a1a1a;
    text-decoration: none;
  }
  a:hover, a:focus, a:active {
    color: #9f9e9e;
    text-decoration: none;
  }
  a:focus {
    outline: 0;
  }
  a:hover, a:active {
    outline: 0;
  }



  /*--------------------------------------------------------------
  ## Top Bar
  --------------------------------------------------------------*/
  /*--------------------------------------------------------------
  ## Logo
  --------------------------------------------------------------*/
  #site-logo {
    min-width: 200px;
    display: inline-flex;
    vertical-align: middle;
    align-items: center;
    height: 90px;
  }
  #site-logo img {
    height: 40px;
  }
  #site-logo img.logo-static {
    display: block;
  }
  #site-logo img.logo-scroll {
    display: none;
  }

  .is-stuck #site-logo img.logo-static {
    display: none;
  }
  .is-stuck #site-logo img.logo-scroll {
    display: block;
  }

  /*--------------------------------------------------------------
  ## Menus
  --------------------------------------------------------------*/
  .main-navigation ul, .vertical-main-navigation ul {
    list-style: none;
    padding-left: 0;
  }

  .site-header {
    position: absolute;
    width: 100%;
    z-index: 999;
  }
  .site-header.header-static {
    position: static;
  }

  .octf-main-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }

  .octf-mainbar-container {
    display: flex;
    flex-flow: row wrap;
    align-items: stretch;
  }

  .octf-mainbar {
    display: flex;
    flex-flow: column wrap;
    flex: 1 auto;
  }

  .octf-main-header .octf-mainbar-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    flex: 1 auto;
  }

  .octf-mainbar-row > [class^=octf-col] {
    display: flex;
    align-items: stretch;
    position: static;
  }

  .octf-mainbar-row .octf-col {
    flex-basis: 0;
    flex-grow: 0.40;
    max-width: 100%;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
  }




  @media (max-width: 1265px) {
    .octf-mainbar-row .octf-col {
      flex-grow: 0.65;
    }
  }

  @media (max-width: 782px) {
    .octf-mainbar-row .octf-col {
      flex-grow: 0.65;
    }
  }

  @media (max-width: 600px) {
    .octf-mainbar-row .octf-col {
      flex-grow: 0.65;
    }
  }

  .octf-mainbar-row > [class^=octf-col] {
    flex-flow: row nowrap;
  }
  .octf-mainbar-row > [class^=octf-col].text-left {
    justify-content: flex-start;
  }
  .octf-mainbar-row > [class^=octf-col].text-center {
    justify-content: center;
  }
  .octf-mainbar-row > [class^=octf-col].text-right {
    justify-content: flex-end;
  }

  .octf-main-header .octf-row > div:empty {
    display: none;
  }

  .octf-row {
    margin-right: -15px;
    margin-left: -15px;
  }

  .octf-col:before {
    display: inline-flex;
  }

  .octf-main-header .octf-row .octf-col-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }

  .octf-header-module {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  /* Main Menu */
  .main-navigation {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    width: auto;
  }

  .main-navigation > ul {
    position: relative;
    display: flex;
    width: 100%;
    vertical-align: middle;
    height: 100%;
  }

  .main-navigation ul {
    color: #49331E;
    font-weight: 400;
    font-size: 15px;
    list-style: none;
    margin: 0px 0px;
    padding: 0px 0px;
  }

  .main-navigation > ul > li {
    margin: 0px 30px;
    padding: 0px 0px;
    float: left;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%;
  }
  .main-navigation > ul > li:last-child {
    margin-right: 0;
  }
  .main-navigation > ul > li:first-child {
    margin-left: 0;
  }

  /* .main-navigation > ul > li > a:before {
    position: absolute;
    height: 8px;
    width: 8px;
    bottom: -14px;
    left: 50%;
    opacity: 0;
    margin-left: -5px;
    background: #f6f6f6;
    content: "";
    display: block;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    transform: rotate(45deg);
  }

  .main-navigation > ul > li:hover > a:before,
  .main-navigation > ul > li.current-menu-item > a:before,
  .main-navigation > ul > li.current-menu-ancestor > a:before {
    bottom: -4px;
    opacity: 1;
  }
   */
  .main-navigation ul ul {
    float: none;
    margin: 0px 0px;
    padding: 0px 0px;
    background-color: #2a2a2a;
  }

  .main-navigation ul > li > a {
    position: relative;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%;
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
    outline: none;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    -webkit-transition: all 0.2s ease-out 0s;
    -moz-transition: all 0.2s ease-out 0s;
    -o-transition: all 0.2s ease-out 0s;
    transition: all 0.2s ease-out 0s;
  }

  .main-navigation ul > li.menu-item-has-children > a {
    padding-right: 17px;
  }

  .main-navigation > ul > li.menu-item-has-children:last-child > a:after {
    right: 0px;
  }

  .main-navigation ul li li {
    display: block;
    position: relative;
    padding: 0px 34px;
  }

  .main-navigation ul li li a {
    font-size: 16px;
    line-height: 30px;
    color: #b6b6b6;
    text-align: left;
    display: block;
    padding: 5px 0px 5px 0px;
    position: relative;
    text-decoration: none;
    outline: none;
    text-transform: none;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
  }

  .main-navigation:not(.no-line) ul li li a:before {
    position: absolute;
    content: "";
    top: 50%;
    left: 0;
    width: 0px;
    height: 1px;
    background: #fff;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    visibility: hidden;
    opacity: 0;
  }

  .main-navigation:not(.no-line) ul li li a:hover:before,
  .main-navigation:not(.no-line) ul ul li.current-menu-item > a:before,
  .main-navigation:not(.no-line) ul ul li.current-menu-ancestor > a:before {
    left: 0px;
    visibility: visible;
    opacity: 1;
    width: 30px;
  }

  .main-navigation ul li li a:hover,
  .main-navigation ul ul li.current-menu-item > a,
  .main-navigation ul ul li.current-menu-ancestor > a {
    padding-left: 30px;
    color: #fff;
  }

  .main-navigation.no-line ul li li a:hover,
  .main-navigation.no-line ul ul li.current-menu-item > a,
  .main-navigation.no-line ul ul li.current-menu-ancestor > a {
    padding-left: 0;
  }

  .main-navigation ul > li.menu-item-has-children > a:after {
    position: absolute;
    right: 1px;
    top: 50%;
    margin-top: -4px;
    font-family: "Flaticon";
    content: "";
    font-size: 8px;
    line-height: 1;
    color: #c3c7c9;
    font-weight: 500;
  }

  .main-navigation ul > li.menu-item-has-children > a:hover:after {
    color: #fff;
  }

  .main-navigation ul > li li.menu-item-has-children > a:after {
    position: absolute;
    content: "";
    font-family: Flaticon;
    top: 50%;
    right: 0;
    margin-top: -5px;
    font-size: 9px;
    color: #b6b6b6;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transform: rotate(-90deg);
  }

  .main-navigation ul li ul {
    min-width: 290px;
    white-space: nowrap;
    padding: 20px 0px;
    position: absolute;
    top: 100%;
    left: -34px;
    z-index: 10;
    visibility: hidden;
    opacity: 0;
    -webkit-transform: translateY(30px);
    -ms-transform: translateY(30px);
    transform: translateY(30px);
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    box-shadow: 3px 3px 15px 0 rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 3px 3px 15px 0 rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 3px 3px 15px 0 rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
  }
  .main-navigation ul li ul:before {
    content: "";
    position: absolute;
    height: 10px;
    width: 100%;
    top: -10px;
    left: 0;
  }

  .main-navigation ul li ul ul {
    left: calc(100% + 2px);
    top: -30px;
    transition: all 0.35s ease-in-out;
    -webkit-transition: all 0.35s ease-in-out;
    -moz-transition: all 0.35s ease-in-out;
    -o-transition: all 0.35s ease-in-out;
    -ms-transition: all 0.35s ease-in-out;
  }

  .main-navigation ul li:hover > ul {
    visibility: visible;
    opacity: 0;
  }

  .main-navigation ul > li:hover > ul {
    -webkit-transform: translateY(10px);
    -ms-transform: translateY(10px);
    transform: translateY(10px);
  }

  @-webkit-keyframes stickySlideUp {
    from {
      -webkit-transform: translateY(100%);
      transform: translateY(100%);
    }
    to {
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }
  }
  @keyframes stickySlideUp {
    from {
      -webkit-transform: translateY(100%);
      transform: translateY(100%);
    }
    to {
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }
  }
  @-webkit-keyframes stickySlideDown {
    from {
      -webkit-transform: translateY(-100%);
      transform: translateY(-100%);
    }
    to {
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }
  }
  @keyframes stickySlideDown {
    from {
      -webkit-transform: translateY(-100%);
      transform: translateY(-100%);
    }
    to {
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }
  }

  .is-stuck {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 99;
    border: none !important;
    -webkit-animation: stickySlideDown 0.65s cubic-bezier(0.23, 1, 0.32, 1) both;
    -moz-animation: stickySlideDown 0.65s cubic-bezier(0.23, 1, 0.32, 1) both;
    animation: stickySlideDown 0.65s cubic-bezier(0.23, 1, 0.32, 1) both;
  }

  /* Responsive */
  @media (max-width: 1199px) {
    .main-navigation > ul > li {
      margin: 0 14px;
    }

  }
  @media (max-width: 1440px) {
    .octf-btn-cta .btn-cta-header {
      display: none;
    }
  }
  @media (max-width: 1265px) {
    .octf-btn-cta .contact-header {
      display: none;
    }
  }


  @media (max-width: 782px) {
    .admin-bar .site-header,
  .admin-bar .site-header-vertical,
  .admin-bar .is-stuck {
      top: 46px;
    }
  }
  @media (max-width: 600px) {
    .admin-bar .is-stuck,
  .admin-bar .site-header-vertical {
      top: 0;
    }
  }

  /* iPad Pro*/

  @media all and (device-width: 1024px){
    .header-topbar {
      display: none;
    }
  }


  /*working only in ipad portrait device*/
@media only screen and (width: 768px) and (height: 1024px) and (orientation:portrait) {
  .header-topbar {
    display: none;
  }
}
/*working only in ipad landscape device*/
@media all and (width: 1024px) and (height: 768px) and (orientation:landscape){
  .header-topbar {
    display: none;
  }
}

@media only screen
  and (min-device-width: 1024px)
  and (max-device-width: 1366px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait){
    .header-topbar {
      display: none;
    }
  }

 /*----------------------------------------------------------
  ## Header Mobile
  --------------------------------------------------------------*/
  .header_mobile {
    display: none;
  }

  @media only screen and (max-width: 1024px) {
    .octf-main-header,
  .header-desktop {
      display: none;
    }

    .header_mobile {
      display: block;
      width: 100%;
      transition: all 0.3s ease;
      -webkit-transition: all 0.3s ease;
      -moz-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
      -ms-transition: all 0.3s ease;
      border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }
    .header_mobile.open, .header_mobile.is-stuck {
      background: #1a1a1a;
      -webkit-box-shadow: 4px 4px 30px 0px rgba(0, 0, 0, 0.3);
      -moz-box-shadow: 4px 4px 30px 0px rgba(0, 0, 0, 0.3);
      box-shadow: 4px 4px 30px 0px rgba(0, 0, 0, 0.3);
    }
    .header_mobile .mobile_nav .mobile_mainmenu li a {
      color: #fff;
      border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    }
    .header_mobile .mobile_nav .mobile_mainmenu > li.menu-item-has-children .arrow i {
      color: rgba(255, 255, 255, 0.7);
    }

    .header_mobile .mlogo_wrapper {
      position: relative;
    }
    .header_mobile .mlogo_wrapper img {
      height: 70px;

    }

    .header_mobile .mlogo_wrapper .mobile_logo {
      float: left;
    }

    .logo-mobile{
      padding: 15px;
      width: 270px;
    }

    #mmenu_toggle {
      position: absolute;
      cursor: pointer;
      width: 26px;
      height: 20px;
      right: 34px;
      margin-top: -10px;
      top: 50%;
    }

    #mmenu_toggle button {
      position: absolute;
      left: 0;
      top: 50%;
      margin: -2px 0 0;
      background: #fff;
      height: 3px;
      padding: 0;
      border: none;
      width: 100%;
      transition: all 0.3s ease;
      -webkit-transition: all 0.3s ease;
      -moz-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
      -ms-transition: all 0.3s ease;
      outline: none;
      border-radius: 2px;
    }

    #mmenu_toggle button:before {
      content: "";
      position: absolute;
      left: 0;
      top: -8px;
      width: 26px;
      height: 3px;
      background: #fff;
      -webkit-transform-origin: 1.5px center;
      transform-origin: 1.5px center;
      transition: all 0.3s ease;
      -webkit-transition: all 0.3s ease;
      -moz-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
      -ms-transition: all 0.3s ease;
      border-radius: 2px;
    }

    #mmenu_toggle button:after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -8px;
      width: 26px;
      height: 3px;
      background: #fff;
      -webkit-transform-origin: 1.5px center;
      transform-origin: 1.5px center;
      transition: all 0.3s ease;
      -webkit-transition: all 0.3s ease;
      -moz-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
      -ms-transition: all 0.3s ease;
      border-radius: 2px;
    }

    #mmenu_toggle.active button {
      background: none;
    }

    #mmenu_toggle.active button:before {
      top: 0;
      -webkit-transform: rotate3d(0, 0, 1, -45deg);
      transform: rotate3d(0, 0, 1, -45deg);
      -webkit-transform-origin: 50% 50%;
      transform-origin: 50% 50%;
    }

    #mmenu_toggle.active button:after {
      bottom: 0;
      -webkit-transform: rotate3d(0, 0, 1, 45deg);
      transform: rotate3d(0, 0, 1, 45deg);
      -webkit-transform-origin: 50% 50%;
      transform-origin: 50% 50%;
    }

    .mobile_nav {
      display: none;
      margin-top: 20px;
    }

    .mobile_nav .mobile_mainmenu {
      margin: 0;
      padding: 0;
    }

    .mobile_nav .mobile_mainmenu ul {
      position: relative;
      margin: 0;
      padding: 0;
      margin-left: 15px;
    }

    .mobile_nav .mobile_mainmenu ul {
      display: none;
    }

    .mobile_nav .mobile_mainmenu li {
      position: relative;
      list-style: none;
    }

    .mobile_nav .mobile_mainmenu li a {
      padding: 9px 0;
      display: block;
      font-size: 16px;
    }

    .mobile_nav .mobile_mainmenu > li > a {
      text-transform: uppercase;
      font-size: 14px;
    }

    .mobile_nav .mobile_mainmenu > li:last-child > a {
      border: none;
    }

    .mobile_nav .mobile_mainmenu > li.menu-item-has-children .arrow {
      color: #fff;
      position: absolute;
      display: block;
      right: 0;
      top: 0;
      cursor: pointer;
      width: 40px;
      height: auto;
      padding: 9px 12px 9px 0;
      line-height: inherit;
      text-align: right;
      box-sizing: border-box;
    }

    .mobile_nav .mobile_mainmenu > li.menu-item-has-children .arrow i {
      color: #9397a7;
      display: inline-block;
      line-height: 1;
      -webkit-transition: transform 0.3s ease-in-out;
      -moz-transition: transform 0.3s ease-in-out;
      transition: transform 0.3s ease-in-out;
    }

    .mobile_nav .mobile_mainmenu > li.menu-item-has-children .arrow i:before {
      font-size: 10px;
      font-weight: 600;
    }

    .mobile_nav .mobile_mainmenu > li.menu-item-has-children .arrow.active i {
      -webkit-transform: rotate(90deg);
      -moz-transform: rotate(90deg);
      transform: rotate(90deg);
    }

    .mobile_nav ul li a:before {
      position: absolute;
      content: "";
      top: 50%;
      left: 0;
      width: 30px;
      height: 1px;
      background: #fff;
      transition: all 0.3s linear;
      -webkit-transition: all 0.3s linear;
      -moz-transition: all 0.3s linear;
      -o-transition: all 0.3s linear;
      -ms-transition: all 0.3s linear;
      visibility: hidden;
      opacity: 0;
    }

    .mobile_nav ul li > a:hover:before {
      visibility: visible;
      opacity: 1;
    }

    .mobile_nav ul li a:hover {
      padding-left: 40px;
    }
  }
  @media only screen and (max-width: 767px) {
    .mlogo_wrapper {
      width: 100%;
    }
  }
  @media only screen and (max-width: 320px) {
    .mobile_logo img {
      width:90px  !important;
      max-width: 230px;
      max-height: 47px;
    }
  }
  /*--------------------------------------------------------------
  ## Page Header
  --------------------------------------------------------------*/
  .page-header {
    width: 100%;
    height: 500px;
    color: #49331E;
    font-weight: 500;
    font-size: 14px;
    text-align: center;
    background: center center no-repeat;
    background-size: cover;
  }
  .page-header .breadcrumbs {
    margin-bottom: 0;
    padding-left: 0;
  }
  .page-header .breadcrumbs li {
    display: inline-block;
    text-transform: uppercase;
    position: relative;
    padding-left: 24px;
    margin-left: 7px;
  }
  .page-header .breadcrumbs li:before {
    content: "••";
    position: absolute;
    color: #49331E;
    font-family: "Noto Sans Thai", sans-serif;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 4px;
    left: -2px;
    top: 8px;
  }
  .page-header .breadcrumbs li:first-child {
    padding-left: 0;
    margin-left: 0;
  }
  .page-header .breadcrumbs li:first-child:before {
    display: none;
  }
  .page-header .breadcrumbs li a {
    color: #49331E;
    background-size: 0 2px;
    background-position: 0 88%;
    background-repeat: no-repeat;
    background-image: linear-gradient(0deg, #7e7e7e, #f5f5f5);
  }
  .page-header .breadcrumbs li a:hover {
    background-size: 100% 2px;
  }
  .page-header.header-static .page-title {
    margin-top: -15px;
  }

  .page-title {
    color: #49331E;
    font-size: 40px;
    font-weight: 600;
    /* margin-top: 75px; */
    margin-bottom: 10px;
  }

  /*Header Left*/
  .header-vertical .page-header {
    height: 400px;
  }

  /* Dark scheme*/
  .dark-scheme .page-title {
    margin-top: 0;
  }

  @media (max-width: 1024px) {
    .page-header {
      height: 400px;
    }

    .page-title {
      font-size: 42px;
    }
  }
  @media (max-width: 600px) {
    .page-header .page-title {
      font-size: 32px;
    }
  }
  /*--------------------------------------------------------------
  # Accessibility
  --------------------------------------------------------------*/

  /* Do not show the outline on the skip link target. */
  #content[tabindex="-1"]:focus {
    outline: 0;
  }

  /*--------------------------------------------------------------
  # Alignments
  --------------------------------------------------------------*/
  .alignleft {
    float: left;
    margin-right: 1.5em;
  }

  .alignright {
    float: right;
    margin-left: 1.5em;
  }

  .aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

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

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

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

  /*--------------------------------------------------------------
  # Clearings
  --------------------------------------------------------------*/
  .clear:before,
  .clear:after,
  .entry-content:before,
  .entry-content:after,
  .comment-content:before,
  .comment-content:after,
  .site-header:before,
  .site-header:after,
  .site-content:before,
  .site-content:after,
  .site-footer:before,
  .site-footer:after {
    content: "";
    display: table;
    table-layout: fixed;
  }

  .clear:after,
  .entry-content:after,
  .comment-content:after,
  .site-header:after,
  .site-content:after,
  .site-footer:after {
    clear: both;
  }

  /*--------------------------------------------------------------
  # Content
  --------------------------------------------------------------*/
  /*--------------------------------------------------------------
  ## Pages
  --------------------------------------------------------------*/
  .entry-content {
    padding: 90px 0 100px;
  }

  .search-form {
    position: relative;
  }
  .search-form .search-field {
    width: 100%;
    padding: 0 46px 0 10px;
    height: 46px;
    line-height: 1;
    border: none;
    border-bottom: 1px solid #e6e6e6;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
  }
  .search-form .search-submit {
    border: none;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 46px;
    outline: none;
    text-align: center;
    vertical-align: middle;
    color: #1a1a1a;
    background: transparent;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
  }
  .search-form .search-submit i:before, .search-form .search-submit i:after {
    font-size: 17px;
    font-weight: 600;
  }




  /*--------------------------------------------------------------
  # Infinite scroll
  --------------------------------------------------------------*/
  /* Globally hidden elements when Infinite Scroll is supported and in use. */
  .infinite-scroll .posts-navigation,
  .infinite-scroll.neverending .site-footer {
    /* Theme Footer (when set to scrolling) */
    display: none;
  }

  /* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before. */
  .infinity-end.neverending .site-footer {
    display: block;
  }



  /*--------------------------------------------------------------
  # Elementor Widgets
  --------------------------------------------------------------*/
  /*--------------------------------------------------------------
  ## Heading
  --------------------------------------------------------------*/
  .ot-heading {
    position: relative;
  }
  .ot-heading > span {
    font-family: "Noto Sans Thai", sans-serif;
    font-size: 14px;
    font-weight: 600;
    background: #AF7A48;
    background: linear-gradient(to right, #AF7A48 0%, #231D16 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .ot-heading h2 {
    margin-bottom: 0;

  }
  .ot-heading.is-dots {
    padding-bottom: 30px;
  }
  .ot-heading.is-dots:before {
    content: "";
    position: absolute;
    left: 1px;
    bottom: 1px;
    width: 66px;
    height: 2px;
    border-bottom: 2px dotted #1a1a1a;
  }

  .dark-scheme .ot-heading.is-dots:before {
    border-bottom-color: #fff;
  }

  .theratio-align-center .ot-heading.is-dots:before {
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
  }

  .theratio-align-right .ot-heading.is-dots:before {
    left: auto;
    right: 2px;
  }

  .theratio-align-left .ot-heading.is-dots:before {
    left: 1px;
    right: auto;
  }

  @media (max-width: 1024px) {
    .theratio-tablet-align-center .ot-heading.is-dots:before {
      left: 50%;
      -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      transform: translateX(-50%);
    }

    .theratio-tablet-align-right .ot-heading.is-dots:before {
      left: auto;
      right: 2px;
    }

    .theratio-tablet-align-left .ot-heading.is-dots:before {
      left: 1px;
      right: auto;
    }
  }
  @media (max-width: 767px) {
    .ot-heading > span {
      font-size: 12px;
    }

    .ot-heading h2 {
      font-size: 27px;
      line-height: 38px;
    }

    .ot-heading {
      padding-bottom: 20px;
    }
    .ot-heading:before {
      width: 40px;
    }

    .theratio-mobile-align-center .ot-heading.is-dots:before {
      left: 50%;
      -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      transform: translateX(-50%);
    }

    .theratio-mobile-align-right .ot-heading.is-dots:before {
      left: auto;
      right: 2px;
    }

    .theratio-mobile-align-left .ot-heading.is-dots:before {
      left: 1px;
      right: auto;
    }
  }
  @media (max-width: 600px) {
    .ot-heading h2 br {
      display: none;
    }

  }

   /*--------------------------------------------------------------
  ## Description
  --------------------------------------------------------------*/
  .ot-description {
    margin-top: 70px;
    margin-bottom: 30px;
  }
  .ot-description-auto{
    width:100%;
  display: flex;
  justify-content: center;
  }


  @media (max-width: 1024px) {
    .ot-description {
      margin-top: 30px;
    }
  }


  @media (max-width: 767px) {
    .ot-description {
      margin-top: 0px;
    }
  }

  @media (max-width: 600px) {
    .ot-description {
      margin-top: 0px;
    }
  }





  /*--------------------------------------------------------------
  ## Search
  --------------------------------------------------------------*/
  .octf-cta-header {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
  }
  .octf-cta-header .toggle_search {
    cursor: pointer;
  }
  .octf-cta-header .toggle_search i {
    color: #fff;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    min-width: 22px;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
  }
  .octf-cta-header .toggle_search i:before, .octf-cta-header .toggle_search i:after {
    font-size: 22px;
  }
  .octf-cta-header .toggle_search i.ot-flaticon-close-1:before {
    font-size: 18px;
  }
  .octf-cta-header .h-search-form-field {
    position: absolute;
    z-index: 99;
    top: -webkit-calc(100% + 10px);
    top: expression(100% + 10px);
    top: -moz-calc(100% + 10px);
    top: -o-calc(100% + 10px);
    top: calc(100% + 10px);
    right: -30px;
    width: 340px;
  }
  .octf-cta-header .h-search-form-field .h-search-form-inner {
    padding: 20px 35px 34px;
    background-color: #21211F;
    box-shadow: 3px 3px 15px 0 rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 3px 3px 15px 0 rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 3px 3px 15px 0 rgba(0, 0, 0, 0.1);
  }
  .octf-cta-header .h-search-form-field .h-search-form-inner input {
    background: transparent;
    color: #fff;
    font-weight: 400;
    border-color: rgba(255, 255, 255, 0.1);
  }
  .octf-cta-header .h-search-form-field .h-search-form-inner button {
    color: #fff;
  }
  .octf-cta-header .h-search-form-field .h-search-form-inner button i:before {
    font-weight: normal;
  }
  .octf-cta-header .h-search-form-field .h-search-form-inner ::-webkit-input-placeholder {
    /* Edge */
    color: #fff;
  }
  .octf-cta-header .h-search-form-field .h-search-form-inner :-ms-input-placeholder {
    /* Internet Explorer */
    color: #fff;
  }
  .octf-cta-header .h-search-form-field .h-search-form-inner ::placeholder {
    color: #fff;
  }
  .octf-cta-header .h-search-form-field.show {
    -webkit-animation: searchSlideUp 0.5s cubic-bezier(0.23, 1, 0.32, 1) both;
    animation: searchSlideUp 0.5s cubic-bezier(0.23, 1, 0.32, 1) both;
  }

  @-webkit-keyframes searchSlideUp {
    from {
      -webkit-transform: translateY(10%);
      transform: translateY(10%);
    }
    to {
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }
  }
  @keyframes searchSlideUp {
    from {
      -webkit-transform: translateY(10%);
      transform: translateY(10%);
    }
    to {
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }
  }
  @media only screen and (max-width: 600px) {
    .octf-cta-header .h-search-form-field {
      right: -65px;
    }
  }


  /*--------------------------------------------------------------
  ## Menu Mobie
  --------------------------------------------------------------*/
  .header-mobile {
    display: none;
  }

  .header-mobile .is-stuck {
    background-color: #1a1a1a;
  }
  .header-mobile .is-stuck .cart-contents .count {
    background: #fff;
    color: #1a1a1a;
  }

  .mmenu-toggle button {
    background: none;
    border: none;
    outline: none;
    padding: 0;
    color: #fff;
  }
  .mmenu-toggle button i:before {
    font-size: 22px;
  }

  .mmenu-wrapper {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    width: 310px;
    height: 100vh;
    /* background: #49331E; */
    overflow-x: hidden;
    z-index: 9999;
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    padding-top: 100px;
    padding-bottom: 50px;
    background: rgb(33,33,31);
    background: linear-gradient(-45deg, rgba(33,33,31,1) 0%, rgba(73,51,30,1) 55%, rgba(156,132,90,1) 100%);
  background-size: 200% 200%;
  -webkit-animation: gradient 10s ease infinite;
          animation: gradient 10s ease infinite;
  }
  .mmenu-wrapper.mmenu-open {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
  .mmenu-wrapper .mmenu-inner {
    top: 0;
    height: 100%;
    width: 327px;
    padding: 20px 52px 35px 35px;
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
  }
  .mmenu-wrapper .mmenu-close {
    display: block;
    margin-bottom: 10px;
    color: #fff;
  }
  .mmenu-wrapper .mobile_mainmenu {
    margin: 0;
    padding: 0;
  }
  .mmenu-wrapper .mobile-nav {
    min-width: 240px;
  }
  .mmenu-wrapper .mobile_mainmenu ul {
    position: relative;
    margin: 0;
    padding: 0;
    margin-left: 15px;
  }
  .mmenu-wrapper .mobile_mainmenu ul {
    display: none;
  }
  .mmenu-wrapper .mobile_mainmenu li {
    position: relative;
    list-style: none;
  }
  .mmenu-wrapper .mobile_mainmenu li a {
    padding: 9px 30px 9px 0;
    display: block;
    font-size: 14px;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  .mmenu-wrapper .mobile_mainmenu > li.menu-item-has-children .arrow {
    color: #fff;
    position: absolute;
    display: block;
    right: 0;
    top: 0;
    cursor: pointer;
    width: 34px;
    height: auto;
    padding: 7px 12px 7px 0;
    line-height: inherit;
    text-align: right;
    box-sizing: border-box;
  }
  .mmenu-wrapper .mobile_mainmenu > li.menu-item-has-children .arrow i {
    color: #9397a7;
    display: inline-block;
    line-height: 1;
    -webkit-transition: transform 0.3s ease-in-out;
    -moz-transition: transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out;
  }
  .mmenu-wrapper .mobile_mainmenu > li.menu-item-has-children .arrow i:before {
    font-size: 10px;
    font-weight: 600;
  }
  .mmenu-wrapper .mobile_mainmenu > li.menu-item-has-children .arrow.active i {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  .mmenu-wrapper.on-left {
    right: auto;
    left: 0;
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  .mmenu-wrapper.on-left.mmenu-open {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
  .mmenu-wrapper.on-left .mmenu-close {
    text-align: right;
  }
  .mmenu-wrapper.on-left .mmenu-close i:before {
    content: "";
  }

  .mmenu-active .mmenu-overlay {
    background: rgba(0, 0, 0, 0.7);
    visibility: visible;
    opacity: 1;
    z-index: 9998;
  }

  @media only screen and (max-width: 1024px) {
    .header-mobile {
      display: block;
    }

    .admin-bar section:not(.is-stuck) .mmenu-wrapper {
      top: 32px;
    }
  }
  @media only screen and (max-width: 782px) {
    .admin-bar section:not(.is-stuck) .mmenu-wrapper {
      top: 46px;
    }
  }


  /*--------------------------------------------------------------
  ## Side Panel
  --------------------------------------------------------------*/
  .panel-btn {
    line-height: 1;
  }
  .panel-btn i {
    color: #fff;
    cursor: pointer;
  }
  .panel-btn i:before {
    font-size: 22px;
  }

  .admin-bar .side-panel {
    top: 32px;
  }

  .side-panel {
    width: 400px;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    /* background: #412f1e; */
    overflow-x: hidden;
    z-index: 9999;
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    padding-top: 100px;
    padding-bottom: 50px;
    background: rgb(33,33,31);
    background: linear-gradient(-45deg, rgba(33,33,31,1) 0%, rgba(73,51,30,1) 55%, rgba(156,132,90,1) 100%);
  background-size: 200% 200%;
  -webkit-animation: gradient 10s ease infinite;
          animation: gradient 10s ease infinite;
  }
  .side-panel .side-panel-block {
    padding: 90px 42px 90px 25px;
    height: 100%;
    width: calc(100% + 17px);
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
  }
  .side-panel .side-panel-close {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    color: #fff;
    font-size: 20px;
    width: 90px;
    height: 90px;
    line-height: 90px;
    cursor: pointer;
    z-index: 9999;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    text-align: center;
  }
  .side-panel.on-left {
    right: auto;
    left: 0;
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  .side-panel.on-left.mmenu-open {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
  .side-panel.side-panel-open {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  .side-panel-active .panel-overlay {
    background: rgba(33,33, 31, 0.7); /*21211F*/
    visibility: visible;
    opacity: 1;
    z-index: 9998;
  }


  /* Mega Menu */
  .main-navigation {
    position: unset;
  }
  .main-navigation > ul {
    position: unset;
  }
  .main-navigation > ul > li.mega-dropdown {
    display: list-item;
    float: none;
    position: unset;
    flex-direction: column;
  }
  .main-navigation ul li ul.mega-sub-menu {
    width: 100%;
    left: 0;
    padding-top: 50px;
  }
  .main-navigation ul.mega-sub-menu li.row {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
  }
  .main-navigation ul li ul.mega-sub-menu .col {
    min-width: 220px;
    position: relative;
    left: auto;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    max-width: 25%;
    box-shadow: none;
    -webkit-transform: translateY(10px);
    -ms-transform: translateY(10px);
    transform: translateY(10px);
  }
  .main-navigation ul li.mega-dropdown:hover > ul .col {
      visibility: visible;
      opacity: 1;
  }
  .main-navigation ul li ul.mega-sub-menu .col li {
      padding-left: 0;
  }
  .mega-sub-menu .menu-title {
      color: #fff;
      font-size: 20px;
      margin-bottom: 10px;
  }


  /* Custom Side panel */
  .side-panel-block .the-logo {
    margin: 10px 0 40px 0;

  }
  .side-panel-block .the-logo img {
    width: 100%;

  }
  .side-panel-block .ot-heading h2 {
      color: #FFF;
      font-size: 24px;
      margin-bottom: 20px;
  }
  .side-panel-block .gallery {
      margin: 0 -10px -10px 0;
      display: table;
  }
  .side-panel-block .gallery-item {
      padding: 0 10px 10px 0;
      display: inline-block;
      max-width: 33.33333333%;
  }
  .side-panel .side-panel-block {

  }
  .header_mobile .container-fluid {
      padding-left: 0;
      padding-right: 0;
  }
  .header_mobile .octf-row {
      margin-left: 0;
      margin-right: 0;
  }
  .header_mobile .octf-col {
      padding-left: 0;
      padding-right: 0;
  }
  .header_mobile .octf-search {
      margin-right: 30px;
  }
  .header_mobile .octf-menu-mobile {
      padding-right: 15px;
  }
  .header_mobile .mlogo_wrapper img {
      height: 76px;
  }
  .header_mobile .octf-row{
      display: flex;
      flex-wrap: nowrap;
      align-items: stretch;
      flex: 1 auto;
  }
  .side-panel-cinfo {
      padding-bottom: 40px;
  }
  .side-panel-cinfo ul {
      padding-left: 0;
      margin-bottom: 0;
  }
  .side-panel-cinfo .icon-list-item, .side-panel-cinfo .icon-list-item a {
      font-family: var(--e-global-typography-text-font-family);
      font-weight: var(--e-global-typography-text-font-weight);
  }
  .side-panel-cinfo li.icon-list-item, .side-panel-cinfo li.icon-list-item a {
      font-family: "Raleway",sans-serif;
      color: #555;
      transition: all 0.3s linear;
      -webkit-transition: all 0.3s linear;
      -moz-transition: all 0.3s linear;
      -o-transition: all 0.3s linear;
      -ms-transition: all 0.3s linear;
  }
  .side-panel-cinfo .icon-list-item, .side-panel-cinfo  .icon-list-item a {
      font-family: "Raleway",Sans-serif;
      line-height: 18px;
  }
  .side-panel-cinfo  .icon-list-items:not(.elementor-inline-items) .icon-list-item:not(:last-child) {
      padding-bottom: calc(25px/2);
  }
  @media (min-width: 768px){
  .side-panel-block .gallery-columns-3 .gallery-item {
      max-width: 33.33%;
  }
  }

  @media only screen and (max-width: 782px) {
    .side-panel {
      top: 46px;
    }
  }


  /* Page Header */

  .space-medium {
    padding-top: 70px;
    padding-bottom: 70px;
  }
  .no-padding {
    padding: 0;
  }





  /* Typo */
  .typo {
      padding-top: 90px;
      padding-bottom: 50px;
  }
  .typo h1, .typo h2, .typo h3, .typo h4, .typo h5, .typo h6 {
      margin-bottom: 25px;
  }
  .theratio-separato {
      height: 1px;
      width: 100%;
      background-color: rgba(0,0,0,.1);
      margin: 80px 0;
  }
  .bg-classic-transparent {
      background: transparent;
  }
  .mt-30 {
      margin-top: 30px;
  }
  .mb-30 {
      margin-bottom: 30px;
  }
  .space-1 {
      width: 100%;
      height: 1px;
  }
  .space-2 {
      width: 100%;
      height: 2px;
  }
  .space-5 {
      width: 100%;
      height: 5px;
  }
  .space-10 {
      width: 100%;
      height: 10px;
  }
  .space-20 {
      width: 100%;
      height: 20px;
  }
  .space-25 {
      width: 100%;
      height: 25px;
  }
  .space-30 {
      width: 100%;
      height: 30px;
  }
  .space-40 {
      width: 100%;
      height: 40px;
  }
  .space-50 {
      width: 100%;
      height: 50px;
  }
  .space-60 {
      width: 100%;
      height: 60px;
  }
  .space-70 {
      width: 100%;
      height: 70px;
  }
  .space-80 {
      width: 100%;
      height: 80px;
  }
  .space-90 {
      width: 100%;
      height: 90px;
  }
  .space-100 {
      width: 100%;
      height: 100px;
  }
  .space-110 {
      width: 100%;
      height: 110px;
  }
  .space-120 {
      width: 100%;
      height: 120px;
  }
  .space-130 {
      width: 100%;
      height: 130px;
  }
  .space-140 {
      width: 100%;
      height: 140px;
  }
  .space-150 {
      width: 100%;
      height: 150px;
  }
  .space-55 {
      width: 100%;
      height: 55px;
  }
  .p-80 {
      padding: 80px;
  }




  /* Top header */
  .top-header {
      background-color: #49331E;
      background-position: center center;
      background-repeat: no-repeat;
      padding: 33px 0;
  }
  .top-info h6 {
      color: #FFF;
      font-size: 16px;
      margin-bottom: 0;
      line-height: 28px;
      font-weight: 400;
  }
  .top-info p {
      color: #C4C4C4;
      font-weight: 400;
      margin-bottom: 0;
  }
  .top-logo img{
      height: 65px;
  }



  .bg-dark-cmc {
      /* background-color: #49331E; */
      background: rgb(33,33,31);
      background: linear-gradient(83deg, rgba(33,33,31,1) 0%, rgba(73,51,30,1) 55%, rgba(156,132,90,1) 100%);
  }



  .header-topbar {
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }
  .topbar-socials.list-social a {
      border-color: transparent;
      color: #49331E;
      padding: 10px;
      margin-right: 0;
  }
  .topbar-socials.list-social a i:before {
      font-size: 14px;
  }
  .topbar-socials.list-social a:hover {
      background-color: rgb(242, 242, 242);
  }
  .topbar-info {
      list-style: none;
  }
  .topbar-info li {
      padding-right: 25px;
      padding-left: 25px;
      line-height: 40px;
      font-weight: 500;
      font-size: 13px;
     color:#49331E;
      border-right: 1px solid rgba(0, 0, 0, 0.1);
  }

  .topbar-info li i {
      padding-right: 9px;
  }
  .topbar-info li:last-child {
      padding-right: 0;
      border-right: none;
  }
  .topbar-info li i:before {
      font-size: 17px;
  }
  .logo-size-small {
      width: 150px;
      height: 91px;
  }
  .main-header-slight {
      position: relative;
  }
  .main-header-slight.is-stuck {
      position: fixed;background-color: #fff;
  }
  @media screen and (min-width: 1024px){
  .main-header-slight.is-stuck .main-navigation ul.menu > li > a {
      color: #49331E;
  }
  }
  .main-header-slight .panel-btn i {
      color: #49331E;
  }
  .main-header-slight.header-4 .octf-sidepanel {
      padding-right: 0;
      padding-left: 30px;
  }
  .main-header-slight .octf-cta-header .toggle_search i {
      color: #49331E;
  }
  .main-header-slight .main-navigation > ul > li > a {
      color: #49331E;
      font-weight: 400;

  }
  .main-header-slight.header-4 .octf-search {
      margin-right: 0;
  }
  .main-header-slight .cta-col {
      width: 13%;
      flex-grow: 0.21;
  }
  .main-header-slight .main-navigation > ul > li.menu-item-has-children > a:after {
      color: #49331E;
  }
  .main-header-slight .main-navigation > ul > li > a:before {
      background-color: #49331E;
  }
  .header_mobile_slight .mmenu-toggle button, .header_mobile_slight .octf-cta-header .toggle_search i {
      color: #49331E;
  }



  /*--------------------------------------------------------------
  # Footer
  --------------------------------------------------------------*/


  /* Back To Top*/
  #back-to-top {
    border: 1px solid #DFBE8D;
    color: #DFBE8D;
    cursor: pointer;
    width: 42px;
    height: 45px;
    line-height: 45px;
    opacity: 0;
    visibility: hidden;
    outline: medium none;
    position: fixed;
    right: 40px;
    bottom: -20px;
    text-align: center;
    text-decoration: none;
    transition: opacity 0.2s ease-out 0s;
    z-index: 1000;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
  }
  #back-to-top.show {
    opacity: 1;
    visibility: visible;
    bottom: 40px;
  }
  #back-to-top i {
    display: block;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  #back-to-top i:before {
    font-size: 17px;
  }


  /* Custom HTML */
  @media (min-width: 1230px){
    .container {
        max-width: 1200px;
    }
    .container-big {
        max-width: 1540px;
    }
    .container-slider-5 {
        max-width: 1640px;
    }
    .container-large {
        max-width: 100%;
        padding-left: 100px;
        padding-right: 100px;
    }
  }
  .no-padding {
    padding: 0 !important;
  }


  /* Custom Css Header HTML */
  .octf-btn-cta {
      display: inline-flex;
      vertical-align: middle;
      position: relative;
  }

  .octf-search {
      margin-right: 65px;
  }
  .octf-sidepanel {
      padding: 0 34px 0 33px;
      border-style: solid;
      border-width: 0 0 0 1px;
      border-color: rgba(255,255,255,.2);
  }

  .side-panel-wrap {
      padding-left: 35px;
      padding-right: 18px;
  }
  .side-panel-cinfo .panel-cinfo {
      list-style: none;
      padding-left: 0;
      margin-bottom: 3px;
  }
  .panel-cinfo li {
      color: #fff;
      padding-bottom: 14px;
      padding-top: 14px;
      line-height: 1;
  }
  .panel-cinfo li:first-child {
      padding-top: 0;
  }
  .panel-cinfo li:last-child {
      padding-bottom: 0;
  }
  .panel-cinfo li .panel-list-text {
      margin-left: 30px;
      margin-top: -20px;
      display:block;
      width:260px;
      word-wrap:break-word;
      line-height: 25px;
      font-weight: 400;
      font-size: 14px;
  }
  .panel-list-icon i:before {
      font-size: 18px;
  }
  .side-panel-social ul {
      margin: 0;
      padding: 0;
      list-style: none;
  }
  .side-panel-social li {
      display: inline-block;
  }
  .side-panel-social a {
      background-color: #2A2A2A;
      font-size: 14px;
      border: 1px solid rgba(255,255,255,.4);
      border-radius: 50%;
      padding: 7px;
      color: #fff;
      text-align: center;
      margin-right: 11px;
  }
  .side-panel-social a:hover {
      background-color: #444;
      border-color: #444;
  }
  .side-panel-social a i {
      width: 14px;
      height: 14px;
  }
  .pb-50 {
      padding-bottom: 50px;
  }


  /* Footer */
  .site-footer {
      padding-top: 100px;
      padding-bottom: 50px;
      background: rgb(33,33,31);
      background: linear-gradient(-45deg, rgba(33,33,31,1) 0%, rgba(73,51,30,1) 55%, rgba(156,132,90,1) 100%);
    background-size: 200% 200%;
    -webkit-animation: gradient 10s ease infinite;
            animation: gradient 10s ease infinite;
      color: #F6F6F6;
  }
  @-webkit-keyframes gradient {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }

  @keyframes gradient {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
  .widget-footer ul {
      margin: 0;
      padding-left: 0;
      list-style: none;
  }
  .widget-footer a {
      color: #F6F6F6;

  }
  .widget-footer li {
      padding-bottom: 14px;
  }
  .widget-footer li:last-child {
      padding-bottom: 0;
  }
  .widget-footer .footer-social li {
      padding-bottom: 0;
  }
  .widget-footer a:hover {
      color: #fff;
  }
  .footer-logo {
      width:140px;
      margin-top: 20px;
      padding-bottom: 32px;
  }
  .footer-social {
      padding-top: 9px;
      padding-bottom: 2px;
  }
  .footer-social ul, .list-social ul {
      margin: 0;
      padding: 0;
      list-style: none;
  }
  .footer-social li, .list-social li {
      display: inline-block;
  }
  .footer-social a, .list-social a {
      font-size: 12px;
      border: 1px solid #444;
      border-radius: 50%;
      padding: 7px;
      color: #fff;
      text-align: center;
      margin-right: 11px;
  }
  .footer-social a:hover, .list-social a:hover {
      background-color: #444;
  }
  .footer-social a i, .list-social a i {
      width: 14px;
      height: 14px;
  }
  .footer-list {
      margin: 0;
      padding-top: 5px;
      padding-left: 0;
      list-style: none;
  }

  .widget-footer{
    font-family: "Noto Sans Thai", sans-serif;
  }
  .widget-footer h6 {
      font-size: 14px;
      font-family: "Noto Sans Thai", sans-serif;
      color: #fff;
      margin-top: 20px;
      line-height: 1;
      border-bottom: 1px solid #f6f6f6;
      padding-bottom: 5px;
  }
  .footer-list-item i:before {
      font-size: 18px;
  }
  .footer-list-item span.list-item-text{
    display:block;
    width:300px;
    word-wrap:break-word;
    margin-left: 20px;
    margin-top: -15px;
  }
  .footer-list-item .list-item-text {
      padding-left: 14px;
      font-size: 12px;
  }
  .footer-list-item {
      line-height: 15px;
      padding-top: 11px;
      padding-bottom: 14px
  }
  .footer-list-item:first-child {
      padding-top: 0;
  }
  .footer-list-item:last-child {
      padding-bottom: 0;
  }
  .footer-download li{
    font-size: 12px;
    padding: 7px 0;
  }

  ul.footer-download {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
    -moz-column-count: 2;
  -moz-column-gap: 1em;
  -webkit-column-count: 2;
  -webkit-column-gap: 1em;
  column-count: 2;
  column-gap: 1em;


  }


  .footer-download li {
    list-style-image: url('../images/icons/arrow-right.svg');
    list-style-position: inside;
    padding-right: 10px;

  }

  .footer-download li a{
    color: #f6f6f6;
  }

  .footer-download-button {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    text-decoration: none;
    font-size: 11px;
    border-radius: 10px;
    width: 100px;
    height: 20px;
    border: 1px solid #F6F6F6;
    transition: 0.3s;
    background-color: transparent;
    float: right;
  }
  a.footer-download-button{
    color: #F6F6F6;
  }

  .footer-download-button:hover {
    opacity: .7;
  }
  .footer-widget-subcribe h6{
      margin-bottom: 28px;
  }
  .footer-widget-subcribe form {
      margin-bottom: 18px;
  }
  .footer-widget-subcribe p {
      font-size: 14px;
      margin-bottom: 0;
  }
  .footer-bottom {
      padding-top: 23px;
      text-align: center;
      font-size: 12px;
  }

  @media only screen and (max-width: 782px) {
    .footer-download-button{
      display: none;
    }
  }

  @media (max-width: 479px) {
    .error-404 h1 {
      font-size: 120px;
    }

    .error-404 h2 {
      font-size: 32px;
    }
  }
  /*--------------------------------------------------------------
  # Responsive
  --------------------------------------------------------------*/
  @media (min-width: 992px) {
    .lg-hidden {
      display: none;
    }

  }

  @media (max-width: 992px) {
    section{
      padding-top: 50px;
      padding-bottom: 50px;
    }

  }

  @media (min-width: 768px) and (max-width: 991px) {
    .md-hidden {
      display: none;
    }

    section{
      padding-top: 30px;
      padding-bottom: 30px;
    }
  }
  @media (min-width: 480px) and (max-width: 767px) {
    .sm-hidden {
      display: none;
    }

    section{
      padding-top: 25px;
      padding-bottom: 25px;
    }
  }
  @media (max-width: 1299px) {


    section{
      padding-top: 50px;
      padding-bottom: 50px;
    }
  }