*{
 padding: 0;
 margin: 0;
 box-sizing: border-box;
 text-decoration: none;
 font-family: 'Josefin Sans', sans-serif;
 /* overflow-x: hidden; */
}

.navbar{
 position: absolute;
 left: 0;
 top: 2px;
 margin: 5px;
 width: 100%;
 display: flex;
 align-items: center;
 justify-content: space-between;
}

.nav-links{
 display: flex;
 list-style: none;
 align-items: center;
 justify-content: center;
}

.nav-links li{
 margin-right: 50px;
 font-family: 'Josefin Sans', sans-serif;
}
.nav-links li a{
 font-family: 'Josefin Sans', sans-serif;
 color: black;
 font-size: large;
}

.fa-sharp{
 margin: auto;
 padding-left: 70px;
 color: red;
}
.signup{
 color: white;
 display: inline-block;
 margin-right: 10px;
 padding: 10px 20px;
 background-color: red;
 border-radius: 20px;
 font-weight: bolder;
}

span h1{
 cursor: pointer;
 color:black;
}

header{
 background-image: url("./images/jeshoots-com-mSESwdMZr-A-unsplash.jpg");
 background-size: cover;
 background-position: center;
 height: 100vh;
 width: 100vw;
 display: flex;
 align-items: flex-end;
 justify-content: center;
}

.header-content{
 margin-bottom: 150px;
 color: white;
 text-align: center;
}

.Line{
 width: 200px;
 height: 5px;
 background-color: red;
 margin: 10px auto;
 text-align: center;
 margin-bottom: 20px;
}

.cta{
 color: white;
 display: inline-block;
 padding: 10px 20px;
 background-color: red;
 border-radius: 20px;
 margin-top: 20px;
 transition: ease 0.5s;
}

.header-content{
 align-items: center;
 text-align: center;
 padding-bottom: 40px;
}
.header-content h2{
 font-weight: 700;
 font-size: 50px;
 text-align: center;
}

.header-content h1{
 font-weight: 700;
 font-size: 40px;
 margin-top: 10px;
 text-align: center;
}

.menu-button{
 width: 50px;
 display: none;
}

.nav-links .signup{
 transition: ease 0.5s;
}

.nav-links li:hover{
 border-bottom: red solid 5px;
}

.nav-links .signup:hover{
 background-color: black;
 border: red solid 2px;
 color: white;
 transform: translateX(5px 10px);
}

.cta:hover{
 background-color: black;
 border: red solid 2px;
 color: white;
 transform: translateX(5px 10px);
}

.main-section{
 max-width: 80%;
 margin: 150px auto;
 justify-content: center;
 align-items: center;
}

.main-content{
 display: flex;
 align-items: center;
 justify-content: center;
}

.main-section h1{
 text-align: center;
}

.tour-content h1{
 text-align: left;
}
.tour-content p{
 text-align: left;
 margin-right: 25px;
 width: auto;
}

.paris{
 width:550px;
 height:350px;
 margin:auto;
}
.hiking{
 width:550px;
 height:350px;
 margin:auto;
}

.main-section-hero{
 height: 100vh;
 width: 100%;
 background-image: url("./images/harold-eggar-oIVpygLFUJg-unsplash.jpg");
 background-position: center;
 background-size: cover;
 display: flex;
 align-items: center;
 justify-content: center;
 flex-direction: column;
 color: white;
}

.main-section-hero h1{
 color: red;
 text-align: center;
}
.main-section-hero p{
 color: white;
 text-align: center;
}
.explore{
 width: 90%;
 margin: 150px auto;
}

.row{
 display: flex;
 align-items: center;
 justify-content: center;
}

.col{
 width: 50%;
}
.explore-images{
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 justify-content: center;
}

.explore-images img{
 width: 275px;
 height:175px;
 margin: 10px;
}

footer{
 background-color: grey;
 margin: 50px 0;
 height: 100px;
 margin: 50px 0 10px 0;
}

.icons{
 display: flex;
 justify-content: center;
 align-items: center;
}
.icons .fa-brands{
 font-size: 40px;
 margin: 10px;
 cursor: pointer;
}

.footer-links ul{
 display: flex;
 justify-content: center;
 align-items: center;
}

.footer-links li a {
 margin-right: 10px;
 color: black;
 font-size: 20px;
 font-weight: 500;
}



@media screen and (max-width:850px) {
 /* .navbar{
  padding: 0;
 } */
 .menu-button{
  width: 30px;
  display: block;
  position: absolute;
  top: 30px;
  right: 30px;
 }
 span{
  position:absolute;
  top: 30px;
  left: 20px;
 }
 .nav-links{
 flex-direction: column;
 align-items: center;
 justify-content: center;
 height: 50vh;
 width: 100vw;
 gap: 20px;
 margin-top: -900px;
 transition: all 0.4s ease;
 }
 .mobile-menu{
  margin-top: 0;
 }
 .nav-links{
  margin-bottom: 40px;
  background-color: blue;
 }
 .nav-links li a{
  color: white;
 }
 .nav-links li:hover{
  background-color: red;
 }
 .nav-links .signup:hover{
  background-color: transparent;
  border: red solid 2px;
 }
 .main-section{
  width: auto;
  justify-content: center;
  align-items: center;
 }
 .main-content{
  display: block;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
 }

 .tour-content h1{
  text-align: left;
 }
 .explore-content{
  text-align: center;
 }

 .col{
  width: 100%;
 }
 .explore .row{
  display: flex;
  flex-direction: column;
}
 .explore-images img{
  width: auto;
  height: auto;
  padding: 0%;
}
 .icons .fa-brands{
  font-size: 25px;
  cursor: pointer;
}
 .footer-links li a {
  font-size: 15px; 

 }
}