/* style.css */

/*fonts*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai+Looped:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

.inter-regular {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}

.montserrat-thin {
    /*font thin*/
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 100;
    font-style: normal;
}

.montserrat-extralight {
    /*font extralight*/
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
}

.montserrat-light {
    /*font light*/
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
}

.montserrat-regular {
    /*font regular*/
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.montserrat-medium {
    /*font thin*/
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}

.montserrat-semibold {
    /*font semibold*/
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
}

.montserrat-bold {
    /*font bold*/
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

.montserrat-extrabold {
    /*font extrabold*/
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal;
}

.montserrat-black {
    /*font black*/
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
}

/*this is for texts that are in thai*/
.thai-thin {
    font-family: "Noto Sans Thai Looped", sans-serif;
    font-optical-sizing: auto;
    font-weight: 100;
    font-style: normal;
    font-variation-settings:
        "wdth"100;
}

.thai-extralight {
    font-family: "Noto Sans Thai Looped", sans-serif;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
    font-variation-settings:
        "wdth"100;
}

.thai-light {
    font-family: "Noto Sans Thai Looped", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-variation-settings:
        "wdth"100;
}

.thai-regular {
    font-family: "Noto Sans Thai Looped", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:
        "wdth"100;
}

.thai-medium {
    font-family: "Noto Sans Thai Looped", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-variation-settings:
        "wdth"100;
}

.thai-semibold {
    font-family: "Noto Sans Thai Looped", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    font-variation-settings:
        "wdth"100;
}

.thai-bold {
    font-family: "Noto Sans Thai Looped", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    font-variation-settings:
        "wdth"100;
}

.thai-extrabold {
    font-family: "Noto Sans Thai Looped", sans-serif;
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal;
    font-variation-settings:
        "wdth"100;
}

.thai-black {
    font-family: "Noto Sans Thai Looped", sans-serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
    font-variation-settings:
        "wdth"100;
}

/*other information about style for stuff that r in ENGLISH*/
body {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #fff;
  //  padding-top: 6.25rem;
    padding-top: 0 !important;
}
@media (max-width: 1200px) {
    .body {
        padding-top: 5.5rem;
    }

    /* จอกลาง */
}

@media (max-width: 900px) {
    .body {
        padding-top: 5rem;
    }

    /* แท็บเล็ต */
}

@media (max-width: 700px) {
    .body {
        padding-top: 4.25rem;
    }

    /* มือถือ */
}
//.body {
    //padding-top: 5rem;
//}

//@media (max-width: 1200px) {
    //.body {
     //   padding-top: 4.5rem;
    //}
//}

//@media (max-width: 900px) {
    //.body {
        //padding-top: 4.25rem;
    //}
//}

//@media (max-width: 700px) {
    //.body {
       // padding-top: 4rem;
   // }
//}
.nav-link {
    font-size: 1rem;
    color: #333;
    /* Darker text for navigation */
    padding: 0.5rem 0.5rem;
    transition: color 0.3s ease-in-out;
}

.nav-link:hover {
    color: #003bbd;
    /* Blue on hover */
    text-decoration: underline;
    font-weight: 600;
}

.lang-change {
    font-size: 1rem;
}

.contact-button {
    border: 2px solid #003bbd;
    /* Blue border */
    color: #003bbd;
    /* Blue text */
    padding: 0.5rem 0.5rem;
    border-radius: 0.5rem;
    /* Rounded corners */
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
    font-size: 1rem;
}

.contact-button:hover {
    background-color: #003bbd;
    /* Blue background on hover */
    color: #ffffff;
    /* White text on hover */

}

.pb {
    padding-bottom: 2rem;
}

.context {
    font-size: 1.2rem;
}

.title {
    font-size: 4rem;
    color: #030267;
}

.title-white {
    font-size: 4rem;
    color: #ffffff;
}

.sub-title {
    font-size: 2rem;
    color: #030267;
}

.sub-title1 {
    font-size: 1.6rem;
    color: #030267;
}

.sub-title-black {
    font-size: 2rem;
    color: #000000;
}

.sub-title-white {
    font-size: 2rem;
    color: #ffffff;
}

.learn-button {
    border: 2px solid #1b4f87;
    /* Blue border */
    color: #ffffff;
    /* Blue text */
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    /* Rounded corners */
    transition: transform .12s ease background-color 0.2s ease, color 0.2s ease;
    font-size: 1rem;
    background-color: #1b4f87;
    box-shadow: #333;
}

.learn-button:hover {
    transform: translateY(-1px) scale(1.01);
    background-color: #2565a9;
    border-color: #2565a9;
}

.white-button {
    border: 2px solid #ffffff;
    /* Blue border */
    color: #1b4f87;
    /* Blue text */
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    /* Rounded corners */
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
    font-size: 1rem;
    background-color: #ffffff;
    box-shadow: #333;
}

.white-button:hover {
    transform: scale(1.009);
    background-color: #cbcbcb;
    border-color: #cbcbcb;
}

/*style for stuff that dont have text so lang dont matter*/
.header {
    position: sticky;
    /* Fix the header to the top of the viewport */
    top: 0;
    /* Align to the top */
    left: 0;
    /* Align to the left */
    width: 100%;
    /* Make it span the full width of the page */
    background-color: #003bbd;
    background: #fff;
    /* Background color */
    color: white;
    /* Text color */
    z-index: 1000;
    /* Ensure it stays above other content */
    padding: .35rem .5rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    /* Add a subtle shadow */
    height: var(--header-h);
}

.dropdown-arrow::after {
    content: '▼';
    /* Unicode down arrow */
    font-size: 0.7em;
    margin-left: 0.25em;
    vertical-align: middle;
}

.logo {
    width: auto;
    height: 3.5rem;
}

.icon {
    width: auto;
    height: 1.2rem;
}

.icon:hover {
    scale: 1.005;
}

.header-top {
    background-color: #ffffff;
    /* A lighter grey for the very top bar if needed */
    height: 1px;
    /* Example height for a thin top bar */
    width: 100%;
}

.header-main {
    background-color: #ffffff;
    border-bottom: 1px solid #e0e0e0;
}

.lang-change {
    font-size: 1rem;
}

.header-nav {
    flex-wrap: wrap;
    justify-content: center;
    /* Center navigation links when wrapping */
    margin-top: 0.8rem;
    /* Reduced margin */
}

.header-left,
.header-right {
    margin-bottom: 0rem;
    /* Reduced margin for tighter packing */
}

#language-dropdown {
    left: 50%;
    /* Center the dropdown horizontally relative to its parent */
    transform: translateX(-50%);
    /* Adjust to truly center it */
    min-width: max-content;
    /* Ensure dropdown is wide enough for content */
}

/*this is for the image slide*/
/* Base (จอใหญ่เป็นหลัก) */
.slider-container {
    margin-top: 0 !important;
    width: 100%;
    height: 40rem;
    overflow: visible;
    position: relative;
    border-radius: 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .2);
}

