* {
    font-size: 16px;
    font-family: 'Roboto', sans-serif; 
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Add box-sizing for consistent sizing */
}

body {
    background-color: #000;
    color: #000;
}

header {
    background-color: #fff;
    padding: 5px 0px; 
}

#main-content {
    text-align: left;
    padding: 5px 0px; /* Adjust padding as needed */
}

h1 {
    font-size: 2em;
    font-weight: bold;
    margin-bottom: 20px;
    text-align: center;
    color: black; /* Change text color for main headings */
}

h2 {
    font-align: center;
    font-size: 1.40em;
    font-weight: bold;
    margin-bottom: 15px;
    color: #000; /* Change text color for main headings */
}

p {
    line-height: 1.3;
    margin-left: 0px;
    color: #fff; /* Change text color for paragraphs */
}

li {
    margin-left: 20px;
    color: #000; /* Change text color for paragraphs */
}

}
input,textarea,p {
    outline: 0;
}

.contact {
    margin: 0 auto;
}
.contact .fields {
    position: relative;
    padding: 15px;
}
.contact input[type="text"], .contact input[type="email"] {
    display: block;
    margin-top: 15px;
    padding: 15px;
    border: 1px solid #dfe0e0;
    width: 100%;
}
.contact input[type="text"]:focus, .contact input[type="email"]:focus {
    border: 1px solid #c6c7c7;
}
.contact input[type="text"]::placeholder, 
.contact input[type="email"]::placeholder, 
.contact textarea::placeholder {
    color: #858688;
}
.contact textarea {
    resize: none;
    margin-top: 15px;
    padding: 15px;
    border: 1px solid #dfe0e0;
    width: 100%;
    height: 150px;
}

.contact textarea:focus {
    border: 1px solid #c6c7c7;
}
.contact input[type="submit"] {
    display: block;
    margin-top: 15px;
    padding: 15px;
    border: 0;
    background-color: #518acb;
    font-weight: bold;
    color: #fff;
    cursor: pointer;
}
.contact input[type="submit"]:hover {
    background-color: #3670b3;
}
.contact input[name="email"] {
    position: relative;
    display: block;
}
.contact label {
    position: relative;

}
.contact label i {
    position: absolute;
    color: #dfe2e5;
    top: 31px;
    left: 15px;
    z-index: 10;
}

.contact label i ~ input {
    padding-left: 45px !important;
}
.contact .responses {
    padding: 15px;
    margin: 0;
}


.gray-line {
            background-color: darkgrey; /* Set your desired gray color */ 
            padding: 0px 0; /* Adjust padding as needed */
            text-align: center; /* Center the content horizontally */
            min-height: 2px;
        }

 .top-area {
            background-color:  #FAF3E0; /* Set your desired gray color */
            padding: 20px 20px; /* Adjust padding as needed */
	    min-height: 100px;
            color: black;
       }

        .top-area p {
            color: black;
            font-size: 1.4em;
    }

 .bottom-area {
            background-color: #FAF3E0; /* Set your desired gray color */
            padding: 20px 20px; /* Adjust padding as needed */
            min-height: 100px;
            color: black;
	    margin-bottom: -13px;
       }

        .bottom-area p {
            color: black;
	    font-size: 1.4em;
       }


.container {
    margin: 0 auto;
    padding: 0 3px; /* Adjust padding as needed */
}

.main-container {
    max-width: 63%;
    margin: 30px;
}

.outline {
  color: white; /* Set text color to white */
  text-shadow:
    -2px -2px 0 black, /* Top-left shadow */
    2px -2px 0 black, /* Top-right shadow */
    -2px 2px 0 black, /* Bottom-left shadow */
    2px 2px 0 black; /* Bottom-right shadow */
}

a {
    text-decoration: none; /* Remove the default underline */
    color: inherit; /* Inherit the color from the parent element */
}

/* Style links on mouse-over to underline */
a:hover {
    text-decoration: underline; /* Add underline on hover */
}

