#page{
}
.auto-container{
    width: 1200px;
    margin: 0 auto;
}

@media screen and (max-width: 1200px) {
    .auto-container{
        width: 96%;
        margin: 0 auto;
    }
}
#topbar{
    background:#C7872A; color: #fff; padding:6px 0px;
}
#topbar a{color: #fff; margin: 0 8px; }
#social{ text-align: right;}

.section-header {}

.section-header h2 {
    font-family: "KoHo", sans-serif;
    font-weight: 700;
    font-size: 65px;
    line-height: 75px;
    text-align: center;
    text-transform: uppercase;
    color: #C7872A;
}

.btn-themes{
    color: #EBE7D1;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    padding: 12px 24px;
    border: 1px solid #C7872A;
    box-shadow: none;
    background: #C7872A;
}

.btnBooking{
    background: #C7872A;
    padding: 12px 18px;
    color: #FCFDF7;
    font-size: 18px;
    font-weight: 500;
    text-transform: uppercase;
    font-family: "Kanit", sans-serif;
}

.fixed-page{ margin-top: 130px;}
.fixed-page #header{  background:#C7872A;}
.fixed-menu {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
    background:#C7872A;
    color: #fff;
}
.fixed-menu .navmenu a, .navmenu a:focus{
    color: #C7872A;
}
.fixed-menu + #main {
    margin-top: 50px;
}

@media screen and (max-width: 768px) {
    .auto-container{
        width: 96%;
    }
    .section-header h2 {
        font-size: 40px;
    }
    .fixed-page{ margin-top: 60px;}
}

#header{ background: #fff; padding: 15px 0;}
#logo{}
#logo img{ max-height: 90px;}

#banner-header{
    background: #C7872A;
    padding: 60px 0;
    color: #FFF6ED;
}
#banner-header h2{
    color: #FFF6ED;
    font-family: "KoHo", sans-serif;
    font-weight: 700;
    font-size: 65px;
    line-height: 70px;
    letter-spacing: 0px;
    text-transform: uppercase;
}

#banner{
    height: 420px;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
#banner.banner-home{
    height: 600px;
}
#banner.banner-about{
    height: auto;
}
#banner h2.title{
    color: #EBE7D1;
    font-size: 64px;
    font-weight: 500;
    text-transform: uppercase;
}

#banner.banner-home #description{
    color: #333;
}
#banner.banner-about .section-header{
    width: 580px;
}
#banner.banner-about .section-header h2{
    margin-bottom: 20px;
}

#banner #description{
    width: 480px;
    background: rgba(235, 231, 209, 0.8);
    padding: 40px 40px;
}

#banner #description h2{
    color: #C7872A;
    font-size: 56px;
    font-weight: 600;
    line-height: 60px;
}

#banner #description p{
    font-size: 18px;
    font-weight: 400;
    font-family: 'Prompt', sans-serif;
}

@media screen and (max-width: 768px) {
    #logo img{ max-height: 50px;}
    #banner h2.title{ font-size: 30px;}
    #banner #description{
        width: 100%;
    }
    #banner #description h2{
        font-size: 30px;
        line-height: 42px;
    }
    #banner.banner-pagein{
        height: 120px;
        background-position: center top;
        background-size: 100% auto;
    }
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Desktop Navigation */
@media (min-width: 1200px) {
    .navmenu {
        padding: 0;
    }

    .navmenu ul {
        margin: 0;
        padding: 0;
        display: flex;
        list-style: none;
        align-items: center;
    }

    .navmenu li {
        position: relative;
    }

    .navmenu a, .navmenu a:focus {
        font-family: "Kanit", sans-serif;
        color: #C7872A;
        padding: 16px 35px;
        font-size: 18px;
        font-weight: 500;
        display: flex;
        align-items: center;
        justify-content: space-between;
        white-space: nowrap;
        transition: 0.3s;
        text-transform: uppercase;
    }
    .fixed-menu .navmenu a, .fixed-menu .navmenu a:focus {
        color: #C7872A;
    }

    .fixed-menu .dropdown-menu .dropdown-item{
        color: #C7872A;
    }

    .navmenu a i,
    .navmenu a:focus i {
        font-size: 12px;
        line-height: 0;
        margin-left: 5px;
        transition: 0.3s;
    }

    .navmenu li:last-child a {
        padding-right: 0;
    }

    .navmenu li:hover>a,
    .navmenu .active,
    .navmenu .active:focus {
        color: #000;
    }

    .navmenu .dropdown ul {
        margin: 0;
        padding: 10px 0;
        background: #fff;
        display: block;
        position: absolute;
        visibility: hidden;
        left: 14px;
        top: 130%;
        opacity: 0;
        transition: 0.3s;
        border-radius: 4px;
        z-index: 99;
    }

    .navmenu .dropdown ul li {
        min-width: 200px;
    }

    .navmenu .dropdown ul a {
        padding: 10px 20px;
        font-size: 15px;
        text-transform: none;
    }

    .navmenu .dropdown ul a i {
        font-size: 12px;
    }

    .navmenu .dropdown ul a:hover,
    .navmenu .dropdown ul .active:hover,
    .navmenu .dropdown ul li:hover>a {
        color: #C7872A;
    }

    .navmenu .dropdown:hover>ul {
        opacity: 1;
        top: 100%;
        visibility: visible;
    }

    .navmenu .dropdown .dropdown ul {
        top: 0;
        left: -90%;
        visibility: hidden;
    }

    .navmenu .dropdown .dropdown:hover>ul {
        opacity: 1;
        top: 0;
        left: -100%;
        visibility: visible;
    }

    .navmenu .megamenu {
        position: static;
    }

    .navmenu .megamenu ul {
        margin: 0;
        padding: 10px;
        box-shadow: 0px 0px 20px rgba(0,0,0, 0.1);
        display: block;
        position: absolute;
        top: 130%;
        left: 0;
        right: 0;
        visibility: hidden;
        opacity: 0;
        display: flex;
        transition: 0.3s;
        border-radius: 4px;
        z-index: 99;
    }

    .navmenu .megamenu ul li {
        flex: 1;
    }

    .navmenu .megamenu ul li a,
    .navmenu .megamenu ul li:hover>a {
        padding: 10px 20px;
        font-size: 15px;
        color: #C7872A;
    }

    .navmenu .megamenu ul li a:hover,
    .navmenu .megamenu ul li .active,
    .navmenu .megamenu ul li .active:hover {
        color: #C7872A;
    }

    .navmenu .megamenu:hover>ul {
        opacity: 1;
        top: 100%;
        visibility: visible;
    }

    .navmenu .dd-box-shadow {
        box-shadow: 0px 0px 30px rgba(0,0,0, 0.15);
    }
}

