.img-logo {
    width: 89px;
    margin-left: 20px;
}

body {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

@font-face {
    font-family: 'brushscriptswlight';
    src: url('fonts/brushscriptsw_light-webfont.woff2?v=20261111-1') format('woff2'),
    url('fonts/brushscriptsw_light-webfont.woff?v=20261111-1') format('woff');
    font-weight: normal;
    font-style: normal;
}


.navbar, .navbar-brand {
    padding: 12px 12px;
}

.order-btn {
    background-color: #005139;
}

.container-box {
    padding: 0;
}

@media (min-width: 992px) {
    #mainNav .navbar-nav .nav-item .nav-link {
        padding: 2.1em 0.5em !important;
    }
}

@media (min-width: 1078px) {
    #mainNav .navbar-nav .nav-item .nav-link {
        padding: 2.1em 1em !important;
    }
}

@media (min-width: 1191px) {
    #mainNav .navbar-nav .nav-item .nav-link {
        padding: 2.1em 1em !important;
    }
}


@media (min-width: 1226px) {
    #mainNav .navbar-nav .nav-item .nav-link {
        padding: 2.1em 1.5em !important;
    }
}

#mainNav .navbar-nav .nav-item .nav-link {
    color: #fff8ec;
    font-weight: 600;
}

.slide_container {
    position: relative;
    margin-top: 106px;
    height: 600px;

}

.slide-box-outside {
    z-index: 0;
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

.slide_container .slide-box {

    height: 100%;
}


.slick-list, .slick-track {
    height: 100%;
}

.slick-list li {

}

.slick-dots li {
    list-style: none
}

.slick-dots {
    list-style: none;
}

.slick-dots li button {
    border: none;
    background: none;
    color: #fff8ec;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    background: #fff8ec;
    margin-bottom: 15px;
}

.slick-dots li.slick-active button {

    color: #005139;

    background: #005139;

}

.slide-box-img {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}


.slide_flower {
    width: auto;
    right: 0;
    z-index: 1;
}

.slide_bottom {
    z-index: 1;
    bottom: -2px;
    width: 100%;
    left: 0;
}

#about {
    background-image: none;
    background-size: 100%;
    background-position: bottom center;
    background-repeat: no-repeat;
}

.about-box {

}

@media (min-width: 992px) {
    .menu-box {
        position: absolute;

    }
}


.menu-box h6 {
    font-size: 16px;
}

.menu-box .col-lg-6 {

}

.menu-box-1 {
    top: 0;
    left: 0;
}

.menu-box-2 {
    top: 0;
    right: 0;
}

.menu-box-3 {
    bottom: 0;
    left: 0;
}

.menu-box-4 {
    bottom: 0;
    right: 0;
}

.about-box-img img {
    width: 32%;

}

.font-header {
    font-size: 38px;
    font-family: 'brushscriptswlight', Arial, sans-serif;
    color: #005139;

}

.section-heading {

}

.section-heading span {
    font-size: 38px;
}

#order {
    background-image: url('img/pic/home2.png?v=20261111-1');
    background-size: cover;
    background-position: center center;
    height: 500px;
}

.color-yellow {
    color: #fff8ec;
}

.btn-danger-online {
    font-size: 18px;
    padding: 20px 50px;
    font-weight: normal;
    background-color: #005139;
}

#special .container-fluid img {
    width: 70%;
}

#special .container-fluid h2 .text-uppercase {
    font-weight: normal;
    font-size: 30px;
}

#special2 {
    background-image: url('img/pic/green-emerald-curry.png?v=20261111-1');
    background-size: cover;
    background-position: center center;
}

.special2-img img {
    width: 136px;
}

.special2-img-img img {
    width: 90%;
}

@media (max-width: 992px) {
    .slide_container {
        height: 300px;
    }

    .img-logo {
        width: 219px;

        margin: 10px;
    }

    .about-box-img {
        display: none;
    }

    .menu-box .row .col-lg-6 {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        flex-direction: column;

    }
}

.nav-link.js-scroll-trigger {
    font-weight: normal !important;
}

.swiper-container {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}


.swiper-slide {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.nav-link-order {
    color: #005139 !important;
}

.btn-online-box {
    right: 0;
    top: 0;
    width: 100%;
    padding-top: 230px;

    height: auto;
    z-index: 1028;
}

.btn-online-box .btn-online-order {
    background: rgba(244, 28, 75, 0.82);
    color: white !important;
    border-radius: 60px;

    font-size: 25px;
    padding: 20px 60px;
}

@media (max-width: 768px) {
    .btn-online-box .btn-online-order {
        background: rgba(244, 28, 75, 0.82);
        color: white !important;
        border-radius: 40px;

        font-size: 15px;
        padding: 15px 50px;
    }
}

.position-absolute-sakura {
    right: 0;
    width: 500px;
    top: 0;
    z-index: 1029;
}

.about-text {
    width: 755px;
    margin: auto;
    font-size: 21px;
}

@media (max-width: 768px) {
    .about-text {
        width: 95%;
        margin: auto;

    }

    .btn-online-box {
        padding-top: 100px;
        z-index: 1030;
    }

    .img-logo {
        width: 126px;
        margin: 10px;
    }

    .slide_container {

        margin-top: 82px;
    }
}

#mainNav .navbar-toggler {
    background-color: transparent;
    font-size: 18px;
}

