@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playball&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Petit+Formal+Script&family=Playball&display=swap');

root {}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  font-family: "Quicksand", sans-serif;
  border-style: none;
  outline: none;
  text-decoration: none;
  background: #FBF8F4;
}

html {
  font-size: 62.5%;
  overflow-x: hidden;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

section {
  padding: 1rem;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2rem 7%;
  background: #F2E9DD;
}

.logo {
  background: #F2E9DD;
}

.logo a {
  font-size: 2rem;
  font-weight: bold;
  color: black;
  cursor: pointer;
  background: #F2E9DD;
}

nav {
  font-size: 1.5rem;
  text-align: center;
  align-items: center;
  padding-left: .7rem;
  background: #F2E9DD;
}

nav a {
  display: inline-block;
  padding: 0 1.5rem;
  color: black;
  font-size: 1.5rem;
  background: #F2E9DD;
}

nav a:hover {
  color: black;
  border-bottom: .1rem solid black;
  padding-bottom: .5rem;
}

.btn {
  display: inline-block;
  /* 1 is for top and bottom, 3 is left and right */
  padding: 1rem 2rem;
  align-items: center;
  border: .2rem solid black;
  background: rgba(255, 255, 255, .3);
  color: black;
  border-radius: .5rem;
  font-size: 1.5rem;
  /* this makes the text capitalize */
  text-transform: capitalize;
  margin-top: .5rem;
  cursor: pointer;
}

.btn:hover {
  background: #F2E9DD;
  color: black;
  font-weight: bold;
}

/* this depends on the screen size */
#menu-btn {
  font-size: 2.5rem;
  color: black;
  cursor: pointer;
  display: none;
  background: #F2E9DD;
}

#menu-btn:hover {
  background: #F2E9DD;
}

.home {
  padding-bottom: 0;
  background-color: #FBF8F4;
}

/* this is for the whole home screen */
.home .slide {
  min-height: 50rem;
  border-radius: .5rem;
  /* this makes the slide in the center */
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover !important;
  background-position: center !important;
}

/* this is the background of the box on the home screen */
.home .slide .content {
  background: rgba(251, 248, 244, .3) border-radius: .5rem;
  backdrop-filter: blur(.5rem);
  box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, 0.1);
  padding: 2rem;
  width: 50rem;
  text-align: center;
}

.home .slide .content h1 {
  font-size: 2.7rem;
  color: black;
  border-bottom: .2rem solid black;
  text-transform: uppercase;
}

.home .slide .content h3 {
  font-size: 1.7rem;
  color: black;
}

.home .slide .content p {
  font-size: 1.4rem;
  color: black;
  padding: 1rem 0;
  line-height: 2;
  background: #FBF8F4;
}

.swiper-button-next:after, .swiper-button-prev:after {
  color: black;
  font-size: .7rem;
}

/* this is for the box with details, this is to pop it on the screen */
@keyframes PopUp {
  0% {
    transform: scale(0);
  }
}

/* this is to pop the box when the image / slide is active */
.home .swiper-slide-active .content {
  animation: PopUp .2s linear backwards .2s;
}

.about {
  background: #EDE1D1;
  padding-top: 1rem;
  padding-bottom: 2rem;
  align-items: center;
}

.about h1 {
  text-align: center;
  font-size: 2.7rem;
  text-decoration: underline;
  background: #EDE1D1;
}

.about p {
  padding-top: 1.5rem;
  text-align: center;
  font-size: 1.5rem;
  line-height: 1.7rem;
}

.about a.btn {
  align-items: center;
  padding-bottom: 1rem;
}

.menu {
  padding-bottom: 1rem;
}

.menu h1 {
  text-align: center;
  font-weight: bold;
  text-decoration: underline;
  font-size: 2.7rem;
  padding-bottom: 1.5rem;
}

/* this is the grid */
.menu .box-container {
  display: grid;
  /* this is for grid sizing */
  grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
  /* this is the gap in between the box items */
  gap: 1.5rem;
}

.menu .box-container .box {
  border-radius: .5rem;
  background: #fff;
  overflow: hidden;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, 0.1);
}

.menu .box-container .box h3 {
  color: black;
  text-align: center;
  font-size: 2rem;
  padding: 1rem;
  text-transform: uppercase;
  background: #fff;
}

.menu .box-container .box .price {
  text-align: center;
  color: black;
  background: #EDE1D1;
  padding: 1rem;
  margin: 1rem 0;
  font-size: 2rem;
  border-radius: .5rem;
}

.menu .box-container .box .list p {
  font-size: 1.5rem;
  color black;
  /* gap in between list of items */
  padding: 1rem 0;
  background: #fff;
}

.quote h1 {
  text-align: center;
  text-decoration: underline;
  font-size: 2.7rem;
  padding-bottom: 1.5rem;
}

/* form look details */
.quote form .flex {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.quote form .flex .inputBox {
  flex: 1 1 41rem;
}

.quote form .flex .inputBox span {
  display: block;
  margin-bottom: 1rem;
  font-size: 2rem;
  color: black;
}

.quote form .flex .inputBox input,
.quote form .flex .inputBox textarea,
.quote form .flex .inputBox select {
  width: 100%;
  padding: 1.2rem 1.4rem;
  border: .2rem solid black;
  border-radius: .5rem;
  font-size: 1.7rem;
  background: #fff;
}

.quote form .flex .inputBox textarea {
  height: 20rem;
  resize: none;
}

.quote form .btn {
  margin-top: 2rem;
}

.background {
  min-height: 40rem;
  border-radius: .5rem;
  /* this makes the slide in the center */
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover !important;
  background-position: center !important;
}

.background .content {
  background: rgba(255, 255, 255, .3);
  border-radius: .5rem;
  backdrop-filter: blur(.5rem);
  box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, 0.1);
  padding: 2rem;
  width: 50rem;
  text-align: center;
}