/* Mobile Navigation */
@media (max-width: 1199px) {

    #icon-menu{ position: absolute; top: 22px; right: 0px;}
    .mobile-nav-toggle {
        color: #C7872A;
        font-size: 36px;
        line-height: 0;
        margin-right: 10px;
        cursor: pointer;
        transition: color 0.3s;
    }

    .navmenu {
        padding: 0;
        z-index: 9997;
    }

    .navmenu ul {
        display: none;
        position: absolute;
        inset: 60px 20px 20px 20px;
        padding: 10px 0;
        margin: 0;
        border-radius: 6px;
        overflow-y: auto;
        transition: 0.3s;
        z-index: 9998;
        box-shadow: 0px 0px 30px rgba(0,0,0, 0.1);
    }

    .navmenu a,
    .navmenu a:focus {
        color: #C7872A;
        padding: 10px 20px;
        font-size: 17px;
        font-weight: 500;
        display: flex;
        align-items: center;
        justify-content: space-between;
        white-space: nowrap;
        transition: 0.3s;
    }

    .navmenu a i,
    .navmenu a:focus i {
        font-size: 12px;
        line-height: 0;
        margin-left: 5px;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        transition: 0.3s;
        background-color: rgba(0,0,0, 0.1);
        color: #fff;
    }

    .navmenu a i:hover,
    .navmenu a:focus i:hover {
        color: #fff;
    }

    .navmenu a:hover,
    .navmenu .active,
    .navmenu .active:focus {
        color: #C7872A;
    }

    .navmenu .active i,
    .navmenu .active:focus i {
        color: #fff;
        transform: rotate(180deg);
    }

    .navmenu .dropdown ul,
    .navmenu .megamenu ul {
        position: static;
        display: none;
        z-index: 99;
        padding: 10px 0;
        margin: 10px 20px;
        background-color: #fff;
        transition: all 0.5s ease-in-out;
    }

    .navmenu .dropdown ul ul,
    .navmenu .megamenu ul ul {
        background-color: rgba(33, 37, 41, 0.1);
    }

    .navmenu .dropdown>.dropdown-active,
    .navmenu .megamenu>.dropdown-active {
        display: block;
        background-color: rgba(33, 37, 41, 0.03);
    }

    .mobile-nav-active {
        overflow: hidden;
    }
    .mobile-nav-active .mobile-nav-toggle.bi-x {
        color: #fff;
        position: absolute;
        font-size: 48px;
        top: 0px;
        right: 20px;
        margin-right: 0;
        z-index: 9999;
    }

    .mobile-nav-active .navmenu {
        position: fixed;
        overflow: hidden;
        inset: 0;
        background: rgba(0, 0, 0, 0.9);
        transition: 0.3s;
    }

    .mobile-nav-active .navmenu>ul {
        display: block;
    }
    .mobile-nav-active .navmenu>ul>li a {
        color: #fff;
    }
}

/*--------------------------------------------------------------
# About us Section
--------------------------------------------------------------*/

#about-us{
    padding-top: 100px;
    padding-bottom: 100px;
}

#about-us .content{
    font-weight: 400;
    font-size: 20px;
    line-height: 26px;
    text-align: center;
    color: #363636;
}
#about-us .imgbox{
    height: 420px;
}
#about-us .imgbox img{
    min-width: 100%;
}
#about-us .about-content{
    margin-top: 5px;
    border-top: 2px solid #000;
    padding-top: 30px;
    margin-bottom: 35px;
    column-count: 2;
    column-gap: 60px;
    text-align: justify;
}


#about-us .viewmore a{
    margin-top: 20px;
    font-family: "Kanit", sans-serif;
    display: inline-block;
    background: #564019;
    color: #fff;
    padding: 12px 25px;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 500;
}

