*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'poppins', sans-serif;
}

html, body{
   height: 100%;
}

.header {
    width: 100%;
    min-height: 100vh;
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('img/images/banner.png');
    background-position: center;
    background-size: cover;
}

nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 7%;
}


.logo{
    width: 140px;
    cursor: pointer;}

.nav-links li{
    list-style: none;
    displaY: inline-block;
    margin: 10px 30px;
}

.nav-links li a{
    color: #fff;
    text-decoration: none;
    
}

.register-btn{
    padding: 8px 20px;
    background-color: #fff;
    color: #000;
    text-decoration: none;
    border-radius: 20px;
    font-size:14px;
}

.container{
    padding: 0 7%;
}

.header h1{
    color: #fff;
    font-size: 4vw;
    font-weight:500;
    text-align: center;
    padding-top:22%;
}

.search-bar{
    background-color: #fff;
    margin: 30px auto;
    width: 70%;
    padding:6px 10px 6px 30px;
    border-radius: 50px;
    
}

.search-bar form{
    display: flex;
   flex-wrap:wrap;
    align-items: center;
}

.search-bar form input{
    display:block;
    border: 0;
    outline:none;
    background:transparent;
}

.search-bar form button{
    border:0;
    outline: none;
    width:55px;
    height:55px;
    background-color: #ff5361;
    border:0;
    border-radius: 50%;
    cursor: pointer;
}

.search-bar form button img{
    width:15px;
    margin-top:7px;
}

.location-input{
    flex:1;

}

.search-bar form label{
    font-weight:600;
}

/* Exclusives Section */

.sub-title{
    margin:50px 0 20px;
    font-size:2.2vw;
    font-weight:500;
    color:#333;
}
.exclusives{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap:30px;
}

.exclusives div img{
    width:100%;
    border-radius:10px;
}

.exclusives div{
position: relative;
}

.exclusives div span{
position: absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
text-align: center;
color:#fff;;
}

/* Trending places */

.trending{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap:30px; 
    margin-bottom:30px;
}

.trending div img{
    width:100%;
    border-radius:10px;
}

.trending h3{
    font-weight:300px;
    margin-top:10px;
}


/* CTA */

.cta{
    margin:80px 0;
    background-image:linear-gradient(to right, #3f2321, transparent),url('img/images/banner-2.png');
background-size: cover;
background-position: center;
border-radius: 10px;
padding:5%;
color:#fff;

}


.cta h3{
font-size:4vw;
line-height:5.3vw;
font-weight:500;

}

.cta p{
    font-size:18px;
    margin:10px 0;

}

.cta-btn{
    background-color:#ff5361;
    color:#fff;
    text-decoration:none;
    padding:12px 30px;
    border-radius:8px;
    margin-top:20px;
    display: inline-block;
}


/*Travelers stories*/

.stories{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap:30px; 
    margin-bottom:30px;
}

.stories div img{
    width:100%;
    border-radius:10px;
}

.stories div{
position: relative;
text-align:center;

}

.stories p{
    width:80%;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%) ;
    color:#fff;
    font-size:26px;
}

.start-btn {
text-decoration: none;
background-color: #ff5361;
color:#fff;
width:80%;
max-width:350px;
display:block;
text-align: center;
margin: 60px auto;
padding: 15px;
border-radius:30px;
font-size: 20px;
}


/*About msg*/ 
.about-msg {

    text-align:center;
    margin:80px 0;
    color:#333;
    font-size: 17px;;

}

.about-msg h2{
    font-size: 28px;
    margin-bottom:30px;
    font-weight:500;
}


.footer{
    margin: 80px 0 10px; 
    
    text-align: center;
    
}

.footer a{
    color:#999;
    font-size:22px;
    margin: 0 10px;
    text-decoration: none;
}

.footer hr{
   background:#999;
   height:1px;
   width:100%;
    margin:20px 0;
    border:0;
    
}

.footer p{
   padding-bottom:15px;
}

.active{
   position:relative;

}

.active::after{
   content:'';
   position:absolute;
   width:25px;
   height:2px;
   background:#fff;
   left:50%;
   transform: translateX(-50%);
   bottom:-12px;
   border-radius:2px;
}