.landingpage {
    background-image: url('images/background.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right top;
    min-width: 100px;
    min-height: 700px;
}

.contentpage {
  #background-image: url('images/page-background.png');
  background-color: #ccc;
  min-height: 400px;
  padding: 10px;
}

.tooltip {
    position: relative;
    color: blue;
    text-decoration: underline;
}

.user-cannot-see {
    display:none
}

.tooltiptext {
    visibility: hidden;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 4px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.2s;
    width: 500px;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}


/* Default styles for a multi-column layout */
.paragraph-box {
  background-color: rgba(55, 255, 255, 0);
  padding: 0px;
  border: 0px solid #000;
  border-radius: 5px;
  color: black; /* Set text color to black */
  padding: 0;
  margin: 0;
  display: grid;
  grid-gap: 10px; /* Add gap between columns */
  grid-template-columns: 1fr; /* Multi-column layout by default */
}

/* Add or update these CSS rules in your style.css file */
/* Add this CSS to your stylesheet */
.room-box {
  border: 1px solid #ccc;
  padding: 10px;
  margin: 10px;
  display: inline-block;
  width: calc(33.33% - 20px); /* Adjust the width based on your design */
  box-sizing: border-box;
  vertical-align: top; /* Align boxes to the top of the line */
}

/* Clear any extra margin on the last item in each row */
.room-box:nth-child(3n + 1) {
  clear: left;
}



.box {
  background-color: rgba(255, 255, 255, 0.9); /* Semi-transparent white background for each box */
  padding: 5px; /* Adjust padding as needed */
  border: 0px solid #000; /* Black border for each box */
  border-radius: 5px; /* Optional border radius for rounded corners */
  margin: 0px;
  #box-shadow: 0px 4px 8px rgba(0, 0, 0, 4);
}

.double-width {
    width: 100%;  /* or any percentage that makes it double-wide */
}

.screen {
  display: flex;
  flex-direction: column;
  background-color: rgba(255, 255, 255, 0.0); /* Semi-transparent white background for each box */
  padding: 0px; /* Adjust padding as needed */
  margin: 10px;
  text-align: center:
  align-items: center;
  justify-content: center;
}



.box p {
  margin: 5px; /* Remove margin from heading */
  color: black;
  line-height: 1.5em;
}

.box h2 {
  margin-top: 0; /* Remove margin from heading */
  text-align: center;
  line-height: 50px;
}

.image {
  background-color: rgba(2, 2, 2, 0.1);
  text-align: center;
  border: 0px;
}

/* Responsive layout for two columns on larger screens */
@media screen and (min-width: 701px) {
  .paragraph-box {
    grid-template-columns: 1fr 1fr; /* Two columns on larger screens */
  }
}

/* Responsive layout for three columns on even larger screens */
@media screen and (min-width: 1200px) {
  .paragraph-box {
    grid-template-columns: 1fr 1fr 1fr; /* Three columns on even larger screens */
  }
  /* Add hover styles for three columns */
  .box:hover {
    background-color: rgba(255, 255, 255, 0.9); /* Change background color on hover */
  }
}

/* Responsive layout for a single column on touchscreen devices */
@media (hover: none) {
  .paragraph-box {
    grid-template-columns: 1fr; /* Single column layout on touchscreen devices */
  }
  /* Add hover styles for single column on touchscreen devices */
  .box:hover {
    background-color: rgba(255, 255, 255, 0.9); /* Change background color on hover */
  }
}


.top-nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  color: #000;
  height: 150px;
  margin-left: 15px;
}

.menu {
  display: flex;
  flex-direction: row;
  color: white;
  list-style-type: none;
  padding: 0;
}

.menu-item {
  position: absolute;
  top: -10px;   /* label-height offset from menu container */
  font-size: 21px;
  font-weight: bold;
  right: 55px;
  display: flex;
  margin: 0;
  padding: 0;
}

.menu li > a {
  color: #fff;
  overflow: hidden;
  text-decoration: none;
}

.menu li > a:hover {
  text-decoration: underline;
}

.menu-button-container {
  position: absolute;
  top: 0px;
  right: 0px;
  display: flex;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#menu-toggle {
  display: none;
}

.menu-button,
.menu-button::before,
.menu-button::after {
  display: block;
  background-color: #000;
  position: absolute;
  height: 5px;
  right: 0px;
  width: 45px;
  transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
  border-radius: 2px;
}

.menu-button::before {
  content: '';
  margin-top: -11px;
}

.menu-button::after {
  content: '';
  margin-top: 10px;
}

#menu-toggle:checked + .menu-button-container .menu-button::before {
  margin-top: 0px;
  transform: rotate(405deg);
}

#menu-toggle:checked + .menu-button-container .menu-button {
  background: rgba(255, 255, 255, 0);
}

/* Hide the label when the checkbox is checked 
#menu-toggle:checked + .menu-button-container .menu-item {
  display: none;
}
*/

#menu-toggle:checked + .menu-button-container .menu-button::after {
  margin-top: 0px;
  transform: rotate(-405deg);
}

/* Add transition for the label */
#menu-toggle:checked + .menu-button-container .menu-label {
  transition: opacity 400ms cubic-bezier(0.23, 1, 0.32, 1);
  opacity: 0;
}

@media (max-width: 3700px) {
  .menu-button-container {
    position: absolute;
    top: 38px;
    right: 50px;
    display: flex;
    flex-direction: column;
    justify-content: right; 
    align-items: right;
  }
  .menu {
    position: absolute;
    top: 94px;
    right: 5px;
    display: flex;
    flex-direction: column;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
  #menu-toggle ~ .menu li {
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
  }
  #menu-toggle:checked ~ .menu li {
    border: 2px solid #333;
    height: 2.6em;
    padding: .5em;
    transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
  }
  .menu > li {
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 0.5em 0;
    width: 200px;
    color: white;
    background-color: #222;
  }
  .menu > li:not(:last-child) {
    border-bottom: 1px solid #444;
  }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 11px; /* Adjust padding to control button size */
  background-color: #000; /* Button background color */
  color: #fff; /* Button text color */
  border-radius: 6px; /* Rounded corners */
  cursor: pointer; /* Change cursor on hover */
  transition: background-color 0.3s ease; /* Smooth background color transition */
  text-align: center; /* Center text horizontally */
  text-decoration: none; /* Remove default link underline */
  margin: 10px;
}

.button:hover {
  background-color: #0056b3; /* New background color on hover */
  text-decoration: none; /* Remove underline on hover */
}

.button a {
  text-decoration: none; /* Remove underline for links within .button */
}

.button:hover a {
  text-decoration: none; /* Remove underline for links within .button on hover */
}

.logo {
  text-align: center;
  width: auto; /* Set the width of the logo image */
  height: 150px; /* Maintain aspect ratio */
  display: block; /* Make the image a block element */
  margin: 18px auto; /* Center the image horizontally */
  margin-top: 0px;
  /* Add other styling properties as needed */
}

/* Style the footer with a background image and links menu */
footer {
    background-size: cover;
    padding: 20px 0;
    background-color: #000;
    text-align: center;
}

.footer-menu ul {
    list-style: none;
    text-align: center;
}

.footer-menu ul li {
    display: inline;
    margin: 0 15px;
}

.footer-menu ul li a {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
}