@media screen and (max-width: 768px) {
    #about-us .about-container{ width: 96%; padding: 20px;}
    #about-us .box-about{ margin: 0; padding: 10px 20px;}

    #about-us .about-content{
        column-count: 1;

    }
    #about-us .about-container .section-title{
        padding-bottom: 20px;
    }
    #about-us .about-container .section-title h2{
        font-size: 60px;
        margin-bottom: 20px;
    }
}

@media screen and (max-width: 1200px) {
    #about-us .about-container{ width: 96%;padding: 20px;}

}

/*--------------------------------------------------------------
# About us Page
--------------------------------------------------------------*/

#about-us-page{
    padding: 80px 0;
}

#about-us-page .desc{
    color: #C7872A;

}

#about-us-detail{
    background: url(../images/bgsection.png) no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    color: #fff;
    padding-top: 150px;
    padding-bottom: 200px;
    font-weight: 300;
}

#about-us-detail h2{
    font-size: 36px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}


#what-do{
    background: url(../images/bgsection.png) no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    color: #fff;
    padding-top: 250px;
    padding-bottom: 200px;
    font-weight: 300;
}

#services-activity{ margin: 60px 0;}
#what-do-content{}
#what-do-content .tab-content{ width: 90%;}
#what-do-content .tab-content .title{ font-size: 24px;
    font-style: italic;
    font-weight: 700;
    }
#what-do-content .nav{ width: 8%; margin-left: 2%;}
#what-do-content .nav .nav-link{
    color: #085BA8;
    display: flex;
    width: 30px;
    height: 30px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 25px;
    background: #FCE8CF;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 25px;
}
#what-do-content .nav .nav-link.active{
    background: #F8D0A0;
}

@media screen and (max-width: 768px) {
    #what-do{
        padding-top: 100px;
        padding-bottom: 200px;
    }

    #what-do-content .nav{ width: 100%; margin-left: 0;}
    #what-do-content .nav .nav-link{ margin-left: 10px; margin-right: 10px;}

}

/*--------------------------------------------------------------
# Menu Special Section
--------------------------------------------------------------*/
#menuspecial{ background: #d95234; color: #fff; }
#menuspecial .section-header h2{color: #fff; }

#menuspecial .swiper-pagination{ position: relative; margin-top:50px;}
#menuspecial .swiper-pagination-bullet{
    width: 20px;
    height: 20px;
}
.menu-item-so .title{ font-size: 22px; font-weight: bold; text-align: center; margin-bottom: 20px;}
.btnoffers{text-align: center;}

/*--------------------------------------------------------------
# Menu Section
--------------------------------------------------------------*/
.menu-home{
    background-image: url(../images/bg-menu.jpg);
    background-position: center top;
    background-size: 100% auto;
    color: #F2E2C8;
}
.menu-home .section-header{
    margin: 40px;
}
.menu-home .section-header h2{color: #F2E2C8;}

.menu-home .swiper-slide .menu-item{
}
.menu-home .swiper-slide .menu-item .img{
    height: 360px; overflow: hidden; position: relative;
}
.menu-home .swiper-slide .menu-item .img img{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 460px;
}
.menu-home .swiper-slide .menu-item .info{
    background-image: linear-gradient(rgba(60, 97, 52, 0.00), rgba(0, 0, 0, 0.80));
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 345px;
    height: 100%;
    z-index: 1000;
    transition: .5s ease;
    opacity: 0;
}
.menu-home .swiper-slide .menu-item .info .title-panel{
    position: absolute;
    left: 10px;
    bottom:10px;
    color: #F2E2C8;
    width: 90%;
}
.menu-home .swiper-slide .menu-item .info .title-panel i{
    color: #EF9B14;
    font-size: 22px;
}

.menu-home .swiper-slide .menu-item .info .title-panel .title{
    font-family: "KoHo", sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 100%;
    text-transform: uppercase;
}
.menu-home .swiper-slide .menu-item .info .title-panel .subtitle{
    font-family: "Kanit", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 100%;
    margin-top: 12px;
}

.menu-home .swiper-slide .menu-item:hover .info{
    opacity: 1;
}

.menu-home .swiper-slide .menu-item:hover .img{
    overflow: unset;
}

.menu-home .swiper-slide .menu-item:hover .img img{
    z-index: 999;
    border: 1px solid #eee;
}

.menu h4 {
    font-size: 18px;
    font-weight: 400;
    margin: 0;
}
.menu .view-all{ text-align: center; margin-top: 15px;}
.menu .view-all a{
    display: inline-block;
    padding: 12px 24px;
    border: 1px solid #3C6134;
    margin: 0 auto;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    color: #3C6134;

}

@media (max-width: 575px) {
    .menu-home .section-header{
        margin: 10px;
    }
    .menu-home .section-header h2{
        padding: 0;
        margin: 0;
        line-height: 40px;
    }
    .menu h4 {
        font-size: 16px;
    }
}

.menu #categories{

}
.menu #categories a{
    display: flex;
    padding: 8px 16px;
    align-items: flex-start;
    border-radius: 24px;
    background:#F8F8F8;
}

.menu .menu-item .inner{
    background: #F8F8F8;
    border-radius: 8px;
}

