body{margin:0;font-family:Arial,sans-serif;background:#faf8f8;color:#333}
header{display:flex;justify-content:space-between;align-items:center;padding:20px 60px;background:#fff}
.logo-area{display:flex;align-items:center;gap:16px}
.logo{width:80px;height:80px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:32px;color:#fff;box-shadow:0 18px 40px rgba(128,199,200,.18)}
.menu-toggle{display:none;width:42px;height:42px;padding:8px;border:none;background:transparent;cursor:pointer;flex-shrink:0}
.menu-toggle span{display:block;width:100%;height:3px;margin:5px 0;background:#333;border-radius:2px;transition:transform .25s ease, opacity .25s ease}
nav a{text-decoration:none;color:#222;margin:0 15px}
nav .active{color:#e7a39a}
.hero{display:flex;justify-content:space-around;align-items:center;padding:50px;background:#f5f2f2}
.hero h2{font-size:64px;margin:0;font-family:Georgia,serif}
.hero-image{width:400px;height:400px;border-radius:50%;background:linear-gradient(135deg,#cfd8dc,#f8bbd0)}
.members{padding:60px 15%}
.members h3{font-size:42px;font-family:Georgia,serif}
.members span{color:#e7a39a}
.search-box{display:flex}
.search-box input{flex:1;padding:15px;border:1px solid #ddd}
.search-box button{background:#2ca34c;color:#fff;border:none;padding:15px 30px}
.member-results{margin-top:30px}
.member-table{width:100%;border-collapse:collapse;background:#fff;box-shadow:0 0 12px rgba(0,0,0,0.05)}
.member-table th,
.member-table td{padding:15px;text-align:left;border-bottom:1px solid #eee}
.member-table th{background:#f7f5f5;font-weight:600}
.member-table tr:hover{background:#f9f9f9}
.member-photo{width:60px;height:60px;object-fit:cover;border-radius:50%;border:2px solid #f0f0f0}
.result-message{padding:20px;background:#fff8e1;color:#755000;border:1px solid #ffe8a0;border-radius:8px}
.info{display:grid;grid-template-columns:1fr 1fr;gap:80px;padding:60px 15%}
.info h3{font-size:48px;font-family:Georgia,serif}
.about button{background:#e7a39a;border:none;color:#fff;padding:12px 30px;border-radius:30px}
.contact p{line-height:2}
.contact i{margin-right:10px;color:#e7a39a}
footer{display:flex;justify-content:space-between;padding:25px 60px;background:#f3ebeb}
.social i{margin-left:20px}
@media(max-width:768px){
header{flex-direction:column;align-items:flex-start;gap:15px;padding:20px}
.menu-toggle{display:block}
nav{display:none;flex-direction:column;width:100%;gap:10px;margin-top:10px}
nav.open{display:flex}
nav a{display:block;width:100%;padding:12px 15px;margin:0;border-radius:10px;background:#faf8f8}
nav a:hover{background:#f0efef}
.hero,.info,footer{flex-direction:column;display:flex;text-align:center}
.hero-image{width:250px;height:250px}
.hero h2{font-size:42px}
.info{grid-template-columns:1fr}
}