/* BASIC / RESET */

*{
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
font-family: Arial, sans-serif;
line-height: 1.6;
color: #333;
background: white;
}




/* TOP BAR / NAVIGATION */

.navbar {
background: #222;
color: white;

display: flex;
justify-content: space-between;
align-items: center;

padding: 15px 8%;

position: sticky;
top: 0;
z-index: 100;


}

.logo {
font-size: 24px;
font-weight: bold;
}

.menu {
display: flex;
gap: 25px;
list-style: none;
}

.menu a {
color: white;
text-decoration: none;
transition: 0.3s;
}

.menu a:hover {
color: #66ccff;
}




/* HERO / BACKGROUND IMAGE */

.hero {
min-height: 500px;

background-image:
    linear-gradient(
        rgba(0, 68, 121, 0.45),
        rgba(0, 0, 0, 0.589)
    ),
    url("อัฒจันทร์พับเก็บได้ BG.jpg");

background-size: cover;
background-position: center;

display: flex;
justify-content: center;
align-items: center;

text-align: center;
color: white;

padding: 40px;


}

.hero-content {
max-width: 700px;
}

.hero h1 {
font-size: 50px;
margin-bottom: 20px;
}

.hero p {
font-size: 20px;
}




/* GENERAL CONTENT */

.container {
max-width: 1100px;
margin: auto;
padding: 70px 30px;
}

.container h2 {
font-size: 32px;
margin-bottom: 20px;
}

.container p {
margin-bottom: 15px;
}




/* TEXT + IMAGE ROW */

.about {
display: flex;
align-items: center;
gap: 50px;
}

.about-text {
flex: 1;
}

.about-image {
flex: 1;
}

.about-image img {
width: 100%;
display: block;
border-radius: 10px;
}




/* BUTTON */

.button {
display: inline-block;

background: #222;
color: white;

padding: 12px 25px;

text-decoration: none;
border-radius: 5px;

margin-top: 15px;


}

.button:hover {
background: #555;
}




/* FOOTER */

footer {
background: #222;
color: white;
padding: 50px 8%;
}

.footer-content {
display: flex;
justify-content: space-between;
gap: 40px;

max-width: 1100px;
margin: auto;


}

.footer-section {
flex: 1;
}

.footer-section h3 {
margin-bottom: 15px;
}

.footer-section p,
.footer-section a {
color: #ccc;
text-decoration: none;

margin-bottom: 8px;
display: block;


}

.footer-section a:hover {
color: white;
}

.copyright {
text-align: center;
color: #888;

margin-top: 40px;
padding-top: 20px;

border-top: 1px solid #444;


}




/* MOBILE */

@media (max-width: 700px) {

.navbar {
    flex-direction: column;
    gap: 15px;
}

.menu {
    gap: 15px;
}

.hero h1 {
    font-size: 36px;
}

.about {
    flex-direction: column;
}

.footer-content {
    flex-direction: column;
}


}