.menu-page .menu-item {
    margin-top: 25px;
}

.menu-page .menu-item .inner{
    padding: 8px;
}

.menu-page .menu-item .inner .img{
    padding: 20px;
}

.menu .menu-item .info{
    padding: 8px;
}

.menu .menu-item .info .btn-light{
    background: #fff;
    font-size: 14px;
    font-weight: 700;
}

.menu .menu-item .menu-img {
    border-radius: 8px;
    margin-bottom: 15px;
}

.menu .menu-item h4 {
    font-size: 18px;
    font-weight: 400;
    color: var(--color-default);
    margin-bottom: 15px;
    text-overflow: ellipsis;
    whitespace: nowrap;
    overflow: hidden;
}

.menu .menu-item .para-menu{
    border-radius: 15px;
    background: #FFF;
}

.menu .menu-item .para-menu span{
    padding: 8px 12px;
    border-right: 1px solid #EBEBEB;
    font-size: 14px;
}
.menu .menu-item .para-menu span:last-child{
    border-right:none;
}

.menu .menu-item .price {
    color: #333;
    font-size: 20px;
    font-weight: 800;
    margin-top: 15px;
    margin-bottom: 0;
}

.menu .menu-item .price .price-sales{
    margin-left: 20px;
    color: #707070;
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
    text-decoration: line-through ;
    flex-shrink: 0;
}
/*

!*--------------------------------------------------------------
# Menu Home Section
--------------------------------------------------------------*!

#menu-home{}
#menu-header{
    background: url("../images/bg-header-menu.jpg") repeat-x #a81b22;
    height: 220px;
}

#menu-header .auto-container{
    padding-top: 80px;
}
#menu-header .title{
    font-weight: 400;
    font-size: 80px;
    line-height: 100%;
    letter-spacing: 0px;
    text-transform: uppercase;
    color: #FFF9F0;
}
#menu-header .btn-order-online{
    margin-top: 30px;
}
#menu-header .btn-order-online a{
    display: inline-block;
    background: #FFF9F0;
    padding: 12px 24px;
    padding-bottom: 18px;
    color: #C7872A;
    font-size: 25px;
    font-weight: 400;
    text-transform: uppercase;
    border-radius: 10px;
    line-height: 100%;
}

#menu-home #menu-list{}
#menu-home #menu-list .menu-item{
    display: inline-block;
    width: 50%;
    height: 520px;
    position: relative;
    overflow: hidden;
}
#menu-home #menu-list .menu-item img{
    object-fit: cover; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto;
    max-width: 100%;
}
#menu-home #menu-list .info{
    position: absolute;
    bottom: 0;
    right: 0;
    color: #fff;
}
#menu-home #menu-list .info a{
    color: #fff;
}

#menu-home #menu-list .info .title h2{
    font-weight: 400;
    font-size: 30px;
    line-height: 100%;
    letter-spacing: 0px;
    text-transform: uppercase;
    color: #FFF9F0;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

@media screen and (max-width: 768px) {
    #menu-header .title{
        font-size: 50px;
    }
    #menu-header .btn-order-online{
        margin-top: 10px;
    }
    #menu-home #menu-list .menu-item{
        display: block;
        width: 100%;
        height: 425px;
    }
}

@media screen and (max-width: 392px) {

    #menu-home #menu-list .menu-item{
        height: 380px;
    }
}
*/

/*--------------------------------------------------------------
# Values
--------------------------------------------------------------*/
.values .box {
    padding: 10px;
    text-align: center;
    transition: 0.3s;
    height: 100%;
}

.values .box .description{
    color: #666;
    font-weight: 400;
    height: 116px;
    font-size: 15px;
}

.values .box img {
    padding: 30px 50px;
    transition: 0.5s;
    transform: scale(1.1);
}

.values .box h3 {
    font-size: 17px;
    color: #222;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 18px;
}

.values .box:hover {
    box-shadow: 0px 0 30px rgba(1, 41, 112, 0.08);
}

.values .box:hover img {
    transform: scale(1);
}

/*--------------------------------------------------------------
# Pricing
--------------------------------------------------------------*/
.pricing{
    font-weight: 300;
}
.pricing.bnpricing{
    background: url(../images/bg-services.png) no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding-top: 150px;
    padding-bottom: 150px;
}


.pricing .box {
    padding: 20px 10px;
    background: #FBF9F1;
    position: relative;
    overflow: hidden;
    transition: 0.3s;

}
.pricing.bnpricing .box {
    margin: 15px 8px;
    padding: 32px 20px;
    text-align: center;
    box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.30);
    border-radius: 24px;
    border: 1px solid #C2C2C2;
}

.pricing .box span {
    margin: 15px 0px;
    display: inline-block;
    padding: 1px 8px;
    align-items: center;
    border-radius: 5px;
    background: #0081FF;
    color: #fff;
    font-size:12px;
}
.pricing.bnpricing .box span.boxname1 {
    background: #F5C61E;
}
.pricing.bnpricing .box span.boxname2 {
    background: #C7872A;
}
.pricing.bnpricing .box span.boxname3 {
    background: #F24F4F;
}

.pricing .box:hover {
    transform: scale(1.1);
    box-shadow: 0px 0 30px rgba(1, 41, 112, 0.1);
}

