@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,700&display=swap');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body, html{
  line-height: 1.5em;
  font-family: 'Lato', sans-serif;
}

.container{
  width: 95%;
  margin: auto;
}

.p-img1{
  background-image: url('pexels-peter-fazekas-874629.jpg');
  height: 100vh;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: 0.70;
  background-attachment: fixed;
}

.p-img2{
  background-image: url('pexels-david-skyrius-2129796.jpg');
  height: 60vh;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: 0.70;
  background-attachment: fixed;
}

.p-img3{
  background-image: url('pexels-matheus-bertelli-12446378.jpg');
  height: 60vh;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: 0.70;
  background-attachment: fixed;
}

.p-img4{
  background-image: url('pexels-nikolett-emmert-12165534.jpg');
  height: 60vh;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: 0.70;
  background-attachment: fixed;
}

/* To get a parallax effect, put the background attachment as fixed */

.p-text1{
  width: fit-content;
  text-align: center;
  position: relative;
  top: 50vh;
  left: 38.5vw;
  font-size: 1.3rem;
}

.p-text1 .border{
  font-weight: 700;
  font-style: italic;
  padding: 2vh 2vw;
  background: hsl(0, 0%, 0%);
  color: hsl(0, 100%, 100%);
}

.first-section{
  background: hsl(0, 0%, 96%);
}

.first-section h2{
  text-align: center;
  padding: 3vh 0;
}

.first-section p{
  width: 95%;
  text-align: center;
  margin: 2vh auto 0;
  padding: 0 0 5vh 0;
}

.second-section{
  background: hsl(210, 13%, 18%);
}

.second-section h2{
  text-align: center;
  padding: 3vh 0;
  color: hsl(0, 100%, 100%)
}

.second-section p{
  width: 95%;
  text-align: center;
  margin: 2vh auto 0;
  padding: 0 0 5vh 0;
  color: hsl(0, 100%, 100%);
}

.p-text2{
  width: fit-content;
  text-align: center;
  position: relative;
  top: 30vh;
  left: 42.2vw;
  font-size: 1.5rem;
}

.p-text2 .trans-border{
  font-weight: 700;
  font-style: italic;
  padding: 2vh 2vw;
  background: transparent;
  color: hsl(0, 100%, 100%);
}

.third-section{
  background: hsl(210, 13%, 18%);
}

.third-section h2{
  text-align: center;
  padding: 3vh 0;
  color: hsl(0, 100%, 100%)
}

.third-section p{
  width: 95%;
  text-align: center;
  margin: 2vh auto 0;
  padding: 0 0 5vh 0;
  color: hsl(0, 100%, 100%);
}

.p-text3{
  width: fit-content;
  text-align: center;
  position: relative;
  top: 30vh;
  left: 42.2vw;
  font-size: 1.5rem;
}

.p-text3 .trans-border{
  font-weight: 700;
  font-style: italic;
  padding: 2vh 2vw;
  background: transparent;
  color: hsl(0, 100%, 100%);
}

.fourth-section{
  background: hsl(0, 0%, 96%);
}

.fourth-section h2{
  text-align: center;
  padding: 3vh 0;
}

.fourth-section p{
  width: 95%;
  text-align: center;
  margin: 2vh auto 0;
  padding: 0 0 5vh 0;
}

.p-text4{
  width: fit-content;
  text-align: center;
  position: relative;
  top: 30vh;
  left: 42.2vw;
  font-size: 1.5rem;
}

.p-text4 .trans-border{
  font-weight: 700;
  font-style: italic;
  padding: 2vh 2vw;
  background: transparent;
  color: hsl(0, 0%, 0%);
}

.contact-us{
  background-color: hsl(240, 13%, 18%);
}

.contact-us h3{
  width: fit-content;
  margin: 0 auto;
  padding: 8vh 0 0;
  color: hsl(0, 100%, 100%);
}

.contact-us p{
  font-size: 1.8rem;
  width: 30%;
  font-weight: bold;
  text-align: center;
  margin: 6vh auto;
  line-height: 1.2em;
  color: hsl(0, 100%, 100%);
}

.my-form{
  width: 70%;
  margin: 0 auto;
}

.my-form input[type="text"]{
  width: 40%;
  height: 6vh;
  margin: 2vh 0 2vh 13vw;
  padding: 0 0 0 2vw;
  border-radius: 4px;
  border: none;
  font-weight: 400;
}

.my-form input::placeholder{
  color: hsla(229, 79%, 78%);
}

.contact-us_btn{
  height: 6vh;
  width: 14%;
  background-color: hsl(0, 94%, 66%);
  border: none;
  border-radius: 4px;
  margin: 0 0 0 1vw;
  color: hsl(0, 100%, 100%);
  font-weight: 400;
}

.contact-us_btn:hover{
  background-color: hsl(0, 100%, 100%);
  color: hsl(0, 94%, 66%);
  border: 2px solid hsl(0, 94%, 66%);
  cursor: pointer;
}

.footer{
  background-color: hsl(0, 0%, 0%);
}

.footer-writeup h1{
  font-size: 1.8rem;
  margin: 0 0 0 5vw;
  padding: 6vh 0 0 0;
  color: hsl(0, 100%, 100%);
  font-weight: 700;
  font-style: italic;
  width: fit-content;
}

.footer-writeup p{
  width: 40%;
  text-align: justify;
  margin: 5vh 0 0 5vw;
  color: hsl(0, 100%, 100%)
}

.contact-info{
  width: 30%;
  position: relative;
  left: 50vw;
  top: -20vh;
}

.contact-info ul{
  list-style: none;
}

.locate-icon{
  width: 10%;
  position: absolute;
}

.email-icon{
  width: 10%;
  position: absolute;
  top: 10vh;
}

.phone-icon{
  width: 10%;
  position: absolute;
  top: 20vh;
}

.contact-info ul li{
  color: hsl(0, 100%, 100%);
}

.locate-text{
  margin: 0 0 0 4vw;
  padding: 1vh 0 0 0;
}

.email-text{
  margin: 0 0 0 4vw;
  padding: 6vh 0 0 0;
}

.phone-text{
  margin: 0 0 0 4vw;
  padding: 6.5vh 0 3vh 0;
}

.icon8-copy{
  text-align: center;
}

.copyright a{
  font-size: 1.2rem;
  text-align: center;
}

.i-i{
  color: hsl(0, 100%, 100%);
  display: inline;
  padding: 0 0.3vw;
}

.copyright-text{
  color: hsl(0, 100%, 100%);
  font-size: 1.3rem;
  font-weight: 700;
  text-align: center;
  padding: 1vh 0;
}