@font-face {
    font-family: 'ls-regular';
    src: url('../fonts/ls-regular.woff2') format('woff2'),
        url('../fonts/ls-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.poppins-regular {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.poppins-medium {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.poppins-semibold {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.poppins-bold {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.poppins-regular-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.poppins-medium-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.poppins-semibold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: italic;
}

.poppins-bold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: italic;
}


/* --- Base Styles & Reset --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    width: 100%;
    height: 100%;
}

body {
    width: 100%;
    height: 100%;        
    font-family: "Poppins", sans-serif;
    color: #2b3e34; /* Dark green/grey text */
    line-height: 1.6;
    background: #3d6257 url(../images/banner-vietnam.jpg) no-repeat center center;
    background-size: cover;
}

/* --- Reusable Components --- */
.logo-placeholder {
    max-width: 250px;    
    margin: 0 auto 20px;
}

.logo-placeholder img {width: 100%;}

.menu-item-overlay-a {
     position: absolute; top: 60%; left: 65%; text-align: left; width: 250px;
}

.menu-item-overlay-b {
     position: absolute; top: 0%; left: 0%; text-align: left; width: 250px;
}


.top-food-placeholder {
    max-width: 1200px;
    text-align: center;
    margin: 0 auto;
    /*background: linear-gradient(to top, #ff5733 50%, transparent 50%);*/
    position: relative;
    z-index: 11;
}

.top-food-placeholder img {
    width: 100%;
    max-width: 629px;
}

.tall-placeholder img {
    width: 100%;
    max-width: 454px;
}

.bg-clouds {
    background: url(../images/clouds-fade.png) no-repeat center bottom;
    width: 100%;
    height: 200px;    
}

.container {
    max-width: 1200px;
    margin: -300px auto 0 auto;
    padding-top: 250px;        
    background: #335245 url(../images/clouds-fade.png) no-repeat center top;
    position: relative;
}

.mark-asian {position: absolute; top: 30px; left: 30px; z-index: 10;}

.image-placeholder {
    background-color: #385d4f; /* Main dark green color for placeholders */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.side-food-placeholder {
    position: relative;
}

.side-food-placeholder img {
    width:100%; max-width: 791px;
}

.btn {
    display: inline-block;
    padding: 10px 24px;
    border-radius: 20px;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.btn-dark {
    background-color: #173024;
    color: #ffffff;
}

.btn-dark:hover {
    background-color: #244937;
}

.text-link {
    color: #173024;
    text-decoration: underline;
    font-weight: bold;
    margin-left: 15px;
}

/* --- Layout Grids --- */
.grid-2-food {
    display: grid;
    grid-template-columns: 0.3fr 0.7fr;
    /* align-items: center; */
    gap: 0px;
    padding: 0px 0px 0px 100px;
}


.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 40px;
    padding: 60px 125px;    
}

.grid-2.reverse .text-content {
    order: 2;
}
.grid-2.reverse .image-placeholder {
    order: 1;
}