.pricing .box h2 {
    color: #272D37;
    font-size: 28px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.pricing .box .description {
    text-align: left;
    border-top: 1px solid #EAEBF0;
    margin-top: 25px;
    padding-top:25px;
    font-weight: 400;
    font-size: 14px;
}
.pricing .box .description p{ margin-bottom: 8px; }
.pricing .box .description p:before {
    font-family: FontAwesome;
    content: " \f00c";
    margin-right: 10px;
    color: #437EF7;
}


.pricing .btn-detail {
    margin-top: 20px;
    display: block;
    padding: 8px 40px 10px 40px;
    border-radius: 50px;
    color: #C7872A;
    transition: none;
    font-size: 16px;
    font-weight: 400;
    font-weight: 600;
    transition: 0.3s;
    border: 1px solid #C7872A;
}
.pricing .btn-detail:hover {
    background: #C7872A;
    color: #fff;
}
.pricing .btn-booking {
    margin-top: 20px;
    display: block;
    padding: 8px 40px 10px 40px;
    border-radius: 50px;
    color: #fff;
    transition: none;
    font-size: 16px;
    font-weight: 400;
    font-weight: 600;
    transition: 0.3s;
    background: #C7872A;

}
.pricing .btn-booking:hover {
    border: 1px solid #C7872A;
    background: none;
    color: #C7872A;
}
.pricing .viewmore{
    text-align: left;
    margin-top: 20px;
}
.pricing .viewmore a{
    color: #C7872A;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
}

.pricing .featured {
    width: 200px;
    position: absolute;
    top: 18px;
    right: -68px;
    transform: rotate(45deg);
    z-index: 1;
    font-size: 14px;
    padding: 1px 0 3px 0;
    background: #C7872A;
    color: #fff;
}

@media screen and (max-width: 768px) {
    .pricing.bnpricing .section-header{ width: 100%; }
}
/*--------------------------------------------------------------
# Home News Section
--------------------------------------------------------------*/

#home-news{
    position: relative;
    padding-top: 80px;
    padding-bottom: 80px;
}
#home-news .btnorder{
    background: #C7872A;
    color: #FCFDF7;
    display: inline-block;
    padding: 12px 35px;
    font-weight: 500;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 0px;
    text-align: center;
    text-transform: uppercase;

}
#news-list{
    position: relative;
}

#home-news .post-box {
    height: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: #210000;
    font-family: "Kanit", sans-serif;
    font-size: 16px;
    font-weight: 300;
}

#home-news .post-box .post-img {
    overflow: hidden;
    position: relative;
    height: 300px;
}

#home-news .post-box .post-img img {
    border-radius: 8px;
    min-height: 100%;
    max-width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#home-news .post-box .post-date {
    margin-top: 20px;
    font-family: "Kanit", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 100%;
    color: #C7872A;
}
#home-news .post-box .post-title {
    margin-top: 20px;
    margin-bottom: 10px;
    position: relative;
    transition: 0.3s;
}
#home-news .post-box .post-title a{
    font-family: "KoHo", sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: 0px;
    text-align: justify;
    text-transform: uppercase;
    color: #534021;
}

#home-news #row_thumbs .post-box .post-title a{
    font-size: 16px;
    font-weight: 600;
}

#home-news .post-box .readmore {
    display: flex;
    align-items: center;
    font-weight: 600;
    line-height: 1;
    transition: 0.3s;
}

#home-news .post-box .readmore i {
    line-height: 0;
    margin-left: 4px;
    font-size: 18px;
}

#home-news .post-box:hover .post-title {
    color: #4154f1;
}

#home-news .post-box:hover .post-img img {
    /*transform: rotate(1deg) scale(1.0);*/
}

@media screen and (max-width: 768px) {
    #home-news {
        padding-top: 30px;
        padding-bottom: 80px;
    }
    #home-news .section-header h2{
        font-size: 32px;
    }
    #home-news .btnorder{
        padding: 3px 10px;
        font-size: 16px;
    }

}
/*--------------------------------------------------------------
# Customer Says Section
--------------------------------------------------------------*/

.customer-say{
    background-image: url(../images/bg-testimonials.jpg);
    background-position: center top;
    background-size: 100% auto;
    text-align: center;
    color: #fff;
    padding-top: 60px;
    padding-bottom: 80px;
}

.customer-say .section-header h2 {
    color: #fff;
}

.customer-say .info {
   width: 60%;
    margin: 0 auto;
}

@media screen and (max-width: 768px) {
    .customer-say .info {
        width: 90%;
        margin: 0 auto;
    }
    .customer-say .section-header h2 {
        font-size: 30px;
        line-height: 40px;
    }
    #customer-panel{
        position: relative;
    }
    #customer-panel .swiper-button-next-01, .customer-say .swiper-button-prev-01{
        width: 30px;
        height: 30px;
    }
    #customer-panel .swiper-button-next-01 i, .customer-say .swiper-button-prev-01 i{
        font-size: 15px;
    }

    #customer-panel .swiper-button-next-01{
            right: -10px;
    }

    #customer-panel .swiper-button-prev-01{
            left: -10px;
    }

}


/*--------------------------------------------------------------
# News Page
--------------------------------------------------------------*/

