/* ------------------------------------
GLOBAL
------------------------------------ */

body {
margin: 0;
font-family: "Georgia", serif;
background: #e5ecf1;
color: #222;
}

img {
max-width: 100%;
display: block;
}

h1, h2, h3 {
margin: 0;
font-weight: 400;
}

/* HEADER*/

.header {
background-image: linear-gradient(#eee0c9, #e5ecf1);
padding: 12px 16px;
}

.header-inner {
display: flex;
align-items: left;
justify-content: space-between;
}

.logo {
width: 70px;
padding-right: 20px; 
}

.header-text {
text-align: left;
flex-grow: 1;
}

.header-text h2 {
font-size: 18px;
margin-bottom: 4px;
}

.header-text p {
font-size: 13px;
margin-top: 0;
}

.hamburger {
width: 24px;
cursor: pointer;
}

.hamburger span {
display: block;
height: 2px;
background: #333;
margin: 5px 0;
}

/*HERO*/

.hero {
text-align: center;
padding: 20px;
}

.hero h1 {
font-size: 32px;
margin-bottom: 4px;
}

.hero h3 {
font-style: italic;
font-size: 16px;
margin-bottom: 20px;
}

.cta-btn {
background: #f0eae0;
border: 1px solid #c7bfaf;
padding: 10px 22px;
border-radius: 20px;
cursor: pointer;
font-size: 14px;
}

.hero-sub {
margin-top: 20px;
font-size: 15px;
}

.main-image-wrap {
margin-top: 20px;
}

.image-caption {
font-style: italic;
font-size: 14px;
margin-top: 10px;
margin-bottom: 1px;
}

/* DESCRIPTION*/

.description {
padding: 20px;
font-size: 16px;
line-height: 1.45;
}

/* DIVIDER*/

.divider {
border: none;
border-top: 1px solid #c7c7c7;
margin: 10px auto;
width: 90%;
}

/* INFO SECTION*/

.info-section {
padding: 20px;
background: #f4f0e8;
}

.info-section ul {
list-style: none;
padding: 0;
}

.info-section li {
margin-bottom: 15px;
font-size: 15px;
}

/*FORM SECTION*/

.form-section {
padding: 20px;
}

.reserve-form {
display: flex;
flex-direction: column;
}

.reserve-form label {
margin-top: 12px;
font-size: 14px;
}

.reserve-form input {
margin-top: 4px;
padding: 8px;
font-size: 14px;
border: 1px solid #b9b9b9;
background: #f1f1f1;
}

.form-image-wrap {
text-align: center;
margin-top: 20px;
}

.reserve-btn {
background: #f0eae0;
border: 1px solid #c7bfaf;
padding: 10px 22px;
border-radius: 20px;
cursor: pointer;
margin-top: 12px;
}

/*TABLET LAYOUT*/
@media (min-width: 768px) and (max-width: 1023px) {

.header-inner {
justify-content: space-between;
padding: 0 20px;
}

/* Info section becomes 2 columns */
.info-section {
display: flex;
gap: 20px;
}

.info-left {
flex: 0 0 60%;
}

    
    
.info-right {
flex: 0 0 40%;
}

/* Form becomes 2-column layout */
.form-section {
display: flex;
gap: 20px;
align-items: flex-start;
}

.reserve-form {
flex: 1;
}

.form-image-wrap {
flex: 1;
margin-top: 0;
}
}

/* DESKTOP*/
@media (min-width: 1024px) {

.info-section {
display: flex;
gap: 40px;
padding: 40px;
}

.form-section {
display: flex;
gap: 40px;
padding: 40px;
}
}