*{margin: 0;padding: 0;box-sizing: border-box;font-family: 'Playfair Display', serif;}
body{color: #333;line-height: 1.6;background-color: #f9f9f9;}

.btns .btn {background-color:#d4a373;color:#fff;padding:8px 20px;border:none;border-radius:5px;font-size:14px;cursor:pointer;transition:background-color 0.3s ease;}
.btns .btn:hover {background-color:#b88b5a;}

header{background-color: #fff;}
.header-container{max-width: 1200px;margin: 0 auto;display: flex;justify-content: space-between;align-items: center;padding: 20px;}
.logo{font-size: 28px;font-weight: 700;color: #1a3c34;text-decoration: none;}
nav a{color: #1a3c34;text-decoration: none;margin-left: 30px;font-size: 16px;font-weight: 500;transition: color 0.3s ease;}
nav a:hover{color: #d4a373;}
.hero{height:700px;background-image: url('https://images.unsplash.com/photo-1542314831-068cd1dbfeeb?auto=format&fit=crop&w=1920&q=80');background-size: cover;background-position: center;display: flex;align-items: center;justify-content: center;text-align: center;color: #fff;position: relative;}
.hero::before{content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.4);}
.hero-content{position: relative;z-index: 1;}
.hero h1{font-size: 48px;margin-bottom: 20px;font-weight: 700;}
.hero p{font-size: 20px;margin-bottom: 30px;}
.hero a{background-color: #d4a373;color: #fff;padding: 15px 30px;text-decoration: none;font-size: 16px;border-radius: 5px;transition: background-color 0.3s ease;}
.hero a:hover{background-color: #b88b5a;}
.rooms{padding: 80px 20px;background-color: #fff;text-align: center;}
.rooms h2{font-size: 36px;margin-bottom: 50px;color: #1a3c34;}
.rooms{max-width: 1200px;margin: 0 auto;display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 30px;}
.room-card{background-color: #f9f9f9;border-radius: 10px;overflow: hidden;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);transition: transform 0.3s ease;}
.rooms img{height: 250px;background-size: cover;background-position: center;}
.room-content{padding: 20px;}
.room-content h3{font-size: 24px;margin-bottom: 10px;color: #1a3c34;}
.room-content p{color: #666;margin-bottom: 15px;}
.room-icons{display: flex;justify-content: center;gap: 20px;margin-bottom: 20px;}
.room-icons svg{width: 24px;height: 24px;fill: #d4a373;}
.room-card a{color: #d4a373;text-decoration: none;font-weight: 500;transition: color 0.3s ease;}
.room-card a:hover{color: #b88b5a;}
.booking{padding: 80px 20px;background-color: #f4f4f4;text-align: center;}
.booking h2{font-size: 36px;margin-bottom: 50px;color: #1a3c34;}
.booking-form{max-width: 500px;margin: 0 auto;background-color: #fff;padding: 30px;border-radius: 10px;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);}
.form-group{margin-bottom: 20px;text-align: left;}
.form-group label{display: block;font-size: 14px;color: #1a3c34;margin-bottom: 8px;}
.form-group select,
        .form-group input{width: 100%;padding: 10px;border: 1px solid #ccc;border-radius: 5px;font-size: 16px;}
.form-group input[readonly]{background-color: #f9f9f9;cursor: pointer;}
.booking-form button{width: 100%;background-color: #d4a373;color: #fff;padding: 15px;border: none;border-radius: 5px;font-size: 16px;cursor: pointer;transition: background-color 0.3s ease;}
.booking-form button:hover{background-color: #b88b5a;}
footer{background-color: #1a3c34;color: #fff;padding: 40px 20px;text-align: center;}
footer p{font-size: 16px;margin-bottom: 10px;}
footer .contact-info{font-size: 14px;opacity: 0.8;}
@media (max-width: 768px){
    .header-container{flex-direction: column;    gap: 20px;}
nav a{margin: 0 15px;}
.hero h1{font-size: 36px;}
.hero p{font-size: 18px;}
.rooms-grid{grid-template-columns: 1fr;}
}