@charset "UTF-8";
/* CSS Document */
@import url("https://fonts.googleapis.com/css2?family=Merriweather:wght@700&family=Roboto:wght@400;500&display=swap");

body{
background-color: #f4f1ea;
font-family: 'Roboto', sans-serif;
color: #283618;
line-height:1.6;
margin: 0;
}
h1, h2, h3{
font-family: 'Merriweather', serif;
}
#header-container{
margin: 0 auto;
width: 100%;
max-width: 960px;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
padding: 15px 20px;
box-sizing: border-box;
}
.nav-container{
display: flex;
justify-content: space-between;
align-items: center;
padding: 1em 5%;
}
.logo{
height: 100px;
margin-right: 1em;
}
.nav-links{
display: flex;
flex-shrink: 0;
gap: 1.5em;
align-items: center;

}
.nav-links a{
text-decoration: none;
color: black;
padding: 0.3em 0.6em;
}
nav a:hover{
	color: #2f5d50;
}
.nav-links .button{
color: white;
}
.button{
background-color: #606C38;
text-decoration: none;
color: white;
padding: 0.6em 1.5em;
border: none;
border-radius: 0.3em;
cursor: pointer;
font-size: 1em;
display: inline-block;
transition: background 0.3s ease, transform 0.2s ease;
}
.button:hover{
background: #283618;
transform: translateY(-0.1em);
}
.button:active{
transform:translateY(0);
}
.home-slideshow{
position: relative;
width: 100%;
height: 60vh;
overflow: hidden;
margin: 0;
padding: 0;
}
.slide{
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
display: none;
}
.home-slideshow::before{
width: 100%;
height: 100%;
content: "";
top: 0; left: 0; 
background: rgba(0,0,0,0.35);
position: absolute;
z-index: 1;
}
.home-text{
position: absolute;
z-index: 2;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
color: white;
}
.slide:first-child{
display: block;
}
.home-text h2{
font-size: 2.5em;
margin-bottom: 0.5em;
font-weight: 600;
}
.home-text p{
font-size: 1.2em;
margin-bottom: 1em;
opacity: 0.9;
}