.background .content h1 {
  font-size: 2rem;
  color: #fff;
  text-transform: uppercase;
}

.background .content p {
  font-size: 1.5rem;
  color: #fff;
  padding: 1rem 0;
  line-height: 2;
}

.gallery h1 {
  text-align: center;
  font-weight: bold;
  text-decoration: underline;
  font-size: 2.7rem;
  padding-bottom: 1.5rem;
}

/* this is the grid */
.gallery .gallery-container {
  display: grid;
  /* this is for grid sizing */
  grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
  /* this is the gap in between the box items */
  gap: 1.5rem;
}

/* box background */
.gallery .gallery-container .box {
  border-radius: .5rem;
  background: rgba(255, 255, 255, .3);
  overflow: hidden;
  box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, 0.1);
}

/* image sizing */
.gallery .gallery-container .box .image {
  height: 25rem;
  overflow: hidden;
}

/* image box animation */
.gallery .gallery-container .box .image img {
  transition: .2s linear;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

/* this is to expand */
.gallery .gallery-container .box:hover .image img {
  transform: scale(1.1);
}

.contact {
  padding: 1rem;
}

.contact h1 {
  text-align: center;
  font-size: 2.7rem;
  text-decoration: underline;
  line-height: 4rem;
  padding-bottom: 1.5rem;
}

.contact h2 {
  font-size: 2rem;
  text-decoration: underline;
  text-align: center;
  color: black;
  background: #EDE1D1;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.contact .box {
  background: #EDE1D1;
}

/* this is to put footer box items in grids */
/* this can be used as default */
.contact .box-container {
  display: grid;
  /* this is for grid sizing */
  grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
  /* this is the gap in between the box items */
  gap: 1.5rem;
  padding-left: 12rem;
  background: #EDE1D1;
}

/* this is for the item headers */
.contact .box-container .box h3 {
  font-size: 2rem;
  color: black;
  background: #EDE1D1;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/* this is for the items in footer */
.contact .box-container .box a, p, i {
  /* this is - display: block - makes it a column */
  display: block;
  font-size: 1.5rem;
  color: black;
  /* this is the gap between item list */
  padding: .5rem 0;
  background: #EDE1D1;
}

.map-details h2 {
  text-align: center;
  background: #EDE1D1;
  font-size: 2rem;
  text-decoration: underline;
  padding-bottom: 1rem;
  padding-top: 1rem;
}

.map-details h2 {
  font-size: 2rem;
  text-decoration: underline;
  text-align: center;
  color: black;
  background: #EDE1D1;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.map-details p {
  text-align: center;
}

.map-container {
  background: #EDE1D1;
  align-items: center;
  padding-bottom: 1.5rem;
}

.map-container iframe {
  width: 600px;
  height: 400px;
  align-items: center;
  display: block;
  margin: 0 auto;
}

/* this is the grid */
/* .footer .box-container{ */
/* display: grid; */
/* this is for grid sizing */
/* grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr)); */
/* this is the gap in between the box items */
/* gap: 1.5rem; */
/* } */
.footer {
  padding: 1rem;
  background: #F2E9DD;
}

.footer .box {
  background: #F2E9DD;
}

/* this is to put footer box items in grids */
/* this can be used as default */
.footer .box-container {
  display: grid;
  /* this is for grid sizing */
  grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
  /* this is the gap in between the box items */
  gap: 1.5rem;
  padding-left: 12rem;
  background: #F2E9DD;
}

/* this is for the item headers */
.footer .box-container .box h3 {
  font-size: 2rem;
  font-weight: bold;
  text-transform: uppercase;
  color: black;
  background: #F2E9DD;
}

/* this is for the items in footer */
.footer .box-container .box a {
  /* this is - display: block - makes it a column */
  display: block;
  font-size: 1.5rem;
  color: black;
  /* this is the gap between item list */
  padding: .5rem 0;
  background: #F2E9DD;
}

/* this is for icons, just normal settings */
.footer .box-container .box a i {
  color: black
    /* this is for the gap between icon and text */
    padding-right: .5rem;
  font-size: 1.2rem;
  transition: .2s linear;
  background: #F2E9DD;
}

/* this is for icons, when user uses it */
.footer .box-container .box a:hover i {
  /* this is to move the line */
  padding: .7rem;
  background: #F2E9DD;
}

.footer .credit {
  font-size: 1.4rem;
  text-align: center;
  margin-top: .5rem;
  padding-top: 1rem;
  border-top: .2rem solid black;
  color: black;
  padding-bottom: .5rem;
  background: #F2E9DD;
}

.footer .credit span {
  color: black;
  background: #F2E9DD;
}

/* media queries */
/* this is used to make items compatible for different screen sizes */
@media (max-width:991px) {
  html {
    font-size: 55%;
  }
}

@media (max-width:768px) {
  .heading {
    font-size: 3.5rem;
  }

  #menu-btn {
    display: inline-block;
    transition: .2s linear;
  }

  #menu-btn.fa-times {
    transform: rotate(180deg);
  }

  .navbar {
    position: absolute;
    top: 99%;
    left: 0;
    right: 0;
    background: #fff;
    border-top: .2rem solid black;
    padding: 2rem;
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    transition: .2s linear;
  }

  .navbar.active {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }

  .navbar a {
    display: inline-block;
    margin: 2rem;
    text-align: center;
  }
}

@media (max-width:450px) {
  html {
    font-size: 50%;
  }
}