/* ===================================
   GOOGLE FONT
=================================== */

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

html{
    scroll-behavior:smooth;
}

body{
    background:#ffffff;
    color:#222;
}

/* ===================================
   VARIABLES
=================================== */

:root{

    --primary:#ff385c;
    --primary-dark:#e11d48;

    --text:#222;
    --light-text:#666;

    --border:#dddddd;

    --bg:#ffffff;
    --card:#ffffff;

    --shadow:0 10px 30px rgba(0,0,0,.08);

}

/* ===================================
   LINKS
=================================== */

a{
    text-decoration:none;
    color:inherit;
}

ul{
    list-style:none;
}

img{
    width:100%;
    display:block;
}

/* ===================================
   NAVBAR
=================================== */

.navbar{

    position:sticky;
    top:0;

    width:100%;

    background:#fff;

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:18px 8%;

    border-bottom:1px solid #eee;

    z-index:1000;

}

.logo{

    display:flex;
    align-items:center;
    gap:10px;

    font-size:26px;
    font-weight:700;

    color:var(--primary);

}

.logo i{

    font-size:28px;

}

.nav-links{

    display:flex;
    align-items:center;

    gap:35px;

}

.nav-links a{

    font-size:15px;
    font-weight:500;

    transition:.3s;

}

.nav-links a:hover{

    color:var(--primary);

}

.right-menu{

    display:flex;
    align-items:center;
    gap:15px;

}

.host-btn{

    background:none;

    border:none;

    font-size:15px;

    cursor:pointer;

    font-weight:600;

}

.menu-btn{

    width:45px;
    height:45px;

    border-radius:50%;

    border:1px solid #ddd;

    background:white;

    cursor:pointer;

    transition:.3s;

}

.menu-btn:hover{

    box-shadow:var(--shadow);

}

/* ===================================
   HERO
=================================== */

.hero{

    height:500px;

    background:linear-gradient(rgba(0,0,0,.45),
    rgba(0,0,0,.45)),
    url("https://images.unsplash.com/photo-1505693416388-ac5ce068fe85?w=1600");

    background-size:cover;
    background-position:center;

    display:flex;
    justify-content:center;
    align-items:center;

    text-align:center;

    color:white;

}

.hero-content{

    max-width:700px;

}

.hero h1{

    font-size:58px;

    margin-bottom:20px;

    font-weight:700;

}

.hero p{

    font-size:18px;

    line-height:1.8;

}

/* ===================================
   SEARCH
=================================== */

.search-section{

    margin-top:-40px;

    padding:0 8%;

    position:relative;

    z-index:5;

}

.search-box{

    background:#fff;

    border-radius:60px;

    box-shadow:0 15px 40px rgba(0,0,0,.15);

    display:grid;

    grid-template-columns:
    repeat(4,1fr)
    70px;

    overflow:hidden;

}

.field{

    padding:18px 25px;

    border-right:1px solid #eee;

}

.field:last-child{

    border:none;

}

.field label{

    display:block;

    font-size:13px;

    font-weight:600;

    margin-bottom:8px;

}

.field input,
.field select{

    width:100%;

    border:none;

    outline:none;

    font-size:15px;

    color:#555;

    background:transparent;

}

.search-btn{

    border:none;

    background:var(--primary);

    color:white;

    cursor:pointer;

    font-size:22px;

    transition:.3s;

}

.search-btn:hover{

    background:var(--primary-dark);

}

/* ===================================
   CATEGORIES
=================================== */

.categories{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:40px;

    padding:70px 8% 30px;

    overflow-x:auto;

}

.category{

    display:flex;

    flex-direction:column;

    align-items:center;

    cursor:pointer;

    color:#666;

    transition:.3s;

}

.category i{

    font-size:30px;

    margin-bottom:10px;

}

.category span{

    font-size:14px;

}

.category:hover{

    color:var(--primary);

    transform:translateY(-5px);

}

/* ===================================
   SECTION TITLE
=================================== */

.section-title{

    text-align:center;

    margin:40px 0;

}

.section-title h2{

    font-size:36px;

    margin-bottom:10px;

}

.section-title p{

    color:#777;

}

 
/* ===================================
   PROPERTY SECTION
=================================== */

.properties{

    padding:40px 8% 80px;

}


.property-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

}


/* ===================================
   PROPERTY CARD
=================================== */

.property-card{

    background:var(--card);

    border-radius:20px;

    overflow:hidden;

    cursor:pointer;

    transition:.3s;

}


.property-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow);

}


/* ===================================
   CARD IMAGE
=================================== */

.card-image{

    position:relative;

    height:260px;

    overflow:hidden;

}


.card-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.5s;

}


.property-card:hover .card-image img{

    transform:scale(1.08);

}


/* ===================================
   WISHLIST BUTTON
=================================== */