#news{ margin-top:30px;}
#news .title{ margin-bottom:30px;}

#news .post-box {
    transition: 0.3s;
    height: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 10px;
}
#news .post-box .post-img {
    overflow: hidden;
    position: relative;
}

#news .post-box .post-img img {
    transition: 0.5s;
    border-radius: 8px;
}

#news .post-box .post-date {
    font-size: 14px;
    font-weight: 200;
    color: #707070;
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;
}
#news .post-box .post-title {
    margin-bottom: 22px;
    position: relative;
    transition: 0.3s;
}
#news .post-box .post-title a{
    font-size: 24px;
    color: #012970;
    font-weight: 700;
}

#news .post-box .post-title a{
    font-size: 16px;
    font-weight: 600;
}

/*--------------------------------------------------------------
# Gallery Section
--------------------------------------------------------------*/

#gallery{
    position: relative;
}
.gallerySwiper {
    height: 520px;
    width: 100%;
}

#gallery .gallerySwiper .swiper-slide {
    text-align: center;
    font-size: 18px;
    height: calc((100% - 30px) / 2) !important;
    /* Center slide text vertically */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: 20px;
}

#gallery .gallerySwiper .swiper-slide .img{
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#gallery .gallerySwiper .swiper-slide img{
    border-radius: 20px;
    min-width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: 100%;
}
#gallery .control{
    display: flex;
    align-items: center;
    justify-content: center;
}
#gallery  .swiper-button-next-gal, #gallery .swiper-button-prev-gal {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #33312D;
    border-radius: 50%;
    border: 2px solid #33312D;
    width: 42px;
    height: 42px;
    margin: 0 5px;
}

#gallery .swiper-button-next-gal, #gallery .swiper-button-prev-gal i{
    font-size: 20px;
}

.box-gallery{
    position: relative;
    display: block;
    width: 100%;
    height: 100px; /* default*/
    overflow: hidden;
    margin-bottom: 20px;
}
.box-gallery img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

.box-gallery.gal-1{
    height: 268px;
}
.box-gallery.gal-2{
    height: 520px;
}


/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/

#contact{
    line-height: 100%;
    letter-spacing: 0px;
    color: #534021;
    padding-top: 90px;
    padding-bottom: 70px;

}
#contact a{
    color: #534021;
}

#contact-info{ padding: 20px;  padding-top:0;line-height: 30px;}
#contact-info i{ margin-right: 20px;}
#contact-info h2{
    margin-top: 0;
    font-family: "KoHo", sans-serif;
    font-weight: 700;
    font-size: 54px;
    line-height: 59px;
    letter-spacing: 0px;
    color: #C7872A;
    text-transform: uppercase;
    margin-bottom: 30px;
}

#contact .btnBooking {
    color: #FCFDF7;
}

#contact #frmContact{
    padding-bottom: 50px;
}
#contact #frmContact label{
    font-weight: 600;
    font-size: 18px;
    line-height: 20px;
    text-transform: uppercase;

}
#contact #frmContact input, #contact #frmContact textarea{
    background: #FFF9F0;
}
#contact #frmContact #btnContact{
    color: #FFF;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    padding: 8px 32px;
    border-radius: 8px;
    background: #C7872A;
    border: none;
    text-transform: uppercase;
    margin-top: 15px;
}

#panel-contact .contact-item i{ font-size: 35px; margin-right: 12px; color: #b48b24;}

#panel-contact #btnContact{
    color: #FFF;
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    display: flex;
    padding: 6px 32px;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    background: #C7872A;
    border: none;
    text-transform: uppercase;
    margin-top: 15px;
}

@media screen and (max-width: 768px) {

    #contact{
        background-size: unset;
        background-position: left top;
        padding-top: 10px; height: auto;}
    #contact #contact-info{ padding: 20px 10px;}
    #contact-info h2{
        font-size: 20px;
    }
    #contact-info i{ margin-right: 5px;}
    #frmContact{ padding-bottom: 20px;}
    #contact .title-page{ margin-top: 20px;}
}
@media screen and (max-width: 1200px) {
    #contact-info{ padding: 20px;}
    #contact-info h2{
        font-size: 30px;
    }
}

#ifrvideo{margin:0; padding:0; width:100%; height:100vh; overflow: hidden;}

/*--------------------------------------------------------------
# Online Order Page
--------------------------------------------------------------*/

.order-box{
    background: #fff3dc;
    border-radius: 20px;
    text-align: center;
    padding: 80px 40px;
    color: #210000;
}

.order-box .title{
    font-weight: 600;
    font-size: 20px;
    line-height: 20px;
    letter-spacing: 0px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.order-box .desc{
    font-family: "KoHo", sans-serif;
    font-weight: 600;
    font-size: 32px;
    line-height: 42px;
    letter-spacing: 0%;
    text-align: center;
}

.order-box .btnorder{
    color: #FFF6ED;
    font-weight: 600;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: 0px;
    text-align: center;
    text-transform: uppercase;
    margin-top: 20px;
    display: inline-block;
    background: #C7872A;
    padding: 12px 25px;
    border-radius: 15px;
}

#logo-ship img{
    border-radius: 20px;
    box-shadow: 0px 4px 4px 0px #00000040;
}