/* --- Header Section --- */
.header {    
    text-align: center;
    padding: 40px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.header h1 {
    font-size: 3rem;
    margin-bottom: 20px;
    font-weight: normal;
    font-family: 'ls-regular';
}

.header .cta-buttons .btn {
    margin: 0 5px;
}

/* --- Info Sections --- */
.section-img-store-front {margin-top: -175px; position: relative; z-index: 10;}
.img-store-front img {width: 100%;}

.section-bg-paper {margin-top: -500px; position: relative; z-index: 11; padding-top: 200px;}

.bg-paper {
    background: url(../images/bg-paper.png) no-repeat top center;
    background-size: cover;
}

.section-bg-paper h2,
.section-bg-paper p
 {color: #455849 !important;}



.text-content h2 {
    font-family: 'ls-regular';
    font-size: 3.5rem;
    margin-bottom: 20px;
    font-weight: normal;
    line-height: 1.2;
    color: #faeee2;
}

.text-content p {
    font-size: 1rem;
    margin-bottom: 20px;
    color: #faeee2;
}

/* --- Visit Us Section --- */
.visit-section {
    background: url(../images/bg-mountains-1.png) no-repeat center bottom;
    text-align: center;
    padding: 150px 40px 350px 40px;
}

.visit-section h2 {
    font-family: 'ls-regular';
    color: #f5ead1;
    font-size: 3.5rem;
    line-height: 1.2;
    margin-bottom: 40px;
    font-weight: normal;
}

.visit-section a {
    color: #f5ead1;
}

.location-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    padding: 0 150px;
}

.location-card {
    /* background-color: #385d4f; */
    color: #f5ead1;
    padding: 100px 30px;
    text-align: left;
    border-radius: 100px;    
    background-color: rgba(12, 22, 47, 0.5);
    border: 2px solid #f8cfb2;
}

.location-card h3 {
    font-family: 'ls-regular';
    font-size: 1.5rem;
    margin-bottom: 5px;
    font-weight: normal;
}

.location-card .subtitle {
    font-size: 0.9rem;
    opacity: 0.8;
    margin-bottom: 20px;
}

.location-card p {
    font-size: 0.95rem;
    margin-bottom: 20px;
    line-height: 1.4;
}

.location-card .btn {
    background-color: #173024;
    color: #fff;    
}

/* --- Bring Us Home Section --- */
.bring-home-section {
    display: flex;
    flex-direction: column;
    background: #335245;
}

.sauce-placeholder {
    width: 100%;
    text-align: center;
    margin-top: -200px;
}

.sauce-placeholder img {
    width: 100%;
    max-width: 593px;
}

.sauce-banner {
    background-color: #335245;
    color: #f5ead1;
    text-align: center;
    padding: 60px 40px;
}

.sauce-banner h2 {
    font-family: 'ls-regular';
    font-size: 3.5rem;
    line-height: 1.2;    
    margin-bottom: 20px;
    font-weight: normal;
}

.sauce-banner p {
    max-width: 600px;
    margin: 0 auto 30px;
}

.sauce-banner .btn {
    background-color: #173024;
    color: white;
    margin: 0 5px;
}

/* --- Gallery --- */

        /* Main Container */
        .gallery-container {
            width: 100%;
            max-width: 1000px;            
            margin: 0 auto;
            padding: 30px;            
        }

        /* Banner Header Text */
        .gallery-header {
            font-family: 'ls-regular';
            text-align: center;
            color: #f5ead1; /* Light beige font color */
            font-size: 3.5rem;            
            font-weight: normal;
            margin-bottom: 25px;
        }

        /* CSS Grid Setup */
        .gallery-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-auto-rows: minmax(180px, auto);
            gap: 15px; /* Spaces between the image containers */
        }

        /* Gallery Grid Items */
        .gallery-item {
            width: 100%;
            overflow: hidden;
            display: flex;
        }

        .gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* Ensures images crop nicely without warping */
            display: block;
        }

        /* Explicit Layout Spans to match the image grid exactly */
        
        /* Column 1 Items */
        .item-drinks {
            grid-column: 1;
            grid-row: 1 / 3; /* Tall item spanning 2 rows */
        }
        .item-rolls {
            grid-column: 1;
            grid-row: 3 / 5; /* Tall item spanning 2 rows */
        }

        /* Column 2 Items */
        .item-table-interior {
            grid-column: 2;
            grid-row: 1;
        }
        .item-soup {
            grid-column: 2;
            grid-row: 2 / 4; /* Tall center item spanning 2 rows */
        }
        .item-patio {
            grid-column: 2;
            grid-row: 4;
        }

        /* Column 3 Items */
        .item-dining-room {
            grid-column: 3;
            grid-row: 1 / 3; /* Tall item spanning 2 rows */
        }
        .item-platter {
            grid-column: 3;
            grid-row: 3 / 5; /* Tall item spanning 2 rows */
        }

        /* Responsive Breakpoints */
        
        /* Tablets (2 Columns view) */
        @media (max-width: 850px) {
            .gallery-header {
                font-size: 2rem;
            }
            .gallery-grid {
                grid-template-columns: repeat(2, 1fr);
                grid-auto-rows: 220px;
            }
            /* Reset grids for 2 column flow */
            .gallery-item {
                grid-column: auto !important;
                grid-row: auto !important;
            }
            /* Make specific items span 2 rows to keep asymmetry fun */
            .item-drinks, .item-rolls, .item-dining-room {
                grid-row: span 2;
            }
        }

        /* Mobile Devices (Single Column stack) */
        @media (max-width: 480px) {
            .gallery-container {
                padding: 15px;
            }
            .gallery-header {
                font-size: 1.6rem;
                margin-bottom: 15px;
            }
            .gallery-grid {
                grid-template-columns: 1fr;
                grid-auto-rows: 250px;
                gap: 12px;
            }
            .gallery-item {
                grid-column: auto !important;
                grid-row: auto !important;
            }
        }


