@import url("https://fonts.googleapis.com/css2?family=League+Spartan:wght@400;600;700&display=swap");
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-family: "League Spartan", sans-serif;
}
html {
  scroll-behavior: smooth;
}
header,
.section3,
.section5,
.section7 {
  background: url(img/Texture.png), #e5ddcf;
  background-blend-mode: overlay;
}
.section2,
.section4,
footer,
.section6 {
  background: url(img/Texture.png), #c14545;
  background-blend-mode: overlay;
}
header {
  padding: 3%;
  position: relative;
}
.gradient-top {
  position: absolute;
  top: 0;
  left: 10%;
  z-index: 1;
  opacity: 0.8;
}
.gradient-right {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1;
  opacity: 0.8;
}
.gradient-left {
  position: absolute;
  top: 10%;
  left: 0;
  z-index: 1;
  opacity: 0.8;
}
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
header nav .nav-2 {
  border: 2px solid #de4c49;
  border-radius: 100%;
  padding: 10px;
}
header nav .nav-3 {
  color: #de4c49;
  font-size: 20px;
}
header nav .nav-3 hr {
  background-color: #de4c49;
  border: 1px solid #de4c49;
}
.section1 {
  display: flex;
  align-items: center;
  margin-block: 2%;
  justify-content: space-between;
}
.section1 div {
  position: relative;
  z-index: 2;
  width: 33%;
}
.section1-2 {
  text-align: center;
}
.section1-1 {
  margin-top: 4%;
  align-self: flex-start;
}
.section1-1 h1 {
  color: #c14545;
  font-size: 5vw;
  text-transform: capitalize;
  font-weight: 700;
  padding-block: 5%;
}
.section1-1 p {
  color: #c14545;
  font-size: 1.3vw;
  text-transform: uppercase;
  font-weight: 600;
}
.section1-1 .btn1 {
  color: #c14545;
  font-size: 1.3vw;
  text-transform: uppercase;
  font-weight: 600;
  display: inline-block;
  border-radius: 30px;
  padding: 4%;
  cursor: pointer;
  transition: all 150ms ease-in-out;
  border: 1.5px solid #c14545;
}
.section1-1 .btn1:hover {
  color: #e5ddcf;
  background-color: #c14545;
  transition: all 150ms ease-in-out;
}
.section1-3 h5 {
  color: #c14545;
  font-size: 1.3vw;
  text-transform: uppercase;
  font-weight: 600;
  padding-block: 2%;
}
.section1-3 p {
  color: black;
  font-weight: 400;
  padding-right: 20%;
}
.section1-3 hr {
  background-color: #c14545;
  border: 1px solid #c14545;
  margin-block: 4%;
}
.section1-img1 {
  position: absolute;
  bottom: 0;
  left: -3%;
  height: 40%;
}
.down {
  position: absolute;
  bottom: 20%;
  left: 3%;
  z-index: 2;
  cursor: pointer;
}
.cir {
  position: absolute;
  bottom: 0;
  right: 0;
  height: 33%;
}
.section2 {
  padding-block: 4%;
}
.section2 h4 {
  color: #e2dcce;
  text-align: center;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 1.5vw;
}
.section2 .section2-flex {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-block: 4%;
}
.section2 .section2-flex div {
  width: 33%;
}
.section2 .section2-flex h1 {
  color: #e2dcce;
  text-align: center;
  font-weight: 700;
  font-size: 4vw;
}
.section2 .section2-flex hr {
  border: 1px solid #e2dcce;
  background-color: #e2dcce;
}
.section2 li {
  display: inline-block;
  margin-inline: 11%;
  margin-top: 4%;
  text-transform: uppercase;
  color: #e2dcce;
  font-size: 1.5vw;
  font-weight: 600;
}
.section2 p {
  color: #e2dcce;
  text-align: center;
  font-weight: 400;
  margin-inline: 33%;
  font-size: 1vw;
}
.section3 {
  padding: 4%;
  position: relative;
}
.section3 h1 {
  text-align: center;
  font-size: 5vw;
  font-weight: 700;
  color: #c14545;
  text-transform: capitalize;
}
.section3 p {
  text-align: center;
  font-size: 1.5vw;
  font-weight: 600;
  color: #c14545;
  text-transform: uppercase;
  padding: 2%;
}
.section3 .section3-grid {
  position: relative;
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  grid-template-columns: repeat(2, minmax(0, 1fr));
  place-items: center;
  text-align: center;
}
.section3 .section3-grid .grid1 {
  padding-top: 0%;
}
.section3 .section3-grid .grid2 {
  padding-top: 30%;
}
.section3 .section3-grid .grid3 {
  padding-bottom: 20%;
}
.section3 .section3-grid .grid4 {
  padding-top: 30%;
}
.section3 .section3-grid h3 {
  color: #c14545;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  padding: 2%;
}
.section3 .section3-grid p {
  color: black;
  font-weight: 400;
  text-align: center;
  text-transform: none;
  margin-inline: 10%;
  font-size: 1.5vw;
  padding-bottom: 3%;
}
.section3 .gradient-right {
  position: absolute;
  top: 37%;
  right: 0;
  z-index: 1;
  opacity: 0.8;
}
.section3 .gradient-top {
  position: absolute;
  top: -3%;
  left: -5%;
  z-index: 1;
  opacity: 0.8;
}
.section3 .gradient-left2 {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  opacity: 0.8;
}
.section4 {
  padding: 4%;
  position: relative;
}
.section4 h3 {
  color: #e2dcce;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 1.5vw;
}
.section4 .right {
  color: #e2dcce;
  text-transform: uppercase;
  font-weight: 600;
  text-align: right;
}
.section4-flex {
  display: flex;
  align-items: center;
}
.section4-flex div {
  width: 50%;
}
.section4-flex h1 {
  color: #e2dcce;
  font-size: 5vw;
  text-transform: capitalize;
  font-weight: 700;
  padding-block: 5%;
}
.section4-flex p {
  color: black;
  font-size: 1vw;
  font-weight: 400;
  padding-right: 35%;
}
.section4-flex .btn2 {
  color: #e2dcce;
  font-size: 1.5vw;
  font-weight: 600;
  margin-block: 5%;
  padding: 2%;
  border-radius: 30px;
  display: inline-block;
  border: 1.5px solid #e2dcce;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 150ms ease-in-out;
}
.section4-flex .btn2:hover {
  color: #c14545;
  background-color: #e2dcce;
  transition: all 150ms ease-in-out;
}
.section4 .text-right {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}
.section4 .section4-circle {
  position: absolute;
  top: 55%;
  right: 40%;
  z-index: 3;
}
.section4 .section4-line {
  position: absolute;
  top: 80%;
  right: 50%;
  z-index: 3;
}
.section5 {
  position: relative;
  padding: 5%;
  display: flex;
  align-items: center;
}
.section5 div {
  width: 50%;
}
.section5-flex1 img {
  width: 90%;
  z-index: 2;
  position: relative;
}
.section5 .first {
  font-size: 1.5vw;
  font-weight: 600;
  color: #c14545;
  text-transform: uppercase;
}
.section5 h1 {
  font-size: 5vw;
  font-weight: 700;
  color: #c14545;
  text-transform: capitalize;
  padding-block: 2%;
}
.section5 p {
  color: black;
  font-size: 1vw;
  font-weight: 400;
  padding-right: 15%;
}
.section5 .btn3 {
  color: #c14545;
  font-size: 1.3vw;
  font-weight: 600;
  margin-block: 2%;
  padding: 2%;
  border-radius: 30px;
  display: inline-block;
  border: 1.5px solid #c14545;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 150ms ease-in-out;
}
.section5 .btn3:hover {
  color: #e2dcce;
  background-color: #c14545;
  transition: all 150ms ease-in-out;
}
.up {
  position: absolute;
  top: 10%;
  right: 10%;
  cursor: pointer;
  border: 2px solid #de4c49;
  border-radius: 100%;
  padding: 10px;
  z-index: 2;
}
.section5 .line {
  position: absolute;
  top: 0;
  left: 13%;
  z-index: 1;
}
.section5 .line2 {
  position: absolute;
  bottom: 0;
  left: 13%;
  z-index: 1;
}
.section5 .text-section5 {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1;
}
.section6 {
  padding: 6%;
  position: relative;
}
.section6 img {
  width: 12%;
}
.section6 h1 {
  margin-block: 2%;
  text-align: center;
  font-size: 5vw;
  font-weight: 700;
  color: #e5ddcf;
  text-transform: capitalize;
}
.section6 .section6-flex {
  display: flex;
  justify-content: space-between;
}
.section6 .section6-flex div {
  width: 33%;
}
.section6 h3 {
  margin-block: 4%;
  font-size: 1.2vw;
  font-weight: 600;
  color: #e5ddcf;
  text-transform: uppercase;
}
.section6 p {
  margin-block: 2%;
  padding-right: 10%;
  font-size: 1vw;
  font-weight: 400;
  color: #e5ddcf;
}
.section6 hr {
  background-color: #e2dcce;
  border: 1px solid #e2dcce;
  margin-block: 1%;
}
.section6 .btn4 {
  font-weight: 600;
  color: #e2dcce;
  text-align: center;
  font-size: 1.3vw;
  text-transform: uppercase;
  padding: 2%;
  border: 1.5px solid #e2dcce;
  border-radius: 30px;
  display: inline-block;
  margin-inline: 40%;
  margin-block: 2%;
  cursor: pointer;
  transition: all 150ms ease-in-out;
}
.section6 .btn4:hover {
  color: #c14545;
  background-color: #e2dcce;
  transition: all 150ms ease-in-out;
}
.section6 .circle-top {
  position: absolute;
  top: 0;
  left: 0;
}
.section6 .circle-bottom {
  position: absolute;
  bottom: 0;
  right: 0;
}
.section7 {
  padding: 6%;
  position: relative;
}
.up2 {
  cursor: pointer;
  border: 2px solid #de4c49;
  border-radius: 100%;
  padding: 10px;
  padding-top: 13px;
  margin-inline: 50%;
  margin-bottom: 2%;
  z-index: 2;
  position: relative;
}
.section7-flex {
  display: flex;
  margin-top: 2%;
  justify-content: space-between;
  align-items: center;
}
.section7-flex h1 {
  margin-bottom: 2%;
  font-size: 5vw;
  font-weight: 700;
  color: #c14545;
  text-transform: capitalize;
}
.section7-flex p {
  margin-bottom: 2%;
  font-size: 1vw;
  font-weight: 600;
  color: black;
  margin-right: 30%;
}
.numbers {
  display: flex;
  align-items: center;
  padding-block: 3%;
}
.numbers .one {
  border: 2px solid #c14545;
  padding: 5%;
  border-radius: 100%;
}
.numbers .one p {
  font-size: 5vw;
  font-weight: 700;
  color: #c14545;
  text-align: center;
}
.numbers .values hr {
  background-color: #c14545;
  border: 1px solid #c14545;
  margin-right: 24%;
  margin-block: 2%;
}
.numbers .values .p1 {
  font-size: 1.3vw;
  font-weight: 600;
  color: #c14545;
  margin-inline: 3%;
  text-transform: uppercase;
}
.numbers .values .p2 {
  font-size: 1vw;
  font-weight: 600;
  color: black;
  margin-left: 3%;
  margin-right: 30%;
}
.half {
  margin-block: 5%;
  background-color: #c14545;
  border: 1px solid #c14545;
}
.section7-flex2 {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
}
.section7-flex2 div {
  text-align: center;
  z-index: 2;
}
.section7-flex2 h3 {
  color: #c14545;
  text-align: center;
  font-size: 1.4vw;
  font-weight: 600;
  text-transform: uppercase;
  margin-block: 2%;
}
.section7-flex2 p {
  color: black;
  text-align: center;
  font-size: 0.8vw;
  font-weight: 400;
  padding-inline: 20%;
}
.section7-flex2 .btn5 {
  color: #c14545;
  font-size: 1.3vw;
  font-weight: 600;
  text-transform: uppercase;
  padding: 3%;
  border: 1.5px solid #c14545;
  border-radius: 30px;
  margin: auto;
  margin-top: 4%;
  display: inline-block;
  transition: all 150ms ease-in-out;
  cursor: pointer;
}
.section7-flex2 .btn5:hover {
  color: #e2dcce;
  background-color: #c14545;
  transition: all 150ms ease-in-out;
}
footer {
  padding: 6%;
  color: #e2dcce;
}
footer .footer-flex {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
footer .footer-flex ul {
  list-style-type: "-";
  list-style-position: inside;
}
footer .footer-flex p {
  text-transform: uppercase;
  padding-bottom: 10px;
  font-size: 1.5vw;
}
footer .footer-flex li {
  text-transform: capitalize;
  padding-bottom: 5px;
  font-size: 1.2vw;
}
footer hr {
  margin-block: 2%;
  border: 0.8px solid #e2dcce;
  background-color: #e2dcce;
}
.reserved {
  text-align: center;
  font-size: 1vw;
  text-transform: uppercase;
  padding-top: 1%;
}
.reserved a {
  text-decoration: none;
  color: #e2dcce;
}
@media (max-width: 770px) {
  .section1 div {
    width: 50%;
  }
  .down {
    bottom: 10%;
  }
  .section1-img1,
  .cir,
  .section1-3,
  .gradient-top,
  .text-right,
  .section4-circle,
  .section4-line,
  .text-section5,
  .line2,
  .line,
  .section5 .gradient-right,
  .section5 .gradient-left {
    display: none;
  }
  .section1-1 {
    margin-top: 4%;
    align-self: center;
  }
  .section1-1 h1 {
    font-size: 7vw;
  }
  .section1-2 img {
    width: 100%;
    height: auto;
  }
  .section3 .section3-grid {
    position: relative;
    display: grid;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr;
    place-items: center;
    z-index: 2;
    text-align: center;
  }
  .section3 .section3-grid .grid2,
  .section3 .section3-grid .grid1,
  .section3 .section3-grid .grid3,
  .section3 .section3-grid .grid4 {
    padding: 0%;
  }
  .grid1 img,
  .grid2 img,
  .grid3 img,
  .grid4 img, .section4-img, .section5-flex1 img,
  .section5 .up img, .section7-flex2 img {
    width: 70%;
  }
  .up,
  .up2 {
    border: none;
    padding: 0;
  }
  .section7-img {
    width: 80%;
    z-index: 2;
    position: relative;
  }
}