/* ~≤ 1400px หรือจอกลาง */
@media (max-width: 1400px) {
    .slider-container {
        height: 35rem;
    }
}

/* ~≤ 900px (แท็บเล็ต) */
@media (max-width: 900px) {
    .slider-container {
        height: 25rem;
    }
}

/* ~≤ 700px (มือถือ) */
@media (max-width: 700px) {
    .slider-container {
        height: 15rem;
    }
}

.slider-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.copyright-heading {
    font-size: 15px;
    color: white;
}

.image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
        /* <-- ครอปเฉพาะ “รูป” ไม่ใช่ตัวหนังสือ */
}
.hero-container {
    margin-top: 0 !important;
    position: relative;
    width: 100%;
    height: 40rem;
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 0;
}

.fade1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    z-index: 0;
    transition: opacity 2s ease-in-out;
    /* slow and smooth fade */
}

.fade1.visible {
    opacity: 1;
    z-index: 1;
    /* bring to front */
}
/* วางทับกฎเดิมของ .hero-text */
.hero-text {
    position: absolute;
    inset: 0;
    /* กินเต็มพื้นที่สไลด์ */
    display: flex;
    color: white;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 1rem;
    /* กันชิดขอบจอเล็ก */
    transform: none;
    /* ยกเลิก translate ที่เคยตั้งไว้ */
}

/* จำกัดความกว้างข้อความ และให้ตัดบรรทัดสวย ๆ */
.hero-text .subheading,
.hero-text .main-heading {
    max-width: min(92vw, 1100px);
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    margin: 0 auto;
}
.subheading {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.main-heading {
    font-size: 64px;
    font-weight: 700;
    opacity: 0.8;
}

.slider {
    display: flex;
    height: 100%;
    width: max-content;
    /* Allows flex children (images) to grow horizontally */
    transition: transform 1s ease-in-out;
}

.slider img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    flex-shrink: 0;
}

.img-3inrow {
    /*when 3 images are put next together in a row*/
    width: 30rem;
    height: 20rem;
    overflow: hidden;
    position: relative;
    box-shadow: #333;
    border-radius: 1rem;
}