/* --- Reviews --- */

.section-reviews {max-width: 900px; margin: 0 auto; text-align: center; padding: 20px 50px;}
.section-reviews h2 {color: #f5ead1; font-family: 'ls-regular'; font-size: 3.5em; font-weight: normal;}
.section-reviews p {color: #f5ead1; font-size: 1.35em; margin-top: 25px;}
.review-stars {width: 100px;}

.splide__slide {padding-bottom: 30px;}

/* --- Footer Section --- */
.footer {    
    background: url('../images/footer-bg-1.jpg') no-repeat center bottom;
    background-size; cover;
    background-color: #ffb08a; /* Peach / Salmon footer background */
    max-width: 1200px;
    margin: 0 auto;
    padding: 100px 75px 200px 75px;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    /* align-items: center; */
}

.footer-logo {
    font-weight: bold;
    font-size: 1.2rem;
    letter-spacing: 2px;
    width: 175px;'
    border:1px solid red;
}

.footer-logo img {width: 100%;}

.brand-info {
    width: 50%;
}

.brand-info p {
    font-size: 1rem;
    margin-top: 5px;
    opacity: 1;
    color: #000;
}

footer a {
    color: #000;
    font-weight: bold;
}

.insta-icon {
    font-size: 1.5rem;
    text-decoration: none;
    cursor: pointer;
}

/* --- Responsive Adjustments --- */
@media (max-width: 1000px) {
    .section-img-store-front {
        margin-top: -75px;
    }

    .section-bg-paper {
        margin-top: -200px;
    }
}

@media (max-width: 950px) {
    h2 {font-size: 3rem !important;}

    .section-img-store-front {
        margin-top: -50px;
    }

    .section-bg-paper {
        margin-top: -200px;
    }

    .grid-2 {
        padding: 175px 45px 100px 45px;
    }

    .location-grid {    
    gap: 30px;
    padding: 0 75px;
    }

    .side-food-placeholder {
        padding-top: 100px;
    }

    .section-reviews p {
        font-size: 1.15rem;
    }

    .menu-item-overlay-a, .menu-item-overlay-b {
        font-size: 0.95rem;
    }
}


@media (max-width: 700px) {
    body {    
    background: #3d6257 url(../images/banner-vietnam-1.jpg) no-repeat center top;
    background-size: auto 75%;    
}

    .logo-placeholder {
        max-width: 175px;
    }


    .mobile-margin-top {
        margin-top: 125px;
    }

    h2 {font-size: 2.75em !important;}

    .menu-item-overlay-a {
     position: absolute; bottom: 0; left: 30px; text-align: left; width: 250px;
    }

    .menu-item-overlay-b {
     position: absolute; top: 65%; left: 0%; text-align: left; width: 250px;     
    }

    .menu-item-overlay-a, .menu-item-overlay-b {
        font-size: 0.85rem;
    }

    .grid-2-food {
    grid-template-columns: 1fr;
        padding: 0px 0px 0px 30px;
    }

    .grid-2-food .text-content {
        padding-right: 30px;
    }

    .grid-2, .grid-2.reverse {
        grid-template-columns: 1fr;
        padding: 40px 30px;
    }
    
    .grid-2.reverse .text-content {
        order: unset;
    }
    .grid-2.reverse .image-placeholder {
        order: unset;
    }

    .section-img-store-front {
        margin-top: 0px;
    }

    .section-bg-paper {
        margin-top: -175px;        
    }

    .side-food-placeholder {
        padding-top: 0px;
    }

    .location-grid {
        grid-template-columns: 1fr;
    }

    .location-grid {
        padding: 0px 30px;
    }

    .visit-section {
        padding: 40px 20px;
    }

    .sauce-placeholder {
        margin-top: -50px;
    }

    .sauce-banner {
        padding: 40px 20px;
    }

    .section-reviews p {
        font-size: 1rem;
    }

    .footer {        
        background: url('../images/footer-bg-mobile.jpg') no-repeat center bottom;
        padding: 50px 30px 100px 30px;        
    }

    .footer-logo {
        width: 135px;
    }

    .brand-info {
        width: 75%;
    }

    .brand-info p {
        font-size: 0.85rem;
    }
}