@charset "utf-8";
/* CSS Document */


header {
    display: flex; /* Use flexbox layout */
    justify-content: space-between; /* Space elements evenly along the main axis */
    align-items: center; /* Align items vertically */
    background-color: #000000;; /* Background color for the header */
    padding: 10px; /* Add padding for spacing */
}

/* Apply styles to the navigation bar */
nav {
    display: flex; /* Use flexbox layout for navigation */
    align-items: center; /* Align items vertically */
	background-color: #000000;
	width: 100%;
}

/* Apply styles to the logo image */
.container-fluid img {
    max-width: 8%; /* Set max width for the image (100px) */
    height: auto; /* Maintain aspect ratio */
    margin-right: 10%; /* Add margin to the right for spacing */ /* 20px */
	background-color: #000000;
}


/* Apply styles to the navigation links */
.navbar-brand {
    color: white; /* Text color for links */
    margin-right: 3%; /* Add margin to the right for spacing (20px) */
    text-decoration: none; /* Remove underlines from links */
	background-color: #000000;
}

/* Apply hover effect on navigation links */
.navbar-brand:hover {
    text-decoration: underline; /* Add underline on hover */
	background-color:#393838;
}
.container-fluid{
	background-color: #000000;
	height: 100%;
}

h1{
	color:#9E9A6B;
	padding-top: 10px;
	text-align: center;
}

p {
	text-align: center;
	
}
h3 {
	padding-left: 1%; /* 8px/100 *100 */
}
p2 {
 text-align: left;
	margin-left: 4%; /* 15px*/
}
/*.box3{
	display: flex;
	border: 1px solid #000;
}*/
.box3{
	width: 100%;  /* 680px */
	margin: 10px auto;
	display: flex;
}
.housing-box{
	width: 50%;  /* 330px */
	height: 214px;
	border-radius: 5px;
	display: block;
	margin: 5px;
	background-size: 100%;
	background-repeat: no-repeat;
	transition: scale, 2s;
}

.housing-box:hover{
	transform: scale(1.25);
}
.cottages{
	background-image: url("images/cottages/woods/white-pine.jpg")
}
.lakeside{
	background-image: url("images/cottages/lakeside/cascade.png")
}
.suites{
	background-image: url("images/lodge/standard-king.jpg")
}





/*contact page css*/
.container1 {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50vh;
	padding-top: 80px;
	padding-bottom: 40px;
}
.content h2{
	text-align: center;
}
.content2 h2{
	text-align: center;
}
/* Style for the box */
.box {
    width: 40%;  /*500px*/
    border: 2px solid #000;
    padding: 20px;
    position: relative;
}

/* Style for the image */
.box img {
    width: 150px; /* Adjust image width as needed (100/500 *100 */
    float: left;
    margin-right: 20px; /*FIX THIS */
	height: 165px;
	transform: translateY(25%);
}

/* Style for the content */
.box .content {
    overflow: hidden; /* Hide overflow */
}

/* Style for the title */
.box .content h2 {
    margin-top: 0;
}

.container2 {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50vh;
	padding-top: 80px;
	padding-bottom: 40px;

}
.container2 img{
	width: 100px;
	height: 150px;
}

/* Style for the box */
.box2 {
    width: 40%; /* 500px */
    border: 2px solid #000;
    padding: 20px;
    position: relative;
}

/* Style for the image */
.box2 img {
    width: 200px; /* Adjust image width as needed */
    float: left;
    margin-right: 20px; /*FIX THIS */
}

/* Style for the content */
.box2 .content2 {
    overflow: hidden; /* Hide overflow */
}

/* Style for the title */
.box2 .content2 h2 {
    margin-top: 0;
}