nav .fa-bars{
   display:none;
   
}
/*------for small screen devices ------*/

@media  only screen and (max-width:700px) {
   .logo{
   position:fixed;
top:4%;
left:7%;} 

nav {
    position: fixed;
    top:0;
    z-index:100;
    display: inline-block;
    width:100%;
    padding: 100px 7% 0;
    background-color: #000;
    text-align:right;
    max-height:100px;
    overflow: hidden;
    transition: max-height 0.5s;
}
nav .nav-links li{
    margin: 10px 0;
    display:block;
}

.register-btn{
    margin:15px 0 30px;
    display:inline-block;
}

nav .fa-bars{
   display:block;
   position: fixed;
   top:4%;
   right:7%;
   color:#fff;
   font-size:28px;

}

.active::after{
   
   left:-40px;
   transform: translateXù(0, 50%);
   bottom:50%;
  
}

.hidemenu{
    max-height: 300px;;
}

.header h1{
    font-size:7vw;
    padding-top:200px;
}

.search-bar{
    width:90%;
    margin:30px auto;
    padding: 20px 10px 30px;
    border-radius:5px;
    position: relative;
}

.search-bar form{
    display: block;

}
 .search-bar form input{
    border-bottom: 1px solid #ddd;
    margin-bottom:20px;
    margin-top:10px;
    padding-bottom:10px;
    width:100%;


}


.search-bar form button{

    position: absolute;
    left:50%;
    bottom:0;
    transform: translate(-50%, 50%);
}


.sub-title{
    font-size:6vw;
}

.cta{
    padding: 15% 5%;

}

.cta h3{

    font-size:7vw;
    line-height:8vw;
}

.cta p {
    font:14px;
}

.cta-btn{
    padding:6px 15px;
    border-radius:4px;
    margin-top:10px;
    font-size: 14px;
}

.stories p{
    font-size:22px;
}

.about-msg h2{
    font-size:15px;
}


}


/*------listing page ------*/

.navbar-white {

background:#fff;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
}

.navbar-white .nav-links li a{
    color: #000;
    
}

.navbar-white .register-btn{
    background-color: #ff5361;
    color:#fff;
}

nav.navbar-white .fa-bars{
   color:#000;
   
}

.navbar-white .active::after{
   background:#ff5361;
}


.list-container{
    margin-top:50px;
    display:flex;
    flex-wrap:wrap;
    justify-content: space-between;
}

.left-col{
    flex-basis:70%;
}

.right-col{
    flex-basis:25%;
}

.left-col h1{
    color:#333;
    
    font-weight:600;
    margin-bottom:30px;
}

.house{

    display:flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 30px 0;
    border-top: 1px solid #ccc;
}

.house-img{
    flex-basis:40%;
 margin-right: 10px;
}

.house-info{

    flex-basis:58%;
    color:#555;
}

.house-img img{
 width:100%;
 border-radius:12px;
 margin-right: 20px;

}

.house-info h3{

  font-weight:600;
  color:#333;
  font-size:22px;
  margin: 4px 0;
}


.house-info i{

    color:#ff5361;
    font-size: 18px;
    margin: 10px 1px;

}

.house-price {
    text-align: right;
}

.house-price h4{

    font-size: 20px;
}

.house-price h4 span{

  font-size:16px;
  font-weight: 500;  
}


.sidebar{

   border:1px solid #999;
   padding: 20px 30px;
   margin-top: 30px;
}

.sidebar h2{
    font-weight: 500;
}

.sidebar h3{
    font-weight:500;
    margin:20px 0 10px;
}

.filter{
    display:flex;
    align-items: center;
    color:#555;
    margin-bottom:10px;
}

.filter p {
flex:1;   
}

.filter input{
    margin-right:15px;
    cursor:pointer;
}

.sidebar-link{

    text-align: right;
    margin:20px 0;
}

.sidebar-link a{
    text-decoration: none;
    
}

.pagination {
    display:flex;
    align-items: center;
    justify-content: center;
    margin:40 px 0;
}

.pagination img {
    width: 15px;
    margin: 10px 20px;
}

.right-arrow {
    transform: rotate(180deg);
}

.pagination span {

    margin: 10px 8px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align:center;
    border-radius:50%;
    cursor: pointer;
}

