body {
  font-family: "Alegreya Sans", sans-serif;
  margin: 0;
}

#header {
  background-image: url(../bakery_images/bg-home.jpg);
  background-size: cover;
  background-position: center;
  height: 120vh;
  overflow: hidden;
}

#header .header-caption {
  width: 50%;
  color: white;
  text-align: center;
  margin-top: 250px;
  margin-left: 400px;
}

#header .header-caption span {
  font-size: 22px;
}

#header .header-caption h1 {
  font-family: "Alegreya", serif;
  font-size: 76px;
  font-weight: 400;
  margin: 5px 0;
}

#header .header-caption p {
  font-size: 24px;
  line-height: 40px;
}

#header .header-caption .button1 {
  background-color: rgb(142, 119, 84);
  border: 1px solid rgb(142, 119, 84);
  border-radius: 5px;
  padding: 20px 30px;
  color: white;
  font-family: "Alegreya Sans", sans-serif;
  font-weight: 700;
}

#header .header-caption .button2 {
  background-color: transparent;
  border: 1px solid white;
  border-radius: 5px;
  padding: 20px 30px;
  color: white;
  font-family: "Alegreya Sans", sans-serif;
  font-weight: 700;
  margin-left: 10px;
}

#header .header-caption .button1:hover,
#header .header-caption .button2:hover {
  background-color: white;
  color: black;
}

nav {
  background-color: #403d387f;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  color: #f5f3f3;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  font-weight: 300;
}

nav img {
  width: 200px;
}

nav ul {
  list-style: none;
  display: flex;
  justify-content: end;
}

nav ul a {
  text-decoration: none;
  padding: 15px 10px;
  color: RGB(255, 255, 255);
}

nav ul li:first-child a {
  color: RGB(142, 119, 84);
}

nav ul a:hover {
  color: RGB(142, 119, 84);
}

#section1 {
  margin-top: 150px;
  margin-right: 150px;
  height: 80vh;
}

#section1 img {
  width: 560px;
  height: 500px;
  margin-left: 100px;
  float: left;
  margin-right: 80px;
}

#section1 .section1-caption {
  margin-top: 40px;
}

#section1 .section1-caption h2 {
  font-size: 32px;
  font-family: "Alegreya", serif;
  font-weight: 400;
}

#section1 .section1-caption p {
  font-size: 17px;
  color: RGB(104, 104, 104);
  font-family: "Alegreya Sans", sans-serif;
}

#section1 .section1-caption .section1-caption2 {
  margin-top: 50px;
}

#section1 .section1-caption .section1-caption2 i {
  color: RGB(142, 119, 84);
  font-size: 20px;
  padding: 10px;
  border: 1px solid rgb(220, 218, 218);
  border-radius: 50%;
  margin-right: 10px;
  margin-bottom: 20px;
}

#section1 .section1-caption .section1-caption2 span {
  color: RGB(104, 104, 104);
  font-size: 17px;
}

#section2 {
  height: 90vh;
  background-color: RGB(248, 248, 248);
  overflow: hidden;
}

#section2 .section2-caption {
  width: 550px;
  height: 50%;
  margin-top: 150px;
  margin-left: 150px;
  float: left;
}

#section2 .section2-caption h2 {
  font-family: "Alegreya", serif;
  font-size: 32px;
  font-weight: 400;
  color: RGB(48, 48, 48);
}

#section2 .section2-caption p {
  font-size: 17px;
  color: RGB(104, 104, 104);
  line-height: 30px;
}

#section2 img {
  width: 550px;
  height: 450px;
  margin-top: 80px;
  margin-left: 100px;
}

#section3 {
  height: 100vh;
}

#section3 .section3-caption {
  text-align: center;
  margin-top: 60px;
}

#section3 .section3-caption h3 {
  font-family: "Alegreya", serif;
  font-size: 30px;
  font-weight: 400;
  color: RGB(48, 48, 48);
}

#section3 .section3-caption p {
  font-size: 17px;
  color: RGB(136, 136, 136);
}

#section3 .items {
  width: 80%;
  margin-left: 150px;
}

#section3 .items .item {
  width: 33.333%;
  float: left;
  text-align: center;
}

#section3 .items .item img {
  width: 370px;
  margin-top: 40px;
}

#section3 .items .item h4 {
  font-family: "Alegreya", serif;
  font-size: 22px;
  font-weight: 400;
  color: RGB(48, 48, 48);
}

#section3 .items .item p {
  font-size: 17px;
  color: RGB(104, 104, 104);
  line-height: 30px;
}

