html,
body,
* {
  padding: 0;
  margin: 0;
  font-family: 'Ubuntu', sans-serif;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
}

button {
  border: 2px solid rgb(246,245,233);
  background: transparent;
  color: rgb(246,245,233);
  padding: 10px 20px;
}

/* header-banner */
.header-banner {
  text-align: center;
  padding: 15px;
  background-color: rgb(37,37,37);
  color: rgb(246,245,233);
}


/* header-nav */
.header-nav {
  padding: 30px 200px;
  background-color: rgb(51,51,51);
  color: rgb(246,245,233);
  display: flex;
  justify-content: space-between;
}

.header-logo {
  margin: 0;
  font-size: 24px;
}

.header-nav-links {
  display: flex;
  gap: 20px;
  align-items: center;
}

.header-nav-links a {
  color: rgb(246,245,233);
  font-size: 16px;
}

/* header-main */
.header-main {
  padding: 230px 200px;
  background-image: url(images/main-background.png);
  background-size: cover;
  color: rgb(246,245,233);
}

.header-main-title {
  font-size: 48px;
}

.header-main-desc {
  font-size: 18px;
}

.header-main-title, 
.header-main-desc {
  margin-bottom: 20px;
}

.header-main-desc {
  margin-right: 150px;
}

.header-main button:hover {
  background-color:rgb(246,245,233);
  color: rgb(51,51,51);
  cursor:pointer;
}

/* product-info */
.product-info {
  background-color: rgb(255, 254, 243);
  color:rgb(37,37,37);
  padding: 100px 200px;
}

.product-info-title {
  font-style: italic;
  margin-bottom: 30px;
}

.product-grid {
  text-align: center;
  display: flex;
  justify-content: space-between;
}

.product-grid-item {
  /* border: 2px solid rgb(37,37,37); */
  max-width: 350px;
}

.product-desc {
  font-weight: 300;
  margin-top: 10px;
}

.product-grid-item img{
  height: 200px;
}

/* quote section */
.quote {
  background-color: rgb(153, 179, 169);
  color:rgb(255, 254, 243);
  padding: 150px 200px 150px;
  text-align: center;
}

.quote-text {
  font-size: 24px;
  font-style: italic;
  margin-bottom: 30px;
}

.quote-author {
  font-style: italic;
}

/* subscription box */
.sub-box {
  background-color: rgb(255, 254, 243);
  color:rgb(51,51,51);
  padding: 100px 500px;

  display: flex;
  justify-content: space-between;
  gap: 30px;
}

.sub-box-left {
  max-width: 500px;
}

.sub-message {
  margin-bottom: 15px;
}

.privacy-policy {
  color:rgb(51,51,51);
  text-decoration: underline;
}

.sub-button {
  border: 2px solid rgb(51,51,51);
  background-color:rgb(246,245,233);
  color: rgb(51,51,51);
}

.sub-button:hover {
  background-color:rgb(51,51,51);
  color: rgb(246,245,233);
  cursor:pointer;
}

/* footer */

.footer {
  text-align: center;
  padding: 15px;
  background-color: rgb(37,37,37);
  color: rgb(246,245,233);
}