#gallery {
    background-image: none;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding-bottom: 150px;

}

#gallery .btn-online-order {
    right: 0;
    font-size: 25px;
    padding: 20px 60px;
    bottom: 0;
    border-radius: 30px 0 0 0;
}

.footer {
    background-color: black;
}

.footer-content p {
    font-size: 18px;
    color: white;
}
/* Bangkok Thai brand and responsive refinements — v20261111-1 */
body { background: #fffaf1; color: #233b30; }
#mainNav, #mainNav.navbar-shrink { background: #fffaf1; }
#mainNav .navbar-nav .nav-item .nav-link { color: #005139; }
#mainNav .navbar-nav .nav-item .nav-link:hover { color: #876316; }
#mainNav .navbar-toggler { color: #005139; border: 1px solid #005139; }
.img-logo { object-fit: contain; height: 89px; width: 89px; }
#mainNav .navbar-brand { padding: 0; }
.slide_container { margin-top: 113px; }
.swiper-slide .overlay { position: absolute; inset: 0; background: rgba(0, 30, 20, .42); }
.btn-online-box { padding-top: 170px; }
.hero-title { color: #fff; font-family: Georgia, serif; font-size: clamp(42px, 6vw, 76px); margin-bottom: 12px; }
.hero-location { color: #fff; font-size: 18px; margin-bottom: 30px; }
.btn-online-box .btn-online-order, #gallery .btn-online-order { background: #005139; border-color: #005139; color: #fff; }
.btn-online-box .btn-online-order:hover, #gallery .btn-online-order:hover { background: #003b29; }
#gallery { background-color: #f2ecdf; }
#about { background-color: #fffaf1; }
.about-text { max-width: 755px; width: 90%; font-size: 18px; }
.about-text p { line-height: 1.85; }
.footer { background: #003b29; }
.footer .font-header, .footer .section-heading .text-uppercase { color: #ebce87 !important; }
.footer a { color: #fff; text-decoration: underline; overflow-wrap: anywhere; }
a:focus-visible, button:focus-visible { outline: 3px solid #d8ae4b; outline-offset: 4px; }
@media (max-width: 992px) {
  .img-logo { width: 66px; height: 66px; margin: 0 10px; }
  .slide_container { margin-top: 76px; height: 430px; }
  .btn-online-box { padding: 110px 16px 0; }
  .navbar-nav { gap: 8px; }
}
@media (max-width: 768px) {
  .slide_container { height: 380px; }
  .btn-online-box { padding-top: 85px; }
  .hero-location { font-size: 15px; }
  #gallery .btn-online-order { font-size: 18px; padding: 18px 32px; }
  .footer-content > div { margin-bottom: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}

/* Staggered gallery with aligned top and bottom edges. */
.gallery-box {
  display: grid;
  gap: clamp(8px, 1.5vw, 18px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(12, minmax(0, 1fr));
  grid-template-areas:
    "a b c" "a b c" "a b c" "a e c"
    "d e c" "d e f" "d e f" "d h f"
    "d h i" "g h i" "g h i" "g h i";
  height: clamp(500px, 78vw, 1040px);
  margin-top: 20px;
}
.gallery-tile:nth-child(1) { grid-area: a; }
.gallery-tile:nth-child(2) { grid-area: b; }
.gallery-tile:nth-child(3) { grid-area: c; }
.gallery-tile:nth-child(4) { grid-area: d; }
.gallery-tile:nth-child(5) { grid-area: e; }
.gallery-tile:nth-child(6) { grid-area: f; }
.gallery-tile:nth-child(7) { grid-area: g; }
.gallery-tile:nth-child(8) { grid-area: h; }
.gallery-tile:nth-child(9) { grid-area: i; }
.gallery-tile .img-box, .gallery-tile a { height: 100%; }
.gallery-tile a { display: block; overflow: hidden; border-radius: 4px; background: #fffaf1; }
.gallery-tile img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.gallery-tile a:hover img { transform: scale(1.04); }
@media (max-width: 575px) {
  .gallery-box {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-template-areas: "a b" "c d" "e f" "g h" "i i";
    height: auto;
  }
  .gallery-tile { aspect-ratio: 1; }
  .gallery-tile:last-child { aspect-ratio: 2; }
}

#gallery {
  background-image: linear-gradient(rgba(255, 250, 241, .88), rgba(255, 250, 241, .9)), url('img/pic/01-shrimp-vegetables.png?v=20261111-2');
  background-size: cover;
  background-position: center;
}
#about {
  background-image: url('img/pic/thai-ornament.svg?v=20261111-3');
  background-size: min(100%, 1600px) auto;
  background-position: center bottom;
  padding-bottom: clamp(96px, 12vw, 180px);
}