html {
    scroll-behavior: smooth;
}

body {
    background-image: url('/path-to-your-image/background.jpg'); /* URL รูปภาพพื้นหลัง */
    background-size: cover; /* ปรับขนาดให้คลุมพื้นที่ทั้งหมด */
    background-position: center center; /* จัดให้อยู่ตรงกลางของหน้าจอ */
    background-repeat: no-repeat; /* ป้องกันการทำซ้ำ */
    background-attachment: fixed; /* พื้นหลังคงที่เวลาสไลด์ */
    margin: 0;
    padding: 0;
    height: 100vh; /* ความสูงเต็มหน้าจอ */
    width: 100%;
}

.sidebar {
    background-color: #2b2b2b;
    height: 100vh;
    padding: 20px;
}




.content {
    padding: 150px;
}

.content section {
    margin-top: 50px;
}

.content h1 {
    font-size: 2.5rem;
}

.content h1 span {
    color: #001eff;
}

.btn-custom {
    background-color: transparent; /* พื้นหลังโปร่งใส */
    color: #001eff; /* สีฟ้าสำหรับข้อความ */
    border: 2px solid #001eff; /* กรอบสีฟ้า */
    padding: 10px 20px;
    margin-top: 20px;
    transition: background-color 0.3s, color 0.3s; /* ทำให้มีการเปลี่ยน transition */
}

.btn-custom:hover {
    background-color: #001eff; /* เปลี่ยนเป็นพื้นหลังสีฟ้าเมื่อ hover */
    color: #fff; /* เปลี่ยนข้อความเป็นสีขาวเมื่อ hover */
}

.btn-custom:focus, .btn-custom:active {
    background-color: #001eff; /* เมื่อกดเปลี่ยนพื้นหลังเป็นสีฟ้า */
    color: #fff; /* ข้อความเป็นสีขาว */
    outline: none; /* ลบเส้นขอบของการ focus */
}

#details-section {
    margin-top: 20px;
    background-color: #f8f9fa;
    color: #000;
    padding: 15px;
    border-radius: 5px;
    border: 1px solid #001eff;
    display: none; /* เริ่มต้นไม่ให้แสดงผล */
}

#details-section p {
    font-size: 1.1rem;
    color: #001eff;
}

.typed-textCompany {
    color: #ff00cc; /* เปลี่ยนสีเป็นสีส้ม */
}


.settings-icon {
    position: absolute;
    top: 20px;
    right: 20px;
    color: #fff;
}

.settings-icon i {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

#about {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}
#about h1 {
    margin-bottom: 20px; /* ปรับระยะห่างด้านล่างของ h1 */
}
#about p {
    max-width: 600px; /* กำหนดความกว้างของข้อความเพื่อไม่ให้ยาวเกินไป */
    margin: 0 auto; /* ทำให้ข้อความตรงกลาง */
}

.card-slider {
    display: flex;
    justify-content: space-between; /* จัดการให้ Card มีระยะห่างระหว่างกัน */
    gap: 20px; /* ระยะห่างระหว่างแต่ละ Card */
    flex-wrap: wrap; /* เพื่อให้แสดงผลแบบ Responsive */
    margin-top: 20px;
}

.card {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    flex-basis: calc(33% - 20px); /* ขนาด Card เป็น 1 ใน 3 ของพื้นที่ (Responsive) */
    opacity: 1; /* แสดงทุก card ด้วยความชัดเจนเต็มที่ */
    transition: transform 0.3s ease; /* เพิ่มเอฟเฟกต์เมื่อ Hover */
}

.card:hover {
    transform: scale(1.05); /* ขยายขนาดเมื่อ Hover */
}

.card-body {
    background-color: rgba(255, 255, 255, 0.5); /* ใส่พื้นหลังโปร่งใส */
    padding: 20px;
    border-radius: 10px;
}


@media (max-width: 768px) {
    .card {
        flex-basis: 100%; /* บนหน้าจอขนาดเล็ก แสดง Card เป็นแนวตั้งเต็มหน้าจอ */
    }
}