.wishlist-btn{

    position:absolute;

    top:15px;

    right:15px;

    width:42px;

    height:42px;

    border-radius:50%;

    border:none;

    background:white;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    font-size:20px;

    color:#555;

    box-shadow:0 5px 15px rgba(0,0,0,.15);

    transition:.3s;

}


.wishlist-btn:hover{

    color:var(--primary);

    transform:scale(1.1);

}



/* ===================================
   CARD CONTENT
=================================== */

.card-content{

    padding:20px;

}


.location-rating{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:10px;

}


.location-rating h3{

    font-size:18px;

    font-weight:600;

}


.location-rating span{

    font-size:14px;

    color:#555;

}


.card-content p{

    margin-top:8px;

    color:#666;

    font-size:14px;

}


.card-content .guest{

    font-size:13px;

}


.card-content h4{

    margin-top:15px;

    font-size:18px;

}


.card-content h4 small{

    font-size:14px;

    color:#777;

    font-weight:400;

}


/* ===================================
   FOOTER
=================================== */


.footer{

    background:#111;

    color:white;

    padding:60px 8% 20px;

}


.footer-container{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:40px;

}


.footer-box h3{

    font-size:28px;

    color:var(--primary);

    margin-bottom:15px;

}


.footer-box h4{

    font-size:18px;

    margin-bottom:20px;

}


.footer-box p{

    color:#bbb;

    line-height:1.8;

}


.footer-box a{

    display:block;

    color:#bbb;

    margin-bottom:12px;

    transition:.3s;

}


.footer-box a:hover{

    color:white;

}


.social{

    display:flex;

    gap:15px;

}


.social i{

    width:40px;

    height:40px;

    border-radius:50%;

    background:#222;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    transition:.3s;

}


.social i:hover{

    background:var(--primary);

}


.copyright{

    margin-top:40px;

    padding-top:20px;

    border-top:1px solid #333;

    text-align:center;

    color:#aaa;

    font-size:14px;

}

 
/* ===================================
   RESPONSIVE DESIGN
=================================== */


/* Large Tablet */

@media(max-width:1100px){

    .navbar{

        padding:18px 5%;

    }


    .nav-links{

        gap:20px;

    }


    .hero h1{

        font-size:45px;

    }


    .search-box{

        grid-template-columns:repeat(2,1fr);

        border-radius:25px;

    }


    .search-btn{

        height:60px;

    }


    .property-grid{

        grid-template-columns:repeat(3,1fr);

    }


    .footer-container{

        grid-template-columns:repeat(2,1fr);

    }

}



/* Tablet */

@media(max-width:768px){


    .navbar{

        padding:15px 5%;

    }


    .nav-links{

        display:none;

    }


    .host-btn{

        display:none;

    }


    .logo{

        font-size:22px;

    }


    .hero{

        height:400px;

    }


    .hero h1{

        font-size:36px;

    }


    .hero p{

        font-size:15px;

        padding:0 20px;

    }


    .search-section{

        margin-top:-30px;

        padding:0 5%;

    }


    .search-box{

        display:flex;

        flex-direction:column;

        border-radius:25px;

    }


    .field{

        border-right:none;

        border-bottom:1px solid #eee;

    }


    .search-btn{

        height:60px;

        border-radius:0 0 25px 25px;

    }


    .categories{

        justify-content:flex-start;

        padding:50px 5% 20px;

        gap:30px;

    }


    .properties{

        padding:30px 5%;

    }


    .property-grid{

        grid-template-columns:repeat(2,1fr);

        gap:20px;

    }


    .section-title h2{

        font-size:28px;

    }


}



/* Mobile */

@media(max-width:480px){


    .right-menu{

        gap:5px;

    }


    .menu-btn{

        width:40px;

        height:40px;

    }


    .hero{

        height:350px;

    }


    .hero h1{

        font-size:30px;

    }


    .hero p{

        font-size:14px;

    }


    .categories{

        gap:25px;

    }


    .category i{

        font-size:25px;

    }


    .category span{

        font-size:12px;

    }


    .property-grid{

        grid-template-columns:1fr;

    }


    .card-image{

        height:230px;

    }


    .footer{

        padding:40px 5% 20px;

    }


    .footer-container{

        grid-template-columns:1fr;

        gap:30px;

    }


}



/* ===================================
   ANIMATIONS
=================================== */


@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(30px);

    }


    to{

        opacity:1;

        transform:translateY(0);

    }

}


.hero-content{

    animation:fadeUp .8s ease;

}


.property-card{

    animation:fadeUp .6s ease;

}



/* ===================================
   SCROLLBAR STYLE
=================================== */


::-webkit-scrollbar{

    width:10px;

}


::-webkit-scrollbar-track{

    background:#f1f1f1;

}


::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:10px;

}

.property-card{

    text-decoration:none;

    color:inherit;

    display:block;

}