@media screen and (max-width: 768px) {
    .order-box{
        padding: 50px 10px;
    }
    #logo-ship img{ width: 100px; }
}
/*--------------------------------------------------------------
# Product Page
--------------------------------------------------------------*/

#panel-products{}
#panel-products #categories-products{ background: #C7872A; padding: 15px 0; color: #FCFDF7;}
#panel-products #categories-products .item-pro{
    margin: 0 30px;
}
#panel-products #categories-products .item-pro a{
    font-weight: 500;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0px;
    text-transform: uppercase;
    color: #FCFDF7;
}

#panel-products .item-pro a.active{
    border-bottom: 3px solid #C7872A;
}

#pro-list .title{
    position: relative;
    font-weight: 700;
    font-size: 32px;
    line-height: 50px;
    letter-spacing: 0px;
    text-align: right;
    color: #827552;
    margin-left: 20px;
    text-transform: uppercase;
}

.row_pro .in h2{
    font-family: "KoHo", sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 31px;
    letter-spacing: 0px;
    color: #210000;
}
.row_pro .in{
    margin-bottom: 30px;
}
.row_pro .imgbox{
    height: 400px;
    border-radius: 20px;
}
.row_pro .imgbox img{
    width: 100%;
    height: 100%;
    border-radius: 20px;
    max-height: unset;
}
.row_pro .in .info_pro{
    padding:  20px;
}
.row_pro .in .info_pro .info_pro1 {
    font-weight: 500;
    font-size: 16px;
    line-height: 100%;
}
.row_pro .in .info_pro .info_pro1 .price{
    font-family: "KoHo", sans-serif;
    font-weight: 700;
    font-size: 30px;
    line-height: 100%;
    letter-spacing: 0px;
    text-align: right;
    text-transform: uppercase;
    color: #C7872A;
}
.row_pro .in .info_pro .info_pro2 {
    font-weight: 500;
    font-style: italic;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 0px;
    text-align: right;
    text-transform: uppercase;
    color: #210000B2;
}

@media screen and (max-width: 768px) {
    .row_pro .imgbox{
        height: 250px;
        border-radius: 20px;
    }
    .row_pro .imgbox img{
        height: auto;
        max-height:100%;
    }
    #panel-products #categories-products .item-pro{
        margin: 0 10px;
        font-size: 15px;
    }
}

.dflex-responsive{ max-width: 100%; overflow: hidden; overflow-x: scroll; }

.dflex-responsive::-webkit-scrollbar {
    width: 0px;
    background: transparent; /* make scrollbar transparent */
}

/*--------------------------------------------------------------
# Product Detail Page
--------------------------------------------------------------*/

#panel-products-details{}
#panel-products-details .tilte_producst{
    font-size: 26px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
#panel-products-details .price a{
    background:#90B239;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    color: #fff;
    display: inline-block;
    padding: 10px 32px;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    text-transform: uppercase;
}

@media screen and (max-width: 768px) {
    #panel-products .item-pro a{
        padding: 10px;
    }
}

#hotline a{ font-size: 18px; font-size: 600; }

.title_cate_home{ font-size: 20px; color:#02305c; font-weight: bold; text-transform: uppercase; }

#panel_search {
    position: absolute;
    width: 100%;
    padding: 16px 5px;
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
    -webkit-transform: translateY(-100%);
    left: 0;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    left: 0;
    right: 0;
    top: 0;
    z-index: 10000;
    background: #fff;
}
#panel_search.showpn {
    -ms-transform: translateY(0);
    transform: translateY(0);
    -webkit-transform: translateY(0);
}

#panel_search .close {
    cursor: pointer;
    font-size: 30px;
    border-radius: 100%;
    width: 40px;
    height: 40px;
    line-height: 38px;
    text-align: center;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    border: none;
    color: #333;
    right: 0px;
}
#panel_search .close::before {
    content: "+";
    font-size: 70px;
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    display: block;
    position: relative;
    left: 1px;
}

#pnsearch{ position: relative; margin-left: 120px;}
#pnsearch span {
    border: 1px solid #848c92;
    cursor: pointer;
    font-size: 30px;
    border-radius: 100%;
    width: 40px;
    height: 40px;
    line-height: 38px;
    text-align: center;
    position: absolute;
    right: 0;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}
#pmlistsearch{position: absolute; top: 38px; left: 0; z-index: 9999;}
#pmlistsearch .in{ border: 1px solid #eee; padding: 10px;  background: #fff;}
#pmlistsearch .in .item_sct{ padding: 3px 0;}
#ftmsearch .form-control{ border: 1px solid #032c43;}

#panel_search select{ padding-top: 11px; padding-bottom: 11px;}

.title_home{ color: #02305c; text-transform: uppercase;}

#panel-aboutus{
    background: url(../images/bg-about.png) no-repeat;
    height: 760px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top:220px;
}
#aboutus-warp{ width: 60%; margin: 0 auto;}

#aboutus-warp h2{
    color: #B48B24;
    font-size: 42px;
    font-weight: 600;
    margin-bottom: 22px;
    text-align: center;
}

@media screen and (max-width: 768px) {
    #panel-aboutus{ padding-top: 80px;}
    #aboutus-warp{ width: 90%;}
}

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