#section4 {
  height: 100vh;
  background-color: #f8f8f8;
  overflow: hidden;
}

#section4 .section4-caption {
  width: 40%;
  margin-top: 100px;
  margin-left: 150px;
  float: left;
}

#section4 .section4-caption h2 {
  font-family: "Alegreya", serif;
  font-size: 32px;
  font-weight: 400;
  color: RGB(48, 48, 48);
}

#section4 .section4-caption p {
  font-size: 17px;
  color: RGB(104, 104, 104);
  line-height: 30px;
}

#section4 .section4-caption .contact-details i {
  color: white;
  background-color: RGB(142, 119, 84);
  font-size: 18px;
  padding: 10px;
  border: 1px solid RGB(142, 119, 84);
  border-radius: 50%;
  margin-right: 10px;
  margin-bottom: 20px;
}

#section4 .section4-caption .contact-details span {
  color: RGB(104, 104, 104);
  font-size: 17px;
}

#section4 iframe {
  width: 550px;
  height: 550px;
  margin-top: 100px;
  margin-left: 100px;
}

#footer1 {
  height: 60vh;
  position: relative;
}

#footer1 .footer-caption {
  width: 100%;
  height: 100%;
  padding-top: 50px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #403d38;
  color: white;
}

#footer1 .footer-caption h4 {
  font-family: "Alegreya", serif;
  font-size: 18px;
  font-weight: 400;
}
#footer1 .footer-caption .sec1 {
  width: 270px;
  margin-left: 100px;
  float: left;
}
#footer1 .footer-caption .sec1 p {
  color: #969696;
  line-height: 30px;
}

#footer1 .footer-caption .sec2 {
  width: 300px;
  margin-left: 50px;
  float: left;
}

#footer1 .footer-caption .sec2 ul {
  list-style: none;
  padding: 0;
  color: #969696;
}

#footer1 .footer-caption .sec2 ul li {
  position: relative;
  padding: 10px 15px;
  border-bottom: 3px solid #44423d;
}

#footer1 .footer-caption .sec2 ul li:last-child {
  border-bottom: none;
}

#footer1 .footer-caption .sec2 ul li::before {
  content: ">";
  position: absolute;
  left: 0;
}

#footer1 .footer-caption .sec3 {
  width: 300px;
  margin-left: 50px;
  float: left;
}

#footer1 .footer-caption .sec4 {
  width: 300px;
  margin-left: 50px;
  float: left;
  background-image: url(../bakery_images/contact-details-map.png);
}

#footer1 .footer-caption .sec4 .address,
#footer1 .footer-caption .sec4 .phone,
#footer1 .footer-caption .sec4 .email {
  border-bottom: 3px solid #44423d;
  padding: 15px;
  color: #969696;
}

#footer1 .footer-caption .sec4 .address i {
  padding-right: 10px;
  line-height: 30px;
}

#footer1 .footer-caption .sec4 .website {
  padding: 10px;
  color: #969696;
}

#footer1 .footer-caption .sec4 .phone a,
#footer1 .footer-caption .sec4 .email a,
#footer1 .footer-caption .sec4 .website a {
  color: #969696;
  padding-left: 10px;
  text-decoration: none;
}

#footer1 .footer-caption .sec4 .phone a:hover,
#footer1 .footer-caption .sec4 .email a:hover,
#footer1 .footer-caption .sec4 .website a:hover {
  color: rgb(222, 215, 215);
}

#footer2 {
  height: 50vh;
  background-color: #353330;
  text-align: center;
  color: #969696;
  font-size: 15px;
}
#footer2 img {
  padding-top: 130px;
}

#footer2 .social-media i {
  margin: 10px 10px 0 0;
  color: #969696;
  background-color: #403d38;
  border: 1px solid #403d38;
  border-radius: 50%;
  padding: 12px;
  float: left;
}
#footer2 .social-media {
  margin-left: 670px;
}

#footer2 .social-media .facebook i:hover {
  color: white;
  background-color: #3b5998;
}

#footer2 .social-media .google i:hover {
  color: white;
  background-color: #dd4b39;
}

#footer2 .social-media .li i:hover {
  color: white;
  background-color: #007bb5;
}

#footer2 .social-media .twitter i:hover {
  color: white;
  background-color: #00aced;
}

.side-bar {
  position: fixed;
  top: 30%;
  right: 0;
  background-color: white;
  padding: 20px 10px;
  border: 1px solid rgb(238, 236, 236);
  border-radius: 10%;
}

.side-bar i {
  padding: 5px 5px;
  color: #554d53;
}