.profile-card {
    background-color: #e9ecef; /* Background color for profile card */
    border-radius: 10px; /* Rounded corners */
}

.educational-card {
    background-image: url('https://upload.wikimedia.org/wikipedia/th/e/e2/Rmutr.png'); /* ใส่ path ของรูปที่คุณต้องการ */
    background-size: auto; /* ทำให้รูปครอบคลุมพื้นที่ทั้งหมดของ card */
    background-position: center; /* จัดตำแหน่งรูปให้อยู่ตรงกลาง */
    background-repeat: no-repeat; /* ไม่ให้รูปซ้ำ */
    color: #fff; /* เปลี่ยนสีตัวอักษรเป็นสีขาว (ขึ้นอยู่กับสี background) */
    border-radius: 10px; /* เพิ่มความโค้งให้กับมุม */
    padding: 20px;
}

.educational-card .card-body {
    background-color: rgba(0, 0, 0, 0.5); /* เพิ่มสีพื้นหลังโปร่งใสให้กับเนื้อหา */
    padding: 10px;
    border-radius: 10px; /* เพิ่มความโค้งให้กับ body */
}


/* for services.php*/
#services {
    text-align: center;
    margin-top: 50px; /* เว้นระยะห่างจากด้านบน */
}

.services-carousel {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 30px; /* ระยะห่างระหว่างหัวข้อกับการ์ด */
}

.service-card {
    background-color: rgb(222, 222, 222);
    width: 800px; /* กำหนดความกว้างของการ์ด */
    height: 500px; /* กำหนดความสูงของการ์ด */
    display: none; /* ใช้ Flexbox เพื่อจัดแนวเนื้อหาภายใน */
    flex-direction: column; /* ให้เนื้อหาอยู่ในแนวตั้ง */
    justify-content: center; /* จัดให้เนื้อหาตรงกลางในแนวตั้ง */
    align-items: center; /* จัดให้เนื้อหาตรงกลางในแนวนอน */
    border: 1px solid #ddd; /* กรอบของการ์ด */
    border-radius: 10px; /* มุมโค้งของการ์ด */
    padding: 20px; /* เว้นระยะห่างภายในการ์ด */
    margin: 10px; /* ระยะห่างระหว่างการ์ด */
    box-shadow: 0 2px 10px rgba(255, 255, 255, 0.1); /* เงาให้การ์ดดูมีมิติ */
    transition: transform 0.3s; /* การเปลี่ยนแปลงที่นุ่มนวล */
}

.service-card:hover {
    transform: scale(1.05); /* ขยายการ์ดเมื่อมีการ hover */
}

.service-card.active {
    display: block; /* แสดงการ์ดที่เป็น active */
    color: #001eff; /* เปลี่ยนสีตัวอักษรของหัวข้อการ์ดเป็นสีฟ้า */
}

.service-card h5 {
    margin-bottom: 10px; /* ระยะห่างระหว่างหัวข้อกับเนื้อหา */
    color: #001eff; /* เปลี่ยนสีตัวอักษรของหัวข้อการ์ดเป็นสีฟ้า */

}

.service-card p {
    color: #000000; /* เปลี่ยนสีตัวอักษรของเนื้อหาเป็นสีเทาอ่อน */
}

.service-image {
    width: 600px; /* กำหนดความกว้างของรูปภาพ */
    height: 300px; /* กำหนดความสูงของรูปภาพ */

    border-radius: 10px; /* ทำมุมให้กลม */
    margin-bottom: 15px; /* ระยะห่างด้านล่างของรูปภาพ */
}

.note {
    font-style: italic; /* ตัวเอียงสำหรับโน้ต */
    color: #6c757d; /* สีเทา */
}

/* ปุ่มก่อนหน้าและถัดไป */
.btn-secondary {
    margin: 10px; /* ระยะห่างระหว่างปุ่ม */
}


/* for portfoilio.php*/
/* Portfolio Section */
.portfolio-section {
    padding: 50px 0;
    
}