.img {
    /*how image fits inside the frame*/
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Ensures images cover the area without distortion */
    flex-shrink: 0;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.fade {
    transition: transform 1s ease-in-out, opacity 1.5s ease-in-out;
    /* Added opacity transition */
    opacity: 1;
    /* Ensure initial state is visible */
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Hover effects (remain the same) */
.image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(140, 143, 159, 0.6);
    /* Semi-transparent black background */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    /* Initially hidden */
    transition: opacity 0.3s ease-in-out;
    /* Smooth transition for overlay */
    pointer-events: none;
    /* Allows clicks to pass through to the image if needed, though not required here */
}

.overlay-text {
    color: #ffffff;
    /* White text */
    font-size: 1.5rem;
    /* Adjust font size as needed */
    font-weight: bold;
    text-align: center;
    padding: 1rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

.img-3inrow:hover .img {
    transform: scale(1.1);
    /* Zooms the image by 10% */
}

.img-3inrow:hover .image-overlay {
    opacity: 1;
    /* Makes the overlay visible on hover */
}

.circle-container {
    width: 13rem;
    /* Adjust as needed */
    height: 13rem;
    /* Adjust as needed */
    overflow: hidden;
    /* Hides images outside the current view */
    position: relative;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 50%;

}

.box {
    color: #ffffff;
    width: 100%;
    border-radius: 0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    background-color: #1b4f87;
    margin: 0;
    padding: 1.5rem 40px;
    box-sizing: border-box;
}

.box-light {
    color: #030267;
    width: 100%;
    border-radius: 0;
    background-color: #f0f3fa;
    margin: 0;
    padding: 10px 40px;
    box-sizing: border-box;
    float: top;
    align-items: center;
    /* centers horizontally */
    justify-content: center;
    /* centers vertically if height is set */
    text-align: center;
}

.box-white {
    color: #000000;
    width: 100%;
    border-radius: 0;
    background-color: #ffffff;
    margin: 0;
    padding-top: 2rem;
    padding-left: 10rem;
    padding-right: 5rem;
    padding-bottom: 2rem;
    box-sizing: border-box;
    float: top;
}


/*footer*/
.footer {
    background-color: #1b4f87;
    /* Adjust as needed */
    color: white;
    font-family: 'Montserrat', sans-serif;
    padding: 40px 20px 10px;
}

.footer-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    max-width: 100%;
    padding: 0 60px;
    margin: 0 auto;
}

.footer-left {
    flex: 1 1 250px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* aligns logo to far left */
}

.footer-middle,
.footer-right {
    flex: 1 1 250px;
}

/* base */
.footer-logo {
    width: auto;
    height: 15rem;
    margin-bottom: 1px;
    align-self: flex-start;
    display: block;
    /* ← เปลี่ยนจาก none เป็น block */
}

/* จอกลางลงมา: ลดความสูงลง แต่ยังแสดงอยู่ */
@media (max-width: 1400px) {
    .footer-logo {
        height: 12rem;
    }

    .footer-left {
        display: flex;
    }

    /* ← อย่าซ่อนคอลัมน์ซ้าย */
}

/* จอเล็กมากค่อยซ่อน (ถ้าต้องการ) หรือย่อให้เล็กลงก็ได้ */
@media (max-width: 700px) {
    .footer-logo {
        height: 8rem;
    }

    /* หรือจะซ่อน: display:none; */
}


.footer-subtext {
    max-width: 200px;
}

.footer-middle h4 {
    font-weight: bold;
    margin-bottom: 10px;
}

.footer-middle p,
.footer-middle a {
    line-height: 1.5;
    color: white;
    text-decoration: none;
}


.footer-icons {
    display: flex;
    gap: 35px;
    margin-top: 10px;
    align-items: center;
}

.footer-icons img {
    height: 1.5rem;
    width: auto;
}

.footer-right ul {
    list-style: none;
    padding: 0;
}

.footer-right li {
    margin-bottom: 8px;
}

.footer-right a {
    color: white;
    text-decoration: none;
}

.footer-right a:hover {
    text-decoration: underline;
}

.footer-bottom {
    text-align: center;
    font-size: 0.85rem;
    margin-top: 30px;
    border-top: 1px solid #ffffff33;
    padding-top: 10px;
}

.footer-copyright {
    font-size: 0.8rem;
}

.footer-text {
    font-size: 0.9rem;
}

.phone-popup-wrapper {
    position: relative;
    display: inline-block;
}

.phone-icon {
    cursor: pointer;
    width: 20px;
    height: 20px;
}

.phone-popup {
    display: none;
    position: absolute;
    bottom: 30px;
    /* popup above the icon */
    left: 50%;
    transform: translateX(-50%);
    background-color: #ffffff;
    color: #000000;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
    white-space: nowrap;
    z-index: 100;
}

.phone-popup a {
    color: #030267;
    text-decoration: none;
    font-size: 0.9rem;
}

.phone-popup a:hover {
    text-decoration: underline;
}

.information {
    height: 6rem;
    width: auto;
}

.head-slide {
    width: 65%;
    /* Adjust as needed */
    height: 30rem;
    /* Adjust as needed */
    overflow: hidden;
    /* Hides images outside the current view */
    align-self: right;
    border-radius: 0;
}

.head-slide-left {
    width: 35%;
    /* Adjust as needed */
    height: 30rem;
    /* Adjust as needed */
    align-self: left;
    border-radius: 0;
    background-color: #1b4f87;
}

.context-header {
    font-size: 1.5rem;
    color: #ffffff;
    padding-left: 20%;
    padding-top: 18%;
    text-shadow: #333;
}

.title-header {
    font-size: 5rem;
    color: #ffffff;
    padding-left: 20%;
    padding-top: 25%;
    text-shadow: #333;
}

.company-details {
    max-width: 1000px;
    margin: 0 auto;
    padding: 60px 20px;
    text-align: left;
}

.company-details h1 {
    font-size: 60px;
    font-weight: bold;
    text-align: left;
    margin-bottom: 40px;
}

.details-list p {
    font-size: 20px;
    margin: 12px 0;
    line-height: 1.6;
}

.label {
    font-weight: bold;
    display: inline-block;
    width: 280px;
    text-align: right;
    padding-right: 20px;
}

//.hamburger {
    //height: 2rem;
    //width: auto;
    //padding-left: 1rem;
   // padding-bottom: .5rem;
//}
.hamburger {
    width: 32px;
    height: 24px;
    display: block;
    image-rendering: -webkit-optimize-contrast;
}
/* Class to hide the additional info paragraphs */
.hidden-info {
    display: none;
}

#vision .flex {
    margin: 0;
    padding-left: 0;
}