#footer {
    background-image: url(../images/bgfooter.jpg);
    background-position: center top;
    background-size: 100% auto;
    padding-top: 120px;

    color: #fff;
}
#footer a{
    color: #fff;
}

#footer #footer_text{
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    margin-bottom: 120px;
}

#footer h4{
    font-family: "KoHo", sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 59px;
    letter-spacing: 0px;
}
#footer #bsocial img{
    margin: 0 5px;
}

#footer #bmenu a{
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 100%;
    text-transform: uppercase;
    color: #FEF8EF;
}

#frmnewsletter{ border: 1px solid #C7872A;}
#frmnewsletter input{background: none; border: none;  }
#frmnewsletter button{background: none; border: none; }

#footer .copyright{
    font-family: "Kanit", sans-serif;
    background-image: url(../images/bg-copyright.jpg);
    background-position: center top;
    background-size: 100% auto;
    font-size: 20px;
    font-weight: 400;
    padding: 10px 0;
    color: #C7872A;
}
#footer .copyright a{ text-decoration: underline;}

@media screen and (max-width: 768px) {
    #fb-social{ width: 100%; overflow: hidden; float: none;}
    #bsocial{ margin-top: 15px;}
    #footer #footer_menu li{ margin-right: 20px; width: 33%; }
}


.post-box{ margin-bottom: 20px;}
.post-box .post-title a{
    display: block;
    color: #181C32;
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
}

.post-box .view-detail a{
    display: inline-block;
    padding: 12px 24px;
    background: #C7872A;
    color: #EBE7D1;
}

.news-date{
    color: #707070;
    font-size: 14px;
    font-weight: 400;
}
.news-title{
    color: #181C32;
    font-size: 38px;
    font-weight: 600;
}
.news-content{ margin-top: 20px;}

.others-img{
    width: 80px;
    height: 80px;
}
.others-date{
    color: #707070;
    font-size: 12px;
    font-weight: 400;
}
.others-title{
    color: #181C32;
    font-size: 16px;
    font-weight: 600;
}
.nav-tabs{ border: none; margin-bottom: 30px;}
.nav-tabs .nav-link{
    color: #000;
}
.nav-tabs .nav-link.active{ display: flex;
    padding: 12px 24px;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    background: #B48B24;
    color: #fff;
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.pnCarousel {
    position: relative;
}
.pnCarousel .owl-theme .custom-nav {
    position: absolute;
    top: 0%;
    left: 0;
    right: 0;
}
.pnCarousel .owl-theme .custom-nav .owl-prev, .pnCarousel .owl-theme .custom-nav .owl-next {
    position: absolute;
    height: 100px;
    color: inherit;
    background: none;
    border: none;
    z-index: 100;
}
.pnCarousel .owl-theme .custom-nav .owl-prev i, .pnCarousel .owl-theme .custom-nav .owl-next i {
    font-size: 80px;
    color: #cecece;
}
.pnCarousel .owl-theme .custom-nav .owl-prev {
    left: 0;
}
.pnCarousel .owl-theme .custom-nav .owl-next {
    right: 0;
}

.pnCarousel .owl-carousel .owl-item img{ max-height: 350px; max-width: 100%; width: auto!important; margin: 0 auto;}

#pnmenu{}

.pagination .page-item.active .page-link{ background-color: #C7872A;}
.pagination .page-item .page-link{}

.swiper-button-next-01, .swiper-button-prev-01 {
    position: absolute;
    top: 50%;
    width: calc(var(--swiper-navigation-size)/ 44 * 27);
    height: var(--swiper-navigation-size);
    margin-top: calc(0px - (var(--swiper-navigation-size)/ 2));
    z-index: 999;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #474747;
    border-radius: 50%;
    background: #fff;
    width: 60px;
    height: 60px;
}

.swiper-button-next-01, .swiper-button-prev-01 i{
    font-size: 20px;
}

.swiper-button-next-01 {
    right: 10px;
    left: auto;
}

.swiper-button-prev-01{
    left: 10px;
    right: auto;
}

#pncalendar .btn-hour{
    cursor: pointer;
}

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

#pncalendar .ui-datepicker{
    width: 100%;
    border: none;
}

#pncalendar .ui-widget-header{
    background: none;
    border: none;
    color: #0c0c0c;
}

#pncalendar .ui-widget-content{
    background: none;
}

#pncalendar .ui-datepicker td span, #pncalendar .ui-datepicker td a{
    padding: 1.2em;
    text-align: center;
}

#pncalendar .ui-state-active, .ui-widget-content .ui-state-active{
    border: 1px solid #C7872A;
    background: #C7872A;
    color: #fff;
}

#infomation{ width: 480px; margin: 0 auto;}

.btnback{
    background: none;
    padding: 10px 24px;
    color: #C7872A;
    font-size: 18px;
    font-weight: 400;
    border: 1px solid #C7872A;
}

.btnback i{ margin-right: 20px;}


.btnnext{
    background: #C7872A;
    padding: 10px 24px;
    color: #fff;
    font-size: 18px;
    font-weight: 400;
    border: none;
}

.btnnext i{ margin-left:  20px;}

@media screen and (max-width: 768px) {
    #infomation{ width: 100%; }
}