/* --- 1. Global Reset & Font --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif; /* ใช้ฟอนต์ Poppins ตามบรีฟ */
    background-color: #f4f8fb; /* สีพื้นหลังตามบรีฟ */
    color: #000000;
}

/* Container จัดกึ่งกลางสำหรับ Navbar */
.container {
    max-width: 1440px; /* ความกว้างหน้าจอมาตรฐาน Desktop */
    margin: 0 auto;
    padding: 0 40px;
}

/* --- 2. Navbar Styling (ตาม Figma) --- */
.navbar {
    background-color: #f4f8fb; /* สีเดียวกับพื้นหลัง */
    padding: 20px 0;
    position: sticky; /* ให้เมนูติดด้านบนเวลาเลื่อนลง (Optional) */
    top: 0;
    z-index: 1000;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Logo: Mimiw Portfolio */
.logo {
    font-weight: 700; /* Bold */
    font-size: 24px;
    color: #000000;
    text-decoration: none;
}

/* Menu Items */
.nav-links {
    list-style: none;
    display: flex;
    gap: 40px; /* ระยะห่างระหว่างเมนู */
}

.nav-links a {
    text-decoration: none;
    font-weight: 600; /* SemiBold */
    font-size: 24px;
    color: #000000; /* สีปกติ */
    transition: color 0.3s ease;
    padding-bottom: 5px; /* เผื่อที่ให้เส้นใต้ */
    border-bottom: 3px solid transparent; /* เส้นใต้ซ่อนไว้ก่อน */
}

/* Hover & Active State */
.nav-links a:hover,
.nav-links a.active {
    color: #088395; /* สีเขียวมิ้นท์ตามบรีฟ */
    border-bottom: 3px solid #088395; /* เส้นใต้สีเขียว */
}

/* --- 3. Image Sections (การจัดวางรูปภาพ) --- */
.content-wrapper {
    width: 100%;
    /* ถ้าอยากให้รูปไม่เต็มจอเกินไป ให้เปิดบรรทัดล่างนี้ครับ */
    /* max-width: 1440px; margin: 0 auto; */
}

.image-section img {
    width: 100%;
    height: auto;
    display: block; /* ลบช่องว่างสีขาวใต้รูป */
}

/* --- 4. View Project Link (Bottom) --- */
.view-project-wrapper {
    display: flex;
    justify-content: flex-end; /* จัดชิดขวา */
    padding-top: 20px;         /* เว้นระยะห่างจากรูปข้างบนหน่อย */
    padding-bottom: 60px;      /* เว้นระยะห่างจากขอบล่างจอ */
}

.view-project-link {
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;          /* SemiBold เท่าเมนูบน */
    font-size: 24px;           /* ขนาดเท่าเมนูบน */
    color: #000000;            /* สีดำ */
    padding-bottom: 5px;       /* เผื่อที่ให้เส้นใต้ */
    border-bottom: 3px solid transparent; /* เส้นใต้ซ่อนไว้ก่อน */
    transition: all 0.3s ease;
}

/* Effect ตอนเอาเมาส์ชี้ (Hover) */
.view-project-link:hover {
    color: #088395;            /* เปลี่ยนเป็นสีเขียว */
    border-bottom: 3px solid #088395; /* เส้นใต้สีเขียว */
}

/* --- 5. Hero Buttons Overlay --- */
.hero-wrapper {
    position: relative; /* เพื่อให้ลูกข้างในอ้างอิงตำแหน่งจากกล่องนี้ */
}

.hero-buttons {
    position: absolute;
    /* ตำแหน่งนี้กะจากสายตา (ปรับแก้ตัวเลขได้ถ้ามันไม่ตรงเป๊ะ) */
    top: 50%; /* เพิ่ม/ลด เลขนี้เพื่อขยับ ขึ้น-ลง */
    left: 7.25%; /* เพิ่ม/ลด เลขนี้เพื่อขยับ ซ้าย-ขวา */
    display: flex;
    gap: 20px; /* ระยะห่างระหว่าง 2 ปุ่ม */
    z-index: 10;
}

/* สไตล์พื้นฐานของปุ่ม */
.btn-custom {
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    font-size: 24px;
    font-weight: 600;
    padding: 12px 30px;
    border-radius: 8px; /* ขอบมน */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* ปุ่ม View Project (สีเขียวไล่เฉด) */
.btn-project {
    background: linear-gradient(90deg, #1fa2b8 0%, #138496 100%); /* ไล่สีเขียวฟ้าน้ำทะเล */
    color: #ffffff;
    border: none;
}

/* ปุ่ม My resume (พื้นขาว ขอบเขียว) */
.btn-resume {
    background-color: #ffffff;
    color: #000000;
    border: 4px solid #138496; /* สีขอบ */
}

/* Effect ตอนเอาเมาส์ชี้ */
.btn-custom:hover {
    transform: translateY(-3px); /* เด้งขึ้นนิดนึง */
    box-shadow: 0 4px 10px rgba(0,0,0,0.2); /* มีเงา */
}