.left-strip-y {
    width: 2rem;
    height: auto;
    background-color: #ffb700;
    margin-left: 4rem;
}

.left-strip-y1 {
    width: 1rem;
    height: auto;
    background-color: #ffb700;
    margin-left: 4rem;
}

#vision {
    padding-left: 0;
}

.strip-b {
    width: 6rem;
    height: 9rem;
    background-color: #1b4f87;
    margin-right: 1rem;

}

.strip-y {
    width: 6rem;
    height: 9rem;
    background-color: #dda73b;
    margin-right: 1rem;

}

.title2 {
    font-size: 2rem;
    line-height: 1.3;
}

.title2 .regular {
    font-weight: 400;
    color: #000;
    display: block;
}

.title2 .bold-blue {
    font-weight: 700;
    color: #1b4f87;
    display: block;
}

.img-container-square {
    width: 32rem;
    height: 25rem;
    overflow: hidden;
    position: relative;
    border-radius: 0;
}

.img-container-square img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.section-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    padding: 2rem;
    align-items: center;
}

.left-group {
    display: flex;
    align-items: flex-start;
    /* <== THIS is the key fix */
    flex: 1 1 40%;
    min-width: 320px;
    gap: 1rem;
}

.text-container {
    width: 50%;
    min-width: 320px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 1rem;
}

/* Responsive stacking */
@media (max-width: 768px) {
    .section-flex {
        flex-direction: column;
    }

    .left-group {
        width: 100%;
        justify-content: center;
    }

    .text-container {
        width: 100%;
        padding-left: 0;
    }

    .img-container-square {
        width: 100%;
        height: auto;
    }

    .strip-b {
        width: 4rem;
        height: 6rem;

    }
}

.contact-form {
    background-image: url('/img/homehead/vision.png');
    /* Replace with correct path */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 40rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    position: relative;
}

.background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #172b5533;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 0;
}

/* General form input styling */
.form-input {
    background-color: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #ffffff;
    padding: 12px 16px;
    border-radius: 8px;
    width: 100%;
    outline: none;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

.form-input:focus {
    border-color: #1b4f87;
    background-color: rgba(255, 255, 255, 0.2);
}

.form-input::placeholder {
    color: rgba(255, 255, 255, 0.8);
}

.form-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 20 20'%3E%3Cpath d='M5.23 7.21a.75.75 0 011.06 0L10 10.91l3.71-3.7a.75.75 0 111.06 1.06l-4.24 4.24a.75.75 0 01-1.06 0L5.23 8.27a.75.75 0 010-1.06z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1.5em;
    padding-right: 2.5rem;
}

/*the pop up header thingy*/
/* Overlay styles */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 480px;
    /* <== ตรงนี้ปรับขนาดได้ */
    height: 100%;
    background-color: #fff;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.3);
    overflow-y: auto;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-in-out, visibility 0s linear 0.3s;
    z-index: 2000;
}

@media (max-width: 480px) {
    .popup-overlay {
        width: 80vw;
    }
}

.popup-overlay.show .popup-content {
    transform: translateX(0);
}
.popup-overlay .popup-content .logo {
  height: 80px;   /* ปรับตามที่ต้องการ เช่น 64px, 96px */
  width: auto;
}
@media (max-width: 700px) {
  .popup-overlay .popup-content .logo { height: 56px; }
}
/*.popup-overlay:not(.show) .popup-content {
    transform: translateX(-100%);
} */

/* Pop-up content styles */
.popup-content {
    background-color: #ffffff;
    padding: 80px;
    width: 80rem;
    max-width: 90%;
    height: 100vh;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.4s ease;
}

/* ปรับเนื้อหาด้านใน */
.popup-content {
    width: 100%;
    padding: 20px;
}

.popup-content nav p {
    white-space: nowrap;
    /* ไม่ตัดบรรทัด */
}

.popup-content.active {
    left: 0;
    opacity: 1;
}

.popup-content p {
    color: #666;
    margin-bottom: 0px;
    line-height: 1.6;
    text-align: left;
    /* Ensure paragraphs are also left-aligned */
}

/* Class to show the popup */
.popup-overlay.show {
    visibility: visible;
    opacity: 1;
    align-items: left;
    pointer-events: auto;
}

.popup-overlay.show .popup-content {
    transform: scale(1);
    align-items: left;
}
.popup-overlay.show #closePopupBtn {
    display: block;
}
/* Buttons */
#openPopupBtn,
#closePopupBtn {
    /* Styles from previous example */
    padding: 1px 1px;
    background-color: #007bff00;
    color: rgba(255, 255, 255, 0);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 20px;
    /* For close button */
    align-items: left;
    place-items: bottom;
}