/* Carousel Images */
.carousel-item img {
    max-height: 500px;
    object-fit: auto;
    transition: transform 0.3s ease-in-out; /* เพิ่ม transition เพื่อให้เกิดการขยายอย่างนุ่มนวล */

}

/* Carousel Caption Hover */
.carousel-caption:hover h5 {
    color: #007bff; /* เปลี่ยนสีข้อความเมื่อ hover */
    font-weight: bold;
    -webkit-text-stroke: 1px #000000; /* ขอบตัวอักษรสีขาวหนา 1px */
}

.carousel-caption:hover p {
    color: #00ff00; /* เปลี่ยนสีข้อความเมื่อ hover */
}


/* Carousel Buttons */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: #007bff;
    border-radius: 50%;
    width: 25px;
    height: 25px;
}


.carousel-item:hover img {
    transform: scale(1.05); /* ขยายเล็กน้อยเมื่อ hover */
}

.carousel-item:hover .carousel-caption h5 {
    color: #007bff; /* เปลี่ยนสีข้อความ */
}

.carousel-item:hover .carousel-caption p {
    color: #4caf50; /* เปลี่ยนสีข้อความ */
}

.carousel-caption h5 {
    color: #ffffff;
    font-size: 18px;
    font-weight: bold;
    -webkit-text-stroke: 1px #000000; /* ขอบตัวอักษรสีขาวหนา 1px */
}

.carousel-caption p {
    color: #ffffff;
    font-size: 16px;
    font-weight: bold;
    -webkit-text-stroke: 1px #000000; /* ขอบตัวอักษรสีขาวหนา 1px */
}


/* เปลี่ยนสีของหัวข้อ modal */
.modal-header h5 {
    color: #007bff; /* เปลี่ยนสีหัวข้อเป็นสีน้ำเงิน */
    
    
}

.modal-body h4 {
    font-size: 20px;
    font-weight: bold;
    color: black;
}

/* เปลี่ยนสีของข้อความใน modal */
.modal-body p {
    color: #333; /* เปลี่ยนสีข้อความเป็นสีเทาเข้ม */
}

/* เปลี่ยนสีปุ่มใน modal */
.modal-footer .btn-secondary {
    background-color: #6c757d; /* สีพื้นหลังของปุ่ม */
    color: #fff; /* สีตัวอักษรของปุ่ม */
}



.modal-dialog {
    max-height: 500px;
    max-width: 700px; /* ปรับขนาดสูงสุดของ modal */
    margin: 1.75rem auto; /* จัดตำแหน่ง modal ให้อยู่กลางหน้าจอ */
}

/* Modal Body Styles */
.modal-body img {
    margin-bottom: 15px;
    width: 100%;
    height: auto;
}





/* for contact .php*/
.contact-card {
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.contact-card .card-title {
    font-size: 1.5rem;
    margin-bottom: 15px;
}

.contact-card .form-group {
    margin-bottom: 15px;
}

#contact {
    text-align: center;
}

#contact .container {
    max-width: 900px;
    margin: 0 auto;
}









/* language */
section {
    min-height: 100vh; /* แต่ละ section มีความสูงขั้นต่ำเท่ากับความสูงหน้าจอ */
    padding: 50px;
}

.language-switcher {
    margin: 20px 0;
}

.language-switcher a {
    margin-right: 10px;
    display: inline-block;
}

.language-switcher img {
    transition: transform 0.3s;
}

.language-switcher img:hover {
    transform: scale(1.1);
}



/*for mobile */
html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: #1a1a1a;
    color: #fff;
}

.sidebar {
    background-color: #2b2b2b;
    height: 100vh;
    padding: 20px;
    position: sticky; /* ทำให้ sidebar ติดตามการเลื่อน */
    top: 0;
}

/* เพิ่มสไตล์ไฮไลต์ */
.sidebar .nav-link.active {
    color: rgb(0, 55, 255);
    font-weight: bold;
}

.sidebar .nav-link {
    color: #ffffff;
    font-weight: bold;
}

