/* Custom Styles */
body {
    background-color: #fcfcfc;
    font-family: 'Poppins', sans-serif;
}

.navbar-brand {
    font-weight: 600;
}

.nav-link {
    color: #333;
}

.bg-light-green {
    background-color: #eff7ea;
}

.hero-section,
.vision-section {
    border-radius: 30px; /* เพิ่มความโค้งมนของขอบ */
}

.main-title {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.section-title {
    font-weight: 600;
}

.btn {
    border-radius: 50px; /* ทำให้ปุ่มเป็นทรงแคปซูล */
    padding: 10px 30px;
    font-weight: 500;
}

.btn-dark {
    background-color: #343a40;
    border-color: #343a40;
}

.btn-outline-dark {
    border-color: #343a40;
    color: #343a40;
}

.btn-outline-dark:hover {
     background-color: #343a40;
     color: #fff;
}

.img-fluid {
    border-radius: 20px; /* ความโค้งมนของรูปภาพ */
}
.portfolio-heading {
    /* ปรับสีและขนาดหัวข้อ Portfolio */
    color: #000000; /* สีเขียวที่ดูอ่อนโยน */
    font-size: 2.5rem;
}

.portfolio-item {
    /* สไตล์ทั่วไปของการ์ด Portfolio */
    border-radius: 1.5rem !important; /* ขอบโค้งมนที่ Card */
}

.portfolio-img {
    /* สไตล์สำหรับรูปภาพภายใน Card */
    border-radius: 2rem !important; /* ขอบโค้งมนที่รูปภาพ */
    padding: 1.5rem !important; /* ปรับ Padding ให้มีพื้นที่รอบรูป */
}

/* กำหนดสีพื้นหลังของการ์ดแต่ละใบโดยใช้ Attribute Selector จาก data-color ใน HTML */

.portfolio-item[data-color="green-yellow"] {
    background-color: #f0f8e9; /* สีเขียวอ่อน/เหลืองอ่อน */
}

.portfolio-item[data-color="salmon"] {
    background-color: #ffe0e0; /* สีชมพูอ่อน/แซลมอนอ่อน */
}

.portfolio-item[data-color="blue-light"] {
    background-color: #e6f7ff; /* สีฟ้าอ่อน */
}

.portfolio-item[data-color="dark-forest"] {
    background-color: #e8f5e7; /* สีเขียวป่าอ่อนๆ */
}
/* กำหนดสีหลักที่ใช้บ่อย (Custom Properties/Variables) */
:root {
    --primary-green: #e9f5e9; /* สีเขียวอ่อนพื้นหลัง Card */
    --background-color: #f7f9f7; /* สีพื้นหลังเว็บโดยรวม */
    --dark-blue: #2c3e50; /* สีน้ำเงินเข้ม Footer และหัวข้อ */
    --text-color: #4a4a4a; /* สีข้อความหลัก */
}

body {
    font-family: 'Poppins', sans-serif;
    color: var(--text-color);
    background-color: var(--background-color); /* ใช้สีพื้นหลังที่สว่าง */
}

/* ---------------- Navbar Styles ---------------- */
.custom-navbar .navbar-brand {
    font-weight: 700;
    color: var(--dark-blue);
}
.custom-navbar .nav-link {
    font-weight: 500;
    color: var(--dark-blue) !important;
}

/* ---------------- Hero Section Styles ---------------- */

.hero-container {
    padding: 0;
    /* Hero Section จะเป็นพื้นที่สีขาว/สว่าง */
    background-color: #ffffff; 
    padding-top: 50px; 
    padding-bottom: 200px; 
}

.hero-background-image {
    /* ใช้สำหรับพื้นที่ภาพพื้นหลังโต๊ะ/กาแฟ */
    /* ต้องหาภาพพื้นหลังโต๊ะทำงานที่คล้ายกันมาแทนที่ URL นี้ */
    background-image: url('your-desktop-background.jpg'); 
    background-size: cover;
    background-position: center top;
    height: 600px; 
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start; 
}

.hero-content-card {
    /* Card สีเขียวอ่อนที่ลอยอยู่ */
    background-color: var(--primary-green);
    border-radius: 20px;
    width: 90%; 
    max-width: 1100px;
    height: 500px; 
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    position: absolute; 
    top: 50px; /* เลื่อน Card ลงมาจากด้านบน */
    overflow: hidden; 
}

.card-left-image {
    /* ส่วนรูปภาพใน Card (เพื่อให้แท็บเล็ตดูอยู่บนโต๊ะ) */
    background-color: transparent; /* ทำให้โปร่งใสเพื่อโชว์ภาพพื้นหลังโต๊ะ */
    position: relative;
    padding: 0;
    /* ปรับตำแหน่งภาพเพื่อให้ภาพแท็บเล็ตดูอยู่บนโต๊ะ */
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-card-image {
    /* รูปภาพหลัก (หมาบนแท็บเล็ต) */
    width: 120%; /* ขยายภาพให้ใหญ่ขึ้นเพื่อคลุมพื้นที่และตัดขอบ */
    height: 120%;
    object-fit: cover;
    position: absolute;
    top: -10%; /* ขยับภาพขึ้น/ลงเล็กน้อย */
    left: -10%; /* ขยับภาพซ้าย/ขวาเล็กน้อย */
    border-radius: 0;
}

.hero-title {
    color: var(--dark-blue);
    line-height: 1.1;
    font-size: 3rem;
}

.hero-text-area h4 {
    color: var(--dark-blue);
    font-size: 1.1rem;
}

/* ---------------- Vision Section Styles ---------------- */

.small-caps {
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.text-dark-blue {
    color: var(--dark-blue);
}

.vision-text-width {
    max-width: 900px;
}

/* ---------------- Footer Styles ---------------- */

.footer-bg {
    background-color: var(--dark-blue);
}

.footer-card {
    background-color: rgba(255, 255, 255, 0.05); 
    border-radius: 10px;
    padding: 30px;
    height: 100%; 
}

.text-light-green {
    color: var(--primary-green);
}

.social-icons a {
    color: white;
    font-size: 1.2rem;
    transition: color 0.3s;
}

.social-icons a:hover {
    color: var(--primary-green) !important;
}

/* ---------------- Responsive Fixes ---------------- */
@media (max-width: 991.98px) {
    .hero-container {
        padding-bottom: 50px;
    }
    .hero-background-image {
        height: auto; 
        padding-top: 30px;
    }
    .hero-content-card {
        width: 95%;
        position: relative; 
        top: 0;
        height: auto;
    }
    .hero-card-image {
        width: 100%;
        height: auto;
        position: static;
        padding: 20px;
    }
}
/* --- Portfolio Page Styles --- */

.bg-light-green {
    background-color: #eff7ea;
}

.portfolio-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* ทำให้รูปภาพเต็มกรอบโดยไม่เสียสัดส่วน */
    transition: transform 0.3s ease-in-out; /* เพิ่ม animation */
}

.portfolio-item:hover img {
    transform: scale(1.05); /* ขยายรูปเล็กน้อยเมื่อเมาส์ชี้ */
    cursor: pointer;
}
html {
  scroll-behavior: smooth;
}