#closePopupBtn {
    background-color: #1b4f87;
    padding: 0.5rem 1rem;
    color: #ffffff;
    align-items: left;
    display: none;
    /* Make it a block element to control its own alignment */
    margin: 20px auto 0;
}

.dropdown-menu a {
    color: #333;
}

.dropdown-menu {
    padding: 8px;
    background-color: #ffffff;
}

.dropdown-menu.show {
    display: block;
}

.dropdown-toggle .arrow {
    transition: transform 0.3s ease;
}

.dropdown-toggle.open .arrow {
    transform: rotate(90deg);
}

.arrow {
    transition: transform 0.3s ease;
}


/*this is the header for stuff cause i dont like the current header*/
.about-section {
    display: flex;
    height: 100vh;
}

/* Left side: blue background with text */
.left-panel {
    flex: 1;
    background-color: #1b4f87;
    color: white;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.top-text {
    margin-bottom: 40px;
    text-transform: uppercase;
}

.main-text h1 {
    line-height: 1.1;
    font-weight: 700;
}

/* Right side: background image */
.right-panel {
    flex: 1;
    background-image: url();
    /* Replace with relative path if needed */
    background-size: cover;
    background-position: center;
}

.wrapper {
    display: inline-block;
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

.nextpage-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    font-family: sans-serif;
    color: black;
    padding: 1rem 2rem;
    z-index: 1;
}

/* Circle background using ::before */
.nextpage-button::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background-color: #1b4f87;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    z-index: -1;
    transition: all 0.4s ease;
}

/* On hover: expand to text width */
.wrapper:hover .nextpage-button::before {
    width: 100%;
    border-radius: 30px;
}

.wrapper:hover .nextpage-button,
.wrapper:hover .next-page-arrow {
    color: white;
}

.next-page-arrow {
    margin-left: 1rem;
    font-size: 1.5rem;
    transition: color 0.4s ease;
}

.google-form-container {
    /* You'll wrap your iframe in this div */
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 100%;
    /* Adjust this value to control the aspect ratio (e.g., 75% for 4:3, 56.25% for 16:9) */
}

.google-form-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

iframe {
    border: none;
}

.form-section {
    max-width: 800px;
    margin: 0 auto;
    background-color: #ffffff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    align-self: right;
}

.events-grid {
    display: flex;
    gap: 32px;
    justify-content: center;
    flex-wrap: wrap;
}

.event-card {
    background: #fff;
    border: 2px solid #ded7ce;
    border-radius: 6px;
    width: 370px;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: none;
    transition: box-shadow 0.2s;
}

.event-card:hover {
    box-shadow: 0 4px 18px rgba(30, 28, 24, 0.11);
}

.event-img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-bottom: 1.5px solid #ede6dd;
}

.event-img2 {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-bottom: 1.5px solid #ede6dd;
}

.event-details {
    min-height: 80px;
    padding: 18px 22px 18px 22px;
    background: #fff;
}

.event-title {
    font-size: 2rem;
    font-weight: 500;
    color: #35302a;
    margin: 0;
}

@media (max-width: 1150px) {
    .events-grid {
        gap: 20px;
    }

    .event-card {
        width: 96vw;
        max-width: 380px;
    }
}