.pagination .current {
    background:#333;
    color:#fff;
}


/*------listing page for small screen devices ------*/
@media  only screen and (max-width:700px) {

.list-container{
    margin-top: 150px;
}


.left-col, .right-col, .house-img, .house-info {
    flex-basis:100%;}

.left-col h1{
    font-size:22px;}

.house-info h3{
    font-size:18px;}

.house-info i{font-size:16px;}

.pagination span {

    margin: 10px 2px;
    width: 30px;
    height:30px;
    line-height: 30px;
    font-size:12px;
}



}



/*------details page ------*/
.house-details{
    padding:0 12%;
}

.house-title{
    margin-top:50px;
}

.house-title h1{
    
    font-weight:600;
    
}


.house-title .row {
    display:flex;
    flex-wrap:wrap;
    align-items: center;
    margin:10px 0;
}


.house-title span{
    margin:0 20px;
}

.house-title i {
    color:#ff5361;
    font-size:14px;
}


.gallery{
    display:grid;
    grid-gap:10px;
    grid-template-areas: 'first first . .' 'first first . .';
margin: 20px 0;
}

.gallery div img {
    width:100%;
    display:block;
    border-radius:10px;
}

.gallery-img-1{
    grid-area: first;
}

.small-details h2{
font-weight: 500;

}

.small-details h4{
font-size: 22px;
text-align:right;
}

.line{
    border:0;
    height:1px;
    background-color: #ccc;
    width:100%;
    max-width: 800px;
margin:20px 0 50px;

}


.check-form {
    margin: 30px 0;
    background:#fff;
    box-shadow: 0 0 30px rgba(0,0,0,0.3);
    border-radius:8px;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    padding:10px 50px;
}

.check-form label{
    display:block;
}

.check-form div {
    padding:20px;

}

.check-form input{
    background:transparent;
    border:0;
    outline:none;
}

.check-form button{
   background-color: #ff5361;
   border:0;
   outline:none;
   color:#fff;
   padding:18px;
   width:350px;
   border-radius:8px;
   font-size:16px; ;
}

.guest-field{
    flex:1;
}

.details-list{
    list-style: none;
    margin:50px 0;
}

.details-list li{
    margin-left:50px;
    font-size:20px;
    font-weight:500;
    margin-bottom:30px;
    color:#555;
    position:relative;
}

.details-list li span{
    display:block;
    font-weight:400;
    font-size:16px;
}

.details-list li i{

 position:absolute;
    top:10px;
    left:-40px;
}

.home-desc{

    max-width:700px;
    margin-bottom:50px;
}

.map{

    margin:50px 0;
}

.map iframe{
    width:100%;
    margin-bottom:30px;
}

.map h3{

    font-size:26px;
    font-weight:500;
    margin-bottom:30px;
}

.map b{

    display:block;
    margin-bottom:16px;
}


.host{
display:flex;
align-items:center;

}

.host img{
    width:80px;
    border-radius:50%;
    margin-right:30px;
}   

.host h2{
    font-weight:500;
    margin-bottom:10px;
}

.host i{
    color:#ff5361;
}

.contact-host{

    display:inline-block;
    margin:40px 0 40px 120px;
text-decoration: none;;
color:#555;
padding: 15px 50px;
border:1px solid #ff5361;
border-radius:8px;
}


/*------media query for house details page ------*/
@media  only screen and (max-width:700px) {

.house-details{
   margin-top:150px;
}

.row p{
    margin-top:10px;
}

.gallery{
    grid-template-areas: 'first first''..' '..';
}


.small-details h2{
font-size:20px;
margin-top:24px;
}

.small-details h4{

    text-align: left;
    margin:10px 0;
    font-size:18px;
}

.check-form{
    padding:10px 30px;
}

.check-form div{

    padding:20px 0;
    width:100%;
}

.check-form input{
border-bottom: 1px solid #ccc;
width:100%;
padding-bottom:5px;

}

.check-form button{
    font-size:14px;
    margin-top:10px;
    margin-bottom:15px;
    border-radius:4px;
}

.host{
   display:block;
   line-height: 28px;

}

.contact-host{
margin:40px 0;


}

}