.content {
    padding: 150px; /* เว้นระยะห่างสำหรับหน้าจอใหญ่ */
}

.content section {
    margin-top: 50px;
}

.content h1 {
    font-size: 2.5rem;
}

.content h1 span {
    color: #001eff;
}

.btn-custom {
    background-color: transparent; /* พื้นหลังโปร่งใส */
    color: #001eff; /* สีฟ้าสำหรับข้อความ */
    border: 2px solid #001eff; /* กรอบสีฟ้า */
    padding: 10px 20px;
    margin-top: 20px;
    transition: background-color 0.3s, color 0.3s; /* ทำให้มีการเปลี่ยน transition */
}

.btn-custom:hover {
    background-color: #001eff; /* เปลี่ยนเป็นพื้นหลังสีฟ้าเมื่อ hover */
    color: #fff; /* เปลี่ยนข้อความเป็นสีขาวเมื่อ hover */
}

.btn-custom:focus, .btn-custom:active {
    background-color: #001eff; /* เมื่อกดเปลี่ยนพื้นหลังเป็นสีฟ้า */
    color: #fff; /* ข้อความเป็นสีขาว */
    outline: none; /* ลบเส้นขอบของการ focus */
}

#details-section {
    margin-top: 20px;
    background-color: #f8f9fa;
    color: #000;
    padding: 15px;
    border-radius: 5px;
    border: 1px solid #001eff;
    display: none; /* เริ่มต้นไม่ให้แสดงผล */
}

#details-section p {
    font-size: 1.1rem;
    color: #001eff;
}

.typed-textCompany {
    color: #ff00cc; /* เปลี่ยนสีเป็นสีส้ม */
}

.settings-icon {
    position: absolute;
    top: 20px;
    right: 20px;
    color: #fff;
}

.settings-icon i {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

#about {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}
#about h1 {
    margin-bottom: 20px; /* ปรับระยะห่างด้านล่างของ h1 */
}
#about p {
    max-width: 600px; /* กำหนดความกว้างของข้อความเพื่อไม่ให้ยาวเกินไป */
    margin: 0 auto; /* ทำให้ข้อความตรงกลาง */
}

.card-slider {
    display: flex;
    justify-content: space-between; /* จัดการให้ Card มีระยะห่างระหว่างกัน */
    gap: 20px; /* ระยะห่างระหว่างแต่ละ Card */
    flex-wrap: wrap; /* เพื่อให้แสดงผลแบบ Responsive */
    margin-top: 20px;
}

.card {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    flex-basis: calc(33% - 20px); /* ขนาด Card เป็น 1 ใน 3 ของพื้นที่ (Responsive) */
    opacity: 1; /* แสดงทุก card ด้วยความชัดเจนเต็มที่ */
    transition: transform 0.3s ease; /* เพิ่มเอฟเฟกต์เมื่อ Hover */
}

.card:hover {
    transform: scale(1.05); /* ขยายขนาดเมื่อ Hover */
}

.card-body {
    background-color: rgba(255, 255, 255, 0.5); /* ใส่พื้นหลังโปร่งใส */
    padding: 20px;
    border-radius: 10px;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .sidebar {
        padding: 10px; /* ลด padding สำหรับมือถือ */
        width: 100%; /* ให้ sidebar มีความกว้างเต็ม */
        height: auto; /* เปลี่ยนความสูงให้ยืดหยุ่น */
    }

    .content {
        padding: 20px; /* ลด padding บนมือถือ */
    }

    .card {
        flex-basis: 100%; /* บนหน้าจอขนาดเล็ก แสดง Card เป็นแนวตั้งเต็มหน้าจอ */
        margin: 10px 0; /* ให้การ์ดมีระยะห่างระหว่างกัน */
    }

    .modal-dialog {
        max-width: 90%; /* กำหนดความกว้างสูงสุดของ modal */
        margin: 1.75rem auto; /* จัดกลาง */
    }

    .content h1 {
        font-size: 1.5rem; /* ปรับขนาด h1 สำหรับมือถือ */
    }

    .carousel-caption h5 {
        font-size: 18px; /* ปรับขนาดหัวข้อของ carousel */
    }

    .carousel-caption p {
        font-size: 14px; /* ปรับขนาดข้อความใน carousel */
    }

    .modal-footer .btn-secondary {
        width: 100%; /* ให้ปุ่มเต็มความกว้าง */
    }
}

