@import url('https://fonts.googleapis.com/css2?family=Merriweather&family=Open+Sans&display=swap');

h1, h2, h3, h4, h5, h6 {
  color: #0E6C48;
  font-family: 'Merriweather', serif;
  letter-spacing: 1px;
  font-size: 1.5em;
}

h2 {font-size: 1.4em;}
h3 {font-size: 1.3em;}
h4, h5, h6 {font-size: 1.2em;}

p {
  color: #875315;
  font-family: 'Open Sans', sans-serif;
}

header, footer {
  display: block;
  background-color: #F2D59B;
  padding: 15px;
}

main {
  background-color: #E6D2EF;
  padding: 5px;
}

a {color: #9E09C3;}

img {max-width: 100%;}

section, aside {
  border: 1px solid;
  padding: 5px;
}

div {padding: 5px;}

button {font-size: 1.2em;}

iframe {
  width: 350px;
  height: 250px;
}

.center {
  text-align: center;
  justify-content: center;
}

.right {
  text-align: right;
  justify-content: right;
}

#call-to-action {
  background-image: url("../images/index/suite-small.webp");
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  height: 250px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#call-to-action h1, #call-to-action h2{
  text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}

#call-to-action button{
  margin: auto;
  margin-bottom: 15px;
}

#logo:hover {
  filter: drop-shadow(5px 2px 2px #fff);
}

#social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/*hamburger*/

html {-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

nav button {
  margin: .2rem 2vw;
  background: transparent;
  border: none;
  font-size: 2rem;
  color: #555;
}

nav {background-color:#FFD700;}

nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

nav ul li a {
  display: block;
  padding: .8rem 2vw;
  text-decoration: none;
  color: #333;
  border-top: 1px solid rgba(0,0,0,.5);
}

nav ul li.active a {
  background-color: rgba(0,0,0,0.5);
  color: #fff;
}

nav ul li a:hover {background-color: rgba(0,0,0,0.3);}

nav ul {display: none;}
nav ul.open {display: block;}

#hamburgerBtn span:nth-child(1) {display: block;}
#hamburgerBtn span:nth-child(2) {display: none;}

#hamburgerBtn.open span:nth-child(1) {display: none;}
#hamburgerBtn.open span:nth-child(2) {display: block;}

/*end humburger*/

/*alert div*/
.alert {
  display: none;
  padding: 20px;
  background-color: #f44336; /* Red */
  color: white;
  margin-bottom: 15px;
}

.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.closebtn:hover {color: black;}
/*end alert div*/


/*index slides*/
.featured {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 550px;
}

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #777;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
  align-self: flex-end;
}

/*end index slides*/

/*temple directory*/

div.info {display: none;}
div.info.open {display: block;}

.cards ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.cards section, .services section {
  display: block;
  margin: 5px;
  padding: 5px;
  border: 3px solid #b30926;
  background-color: #d6eeff;
  border-radius: 20px 20px 20px 20px;
}

/* Form */

form fieldset {
  margin: 2rem 0;
  border: 2px solid #0E6C48;
  border-radius: 10px;
  padding: .5rem 2%;
}

form legend {
  color: #0E6C48;
  margin: 0 1rem;
  padding: 0 .5rem;
  font-size: 1.4rem;
}

fieldset#guest label, fieldset#destination label {
  display: block;
  padding-top: 1rem;
  color: #875315;;
}

fieldset#guest input {
  display: block;
  font-size: 1rem;
  border: solid 1px #999;
  border-radius: 5px;
  padding: 1rem;
  color: #875315;
  width: 100%;
  background-color: rgba(0,0,0,0.1);
}

fieldset #pref label {
  display: inline;
  padding: 0.5rem;
}

form input.submitBtn {
  border: none;
  background-color: #d41825;
  color: white;
  border-radius: 1rem;
  padding: .75rem 1.5rem;
  margin: 0 0 2rem 2%;
  width: 95%;
}

fieldset#guest input:required {
  border-left: #d41825 solid 6px;
}

fieldset#guest input:required:valid {
  border-left: green solid 6px;
}

#comments {
  max-width: 450px;
  min-width: 450px;
}