@media (max-width: 700px) {
    .events-grid {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .event-card {
        width: 100%;
        min-width: 0;
        max-width: 420px;
    }
}

/* Responsive adjustments for smaller screens */
@media (max-width: 1400px) {
    .header-main {
        flex-wrap: wrap;
        /* Allow wrapping if content is too wide */
        justify-content: left;
        /* Center content when wrapping */
        padding: 1rem;
    }

    .icon {
        width: auto;
        height: 1rem;
    }

    .lang-change {
        padding: 0.25rem 0.5rem;
        /* Reduced padding for tighter links */
        font-size: 0.8rem;
        /* Slightly smaller font for more space */
    }

    .header-right {
        flex-wrap: wrap;
        /* Allow wrapping */
        justify-content: center;
        /* Center content when wrapping */
    }

    .header-nav {
        flex-wrap: wrap;
        justify-content: center;
        /* Center navigation links when wrapping */
        margin-top: 0.5rem;
        /* Reduced margin */
    }

    .header-menu {
        display: none;
    }

    .nav-link {
        padding: 0.25rem 0.5rem;
        /* Reduced padding for tighter links */
        font-size: 0.8rem;
        /* Slightly smaller font for more space */
    }

    .contact-button {
        margin-top: 0.5rem;
        /* Reduced margin */
        font-size: 0.8rem;
    }

    .nav-link-th {
        padding: 0.25rem 0.5rem;
        /* Reduced padding for tighter links */
        font-size: 1rem;
        /* Slightly smaller font for more space */
    }

    .contact-button-th {
        margin-top: 0.5rem;
        /* Reduced margin */
        font-size: 1rem;
    }

    .context {
        font-size: 1rem;
    }

    .context-th {
        font-size: 1rem;
    }

    .title {
        font-size: 2rem;
        color: #030267;
    }

    .title-th {
        font-size: 2.2rem;
        color: #030267;
    }

    .learn-button-th {
        border: 2px solid #1b4f87;
        /* Blue border */
        color: #ffffff;
        /* Blue text */
        padding: 0.5rem 1rem;
        border-radius: 0.5rem;
        /* Rounded corners */
        transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
        font-size: 1rem;
    }

    .learn-button {
        border: 2px solid #1b4f87;
        /* Blue border */
        color: #ffffff;
        /* Blue text */
        padding: 0.5rem 1rem;
        border-radius: 0.5rem;
        /* Rounded corners */
        transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
        font-size: 0.8rem;
    }

    .footer-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
        background-color: #1b4f87;
    }

    .footer-contact,
    .footer-nav,
    .footer-copyright {
        flex: 1 1 100%;
        /* Full width on small screens */
        margin-bottom: 30px;
    }

    .footer-right {
        display: none;
    }

    .footer-icons {
        display: flex;
        gap: 35px;
        margin-top: 10px;
        align-items: center;
        /* ADD THIS LINE for horizontal centering of icons */
        justify-content: center;
    }

    .footer-contact .social-icons {
        justify-content: center;
    }

    .footer-c {
        color: #ffffff;
    }

    .footer-copyright {
        text-align: center;
        margin-bottom: 0;
        /* No bottom margin for the last item */
    }

    .footer {
        padding: 3rem 2rem;
    }

    .footer-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        /* 3 columns for sections */
        gap: 2rem;
        /* Space between columns */
    }

    .hamburger {
        height: 2rem;
        width: auto;
        padding-bottom: 6px;
    }


    .footer-contact h3 {
        font-size: 1.1em;
    }

    .footer-contact p,
    .footer-logo p,
    .footer-nav ul li a,
    .footer-copyright {
        font-size: 0.8em;
    }

    .social-icons a {
        font-size: 1.3em;
    }

    .head-slide {
        width: 65%;
        /* Adjust as needed */
        height: 25rem;
        /* Adjust as needed */
        overflow: hidden;
        /* Hides images outside the current view */
        position: relative;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        border-radius: 0;
    }

    .head-slide-left {
        width: 35%;
        /* Adjust as needed */
        height: 25rem;
        /* Adjust as needed */
        align-self: left;
        border-radius: 0;
        background-color: #1b4f87;
    }

    .context-header {
        font-size: 1.5rem
    }

    .title-header {
        font-size: 5rem;
        color: #ffffff;
    }

    .title-white {
        font-size: 2rem;
        color: #ffffff;
    }

    .title {
        font-size: 2.5rem;
    }

    .sub-title {
        font-size: 1.4rem;
    }

    .sub-title1 {
        font-size: 1.2rem;
    }

    .logo {
        width: auto;
        align-items: left;
        height: 3.5rem;
    }

    .sub-title-white {
        font-size: 1.5rem;
        color: #ffffff;
    }

    .company-details h1 {
        font-size: 2rem;
    }

    .details-list p {
        font-size: 1rem;
    }

    .label {
        width: 100%;
        text-align: left;
        padding-right: 0;
    }

    .footer-container {
        flex-direction: column;
        padding: 0 20px;
    }

    .collapsible-section-title i {
        display: none;
        /* Hide arrow icon */
    }

    #nav-menu a {
        display: none;
        width: 100%;
        text-align: center;
        margin: 0.5rem 0;
    }

    #nav-menu.is-open {
        display: flex;
        flex-wrap: wrap;
    }
}

@media (max-width: 900px) {
    .head-slide {
        width: 65%;
        /* Adjust as needed */
        height: 15rem;
        /* Adjust as needed */
        overflow: hidden;
        /* Hides images outside the current view */
        align-self: right;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        border-radius: 0;
    }

    .head-slide-left {
        width: 35%;
        /* Adjust as needed */
        height: 15rem;
        /* Adjust as needed */
        align-self: left;
        border-radius: 0;
        background-color: #1b4f87;
    }

    .main-heading {
        font-size: 40px;
        font-weight: 700;
        opacity: 0.8;
    }

    .subheading {
        font-size: 10px;
        font-weight: 500;
        letter-spacing: 2px;
        text-transform: uppercase;
        margin-bottom: 10px;
    }

    .copyright-heading {
        font-size: 10px;
    }

    .context-header {
        font-size: 0.8rem;
        color: #ffffff;
        padding-left: 20%;
        padding-top: 18%;
        text-shadow: #333;
    }

    .title-header {
        font-size: 3rem;
        color: #ffffff;
        padding-left: 20%;
        padding-top: 25%;
        text-shadow: #333;
    }
}