.feature-nav{
padding: 3em 5%;
}
.feature-card img{
width: 9em;
height: 12em;
object-fit: cover;
border-radius: 0.5em;
margin-bottom: 1em;
box-shadow: 0 0.3em 0.6em rgba(0,0,0,0.2);
transition: transform 0.3s ease;
}
.feature-card:hover img{
transform: scale(1.05);
}
.feature-cards{
display: flex;
gap: 2em;
flex-wrap: nowrap;
justify-content:center; 
width: 100%;
}
.card-content{
display: flex;
justify-content: space-between;
align-items: center;
gap: 1.5em;
}
.card-text{
flex: 2;
}
.feature-card{
display: flex;
flex-direction: column;
align-items: center;
width: 30%;
min-width: 15em; 
border-radius: 0.8em;
text-decoration: none;
background:  #283618;
padding: 2em 1em;
color: #FEFAE0;
box-shadow: 0 0.5em 1em rgba(0,0,0,0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease; 
text-align: center;
border: 1px solid rgba(0,0,0,0.5);
box-sizing: border-box;
}
.feature-card h3{
font-size: 1.5em;
margin-bottom: 0.5em;
line-height: 1.2;
min-height: 2.5em;
}
.card-text p{
font-size: 1em;
line-height: 1.5;
margin-bottom: 0.8em;
}
.feature-card:hover{
transform: translateY(-0.5em);
box-shadow: 0 1em 1.5em rgba(0,0,0,0.2);
}
footer{
background: #283618;
color: #FEFAE0;
padding: 2em 5%;
text-align: center;
font-size: 0.9em;
margin-top: 2em;
}
footer a{
color: #FEFAE0;
text-decoration: none;
margin: 0 0.5em;
opacity: 0.8;
}
footer a:hover{
opacity: 1;
}
footer p{
opacity: 0.8;
font-size: 0.9em;
}
.lodge-about img{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.lodge-about{
position: relative;
width: 100%;
height: 55vh;
overflow: hidden;
padding: 0;
margin: 0;
}
.about-text{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #FEFAE0;
text-align: center;
background: rgba(0,0,0,0.4);
padding: 1em 2em;
border-radius: 0.5em;
}
.lodge-overview{
display: flex;
gap: 2em;
padding: 2em 5%;
flex-wrap: wrap;
align-items: center;
padding-bottom: 1.5em;
}
.overview-image img {
width: 100%;
max-width: 40em;
border-radius: 0.5em;
}

.overview-text {
flex: 1;
text-align: left;
}
.lodge-overview h2 {
font-size: 2em;
margin-bottom: 0.5em;
}

.lodge-overview p {
font-size: 1.05em;
line-height: 1.6;
}
.lodge-features{
padding: 3em 5% 2em;
text-align: center;
padding-top: 1.5em;
padding-bottom: 2em;
background: #FEFAE0;
}
.lodge-features h2 {
font-size: 2em;
margin-bottom: 1em;
}
.lodge-book{
text-align: center;
font-size: 1.1em;
padding: 3em 5% 5em;
}
.lodge-book button{
padding: 0.8em 2em;
font-size: 1.1em;
}
h2{
margin-bottom: 0.8em;
}
p{
margin-bottom: 0.8em;
font-family: 'Roboto', sans-serif;
font-size: 1.2em;
}
a{
transition: all 0.2 ease;
}
a:hover{
opacity: 0.8;
}
.lodge-overview, .lodge-features, .lodge-book{
max-width: 960px;
margin: 0 auto;
}

.feature-cards, .season-section{
display:flex;
gap: 2em;
flex-wrap: wrap;
}
.activities{
position: relative;
width: 100%;
height: 50vh;
overflow: hidden;
}
.activities img{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.activities .activities-text{
position: absolute;
bottom: 20%;
left: 5%;
color: #FEFAE0;
text-shadow: 1px 1px 4px rgba(0,0,0,0.5);
}
.activities h1{
font-size: 2.2em;
margin-bottom: 0.5em;
}
.activities p{
font-size: 1.1em;
}
.activities-overview{
padding: 3em 5%;
text-align: center;
}
.activities-overview h2{
font-size: 2.5em;
margin-bottom: 0.5em;
font-weight: 600;
}
.seasonal-highlights{
padding: 3em 5%;
}
.seasonal-highlights h2{
font-size: 2.5em;
margin-bottom: 0.5em;
font-weight: 600;
text-align: center;
}
.season-section{
display:flex;
align-items:center;
gap: 2em;
margin-bottom: 2em;
padding: 1em 0;
}
.season-section.reverse{
flex-direction: row-reverse;
}
.season-section, .season-section-reverse{
display: flex;
align-items: center;
gap: 2em;
margin-bottom: 2em;
flex-wrap: wrap;
}
.season-section:nth-child(even){
background: rgba(248,244,230,0.5);
padding: 1em 2em;
border-radius: 0.5em;
}
.season-section h3{
font-size: 1.5em;
margin-bottom: 0.5em;
line-height: 1.2;
min-height: 2.5em;
color: #283618;
}
.season-section p{
font-size: 1em;
line-height: 1.5;
margin-bottom: 0.8em;
color: #283618;
}
.season-section-reverse h3{
font-size: 1.5em;
margin-bottom: 0.5em;
line-height: 1.2;
min-height: 2.5em;
color: #283618;
}
.season-section-reverse p{
font-size: 1em;
line-height: 1.5;
margin-bottom: 0.8em;
color: #283618;
}
.season-image{
flex: 1;
min-width: 200px;
}
.season-image img{
width: 100%;
height: 250px;
object-fit: cover;
border-radius: 0.5em;
}
.season-text{
flex:1;
min-width: 200px;
}
.activities-book{
text-align: center;
padding: 3em 0;
}
.activities-book .button{
padding: 0.8em 2em;
font-weight: 500;
}
.booking{
position: relative;
width: 100%;
height: 50vh;
overflow: hidden;
}
.booking img{
width: 100%;
height: 100%;
object-fit: cover;
}
.booking .booking-text{
position: absolute;
bottom: 20%;
left: 5%;
color: #FEFAE0;
text-shadow: 1px 1px 4px rgba(0,0,0,0.5);
}
.booking h1{
font-size: 2.2em;
margin-bottom: 0.5em;
}
.booking p{
font-size: 1.1em;
}
.booking-form-section{
max-width: 600px;
margin: 3em auto;
background: #283618;
padding: 2.5em 2em;
border-radius: 0.8em;
box-shadow: 0 0.5em 1em rgba(0,0,0,0.1);
}
.booking-form .form-group{
display: flex;
flex-direction: column;
margin-bottom: 1.5em;
}
.booking-form label{
font-weight: 500;
margin-bottom: 0.5em;
color: #FEFAE0;
}
.booking-form input, .booking-form select{
padding: 0.7em;
border-radius: 0.5em;
border: 1px solid #ccc;
font-size: 1em;
outline: none;
}

.booking-form input:focus,
.booking-form select:focus {
border-color: #BC6C25;
box-shadow: 0 0 5px rgba(188,108,37,0.3);
}

.booking-form .button {
width: 100%;
padding: 0.8em 0;
background: #BC6C25;
color: #FEFAE0;
font-weight: 500;
border: none;
border-radius: 0.5em;
cursor: pointer;
transition: background 0.3s ease;
}
.booking-form .button:hover {
  background: #a45a1f;
}
.booking-confirmation{
	max-width: 700px;
	margin: 60px auto;
	padding: 40px;
	background-color: #ffffff;
	border-radius: 12px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
	}
	.booking-confirmation h1{
	font-size: 2.2em;
	margin-bottom: 20px;
	text-align: center;
	}
	.booking-confirmation p{
	text-align: center;
	margin-bottom: 30px;
	font-size: 1.1em;
	}
	.booking-confirmation ul{
	list-style: none;
	padding: 0;
	}
	.booking-confirmation li{
	padding: 15px 0;
	border-bottom: 1px solid #ddd;
	font-size: 1em;
	}
	.booking-confirmation strong{
	color: #2f5e4e;
	}

.acc-page{
background-color: #f4f1ea;
}
.acc-container{
width: 90%;
max-width: 1200px;
margin: 40px auto;
}
.acc-container h1{
text-align: center;
margin-bottom: 40px;
color: #3e2f1c;
font-size: 2.5em;
}
.section-title{
font-size: 2em;
margin-top: 60px;
margin-bottom: 25px;
border-bottom: 3px solid #8b6f47;
padding-bottom: 10px;
color: #3e2f1c;
}
.acc-card{
display: flex;
gap: 25px;
background: white;
margin-bottom: 30px;
padding: 20px;
border-radius: 12px;
box-shadow: 0 3px 10px rgba(0,0,0,0.08);
align-items: flex-start;
justify-content: center;
}
.acc-card img{
width: 320px;
height: 220px;
object-fit: cover;
border-radius: 10px;
}
.info{
flex:1;
}
.info h2{
margin-top: 0;
margin-bottom: 10px;
color: #2f2f2f;
font-size: 1.8em;
}
.meta{
color: #777;
font-size: 0.95em;
margin-bottom: 12px;
line-height: 1.6;
}
.description{
line-height: 1.7;
color: #444;
}
.price{
font-size: 1.4em;
font-weight: bold;
color: #8b6f47;
margin-top: 15px;
}
.acc-card:hover{
transform: translateY(-3px);
transition: 0.3s;
}
@media only screen and (max-width: 1024px){
	.home-text h2{
	font-size: 2em;
	}
	.home-text p{
	font-size: 1em;
	}
	.feature-cards{
	flex-wrap: wrap;
	gap: 1.5em;
	}
	.feature-card{
	max-width: 45%;
	min-height: 22em;
	}
	.lodge-overview{
	flex-direction: column;
	text-align: center;
	gap: 1.5em;
	}
	.overview-image img{
	max-width: 100%;
	margin-bottom: 1.5em;
	}
	.overview-text{
	text-align: center;
	}
	.season-section, .season-section-reverse{
	flex-direction: column;
	text-align: center;
	}
	.season-image img{
	height: auto;
	max-width: 100%;
	}
	.booking-form-section{
	margin: 2em 2em;
	padding: 2em;
	}
	.booking-form{
	width: 90%;
	margin: 0 auto;
	}
	.booking-form{
	font-size: 2.5em;
	}
	nav ul{
	gap: 20px;
	display: flex;
	}
	.acc-container{
	width: 95%;
	}
	.acc-card{
	gap: 20px;
	padding: 15px;
	}
	.acc-card img{
	width: 280px;
	height: 190px;
	}
	.info h2{
	font-size: 1.6em;
	}
	.section-title{
	font-size: 1.8em;
	}
	.price{
	font-size: 1.2em;
	}
	#header-container{
	padding: 15px;
	}
}


@media only all and (max-width:480px){
	.nav-container{
	flex-direction: column;
	align-items: flex-start;
	}
	.nav-links{
	flex-direction: column;
	width: 100%;
	gap: 0.8em;
	}
	.home-slideshow{
	height: 50vh;
	}
	.home-text h2{
	font-size: 1.5em;
	}
	.home-text p{
	font-size: 0.9em;
	}
	.button{
	padding: 0.5em 1.2em;
	}
	.feature-card{
	width: 100%;
	min-height: auto;
	padding: 1.5em;
	}
	.feature-card img{
	height: 10em;
	}
	.lodge-about{
	height: 40vh;
	}
	.about-text{
	padding: 0.6em 1em;
	}
	.lodge-overview h2{
	font-size: 1.5em;
	}
	.lodge-overview p{
	font-size: 1em;
	}
	h1{
	font-size: 1.8em;
	}
	h2{
	font-size: 1.5em;
	}
	p{
	font-size: 0.95em;
	}
	.button{
	display: inline-block;
	width: auto;
	padding: 0.7em 1.5em;
	}
	section{
	padding: 2em 5%;
	}
	.season-section, .season-section-reverse{
	flex-direction: column;
	}
	.season-image img{
	height: auto;
	max-width: 100%;
	}
	.booking h1{
	font-size: 1.8em;
	}
	.booking p{
	font-size: 1em;
	}
	.booking-form-section{
	margin: 1.5em 1em;
	padding: 1.5em;
	}
	header{
	text-align: center;
	}
	nav ul{
	flex-direction: column;
	align-items: center;
	gap: 10px;
	}
	.booking{
	height: auto;
	}
	.booking img{
	height: 250px;
	object-fit: cover;
	}
	.booking-text{
	padding: 20px;
	text-align: center;
	}
	.booking-text h1{
	font-size: 2em;
	}
	.booking-form{
	width: 100%;
	padding: 20px;
	}
	.form-group input,
	.form-group select,
	.form-group textarea{
	width: 100%;
	}
	.button{
	width: 100%;
	}
	.booking-confirmation{
	width: 90%;
	padding: 20px;
	}
	.acc-container{
	width: 95%;
	margin: 20px auto;
	}
	.acc-container h1{
	font-size: 2em;
	margin-bottom: 25px;
	}
	.section-title{
	font-size: 1.5em;
	margin-top: 40px;
	margin-bottom: 20px;
	}
	.acc-card{
	flex-direction: column;
	padding: 15px;
	}
	.acc-card img{
	width: 100%;
	height: auto;
	}
	.info h2{
	font-size: 1.4em;
	}
	.meta{
	font-size: 0.9em;
	}
	.description{
	font-size: 0.95em;
	}
	.price{
	font-size: 1.1em;
	}
	#header-container{
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 10px;
	}
}