/*footer for every page*/
footer{
	position: flex;
	width: 100%;
	bottom: 0;
	padding-top: 15px;
}
.banner{
	background-color: #000000;
	padding-right: 20px;  /*FIX THIS */
	text-align: right;
}
footer p{
	font-size: 10px;
	color:#828181;
	margin: 0;
	padding-bottom: 10px;
	padding-top: 10px;
}
	footer2 {
		position: flex;
		width: 100%;
		bottom: 0;
		padding-top: 15px;
		}
footer2 p{
	font-size: 10px;
	color:#828181;
	margin: 0;
	padding-bottom: 10px;
	padding-top: 10px;
}
footer3{
	position: flex;
	width: 100%;
	bottom: 0;
	padding-top: 15px;
}
footer3 p{
	font-size: 10px;
	color:#828181;
	margin: 0;
	padding-bottom: 10px;
	padding-top: 10px;
}
 .mission-container {
    border: 2px solid #000;
    padding: 20px;
    margin: 20px auto;
    max-width: 600px;
    text-align: center;
  }
  .mission-title {
    background-color: #000;
    color: #9E9A6B;
    font-size: 24px;
    padding: 10px;
    margin-bottom: 10px;
  }
  .mission-statement {
    font-size: 18px;
  }
.offers-container {
    border: 2px solid #000;
    padding: 20px;
    margin: 20px auto;
    max-width: 600px;
    text-align: center;
  }
  .offers-title {
    background-color: #000;
    color: #9E9A6B;
    font-size: 24px;
    padding: 10px;
    margin-bottom: 10px;
  }
  .offers-statement {
    font-size: 18px;
  }
.call-to-action-box {
    background-color: #fff;
    border: 2px solid #000;
    border-radius: 10px;
    padding: 20px;
    margin: 20px;
    text-align: center;
  }
.call-to-action-box2 {
    background-color: #fff;
    border: 2px solid #000;
    border-radius: 10px;
    padding: 20px;
    margin: 20px;
    text-align: center;
  }
/*slideshow*/

.slideshow-container {
    position: relative;
    width: 100%;
    /*max-width: 600px; /* Adjust as needed */
    margin: 0 auto;
	margin-bottom: 20px;
	background-color:#7F7D7D;
}

.slideshow-images img{
    position: center;
	height: auto;
	width: 500px;
	text-align: center;
} /*arrows*/
.slideshow-images{
    position: center;
	height: auto;
	width: 100%;
	text-align: center;
}

.arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    color: white;
    cursor: pointer;
    transition: opacity 0.3s;
}

.prev {
    left: 0;
}

.next {
    right: 0;
}

.arrow:hover {
    opacity: 0.8;
	color: #007bff;
}
.container {
    display: flex; /* Use flexbox to center content */
    justify-content: center;  /*Horizontally center content */
    align-items: center; /* Vertically center content */
    width: 70vw; /* Set container width to full viewport width */
    height: 50vh; /* Set container height to full viewport height */
}
.container img {
	max-width: 80%;
	max-height: 80%;
}
.container8 {
   display: flex;
   flex-direction: column;
   align-items: center; /* Vertically center content */
   margin-top: 20px;
}
.container5 {
    max-width: 500px;
    margin: 0 auto;
    padding: 20px;
    background-color: #9E9A6B;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	padding-bottom: 10px;
}

h2 {
    text-align: center;
}

.form-group {
    margin-bottom: 20px;
}

label {
    display: block;
    font-weight: bold;
}

input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

textarea {
    resize: vertical;
}

