:root {
    --primary-color: #f70707;
    --secondary-color: #e35f00;
    --bg-light: #f7f9fa;
    --card-bg: #ffffff;
    --testimonial-bg: #e8fff8;
    --footer-bg: #01493f;
    --text-color: #222222;
}

body {
    font-family: 'Kanit', sans-serif;
    margin: 0; padding: 0;
    background: var(--bg-light);
    color: var(--text-color);
}
.container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 16px;
}
header {
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    color: #fff;
    padding: 10px 0;
}
.header-flex { display: flex; justify-content: space-between; align-items: center; }
.logo img { height: 48px; }
nav ul { list-style: none; display: flex; gap: 24px; margin: 0; padding: 0; }
nav a { color: #fff; text-decoration: none; font-weight: 600; transition: color 0.2s; }
nav a:hover { 
	color: #ffff66; /* เหลืองอ่อน อ่านง่ายตัดกับแดง */
    text-decoration: underline; }

/* Hidden H1 for SEO accessibility */
h1.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}
/* Section Headings */
section h2 {
    color: var(--primary-color);
    border-bottom: 3px solid var(--secondary-color);
    padding-bottom: 8px;
    margin-bottom: 16px;
    font-size: 2rem;
}

/* Main Sections */
main { padding: 40px 0; }
.about, .services, .projects, .news, .partners { background: #fff; margin: 48px 0; }
.testimonials { background: var(--testimonial-bg); margin: 48px 0; }

/* Cards and Content */
.services .service-list { display: flex; gap: 32px; margin-top: 24px; flex-wrap: wrap;}
.service-card {
    background: var(--card-bg);
    border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.1);
    border-top: 4px solid var(--secondary-color);
    padding: 32px 16px; flex: 1 1 180px; text-align: center; font-weight: 500;
}
.projects .project-list, .news .news-list, .testimonials .testimonial-list, .partners .partner-list {
    display: flex; gap: 32px; flex-wrap: wrap; margin-top: 24px;
}
.project-card, .news-card {
    background: var(--card-bg); border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.1);
    padding: 20px; flex: 1 1 280px; text-align: center;
}
.project-card img, .partners .partner-list img { width: 100%; border-radius: 12px 12px 0 0; }
.project-title { padding: 12px 8px; font-weight: 600; }
.testimonial-card {
    background: var(--testimonial-bg); border-radius: 12px; box-shadow: 0 2px 12px var(--secondary-color);
    padding: 24px; flex: 1 1 300px; display: flex; align-items: center; gap: 18px;
}
.testimonial-card img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.testimonial-content p { margin: 0 0 6px 0; font-style: italic; }
.news-card h3, .project-title { color: var(--primary-color); }
.news-card a { color: var(--primary-color); text-decoration: underline; }

/* Footer Styling */
footer {
    background: linear-gradient(90deg, var(--footer-bg), var(--primary-color));
    color: #fff; text-align: center; padding: 14px 0; font-size: 1rem; margin-top: 32px;
}
footer a { color: #fff; text-decoration: underline; }

@media (max-width: 900px) {
    .services .service-list, .projects .project-list, .testimonials .testimonial-list,
    .news .news-list, .partners .partner-list { flex-direction: column; gap: 16px;}
}
.sticky-header {
    position: sticky;
    top: 0;
    z-index: 999;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.menu-toggle {
    display: none;
    font-size: 28px;
    color: #fff;
    cursor: pointer;
}

@media (max-width: 768px) {
    .menu-toggle {
        display: block;
    }

    nav#main-nav {
        display: none;
        width: 100%;
        background-color: var(--primary-color);
    }

    nav#main-nav.open {
        display: block;
    }

    nav#main-nav ul {
        flex-direction: column;
        gap: 0;
    }

    nav#main-nav ul li {
        border-top: 1px solid rgba(255,255,255,0.2);
        text-align: center;
        padding: 12px 0;
    }
}