*{
    margin: 0;
    padding: 0;
}

header {
      width: 80%;
      height: 75px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10%;
      position: relative;
      z-index: 5;
      background-color: black;
    }

header {
      width: 80%;
      height: 75px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10%;
      position: relative;
      z-index: 5;
      background-color: black;
    }

    .logo {
      color: #d5c19a;
      font-family: "Cormorant Garamond", serif;
      font-size: 22px;
      letter-spacing: 6px;
      font-weight: 500;
    }

    nav {
      display: flex;
      align-items: center;
      gap: 28px;
    }

    nav a {
      text-decoration: none;
      color: #bdb8ae;
      font-size: 8px;
      letter-spacing: 1px;
      transition: color 0.3s ease;
      font-size: medium;
    }

    nav a:hover{
      color: beige;
    }
    nav a.active { 
      color: gold;
    }

 .background{
  background-image: url(download.jpg);
  background-size: cover;
  background-position:center ;
  height: 80vh;
 }

footer{
  background-color: black;
  justify-items: center ;
  display: flex;
  padding: 15px;
  height: 45px;
  justify-content: center;
  align-items: center;
  
}
    
p{
  color: white;
  justify-content: space-between;  
}

.slogan{
  font-size: 50px;
  justify-self: right;
  width: 25% ;
  align-items: center;
  padding-right: 20px;
  padding-top: 65px;
}

.button{
  text-decoration: none;
  color: darkgray;
  font-size: large;
  border: none;
  background: none;
}


.button:hover,
    .button {
      color: gold;
    }

.about{
  background-color: black;
}

h2{
  justify-self: center;
  font-size: xx-large;
  color: white;
  padding-top: 8px;
  padding-bottom: 18px;
}

.address{
  background-color: transparent;
  width: 400px;
  height: 400px ;
  border-radius: 7%;
  border-color: white;
  border: 3px white solid;
  align-items: center;
}
.i{
  align-items: center;
  padding-top: 35px;
  padding-left: 98px;
 
}

.d{
  justify-self: center;
  font-size: x-large;
  color: goldenrod;
  padding-top: 10px;
  padding-bottom: 15px;
}

.m{
  justify-self: center;
  font-size: large;
}

.line{
  border-bottom: 3px solid #bdb8ae;
  max-width: 90%;
  align-items: center;
}

.foods{
  height: 200px;
  width: 200px;
  border-radius: 10%;
  
}

.body{
display: flex;
gap: 25px;
padding-left: 40px;
}

.talk{
  justify-self: center;
}

.talks{
  padding-bottom: 25px;
  justify-self: center;
}

.h2{
  justify-self: center;
  font-size: xx-large;
  color: white;
  padding-top: 8px;
  padding-bottom: 18px;
 
}


.end {
      border-top: 1px solid #191817;
      background: #050505;
      padding: 25px 5% 15px;
    }

    .footer-top {
      max-width: 1100px;
      margin: auto;
      display: grid;
      grid-template-columns: 1.2fr 1fr 1fr 1fr;
      gap: 30px;
      align-items: start;
    }

    .footer-logo {
      color: #d2bd94;
      font-family: "Cormorant Garamond", serif;
      font-size: 21px;
      letter-spacing: 5px;
    }

    .footer-tagline {
      color: #77736c;
      font-size: 5px;
      margin-top: 2px;
      letter-spacing: 0.7px;
    }

@media (max-width: 830px) {
 .slogan{
  font-size: 39px;
  width: 30%;
 }
 .foods{
  padding-right: 110px;
 }
 
 
}

@media (max-width: 900px) {
  .slogan{
    font-size: 45px;
  }
  .body{
    display: block;
  }
  .address{
    margin-bottom: 25px;
  }
  .talks{
    width: 45% ;
  }
}


@media (max-width: 600px) {
  .slogan{
    font-size: 39px;
  }
  .address{
    margin-left: 45px;
  }
}

@media (max-width: 400px) {
  .slogan{
    font-size: 30px;
  }
  .address{
    margin-left: 0px;
  }
  nav{
    font-size: medium;
  }
  .log{
    font-size: medium;
  }
  /* .foods{
    height: 100px;
    height: 100px;
  }
  .d{
    font: 7px;
  }
  .m{
    f
  } */
}

@media (max-width: 360px) {
  .address{
    width: 250px;
    height: 300px;
  }
  .nav{
    display: block;
  }
  .foods{
    width: 120px;
    height: 120px;

  }
  .i{
    padding: 15px 60px 0 60px;
  }
  .d{
    font-size: medium;
  }
}