button {
    display: block;
    width: 100%;
    padding: 10px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

button:hover {
    background-color: #0056b3;
}

/* Global styles */
body {
    font-family: Arial, sans-serif;
   /* line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #f2f2f2;*/
}

.container6 {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

h2 {
    font-size: 2rem;
    margin-bottom: 20px;
    color: #333;
}

p {
    margin-bottom: 10px;
    color: #666;
}

/* Section styles */
.intro-container {
    background-color: #fff;
    padding: 50px 0;
}

.intro-heading {
    text-align: center;
    color: #333;
}

.intro-statements {
    max-width: 700px;
    margin: 0 auto;
}

.intro-statement {
    margin-bottom: 20px;
}

.intro-items {
    display: flex;
    justify-content: center;
    margin-top: 50px;
}

.intro-item {
    padding: 20px;
    margin: 0 10px;
    background-color: #9E9A6B;
	color: #fff;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.intro-item:hover {
    background-color: #345884;
}

/* Accommodation type styles */
.accommodation-type {
    margin-top: 50px;
	background-color:#fff;
}

.room {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 20px;
    border-radius: 5px;
	background-color:#000000;
}

.room-info {
    flex: 0 0 60%;
    max-width: 60%;
}

.room img {
    flex: 0 0 35%;
    max-width: 35%;
    border-radius: 5px;
}

.room h3 {
    margin-top: 0;
	color: #345884;
}

.room p {
    margin-bottom: 10px;
	color: #fff;
}

.btn {
    background-color: #9E9A6B;
    color: #fff;
    padding: 8px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn:hover {
    background-color: #345884;
}

@media screen and (max-width: 1024px) {
 header {
        padding: 10px 20px; /* Adjust padding */
		font-size: 2em;
    }

    img {
        max-width: 80px; /* Reduce image size */
        margin-right: 10px; /* Adjust margin */
    }

    .navbar-brand {
        margin-right: 10px; /* Adjust margin */
    }
	 
	.container ,
    .container2 {
        padding-top: 40px; /* Reduce padding-top for contact page sections */
        padding-bottom: 20px; /* Reduce padding-bottom for contact page sections */
    }

	

    .container-fluid {
        height: auto; /* Remove fixed height */
    }

    .slideshow-container {
        max-width: 800px; /* Adjust maximum width */
    }

    .box, .box2 {
        width: 80%; /* Adjust box width */
    }
	
    .box img,
    .box2 img {
        width: 80px; /* Adjust width for images inside contact page boxes */
        margin-right: 10px; /* Reduce margin-right for images inside contact page boxes */
    }
	.banner {
        padding-right: 10px; /* Reduce padding-right for footer banner */
    }
    footer2, footer3, footer{
        padding-top: 10px; /* Adjust padding */
    }
	footer {
		position: fixed;
	}
}

@media only screen and (max-width: 480px) {
   /* Header */
header {
    padding: 0.3125em; /* 5px */
}

.container-fluid img {
    max-width: 1.875em; /* 30px */
}

/* Navigation */
nav {
    flex-direction: column; /* Stack navigation items vertically */
}

.navbar-brand {
    margin: 0.3125em 0; /* 5px */
}

/* Boxes */
.box {
    width: 90%; /* Adjust box width */
}

.box img {
    width: 6.25em; /* 100px */
    margin-right: 0.625em; /* 10px */
}

/* Content Boxes */
.container2 {
    padding: 1.25em; /* 20px */
}

.box2 {
    width: 90%; /* Adjust box width */
}

.box2 img {
    width: 6.25em; /* 100px */
}

/* Footer */
footer,
footer2,
footer3 {
    padding: 0.625em; /* 10px */
}

.banner {
    padding-right: 0.625em; /* 10px */
}

/* Accommodation Type */
.intro-container {
    padding: 1.25em; /* 20px */
}

.intro-heading {
    font-size: 1.5rem; /* Decrease heading size */
}

.intro-statement {
    font-size: 0.9rem; /* Decrease statement size */
}

.intro-items {
    flex-direction: column; /* Stack intro items vertically */
}

.intro-item {
    margin: 0.625em 0; /* 10px */
    padding: 0.625em; /* 10px */
}

/* Accommodation Type */
.room {
    flex-direction: column; /* Stack room items vertically */
    text-align: center; /* Center text */
}

.room img {
    width: 100%; /* Adjust image size */
    margin-bottom: 0.625em; /* 10px */
	}}