.profile-card {
    background-color: #e9ecef; /* Background color for profile card */
    border-radius: 10px; /* Rounded corners */
}

.educational-card {
    background-image: url('https://upload.wikimedia.org/wikipedia/th/e/e2/Rmutr.png'); /* ใส่ path ของรูปที่คุณต้องการ */
    background-size: auto; /* ทำให้รูปครอบคลุมพื้นที่ทั้งหมดของ card */
    background-position: center; /* จัดตำแหน่งรูปให้อยู่ตรงกลาง */
    background-repeat: no-repeat; /* ไม่ให้รูปซ้ำ */
    color: #fff; /* เปลี่ยนสีตัวอักษรเป็นสีขาว (ขึ้นอยู่กับสี background) */
    border-radius: 10px; /* เพิ่มความโค้งให้กับมุม */
    padding: 20px;
}

.educational-card .card-body {
    background-color: rgba(0, 0, 0, 0.5); /* เพิ่มสีพื้นหลังโปร่งใสให้กับเนื้อหา */
    padding: 10px;
    border-radius: 10px; /* เพิ่มความโค้งให้กับ body */
}

/* for services.php*/
#services {
    text-align: center;
    margin-top: 50px; /* เว้นระยะห่างจากด้านบน */
}

.services-carousel {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 30px; /* ระยะห่างระหว่างหัวข้อกับการ์ด */
}

.service-card {
    background-color: rgb(222, 222, 222);
    width: 800px; /* กำหนดความกว้างของการ์ด */
    height: 900px; /* กำหนดความสูงของการ์ด */
    display: none; /* ใช้ Flexbox เพื่อจัดแนวเนื้อหาภายใน */
    flex-direction: column; /* ให้เนื้อหาอยู่ในแนวตั้ง */
    justify-content: center; /* จัดให้เนื้อหาตรงกลางในแนวตั้ง */
    align-items: center; /* จัดให้เนื้อหาตรงกลางในแนวนอน */
    border: 1px solid #ddd; /* กรอบของการ์ด */
    border-radius: 10px; /* มุมโค้งของการ์ด */
    padding: 20px; /* เว้นระยะห่างภายในการ์ด */
    margin: 10px; /* ระยะห่างระหว่างการ์ด */
    box-shadow: 0 2px 10px rgba(255, 255, 255, 0.1); /* เงาให้การ์ดดูมีมิติ */
    transition: transform 0.3s; /* การเปลี่ยนแปลงที่นุ่มนวล */
}


.service-card:hover {
    transform: scale(1.05); /* ขยายการ์ดเมื่อมีการ hover */
}

.service-card.active {
    display: block; /* แสดงการ์ดที่เป็น active */
    color: #001eff; /* เปลี่ยนสีตัวอักษรของหัวข้อการ์ดเป็นสีฟ้า */
}

.service-card h5 {
    margin-bottom: 10px; /* ระยะห่างระหว่างหัวข้อกับเนื้อหา */
    color: #001eff; /* สีหัวข้อการ์ดเป็นสีฟ้า */
}


/* เพิ่ม responsive สำหรับบริการ */
@media (max-width: 768px) {
    .service-card {
        width: 100%; /* ปรับให้การ์ดเต็มความกว้าง */
        height: auto; /* ปรับให้ความสูงของการ์ดตามเนื้อหา */
    }
}

/* ทำให้แน่ใจว่าพื้นหลังทำงานได้ดีบนหน้าจอขนาดเล็ก */
@media (max-width: 768px) {
    body {
        background-position: top; /* สำหรับหน้าจอขนาดเล็ก */
    }
}