@media (max-width: 700px) {
    .head-slide {
        width: 65%;
        /* Adjust as needed */
        height: 13rem;
        /* Adjust as needed */
        overflow: hidden;
        /* Hides images outside the current view */
        align-self: right;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        border-radius: 0;
    }

    .head-slide-left {
        width: 35%;
        /* Adjust as needed */
        height: 13rem;
        /* Adjust as needed */
        align-self: left;
        border-radius: 0;
        background-color: #1b4f87;
    }

    .copyright-heading {
        font-size: 6px;
    }

    .main-heading {
        font-size: 30px;
        font-weight: 700;
        opacity: 0.8;
    }

    .subheading {
        font-size: 6px;
        font-weight: 500;
        letter-spacing: 2px;
        text-transform: uppercase;
        margin-bottom: 10px;
    }

    .context-header {
        font-size: 0.7rem;
        color: #ffffff;
        padding-left: 20%;
        padding-top: 25%;
        text-shadow: #333;
    }

    .title-header {
        font-size: 2rem;
        color: #ffffff;
        padding-left: 24%;
        padding-top: 40%;
        text-shadow: #333;
    }

    .left-strip-y {
        width: 3rem;
    }

    .img-container-square img {
        max-height: 300px;
    }

    .text-container {
        padding-left: 0;
    }

    .sidebar {
        position: sticky;
        top: 7rem;
        align-self: start;
        width: 12rem !important;
    }
}


.content-wrapper {
    display: flex;
    position: relative;
    /* for absolute-bottom positioning */
    padding: 20px;
}

/* Sidebar */
.sidebar {
    position: sticky;
    top: 7rem;
    /* adjust for your header height */
    align-self: start;
    width: 20rem;
    overflow-y: auto;
}

/* hide cards exactly as before */
.project-card.hidden {
    display: none;
}

.sidebar.fixed {
    position: fixed;
    top: 0;
}

.sidebar.absolute-bottom {
    position: absolute;
    top: auto;
    bottom: 0;
}

/* Nav inside sidebar */
.nav li {
    list-style: none;
    margin-bottom: 10px;
}

.nav a {
    text-decoration: none;
    color: #333;
}

/* Main content */
.main-content {
    flex: 1;
    padding-left: 40px;
}

.main-content section {
    margin-bottom: 100vh;
    /* just to make sections tall for demo */
}

/* ── Card Base ─────────────────────────────────────────────── */
.project-card {
    width: 350px;
    background: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ── Slider ────────────────────────────────────────────────── */
.project-slider {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    /* controls height */
    overflow: hidden;
}

/* two overlapping images */
.project-slider .slide {
    position: absolute;
    inset: 0;
    /* top:0; right:0; bottom:0; left:0 */
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity var(--fade-duration, 2000ms) ease;
}

.project-slider .slide.visible {
    opacity: 1;
}

/* ── Content ───────────────────────────────────────────────── */
.project-content {
    padding: 1rem;
}

.project-title {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
}

.project-desc {
    margin: 0;
    font-size: 0.9rem;
    color: #555;
}

.lang-btn {
    padding: 6px 10px;
    border-radius: 8px;
    font-weight: 600;
    color: #1f2937;
    background: transparent
}

.lang-menu {
    position: absolute;
    top: 110%;
    left: 0;
    min-width: 140px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
    z-index: 10000
}

.lang-menu.hidden {
    display: none
}

.lang-menu a {
    display: block;
    padding: 8px 12px;
    color: #111827
}

.lang-menu a:hover {
    background: #f3f4f6
}

.pic {
    position: relative;
}

.pic .image-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .35);
    opacity: 0;
    transition: opacity .2s;
}

.pic:hover .image-overlay {
    opacity: 1;
}
/* ให้ข้อความใน hero ตัดบรรทัดและไม่ยาวเกินจอ */
.hero-text .subheading,
.hero-text .main-heading {
    white-space: normal !important;
    /* กันกรณีมีคลาส/กฎไหนตั้ง nowrap ไว้ */
    word-break: break-word;
    overflow-wrap: anywhere;
    max-width: min(92vw, 1100px);
    /* จำกัดความกว้างของข้อความ */
    margin-left: auto;
    margin-right: auto;
    padding: 0 1rem;
}

/* ปรับขนาดบนจอเล็ก (กันบรรทัดหลุด) */
@media (max-width: 900px) {
    .main-heading {
        font-size: 2.25rem;
    }

    .subheading {
        font-size: .8rem;
        letter-spacing: .12em;
    }
}

@media (max-width: 700px) {
    .main-heading {
        font-size: 2rem;
    }

    .subheading {
        font-size: .75rem;
    }
}
.popup-overlay .popup-content .logo {
    height: 80px;
    /* ปรับตามที่ต้องการ เช่น 64px, 96px */
    width: auto;
}

@media (max-width: 700px) {
    .popup-overlay .popup-content .logo {
        height: 100px;
    }
}
.menu-logo {
    height: 200px;
    width: auto;
}

