/*Homepage*/ /*header*/
/*navigationbar*/
.nav-list {
  display: flex;
  justify-content: space-around;
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #1a237e;
}

.nav-list li {
  padding: 20px;
}

.nav-list a {
  color: #ffffff;
  text-decoration: none;
  font-family: "Roboto", sans-serif;
  font-size: 1.2em;
}

.nav-list a:hover {
  color: #1c5ab7;
}

/*logo*/
.logo {
  width: 100px;
  height: auto;
  display: block;
  margin: 0 auto;
}

/*bar above navigationbar*/
.header {
  background-color: #1a237e; 
  padding: 10px 0;
  color: white;
  text-align: center;
}

/*Homepage*/ /*main part*/

.card-textbox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2em;
}
.card {
  flex-basis: 40%;
  background:#1a237e;
  width: 700px;
  padding: 1rem;
}

.card_image {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.textbox {
  flex-basis: 55%;
  background: white;
  padding: 2em;
  box-shadow: 20px 20px;
  border: 2px solid #1a237e;
}

h1 {
  font-family: Arial;
}

h2 {
  text-align: center;
}

.textbox p {
  max-width: 100%;
  font-family: Arial;
  font-size: 1.2em;
  line-height: 1.6;
  color: #1a237e;
}

/*Reservation-page*/ /*main part*/
/*Banner*/
.banner_style {
  width: 97%;
  background-color:#1a237e;
  text-align: center;
  border-radius: 15px;
  font-style: normal;
  color: white;
}
.banner_container {
  grid-column: 2;
  grid-row: 3;
  display: flex;
  justify-content: center;
  align-items: center;
}
/*Reservation Form*/
form {
  display: flex;
  flex-direction: column;
  width: 50%;
  margin: auto;
  padding: 20px;
  border: 2px solid #1a237e;
  border-radius: 10px;
  background-color: #f9f9f9;
}
/*Submit button*/
form input[type="submit"] {
  background-color: #1a237e;
  color: white;
  padding: 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
/*Submit button hover*/
form input[type="submit"]:hover {
  background-color: #1c5ab7;
}

/*Newsletter*/
#newsletter {
  color: black;
}

/*Special-page*/ /*main part*/
/*Table*/

table {
  border: 1px solid black;
  border-collapse: collapse;
  margin: 10px;
  align-items: center;
}
td,
th {
  border: 1px solid black;
  padding: 10px;
  align-items: center;
}

.table-container {
  display: flex;
  justify-content: center; 
  align-items: center; 
  height: auto; 
  padding: 20px; 
}

.table-container table {
  width: 80%; 
  max-width: 1000px; 
  margin: 0 auto; 
  border-collapse: collapse; 
  font-family: "Roboto", sans-serif;
}

.table-container td,
.table-container th {
  border: 1px solid black;
  padding: 10px;
  text-align: center; 
}

/* Blue Box */
.blue-box-price {
  background-color: #1a237e; 
  color: white;
  padding: 50px;
  font-family: Arial;
  font-size: 20px;
}

/*Contact-page*/ /*main part*/

/* Blue Box */
.blue-box {
  background-color: #1a237e; 
  color: white; 
}

/*Link mail*/
.mailto a {
  color: white;
  font-family: Arial;
}
.mailto {
  padding: 20px;
  margin: 20px;
}

/*Grid bar*/
body {
  margin: 40px;
}
.container {
display: grid;
grid-template-columns: 100px 100px;
background-color:aliceblue;
color:#1c5ab7
}
.box {
  background-color: aliceblue;
  color:#1c5ab7;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%
}
/*Using Media queries*/
@media screen and (max-width: 768px){
  .nav-list {
    width: 100%;
  }
  .card-textbox {
    flex-direction: column;
  }
  .card, .textbox {
    flex-basis: 100%;
    width: 100%;
  }
}

@media screen and (max-width: 800px) {
  .header {
    background-color:blue;
  }
}