@media (max-width: 1000px) {
    .menu-logo {
        height: 100px;
    }
}
/* เฉพาะโลโก้ในเมนูป๊อปอัป */
.popup-overlay .popup-content .logo {
    height: clamp(120px, 14vw, 180px);
    /* ต่ำสุด 120px, ปกติอิง 14vw, สูงสุด 180px */
    width: auto;
    display: block;
    margin: 8px 0 24px;
}
/* บังคับให้ footer logo แสดงและจัดกึ่งกลางบนจอเล็ก */
@media (max-width: 700px) {
    .footer-left {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .footer-logo {
        display: block !important;
        height: clamp(120px, 32vw, 180px) !important;
        /* ปรับได้ตามต้องการ */
        width: auto !important;
        margin: 0 auto 12px !important;
    }
}

/* กันกรณีมีที่ไหนเผลอซ่อนทั้งคอลัมน์/รูป */
.footer-left,
.footer-logo {
    visibility: visible !important;
}

/* ถ้าป๊อปอัปเมนูปิดอยู่ อย่าให้คลุม footer */
.popup-overlay {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.popup-overlay.show {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}
.hamburger-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .25rem .5rem;
}

.hamburger-svg {
    width: 32px;
    /* ปรับได้: 28–36px */
    height: 24px;
    /* ให้สัดส่วนเลข “เต็ม ๆ” จะคมกว่า */
    fill: #1b4f87;
    /* สีเดียวกับแบรนด์ */
    shape-rendering: geometricPrecision;
}

@media (max-width:700px) {
    .hamburger-svg {
        width: 28px;
        height: 22px;
    }
}

/* ---- Side NAV (popup) ---- */
/*.popup-overlay .popup-content {
    width: 420px;
    /* ความกว้างแถบเมนู */
    /* max-width: 92vw;
    padding: 24px;
} */

/* ขนาดโลโก้เฉพาะใน popup nav */
.popup-overlay .popup-content .logo {
    width: 200px !important;
    /* คุมด้วยความกว้างแทนความสูง */
    height: auto !important;
    /* ให้สัดส่วนถูกต้อง และทับกฎเดิม */
    display: block;
    margin: 6px 0 22px;
}

/* จอใหญ่ขึ้น – ขยายได้เล็กน้อย */
@media (min-width: 1200px) {
    .popup-overlay .popup-content .logo {
        width: 220px !important;
    }
}

/* แท็บเล็ต */
@media (max-width: 900px) {
    .popup-overlay .popup-content .logo {
        width: 180px !important;
    }
}

/* มือถือ */
@media (max-width: 700px) {
    .popup-overlay .popup-content .logo {
        width: 160px !important;
    }
}
/* เริ่มต้น: ปิด */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
   /* width: 480px; */
    max-width: 80vw;
   /* height: 100%; */
    background: #fff;
    box-shadow: 2px 0 8px rgba(0, 0, 0, .3);
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform .35s ease, opacity .25s ease;
    opacity: 0;
    pointer-events: none;
    z-index: 2000;
}

/* เปิด */
.popup-overlay.show {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

/* ปุ่ม Close โชว์เฉพาะตอนเปิด */
#closePopupBtn {
    display: none;
}

.popup-overlay.show #closePopupBtn {
    display: inline-flex;
}

/* Overlay คลุมทั้งจอ + ฉากหลัง */
.popup-overlay {
    position: fixed;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
    z-index: 2000;
}

.popup-overlay .backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .25);
    /* คลิกปิดได้ */
}

/* แผงเมนูด้านซ้าย */
.popup-content {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 420px;
    max-width: 92vw;
    background: #fff;
    overflow-y: auto;
    transform: translateX(-100%);
    /* ซ่อนอยู่ */
    transition: transform .35s ease;
    padding: 24px;
}

/* เปิดเมนู */
.popup-overlay.show {
    opacity: 1;
    pointer-events: auto;
}

.popup-overlay.show .popup-content {
    transform: translateX(0);
}

/* ปุ่ม Close โชว์เฉพาะตอนเปิด */
#closePopupBtn {
    display: none;
}

.popup-overlay.show #closePopupBtn {
    display: inline-flex;
}

/* ขนาดโลโก้เฉพาะหน้าเมนู */
.popup-overlay .popup-content .logo {
    width: 200px;
    height: auto;
    display: block;
    margin: 6px 0 22px;
}

@media (min-width:1200px) {
    .popup-overlay .popup-content .logo {
        width: 220px;
    }
}

@media (max-width:900px) {
    .popup-overlay .popup-content .logo {
        width: 180px;
    }
}

@media (max-width:700px) {
    .popup-overlay .popup-content .logo {
        width: 160px;
    }
}

/* === NAV Overlay (FINAL) === */
.popup-overlay {
    position: fixed;
    inset: 0;
    /* คลุมทั้งจอ */
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
    z-index: 2000;
}

.popup-overlay .backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .25);
}

.popup-content {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 420px;
    /* ความกว้างแถบเมนู */
    max-width: 92vw;
    background: #fff;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform .35s ease;
    padding: 24px;
}

.popup-overlay.show {
    opacity: 1;
    pointer-events: auto;
}

.popup-overlay.show .popup-content {
    transform: translateX(0);
}

/* ปุ่ม Close โชว์ตอนเปิดเท่านั้น */
#closePopupBtn {
    display: none;
}

.popup-overlay.show #closePopupBtn {
    display: inline-flex;
}

/* โลโก้ในเมนู */
.popup-overlay .popup-content .logo {
    width: 200px;
    height: auto;
    display: block;
    margin: 6px 0 22px;
}

@media (min-width:1200px) {
    .popup-overlay .popup-content .logo {
        width: 220px;
    }
}

@media (max-width:900px) {
    .popup-overlay .popup-content .logo {
        width: 180px;
    }
}

@media (max-width:700px) {
    .popup-overlay .popup-content .logo {
        width: 160px;
    }
}